/* explain.css — Botón flotante de explicación + hoja de ayuda */

.explain-fab{position:fixed;right:18px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:400;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--border2);
  background:linear-gradient(135deg,rgba(212,168,67,.95),rgba(232,98,42,.92));color:var(--deep);
  font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45);-webkit-tap-highlight-color:transparent;transition:transform .15s,opacity .2s;}
.explain-fab:hover{opacity:.92;}
.explain-fab:active{transform:scale(.92);}

@media (max-width:600px){
  .explain-fab{bottom:calc(20px + env(safe-area-inset-bottom));}
}

.explain-overlay{position:fixed;inset:0;z-index:9500;background:rgba(5,16,28,.72);
  display:flex;align-items:flex-end;justify-content:center;}
.explain-card{background:var(--ocean);border:1px solid var(--border2);border-bottom:none;
  border-radius:14px 14px 0 0;width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  padding-bottom:max(14px,env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.5);
  animation:explainUp .22s ease;}
@keyframes explainUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.explain-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px 11px;border-bottom:1px solid var(--border);}
.explain-title{font-family:'Cinzel',serif;font-size:14px;color:var(--gold-light);letter-spacing:.5px;}
.explain-close{flex-shrink:0;width:30px;height:30px;border:1px solid var(--border);border-radius:6px;
  background:rgba(212,168,67,.08);color:var(--gold);font-size:14px;cursor:pointer;}
.explain-close:hover{background:rgba(212,168,67,.18);}
.explain-body{padding:14px 16px;overflow-y:auto;font-size:13.5px;line-height:1.6;color:var(--cream);}
.explain-body b{color:var(--gold-light);}
.explain-body .ex-step{display:block;margin:7px 0;}
.explain-body code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  background:rgba(5,24,40,.6);padding:1px 5px;border-radius:3px;color:var(--gold-light);}
.explain-ask{margin:6px 16px 4px;padding:10px;border:1px solid rgba(232,98,42,.4);border-radius:8px;
  background:rgba(232,98,42,.14);color:var(--orange);font-family:'Cinzel',serif;font-size:11px;
  letter-spacing:.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.explain-ask:hover{background:rgba(232,98,42,.24);}