html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%;background:#53351F;font-family:system-ui,sans-serif;}
  #renderCanvas{width:100%;height:100%;touch-action:none;display:block;outline:none;}
  #hud{
    position:absolute;top:12px;left:12px;color:#F2E8D6;font-size:13px;line-height:1.5;
    background:rgba(83,53,31,.72);padding:12px 14px;border-radius:8px;border:1px solid #B8AEA3;
    max-width:300px;pointer-events:none;
  }
  #hud b{color:#D7C3A2;}
  #hud .k{color:#93613A;}
  #status{margin-top:8px;padding-top:8px;border-top:1px solid #B8AEA3;font-size:12px;}
  .seen{color:#ff6b6b;font-weight:bold;}
  .safe{color:#7ec87e;}
  #controls{
    position:absolute;bottom:12px;left:12px;color:#D7C3A2;font-size:12px;
    background:rgba(83,53,31,.72);padding:10px 12px;border-radius:8px;border:1px solid #B8AEA3;
  }
  button{
    background:#93613A;color:#1D1A17;border:1px solid #B8AEA3;border-radius:5px;
    padding:6px 10px;font-size:12px;cursor:pointer;margin-top:6px;
  }
  button:hover{background:#53351F;color:#F2E8D6;}
  #selbox{
    position:absolute;border:1px solid #7ec87e;background:rgba(126,200,126,.15);
    pointer-events:none;display:none;z-index:10;
  }
  /* hamburguer de ayuda */
  #burger{
    position:absolute;top:12px;left:12px;z-index:30;background:rgba(30,20,40,.85);
    border:1px solid #4a2c5a;border-radius:8px;color:#e8dce8;width:40px;height:40px;
    font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  #helpPanel{
    position:absolute;top:60px;left:12px;z-index:29;color:#F2E8D6;font-size:12px;line-height:1.6;
    background:rgba(83,53,31,.92);padding:12px 14px;border-radius:8px;border:1px solid #B8AEA3;
    max-width:300px;display:none;
  }
  #helpPanel .k{color:#93613A;}