/* ===== Tokens da marca MicroMath — tema ESCURO por padrão; body.light = claro ===== */
:root{
  --laranja:#FF9600; --laranja-2:#ffb347; --laranja-tx:#ffb02e;
  --ciano:#0CC0DF;   --ciano-tx:#36d4ef;
  --amarelo:#ffd500; --vermelho:#e23b3b; --verde:#27b300; --roxo:#9b3bf2;

  --bg:#0b1a2e;
  --painel:#0f1f36;
  --painel-2:#132741;
  --linha:rgba(255,255,255,.10);
  --linha-forte:rgba(255,255,255,.17);
  --tinta:#e8eefb;
  --tinta-suave:#93a4be;
  --campo-bg:#0e1c30;
  --mesa:#10203a;
  --grid-menor:rgba(255,255,255,.05);
  --grid-maior:rgba(255,255,255,.09);
  --rodape-bg:#0b1728;
  --vidro:rgba(12,26,46,.7);
  --sombra:0 1px 2px rgba(0,0,0,.35), 0 16px 40px -18px rgba(0,0,0,.7);

  --ok-bg:#143b22;  --ok-bd:#2f7d49;  --ok-tx:#bdf5cf;
  --erro-bg:#3d1620;--erro-bd:#9c3247;--erro-tx:#ffd0d8;
  --aviso-bg:#3d3112;--aviso-bd:#9c7d2a;--aviso-tx:#ffe9ad;

  --disp:'Bricolage Grotesque', system-ui, sans-serif;
  --ui:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

body.light{
  --laranja-tx:#d97f00;
  --bg:#f5f1ea;
  --painel:#ffffff;
  --painel-2:#f4f1ea;
  --linha:rgba(20,20,20,.10);
  --linha-forte:rgba(20,20,20,.17);
  --tinta:#23262c;
  --tinta-suave:#6b7280;
  --campo-bg:#ffffff;
  --mesa:#ffffff;
  --grid-menor:rgba(0,0,0,.045);
  --grid-maior:rgba(0,0,0,.085);
  --rodape-bg:#eef0f2;
  --vidro:rgba(255,255,255,.72);
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 14px 34px -16px rgba(0,0,0,.2);

  --ok-bg:#dcf7e2;  --ok-bd:#86d79b;  --ok-tx:#14532d;
  --erro-bg:#ffe2e2;--erro-bd:#eaa0a0;--erro-tx:#7f1d1d;
  --aviso-bg:#fff3c9;--aviso-bd:#e6c861;--aviso-tx:#714e00;
}

*{ -webkit-tap-highlight-color:transparent; }
html, body{
  margin:0; width:100%; height:100%; overflow:hidden;
  background:var(--bg); color:var(--tinta);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
}

.reveal, .reveal .slides, .reveal .slides section{
  width:100% !important; height:100% !important; inset:0 !important;
  transform:none !important; background:var(--bg);
}
.reveal .slides{ text-align:center; }

.parzero-app{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 345px;
  grid-template-rows:minmax(0, 1fr) 70px;
  color:var(--tinta); overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(12,192,223,.10), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(255,150,0,.10), transparent 55%),
    var(--bg);
}

.workspace{
  grid-column:1; grid-row:1; position:relative;
  padding:22px 24px 18px; box-sizing:border-box;
}

.stage-frame{
  position:absolute; inset:20px 18px 18px 22px;
  border:1.5px solid var(--linha-forte);
  border-radius:22px;
  box-shadow:var(--sombra), inset 0 0 0 1px rgba(255,255,255,.03);
  background-color:var(--painel);
  background-image:
    linear-gradient(var(--grid-menor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-menor) 1px, transparent 1px),
    linear-gradient(var(--grid-maior) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-maior) 1px, transparent 1px);
  background-size:16px 16px, 16px 16px, 80px 80px, 80px 80px;
  pointer-events:none;
}

/* botão redondo de tema (candy roxo) com sol/lua animados — igual ao app das pirâmides */
.theme-toggle{
  position:absolute; right:30px; top:18px; z-index:5;
  width:46px; height:46px; border:none; border-radius:50%; cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  line-height:1; color:#fff; isolation:isolate;
  background:linear-gradient(180deg, #c483ff, #9b3bf2 52%, #7d18d6);
  box-shadow:0 4px 0 #5c0fa6, 0 8px 14px -5px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.theme-toggle::after{
  content:""; position:absolute; inset:2px 2px auto 2px; height:48%;
  border-radius:50%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.04));
}
.theme-toggle svg{ position:absolute; width:21px; height:21px; z-index:1; color:#fff;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
  transition:transform .42s cubic-bezier(.6,.1,.2,1.4), opacity .3s ease; }
/* padrão = tema ESCURO → mostra a lua; body.light → mostra o sol */
.ico-sol{ transform:translateY(-150%); opacity:0; }
.ico-lua{ transform:translateY(0); opacity:1; }
body.light .ico-sol{ transform:translateY(0); opacity:1; }
body.light .ico-lua{ transform:translateY(150%); opacity:0; }
/* rotação no hover só no ícone visível de cada tema */
body:not(.light) .theme-toggle:hover .ico-lua{ transform:rotate(-18deg); }
body.light .theme-toggle:hover .ico-sol{ transform:rotate(35deg); }
.theme-toggle:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.theme-toggle:active{ transform:translateY(3px);
  box-shadow:0 1px 0 #5c0fa6, 0 3px 7px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); }

.content{
  position:relative; z-index:2; width:100%; height:100%;
  display:grid; grid-template-rows:88px minmax(0, 1fr);
  align-items:center; justify-items:center; box-sizing:border-box;
}

.expressao{
  grid-row:1; display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--tinta); font-family:var(--mono); font-size:42px; font-weight:800;
  line-height:1; white-space:nowrap; padding-top:4px; margin-left:40px;
  max-width:calc(100vw - 440px); letter-spacing:-.01em;
}

.answer-input{
  width:132px; height:52px; box-sizing:border-box;
  border:2.5px solid var(--linha-forte); border-radius:13px;
  background:var(--campo-bg); color:var(--tinta);
  font-family:var(--mono); font-size:32px; font-weight:800; text-align:center; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.answer-input:focus{ border-color:var(--ciano); box-shadow:0 0 0 4px rgba(12,192,223,.22); }
.answer-input::-webkit-outer-spin-button, .answer-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* tabuleiro: moldura de madeira marrom + tampo claro de madeira (igual nos dois temas) */
.board{
  grid-row:2; width:calc(100% - 250px); height:calc(100% - 118px);
  max-width:1280px; min-height:300px; box-sizing:border-box; position:relative; overflow:hidden;
  border:16px solid #9b551f;
  border-radius:30px;
  background:
    linear-gradient(90deg, rgba(226,59,59,.10) 0 50%, rgba(255,200,0,.13) 50% 100%),
    radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(180deg, #f4e7d1, #e6d1ad);   /* tampo claro de madeira */
  box-shadow:
    inset 0 0 0 3px rgba(70,40,12,.55),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 0 30px rgba(120,75,30,.18),
    0 12px 26px -8px rgba(0,0,0,.5);
}

.divider{
  position:absolute; top:14px; bottom:14px; left:50%;
  border-left:3px dashed rgba(90,55,20,.55); transform:translateX(-50%); z-index:1;
}

.signal{
  position:absolute; z-index:2; font-family:var(--disp); font-size:80px; font-weight:800;
  line-height:1; user-select:none; pointer-events:none; opacity:.5;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
}
.signal.minus{ color:#d83a3a; left:25%; top:12%; transform:translateX(-50%); }
.signal.plus{ color:#e0a200; left:75%; top:10%; transform:translateX(-50%); }

/* fichas QUADRADAS — tamanho 58 preservado para a lógica de posicionamento */
.ficha{
  position:absolute; z-index:4; width:58px; height:58px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:26px; font-weight:800; color:#3a2c00;
  cursor:pointer; user-select:none; border:2px solid #1b1b1b; box-sizing:border-box;
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.4), inset -4px -4px 0 rgba(0,0,0,.22), 0 4px 9px -3px rgba(0,0,0,.55);
  transition:transform .15s ease, opacity .25s ease, box-shadow .15s ease;
}
.ficha::after{ content:""; position:absolute; inset:4px 5px auto 5px; height:34%; border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none; }
.ficha:hover{ transform:scale(1.07); }
.ficha.pos{ background:linear-gradient(150deg, #fff07a, var(--amarelo) 55%, #e9bd00); }
.ficha.neg{ background:linear-gradient(150deg, #ff6f66, var(--vermelho) 55%, #bf2222); color:#fff; }
.ficha.selecionada{ outline:4px solid var(--ciano); outline-offset:1px; transform:scale(1.08); z-index:6; }
.ficha.sumindo{ opacity:0; transform:scale(.2) rotate(20deg); }

/* painel lateral */
.sidebar{
  grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:12px;
  padding:22px 22px 16px; box-sizing:border-box; z-index:3;
  background:var(--painel); border-left:1px solid var(--linha); color:var(--tinta);
  box-shadow:var(--sombra);
}
body.light .sidebar{ background:var(--painel); border-left:1px solid var(--linha); color:var(--tinta); }

.sidebar h1{
  margin:2px 0 8px; font-family:var(--disp); font-size:30px; font-weight:800;
  letter-spacing:.01em; text-transform:uppercase; text-align:center;
  color:var(--laranja-tx);
}

.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.info-card{
  border:1px solid var(--linha); border-radius:14px;
  background:var(--painel-2); color:var(--tinta);
  padding:11px 12px; font-family:var(--ui); font-size:12px; line-height:1.2; font-weight:700;
  text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.info-card.wide{ grid-column:1 / -1; }
body.light .info-card{ background:var(--painel-2); border-color:var(--linha); color:var(--tinta); }
.info-card .value{
  display:block; font-family:var(--mono); font-size:30px; font-weight:800;
  color:var(--ciano-tx); margin-top:4px;
}
body.light .info-card .value{ color:#0a93ab; }

/* botões candy 3D */
.btn{
  --c-top:#7d8794; --c-mid:#5b6470; --c-bot:#454d57; --c-edge:#2c333b;
  position:relative; isolation:isolate; min-height:50px; border:none; border-radius:14px; cursor:pointer;
  font-family:var(--ui); font-weight:800; font-size:15.5px; color:#fff; letter-spacing:.005em;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; gap:11px; padding:9px 14px;
  background:linear-gradient(180deg, var(--c-top), var(--c-mid) 52%, var(--c-bot));
  box-shadow:0 4px 0 var(--c-edge), 0 8px 14px -5px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn::after{ content:""; position:absolute; inset:1px 1px auto 1px; height:46%; z-index:-1; pointer-events:none;
  border-radius:13px 13px 40% 40%/13px 13px 24px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.04)); }
.btn::before{ content:""; position:relative; z-index:1; width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background-color:rgba(0,0,0,.24); background-repeat:no-repeat; background-position:center; background-size:17px 17px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(255,255,255,.28); }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 5px 0 var(--c-edge), 0 11px 18px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.btn:active{ transform:translateY(3px);
  box-shadow:0 1px 0 var(--c-edge), 0 3px 7px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); }

.btn-yellow{ --c-top:#ffe585; --c-mid:#ffcf33; --c-bot:#f4b000; --c-edge:#c08700; color:#3a2c00; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.btn-yellow::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='M12 6.4V17.6'/><path d='M6.4 12H17.6'/></svg>"); }
.btn-red{ --c-top:#ff6a5e; --c-mid:#ee3b34; --c-bot:#cf1f1f; --c-edge:#991414; }
.btn-red::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='M6.4 12H17.6'/></svg>"); }
.btn-green{ --c-top:#5fe06f; --c-mid:#35bf4b; --c-bot:#1f9a36; --c-edge:#137a29; }
.btn-green::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18.4 9A7 7 0 1 0 19 12.6'/><path d='M18.4 5V9H14.4'/></svg>"); }
.btn-orange{ --c-top:#ffc15e; --c-mid:#ff9f1a; --c-bot:#f07f00; --c-edge:#bd5e00; }
.btn-orange::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='M6.4 12H17.6'/></svg>"); }
.btn-purple{ --c-top:#c483ff; --c-mid:#9b3bf2; --c-bot:#7d18d6; --c-edge:#5c0fa6; }
.btn-purple::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='M12 6.4V17.6'/><path d='M6.4 12H17.6'/></svg>"); }
.btn-cyan{ --c-top:#56d8ef; --c-mid:#0CC0DF; --c-bot:#0a93ab; --c-edge:#07707f; }
.btn-cyan::before{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 12.5 10 17 18.5 7.5'/></svg>"); }
.btn-white{ --c-top:#ffffff; --c-mid:#eef0f2; --c-bot:#dde1e6; --c-edge:#b6bcc4; color:#2a2f37; text-shadow:0 1px 0 rgba(255,255,255,.6); }
.btn-white::before{ background-color:#eef1f5; background-size:16px 16px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a3f47' stroke-width='3' stroke-linecap='round'><path d='M7.5 7.5 16.5 16.5'/><path d='M16.5 7.5 7.5 16.5'/></svg>");
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14), inset 0 -1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(255,255,255,.7); }

.term-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.term-buttons .btn{ min-height:50px; font-size:14px; padding:0 8px; gap:8px; }
.term-buttons .btn::before{ width:26px; height:26px; background-size:15px 15px; }

.rule{ height:1px; background:var(--linha); margin:7px 0 5px; }
body.light .rule{ background:var(--linha); }

.status{
  margin-top:auto; min-height:66px; border:1px solid var(--linha); border-radius:14px;
  background:var(--painel-2); color:var(--tinta);
  padding:12px 14px; font-family:var(--ui); font-size:13px; line-height:1.3; font-weight:600;
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.light .status{ background:var(--painel-2); border-color:var(--linha); color:var(--tinta); }
.status.ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
.status.erro{ background:var(--erro-bg); border-color:var(--erro-bd); color:var(--erro-tx); }
.status.aviso{ background:var(--aviso-bg); border-color:var(--aviso-bd); color:var(--aviso-tx); }

/* rodapé igual à foto: barra escura fixa + faixa no topo (ciano/laranja) */
.footer{
  grid-column:1 / 3; grid-row:2; position:relative;
  display:grid; grid-template-rows:7px 1fr;
  background:#15181e; border-top:none;
  box-shadow:0 -10px 26px rgba(0,0,0,.22); z-index:4;
}
.stripes{ background:linear-gradient(to bottom, var(--ciano) 0 4px, var(--laranja) 4px 7px); }
.stripes span{ display:none; }
.credit{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 16px;
  font-family:var(--ui); font-size:13.5px; font-weight:700; color:#eef1f5; letter-spacing:.005em;
}
.credit b{ font-weight:800; }
body.light .credit{ color:#eef1f5; }

@media (max-width:1050px){
  .parzero-app{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto 70px; }
  .workspace{ grid-row:1; padding:14px; }
  .stage-frame{ inset:12px; }
  .sidebar{
    grid-column:1; grid-row:2; border-left:none; border-top:1px solid var(--linha);
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:12px 14px; box-shadow:none;
  }
  .sidebar h1, .stats-grid, .rule{ display:none; }
  .term-buttons{ grid-column:span 3; }
  .status{ margin-top:0; grid-column:span 3; min-height:44px; }
  .footer{ grid-row:3; }
  .expressao{ font-size:32px; }
  .answer-input{ width:104px; height:44px; font-size:26px; }
  .board{ width:92%; height:calc(100% - 42px); }
}

/* ===== tela inicial (capa) ===== */
#capa{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:28px 20px 40px; text-align:center;
  background:
    radial-gradient(900px 600px at 50% 18%, #14294a 0%, transparent 62%),
    #07111F;
  transition:opacity .5s ease, visibility .5s ease;
}
#capa.saindo{ opacity:0; visibility:hidden; pointer-events:none; }
#capa::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%);
          mask-image:radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%);
}
.capa-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:640px; }
.capa-hero{ width:min(330px,68vw); margin-bottom:4px; filter:drop-shadow(0 16px 30px rgba(0,0,0,.45)); }
.capa-hero svg{ display:block; width:100%; height:auto; }
.capa-kicker{ font-family:var(--mono); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:#0CC0DF; margin:0 0 2px; }
.capa-title{ font-family:var(--disp); font-weight:800; color:#fff; font-size:clamp(40px,7.4vw,74px); line-height:1.02; letter-spacing:-.02em; margin:0; }
.capa-sub{ font-family:var(--ui); font-weight:500; color:#93a4be; font-size:clamp(15px,2.5vw,20px); margin:12px 0 26px; max-width:38ch; line-height:1.5; }
.capa-start{
  font-family:var(--disp); font-weight:700; font-size:1.15rem;
  background:#FF9600; color:#1a1005; border:0; border-radius:999px;
  padding:14px 44px; cursor:pointer; box-shadow:0 10px 28px rgba(255,150,0,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.capa-start:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,150,0,.36); }
.capa-enter{ position:relative; z-index:1; margin-top:14px; color:#67788f; font-size:.82rem; font-family:var(--mono); }
.capa-enter kbd{ background:#16283f; border:1px solid rgba(255,255,255,.10); border-radius:6px; padding:1px 7px; }
@media (prefers-reduced-motion:reduce){ #capa{ transition:none; } }