:root{
  --bg:#070a10;
  --card:430px;
  --blob:#f6f6f6;
  --stroke:#ffffff;
  --hint:rgba(255,255,255,.85);

  --hair-stroke:#000000;}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 650px at 20% 0%, rgba(120,90,255,.18), transparent 55%),
    radial-gradient(900px 650px at 80% 30%, rgba(0,200,255,.14), transparent 55%),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}
.stage{height:100%;display:grid;place-items:center}
.card{
  width:var(--card);
  height:var(--card);
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.55));
  touch-action: manipulation;
  user-select:none;
}
#scene{width:100%;height:100%;display:block}
#blobFill{fill:var(--blob)}
/* face */
#faceA,#faceB{filter: grayscale(100%);}

/* accessories strokes */
#hairSvg *{
  stroke: var(--hair-stroke) !important;
  fill: none !important;
  stroke-width: 4 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* scouter shape strokes (do NOT apply to text) */
#scouterSvg path,
#scouterSvg rect,
#scouterSvg line,
#scouterSvg polyline,
#scouterSvg polygon,
#scouterSvg circle,
#scouterSvg ellipse{
  stroke: var(--stroke) !important;
  fill: none !important;
  stroke-width: 4 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* scouter readout */
#scouterSvg text{
   fill: rgba(255,255,255,0.70);
  stroke: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 700;
  letter-spacing: .5px;
}
#hairGroup{filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));}
#scouterGroup{filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));}

/* scouter power text */
#scouterText{
  fill: var(--scouter-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: 0;
}
.card.vegeta #scouterText{ opacity: 1; }

/* hint */
#hint{
  fill: var(--hint);
  font-size: 22px;
  opacity: 1;                 /* ← visible desde el inicio */
  transition: opacity 140ms ease;
  pointer-events:none;
}

/* opcional: ya no dependemos del hover */
.card.is-hover:not(.vegeta) #hint{opacity:1}

.card.vegeta #hint{opacity:0}

@media (max-width: 920px){
  :root{ --card:380px; }
}




/* V5: no display toggling in SVG (avoids disappearing in some browsers) */
#hairGroup, #scouterGroup{ pointer-events:none; }