:root { --fundo: #0b1220; --painel: #111c33; --borda: #24365a; --texto: #e5edf8; --suave: #9fb2cc;
  --verde: #22c55e; --azul: #2563eb; --amarelo: #facc15; --laranja: #f97316; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--texto);
  font-family: "Segoe UI", Verdana, Arial, sans-serif; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; }
button { font-family: inherit; cursor: pointer; }
.escondido { display: none !important; }

.voltar { position: fixed; left: 10px; top: 10px; z-index: 30; text-decoration: none; font-weight: 700; color: var(--azul);
  background: #fff; padding: 8px 16px; border-radius: 999px; font-size: 0.95rem; }
body[data-modo="jogo"] .voltar { display: none; }

#palco { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: var(--fundo); }
#campo { position: absolute; left: 0; top: 0; display: block; touch-action: none; }

/* botões no topo durante a partida */
#botoesTopo { position: absolute; right: 8px; top: 8px; z-index: 6; display: none; gap: 6px; }
body[data-modo="jogo"] #botoesTopo { display: flex; }
#botoesTopo button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5);
  background: rgba(10,18,32,0.75); color: #fff; font-size: 1.05rem; padding: 0; }
#giraAviso { display: none; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 7;
  background: rgba(250,204,21,0.95); color: #422006; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; }
@media (orientation: portrait) { body[data-modo="jogo"] #giraAviso { display: block; } }

/* controles de toque */
#toque { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
body.tem-toque[data-modo="jogo"] #toque { display: block; }
#joyZona { position: absolute; left: 0; bottom: 0; width: 46%; height: 75%; pointer-events: auto; touch-action: none; }
#joyBase { position: absolute; left: 26px; bottom: 26px; width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.35); opacity: 0.6; }
#joyBase.ativo { bottom: auto; transform: translate(-50%, -50%); opacity: 0.95; }
#joyBola { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255,255,255,0.6); }
#botoesAcao button { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; padding: 0;
  border: 3px solid rgba(255,255,255,0.75); color: #fff; font-weight: 800; letter-spacing: 0.5px;
  -webkit-user-select: none; user-select: none; opacity: 0.82; }
#botoesAcao button.ativo { opacity: 1; transform: scale(0.94); border-color: #fde047; }
#bChute { right: 22px; bottom: 26px; width: 92px; height: 92px; background: rgba(34,197,94,0.6); font-size: 0.95rem; }
#bPasse { right: 128px; bottom: 20px; width: 78px; height: 78px; background: rgba(37,99,235,0.6); font-size: 0.85rem; }
#bCorrer { right: 30px; bottom: 130px; width: 68px; height: 68px; background: rgba(249,115,22,0.65); font-size: 0.72rem; }
#bTrocar { right: 120px; bottom: 110px; width: 56px; height: 56px; background: rgba(124,58,237,0.6); font-size: 0.6rem; }
@media (max-height: 430px) {
  #bChute { width: 80px; height: 80px; right: 16px; bottom: 16px; }
  #bPasse { width: 66px; height: 66px; right: 108px; bottom: 12px; }
  #bCorrer { width: 58px; height: 58px; right: 24px; bottom: 108px; }
  #bTrocar { width: 48px; height: 48px; right: 100px; bottom: 90px; }
  #joyBase { width: 92px; height: 92px; left: 18px; bottom: 18px; }
}

/* telas */
#ui { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none; }
.tela { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto;
  width: min(560px, calc(100% - 20px)); max-height: calc(100% - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(17,28,51,0.96); border: 2px solid var(--borda); border-radius: 18px; padding: 16px 18px 18px;
  text-align: center; touch-action: pan-y; box-shadow: 0 10px 40px rgba(0,0,0,0.5); margin-top: 22px; }
.tela h1 { margin: 0 0 4px; font-size: 1.9rem; }
.tela h2 { margin: 6px 0 8px; font-size: 1.15rem; color: var(--amarelo); }
.tela h1 + .sub { margin-top: 0; }
.sub { margin: 6px 0 10px; color: var(--suave); line-height: 1.4; font-size: 0.95rem; }
.niveis { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nivel { flex: 1 1 140px; min-height: 52px; background: #17264a; color: var(--texto); border: 2px solid var(--borda);
  border-radius: 12px; font-weight: 700; font-size: 1rem; padding: 8px 10px; }
.nivel small { display: block; font-weight: 400; color: var(--suave); font-size: 0.78rem; }
.nivel.sel { border-color: var(--amarelo); background: #26356a; }
.modos { display: flex; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; }
.grande { flex: 1 1 200px; min-height: 60px; border: 0; border-radius: 14px; color: #0b1220; font-weight: 800; font-size: 1.15rem; padding: 10px 14px; }
.grande small { display: block; font-weight: 600; font-size: 0.78rem; opacity: 0.8; }
.verde { background: var(--verde); }
.amarelo { background: var(--amarelo); }
.linha { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.linha button { background: #17264a; color: var(--texto); border: 2px solid var(--borda); border-radius: 999px;
  padding: 10px 16px; font-weight: 700; font-size: 0.95rem; min-height: 44px; }
.linha button.grande { border-radius: 14px; flex: 1 1 100%; color: #0b1220; border: 0; }
.linha button.grande.amarelo { background: var(--amarelo); }
.linha button.grande.verde { background: var(--verde); }
.como { text-align: left; background: #0e1a33; border-radius: 12px; padding: 4px 14px 10px; margin-top: 12px; font-size: 0.9rem; line-height: 1.5; }
.como ul { margin: 4px 0 8px; padding-left: 20px; }
kbd { background: #26356a; border: 1px solid #3b4f86; border-radius: 4px; padding: 0 5px; font-size: 0.85em; font-family: inherit; }
.dica { color: var(--suave); font-size: 0.8rem; line-height: 1.4; margin: 12px 0 0; }

.chaves { list-style: none; margin: 8px 0; padding: 0; text-align: left; }
.chaves li { display: flex; align-items: center; gap: 10px; background: #17264a; border: 2px solid var(--borda); border-radius: 12px;
  padding: 8px 12px; margin-bottom: 8px; }
.chaves li.atual { border-color: var(--amarelo); background: #26356a; }
.chaves li.feita { border-color: #166534; }
.chaves li.bloq { opacity: 0.55; }
.chaves .chip { width: 14px; height: 30px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.6); flex: none; }
.chaves .info { flex: 1; font-weight: 700; }
.chaves .info small { display: block; color: var(--suave); font-weight: 400; }
.chaves .marca { font-size: 1.3rem; }

.placarFim { font-size: 2.4rem; font-weight: 800; margin: 4px 0; }
.stats { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 0.95rem; }
.stats th, .stats td { padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.stats thead th { color: var(--amarelo); font-size: 0.85rem; }
.stats tbody th { text-align: left; color: var(--suave); font-weight: 600; }
.stats td { font-weight: 800; }

@media (max-height: 430px) {
  .tela h1 { font-size: 1.4rem; }
  .tela { padding: 10px 14px 12px; max-height: calc(100% - 52px); margin-top: 18px; }
  .grande { min-height: 48px; font-size: 1rem; }
  .modos { margin: 8px 0 6px; }
}