/* Lemunao — estilos del juego (sale del mockup aprobado de lemunao-v1). */
/* games-web 18.2: todo color va aquí como token; las reglas de abajo solo usan var(--…). --px-* es el estilo Pixel. */
:root{--paper:#f6efdd;--paper2:#ece2c8;--ink:#1D3557;--ink2:#1B3F8F;--mag:#C8006E;--yel:#FFC000;--red:#D52B1E;--blue:#1E6FBF;--forest:#16301f;--white:#fff;--px-line:#5fb4ff;--paper-edge:#c9bb98;--sh-30:rgba(0,0,0,.3);--sh-25:rgba(0,0,0,.25);--sh-40:rgba(0,0,0,.4);--sh-35:rgba(0,0,0,.35);--sh-32:rgba(0,0,0,.32);--sh-28:rgba(0,0,0,.28);--sh-20:rgba(0,0,0,.2);--px-navy:#13224d;--px-gold:#ffd23f;--px-blue:#1f3b7a;--px-night:#0b1430;--px-sky:#9fd3ff;--px-pink:#ff7ab8;--star:#e3a400;--veil:rgba(8,22,14,.38);--ink-glass:rgba(29,53,87,.85);--luma-ring:rgba(255,211,77,.7);--yel-glass:rgba(255,192,0,.92);--paper-92:rgba(246,239,221,.92);--paper-88:rgba(246,239,221,.88);--paper-55:rgba(246,239,221,.55);--px-navy-88:rgba(19,34,77,.88);--luma:rgba(143,220,90,.95);--grain:rgba(120,90,40,.06);--me-row:#fff3c4;--px-luma-edge:#ffd34d;--keys:#eaf3e2;--rule:#d5c7a3;--dash:#b9a982;--mag-shadow:#7d0045;--px-gold-shadow:#7a4b00;--px-mag-shadow:#5a0032;--px-me-row:#3b2f00;--px-rule:#2f5aa8;--px-luma:#2a7d1e;--black:#000;--scent:#e9f2b8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--forest);overflow:hidden;color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
/* HUD */
.hud{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));
  display:none;gap:8px;align-items:flex-start;pointer-events:none;z-index:5}
.hud.on{display:flex}
.chip{background:var(--paper);border-radius:12px;padding:4px 10px 5px;box-shadow:2px 3px 0 var(--sh-28);font-weight:900;line-height:1.05;text-align:center}
.chip:nth-child(odd){transform:rotate(-1.2deg)} .chip:nth-child(even){transform:rotate(1deg)}
.chip small{display:block;font-size:10px;letter-spacing:.08em;color:var(--ink2);font-weight:800}
.chip b{font-size:20px;font-variant-numeric:tabular-nums}
.chip[hidden]{display:none} .chip.scent{background:var(--scent)}   /* olor del chingue (lemunao-chingue) */
.lives svg{width:20px;height:20px;margin:1px 1px 0}
.lives svg.off{opacity:.22;filter:grayscale(1)}
.prog{flex:1;align-self:center;height:10px;margin:0 6px;background:var(--paper-55);border-radius:6px;position:relative;min-width:60px}
.prog .fill{position:absolute;left:0;top:0;bottom:0;background:var(--yel);border-radius:6px}
.prog .me{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--yel);border:3px solid var(--mag)}
.prog .goal{position:absolute;right:-6px;top:50%;transform:translateY(-55%);font-size:18px}
.pausebtn{pointer-events:auto;width:46px;height:46px;border-radius:12px;border:0;background:var(--ink);color:var(--white);font-size:20px;font-weight:900;
  box-shadow:2px 3px 0 var(--sh-30);cursor:pointer}
/* controles táctiles */
.ctl{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));z-index:6;display:none;gap:10px;align-items:flex-end}
.ctl.on{display:flex}
#ctl-l{left:max(12px,env(safe-area-inset-left))} #ctl-r{right:max(12px,env(safe-area-inset-right))}
.cb{width:60px;height:60px;border-radius:50%;background:var(--paper-88);box-shadow:2px 4px 0 var(--sh-30);font-size:22px;font-weight:900;
  display:flex;align-items:center;justify-content:center;color:var(--ink);border:0;touch-action:none;cursor:pointer}
.cb.jump{width:86px;height:86px;background:var(--mag);color:var(--white);font-size:15px;letter-spacing:.02em}
.cb.down{transform:translateY(3px);box-shadow:0 1px 0 var(--sh-30)}
/* Pogo (Req. 3.7): 🌿 solo con luma en la mochila y un compañero desmayado */
.cb.luma{display:none;background:var(--luma);font-size:26px;box-shadow:0 0 0 4px var(--luma-ring),2px 4px 0 var(--sh-30)} .cb.luma.on{display:block}
#climb{display:none;flex-direction:column;gap:8px} #climb.on{display:flex}
#climb .cb{width:50px;height:50px;font-size:18px;background:var(--yel-glass)}
.keys{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;color:var(--keys);font-size:12px;opacity:.75;display:none;text-align:center;
  text-shadow:0 1px 2px var(--black)}
.keys.on{display:block}
@media (pointer:coarse){.keys{display:none!important}}
/* pantallas */
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10;padding:14px;background:var(--veil)}
.screen.on{display:flex}
.panel{background:var(--paper);border-radius:18px;padding:16px 18px;box-shadow:4px 6px 0 var(--sh-32);max-width:400px;width:100%;
  max-height:calc(100% - 8px);overflow:auto;position:relative}
.panel h1{margin:0;font-size:30px;line-height:1;letter-spacing:-.01em}
.panel h1 em{font-style:normal;color:var(--mag)}
.panel h2{margin:0 0 6px;font-size:22px}
.panel p{margin:6px 0;line-height:1.35;font-size:15px}
.tag{font-size:13px;color:var(--ink2);font-weight:700;margin:4px 0 8px}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:10px 14px;margin:7px 0;font:inherit;font-weight:800;font-size:16px;background:var(--white);
  color:var(--ink);box-shadow:0 4px 0 var(--paper-edge);cursor:pointer;text-align:center}
.btn.pri{background:var(--mag);color:var(--white);box-shadow:0 4px 0 var(--mag-shadow)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--paper-edge)}
.btn[disabled]{opacity:.6;border:2px dashed var(--dash);background:transparent;box-shadow:none;cursor:default}
.btn small{display:block;font-size:11px;font-weight:700;opacity:.8}
.row{display:flex;gap:8px} .row .btn{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--white);border-radius:99px;padding:4px 10px;font-weight:800;font-size:14px;box-shadow:0 2px 0 var(--paper-edge)}
.sdktag{position:absolute;top:-10px;right:12px;background:var(--ink);color:var(--white);font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px}
.menuwrap{display:flex;align-items:center;gap:6px;max-width:760px;width:100%;justify-content:center;max-height:100%}
.hero{width:min(34vw,300px);max-height:80vh;object-fit:contain;filter:drop-shadow(3px 5px 0 var(--sh-25))}
@media (max-width:620px){.hero{display:none}}
.foot{font-size:11px;color:var(--ink2);text-align:center;margin-top:6px}
.art{display:block;margin:0 auto;width:150px;filter:drop-shadow(2px 4px 0 var(--sh-20))}
.stars{font-size:30px;color:var(--star);text-align:center;letter-spacing:4px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl td{padding:5px 4px;border-bottom:1px dashed var(--rule)}
.tbl tr.me td{background:var(--me-row);font-weight:800}
.tabs{display:flex;gap:6px;margin:6px 0}
.tabs button{flex:1;border:0;border-radius:10px;padding:7px;font:inherit;font-weight:800;background:var(--white);cursor:pointer;box-shadow:0 2px 0 var(--paper-edge)}
.tabs button.on{background:var(--ink);color:var(--white)}
.lvls{display:grid;gap:8px}
.lvl{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:12px;padding:8px 10px;box-shadow:0 3px 0 var(--paper-edge);cursor:pointer;border:0;font:inherit;text-align:left}
.lvl .n{width:38px;height:38px;border-radius:50%;background:var(--yel);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex:none}
.lvl b{display:block} .lvl small{color:var(--ink2)} .lvl .st{margin-left:auto;color:var(--star);font-size:16px;white-space:nowrap}
.fact{background:var(--white);border-radius:12px;padding:8px 10px;font-size:14px;line-height:1.35;margin:8px 0;border-left:5px solid var(--yel)}
.notes{max-width:640px}
.notes h3{margin:12px 0 4px;font-size:16px}
.notes ul{margin:4px 0;padding-left:20px;font-size:14px;line-height:1.4}
.notes label{display:block;font-size:14px;margin:4px 0}
.notice{max-width:360px;text-align:center;border:3px solid var(--ink)}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--ink);color:var(--white);padding:7px 14px;border-radius:10px;font-weight:800;
  font-size:14px;z-index:20;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.on{opacity:1}
/* F-12: en vertical (táctil) el aviso tapa todo, también el menú del SDK, y no tiene botón: se va al girar. */
#rot{position:fixed;inset:0;z-index:2147483600;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;background:var(--forest);color:var(--white);padding:24px}
#rot h2{margin:0;font-size:24px;color:var(--yel)} #rot p{margin:0;font-weight:700}
#rot .phone{width:54px;height:88px;border:4px solid var(--yel);border-radius:12px;animation:turn 1.6s ease-in-out infinite}
@keyframes turn{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){#rot .phone{animation:none}}
@media (orientation:portrait) and (pointer:coarse){#rot{display:flex}}
.notesbtn{position:fixed;left:50%;top:max(6px,env(safe-area-inset-top));transform:translateX(-50%);z-index:12;border:0;border-radius:99px;padding:5px 12px;
  background:var(--ink-glass);color:var(--white);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
body.playing .notesbtn{top:auto;bottom:max(6px,env(safe-area-inset-bottom))}
#sndhint{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;border:0;border-radius:99px;
  padding:8px 16px;background:var(--yel);color:var(--ink);font:inherit;font-weight:900;font-size:14px;box-shadow:2px 3px 0 var(--sh-30);cursor:pointer}
/* Estilo pixel: paneles azul marino con borde celeste, como la captura */
body.skin-pixel{font-family:"Courier New",ui-monospace,Menlo,monospace}
body.skin-pixel .chip{background:var(--px-navy);color:var(--white);border:3px solid var(--px-line);border-radius:4px;box-shadow:0 0 0 3px var(--px-night),3px 4px 0 var(--px-night);transform:none!important}
body.skin-pixel .chip small{color:var(--white);letter-spacing:.12em}
body.skin-pixel .chip b{color:var(--px-gold);font-size:22px;text-shadow:2px 2px 0 var(--px-gold-shadow)}
body.skin-pixel .pausebtn{background:var(--px-navy);border:3px solid var(--px-line);border-radius:4px}
body.skin-pixel .prog{background:var(--px-navy);border:2px solid var(--px-line);border-radius:2px;height:12px}
body.skin-pixel .prog .fill{background:var(--px-gold);border-radius:0}
body.skin-pixel .panel{background:var(--px-navy);color:var(--white);border:4px solid var(--px-line);border-radius:6px;box-shadow:0 0 0 4px var(--px-night),6px 8px 0 var(--sh-40)}
body.skin-pixel .panel h1 em{color:var(--px-gold)} body.skin-pixel .tag,body.skin-pixel .foot{color:var(--px-sky)}
body.skin-pixel .btn{background:var(--px-blue);color:var(--white);border-radius:4px;box-shadow:0 4px 0 var(--px-night);border:2px solid var(--px-line)}
body.skin-pixel .btn.pri{background:var(--mag);border-color:var(--px-pink);box-shadow:0 4px 0 var(--px-mag-shadow)}
body.skin-pixel .btn[disabled]{background:transparent;border:2px dashed var(--px-line);color:var(--px-sky)}
body.skin-pixel .pill{background:var(--px-blue);color:var(--white);box-shadow:none;border:2px solid var(--px-line);border-radius:4px}
body.skin-pixel .fact,body.skin-pixel .lvl{background:var(--px-blue);color:var(--white)} body.skin-pixel .lvl small{color:var(--px-sky)}
body.skin-pixel .tbl td{border-bottom-color:var(--px-rule)} body.skin-pixel .tbl tr.me td{background:var(--px-me-row)}
body.skin-pixel .tabs button{background:var(--px-blue);color:var(--white)} body.skin-pixel .tabs button.on{background:var(--px-gold);color:var(--px-navy)}
body.skin-pixel .hero,body.skin-pixel .art{image-rendering:pixelated}
body.skin-pixel .cb{background:var(--px-navy-88);color:var(--white);border:3px solid var(--px-line);border-radius:8px}
body.skin-pixel .cb.jump{background:var(--mag);border-color:var(--px-pink)}
body.skin-pixel .cb.luma{background:var(--px-luma);border-color:var(--px-luma-edge)}
/* Estilo papel: paneles de papel con textura y bordes recortados */
body.skin-papel .panel,body.skin-papel .chip{background-image:radial-gradient(var(--grain) 1px,transparent 1px);background-size:5px 5px}
body.skin-papel .panel{clip-path:polygon(0 2%,3% 0,40% 1%,70% 0,97% 1%,100% 4%,99% 50%,100% 96%,97% 100%,60% 99%,30% 100%,2% 99%,0 95%,1% 50%)}
/* Con el menú estándar del SDK, el botón de pausa del HUD lo pone KitchHero (pauseButton.place). */
.hud-pause{pointer-events:auto;display:none}
.std-menu .hud-pause{display:block}
.std-menu .pausebtn{display:none}
/* BUG-04: en una tablet baja el botón quedaba abajo y había que desplazarse. Cada panel tiene cabeza y pie fijos y el medio
   se desplaza: el botón siempre está a la vista. En pantallas bajas la ilustración se achica y luego se oculta. */
.screen .panel{display:flex;flex-direction:column;overflow:hidden;
  max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.phead,.pfoot{flex:none}
.pbody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pfoot{padding-top:6px}
.menuwrap{max-height:calc(100dvh - 28px)}
@media (max-height:640px){.panel .art{width:110px}}
@media (max-height:520px){.panel .art{width:70px}.panel h2{font-size:19px}.screen{padding:8px}}
@media (max-height:420px){.panel .art{display:none}}
/* Pogo (lemunao-pogo): sala, personaje, cuenta regresiva y compas en el HUD */
.code{flex:1;min-width:0;border:0;border-radius:12px;padding:10px 12px;margin:7px 0;font:inherit;font-weight:900;font-size:20px;letter-spacing:.3em;
  text-transform:uppercase;text-align:center;background:var(--white);color:var(--ink);box-shadow:inset 0 2px 0 var(--paper-edge);user-select:text;-webkit-user-select:text;touch-action:auto}
.codebig{letter-spacing:.18em;color:var(--mag)}
/* BUG-31: «Compartir» junto al código de la sala (games-web §10) */
.sala{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sala h2{margin:0}
.btn.share{width:auto;margin:0 0 0 auto;padding:7px 12px;font-size:14px}
.lps{display:grid;gap:4px;margin:4px 0 8px}
.lp{display:flex;gap:8px;align-items:center;background:var(--white);border-radius:10px;padding:5px 9px;font-weight:800;font-size:14px;box-shadow:0 2px 0 var(--paper-edge)}
.lp span{margin-left:auto;color:var(--ink2);font-size:13px}
.pick{display:flex;align-items:center;gap:8px;margin:6px 0}
.pick .btn{width:44px;flex:none;margin:0}
.pick canvas{width:64px;height:73px;flex:none;background:var(--white);border-radius:12px}
.pick div{flex:1;text-align:left} .pick small{display:block;color:var(--ink2);font-size:12px}
#l-lvls .btn{font-size:14px;padding:8px 6px} #l-lvls .btn.on{background:var(--ink);color:var(--white)}
#count{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:9;font-size:min(22vw,140px);font-weight:900;color:var(--yel);
  text-shadow:4px 6px 0 var(--sh-35);pointer-events:none;display:none}
#count.on{display:block}
.team{position:fixed;left:max(10px,env(safe-area-inset-left));top:calc(max(8px,env(safe-area-inset-top)) + 54px);z-index:5;display:none;gap:5px;
  flex-direction:column;pointer-events:none}
.team.on{display:flex}
.team div{background:var(--paper-92);border-radius:9px;padding:2px 8px;font-size:12px;font-weight:800;border-left:5px solid;box-shadow:1px 2px 0 var(--sh-25)}