/* School Rush · estilos */
@font-face{font-family:'Fredoka';src:url(../fonts/Fredoka.ttf) format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Lilita One';src:url(../fonts/LilitaOne-Regular.ttf) format('truetype');font-display:swap}
:root{--ink:#2b2340;--accent:#ff6b4a;--violet:#7b6cf6;--ok:#2bb673}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1e1838;overflow:hidden;overscroll-behavior:none;font-family:'Fredoka',system-ui,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#game{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
canvas{display:block;width:100%;height:100%}
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(30,24,56,.45);padding:10px}
.overlay.hidden{display:none}
.card{background:#fff;border-radius:28px;padding:18px 24px;text-align:center;width:min(560px,94%);max-height:96%;overflow:auto;box-shadow:0 10px 0 rgba(0,0,0,.25)}
h1{font-family:'Lilita One',system-ui,sans-serif;font-weight:400;font-size:clamp(34px,7vw,58px);line-height:1;color:var(--accent);margin:4px 0;letter-spacing:1px;text-shadow:0 4px 0 var(--ink)}
.sub{font-weight:700;color:var(--violet);margin:2px 0 8px;font-size:18px}
.card p{margin:6px 0;font-size:16px}
.heroes{display:flex;gap:12px;justify-content:center;margin:8px 0}
.hero{border:4px solid #e7e1ff;background:#f7f5ff;border-radius:20px;padding:4px 10px 6px;cursor:pointer;font:inherit;font-weight:700;font-size:17px;color:var(--ink);display:flex;flex-direction:column;align-items:center}
.hero canvas{width:110px;height:120px}
.hero.sel{border-color:var(--accent);background:#fff1ec}
.names{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.names input{font:inherit;font-size:16px;width:130px;padding:6px 10px;border-radius:14px;border:3px solid #e7e1ff;text-align:center}
.btn{font-family:'Lilita One',system-ui,sans-serif;font-size:24px;border:0;border-radius:999px;padding:10px 34px;background:var(--accent);color:#fff;box-shadow:0 6px 0 #c94a30;cursor:pointer;margin:8px 4px 2px;letter-spacing:1px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c94a30}
.btn.alt{background:var(--violet);box-shadow:0 6px 0 #5446c4;font-size:18px}
.how{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:14px;font-weight:600;margin:6px 0}
.how span{background:#f1ecff;border-radius:12px;padding:4px 10px}
.stars{font-size:46px;letter-spacing:6px;margin:2px 0}
.res{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-weight:700;margin:6px 0}
.res span{background:#f7f5ff;border-radius:12px;padding:6px 12px}
.best{color:var(--violet);font-weight:700}
#mute{position:absolute;top:2.5%;left:calc(76% - var(--ms,40px) - 6px);width:var(--ms,40px);height:var(--ms,40px);border-radius:50%;border:0;background:rgba(43,35,64,.55);color:#fff;font-size:calc(var(--ms,40px)*.48);cursor:pointer;z-index:5;padding:0}
#game .conf{position:absolute;top:-40px;font-size:28px;animation:fall linear forwards;pointer-events:none;z-index:20}
@keyframes fall{to{transform:translateY(700px) rotate(540deg)}}
.prize{background:linear-gradient(135deg,#fff3a0,#ffd6e5);border:3px dashed var(--accent);border-radius:16px;padding:8px 12px;font-weight:700;margin:6px 0;animation:pop .5s}
@keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.small{font-size:14px;color:#777}
.hero.kids canvas{width:110px;height:120px}
.card.wide{width:min(680px,96%)}
.card.wide h1{font-size:34px}
.school{display:flex;gap:8px;align-items:center;justify-content:center;margin:4px 0;font-weight:700;font-size:15px}
.school input{font:inherit;font-size:16px;width:200px;padding:4px 10px;border-radius:12px;border:3px solid #e7e1ff}
.tabs{display:flex;gap:8px;justify-content:center;margin:6px 0}
.tab{font:inherit;font-weight:700;font-size:16px;border:3px solid #e7e1ff;background:#f7f5ff;border-radius:999px;padding:4px 16px;cursor:pointer;color:var(--ink)}
.tab.sel{border-color:var(--accent);background:#fff1ec}
.editor{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.pv{display:flex;flex-direction:column;align-items:center;gap:4px}
.pv canvas{width:150px;height:156px;background:#f7f5ff;border-radius:20px}
.pv input{font:inherit;font-size:16px;width:150px;padding:4px 8px;border-radius:12px;border:3px solid #e7e1ff;text-align:center}
.rows{display:flex;flex-direction:column;gap:6px;text-align:left}
.row{display:flex;align-items:center;gap:8px}
.rl{width:78px;font-weight:700;font-size:14px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #ddd;cursor:pointer;position:relative;padding:0}
.sw.sel{box-shadow:0 0 0 3px var(--accent)}
.sw.locked{opacity:.4}.sw.locked::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px}
.tb{font:inherit;font-weight:600;font-size:15px;border:3px solid #e7e1ff;background:#fff;border-radius:12px;padding:3px 9px;cursor:pointer;color:var(--ink);position:relative}
.tb.sel{border-color:var(--accent);background:#fff1ec}
.tb.locked{opacity:.45}.tb i{font-style:normal;font-size:11px;position:absolute;top:-6px;right:-6px}
.hint{font-size:14px;color:var(--violet);margin:6px 0;min-height:20px}
.retos{text-align:left;font-size:14px;background:#f7f5ff;border-radius:14px;padding:6px 12px;margin:4px 0}
.retos summary{font-weight:700;cursor:pointer}
.reto{padding:2px 0;color:#666}.reto.ok{color:var(--ok)}
/* ---- pausa, ajustes e iPhone ---- */
#pausebtn{position:absolute;top:2.5%;left:calc(76% - 2*var(--ms,40px) - 12px);width:var(--ms,40px);height:var(--ms,40px);border-radius:50%;border:0;background:rgba(43,35,64,.55);color:#fff;font-size:calc(var(--ms,40px)*.45);cursor:pointer;z-index:5;padding:0;display:none}
body.playing #pausebtn{display:block}
.iostip{font-size:13px!important;background:#eef6ff;border-radius:12px;padding:6px 30px 6px 10px!important;position:relative;color:#2f5fb3}
.iostip .x{position:absolute;right:6px;top:4px;border:0;background:none;font-size:14px;cursor:pointer;color:#2f5fb3}
body.big .card p,body.big .chip,body.big .tb,body.big .reto{font-size:1.15em}
body.big .hint{font-size:16px}
/* ---- opciones del menú ---- */
.opt{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;margin:5px 0}
.ol{font-weight:700;font-size:14px;min-width:96px;text-align:right}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip{font:inherit;font-weight:600;font-size:14px;border:3px solid #e7e1ff;background:#f7f5ff;border-radius:999px;padding:3px 12px;cursor:pointer;color:var(--ink)}
.chip.sel{border-color:var(--accent);background:#fff1ec}
.chip.voz{margin-left:4px}
.mdesc{font-size:13px!important;color:var(--violet);margin:2px 0!important;min-height:16px}
.podio{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0}
.podio span{background:#f7f5ff;border-radius:12px;padding:4px 10px;font-weight:600;font-size:14px}
.podio span.yo{background:#fff1ec;outline:2px solid var(--accent)}
/* ---- móvil ---- */
#pad{display:none}
.touch.playing #pad{display:flex}
.pb{border:0;color:#fff;font-family:'Lilita One',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
.pb b{font-size:34px;line-height:1}.pb span{font-size:15px;letter-spacing:1px}
.pb.on{transform:scale(.94);filter:brightness(1.15)}
#bDuck{background:#7b6cf6;box-shadow:0 6px 0 #5446c4}
#bJump{background:#ff6b4a;box-shadow:0 6px 0 #c94a30}
/* horizontal: botones flotando sobre el juego */
.touch:not(.portrait) #game{border-radius:0;box-shadow:none}
.touch:not(.portrait) #pad{position:fixed;left:0;right:0;bottom:0;justify-content:space-between;align-items:flex-end;padding:0 max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));pointer-events:none;z-index:20}
.touch:not(.portrait) .pb{pointer-events:auto;width:92px;height:92px;border-radius:50%;opacity:.82}
.touch:not(.portrait) .pb span{font-size:12px}
/* vertical: juego arriba y botones grandes debajo */
.portrait #wrap{flex-direction:column;justify-content:flex-start;padding-top:max(10px,env(safe-area-inset-top))}
.portrait #game{border-radius:0;box-shadow:none}
.portrait #pad{flex:1;width:100%;flex-direction:column;gap:10px;padding:14px 14px max(14px,env(safe-area-inset-bottom))}
.portrait .pads{flex:1;display:flex!important;gap:14px}
.portrait .pb{flex:1;border-radius:28px}
.portrait .pb b{font-size:64px}.portrait .pb span{font-size:24px}
.rotate{display:none;color:#c9c2ff;text-align:center;font-weight:600;font-size:15px}
.portrait .rotate{display:block}
@media (max-width:500px){.heroes{gap:6px}.hero{flex:1 1 0;min-width:0;padding:2px 4px 4px}.hero canvas{width:100%;max-width:84px;height:auto;aspect-ratio:220/240}.card{padding:14px 12px}.rl{width:64px}}
@media (max-height:520px){
  .card{padding:10px 16px;border-radius:22px}
  h1{font-size:30px}.sub{font-size:15px;margin:0 0 4px}
  #menu .card>p:not(.best):not(.iostip){display:none}
  .hero canvas{width:62px;height:68px}.hero{font-size:14px;padding:2px 8px 4px}
  .heroes{margin:4px 0}.names input{font-size:14px;width:110px;padding:4px 8px}
  .how{display:flex;margin:2px 0}.how span{display:none}.hero canvas,.hero.kids canvas{width:46px;height:50px}.hero{flex-direction:row;gap:4px;padding:2px 10px;font-size:13px}.card h1{font-size:26px}.card{max-height:98%}#menu .best{margin:2px 0;font-size:13px}.chip.voz{padding:1px 8px}.ol{min-width:0;font-size:12px}.chip{font-size:12px;padding:2px 8px}.opt{margin:2px 0;gap:4px}.mdesc{display:none}.btn{font-size:20px;padding:8px 28px;margin-top:4px}
  .stars{font-size:32px}.res{font-size:14px;gap:8px;margin:4px 0}
  .card.wide h1{font-size:22px}.tabs{margin:2px 0}.tab{font-size:14px;padding:2px 12px}.hint{margin:2px 0;font-size:12px}.retos{padding:2px 10px}
  .pv canvas{width:100px;height:104px}.sw{width:26px;height:26px}.tb{font-size:13px}.editor{gap:6px}
}