/* Cubo da Velha — tema monocromatico: preto, branco e escala de cinza. */

:root{
  color-scheme: dark;
  --void:#050505;
  --void-2:#101010;
  --panel:rgba(12,12,12,.66);
  --edge:rgba(255,255,255,.14);
  --edge-2:rgba(255,255,255,.3);
  --text:#F4F4F4;
  --dim:#8C8C8C;
  --x:#FFFFFF;  --x-soft:#FFFFFF;
  --o:#A6A6A6;  --o-soft:#D4D4D4;
  --draw:#BFBFBF;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:'Syne','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #1C1C1C 0%, rgba(28,28,28,0) 60%),
    radial-gradient(90% 70% at 90% 110%, #141414 0%, rgba(20,20,20,0) 55%),
    var(--void);
  color:var(--text);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
#app{position:relative;height:100%;width:100%;overflow:hidden}
#stage{position:absolute;inset:0}
#c{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#c.grabbing{cursor:grabbing}
#c.pointing{cursor:pointer}

/* scanline + vignette atmosphere */
#veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
  mix-blend-mode:screen;
  opacity:.5;
}
#veil::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.8) 100%);
  mix-blend-mode:multiply;
}

.hud{position:absolute;z-index:3}
.panel{
  background:var(--panel);
  border:1px solid var(--edge);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-radius:3px;
}

/* ---------- top ---------- */
.hud-top{
  top:0;left:0;right:0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 16px;
}
.brand h1{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(20px,3.4vw,30px);
  letter-spacing:-.02em;
  line-height:1;
  background:linear-gradient(100deg,#FFFFFF 0%, #FFFFFF 38%, #8F8F8F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.eyebrow{
  margin:6px 0 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
}

.score{
  display:flex;flex-direction:column;gap:1px;
  padding:8px 10px;min-width:184px;
}
.srow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.09);
}
.srow:last-of-type{border-bottom:0}
.srow .who{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.glyph{
  width:16px;height:16px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:13px;line-height:1;
}
.glyph.x{color:var(--x);text-shadow:0 0 12px rgba(255,255,255,.85)}
.glyph.o{color:var(--o);text-shadow:0 0 12px rgba(190,190,190,.6)}
.srow .alive{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.srow .pts{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.srow.is-turn{background:linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,0))}
.srow.is-turn.p1{box-shadow:inset 2px 0 0 var(--x)}
.srow.is-turn.p2{box-shadow:inset 2px 0 0 var(--o)}
.draws{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.draws b{color:var(--draw);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- status ---------- */
.hud-status{
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--foot,116px) + 14px);
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--x);box-shadow:0 0 12px currentColor}
.dot.p1{background:var(--x);color:var(--x)}
.dot.p2{background:var(--o);color:var(--o)}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse 1.6s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.thinking{color:var(--dim);font-size:11px}

/* ---------- hint ---------- */
#hint{
  position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  bottom:calc(var(--foot,116px) + 54px);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(150,150,150,.72);
  transition:opacity .6s ease;text-align:center;pointer-events:none;padding:0 16px;
}

/* ---------- bottom controls ---------- */
.hud-bottom{
  left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px 16px;
}
.group{display:flex;align-items:center;gap:8px;padding:6px 8px}
.label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-left:2px}
.seg{display:flex;gap:2px}
button{font-family:var(--mono);color:var(--text)}
.seg-btn,.act{
  appearance:none;border:1px solid transparent;background:rgba(255,255,255,.04);
  padding:7px 11px;border-radius:2px;cursor:pointer;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.seg-btn:hover,.act:hover{background:rgba(255,255,255,.1)}
.seg-btn.is-on{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border-color:var(--edge-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(255,255,255,.18);
  color:#fff;
}
.act.primary{
  border-color:rgba(255,255,255,.46);
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  box-shadow:0 0 20px rgba(255,255,255,.16);
  color:#fff;
}
.act.primary:hover{background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12))}
:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:104px;height:20px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--edge-2);border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--edge-2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 12px rgba(255,255,255,.85);
}
input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:50%;background:#FFFFFF;box-shadow:0 0 12px rgba(255,255,255,.85);
}
input[type=range]:disabled{opacity:.3;cursor:not-allowed}
input[type=range]:disabled::-webkit-slider-thumb{background:var(--dim);box-shadow:none}

/* ---------- banner ---------- */
#banner{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:radial-gradient(60% 50% at 50% 50%, rgba(5,5,5,.74), rgba(5,5,5,.36) 70%, rgba(5,5,5,0));
  pointer-events:none;
}
#banner[hidden]{display:none!important}
.banner-in{
  text-align:center;pointer-events:auto;padding:26px 34px;
  animation:rise .5s cubic-bezier(.2,.9,.25,1.15) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.banner-in{animation:none}}
#bannerKicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
#bannerTitle{
  font-family:var(--display);font-weight:800;margin:0;
  font-size:clamp(34px,8vw,64px);line-height:.94;letter-spacing:-.03em;
}
#bannerLine{margin:12px 0 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#fatal{
  position:absolute;inset:0;z-index:9;display:none;place-items:center;text-align:center;padding:24px;
  font-size:13px;color:var(--dim);line-height:1.7;
}

@media (max-width:640px){
  .hud-top{padding:10px 12px;gap:8px}
  .score{min-width:0;padding:6px 8px}
  .srow{gap:7px;padding:4px 2px}
  .srow .alive{display:none}
  .srow .pts{font-size:15px}
  .draws{font-size:9px}
  .hud-bottom{gap:7px;padding:10px 12px 14px}
  .group{padding:5px 6px;gap:6px}
  .seg-btn,.act{padding:6px 9px;font-size:10px}
  .hud-status{font-size:10px;padding:7px 12px}
  #hint{font-size:9px;letter-spacing:.12em}
}