:root{
  --bg:#efe6d5;
  --paper:#fffaf0;
  --brown:#6f3b24;
  --brown-dark:#432116;
  --gold:#c9a26a;
  --blue:#1388b6;
  --green:#2e8b57;
  --red:#b44335;
  --shadow:0 10px 30px rgba(55,28,16,.16);
}
*{box-sizing:border-box}
html{background:var(--brown-dark)}
body{
  margin:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#2a211c;
  background:
    radial-gradient(circle at top,#f7f0e4 0,#efe6d5 42%,#e2d1b8 100%);
}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:max(12px,env(safe-area-inset-top)) 16px 12px;
  color:white;
  background:linear-gradient(180deg,#7b452b,#542b1d);
  box-shadow:0 4px 18px rgba(0,0,0,.2);
}
.brand{display:flex;align-items:center;gap:12px;max-width:760px;margin:auto}
.brand img{border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.25)}
h1{font-size:1.18rem;margin:0 0 2px}
.brand p{margin:0;opacity:.86;font-size:.84rem}
main{width:min(760px,100%);margin:auto;padding:16px 14px 36px}
.card{
  background:rgba(255,250,240,.96);
  border:1px solid rgba(111,59,36,.18);
  border-radius:18px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
h2{margin:0 0 14px;color:var(--brown-dark);font-size:1.15rem}
.upload-button,.primary,.secondary,.ghost{
  width:100%;
  min-height:52px;
  border:0;
  border-radius:13px;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.upload-button{
  color:white;
  background:linear-gradient(180deg,#1598c9,#0d739b);
  box-shadow:0 5px 0 #075777;
}
#imageInput{position:absolute;left:-9999px}
.primary{
  color:white;
  background:linear-gradient(180deg,#2f9f63,#247c4d);
  box-shadow:0 5px 0 #185a36;
  margin-top:14px;
}
.secondary{
  color:white;
  background:linear-gradient(180deg,#8c5333,#64331f);
  box-shadow:0 5px 0 #472214;
  margin-top:14px;
}
.ghost{
  color:var(--brown);
  border:2px solid rgba(111,59,36,.28);
  background:transparent;
  margin-top:12px;
}
button:active,.upload-button:active{transform:translateY(3px);box-shadow:none}
.preview-wrap{
  margin-top:15px;
  border-radius:14px;
  overflow:hidden;
  background:#17110e;
  border:2px solid rgba(111,59,36,.25);
}
.preview-wrap img{display:block;width:100%;max-height:500px;object-fit:contain}
.hidden{display:none!important}
.small-note{font-size:.86rem;line-height:1.45;color:#68584e;margin:13px 0 0}
.progress-box{margin-top:16px}
.progress-track{height:13px;background:#dfd1bf;border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#2e8b57,#66bd86);transition:width .2s}
#progressText{margin:8px 0 0;font-size:.87rem;color:#5d5048}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.badge{padding:5px 9px;border-radius:99px;background:#ead7b9;color:#6c4429;font-size:.75rem;font-weight:800}
.enemy-grid{display:grid;gap:12px;margin-top:15px}
.enemy-grid label{display:grid;gap:6px}
.unit-title{font-weight:800;font-size:.93rem}
input[type=text],input[inputmode]{
  width:100%;
  border:2px solid #d9c6a8;
  border-radius:12px;
  padding:13px 14px;
  font-size:1.05rem;
  background:#fff;
  color:#2b201b;
}
input:focus{outline:3px solid rgba(19,136,182,.18);border-color:var(--blue)}
details{margin-top:14px}
summary{cursor:pointer;font-weight:700;color:#765039}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  max-height:210px;
  overflow:auto;
  background:#2d241f;
  color:#f7ead6;
  border-radius:10px;
  padding:12px;
  font-size:.75rem;
}
.result-order{display:grid;gap:10px}
.result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:14px;
  padding:14px 15px;
  color:white;
}
.result-row span{display:grid}
.result-row small{opacity:.82;margin-top:2px}
.result-row b{font-size:1.65rem}
.result-row.brigao{background:linear-gradient(135deg,#9b6334,#75411f)}
.result-row.patrulheiro{background:linear-gradient(135deg,#376f9e,#24557d)}
.result-row.atirador{background:linear-gradient(135deg,#586276,#394253)}
.summary-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:15px;
}
.summary-box div{
  background:#f0e4d1;
  border-radius:12px;
  padding:11px;
  display:grid;
  gap:4px;
}
.summary-box span{font-size:.78rem;color:#6c5c50}
.summary-box strong{font-size:1rem;color:#3b291e}
.range-label{display:grid;gap:9px;margin-top:16px;font-size:.9rem}
input[type=range]{width:100%;accent-color:var(--brown)}
.explanation{
  margin:16px 0 0;
  padding:13px;
  border-left:5px solid var(--green);
  background:#edf6ef;
  border-radius:9px;
  line-height:1.45;
}
.warning{
  font-size:.82rem;
  line-height:1.45;
  color:#78483a;
  background:#f9e8df;
  border-radius:10px;
  padding:11px;
}
.cycle{display:grid;gap:8px}
.cycle span{
  background:#efe1cb;
  padding:11px 12px;
  border-radius:10px;
  font-weight:750;
}
footer{
  color:#f0dfcf;
  text-align:center;
  background:#432116;
  padding:18px 12px max(18px,env(safe-area-inset-bottom));
  font-size:.82rem;
}
@media(min-width:600px){
  .enemy-grid{grid-template-columns:repeat(3,1fr)}
}