:root{--madeira:#2a1b0d;--madeira2:#1b1208;--ouro:#d9a441;--cobre:#c8752b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--madeira2);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;color:#fff}
body{position:fixed;inset:0}
#app{position:absolute;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;align-items:center;justify-content:center}
#palco{position:relative;aspect-ratio:4/3;width:min(100vw,calc(100dvh*4/3));max-width:960px;background:#000;flex:none;overflow:hidden}
#jogo{display:block;width:100%;height:100%;touch-action:none}
.controle{display:none}
#botoes-topo{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:none;gap:6px;z-index:5}
#botoes-topo button{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.45);color:#fff;font-size:15px;padding:0}
body.toque.jogando #pausa{display:block}
#pausa{display:none}
body.toque.jogando #botoes-topo{display:flex}
#nome{position:absolute;left:56.7%;top:30.2%;width:19.2%;height:5%;font-size:clamp(11px,2.2vmin,16px);background:#fff;color:#000;border:1px solid #666;padding:0 4px;z-index:6;-webkit-user-select:text;user-select:text;touch-action:auto;border-radius:0}
#carregando{position:absolute;inset:0;background:rgba(0,0,0,.8);display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;font-weight:bold;z-index:8}
#carregando[hidden],#inicio[hidden]{display:none}
.trilho{width:60%;min-width:180px;height:10px;background:#3a2a18;border-radius:6px;overflow:hidden;border:1px solid #6b4f28}
#barra,#barra0{height:100%;width:0;background:linear-gradient(90deg,var(--cobre),var(--ouro));transition:width .15s}
#inicio{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#120c05}
#inicio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#progresso{position:relative;width:100%;display:flex;justify-content:center;margin-top:auto;margin-bottom:8%}
#progresso[hidden],#comecar[hidden]{display:none}
#comecar{position:relative;margin-top:auto;font-size:clamp(18px,4.5vmin,30px);font-weight:bold;font-family:inherit;padding:.5em 1.6em;border-radius:40px;border:2px solid #fff4d0;background:linear-gradient(180deg,#e7b04a,#b86a1f);color:#2a1505;box-shadow:0 4px 0 #6b3d10;cursor:pointer}
.dica-teclado{position:relative;margin:0 8px 10px;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:12px;text-align:center}
body.toque .dica-teclado{display:none}
/* Controles de toque */
.tecla{appearance:none;border:0;padding:0;margin:0;color:#fff;font-weight:bold;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
:root{--u:54px}
.cruz{position:relative;flex:none;width:calc(var(--u)*3);height:calc(var(--u)*3);display:grid;grid-template:repeat(3,var(--u))/repeat(3,var(--u))}
.cruz .tecla,.c-meio{background:#3d2a14;border:2px solid var(--ouro);color:#ffe9b0;font-size:20px;display:block}
.c-cima{grid-area:1/2;border-radius:10px 10px 0 0}.c-esq{grid-area:2/1;border-radius:10px 0 0 10px}.c-meio{grid-area:2/2;border-color:#3d2a14!important}.c-dir{grid-area:2/3;border-radius:0 10px 10px 0}.c-baixo{grid-area:3/2;border-radius:0 0 10px 10px}
.tecla.ativa{background:var(--cobre)!important;color:#fff}
.redondo{flex:none;width:calc(var(--u)*2.1);height:calc(var(--u)*2.1);border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0bf5c,#b86a1f);border:3px solid #fff0c4;box-shadow:0 4px 0 #6b3d10;color:#2a1505;font-size:calc(var(--u)*.31);letter-spacing:.5px}
/* Celular em pe: jogo em cima, controle embaixo */
@media (orientation:portrait){
  body.toque{--u:clamp(44px,14vw,84px)}
  body.toque #app{flex-flow:row wrap;align-content:flex-start;justify-content:flex-start;background:var(--madeira)}
  body.toque #palco{flex:0 0 100%;width:100%;max-width:none;order:1}
  body.toque .controle{display:flex;align-items:center;justify-content:center;flex:0 0 50%;width:50%;order:2;padding:8px;height:calc(100dvh - 75vw - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:repeating-linear-gradient(0deg,#2d1d0e,#2d1d0e 18px,#281a0c 18px,#281a0c 19px)}
}
/* Celular deitado: controles nas laterais, fora da area do jogo */
@media (orientation:landscape){
  body.toque{--u:clamp(36px,11.5vh,54px)}
  body.toque #app{justify-content:space-between;background:var(--madeira)}
  body.toque #palco{order:1;flex:none;max-width:none;height:min(100dvh,calc((100vw - 2*var(--lado))*.75));width:auto;--lado:calc(var(--u)*3 + 12px)}
  body.toque #app{--lado:calc(var(--u)*3 + 12px)}
  body.toque .controle{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;height:100%;padding:4px}
  body.toque .esquerdo{order:0}body.toque .direito{order:2}
}