/* ===================================================================
   TI SAFE — Design System compartilhado (Mind the Sec 2026)
   Branding: preto industrial + laranja · tema OT / infraestrutura crítica
   =================================================================== */
:root{
  --bg:#0A0B0D;--bg2:#0E0F12;--panel:#15161A;--panel2:#1C1E23;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --ink:#F4F5F7;--mute:#9A9DA6;--dim:#6A6D76;
  --orange:#F26100;--orange-hi:#FF8A3D;
  --red:#E23A2E;--red-hi:#ff7a6f;--green:#33C481;--amber:#F2B33D;--blue:#3DA5F2;
  --head:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

.ts-app{position:relative;width:100%;height:100dvh;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(242,97,0,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(242,97,0,.05), transparent 55%),
    var(--bg);}
.ts-app::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(255,255,255,.045) 1.1px, transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));}
.ts-bracket{position:absolute;pointer-events:none;z-index:0;opacity:.9}

/* logo */
.logo{font-family:var(--head);font-weight:900;letter-spacing:-.01em;font-size:clamp(22px,2.4vw,30px);
  display:inline-flex;align-items:baseline;gap:.14em;line-height:1;user-select:none}
.logo .ti{position:relative}
.logo .ti::after{content:"";position:absolute;top:-.06em;right:-.16em;width:.16em;height:.16em;border-radius:50%;background:var(--orange)}
.logo .safe{font-weight:400}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:12px;color:var(--mute);background:rgba(255,255,255,.02)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(51,196,129,.18)}

/* buttons */
.btn{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:15px;
  border:0;border-radius:12px;padding:16px 26px;cursor:pointer;color:#120a03;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange));
  box-shadow:0 10px 30px rgba(242,97,0,.35),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,box-shadow .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(242,97,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--orange-hi);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange-hi)}

/* robot mascot */
.ts-robot{display:block;object-fit:contain}
.ts-robot-fallback{display:none}

/* screens */
.screen{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;
  padding:clamp(18px,3.4vw,48px);animation:tsfade .5s ease both}
.screen.on{display:flex}
@keyframes tsfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* attract */
.attract-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:860px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:13px;font-family:var(--mono);letter-spacing:.02em}
.eyebrow .bar{width:34px;height:2px;background:var(--orange)}
h1.title{font-family:var(--head);font-weight:900;line-height:.94;letter-spacing:-.02em;
  font-size:clamp(38px,6.6vw,92px);margin:0;text-wrap:balance}
h1.title em{color:var(--orange);font-style:normal}
.sub{font-size:clamp(15px,1.5vw,19px);color:var(--mute);max-width:60ch;line-height:1.55}
.sub b{color:var(--ink)}
.cta-row{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:6px}
.stats{display:flex;gap:26px;flex-wrap:wrap}
.stat b{font-family:var(--head);font-size:26px;display:block;line-height:1}
.stat span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.attract-robot{position:absolute;right:clamp(-30px,-1vw,10px);top:50%;transform:translateY(-50%);
  width:min(40vw,480px);z-index:1;pointer-events:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
@media (max-width:920px){.attract-robot{opacity:.12;right:-12vw}}

/* cadastro */
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px)}
.center{flex:1;display:flex;align-items:center;justify-content:center}
#ts-cadastro .card{width:min(560px,100%)}
.form-head h2{font-family:var(--head);font-weight:900;font-size:clamp(24px,3vw,32px);margin:0 0 6px;letter-spacing:-.01em}
.form-head p{margin:0 0 20px;color:var(--mute);font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:700}
.field input,.field select{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;color:var(--ink);font-size:15px;font-family:var(--body);transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#565962}
.field input:focus,.field select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,97,0,.18)}
.field.err input{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,58,46,.16)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--mute);line-height:1.5;
  padding:12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.015);cursor:pointer}
.consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--orange);flex:none}
.consent a{color:var(--orange-hi);text-decoration:none}
.form-actions{display:flex;gap:12px;margin-top:18px;align-items:center;flex-wrap:wrap}
.rd{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);margin-left:auto}
.rd b{color:var(--mute);font-weight:600}

/* countdown */
#ts-countdown{align-items:center;justify-content:center}
.count-num{font-family:var(--head);font-weight:900;font-size:clamp(120px,26vw,300px);color:var(--orange);
  line-height:1;text-shadow:0 0 80px rgba(242,97,0,.5);animation:tspop .9s ease;text-align:center}
@keyframes tspop{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
.count-lbl{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;color:var(--mute);font-size:13px;margin-top:14px;text-align:center}

/* HUD primitives (games reuse) */
.hbox{background:rgba(20,21,26,.72);border:1px solid var(--line);border-radius:12px;padding:8px 14px;backdrop-filter:blur(8px)}
.hbox .lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.hbox .val{font-family:var(--head);font-size:22px;font-variant-numeric:tabular-nums;line-height:1.05}
.hbox .val.time{color:var(--orange)}
.hbox.integ{min-width:170px}
.bar{height:11px;border-radius:7px;background:#26130a;overflow:hidden;margin-top:6px;border:1px solid rgba(255,255,255,.06)}
.bar>i{display:block;height:100%;width:100%;border-radius:7px;background:linear-gradient(90deg,var(--green),#8fe0b3);transition:width .25s,background .3s}
.arena{position:relative;flex:1;margin-top:12px;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(700px 420px at 50% -10%, rgba(242,97,0,.06), transparent 60%),linear-gradient(180deg,#0C0D10,#0A0B0D)}
.arena .gridlines{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px}
.flash{position:absolute;inset:0;background:radial-gradient(circle,transparent 55%,rgba(226,58,46,.32));opacity:0;pointer-events:none;z-index:6}
.flash.on{animation:tsflash .4s ease}
@keyframes tsflash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.float{position:absolute;transform:translate(-50%,-50%);z-index:8;pointer-events:none;font-family:var(--head);font-weight:900;font-size:22px;animation:tsfloat .8s ease forwards}
.float.good{color:var(--green)}.float.bad{color:var(--red)}
@keyframes tsfloat{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}

/* result + ranking */
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:min(920px,100%)}
@media (max-width:760px){.result-grid{grid-template-columns:1fr}}
.score-card{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px}
.score-card .rank{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--orange-hi);font-size:12px}
.score-card .big{font-family:var(--head);font-weight:900;font-size:clamp(58px,12vw,104px);line-height:1;font-variant-numeric:tabular-nums}
.score-card .big small{color:var(--dim);font-size:.28em;font-weight:700;letter-spacing:.1em}
.score-card .msg{color:var(--mute);font-size:14px;max-width:36ch;margin:8px auto 0;line-height:1.5}
.mini-stats{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.mini{border:1px solid var(--line);border-radius:11px;padding:9px 14px;text-align:center}
.mini b{font-family:var(--head);font-size:19px;display:block;font-variant-numeric:tabular-nums}
.mini span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lb h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.lb h3 .bar{width:22px;height:2px;background:var(--orange)}
.row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;border:1px solid transparent}
.row+.row{margin-top:4px}
.row .pos{font-family:var(--head);color:var(--dim);font-size:15px;text-align:center;font-variant-numeric:tabular-nums}
.row .who{min-width:0}
.row .who b{font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .who span{font-size:11.5px;color:var(--dim)}
.row .pts{font-family:var(--head);font-variant-numeric:tabular-nums;font-size:16px}
.row.top1 .pos{color:var(--orange)}
.row.me{background:linear-gradient(90deg,rgba(242,97,0,.14),rgba(242,97,0,.03));border-color:rgba(242,97,0,.4)}
.row.me .pts{color:var(--orange-hi)}

/* roleta */
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.wheel-head{text-align:center}
.wheel-head h2{font-family:var(--head);font-weight:900;font-size:clamp(26px,3.4vw,38px);margin:0 0 6px;letter-spacing:-.01em}
.wheel-head p{margin:0;color:var(--mute);font-size:14px}
.wheel-stage{position:relative;width:min(76vw,360px);aspect-ratio:1}
.wheel-stage .pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:5;
  width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid var(--orange);filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#ts-wheel{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 10px #15161A,0 0 0 12px rgba(242,97,0,.5),0 24px 60px rgba(0,0,0,.6);
  transition:transform 5.2s cubic-bezier(.12,.72,.06,1)}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(180deg,#222,#0d0d0f);border:2px solid rgba(242,97,0,.6);display:grid;place-items:center;
  font-family:var(--head);font-size:9px;letter-spacing:.1em;color:var(--orange-hi)}
.prize-reveal{text-align:center;min-height:30px}
.prize-reveal .won{font-family:var(--head);font-weight:900;font-size:clamp(22px,3vw,30px);color:var(--orange-hi)}
.prize-reveal .won small{display:block;font-family:var(--body);font-weight:400;color:var(--mute);font-size:13px;letter-spacing:0;text-transform:none;margin-top:6px}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}

.footer-note{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:11px;color:var(--dim);z-index:3;font-family:var(--mono)}
.footer-note b{color:var(--mute);font-weight:600}
.prototype-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:9;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:rgba(10,11,13,.7)}
.back-home{position:absolute;top:14px;left:16px;z-index:9;font-family:var(--mono);font-size:11px;color:var(--dim);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:rgba(10,11,13,.7)}
.back-home:hover{color:var(--orange-hi);border-color:var(--orange)}