:root{
  --navy:#07111F; --navy2:#0C1B2E; --linha:rgba(255,255,255,.10);
  --laranja:#FF9600; --ciano:#0CC0DF;
  --txt:#E8F0F8; --txt2:#93A9C1;
  --disp:'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --corpo:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --grade:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  --grade-tam:46px 46px, 46px 46px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background-image:
    var(--grade),
    radial-gradient(1100px 620px at 12% -12%, rgba(12,192,223,.13) 0%, transparent 62%),
    radial-gradient(900px 560px at 96% 4%, rgba(255,150,0,.09) 0%, transparent 60%);
  background-size: var(--grade-tam), auto, auto;
  background-color:var(--navy);
  color:var(--txt); font-family:var(--corpo); min-height:100vh;
  display:flex; flex-direction:column;
}
.env{width:min(1180px,100%); margin:0 auto; padding:20px 20px 34px; flex:1 0 auto}
.env[hidden]{display:none}

/* ---------- topo ---------- */
.topo{display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--linha)}
.tit{flex:1 1 340px; min-width:0}
h1{font-family:var(--disp); font-weight:800; font-size:clamp(24px,3.6vw,33px); line-height:1; margin:0; letter-spacing:-.03em}
h1 b{color:var(--ciano); font-weight:800}
.sub{margin:7px 0 0; color:var(--txt2); font-size:13.5px; max-width:62ch}
.abas{display:flex; gap:6px; background:rgba(255,255,255,.05); padding:5px; border-radius:12px}
.aba{
  appearance:none; border:0; background:transparent; color:var(--txt2); cursor:pointer;
  font-family:var(--corpo); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:9px; transition:.18s;
}
.aba:hover{color:var(--txt)}
.aba[aria-selected="true"]{background:var(--laranja); color:#160c00}
.aba:focus-visible{outline:2px solid var(--ciano); outline-offset:2px}

/* ---------- estrutura ---------- */
.painel{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; padding-top:18px; align-items:start}
.painel[hidden]{display:none}
.col-esq{min-width:0; display:flex; flex-direction:column; gap:14px}
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch}
.duo > .cartao{display:flex; flex-direction:column}
.col-dir{display:flex; flex-direction:column; gap:14px}
.cartao{
  background:linear-gradient(rgba(12,27,46,.92), rgba(12,27,46,.92));
  border:1px solid var(--linha); border-radius:16px; padding:14px;
}
.cartao h2{
  font-family:var(--corpo); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt2); margin:0 0 10px; font-weight:600;
}

/* ---------- malhas ---------- */
.malhas{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; justify-content:center}
.bloco{flex:0 1 auto; min-width:0; width:max(168px, min(var(--maxmalha,380px), calc(100vh - 500px)))}
.bloco{width:max(168px, min(var(--maxmalha,380px), calc(100dvh - 500px)))}
.bloco[hidden]{display:none}
.malha{
  position:relative; display:grid; grid-template-columns:repeat(10,1fr); gap:2px;
  aspect-ratio:1; padding:6px; border-radius:12px;
  background:rgba(7,17,31,.55); border:1px solid rgba(255,255,255,.17);
  touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair;
}
.malha::after{
  content:''; position:absolute; inset:6px; pointer-events:none; border-radius:4px;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.30) calc(50% - 1px), rgba(255,255,255,.30) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.30) calc(50% - 1px), rgba(255,255,255,.30) calc(50% + 1px), transparent calc(50% + 1px));
}
.cel{background:rgba(255,255,255,.05); border-radius:2.5px; touch-action:none; transition:background .12s linear}
.cel.cheia{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.cel.entra{animation:pop .26s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{from{transform:scale(.35); opacity:.2} to{transform:scale(1); opacity:1}}
.rot{margin-top:8px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12px; color:var(--txt2)}
.rot b{font-family:var(--mono); font-weight:700; font-size:14px; color:var(--txt)}

/* ---------- leitura ---------- */
.c-leitura{text-align:center}
.cadeia{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-family:var(--mono); font-size:20px; margin:2px 0}
.t-pct{font-family:var(--disp); font-weight:800; font-size:clamp(34px,5vw,46px); line-height:.9; letter-spacing:-.035em; color:var(--laranja)}
.ig{color:var(--txt2); font-weight:500}
.t-num{font-weight:700}
.frac{display:inline-flex; flex-direction:column; align-items:center; line-height:1.06; font-size:.72em; font-weight:700}
.frac .barra{display:block; height:2px; background:currentColor; width:100%; margin:3px 0; border-radius:1px}
.frac u{text-decoration:none; padding:0 4px}
.detalhe{margin:8px 0 0; font-size:12.5px; color:var(--txt2)}
.detalhe b{color:var(--txt); font-weight:700}
.aplic{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--linha);
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--txt2);
}
.c-leitura .cadeia{margin-top:4px}
.aplic input{
  width:110px; background:rgba(255,255,255,.06); border:1px solid var(--linha); color:var(--txt);
  border-radius:8px; padding:7px 9px; font-family:var(--mono); font-size:13px;
}
.aplic input:focus-visible{outline:2px solid var(--ciano); outline-offset:1px}
.aplic .res{font-family:var(--mono); color:var(--ciano); font-weight:700; font-size:14px}

/* ---------- peças ---------- */
.pecas{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.peca{
  appearance:none; cursor:pointer; text-align:left; border-radius:11px; padding:10px 9px 9px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  color:var(--txt); font-family:var(--corpo); transition:.15s; display:block;
}
.peca:hover{background:rgba(255,255,255,.09); transform:translateY(-1px)}
.peca:active{transform:translateY(0)}
.peca:focus-visible{outline:2px solid var(--ciano); outline-offset:2px}
.peca .top{display:flex; align-items:center; gap:6px}
.peca .val{font-family:var(--mono); font-weight:700; font-size:15px}
.peca .leg{display:block; margin-top:4px; font-size:10.5px; color:var(--txt2); line-height:1.25}
.icone{width:15px; height:15px; flex:0 0 auto; border-radius:2px}

/* ---------- montar ---------- */
.montar{display:flex; flex-direction:column; gap:11px}
.linha-alvo{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.linha-alvo input[type=number]{
  width:82px; background:rgba(255,255,255,.06); border:1px solid var(--linha); color:var(--txt);
  border-radius:8px; padding:8px 9px; font-family:var(--mono); font-size:14px; font-weight:700;
}
.linha-alvo input[type=range]{flex:1 1 180px; min-width:130px; accent-color:var(--laranja)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  appearance:none; cursor:pointer; border-radius:999px; padding:6px 12px; font-family:var(--mono);
  font-size:12px; font-weight:500; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:var(--txt2); transition:.15s;
}
.chip:hover{color:var(--txt); border-color:var(--ciano)}
.chip[aria-pressed="true"]{background:var(--ciano); border-color:var(--ciano); color:#04222a; font-weight:700}
.chip:focus-visible{outline:2px solid var(--ciano); outline-offset:2px}
.modo{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--txt2)}
.bt{
  appearance:none; cursor:pointer; border-radius:9px; padding:9px 15px; font-family:var(--corpo);
  font-weight:700; font-size:13px; border:1px solid transparent; transition:.15s;
}
.bt-pri{background:var(--laranja); color:#160c00}
.bt-pri:hover{filter:brightness(1.08)}
.bt-sec{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:var(--txt)}
.bt-sec:hover{background:rgba(255,255,255,.11)}
.bt:focus-visible{outline:2px solid var(--ciano); outline-offset:2px}
.acoes{display:flex; gap:8px}
.acoes .bt{flex:1}

/* ---------- soma ---------- */
.soma{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-family:var(--mono); font-size:13px; min-height:34px}
.pc{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:7px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10)}
.pc i{width:10px; height:10px; border-radius:2px; display:block}
.pc small{color:var(--txt2); font-size:10.5px}
.mais{color:var(--txt2)}
.igual{color:var(--txt2)}
.tot{color:var(--laranja); font-weight:700}
.vazio{color:var(--txt2); font-size:12.5px; font-family:var(--corpo)}
.aviso{margin-top:10px; font-size:12.5px; color:#FFD9A0; background:rgba(255,150,0,.10);
  border:1px solid rgba(255,150,0,.30); border-radius:9px; padding:9px 11px; line-height:1.45}
.aviso[hidden]{display:none}
.aviso button{appearance:none; background:none; border:0; padding:0; color:var(--ciano); cursor:pointer;
  font:inherit; text-decoration:underline; text-underline-offset:2px}
.dica{font-size:12px; color:var(--txt2); line-height:1.5}
.dica code{font-family:var(--mono); color:var(--txt); background:rgba(255,255,255,.06); padding:1px 5px; border-radius:4px}

/* ---------- abertura ---------- */
.abertura{
  position:fixed; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding:28px 20px 92px; text-align:center;
  background-image: var(--grade),
    radial-gradient(760px 520px at 50% 34%, rgba(12,192,223,.16) 0%, transparent 65%),
    radial-gradient(620px 420px at 82% 88%, rgba(255,150,0,.10) 0%, transparent 60%);
  background-size: var(--grade-tam), auto, auto;
  background-color:var(--navy);
}
.abertura[hidden]{display:none}
.ab-selo{width:min(240px,52vw)}
.ab-selo .malha{cursor:default}
.ab-pct{margin-top:12px; font-family:var(--mono); font-weight:700; font-size:19px; color:var(--laranja)}
.ab-eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt2); margin:0}
.ab-titulo{font-family:var(--disp); font-weight:800; font-size:clamp(42px,9vw,76px); line-height:.92;
  letter-spacing:-.045em; margin:8px 0 0; color:#fff}
.ab-titulo span{color:inherit}
.ab-sub{margin:12px 0 0; color:var(--txt2); font-size:15px; max-width:44ch}
.ab-iniciar{font-size:15px; padding:13px 34px; border-radius:11px}
.ab-tecla{margin:0; font-size:12px; color:var(--txt2)}

/* ---------- rodapé ---------- */
.rodape{flex:0 0 auto; background:#050d18; border-top:4px solid var(--laranja); position:relative; z-index:20; margin-top:auto}
.rodape::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--ciano)}
.rodape p{margin:0; padding:14px 20px; text-align:center; font-size:12px; color:#8397ad}

@media (max-width:900px){
  .painel{display:flex; flex-direction:column; gap:14px}
  .col-esq, .col-dir, .duo{display:contents}
  .malhas{order:1}
  .c-leitura{order:2}
  .c-pecas{order:3}
  .c-conta{order:4}
  .c-acoes{order:5}
  .c-montar{order:6}
  .abas{width:100%}
  .aba{flex:1}
  .bloco{width:auto; flex:1 1 auto; max-width:min(420px,92vw); min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}