Vivamos los Juegos — XIII Suramericanos 2026 (Alumnos)
by SolarGamer111182 lines70.7 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Vivamos los Juegos — XIII Suramericanos 2026 (Alumnos)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@400;700;800;900&family=Inter:wght@600&display=swap" rel="stylesheet">
<!-- Google Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* ============================================================
TOKENS
============================================================ */
:root{
--main-gradient: linear-gradient(45deg, #ff7402, #e42153 20%, #3c3ae5);
--fire: #ff7402;
--border: rgba(255,255,255,.1);
--card2: rgba(20,16,50,.8);
--magenta: #e42153;
--violet: #3c3ae5;
--teal: #00b4a6;
--sky: #0099cc;
--gold: #ffb800;
--ok: #22c55e;
--err: #ef4444;
--text: #ffffff;
--muted: rgba(255,255,255,.55);
--border: rgba(255,255,255,.1);
--card2: rgba(20,16,50,.8);
}
/* ============================================================
BASE
============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background: linear-gradient(135deg, #0f0220 0%, #1a0535 40%, #0a1040 100%);
color: var(--text);
font-family:'Nunito',sans-serif;
min-height:100vh;
overflow-x:hidden;
}
body::before{
content:'';position:fixed;inset:0;
background:
radial-gradient(ellipse 70% 50% at 10% 0%, rgba(255,116,2,.18) 0%, transparent 55%),
radial-gradient(ellipse 60% 60% at 90% 100%, rgba(60,58,229,.22) 0%, transparent 55%),
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(228,33,83,.08) 0%, transparent 60%);
pointer-events:none;z-index:0;
}
/* ============================================================
APP (visible siempre)
============================================================ */
#app{
position:relative;
z-index:1;
min-height:100vh;
display: block; /* siempre visible */
}
.app-header{
background:rgba(5,3,18,.92);backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.08);
position:sticky;top:0;z-index:100;padding:0 20px;
box-shadow: 0 1px 0 rgba(255,116,2,.3), 0 4px 20px rgba(0,0,0,.4);
}
.app-header::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--fire),var(--magenta),var(--violet));
}
.app-header-inner{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:14px;height:62px}
/* Back button oculto porque es solo alumnos, pero lo dejamos invisible o lo cambiamos por información */
.back-btn{
visibility: hidden;
opacity: 0;
width: 0;
margin: 0;
padding: 0;
pointer-events: none;
display: none;
}
.app-title{
font-family:'Bebas Neue',sans-serif;
font-size:1.5rem;
letter-spacing:3px;
flex:1;
text-align:center;
background:linear-gradient(90deg,var(--fire),var(--magenta));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.app-title.student{
background:linear-gradient(90deg,var(--fire),var(--magenta));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* ============================================================
TABS
============================================================ */
.tabs-bar{
background:rgba(5,3,18,.8);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.07);
overflow-x:auto;white-space:nowrap;
}
.tabs-bar::-webkit-scrollbar{height:3px}
.tabs-bar::-webkit-scrollbar-thumb{background:var(--fire);border-radius:3px}
.tabs-inner{max-width:980px;margin:0 auto;display:flex;gap:4px;padding:10px 16px}
.tab-btn{
background:transparent;border:none;border-radius:30px;
color:rgba(255,255,255,.5);cursor:pointer;
font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:800;
padding:9px 14px;transition:all .25s;white-space:nowrap;
text-transform:uppercase;letter-spacing:.8px;
}
.tab-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.tab-btn.active{
background:linear-gradient(135deg,var(--fire),var(--magenta));
color:#fff;box-shadow:0 3px 18px rgba(255,116,2,.4);
}
.tab-btn.active.teal{
background:linear-gradient(135deg,var(--teal),var(--sky));
box-shadow:0 3px 18px rgba(0,180,166,.4);
}
/* ============================================================
LAYOUT
============================================================ */
.page-wrap{max-width:980px;margin:0 auto;padding:28px 20px}
.section{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* ============================================================
CARDS
============================================================ */
.card{
background: rgba(255,255,255,0.06);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
padding: 28px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
color: #fff;
}
.card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--fire),var(--magenta),var(--violet));
}
.card-title{
font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:2px;
background:linear-gradient(90deg,var(--gold),var(--fire));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
margin-bottom:8px;
}
.card-desc{color:rgba(255,255,255,.65);font-size:.92rem;line-height:1.6;margin-bottom:18px}
.prog-bar{height:6px;background:rgba(255,255,255,.1);border-radius:6px;margin-bottom:20px;overflow:hidden}
.prog-fill{height:100%;border-radius:6px;transition:width .4s;background:linear-gradient(90deg,var(--fire),var(--magenta))}
.score-pill{
display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(135deg,var(--fire),var(--magenta));
border-radius:30px;font-size:.82rem;font-weight:800;padding:6px 16px;color:#fff;
box-shadow:0 4px 14px rgba(255,116,2,.35);
}
/* ============================================================
TRIVIA
============================================================ */
.q-text{font-size:1.05rem;font-weight:800;line-height:1.5;margin-bottom:18px;color:#fff}
.opt-grid{display:grid;gap:9px}
.opt{
background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);
border-radius:14px;color:#fff;cursor:pointer;
font-family:'Nunito',sans-serif;font-size:.92rem;font-weight:700;
padding:14px 18px;text-align:left;transition:all .22s;width:100%;
}
.opt:hover:not(:disabled){border-color:var(--fire);background:rgba(255,116,2,.13);color:#fff;}
.opt.correct{background:rgba(34,197,94,.2)!important;border-color:var(--ok)!important;color:#fff!important;}
.opt.wrong{background:rgba(239,68,68,.2)!important;border-color:var(--err)!important;color:#fff!important;}
.opt:disabled{cursor:not-allowed;opacity:.65}
.fb{margin-top:12px;font-size:.88rem;font-weight:700;min-height:22px;color:rgba(255,255,255,.6);}
.tq-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
/* ============================================================
MEMORY
============================================================ */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:400px;margin:0 auto}
.mc{aspect-ratio:1;cursor:pointer;perspective:600px;border-radius:14px}
.mc-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .45s;border-radius:14px}
.mc.flipped .mc-inner{transform:rotateY(180deg)}
.mc-f,.mc-b{
position:absolute;inset:0;border-radius:14px;
display:flex;align-items:center;justify-content:center;
backface-visibility:hidden;border:2px solid rgba(255,255,255,.15);
}
.mc-f{
background:linear-gradient(135deg,var(--fire),var(--magenta));
font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;
color:#fff;
text-shadow:0 1px 4px rgba(0,0,0,.4);
box-shadow:0 4px 16px rgba(228,33,83,.3);
}
.mc-b{
background:rgba(20,16,50,.9);transform:rotateY(180deg);
font-size:1.6rem;flex-direction:column;gap:3px;
border-color:rgba(255,255,255,.15);
}
.mc-b span{
font-size:.5rem;font-weight:800;color:rgba(255,255,255,.6);
text-transform:uppercase;letter-spacing:.5px;text-align:center;
}
.mc.matched .mc-b{
border-color:var(--ok);
box-shadow:0 0 18px rgba(34,197,94,.3);
background:rgba(34,197,94,.12);
}
.mem-stats{display:flex;gap:12px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.stat-pill{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
border-radius:30px;font-size:.8rem;font-weight:800;padding:6px 16px;color:var(--gold);
}
/* ============================================================
COUNTRIES
============================================================ */
.flag-big{
text-align:center;display:flex;align-items:center;justify-content:center;
min-height:160px;padding:20px;font-size:100px;line-height:1;transition:all .3s ease;
}
.flag-hint{text-align:center;color:rgba(255,255,255,.55);font-size:.85rem;margin-bottom:14px}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.flag-img{max-width:240px;max-height:140px;object-fit:contain;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.5)}
/* ============================================================
VALUES
============================================================ */
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.val-card{
background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);
border-radius:20px;cursor:pointer;padding:22px;text-align:center;transition:all .3s;
}
.val-card:hover{transform:translateY(-5px);border-color:var(--fire);background:rgba(255,116,2,.1);}
.val-card.open{border-color:var(--magenta);background:rgba(228,33,83,.1);}
.val-icon{font-size:2.2rem;margin-bottom:8px;display:block}
.val-name{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:2px;color:var(--gold)}
.val-desc{color:rgba(255,255,255,.6);font-size:.82rem;margin-top:10px;line-height:1.55;max-height:0;overflow:hidden;transition:max-height .4s}
.val-card.open .val-desc{max-height:200px}
/* ============================================================
CHALLENGE
============================================================ */
.challenge-cat-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:30px}
.cat-card{
background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);
border-radius:22px;cursor:pointer;padding:30px 24px;transition:all .3s;text-align:center;
}
.cat-card:hover{transform:translateY(-6px);}
.cat-sport{border-color:rgba(255,116,2,.35);}
.cat-sport:hover{border-color:var(--fire);background:rgba(255,116,2,.08);}
.cat-values{border-color:rgba(0,180,166,.35);}
.cat-values:hover{border-color:var(--teal);background:rgba(0,180,166,.08);}
.cat-card .cc-icon{font-size:3rem;margin-bottom:14px;display:block}
.cat-card h3{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:2px;margin-bottom:6px;color:#fff;}
.cat-sport h3{color:var(--fire)}
.cat-values h3{color:var(--teal)}
.cat-card p{color:rgba(255,255,255,.55);font-size:.83rem;line-height:1.5}
.cat-badge{display:inline-block;border-radius:20px;font-size:.72rem;font-weight:800;padding:4px 12px;margin-top:10px;text-transform:uppercase;letter-spacing:.5px}
.cb-active{background:rgba(255,116,2,.2);color:var(--fire)}
.cb-done{background:rgba(34,197,94,.2);color:var(--ok)}
/* LEVEL MAP */
.level-map{padding:10px 0}
.lm-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.lm-back{
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:12px;color:rgba(255,255,255,.65);cursor:pointer;
font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:800;
padding:8px 14px;transition:all .2s;
}
.lm-back:hover{color:#fff;background:rgba(255,255,255,.13);}
.lm-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:2px;color:#fff;}
.levels-path{display:flex;flex-direction:column;gap:0;max-width:500px;margin:0 auto}
.level-node{display:flex;align-items:center;gap:18px;padding:16px 0;cursor:pointer}
.level-node.locked-node{opacity:.45;cursor:not-allowed}
.ln-circle{
width:72px;height:72px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:1.6rem;flex-shrink:0;transition:all .3s;border:3px solid transparent;
}
.ln-circle.locked{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);filter:grayscale(1)}
.ln-circle.unlocked{
background:linear-gradient(135deg,var(--fire),var(--magenta));
border-color:var(--fire);box-shadow:0 0 24px rgba(255,116,2,.45);
}
.ln-circle.completed{background:linear-gradient(135deg,var(--ok),#16a34a);border-color:var(--ok)}
.ln-circle.boss{background:linear-gradient(135deg,var(--gold),#e65c00);border-color:var(--gold)}
.ln-info{flex:1}
.ln-info h4{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:1.5px;margin-bottom:4px;color:#fff;}
.ln-info p{color:rgba(255,255,255,.5);font-size:.8rem;line-height:1.4}
.ln-stars{color:var(--gold);font-size:1rem;margin-top:4px}
/* CHALLENGE SCREEN */
.chal-screen{padding:0}
.chal-top-bg{
background:rgba(255,255,255,.06);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.1);
border-radius:20px 20px 0 0;padding:18px 18px 10px;margin-bottom:0;
}
.chal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.chal-enun{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:0;padding:0 2px 8px;}
.chal-back{
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:12px;color:rgba(255,255,255,.65);cursor:pointer;
font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:800;padding:8px 14px;transition:all .2s;
}
.chal-back:hover{color:#fff;background:rgba(255,255,255,.13);}
.chal-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:2px;color:var(--gold)}
.chal-lives{display:flex;gap:4px;font-size:1.2rem}
.chal-body{
background:rgba(255,255,255,.05);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.1);
border-radius:20px;padding:22px;margin-bottom:16px;
}
/* RIDDLE */
.riddle-box{
background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.15);
backdrop-filter:blur(6px);border-radius:14px;padding:16px;
}
.riddle-label{font-size:.72rem;font-weight:800;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.riddle-text{font-size:1rem;font-weight:700;color:#fff;line-height:1.6}
.riddle-clues{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.clue-item{
font-size:.85rem;color:rgba(255,255,255,.65);padding:7px 12px;
background:rgba(255,255,255,.05);border-radius:8px;border-left:3px solid var(--gold);
}
.answer-input{
background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.2);
color:#fff;border-radius:12px;padding:12px 16px;width:100%;font-family:'Nunito',sans-serif;
font-size:.95rem;outline:none;transition:all .2s;text-transform:uppercase;letter-spacing:1px;text-align:center;
}
.answer-input:focus{border-color:var(--fire);background:rgba(255,116,2,.07);}
.answer-input.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.answer-input.glow{border-color:var(--ok);background:rgba(34,197,94,.08);}
.hint-btn{
background:rgba(255,184,0,.12);border:1px solid rgba(255,184,0,.35);
border-radius:12px;color:var(--gold);cursor:pointer;
font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:800;padding:9px 18px;transition:all .2s;
}
.hint-btn:hover{background:rgba(255,184,0,.22);}
.hint-btn:disabled{opacity:.35;cursor:not-allowed}
/* ORDER */
.order-bank{
display:flex;flex-wrap:wrap;gap:8px;min-height:44px;margin-bottom:12px;
background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12);
border-radius:12px;padding:10px;
}
.order-answer{
display:flex;flex-wrap:wrap;gap:8px;min-height:44px;
background:rgba(255,116,2,.06);border:2px dashed rgba(255,116,2,.3);
border-radius:12px;padding:10px;margin-bottom:14px;
}
.order-chip{
background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);
border-radius:30px;cursor:pointer;font-size:.82rem;font-weight:800;
padding:7px 16px;transition:all .2s;color:#fff;user-select:none;
}
.order-chip:hover{border-color:var(--fire);background:rgba(255,116,2,.18);}
.order-chip.placed{background:rgba(255,116,2,.18);border-color:var(--fire);}
.order-chip.correct-chip{border-color:var(--ok);background:rgba(34,197,94,.18);color:#fff;}
.order-chip.wrong-chip{border-color:var(--err);background:rgba(239,68,68,.18);color:#fff;}
/* WIN / RESULT */
.level-win{text-align:center;padding:30px 10px}
.win-stars{font-size:3rem;letter-spacing:8px;margin-bottom:14px}
.win-title{
font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:3px;
background:linear-gradient(135deg,var(--fire),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
line-height:1;margin-bottom:6px;
}
.win-msg{color:rgba(255,255,255,.6);font-size:.95rem;margin-bottom:22px;line-height:1.6}
.xp-bar{background:rgba(255,255,255,.1);border-radius:10px;height:14px;overflow:hidden;margin:0 auto 22px;max-width:300px}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--fire),var(--gold));border-radius:10px;transition:width 1s ease .3s}
.final-win{text-align:center;padding:40px 10px}
.trophy{font-size:6rem;display:block;animation:trophy-bounce 1s ease infinite alternate}
@keyframes trophy-bounce{0%{transform:scale(1) rotate(-3deg)}100%{transform:scale(1.08) rotate(3deg)}}
.fw-title{
font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,8vw,5rem);letter-spacing:4px;
background:linear-gradient(135deg,var(--gold),var(--fire));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
line-height:.9;margin:14px 0 8px;
}
.fw-sub{color:rgba(255,255,255,.65);font-size:1rem;font-weight:700;margin-bottom:26px;line-height:1.6}
.res-screen{text-align:center;padding:24px 0}
.res-num{
font-family:'Bebas Neue',sans-serif;font-size:5rem;
background:linear-gradient(135deg,var(--fire),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;
}
.res-lbl{color:rgba(255,255,255,.6);font-size:.92rem;font-weight:700;margin-bottom:18px}
/* CONFETTI */
.confetti-cont{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.conf{position:absolute;width:8px;height:8px;border-radius:2px;animation:conf-fall linear forwards}
@keyframes conf-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.btn{
background: linear-gradient(135deg, #ff7402, #e42153 50%, #3c3ae5);
border: none;
border-radius: 40px;
color: #fff;
cursor: pointer;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: .9rem;
padding: 13px 28px;
box-shadow: 0 6px 22px rgba(255,116,2,.35);
transition: all .25s cubic-bezier(0.34,1.56,0.64,1);
text-transform: uppercase;
letter-spacing: .5px;
}
.btn:hover{
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 32px rgba(255,116,2,.5);
}
.btn:active{transform:translateY(-1px) scale(1.01);}
.btn.teal-btn{
background:linear-gradient(135deg,var(--teal),var(--sky));
box-shadow:0 5px 18px rgba(0,180,166,.35);
}
.btn.teal-btn:hover{box-shadow:0 10px 28px rgba(0,180,166,.5);}
.btn.ghost{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
box-shadow:none;color:rgba(255,255,255,.75);
}
.btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px);}
.btn.gold-btn{
background:linear-gradient(135deg,var(--gold),var(--fire));
box-shadow:0 5px 18px rgba(255,184,0,.35);
}
.btn.gold-btn:hover{box-shadow:0 10px 28px rgba(255,184,0,.5);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:flex-end}
footer{
text-align:center;padding:36px 20px;
color:rgba(255,255,255,.35);font-size:.8rem;position:relative;z-index:1;
}
footer strong{color:var(--fire)}
</style>
</head>
<body>
<div id="app">
<div class="app-header">
<div class="app-header-inner">
<button class="back-btn" id="btn-back" style="display:none">← Inicio</button>
<div class="app-title" id="app-title">🏅 VIVAMOS LOS JUEGOS</div>
</div>
</div>
<div class="tabs-bar">
<div class="tabs-inner" id="tabs-inner"></div>
</div>
<div class="page-wrap" id="page-wrap"></div>
</div>
<footer>
<strong>Vivamos los Juegos</strong> · XIII Juegos Suramericanos Santa Fe 2026<br>
Comité Olímpico Argentino + Ministerio de Educación de Santa Fe
</footer>
<div class="confetti-cont" id="confetti-cont"></div>
<script>
// ============================================================
// FLAGS & DATA
// ============================================================
const FLAG_SVG = {
ar: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjNzRBQ0RGIi8+PHJlY3QgeT0iNDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNDAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB5PSI4MCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MCIgZmlsbD0iIzc0QUNERiIvPjxjaXJjbGUgY3g9IjEwMCIgY3k9IjYwIiByPSIxMiIgZmlsbD0iI0ZDQzgxOSIvPjwvc3ZnPg==",
br: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzAwN0MzRiIvPjxwb2x5Z29uIHBvaW50cz0iMTAwLDIwIDE3MCw2MCAxMDAsMTAwIDMwLDYwIiBmaWxsPSIjRkZDQzAwIi8+PGNpcmNsZSBjeD0iMTAwIiBjeT0iNjAiIHI9IjIwIiBmaWxsPSIjMDAyQjdGIi8+PC9zdmc+",
cl: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMDAzQTcwIi8+PHJlY3QgeT0iNjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNjAiIGZpbGw9IiNFRjNCMkQiLz48cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIGZpbGw9IiNGRkZGRkYiLz48cG9seWdvbiBwb2ludHM9IjMwLDE1IDM2LDMzIDU1LDMzIDQwLDQ0IDQ2LDYzIDMwLDUyIDE0LDYzIDIwLDQ0IDUsMzMgMjQsMzMiIGZpbGw9IiNFRjNCMkQiLz48L3N2Zz4=",
co: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjRkZDQzAwIi8+PHJlY3QgeT0iNjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMzAiIGZpbGw9IiMwMDMzOTkiLz48cmVjdCB5PSI5MCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI0NFMTEyNiIvPjwvc3ZnPg==",
uy: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iI0ZGRkZGRiIvPjxyZWN0IHk9IjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTUiIGZpbGw9IiMwMDM4OEYiLz48cmVjdCB5PSIzMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIxNSIgZmlsbD0iIzAwMzg4RiIvPjxyZWN0IHk9IjYwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1IiBmaWxsPSIjMDAzODhGIi8+PHJlY3QgeT0iOTAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTUiIGZpbGw9IiMwMDM4OEYiLz48cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIGZpbGw9IiNGRkZGRkYiLz48Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSIxMiIgZmlsbD0iI0ZGQjgxQyIvPjwvc3ZnPg==",
pe: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNjYiIGhlaWdodD0iMTIwIiBmaWxsPSIjQ0UxMTI2Ii8+PHJlY3QgeD0iNjYiIHdpZHRoPSI2OCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSIxMzQiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNDRTExMjYiLz48L3N2Zz4=",
bo: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjQ0UxMTI2Ii8+PHJlY3QgeT0iNDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNDAiIGZpbGw9IiNGNkQ5MTAiLz48cmVjdCB5PSI4MCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MCIgZmlsbD0iIzAwN0EzRCIvPjwvc3ZnPg==",
ec: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjRkZEMTAwIi8+PHJlY3QgeT0iNjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMzAiIGZpbGw9IiMwMDMzOTkiLz48cmVjdCB5PSI5MCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzMCIgZmlsbD0iI0NDMDAwMSIvPjwvc3ZnPg==",
py: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjQ0UxMTI2Ii8+PHJlY3QgeT0iNDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNDAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB5PSI4MCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MCIgZmlsbD0iIzAxMEVBMCIvPjxjaXJjbGUgY3g9IjEwMCIgY3k9IjYwIiByPSIxMiIgZmlsbD0iI0Y3RUMwMCIvPjwvc3ZnPg==",
ve: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjQ0YxNDJCIi8+PHJlY3QgeT0iNDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNDAiIGZpbGw9IiMwMDMzOTkiLz48cmVjdCB5PSI4MCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MCIgZmlsbD0iI0NGMTQyQiIvPjxyZWN0IHk9IjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNDAiIGZpbGw9IiNGRkNBMDAiLz48L3N2Zz4=",
pa: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjRkZGRkZGIi8+PHJlY3QgeD0iMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjREExNjI1Ii8+PHJlY3QgeT0iNjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iNjAiIGZpbGw9IiMwMDMzQTEiLz48cmVjdCB4PSIxMDAiIHk9IjYwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+",
gy: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzAwOTczNSIvPjxwb2x5Z29uIHBvaW50cz0iMCwwIDE2MCw2MCAwLDEyMCIgZmlsbD0iI0ZGQ0MwMCIvPjxwb2x5Z29uIHBvaW50cz0iMCwxMCAxMzAsNjAgMCwxMTAiIGZpbGw9IiNGRkZGRkYiLz48cG9seWdvbiBwb2ludHM9IjAsMjAgMTAwLDYwIDAsMTAwIiBmaWxsPSIjQ0UxMTI2Ii8+PC9zdmc+",
sr: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjI0IiBmaWxsPSIjMzc3RTNGIi8+PHJlY3QgeT0iMjQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB5PSI0OCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0IzMDkyMSIvPjxyZWN0IHk9IjcyIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjI0IiBmaWxsPSIjRkZGRkZGIi8+PHJlY3QgeT0iOTYiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjQiIGZpbGw9IiMzNzdFM0YiLz48cG9seWdvbiBwb2ludHM9IjEwMCwzNSAxMDgsNDggMTIzLDQ4IDExMiw1NiAxMTYsNzIgMTAwLDYzIDg0LDcyIDg4LDU2IDc3LDQ4IDkyLDQ4IiBmaWxsPSIjRkZGMDAwIi8+PC9zdmc+",
aw: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzAwOTlDNyIvPjxyZWN0IHk9IjkwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1IiBmaWxsPSIjRkZCODFDIi8+PHJlY3QgeT0iMTA1IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1IiBmaWxsPSIjRkZCODFDIi8+PHBvbHlnb24gcG9pbnRzPSIyNSwyNSAzMSwxMiAzNywyNSA0NywyNiAzOSwzMyA0MSw0MyAzMSwzNyAyMSw0MyAyMywzMyAxNSwyNiIgZmlsbD0iI0ZGRkZGRiIvPjwvc3ZnPg==",
cw: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzAwMkI3RiIvPjxyZWN0IHk9Ijg0IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4IiBmaWxsPSIjRjlFMTAwIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI0MCIgcj0iMTAiIGZpbGw9IiNGRkZGRkYiLz48Y2lyY2xlIGN4PSI3MCIgY3k9IjMwIiByPSI3IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+"
};
const FLAG_REMOTE = {
ar:"https://flagcdn.com/w320/ar.png", br:"https://flagcdn.com/w320/br.png", cl:"https://flagcdn.com/w320/cl.png",
co:"https://flagcdn.com/w320/co.png", uy:"https://flagcdn.com/w320/uy.png", pe:"https://flagcdn.com/w320/pe.png",
bo:"https://flagcdn.com/w320/bo.png", ec:"https://flagcdn.com/w320/ec.png", py:"https://flagcdn.com/w320/py.png",
ve:"https://flagcdn.com/w320/ve.png", pa:"https://flagcdn.com/w320/pa.png", gy:"https://flagcdn.com/w320/gy.png",
sr:"https://flagcdn.com/w320/sr.png", aw:"https://flagcdn.com/w320/aw.png", cw:"https://flagcdn.com/w320/cw.png"
};
const FLAG_EMOJI = {
ar:"🇦🇷", br:"🇧🇷", cl:"🇨🇱", co:"🇨🇴", uy:"🇺🇾",
pe:"🇵🇪", bo:"🇧🇴", ec:"🇪🇨", py:"🇵🇾", ve:"🇻🇪",
pa:"🇵🇦", gy:"🇬🇾", sr:"🇸🇷", aw:"🇦🇼", cw:"🇨🇼"
};
const TRIVIA = [
{q:"¿En qué año y mes se realizan los XIII Juegos Suramericanos?",opts:["Septiembre 2026","Mayo 2026","Noviembre 2025","Agosto 2027"],ans:0,exp:"Del 12 al 26 de septiembre de 2026 en Santa Fe."},
{q:"¿En cuántas ciudades de Santa Fe se realizarán los Juegos?",opts:["2 ciudades","3 ciudades","4 ciudades","1 ciudad"],ans:1,exp:"Rosario, Santa Fe capital y Rafaela son las 3 sedes."},
{q:"¿Cuántos países participarán de los XIII Juegos Suramericanos?",opts:["10 países","12 países","15 países","20 países"],ans:2,exp:"Participan 15 países de América del Sur y el Caribe."},
{q:"¿Cuál es el nombre de la mascota oficial de los Juegos?",opts:["SURI","CAPI","CARPINCHO","CARLI"],ans:1,exp:"CAPI es la mascota oficial, un carpincho con uniforme deportivo."},
{q:"¿Cuáles son los 3 valores centrales del Movimiento Olímpico?",opts:["Velocidad, Fuerza, Resistencia","Respeto, Amistad, Excelencia","Honor, Gloria, Nación","Salud, Belleza, Armonía"],ans:1,exp:"El Olimpismo se basa en Respeto, Amistad y Excelencia."},
{q:"¿Cuántos deportes tiene el programa de los Juegos 2026?",opts:["30 deportes","40 deportes","50 deportes","60 deportes"],ans:2,exp:"El programa incluye 50 deportes y 60 disciplinas deportivas."},
{q:"¿Qué programa educativo internacional respalda 'Vivamos los Juegos'?",opts:["UNESCO","COI (Comité Olímpico Internacional)","FIFA","CONMEBOL"],ans:1,exp:"El COI (Comité Olímpico Internacional) respalda 'Vivamos los Juegos'."},
{q:"¿Cuántos atletas aproximadamente participarán en los Juegos?",opts:["Más de 1000","Más de 2000","Más de 4000","Más de 8000"],ans:2,exp:"Se espera la participación de más de 4000 atletas."},
{q:"¿Cuántos días de competencia tienen los Juegos?",opts:["10 días","15 días","20 días","30 días"],ans:1,exp:"Del 12 al 26 de septiembre son exactamente 15 días."},
{q:"¿Cuál de estos deportes SÍ está en el programa de los Juegos 2026?",opts:["Fútbol Americano","Karting","Béisbol","Motociclismo"],ans:2,exp:"El Béisbol sí forma parte del programa oficial de los Juegos."}
];
const COUNTRIES = [
{name:"Argentina", code:"ar"},{name:"Brasil", code:"br"},{name:"Chile", code:"cl"},
{name:"Colombia", code:"co"},{name:"Uruguay", code:"uy"},{name:"Perú", code:"pe"},
{name:"Bolivia", code:"bo"},{name:"Ecuador", code:"ec"},{name:"Paraguay", code:"py"},
{name:"Venezuela", code:"ve"},{name:"Panamá", code:"pa"},{name:"Guyana", code:"gy"},
{name:"Suriname", code:"sr"},{name:"Aruba", code:"aw"},{name:"Curaçao", code:"cw"}
];
const VALUES_DATA = [
{icon:"🙏",name:"Respeto",desc:"Valorar al rival, al árbitro y las reglas. Respetar es reconocer al otro como igual, sin importar su origen o nivel."},
{icon:"🌟",name:"Excelencia",desc:"Dar lo mejor de uno mismo. No solo ganar: mejorar constantemente, aprender de los errores y superarse con esfuerzo."},
{icon:"⚖️",name:"Juego Limpio",desc:"Competir con honestidad y fair play. Ganar importa, pero cómo ganás importa más. El deporte sin integridad pierde su valor."},
{icon:"😄",name:"Alegría del Esfuerzo",desc:"Encontrar satisfacción en el proceso de entrenar y superarse. La alegría no está solo en el podio, sino en cada intento."},
{icon:"🧘",name:"Equilibrio",desc:"Integrar cuerpo, mente y voluntad. Los grandes atletas cuidan su salud mental tanto como la física."}
];
const CHALLENGES = {
sports:{
label:"Camino Deportivo",icon:"🏅",color:"var(--fire)",
levels:[
{id:0,title:"Nivel 1 — El Desafío del Atleta",icon:"🏃",type:"riddle",
intro:"Sos parte de la delegación argentina. Para competir, ¡necesitás conocer los Juegos!",
tasks:[
{type:"riddle",riddle:"Soy un evento multideportivo que se celebra en Sudamérica cada 4 años. En 2026 llego a Santa Fe. Tengo 50 deportes y más de 4000 atletas. ¿Qué soy?",
clues:["Empezamos en 1978 en La Paz, Bolivia","Me llaman los Juegos del continente sur","Mi edición 2026 es la número XIII"],
answer:"JUEGOS SURAMERICANOS",altAnswers:["XIII JUEGOS SURAMERICANOS","LOS JUEGOS SURAMERICANOS","SURAMERICANOS"]},
{type:"choice",question:"¿En cuáles de estas ciudades se realizarán los Juegos 2026?",
opts:["Buenos Aires, Córdoba, Mendoza","Rosario, Santa Fe, Rafaela","Rosario, Buenos Aires, Santa Fe","Santa Fe, Rafaela, Córdoba"],
correct:1,explain:"Las 3 sedes son Rosario, Santa Fe capital y Rafaela."}
]},
{id:1,title:"Nivel 2 — El Vestuario",icon:"🎽",type:"mixed",
intro:"¡Superaste el primer control! Ahora demostrá que conocés los deportes.",
tasks:[
{type:"order",instruction:"Ordená estos deportes de menor a mayor duración típica de competencia:",
items:["Atletismo 100m","Natación 50m libre","Maratón","Triatlón"],
correct:["Atletismo 100m","Natación 50m libre","Maratón","Triatlón"]},
{type:"choice",question:"¿Cuál de estos NO es un deporte del programa de los Juegos 2026?",
opts:["Lacrosse","Ciclismo","Levantamiento de Pesas","Hockey"],correct:0,
explain:"El Lacrosse no está en el programa 2026. Sí están Ciclismo, Levantamiento de Pesas y Hockey."}
]},
{id:2,title:"Nivel 3 — La Cancha",icon:"🏟️",type:"mixed",
intro:"¡Casi llegás al podio! Demostrá que conocés los países y el espíritu olímpico.",
tasks:[
{type:"choice",question:"¿Cuántos países participan en los XIII Juegos Suramericanos 2026?",
opts:["10 países","12 países","15 países","18 países"],correct:2,
explain:"Son 15 países: Argentina, Aruba, Bolivia, Brasil, Chile, Colombia, Curaçao, Ecuador, Guyana, Panamá, Paraguay, Perú, Suriname, Uruguay y Venezuela."},
{type:"choice",question:"Un jugador se enoja cuando pierde, pero luego se disculpa con su rival. ¿Qué pilar se relaciona más?",
opts:["Juego Limpio","Practicar el Respeto","Búsqueda de la Excelencia"],correct:1,
explain:"Disculparse y reconocer el error es la esencia de Practicar el Respeto."}
]},
{id:3,title:"FINAL — El Podio 🥇",icon:"🏆",type:"boss",
intro:"¡Este es el desafío final! Demostrá que sos el/la campeón/a de los Juegos Suramericanos.",
tasks:[
{type:"choice",question:"¿Qué significa el lema olímpico 'Citius, Altius, Fortius'?",
opts:["Rápido, Alto, Fuerte","Más rápido, Más alto, Más fuerte","Velocidad, Altura, Fuerza","Correr, Saltar, Luchar"],
correct:1,explain:"El lema olímpico significa 'Más rápido, Más alto, Más fuerte'."},
{type:"order",instruction:"Organizá el orden correcto de una Ceremonia de Apertura olímpica:",
items:["Encendido del pebetero","Desfile de delegaciones","Discurso inaugural","Juramento olímpico","Entrada del atleta con la antorcha"],
correct:["Desfile de delegaciones","Discurso inaugural","Juramento olímpico","Entrada del atleta con la antorcha","Encendido del pebetero"]}
]}
]
},
values:{
label:"Camino de los Valores",icon:"⭐",color:"var(--teal)",
levels:[
{id:0,title:"Nivel 1 — Los Cimientos",icon:"🌱",type:"riddle",
intro:"El Olimpismo es más que deporte. Es un estilo de vida. ¿Cuánto sabés sobre sus valores?",
tasks:[
{type:"choice",question:"¿Cuáles son los 3 valores del Movimiento Olímpico?",
opts:["Velocidad, Fuerza, Resistencia","Respeto, Amistad, Excelencia","Honor, Gloria, Nación"],
correct:1,explain:"Respeto, Amistad y Excelencia son los tres valores fundamentales del Olimpismo."}
]},
{id:1,title:"Nivel 2 — El Corazón Olímpico",icon:"💙",type:"mixed",
intro:"Los valores olímpicos se viven, no solo se estudian. ¡Demostralo!",
tasks:[
{type:"choice",question:"Un atleta perdió la final por milésimas de segundo. ¿Qué actitud olímpica muestra?",
opts:["Se enoja con el árbitro y protesta","Felicita al ganador y analiza cómo mejorar","Se niega a subir al podio","Acusa al rival de hacer trampa"],
correct:1,explain:"Felicitar al rival y reflexionar sobre la mejora personal es la esencia del fair play."}
]},
{id:2,title:"Nivel 3 — El Espíritu",icon:"✨",type:"mixed",
intro:"Los grandes atletas hablan con sus acciones. ¿Podés descifrar sus mensajes?",
tasks:[
{type:"choice",question:"El programa 'Vivamos los Juegos' aspira principalmente a:",
opts:["Entrenar atletas de élite para los Juegos","Transmitir el legado olímpico a estudiantes de Santa Fe","Recaudar fondos para los Juegos"],
correct:1,explain:"El programa busca acercar el movimiento olímpico a la realidad social de los estudiantes."}
]},
{id:3,title:"FINAL — El Legado 🌟",icon:"👑",type:"boss",
intro:"Este es el desafío final del Camino de los Valores. ¡Demostrá que el Olimpismo vive en vos!",
tasks:[
{type:"choice",question:"¿Cuál de estas frases resume mejor el Olimpismo?",
opts:["Ganar a cualquier costo","Lo importante es participar y superarse","Solo importa el podio"],
correct:1,explain:"El Olimpismo valora la participación, el esfuerzo y la superación personal por encima del resultado."}
]}
]
}
};
// ============================================================
// GLOBAL STATE
// ============================================================
let currentTab = null;
let tqIndex=0, tqScore=0, tqAnswered=false;
let cQueue=[], cScore=0;
let mCards=[], mFlipped=[], mMatched=0, mAttempts=0, mTimer=null, mSecs=0;
let chalState = {
sports:{unlocked:[0],completed:[],stars:{}},
values:{unlocked:[0],completed:[],stars:{}}
};
let activeChalCat=null, activeChalLevel=null, activeChalTask=0;
let chalLives=3, chalCorrect=0, orderAnswer=[], multiSelected=[], hintIdx=0;
// ============================================================
// INIT
// ============================================================
document.addEventListener('DOMContentLoaded', function() {
buildStudentTabs();
renderStudentContent('trivia');
currentTab = 'trivia';
});
const STUDENT_TABS = [
{id:'trivia',label:'🏅 Trivia'},
{id:'challenge',label:'🔥 Desafíos'},
{id:'memory',label:'🧠 Memoria'},
{id:'countries',label:'🌍 Países'},
{id:'values',label:'⭐ Valores'},
];
function buildStudentTabs() {
var bar = document.getElementById('tabs-inner');
bar.innerHTML = '';
STUDENT_TABS.forEach(function(t, i) {
var btn = document.createElement('button');
btn.className = 'tab-btn' + (i===0 ? ' active' : '');
btn.textContent = t.label;
btn.addEventListener('click', function() {
switchStudentTab(t.id, btn);
});
bar.appendChild(btn);
});
}
function switchStudentTab(id, btn) {
document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
currentTab = id;
renderStudentContent(id);
}
function renderStudentContent(id) {
var wrap = document.getElementById('page-wrap');
wrap.innerHTML = '';
var sec = document.createElement('div');
sec.className = 'section';
if (id==='trivia') sec.innerHTML = buildTrivia();
else if (id==='challenge') sec.innerHTML = buildChallengeHome();
else if (id==='memory') sec.innerHTML = buildMemoryHTML();
else if (id==='countries') sec.innerHTML = buildCountriesHTML();
else if (id==='values') sec.innerHTML = buildValuesHTML();
wrap.appendChild(sec);
if (id==='trivia') initTrivia();
else if (id==='memory') initMemory();
else if (id==='countries') initCountries();
else if (id==='values') initValues();
else if (id==='challenge') updateCatBadges();
}
function buildTrivia() {
return '<div class="card"><div class="card-title">🏅 Trivia Olímpica</div><div class="card-desc">10 preguntas sobre los Juegos Suramericanos 2026 y el Olimpismo.</div><div class="prog-bar"><div class="prog-fill" id="tq-prog" style="width:10%"></div></div><div id="tq-q" class="q-text"></div><div id="tq-opts" class="opt-grid"></div><div id="tq-fb" class="fb"></div><div class="tq-nav"><div class="score-pill">Puntaje: <span id="tq-score">0</span></div><button class="btn" id="tq-next" style="display:none">Siguiente →</button></div></div>';
}
function initTrivia() {
tqIndex=0; tqScore=0; tqAnswered=false;
renderTQ();
document.getElementById('tq-next').addEventListener('click', nextTQ);
}
function renderTQ() {
if (tqIndex>=TRIVIA.length) { showTQResult(); return; }
var q=TRIVIA[tqIndex];
document.getElementById('tq-prog').style.width=((tqIndex+1)/TRIVIA.length*100)+'%';
document.getElementById('tq-q').textContent=(tqIndex+1)+'. '+q.q;
var o=document.getElementById('tq-opts'); o.innerHTML='';
q.opts.forEach(function(opt,i) {
var b=document.createElement('button'); b.className='opt'; b.textContent=opt;
b.addEventListener('click', function() { selectTQ(i); });
o.appendChild(b);
});
document.getElementById('tq-fb').innerHTML='';
document.getElementById('tq-next').style.display='none';
tqAnswered=false;
}
function selectTQ(i) {
if(tqAnswered) return; tqAnswered=true;
var q=TRIVIA[tqIndex];
document.querySelectorAll('#tq-opts .opt').forEach(function(b,idx) {
b.disabled=true;
if(idx===q.ans) b.classList.add('correct');
else if(idx===i&&i!==q.ans) b.classList.add('wrong');
});
if(i===q.ans) tqScore++;
document.getElementById('tq-score').textContent=tqScore;
document.getElementById('tq-fb').innerHTML=i===q.ans
?'✅ <span style="color:var(--ok)">¡Correcto! '+q.exp+'</span>'
:'❌ <span style="color:var(--err)">'+q.exp+'</span>';
document.getElementById('tq-next').style.display='block';
}
function nextTQ() { tqIndex++; renderTQ(); }
function showTQResult() {
var p=Math.round(tqScore/TRIVIA.length*100);
var stars=p>=80?'🥇🥇🥇':p>=50?'🥈🥈':'🥉';
var msg=p>=80?'¡Campeón/a olímpico/a!':p>=50?'¡Buen desempeño!':'¡Seguí entrenando!';
document.querySelector('.card').innerHTML='<div class="res-screen"><div style="font-size:3rem">'+stars+'</div><div class="res-num">'+tqScore+'/'+TRIVIA.length+'</div><div class="res-lbl">'+msg+'</div><button class="btn" id="btn-replay-trivia" style="margin-top:12px">↺ Jugar de nuevo</button></div>';
document.getElementById('btn-replay-trivia').addEventListener('click', initTrivia);
}
const MEM_PAIRS=[
{emoji:'🏊',label:'Natación'},{emoji:'🤸',label:'Gimnasia'},
{emoji:'🚴',label:'Ciclismo'},{emoji:'⚽',label:'Fútbol'},
{emoji:'🏐',label:'Voleibol'},{emoji:'🥊',label:'Boxeo'},
{emoji:'🎾',label:'Tenis'},{emoji:'🏄',label:'Surf'}
];
function buildMemoryHTML() {
return '<div class="card"><div class="card-title">🧠 Memoria Deportiva</div><div class="card-desc">Encontrá los pares: cada deporte con su emoji.</div><div class="mem-stats"><div class="stat-pill">Intentos: <span id="m-att">0</span></div><div class="stat-pill">Pares: <span id="m-match">0</span>/8</div><div class="stat-pill">Tiempo: <span id="m-time">0</span>s</div></div><div class="mem-grid" id="mem-grid"></div><div style="text-align:center;margin-top:18px"><button class="btn ghost" id="btn-mem-reset">↺ Reiniciar</button></div></div>';
}
function initMemory() {
clearInterval(mTimer); mSecs=0; mAttempts=0; mMatched=0; mFlipped=[];
['m-att','m-match','m-time'].forEach(function(id){var e=document.getElementById(id);if(e)e.textContent='0';});
var doubled=[...MEM_PAIRS,...MEM_PAIRS].sort(function(){return Math.random()-.5;});
var grid=document.getElementById('mem-grid'); if(!grid)return;
grid.innerHTML='';
mCards=doubled.map(function(item,i) {
var card=document.createElement('div'); card.className='mc';
card.innerHTML='<div class="mc-inner"><div class="mc-f">🔥</div><div class="mc-b">'+item.emoji+'<span>'+item.label+'</span></div></div>';
card.addEventListener('click', function(){flipMem(card,i,item.label);});
grid.appendChild(card);
return {el:card,label:item.label,matched:false};
});
mTimer=setInterval(function(){mSecs++;var e=document.getElementById('m-time');if(e)e.textContent=mSecs;},1000);
var resetBtn=document.getElementById('btn-mem-reset');
if(resetBtn) resetBtn.addEventListener('click', initMemory);
}
function flipMem(card,i,label) {
if(mFlipped.length>=2||card.classList.contains('flipped')||card.classList.contains('matched'))return;
card.classList.add('flipped'); mFlipped.push({card,i,label});
if(mFlipped.length===2) {
mAttempts++; var e=document.getElementById('m-att');if(e)e.textContent=mAttempts;
if(mFlipped[0].label===mFlipped[1].label) {
mFlipped.forEach(function(f){f.card.classList.add('matched');});
mMatched++; var em=document.getElementById('m-match');if(em)em.textContent=mMatched;
mFlipped=[];
if(mMatched===MEM_PAIRS.length){clearInterval(mTimer);setTimeout(function(){alert('🥇 ¡Completado en '+mAttempts+' intentos y '+mSecs+' segundos!');},300);}
} else {
setTimeout(function(){mFlipped.forEach(function(f){f.card.classList.remove('flipped');});mFlipped=[];},1000);
}
}
}
function buildCountriesHTML() {
return '<div class="card"><div class="card-title">🌍 ¿De qué país es esta bandera?</div><div class="card-desc">Identificá la bandera de cada uno de los 15 países participantes.</div><div class="prog-bar"><div class="prog-fill" id="c-prog" style="width:0%"></div></div><div style="display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px"><div id="c-flag" class="flag-big"></div></div><div id="c-hint" class="flag-hint"></div><div id="c-opts" class="c-grid"></div><div id="c-fb" class="fb" style="text-align:center;margin-top:12px"></div><div style="text-align:center;margin-top:14px"><div class="score-pill">Puntaje: <span id="c-score">0</span></div></div></div>';
}
function initCountries() {
cQueue=[...COUNTRIES].sort(function(){return Math.random()-.5;});
cScore=0;
var sc=document.getElementById('c-score');if(sc)sc.textContent='0';
renderCountry();
}
function renderCountry() {
if(cQueue.length===0) {
var card=document.querySelector('#page-wrap .card');
if(card)card.innerHTML='<div class="res-screen"><div style="font-size:3rem">🌍🌎🌏</div><div class="res-num">'+cScore+'/'+COUNTRIES.length+'</div><div class="res-lbl">'+(cScore>=12?'¡Experto en Sudamérica!':'¡Buen recorrido continental!')+'</div><button class="btn" id="btn-replay-countries" style="margin-top:12px">↺ Jugar de nuevo</button></div>';
document.getElementById('btn-replay-countries').addEventListener('click', initCountries);
return;
}
var cur=cQueue[0];
var prog=(COUNTRIES.length-cQueue.length)/COUNTRIES.length*100;
var p=document.getElementById('c-prog');if(p)p.style.width=prog+'%';
var f=document.getElementById('c-flag');
if(f) {
f.innerHTML='';
var svgSrc = FLAG_SVG[cur.code];
function renderEmojiFallback() {
f.innerHTML='';
var span=document.createElement('span');
span.textContent=FLAG_EMOJI[cur.code]||'🏳️';
span.style.cssText='font-size:90px;line-height:1;display:block';
f.appendChild(span);
}
if(svgSrc) {
var img=document.createElement('img');
img.src=svgSrc;
img.alt=cur.name;
img.className='flag-img';
img.style.cssText='max-width:200px;max-height:130px;object-fit:contain;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.5)';
img.onerror=renderEmojiFallback;
f.appendChild(img);
if(navigator.onLine && FLAG_REMOTE[cur.code]) {
var remoteImg = new Image();
remoteImg.onload = function() { img.src = FLAG_REMOTE[cur.code]; };
remoteImg.src = FLAG_REMOTE[cur.code];
}
} else { renderEmojiFallback(); }
}
var h=document.getElementById('c-hint');if(h)h.textContent='País '+(COUNTRIES.length-cQueue.length+1)+' de '+COUNTRIES.length;
var wrong=COUNTRIES.filter(function(c){return c.name!==cur.name;}).sort(function(){return Math.random()-.5;}).slice(0,3);
var opts=[...wrong,cur].sort(function(){return Math.random()-.5;});
var o=document.getElementById('c-opts');if(!o)return;
o.innerHTML='';
opts.forEach(function(opt) {
var b=document.createElement('button');b.className='opt';b.textContent=opt.name;
b.addEventListener('click', function(){selectCountry(b,opt.name,cur.name,opts,o);});
o.appendChild(b);
});
var fb=document.getElementById('c-fb');if(fb)fb.innerHTML='';
}
function selectCountry(btn,sel,correct,opts,o) {
o.querySelectorAll('.opt').forEach(function(b){
b.disabled=true;
if(b.textContent===correct)b.classList.add('correct');
else if(b===btn&&sel!==correct)b.classList.add('wrong');
});
if(sel===correct){cScore++;var sc=document.getElementById('c-score');if(sc)sc.textContent=cScore;}
var fb=document.getElementById('c-fb');
if(fb)fb.innerHTML=sel===correct?'✅ <span style="color:var(--ok)">¡Correcto!</span>':'❌ <span style="color:var(--err)">Era '+correct+'</span>';
cQueue.shift();
setTimeout(renderCountry,1400);
}
function buildValuesHTML() {
return '<div class="card"><div class="card-title">⭐ Valores del Olimpismo</div><div class="card-desc">Hacé click en cada valor para conocerlo mejor.</div><div class="val-grid" id="val-grid"></div><div style="margin-top:22px;padding:16px;background:rgba(255,184,0,.07);border-radius:12px;border-left:3px solid var(--gold)"><div style="font-weight:800;color:var(--gold);font-size:.85rem;margin-bottom:6px">💬 REFLEXIÓN</div><p style="color:var(--muted);font-size:.87rem;line-height:1.6;margin:0">Coubertin creía que el deporte es fuente de mejora interior. ¿Podés recordar un momento en que el deporte te enseñó algo importante sobre vos mismo/a?</p></div></div>';
}
function initValues() {
var g=document.getElementById('val-grid');if(!g)return;
g.innerHTML='';
VALUES_DATA.forEach(function(v) {
var c=document.createElement('div');c.className='val-card';
c.innerHTML='<span class="val-icon">'+v.icon+'</span><div class="val-name">'+v.name+'</div><p class="val-desc">'+v.desc+'</p>';
c.addEventListener('click', function(){c.classList.toggle('open');});
g.appendChild(c);
});
}
function buildChallengeHome() {
return '<div style="margin-bottom:14px"><div style="font-family:\'Bebas Neue\',sans-serif;font-size:2.2rem;letter-spacing:3px;background:linear-gradient(135deg,var(--fire),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px">DESAFÍOS POR NIVELES</div><div style="color:var(--muted);font-size:.9rem;line-height:1.6">Elegí una categoría y superá los 4 niveles. ¡Cada nivel desbloquea el siguiente!</div></div><div class="challenge-cat-grid"><div class="cat-card cat-sport" id="cat-sports"><span class="cc-icon">🏅</span><h3>CAMINO DEPORTIVO</h3><p>Deportes, sedes, atletas y todo sobre los Juegos Suramericanos 2026.</p><span class="cat-badge cb-active" id="sport-badge">▶ EN CURSO</span></div><div class="cat-card cat-values" id="cat-values"><span class="cc-icon">⭐</span><h3>CAMINO DE LOS VALORES</h3><p>Olimpismo, pilares educativos, fair play y el espíritu de los Juegos.</p><span class="cat-badge cb-active" id="values-badge">▶ EN CURSO</span></div></div>';
}
function updateCatBadges() {
['sports','values'].forEach(function(cat) {
var el=document.getElementById(cat==='sports'?'sport-badge':'values-badge'); if(!el)return;
var s=chalState[cat];
if(s.completed.length===CHALLENGES[cat].levels.length){el.className='cat-badge cb-done';el.textContent='✅ COMPLETADO';}
else if(s.completed.length>0){el.className='cat-badge cb-active';el.textContent='▶ NIVEL '+(s.completed.length+1)+'/4';}
else{el.className='cat-badge cb-active';el.textContent='▶ EN CURSO';}
var card=document.getElementById('cat-'+cat);
if(card){card.onclick=null;card.addEventListener('click',function(){openChalCat(cat);});}
});
}
function openChalCat(cat) {
activeChalCat=cat;
var wrap=document.getElementById('page-wrap'); wrap.innerHTML='';
var sec=document.createElement('div'); sec.className='section';
sec.innerHTML=buildLevelMap(cat);
wrap.appendChild(sec);
document.getElementById('lm-back-btn').addEventListener('click', backToChalHome);
bindLevelNodes(cat);
}
function buildLevelMap(cat) {
var data=CHALLENGES[cat]; var state=chalState[cat];
var html='<div class="level-map"><div class="lm-header"><button class="lm-back" id="lm-back-btn">← Categorías</button><div class="lm-title" style="color:'+data.color+'">'+data.icon+' '+data.label.toUpperCase()+'</div></div><div style="color:var(--muted);font-size:.88rem;margin-bottom:24px;line-height:1.5">Superá los 4 niveles en orden. Cada nivel que completás desbloquea el siguiente.</div><div class="levels-path">';
data.levels.forEach(function(lv,i) {
var done=state.completed.includes(i);
var unlocked=state.unlocked.includes(i);
var isLocked=!done&&!unlocked;
var isBoss=lv.type==='boss';
var circleClass=isLocked?'locked':done?'completed':(isBoss?'boss unlocked':'unlocked');
var stars=state.stars[i]?'⭐'.repeat(state.stars[i]):'';
html+='<div class="level-node'+(isLocked?' locked-node':' clickable-node')+ '" id="lvnode-'+i+'"><div class="ln-circle '+circleClass+'">'+(done?'✅':lv.icon)+'</div><div class="ln-info"><h4 style="color:'+(done?'var(--ok)':isLocked?'var(--muted)':data.color)+'">'+lv.title+'</h4><p>'+lv.intro.substring(0,70)+'...</p>'+(stars?'<div class="ln-stars">'+stars+'</div>':'')+'</div>'+(isLocked?'<div>🔒</div>':'')+'</div>';
});
html+='</div></div>';
if(state.completed.length===data.levels.length){
html+='<div class="card" style="text-align:center;margin-top:20px;border-color:var(--gold)"><div style="font-size:3rem">🏆</div><div style="font-family:\'Bebas Neue\',sans-serif;font-size:2rem;color:var(--gold)">¡CATEGORÍA COMPLETADA!</div><button class="btn ghost" id="btn-reset-cat" style="margin-top:12px">↺ Reiniciar</button></div>';
}
return html;
}
function bindLevelNodes(cat) {
CHALLENGES[cat].levels.forEach(function(lv,i) {
var node=document.getElementById('lvnode-'+i);
if(!node) return;
var unlocked = chalState[cat].unlocked.includes(i);
var completed = chalState[cat].completed.includes(i);
if(unlocked && !completed) {
node.classList.remove('locked-node');
node.style.cursor = 'pointer';
node.onclick = function(){ openChalLevel(i,cat); };
} else if(completed) {
node.style.cursor = 'default';
node.onclick = null;
} else {
node.onclick = null;
node.style.cursor = 'not-allowed';
}
});
var resetBtn=document.getElementById('btn-reset-cat');
if(resetBtn) resetBtn.addEventListener('click', function(){resetCat(cat);});
}
function backToChalHome() {
activeChalCat=null;
var wrap=document.getElementById('page-wrap'); wrap.innerHTML='';
var sec=document.createElement('div'); sec.className='section';
sec.innerHTML=buildChallengeHome();
wrap.appendChild(sec);
updateCatBadges();
}
function openChalLevel(levelIdx,cat) {
activeChalCat=cat; activeChalLevel=levelIdx; activeChalTask=0;
chalLives=3; chalCorrect=0; orderAnswer=[]; multiSelected=[]; hintIdx=0;
renderChalLevel();
}
function renderChalLevel() {
var wrap=document.getElementById('page-wrap'); wrap.innerHTML='';
var sec=document.createElement('div'); sec.className='section';
var cat=activeChalCat;
var lvData=CHALLENGES[cat].levels[activeChalLevel];
var task=lvData.tasks[activeChalTask];
var totalTasks=lvData.tasks.length;
var isBoss=lvData.type==='boss';
hintIdx=0; multiSelected=[]; orderAnswer=[];
var html='<div class="chal-screen"><div class="chal-top-bg">';
html+='<div class="chal-header"><button class="chal-back" id="chal-back-btn">← Mapa</button><div class="chal-title">'+lvData.icon+' '+lvData.title+'</div><div class="chal-lives">'+'❤️'.repeat(chalLives)+'🖤'.repeat(3-chalLives)+'</div></div>';
html+='<div class="chal-enun">'+lvData.intro+'</div>';
html+='</div>';
html+='<div class="prog-bar"><div class="prog-fill" id="chal-prog" style="width:'+(activeChalTask/totalTasks*100)+'%"></div></div>';
html+='<div style="color:var(--muted);font-size:.75rem;font-weight:800;text-align:right;margin-bottom:16px;text-transform:uppercase">Tarea '+(activeChalTask+1)+' de '+totalTasks+'</div>';
html+='<div class="chal-body" id="chal-body">';
if(task.type==='riddle') html+=buildRiddle(task);
else if(task.type==='choice') html+=buildChoiceTask(task);
else if(task.type==='order') html+=buildOrderTask(task);
html+='</div><div id="chal-fb" class="fb" style="margin-bottom:12px;font-size:.92rem"></div>';
html+='<div class="btn-row"><button class="hint-btn" id="chal-hint-btn"'+(task.clues?'':' style="display:none"')+'>💡 Pista</button><button class="btn '+(isBoss?'gold-btn':'')+ '" id="chal-submit">Verificar ✓</button></div></div>';
sec.innerHTML=html;
wrap.appendChild(sec);
document.getElementById('chal-back-btn').addEventListener('click', function(){openChalCat(cat);});
document.getElementById('chal-submit').addEventListener('click', submitChal);
var hintBtn=document.getElementById('chal-hint-btn');
if(hintBtn) hintBtn.addEventListener('click', revealHint);
if(task.type==='order') initOrderChips(task);
if(task.type==='choice') bindChoiceButtons();
}
function buildRiddle(task) {
var cluesHtml='';
if(task.clues){
cluesHtml='<div class="riddle-clues" id="riddle-clues">';
task.clues.forEach(function(c){cluesHtml+='<div class="clue-item" style="display:none">💡 '+c+'</div>';});
cluesHtml+='</div>';
}
return '<div class="riddle-box"><div class="riddle-label">🔍 Descubrí quién o qué soy</div><div class="riddle-text">'+task.riddle+'</div>'+cluesHtml+'</div><div class="answer-area"><div style="font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Tu respuesta:</div><input class="answer-input" id="riddle-input" type="text" placeholder="ESCRIBÍ AQUÍ..." maxlength="60"></div>';
}
function buildChoiceTask(task) {
var html='<div class="q-text">'+task.question+'</div><div class="opt-grid" id="choice-opts">';
var indices=task.opts.map(function(_,i){return i;}).sort(function(){return Math.random()-.5;});
var newCorrect=0;
indices.forEach(function(origIdx,newPos){if(origIdx===task.correct)newCorrect=newPos;});
indices.forEach(function(origIdx,newPos){
html+='<button class="opt" data-pos="'+newPos+'" data-correct="'+newCorrect+'" data-explain="'+task.explain.replace(/"/g,""")+'">'+task.opts[origIdx]+'</button>';
});
return html+'</div>';
}
function bindChoiceButtons() {
document.querySelectorAll('#choice-opts .opt').forEach(function(btn) {
btn.addEventListener('click', function() {
var pos=parseInt(btn.getAttribute('data-pos'));
var correct=parseInt(btn.getAttribute('data-correct'));
var explain=btn.getAttribute('data-explain');
selectChoice(btn,pos,correct,explain);
});
});
}
function buildOrderTask(task) {
return '<div class="q-text">'+task.instruction+'</div><div style="color:var(--gold);font-size:.82rem;font-weight:800;margin-bottom:6px">BANCO — hacé click para agregar:</div><div class="order-bank" id="order-bank"></div><div style="color:var(--teal);font-size:.82rem;font-weight:800;margin-bottom:6px">TU ORDEN — hacé click para quitar:</div><div class="order-answer" id="order-answer"></div>';
}
function initOrderChips(task) {
orderAnswer=[];
var bank=document.getElementById('order-bank'); if(!bank)return;
var shuffled=[...task.items].sort(function(){return Math.random()-.5;});
shuffled.forEach(function(item) {
var chip=document.createElement('div'); chip.className='order-chip';
chip.textContent=item; chip.dataset.val=item;
chip.onclick=function(){moveToAnswer(chip);};
bank.appendChild(chip);
});
}
function moveToAnswer(chip) {
var ans=document.getElementById('order-answer'); if(!ans)return;
chip.classList.add('placed');
chip.onclick=function(){moveToBank(chip);};
ans.appendChild(chip);
orderAnswer.push(chip.dataset.val);
}
function moveToBank(chip) {
var bank=document.getElementById('order-bank'); if(!bank)return;
chip.classList.remove('placed');
chip.onclick=function(){moveToAnswer(chip);};
bank.appendChild(chip);
orderAnswer=orderAnswer.filter(function(v, idx, arr){
return !(v===chip.dataset.val && idx===arr.indexOf(chip.dataset.val));
});
}
function revealHint() {
var task=CHALLENGES[activeChalCat].levels[activeChalLevel].tasks[activeChalTask];
if(!task.clues||hintIdx>=task.clues.length)return;
var cluesEl=document.getElementById('riddle-clues'); if(!cluesEl)return;
var items=cluesEl.querySelectorAll('.clue-item');
if(items[hintIdx])items[hintIdx].style.display='block';
hintIdx++;
if(hintIdx>=task.clues.length){var hb=document.getElementById('chal-hint-btn');if(hb)hb.disabled=true;}
}
function selectChoice(btn,pos,correct,explain) {
document.querySelectorAll('#choice-opts .opt').forEach(function(b){
b.disabled=true;
if(parseInt(b.getAttribute('data-pos'))===correct)b.classList.add('correct');
else if(b===btn&&pos!==correct)b.classList.add('wrong');
});
var ok=pos===correct;
document.getElementById('chal-fb').innerHTML=ok
?'✅ <span style="color:var(--ok)">¡Correcto! '+explain+'</span>'
:'❌ <span style="color:var(--err)">No es esa. '+explain+'</span>';
var submitBtn=document.getElementById('chal-submit');
submitBtn.textContent='Continuar →';
submitBtn.onclick=function(){advanceChal(ok);};
var hintBtn=document.getElementById('chal-hint-btn');if(hintBtn)hintBtn.style.display='none';
if(!ok){chalLives--;updateLives();}else chalCorrect++;
if(chalLives<=0){failLevel();}
}
function submitChal() {
var task=CHALLENGES[activeChalCat].levels[activeChalLevel].tasks[activeChalTask];
if(task.type==='choice')return;
if(task.type==='riddle'){
var inp=document.getElementById('riddle-input'); if(!inp)return;
var val=inp.value.trim().toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"");
var correctAns=task.answer.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"");
var alts=(task.altAnswers||[]).map(function(a){return a.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"");});
var ok=val===correctAns||alts.includes(val)||(correctAns.includes(val)&&val.length>3);
if(ok){
inp.classList.add('glow');inp.disabled=true;
document.getElementById('chal-fb').innerHTML='✅ <span style="color:var(--ok)">¡Correcto! La respuesta era: <strong>'+task.answer+'</strong></span>';
chalCorrect++;
var sb=document.getElementById('chal-submit');sb.textContent='Continuar →';sb.onclick=function(){advanceChal(true);};
var hb=document.getElementById('chal-hint-btn');if(hb)hb.style.display='none';
} else {
inp.classList.add('shake');setTimeout(function(){inp.classList.remove('shake');},500);
chalLives--;updateLives();
document.getElementById('chal-fb').innerHTML='❌ <span style="color:var(--err)">No es esa. Intentá de nuevo o pedí una pista 💡</span>';
if(chalLives<=0){failLevel();}
}
}
if(task.type==='order'){
var taskAns=task.correct.map(function(a){return a.toUpperCase();});
var userAns=orderAnswer.map(function(a){return a.toUpperCase();});
var ok=JSON.stringify(taskAns)===JSON.stringify(userAns);
document.querySelectorAll('#order-answer .order-chip').forEach(function(c){
c.classList.remove('placed');
c.classList.add(ok?'correct-chip':'wrong-chip');
c.onclick=null;
});
document.getElementById('chal-fb').innerHTML=ok
?'✅ <span style="color:var(--ok)">¡Orden correcto!</span>'
:'❌ <span style="color:var(--err)">El orden no es correcto.</span>';
if(!ok){chalLives--;updateLives();if(chalLives<=0){failLevel();return;}setTimeout(function(){resetOrder(task);},1500);return;}
else chalCorrect++;
var sb=document.getElementById('chal-submit');sb.textContent='Continuar →';sb.onclick=function(){advanceChal(true);};
}
}
function resetOrder(task) {
orderAnswer=[];
var bank=document.getElementById('order-bank'); var ans=document.getElementById('order-answer');
if(!bank||!ans)return;
ans.querySelectorAll('.order-chip').forEach(function(c){
c.classList.remove('placed','correct-chip','wrong-chip');
c.onclick=function(){moveToAnswer(c);};
bank.appendChild(c);
});
document.getElementById('chal-fb').innerHTML='';
var sb=document.getElementById('chal-submit');sb.textContent='Verificar ✓';sb.onclick=submitChal;
}
function updateLives() {
var el=document.querySelector('.chal-lives');
if(el)el.innerHTML='❤️'.repeat(Math.max(0,chalLives))+'🖤'.repeat(Math.max(0,3-chalLives));
}
function failLevel() {
var wrap=document.getElementById('page-wrap');
var lv=activeChalLevel; var cat=activeChalCat;
wrap.innerHTML='<div class="section"><div class="card" style="text-align:center;border-color:var(--err)"><div style="font-size:3.5rem;margin-bottom:12px">💔</div><div style="font-family:\'Bebas Neue\',sans-serif;font-size:2.5rem;color:var(--err);letter-spacing:2px">SIN VIDAS</div><div style="color:var(--muted);font-size:.92rem;margin:10px 0 16px;line-height:1.6">¡Los atletas también fallan, pero vuelven a intentarlo más fuertes!</div><div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn" id="btn-retry-level">↺ Reintentar nivel</button><button class="btn ghost" id="btn-back-map">← Mapa</button></div></div></div>';
document.getElementById('btn-retry-level').addEventListener('click',function(){openChalLevel(lv,cat);});
document.getElementById('btn-back-map').addEventListener('click',function(){openChalCat(cat);});
}
function advanceChal(wasOk) {
var lvData=CHALLENGES[activeChalCat].levels[activeChalLevel];
activeChalTask++;
if(activeChalTask>=lvData.tasks.length){completeLevel();}
else{renderChalLevel();}
}
function completeLevel() {
var cat=activeChalCat; var lvIdx=activeChalLevel;
var lvData=CHALLENGES[cat].levels[lvIdx];
var totalTasks=lvData.tasks.length;
var accuracy=totalTasks>0?Math.round((chalCorrect/totalTasks)*100):0;
if(accuracy<70){showLevelRetry(cat,lvIdx,accuracy,totalTasks);return;}
var state=chalState[cat];
if(!state.completed.includes(lvIdx))state.completed.push(lvIdx);
var stars=chalLives===3?3:chalLives===2?2:1;
state.stars[lvIdx]=stars;
var next=lvIdx+1;
if(next<CHALLENGES[cat].levels.length&&!state.unlocked.includes(next))state.unlocked.push(next);
if(state.completed.length===CHALLENGES[cat].levels.length){showFinalWin(cat);}
else{showLevelWin(cat,lvIdx,stars);}
}
function showLevelRetry(cat,lvIdx,accuracy,totalTasks) {
var wrap=document.getElementById('page-wrap');
wrap.innerHTML='<div class="section"><div class="card" style="text-align:center;border-color:var(--gold)"><div style="font-size:3.5rem;margin-bottom:12px">💪</div><div style="font-family:\'Bebas Neue\',sans-serif;font-size:2.2rem;color:var(--gold);letter-spacing:2px">CASI LO LOGRAS</div><div style="color:var(--muted);font-size:.92rem;margin:14px 0;line-height:1.6">Necesitás al menos 70% de precisión para avanzar. Tu resultado: '+accuracy+'% ('+chalCorrect+'/'+totalTasks+').</div><div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn gold-btn" id="btn-retry2">↺ Reintentar</button><button class="btn ghost" id="btn-map2">← Mapa</button></div></div></div>';
document.getElementById('btn-retry2').addEventListener('click',function(){openChalLevel(lvIdx,cat);});
document.getElementById('btn-map2').addEventListener('click',function(){openChalCat(cat);});
}
function showLevelWin(cat,lvIdx,stars) {
var nextLv=CHALLENGES[cat].levels[lvIdx+1];
var wrap=document.getElementById('page-wrap');
wrap.innerHTML='<div class="section"><div class="card" style="border-color:var(--ok)"><div class="level-win"><div class="win-stars">'+'⭐'.repeat(stars)+'☆'.repeat(3-stars)+'</div><div class="win-title">¡NIVEL SUPERADO!</div><div class="win-msg">Siguiente: <strong style="color:var(--gold)">'+nextLv.icon+' '+nextLv.title+'</strong> — ¡Desbloqueado!</div><div class="xp-bar"><div class="xp-fill" style="width:'+(chalState[cat].completed.length/CHALLENGES[cat].levels.length*100)+'%"></div></div><div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn gold-btn" id="btn-next-level">▶ Siguiente nivel</button><button class="btn ghost" id="btn-to-map">Mapa</button></div></div></div></div>';
document.getElementById('btn-next-level').addEventListener('click',function(){openChalLevel(lvIdx+1,cat);});
document.getElementById('btn-to-map').addEventListener('click',function(){openChalCat(cat);});
}
function showFinalWin(cat) {
launchConfetti();
var data=CHALLENGES[cat]; var wrap=document.getElementById('page-wrap');
wrap.innerHTML='<div class="section"><div class="card" style="border-color:var(--gold)"><div class="final-win"><span class="trophy">🏆</span><div class="fw-title">¡CAMPEÓN/A!</div><div class="fw-sub">Completaste el <strong style="color:'+data.color+'">'+data.label+'</strong>.<br>¡Demostraste que el Olimpismo vive en vos!</div><div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn gold-btn" id="btn-ver-res">Ver resultados</button><button class="btn ghost" id="btn-otras-cat">Otras categorías</button></div></div></div></div>';
document.getElementById('btn-ver-res').addEventListener('click',function(){openChalCat(cat);});
document.getElementById('btn-otras-cat').addEventListener('click',backToChalHome);
}
function resetCat(cat) {
chalState[cat]={unlocked:[0],completed:[],stars:{}};
openChalCat(cat);
}
function launchConfetti() {
var cont=document.getElementById('confetti-cont'); cont.innerHTML='';
var colors=['#FF7402','#E42153','#FFB800','#00B4A6','#3C3AE5','#fff'];
for(var i=0;i<80;i++){
var c=document.createElement('div'); c.className='conf';
c.style.cssText='left:'+Math.random()*100+'%;background:'+colors[Math.floor(Math.random()*colors.length)]+';width:'+(4+Math.random()*8)+'px;height:'+(4+Math.random()*8)+'px;animation-duration:'+(2+Math.random()*3)+'s;animation-delay:'+Math.random()*2+'s';
cont.appendChild(c);
}
setTimeout(function(){cont.innerHTML='';},6000);
}
</script>
</body>
</html>Game Source: Vivamos los Juegos — XIII Suramericanos 2026 (Alumnos)
Creator: SolarGamer11
Libraries: none
Complexity: complex (1182 lines, 70.7 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: vivamos-los-juegos-xiii-suramericanos-20-solargamer11" to link back to the original. Then publish at arcadelab.ai/publish.