html,body{margin:0;height:100%;background:#030c1a;overflow:hidden}
#stage{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#world{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;transform-origin:0 0;display:block;pointer-events:none;will-change:transform}
#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse farthest-corner at 50% 50%,rgba(0,0,0,0) 55%,#000 100%);opacity:var(--vigOp)}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 70% 72%,rgba(255,214,160,.95),rgba(255,120,60,.25) 45%,transparent 75%)}
#bubble{position:absolute;display:none;transform:translate(-50%,-100%);max-width:min(78vw,300px);padding:8px 12px;border-radius:0;background:#15100c;color:#ffe7d6;border:3px solid #ec7a3c;font:700 15px/1.35 ui-monospace,Consolas,monospace;text-align:center;pointer-events:none}
#bubble.on{display:block}
#bubble::after{content:"";position:absolute;left:50%;bottom:-11px;width:10px;height:10px;background:#15100c;border-right:3px solid #ec7a3c;border-bottom:3px solid #ec7a3c;transform:translateX(-50%) rotate(45deg)}
#dock{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:8px;border-radius:0;background:#15100c;border:3px solid #ec7a3c}
body.visitor #dock,body.visitor #toggle,body.visitor #chat{display:none}
#dock.hidden{display:none}
#dock{bottom:calc(76px + env(safe-area-inset-bottom))}
#toggle{all:unset;box-sizing:border-box;position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:48px;height:48px;display:grid;place-items:center;background:#15100c;border:3px solid #ec7a3c;cursor:pointer;touch-action:none}
#toggle:active{transform:translateY(2px)}
#chat{position:absolute;display:none;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));width:min(92vw,440px);gap:6px;padding:6px;background:#15100c;border:3px solid #ec7a3c;box-sizing:border-box}
#chat.on{display:flex}
#chatIn{flex:1;min-width:0;box-sizing:border-box;background:#2a1c14;border:3px solid #4a3326;border-radius:0;color:#ffe7d6;font:700 16px ui-monospace,Consolas,monospace;padding:8px;outline:none}
#chatIn:focus{border-color:#ec7a3c}
#chatGo{all:unset;box-sizing:border-box;padding:0 14px;background:#ec7a3c;color:#15100c;font:800 15px ui-monospace,Consolas,monospace;display:grid;place-items:center;cursor:pointer;border:3px solid #ffd0a0}
@media (min-aspect-ratio:1/1){#dock{left:auto;right:calc(14px + env(safe-area-inset-right));transform:none;bottom:calc(76px + env(safe-area-inset-bottom))}#chat{left:auto;right:calc(14px + env(safe-area-inset-right));transform:none}}
@media (max-aspect-ratio:99/100){
  #dock{left:auto;right:calc(70px + env(safe-area-inset-right));transform:none;bottom:calc(14px + env(safe-area-inset-bottom));gap:6px;padding:6px}
  #dock button{width:42px;height:42px}#dock #mic{width:56px;height:56px}
  #chat{left:calc(8px + env(safe-area-inset-left));right:calc(74px + env(safe-area-inset-right));width:auto;transform:none;bottom:calc(14px + env(safe-area-inset-bottom))}
}
#dock button{all:unset;box-sizing:border-box;width:46px;height:46px;border-radius:0;display:grid;place-items:center;cursor:pointer;background:#2a1c14;border:3px solid #4a3326;touch-action:none}
#dock button.on{border-color:#ec7a3c;background:#4a2a18}
#dock #mic{width:58px;height:58px;background:#ec7a3c;border-color:#ffd0a0}
#dock #mic.on{background:#f39a45;border-color:#fff;transform:translateY(2px)}
.ic{display:block;width:26px;height:26px}
.ic svg{display:block;width:100%;height:100%}
/* Pas d'animation CSS continue sur le ciel : elle le faisait repeindre sans arrêt (et vidait la batterie). Les étoiles scintillent par petits groupes (decor.js). */
/* (les étoiles changent d'opacité d'un coup, sans transition : une transition sur un élément SVG fait repeindre la page 60 fois par seconde pendant toute sa durée) */
#dbg{position:fixed;left:8px;right:8px;top:8px;display:none;font:12px system-ui;color:#fff;background:#000a;padding:6px 10px;border-radius:8px;z-index:9}#dbg{max-height:46vh;overflow:auto}#dbgBtns{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center}#dbgBtns b{width:100%;margin-top:4px;color:#ffd0a0;font:700 11px system-ui}#dbgBtns button.stop{background:#e8502b;color:#fff}#dbgCap{font:700 14px system-ui;color:#ffd070;min-height:18px}#dbgBtns button{font:11px system-ui;padding:3px 6px;border-radius:6px;border:0;background:#ec7a3c;color:#15100c}
#dbg input{width:100%}
body.away #dock,body.away #toggle,body.away #chat,body.away #bubble{display:none!important}
#gate{position:fixed;inset:0;z-index:30;display:none;place-items:center;background:rgba(3,12,26,.78)}
#gate.on{display:grid}
#gatePanel{width:min(86vw,340px);box-sizing:border-box;padding:16px;background:#15100c;border:3px solid #ec7a3c;color:#ffe7d6;font:700 15px/1.4 ui-monospace,Consolas,monospace;text-align:center}
#gateTitle{font-size:22px;letter-spacing:4px;color:#ec7a3c;margin-bottom:8px}
#gatePanel p{margin:0 0 14px;min-height:42px}
#gatePanel button{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:8px;padding:12px;cursor:pointer;background:#ec7a3c;color:#15100c;border:3px solid #ffd0a0;font:800 15px ui-monospace,Consolas,monospace}
#gatePanel button:disabled{opacity:.5;cursor:default}
#gatePanel #gateClose{background:#2a1c14;color:#ffe7d6;border-color:#4a3326}
