html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:Georgia,serif;color:#ccc}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.ui{position:fixed;inset:0;pointer-events:none}
.count{position:absolute;top:14px;right:18px;font:13px monospace;color:rgba(200,200,200,.35)}
.dbg{position:absolute;bottom:14px;right:14px;pointer-events:auto;background:rgba(0,0,0,.4);color:#777;border:1px solid #333;font:11px monospace;padding:4px 8px;cursor:pointer}
.mode{position:absolute;bottom:16px;left:16px;font:11px monospace;color:rgba(200,200,200,.4)}
#vid{position:fixed;bottom:44px;right:14px;width:200px;transform:scaleX(-1);display:none;border:1px solid #333;z-index:5}
#vid.show{display:block}
.start{position:fixed;inset:0;background:radial-gradient(#1a0505,#000);display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity .6s}
.start.hide{opacity:0;pointer-events:none}
.box{max-width:420px;text-align:center;padding:20px}
.box h2{font-size:44px;color:#b11;letter-spacing:4px;margin:0 0 14px;text-shadow:0 0 18px #600}
.box p{line-height:1.5}.small{font-size:13px;color:#888}
.box button{margin:8px;padding:12px 22px;font:16px Georgia,serif;background:#7a0d0d;color:#eee;border:0;cursor:pointer}
.box button.ghost{background:transparent;border:1px solid #555}
.box button:hover{background:#a01515}
.flash{position:fixed;inset:0;background:#c00;opacity:0;pointer-events:none;z-index:6;mix-blend-mode:screen}
.fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:7;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
.fade.on{opacity:1}
.fade p{font-size:46px;color:#a00;letter-spacing:3px;text-shadow:0 0 20px #500}

/* --- acrescentado na publicacao em rodrigofavaro.com --- */
/* Aviso de conteudo: precisa ser lido ANTES do botao da camera, entao fica
   acima dele e com destaque proprio, nao em letra miuda no rodape da caixa. */
.aviso{border:1px solid #5a1a1a;background:rgba(90,16,16,.18);padding:10px 12px;
  font-size:13px;line-height:1.45;color:#d8b9b9;text-align:left;border-radius:3px}
/* Saida: o jogo e tela cheia e o original nao tinha nenhuma volta para o site. */
.sair{position:absolute;top:12px;left:16px;pointer-events:auto;font:11px monospace;
  color:rgba(200,200,200,.4);text-decoration:none;letter-spacing:.08em}
.sair:hover{color:#ccc}
.volta{color:#8a6a6a}
.box button:focus-visible,.sair:focus-visible,.dbg:focus-visible{outline:2px solid #c33;outline-offset:2px}
/* Area de toque decente no celular para os botoes da tela inicial. */
@media (max-width:600px){.box button{min-height:48px;width:100%;margin:6px 0}}

/* A mecanica no celular e TOCAR a tela repetidas vezes, que e exatamente o
   gesto de double tap to zoom: sem isto o jogo da zoom no lugar de andar. */
html,body,#c{touch-action:manipulation;-webkit-user-select:none;user-select:none}
/* O .sair ficava SOB o #fade (z-index 7) nos 3,2s da morte: invisivel, porem
   clicavel. Ou esta acima e visivel, ou nao recebe clique. */
.sair{z-index:8}

/* Mudo fica ao lado do "ver camera", mesma linguagem visual discreta. */
.mudo{right:92px}