/* ═══ MICELA · Stack de alimentos ═══════════════════════════════════════
   Todo va dentro de .stk, el contenedor donde se monta el motor, para que
   los estilos no choquen con los de la portada cuando el juego se abre
   encima del mapa. El color de la familia llega como --h. */
.stk{
  --ground:#080B0E; --surface:#0E1418; --surface-2:#131C21; --elevated:#182329;
  --line:rgba(160,200,190,.14); --line-strong:rgba(160,200,190,.30);
  --ink:#EEF4F1; --ink-2:#B7C6C0; --muted:#7C908A; --faint:#4E5F5A;
  --luz:#9BE15D; --warn:#FFC44D; --ok:#31D68A;
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --r-m:14px; --r-l:22px;
  color-scheme:dark;
  position:relative; height:100%; overflow:hidden;
  background:var(--ground); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 600px at 50% -10%, color-mix(in srgb,var(--h) 16%,transparent), transparent 60%);
}
.stk *{box-sizing:border-box}
.stk button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.stk a{color:inherit}
.stk [hidden]{display:none!important}
.stk :focus-visible{outline:2px solid var(--luz);outline-offset:2px;border-radius:6px}
/* página sola: el juego ocupa toda la ventana */
html.stk-pagina,html.stk-pagina body{height:100%;margin:0;background:#080B0E;overflow:hidden}

/* ── barra superior ── */
.stk .top{display:flex;align-items:center;gap:12px;padding:0 14px;height:54px;border-bottom:1px solid var(--line);background:rgba(8,11,14,.9);position:relative;z-index:60}
.stk .brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;letter-spacing:.02em;font-size:15px;text-decoration:none;flex:none}
.stk .brand .iso{width:22px;height:22px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='50.0' y1='12.0' x2='50.0' y2='30.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='50.0' cy='12.0' r='8' fill='%239BE15D'/%3E%3Cline x1='69.0' y1='17.1' x2='60.0' y2='32.7' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='69.0' cy='17.1' r='8' fill='%239BE15D'/%3E%3Cline x1='82.9' y1='31.0' x2='67.3' y2='40.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='82.9' cy='31.0' r='8' fill='%239BE15D'/%3E%3Cline x1='88.0' y1='50.0' x2='70.0' y2='50.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='88.0' cy='50.0' r='8' fill='%239BE15D'/%3E%3Cline x1='82.9' y1='69.0' x2='67.3' y2='60.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='82.9' cy='69.0' r='8' fill='%239BE15D'/%3E%3Cline x1='69.0' y1='82.9' x2='60.0' y2='67.3' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='69.0' cy='82.9' r='8' fill='%239BE15D'/%3E%3Cline x1='50.0' y1='88.0' x2='50.0' y2='70.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='50.0' cy='88.0' r='8' fill='%239BE15D'/%3E%3Cline x1='31.0' y1='82.9' x2='40.0' y2='67.3' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='31.0' cy='82.9' r='8' fill='%239BE15D'/%3E%3Cline x1='17.1' y1='69.0' x2='32.7' y2='60.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='17.1' cy='69.0' r='8' fill='%239BE15D'/%3E%3Cline x1='12.0' y1='50.0' x2='30.0' y2='50.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='12.0' cy='50.0' r='8' fill='%239BE15D'/%3E%3Cline x1='17.1' y1='31.0' x2='32.7' y2='40.0' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='17.1' cy='31.0' r='8' fill='%239BE15D'/%3E%3Cline x1='31.0' y1='17.1' x2='40.0' y2='32.7' stroke='%239BE15D' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='31.0' cy='17.1' r='8' fill='%239BE15D'/%3E%3C/svg%3E") center/contain no-repeat;border-radius:0}
.stk .brand.cerrar{padding:8px 14px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line-strong);font-size:13px;letter-spacing:0}
.stk .brand.cerrar:hover{border-color:var(--luz)}
.stk .gname{font-family:var(--f-display);font-weight:700;font-size:16px;white-space:nowrap}
.stk .gname span{color:var(--h)}
.stk .fams{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;max-width:52vw}
.stk .fams::-webkit-scrollbar{display:none}
.stk .fams a,.stk .fams button{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:18px;text-decoration:none;border:1px solid transparent;opacity:.62}
.stk .fams a:hover,.stk .fams button:hover{opacity:1;background:var(--surface-2)}
.stk .fams [aria-current="page"]{opacity:1;border-color:var(--h);background:color-mix(in srgb,var(--h) 16%,transparent)}
.stk .lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;flex:none}
.stk .lang button{padding:4px 9px;font-size:11px;font-family:var(--f-mono);color:var(--muted)}
.stk .lang button[aria-pressed="true"]{background:var(--luz);color:#0B1A05;font-weight:600}
.stk .tbtn{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;font-size:15px}
.stk .tbtn:hover{border-color:var(--line-strong)}

/* ── la mesa de juego ── */
.stk .stage{height:calc(100% - 54px);display:flex;align-items:center;justify-content:center;gap:22px;padding:14px}
.stk .side{display:flex;flex-direction:column;gap:12px;width:190px;flex:none}
.stk .side.r{width:250px}
.stk .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:12px}
.stk .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.stk .boxc{display:grid;place-items:center;min-height:58px}
.stk .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stk .stat b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.stk .stat span{font-family:var(--f-display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stk .board-wrap{position:relative;flex:none;padding:6px;border-radius:16px;background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 30px 70px rgba(0,0,0,.55),0 0 60px color-mix(in srgb,var(--h) 18%,transparent)}
.stk .board-wrap canvas{display:block;border-radius:10px;background:#0B1216}
.stk .shout{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;white-space:nowrap;
  font-family:var(--f-display);font-weight:700;font-size:26px;color:var(--ink);text-shadow:0 0 18px var(--h),0 2px 0 #000}
.stk .shout.go{animation:stkShout .9s ease-out}
.stk .shout.go.big{font-size:36px}
@keyframes stkShout{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}

/* ── el dato de cada línea ── */
.stk .dato{position:relative;overflow:hidden}
.stk .dato .em{font-size:34px;line-height:1}
.stk .dato h3{margin:6px 0 4px;font-family:var(--f-display);font-size:16px;line-height:1.2;text-wrap:balance}
.stk .dato p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45}
.stk .dato .src{margin-top:8px;font-family:var(--f-mono);font-size:10px;color:var(--faint)}
.stk .dato .src.pv{color:var(--warn)}
.stk .dato.nuevo{animation:stkDato .5s ease-out}
@keyframes stkDato{0%{transform:translateY(8px);opacity:.2}100%{transform:none;opacity:1}}
.stk .vacio{color:var(--muted);font-size:13px}
.stk .menu-alimentos{display:flex;flex-wrap:wrap;gap:4px;font-size:18px;line-height:1}
.stk .help{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);line-height:1.7}

/* ── capas: portada, dato de nivel, pausa, fin ── */
.stk .ov{position:absolute;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(5,8,10,.78);backdrop-filter:blur(6px)}
.stk .ovc{width:min(480px,100%);max-height:calc(100% - 20px);overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-l);
  padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center}
.stk .ovc .eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--h)}
.stk .ovc h1,.stk .ovc h2{font-family:var(--f-display);margin:6px 0 8px;line-height:1.1;text-wrap:balance}
.stk .ovc h1{font-size:34px} .stk .ovc h1 span{color:var(--h)}
.stk .ovc h2{font-size:24px}
.stk .ovc p{color:var(--ink-2);margin:0 0 12px}
.stk .lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 14px;font-size:28px;line-height:1}
.stk .lineup span{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.stk .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;border-radius:12px;background:var(--luz);color:#0B1A05;font-weight:700;font-size:15px}
.stk .btn.sec{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong)}
.stk .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.stk .best{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:10px}
.stk .bigem{font-size:64px;line-height:1;margin:4px 0}
.stk .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.stk .nums div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 4px}
.stk .nums b{display:block;font-family:var(--f-display);font-size:18px}
.stk .nums span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stk .ovsrc{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);margin:-4px 0 12px}
.stk .ovsrc.pv{color:var(--warn)}
.stk .final{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.stk .final div{background:var(--surface-2);border-radius:10px;padding:8px}
.stk .final b{display:block;font-family:var(--f-display);font-size:20px;font-variant-numeric:tabular-nums}
.stk .final span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stk .aviso{font-size:11px;color:var(--faint);margin-top:14px}

/* ── teléfono ── */
.stk .touch{display:none}
.stk .fx{position:fixed;inset:0;pointer-events:none;z-index:40}
.stk .hudm{display:none;align-items:center;gap:10px;width:100%;max-width:420px;justify-content:space-between}
.stk .hudm .stat span{font-size:16px}
.stk .hudm canvas{display:block}
.stk .hudm .stat.tap{cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:4px 6px}
.stk .datom{display:none;position:absolute;left:8px;right:8px;top:8px;z-index:5;background:rgba(14,20,24,.95);border:1px solid var(--line-strong);border-radius:12px;
  padding:8px 10px;font-size:12.5px;line-height:1.35;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
.stk .datom.on{opacity:1;transform:none}
.stk .datom b{font-family:var(--f-display)}
@media(max-width:1020px){ .stk .side.r{width:210px} .stk .side{width:160px} }
@media(max-width:760px){
  .stk .top{height:48px;padding:0 10px;gap:8px}
  .stk .gname{display:none} .stk .brand span{display:none} .stk .brand.cerrar span{display:inline}
  .stk .fams{max-width:none;flex:1;margin-left:4px}
  .stk .fams a,.stk .fams button{width:30px;height:30px;font-size:16px}
  .stk .stage{height:calc(100% - 48px);flex-direction:column;justify-content:flex-start;gap:6px;padding:6px 8px 0}
  .stk .side{display:none}
  .stk .hudm{display:flex}
  .stk .touch{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:420px;padding:4px 0 calc(8px + env(safe-area-inset-bottom,0px))}
  .stk .touch button{height:54px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-strong);font-size:20px;touch-action:none;user-select:none}
  .stk .touch button:active{background:color-mix(in srgb,var(--h) 30%,var(--surface-2))}
  .stk .datom{display:block}
}
@media(prefers-reduced-motion:reduce){ .stk .shout.go{animation:none} .stk .dato.nuevo{animation:none} }