*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
:root{
  --bg:#ECEFF3;
  --text:#0B1120;
  --muted:#6B7280;
  --primary:#16A34A;
  --primary-strong:#15803D;
  --gold:#D4AF37;
  --gold-strong:#B68A1F;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --cell:#CBD5E1;
  --hit:#22C55E;
  --focus:#11182722;
}
body{background:var(--bg);color:var(--text)}
.app-header{
  position:sticky;top:0;
  background:linear-gradient(180deg,var(--primary),var(--primary-strong));
  color:white;padding:12px 20px 8px;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.12)
}
#app-title{margin:6px 0 10px 0}
.topnav{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.topnav .nav-btn{
  border-radius:999px;border:0;background:var(--gold);color:#111827;
  padding:10px 18px;font-weight:900;letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(212,175,55,.35);transition:transform .06s ease, box-shadow .2s ease, background .2s ease
}
.topnav .nav-btn:hover{background:var(--gold-strong)}
.topnav .nav-btn:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(182,138,31,.35)}
.topnav .nav-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

main.view{padding:16px; max-width:900px; margin:0 auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.center-buttons{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;min-height:35vh}

.btn{
  appearance:none;border:0;border-radius:16px;padding:14px 18px;font-weight:900;
  background:var(--gold);color:#111827;box-shadow:0 10px 22px rgba(212,175,55,.38);width:90%;max-width:360px;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease
}
.btn:hover{background:var(--gold-strong)}
.btn:active{transform:translateY(1px);box-shadow:0 8px 18px rgba(182,138,31,.38)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn.secondary{background:var(--gold)}
.btn.muted{background:var(--gold)}
.btn.ghost{background:var(--gold);border:0}

.input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#fff}
.input:focus{outline:3px solid var(--focus);outline-offset:2px}
.input[disabled]{background:#F3F4F6;color:#9CA3AF}

.label{font-size:14px;color:var(--muted);display:block;margin-bottom:6px}
.section-title{font-weight:900;margin:12px 0 6px}

.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cell{
  height:50px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:12px;background:var(--cell);position:relative;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease
}
.cell:hover{box-shadow:0 3px 10px rgba(0,0,0,.08)}
.cell:active{transform:scale(.98)}
.cell.mark{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:900}
@keyframes hitPulse{0%{outline-color:transparent}50%{outline-color:var(--hit)}100%{outline-color:transparent}}
.cell.hit{outline:3px solid var(--hit); outline-offset:-2px; animation:hitPulse .9s ease 1}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.item{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;background:#ECFDF5;color:#065F46;font-weight:700}
.badge.gray{background:#E5E7EB;color:#374151}
.list{display:grid;gap:12px}
.small{font-size:12px;color:var(--muted)}
hr.sep{border:0;border-top:1px dashed var(--border);margin:12px 0}
.kbd{font-family:monospace;background:#111827;color:#fff;padding:2px 6px;border-radius:6px}
.toast{will-change:transform,opacity}

/* Banner de conclusão */
.banner-done{
  border:1px solid #86EFAC;
  background:linear-gradient(180deg,#DCFCE7,#BBF7D0);
  color:#14532D;
  padding:12px 14px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:10px
}
.banner-done .title{font-weight:900}
.banner-done .actions{display:flex; gap:8px}