@font-face{
  font-family:"OpenDyslexic";
  src:url("https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-regular-webfont.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-regular-webfont.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box}
:root{
  --azul:#071A50;
  --azul2:#2A63AD;
  --turquesa:#33B5C7;
  --verde:#6FCB3D;
  --mamey:#F28C38;
  --amarillo:#D4A017;
  --morado:#9B35B3;
  --crema:#FFF8EC;
  --blanco:#FFFFFF;
  --gris-claro:#E8EEF5;
  --texto:#2C3E50;
  --sombra:0 16px 34px rgba(7,26,80,.22);
}
html,body{margin:0;width:100%;min-height:100%;font-family:"Andika",Arial,sans-serif;color:var(--azul);background:#9be9ff;overflow:hidden}
body{min-height:100svh}
button,a{font-family:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.app-shell{width:100vw;height:100svh;display:grid;place-items:center;background:linear-gradient(180deg,#8fe4ff 0%,#c3f4ff 100%);overflow:hidden}
.scene{position:relative;width:min(100vw,1600px);height:min(100svh,900px);overflow:hidden;background:#9ee8ff;isolation:isolate;box-shadow:0 24px 70px rgba(0,54,105,.30)}
@media (min-width:900px){.app-shell{padding:10px}.scene{border-radius:28px}}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;user-select:none;pointer-events:none}
.vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(9,69,38,.10));pointer-events:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Top */
.topbar{position:absolute;z-index:8;left:4%;right:4%;top:3%;display:flex;align-items:flex-start;justify-content:center;pointer-events:none}
.brand{text-align:center;filter:drop-shadow(0 8px 10px rgba(7,26,80,.20))}
.brand h1{margin:0;color:white;font-size:clamp(42px,6vw,98px);line-height:.85;font-weight:700;letter-spacing:.5px;text-shadow:0 5px 0 rgba(7,26,80,.18),4px 4px 0 var(--mamey),-4px -4px 0 var(--morado)}
.brand p{margin:12px 0 0;color:var(--azul);font-weight:700;font-size:clamp(13px,1.55vw,27px);text-shadow:0 2px 0 rgba(255,255,255,.75)}
.score-pill{position:absolute;right:7.5%;top:0;display:flex;align-items:center;justify-content:center;gap:8px;min-width:clamp(86px,8.2vw,130px);padding:8px 16px;border-radius:999px;background:linear-gradient(180deg,#a95bd2,#6e35b6);color:white;border:4px solid rgba(255,255,255,.92);box-shadow:var(--sombra);font-size:clamp(18px,2.1vw,34px);font-weight:700;pointer-events:auto}
.score-icon{width:clamp(34px,3.6vw,56px);height:clamp(34px,3.6vw,56px);border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--amarillo);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.score-icon img{width:105%;height:105%;object-fit:contain;display:block}.score-pill strong{line-height:1;min-width:1ch;text-align:center}
.fullscreen-btn{position:absolute;z-index:13;left:clamp(10px,1.8vw,26px);top:clamp(10px,1.8vw,26px);width:clamp(40px,4.1vw,58px);height:clamp(40px,4.1vw,58px);border:0;border-radius:50%;background:rgba(255,248,236,.88);border:3px solid rgba(255,255,255,.95);box-shadow:0 10px 22px rgba(7,26,80,.18);color:var(--azul);font-size:clamp(20px,2.2vw,30px);font-weight:700;display:grid;place-items:center}
.fullscreen-btn:hover{transform:translateY(-2px) scale(1.03)}

/* Control icons */
.sound-btn,.tool-btn{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--azul);transition:.18s ease;z-index:12}
.sound-btn:hover,.tool-btn:hover{transform:translateY(-4px) scale(1.02)}
.sound-btn{position:absolute;right:4%;top:17%}.side-tools{position:absolute;z-index:12;right:4%;top:31%;display:flex;flex-direction:column;align-items:center;gap:12px}
.control-circle{width:clamp(70px,6vw,104px);height:clamp(70px,6vw,104px);border-radius:50%;display:grid;place-items:center;background:#fff2cf;border:5px solid rgba(255,255,255,.95);box-shadow:0 10px 22px rgba(7,26,80,.18),inset 0 -5px 0 rgba(0,0,0,.06);overflow:hidden;position:relative}
.control-circle img{width:80%;height:80%;object-fit:contain;display:block}.sound-btn .control-circle img{width:88%;height:88%}
.control-label{margin-top:-8px;min-width:clamp(78px,6vw,112px);padding:7px 10px;border-radius:14px;background:linear-gradient(180deg,#ffad38,#f28c38);color:white;font-size:clamp(10px,.95vw,15px);font-weight:700;text-transform:uppercase;text-align:center;line-height:1;box-shadow:0 5px 0 rgba(125,70,0,.18);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.control-label.orange{background:linear-gradient(180deg,#ffad38,#f28c38)}.control-label.blue{background:linear-gradient(180deg,#2a8fd9,#1667a6)}.control-label.green{background:linear-gradient(180deg,#79ce43,#43a828)}.control-label.cyan{background:linear-gradient(180deg,#33b5c7,#1486ad)}
.sound-btn.muted .control-circle{filter:grayscale(.25);opacity:.8}.sound-btn.muted .control-circle::after{content:"";position:absolute;width:72%;height:6px;border-radius:999px;background:#e94444;transform:rotate(-38deg);box-shadow:0 2px 0 rgba(255,255,255,.65)}

/* Levels */
.levels{position:absolute;z-index:4;left:7%;right:13%;top:31%;bottom:13%;display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));align-items:center;justify-items:center;gap:clamp(14px,2vw,34px)}
.level-card{position:relative;display:block;width:min(100%,clamp(132px,13vw,224px));aspect-ratio:1/1.06;border:none;border-radius:34px;padding:10px;text-decoration:none;color:var(--azul);background:rgba(255,248,236,.95);box-shadow:0 18px 34px rgba(7,26,80,.24),inset 0 3px 0 rgba(255,255,255,.95);transition:.22s ease;isolation:isolate}
.level-card:hover{transform:translateY(-8px) scale(1.03)}.level-card.unlocked{outline:6px solid rgba(111,203,61,.72);box-shadow:0 20px 38px rgba(39,117,35,.30),0 0 0 10px rgba(255,216,77,.20)}.level-card.locked{filter:saturate(.88);opacity:.92}
.level-number{position:absolute;z-index:6;top:0;left:50%;transform:translate(-50%,-38%);width:clamp(40px,3.8vw,64px);height:clamp(40px,3.8vw,64px);border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#82d945,#3fae34);border:5px solid white;color:white;font-size:clamp(22px,2.25vw,38px);font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.level-number.pink{background:linear-gradient(180deg,#ff7aa2,#e94178)}.level-number.blue{background:linear-gradient(180deg,#34bde1,#1979bf)}.level-number.purple{background:linear-gradient(180deg,#b375db,#7140b5)}
.level-cover{position:relative;width:100%;height:72%;border-radius:28px 28px 22px 22px;overflow:hidden;background:#dff6ff;border:4px solid rgba(255,255,255,.9)}.level-cover img{width:100%;height:100%;object-fit:cover;display:block}
.placeholder{display:grid;place-items:center;font-size:clamp(42px,5vw,80px);background:linear-gradient(180deg,#b9efff,#e9fbff 42%,#80d96c)}.placeholder.syllables{background:linear-gradient(180deg,#b9efff,#fff2f7 45%,#8adc6e)}.placeholder.words{background:linear-gradient(180deg,#b9efff,#e8f6ff 45%,#9add6e)}.placeholder.stories{background:linear-gradient(180deg,#2d2d8d,#7765c8 58%,#d7c9ff)}
.level-title{position:absolute;left:9%;right:9%;bottom:8%;z-index:5;padding:8px 6px;border-radius:16px;background:linear-gradient(180deg,#55bb3b,#207d24);color:white;text-align:center;font-size:clamp(12px,1.2vw,20px);font-weight:700;line-height:1.06;text-shadow:0 2px 0 rgba(0,0,0,.18);box-shadow:0 5px 0 rgba(0,0,0,.13)}.pink-title{background:linear-gradient(180deg,#ff759e,#d93b72)}.blue-title{background:linear-gradient(180deg,#26ace0,#0c72b8)}.purple-title{background:linear-gradient(180deg,#9362cc,#5c349c)}.lock-badge{position:absolute;right:-8px;bottom:-8px;z-index:7;width:clamp(36px,3.5vw,54px);height:clamp(36px,3.5vw,54px);display:grid;place-items:center;border-radius:50%;background:#fff2cf;border:4px solid white;box-shadow:0 8px 18px rgba(0,0,0,.20);font-size:clamp(16px,1.7vw,26px)}

/* Modal */
.modal{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(7,26,80,.38);backdrop-filter:blur(6px)}.modal.show{display:flex}.modal-card{position:relative;width:min(420px,90%);padding:30px 24px 24px;border-radius:30px;background:var(--crema);border:4px solid white;text-align:center;box-shadow:0 26px 70px rgba(0,0,0,.30)}.modal-card h2{margin:0 0 10px;color:var(--azul);font-size:28px}.modal-card p{margin:0 0 20px;font-size:18px;font-weight:700}.modal-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:50%;border:0;background:var(--mamey);color:white;font-size:26px}.primary-btn{border:0;border-radius:999px;background:linear-gradient(180deg,#ffad38,#f28c38);color:white;font-weight:700;font-size:17px;padding:11px 26px;box-shadow:0 6px 0 rgba(125,70,0,.20)}

/* Landscape pequeño: celular horizontal */
@media (orientation:landscape) and (max-height:620px){
  .brand h1{font-size:clamp(32px,6.4vw,66px)}.brand p{font-size:clamp(10px,1.6vw,16px);margin-top:5px}.topbar{top:2%}.score-pill{right:8%;font-size:16px;padding:5px 10px;border-width:3px}.score-icon{width:30px;height:30px}.fullscreen-btn{width:38px;height:38px;font-size:20px;left:8px;top:8px}
  .sound-btn{right:8px;top:13%;}.side-tools{right:8px;top:28%;gap:5px}.control-circle{width:46px;height:46px;border-width:3px}.control-label{min-width:64px;font-size:8px;padding:5px;border-radius:10px;margin-top:-6px}
  .levels{left:6%;right:11%;top:34%;bottom:13%;gap:10px}.level-card{width:min(100%,clamp(96px,13vw,160px));border-radius:24px;padding:7px}.level-number{width:36px;height:36px;font-size:20px;border-width:3px}.level-cover{border-radius:18px;border-width:3px}.level-title{font-size:clamp(9px,1.2vw,15px);padding:6px 4px;border-radius:12px}
}

/* Portrait: celular/tableta vertical */
@media (orientation:portrait){
  .scene{width:100vw;height:100svh;max-height:none;border-radius:0}.bg{object-position:center;filter:saturate(1.03)}.topbar{top:2%;left:3%;right:3%}.brand h1{font-size:clamp(42px,13.4vw,86px)}.brand p{font-size:clamp(12px,3.4vw,20px);margin-top:8px}.score-pill{right:0;top:0;font-size:clamp(14px,4.2vw,22px);padding:5px 10px;border-width:3px;min-width:auto}.score-icon{width:30px;height:30px}.fullscreen-btn{left:10px;top:10px;width:42px;height:42px;font-size:20px}.sound-btn{right:10px;top:11%;}.sound-btn .control-circle{width:min(15vw,66px);height:min(15vw,66px);border-width:4px}.sound-btn .control-label{min-width:min(23vw,94px);font-size:clamp(8px,2.15vw,12px);padding:6px 4px;border-radius:11px;margin-top:-7px}
  .levels{left:5%;right:5%;top:25%;bottom:18%;grid-template-columns:repeat(2,minmax(120px,1fr));grid-template-rows:repeat(2,1fr);gap:clamp(14px,4vw,28px);align-items:center;justify-items:center}.level-card{width:min(38vw,178px);border-radius:28px;padding:8px}.level-cover{border-radius:22px 22px 18px 18px}.level-title{font-size:clamp(11px,3.2vw,17px);bottom:8%;padding:7px 5px;border-radius:14px}.level-number{width:42px;height:42px;font-size:23px;border-width:4px}.lock-badge{width:38px;height:38px;font-size:16px}
  .side-tools{left:50%;right:auto;top:auto;bottom:2%;transform:translateX(-50%);width:calc(100% - 18px);padding:6px 8px;display:flex;flex-direction:row;justify-content:center;gap:10px;border-radius:24px;background:rgba(255,248,236,.66);border:3px solid rgba(255,255,255,.9);box-shadow:0 16px 34px rgba(7,26,80,.18);backdrop-filter:blur(8px)}.side-tools .control-circle{width:min(15vw,66px);height:min(15vw,66px);border-width:4px}.side-tools .control-label{min-width:min(24vw,102px);font-size:clamp(8px,2.2vw,12px);padding:6px 4px;border-radius:11px;margin-top:-7px}.modal-card h2{font-size:24px}.modal-card p{font-size:16px}
}

/* Tablet vertical: un poco más amplio */
@media (orientation:portrait) and (min-width:700px){.levels{top:25%;bottom:15%;left:12%;right:12%}.level-card{width:min(32vw,220px)}.sound-btn{top:10%}.side-tools .control-circle{width:82px;height:82px}.side-tools .control-label{font-size:13px;min-width:112px}.sound-btn .control-circle{width:82px;height:82px}.sound-btn .control-label{font-size:13px;min-width:112px}}

@media (prefers-reduced-motion:no-preference){.level-card.unlocked{animation:softPulse 3.2s ease-in-out infinite}@keyframes softPulse{0%,100%{box-shadow:0 20px 38px rgba(39,117,35,.26),0 0 0 8px rgba(255,216,77,.14)}50%{box-shadow:0 22px 42px rgba(39,117,35,.34),0 0 0 12px rgba(255,216,77,.24)}}}


/* === AJUSTES FINALES LETRALÍN: solicitados === */
/* Sin título grande en el centro */
.brand h1{display:none!important;}
.brand p{
  margin-top:0!important;
  font-size:clamp(18px,2.1vw,32px)!important;
  background:rgba(255,248,236,.56);
  border:2px solid rgba(255,255,255,.72);
  border-radius:999px;
  padding:.28em .9em;
  backdrop-filter:blur(4px);
}

/* Iconos sin nombres visibles */
.control-label{display:none!important;}
.sound-btn,.tool-btn{gap:0!important;}
.side-tools{gap:14px!important;}

/* Fondos de niveles con colores Letralín, sin blanco */
.level-card{
  border:4px solid rgba(255,255,255,.95)!important;
}
.level-card.level-1{
  background:linear-gradient(180deg,#BFF1A8 0%, var(--verde) 100%)!important;
}
.level-card.level-2{
  background:linear-gradient(180deg,#FFD3A8 0%, var(--mamey) 100%)!important;
}
.level-card.level-3{
  background:linear-gradient(180deg,#BFEFF5 0%, var(--turquesa) 100%)!important;
}
.level-card.level-4{
  background:linear-gradient(180deg,#E7C8F0 0%, var(--morado) 100%)!important;
}

/* Nivel 2 en mamey, no rosado */
.level-number.mamey,
.level-number.pink{
  background:linear-gradient(180deg,#FFB24A,var(--mamey))!important;
}
.mamey-title,
.pink-title{
  background:linear-gradient(180deg,#FFB24A,var(--mamey))!important;
}

/* Que las portadas se vean limpias dentro de cada nivel */
.level-cover{
  background:rgba(255,255,255,.18)!important;
}
.level-cover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

@media (orientation:landscape) and (max-height:620px){
  .brand p{font-size:clamp(11px,1.7vw,17px)!important;}
  .side-tools{gap:7px!important;}
}
@media (orientation:portrait){
  .brand p{font-size:clamp(13px,3.5vw,21px)!important;}
  .side-tools{gap:12px!important;}
}


/* === AJUSTE FINAL DE COLOR Y TIPOGRAFÍA LETRALÍN === */
:root{
  --azul:#071A50;
  --azul2:#2A63AD;
  --turquesa:#33B5C7;
  --verde:#6FCB3D;
  --mamey:#F28C38;
  --amarillo:#D4A017;
  --morado:#9B35B3;
  --crema:#FFF8EC;
  --blanco:#FFFFFF;
  --gris-claro:#E8EEF5;
  --texto:#2C3E50;
}

/* Sin “Letralín” grande en el centro */
.brand h1{display:none!important;}

/* Frase sin fondo/sombra blanca y en OpenDyslexic Regular */
.brand{
  filter:none!important;
}
.brand p{
  font-family:"OpenDyslexic","OpenDyslexicAlta","Andika",Arial,sans-serif!important;
  font-weight:400!important;
  color:var(--azul)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
  margin-top:0!important;
}

/* Iconos: solo imagen, sin nombres visibles */
.control-label{
  display:none!important;
}

/* Fondos oficiales de los niveles, sin fondo blanco */
.level-card{
  border:4px solid rgba(255,255,255,.95)!important;
  box-shadow:0 18px 34px rgba(7,26,80,.24), inset 0 3px 0 rgba(255,255,255,.35)!important;
}
.level-card.level-1{
  background:var(--verde)!important;
}
.level-card.level-2{
  background:var(--mamey)!important;
}
.level-card.level-3{
  background:var(--turquesa)!important;
}
.level-card.level-4{
  background:var(--morado)!important;
}

/* Nivel 2: mamey Letralín, nunca rosado */
.level-number.mamey,
.level-number.pink{
  background:var(--mamey)!important;
}
.mamey-title,
.pink-title{
  background:linear-gradient(180deg,#F7A35A,var(--mamey))!important;
}

/* Títulos de niveles con la paleta oficial */
.green-title{
  background:linear-gradient(180deg,#7ED94D,var(--verde))!important;
}
.blue-title{
  background:linear-gradient(180deg,#48C6D4,var(--turquesa))!important;
}
.purple-title{
  background:linear-gradient(180deg,#B557C8,var(--morado))!important;
}

/* Caja de imagen sin blanco de fondo */
.level-cover{
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(255,255,255,.92)!important;
}