/* wc.css */
:root{
  --groundH: 750px;
  --groundLift: -265px;
  --groundY: calc(var(--groundH) + var(--groundLift));
  --runnerTagOffset: 18px;

  --bg1:#0b0b13;
  --ring:#2b2d3f;
  --glass: rgba(13,13,22,.55);
  --glass-strong: rgba(10,10,18,.75);
  --text:#FFFFFF;
  --muted:#AEB0C3;
  --violet:#7c3aed;
  --shadow:0 14px 30px rgba(0,0,0,.45);

  /* NEW: obstacle visibility tuning */
  --obs-stroke:#22D3EE;                 /* crisp edge outline */
  --obs-glow: rgba(34,211,238,.55);     /* soft outer glow */

  --veil-alpha: .30;           /* GIF collage darkness (0 → 1) */
  --modal-scrim-alpha: .55;    /* question modal darkness */
  --howto-scrim-alpha: .90;    /* how-to overlay darkness */

  --scrim-opacity: .60;
  --modalZ: 2147483647;
}

.hidden{ display:none !important; }

/* Screens */
.screen{ display:none; padding:40px 24px; }
.screen.show{ display:block; }
.screen:not(#screen-game){ min-height:100vh; }
.screen:not(#screen-game).show{ display:flex; align-items:center; justify-content:center; }

/* Base */
*{ box-sizing:border-box }
.wc_app{
  position: relative;
  height: 100%;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text);
  background: var(--bg1);
  isolation: isolate;
}
button{ cursor:pointer }
.app{ position:relative; min-height:100vh; z-index:3 }

/* Cards / buttons */
.card{
  max-width:1100px; margin:0 auto; background:var(--glass); border:1px solid var(--ring);
  backdrop-filter: blur(6px); border-radius:16px; padding:24px; box-shadow: var(--shadow);
}
.card.narrow{ max-width:680px }
.start-card{ text-align:center }
.start-card h1{ font-size:2.6rem; margin:0 0 8px }
.start-card .sub{ opacity:.92; margin:0 0 16px }
.btn{ background:#22223a; border:1px solid var(--ring); color:#fff; padding:10px 16px; border-radius:12px; font-weight:800 }
.btn.primary{ background:linear-gradient(180deg, #6D35FF, #5B2EEB); border-color:#6D35FF }
.btn.lg{ padding:14px 22px; font-size:1.1rem }
.actions{ display:flex; gap:12px; margin-top:18px; }
.actions button{ font-size: 2rem !important; }
.actions.center{ justify-content:center }

/* Skill cards */
.skill-card h1{ margin-top:0; color:#fff; font-size: 2.2rem; }
.skill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px }
.skill{
  display:flex; flex-direction:column; gap:12px; background:#141425; border:1px solid var(--ring); border-radius:14px; padding:16px;
  transition:outline 120ms ease, filter 120ms ease, opacity 120ms ease;
}
.skill.active{ outline:2px solid #a78bfa }
.skill:not(.active){ opacity:.9; }
.skill:not(.active) .grades{ opacity:.45; filter:grayscale(8%); pointer-events:none; }
.skill .title{ font-weight:900; font-size:1.8rem; color:#fff; }
.skill .grades{ display:flex; gap:14px; flex-wrap:wrap; }
.skill .grades label{ background:#1a1a2f; border:1px solid var(--ring); padding:6px 10px; border-radius:12px; color:#fff; }

/* Radios */
.radio-list{ display:flex; flex-direction:column; gap:12px }
.radio-item{ background:#141425; border:1px solid var(--ring); padding:14px; border-radius:12px; font-size: 2rem;}

/* Avatar maker */
.avatar-card{ display:grid; grid-template-columns: 1.2fr 1fr; gap:24px }
.gender-toggle{ display:flex; gap:10px; margin-bottom:10px }
.toggle{ background:transparent; border:1px solid var(--ring); padding:8px 14px; border-radius:22px; color:#fff; font-weight:800 }
.toggle.active{ border-color:#a78bfa; box-shadow:0 0 0 2px rgba(124,58,237,.35) inset }
.avatar-preview{
  height:560px; background: radial-gradient(220px 80px at 50% 75%, rgba(124,58,237,.35), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2));
  border:1px solid var(--ring); border-radius:16px; position:relative; display:grid; place-items:center; overflow:hidden;
}
.avatar-stage svg{ width:360px; height:auto }
.control-row{ display:flex; align-items:center; gap:10px; margin-top:12px }
.control-row input[type="range"]{ width:240px }
.avatar-right h2{ margin:6px 0 10px }
.color-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.color{ display:flex; align-items:center; justify-content:space-between; background:#141425; border:1px solid var(--ring); padding:8px 12px; border-radius:12px }

/* Parallax BG (hidden on menus) */
.bg{ position:absolute; inset:0; z-index:0; overflow:hidden; display:none; }
body.show-bg .bg{ display:block; }
.bg-layer{ position:absolute; inset:0; background-repeat:repeat-x; background-position:0 0; background-size:cover; opacity:.18!important; }
.bg .far{ background-image:url("./imgs/bg.png"); filter:brightness(.9) contrast(1.05); }
.bg .mid{ background-image:url("./imgs/bg.png"); opacity:.55; transform:scale(1.02); filter:blur(1px); }

.cover img{ width: 100px !important; }
.ht-card{ color: white; }

/* GIF collage + veil */
.gif-grid{
  position:absolute; inset:0; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  pointer-events:none;
}
.gif-grid::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.30);
}
.gif-tile{
  background-repeat:no-repeat; background-position:center; background-size:cover;
  filter:grayscale(10%) contrast(110%) brightness(75%); opacity:.9;
}
.gif-tile.tl{ grid-area:1/1/2/2 }
.gif-tile.tr{ grid-area:1/2/2/3 }
.gif-tile.bl{ grid-area:2/1/3/2 }
.gif-tile.br{ grid-area:2/2/3/3 }
body.hide-gifs .gif-grid{ display:none; }

/* Ground tile */
.ground-strip{
  position:absolute; left:0; right:0;
  bottom:var(--groundLift);
  height:var(--groundH);
  background-image:url("./imgs/ground_tile.png");
  background-repeat:repeat-x; background-size:auto var(--groundH); background-position:0 0;
}

/* HUD */
.hud{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding:0 6px }
.skill-label{ font-weight:900 }
.chip{ background:#141425; border:1px solid var(--ring); padding:6px 10px; border-radius:999px; font-weight:900 }

/* Stage */
.runner-stage{ position:relative; height:72vh; min-height:520px; border-radius:14px; border:1px solid var(--ring);
  background: transparent; overflow:hidden; z-index:5;
}

/* Track */
.track{ position:absolute; inset:0; z-index:6; }

/* Runners */
.runner{
  position:absolute;
  bottom:-60px;
  width:120px;
  transform:translate(-50%, 0);
  z-index:7;
}
.runner.you svg{ width:300px !important; }
.runner svg{ width:280px; height:auto; }
.runner.dead{ opacity:.25; filter:grayscale(80%); }
.name-tag{
  position:absolute; bottom:calc(var(--groundY) + var(--runnerTagOffset)); left:50%; transform:translateX(-50%);
  font-size:.9rem; font-weight:900; opacity:.9; pointer-events:none;
}
#gameoverTitle{ font-size: 4rem; }

/* Aura */
.runner .aura{
  --scale:0;
  --auraSize: 320px;
  --auraColor: rgba(124,58,237,.35);
  position:absolute; left:110%; bottom:-18px;
  width:var(--auraSize); height:var(--auraSize); border-radius:50%;
  transform:translate(-50%, 0) scale(var(--scale));
  pointer-events:none;
  background: radial-gradient(closest-side, var(--auraColor), rgba(124,58,237,0) 70%);
  filter:blur(10px);
  transition:transform .08s linear, filter .2s ease;
}

/* Death */
@keyframes deathFade {
  0%   { filter: sepia(1) hue-rotate(-45deg) saturate(6) brightness(.95); opacity:1; transform:translate(-50%,0) scale(1); }
  60%  { opacity:.6; transform:translate(-50%,8px) scale(.98); }
  100% { opacity:0;  transform:translate(-50%,16px) scale(.96); }
}
.runner.death{ animation:deathFade .8s ease forwards; }

/* Obstacles */
.obstacles{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.obstacle{ position:absolute; bottom:-3px; will-change:transform; z-index:7; }
.obstacle img{ display:block; height:182px !important; width:auto; }
.obstacle.hand img{ height:130px !important; }

/* NEW: make non-hand obstacles pop on dark BG */
.obstacle.block::before{
  content:"";
  position:absolute;
  inset:-8px -10px -2px -10px;
  border-radius:14px;
  background: radial-gradient(120px 80px at 50% 70%, var(--obs-glow), transparent 70%);
  filter: blur(8px);
  z-index:-1;
}
.obstacle.block img{
  filter:
    drop-shadow(2px 0 0 var(--obs-stroke))
    drop-shadow(-2px 0 0 var(--obs-stroke))
    drop-shadow(0 2px 0 var(--obs-stroke))
    drop-shadow(0 -2px 0 var(--obs-stroke))
    drop-shadow(0 0 12px var(--obs-glow))
    brightness(1.15) contrast(1.15) saturate(1.1);
}

/* ===== Question screen card (replaces modal) ===== */
.q-card{
  width:min(900px, 92vw);
  max-height:min(78vh, 800px);
  overflow:auto;
  background:linear-gradient(180deg, rgba(20,18,40,.95), rgba(12,10,22,.96));
  border:1px solid var(--ring);
  border-radius:16px;
  padding:20px 22px;
  box-shadow: var(--shadow);
}
.q-banner{ margin:0 0 10px; font-size:1.6rem; font-weight:900; }
.q-head{ display:flex; gap:8px; margin-bottom:12px; }
.pill{ background:#141425; border:1px solid var(--ring); padding:6px 10px; border-radius:999px; font-weight:800 }
.passage{
  background:rgba(255,255,255,.03);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:12px;
  line-height:1.35;
  margin-bottom:12px;
  font-size: 2rem;
}
.prompt{ font-weight:900; margin:15px 0 10px; font-size: 1.5rem; }
.options{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:10px;
}
.options .btn{ width:100%; font-size: 1.5rem ; }

/* Countdown / banners / hint */
.countdown{ position:absolute; inset:0; display:grid; place-items:center; font-size:120px; font-weight:1000; color:#fff; text-shadow:0 12px 40px rgba(0,0,0,.6); pointer-events:none }
.countdown.hidden{ display:none }
.round-banner{ position:absolute; top:12px; left:50%; transform:translateX(-50%); background:#1a142b; border:1px solid var(--ring); padding:8px 12px; border-radius:10px; font-weight:900; z-index:8; }
.round-banner.hidden{ display:none !important; }

/* Top-center pulsing tip */
.tap-hint{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  opacity:.9; font-weight:900; font-size:1.05rem; z-index:8;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:translateX(-50%) scale(1) } 50%{ transform:translateX(-50%) scale(1.06) } }

/* Start card above collage */
#screen-start .card { position:relative; z-index:5; }

/* Stacking */
.bg { z-index:0; }
.bg-layer, .ground-strip { z-index:0; }
.runner-stage { z-index:5; }
.track, .obstacles { z-index:6; }
.runner, .obstacle { z-index:7; }

/* Force ALL text on the Choose Skill screen to white */
#screen-skill, #screen-skill * { color:#fff !important; }

/* ===== PARTY DANCES (no flips) ===== */
.runner .anim-wrap svg #head,
.runner .anim-wrap svg #torso,
.runner .anim-wrap svg #leftArm,
.runner .anim-wrap svg #rightArm{
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

/* 1) HANDS WAVE */
@keyframes kfHandsWaveL { 0%,100%{ transform:rotate(-6deg) translateY(-6px) } 50%{ transform:rotate(14deg) translateY(-12px) } }
@keyframes kfHandsWaveR { 0%,100%{ transform:rotate(6deg) translateY(-6px) } 50%{ transform:rotate(-14deg) translateY(-12px) } }
@keyframes kfPartyBounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.dance-hands .anim-wrap{ animation:kfPartyBounce 1.15s ease-in-out infinite; }
.dance-hands .anim-wrap svg #leftArm { animation:kfHandsWaveL 0.9s ease-in-out infinite; }
.dance-hands .anim-wrap svg #rightArm{ animation:kfHandsWaveR 0.9s ease-in-out infinite; animation-delay:.45s; }

/* 2) SHOULDER SHIMMY */
@keyframes kfShoulderTorso { 0%,100%{ transform:rotate(0deg) } 25%{ transform:rotate(4deg) } 75%{ transform:rotate(-4deg) } }
@keyframes kfShoulderHead  { 0%,100%{ transform:rotate(0deg) } 25%{ transform:rotate(-6deg) } 75%{ transform:rotate(6deg) } }
.dance-shoulder .anim-wrap svg #torso{ animation:kfShoulderTorso 1.2s ease-in-out infinite; }
.dance-shoulder .anim-wrap svg #head { animation:kfShoulderHead  1.2s ease-in-out infinite; }
.dance-shoulder .anim-wrap{ animation:kfPartyBounce 1.4s ease-in-out infinite; }

/* 3) SLIDE */
@keyframes kfSlide { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(12px) } 75%{ transform:translateX(-12px) } }
.dance-slide .anim-wrap{ animation:kfSlide 1.6s ease-in-out infinite, kfPartyBounce 1.6s ease-in-out infinite; }

/* 4) BODY ROLL */
@keyframes kfRoll { 0%{ transform:scale(1) translateY(0) } 33%{ transform:scale(1.04,.96) translateY(-6px) } 66%{ transform:scale(.98,1.02) translateY(0) } 100%{ transform:scale(1) translateY(0) } }
@keyframes kfGrooveL { 0%,100%{ transform:rotate(4deg) } 50%{ transform:rotate(-8deg) } }
@keyframes kfGrooveR { 0%,100%{ transform:rotate(-4deg) } 50%{ transform:rotate(8deg) } }
.dance-roll .anim-wrap{ animation:kfRoll 1.4s ease-in-out infinite; }
.dance-roll .anim-wrap svg #leftArm { animation:kfGrooveL 1.1s ease-in-out infinite; }
.dance-roll .anim-wrap svg #rightArm{ animation:kfGrooveR 1.1s ease-in-out infinite; }

/* ===== Overlay Toggles ===== */
body.no-overlay .gif-grid{ display:none !important; }
body.no-veil .gif-grid::after{ background: transparent !important; }
body.obs-contrast .obstacle.block::before{
  content:"";
  position:absolute; inset:-8px -10px -2px -10px; border-radius:14px;
  background: radial-gradient(120px 80px at 50% 70%, var(--obs-glow), transparent 70%);
  filter: blur(8px); z-index:-1;
}
body.obs-contrast .obstacle.block img{
  filter:
    drop-shadow(2px 0 0 var(--obs-stroke))
    drop-shadow(-2px 0 0 var(--obs-stroke))
    drop-shadow(0 2px 0 var(--obs-stroke))
    drop-shadow(0 -2px 0 var(--obs-stroke))
    drop-shadow(0 0 12px var(--obs-glow))
    brightness(1.15) contrast(1.15) saturate(1.1);
}

/* ===== Victory screen garnish ===== */
.gameover{
  position:relative;
  text-align:center;
  background: var(--glass);
  border: 1px solid var(--ring);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
}
.gameover.victory::before{
  content:"";
  position:absolute; inset:-12px;
  background:
    radial-gradient(60rem 30rem at 50% 0%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(40rem 24rem at 10% 90%, rgba(255,215,0,.08), transparent 60%),
    radial-gradient(40rem 24rem at 90% 90%, rgba(124,58,237,.10), transparent 60%);
  pointer-events:none;
  z-index:-1;
  filter: blur(2px);
}

/* rainbow/pulse title */
.rainbow-pulse{
  background: linear-gradient(90deg,#ff006e,#ffbe0b,#3a86ff,#8338ec,#ff006e);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255,255,255,.18);
  animation: hueShift 7s linear infinite, pop 1.6s ease-in-out infinite;
}
@keyframes hueShift{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
@keyframes pop{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.04) } }

/* centered golden stars */
.stars{
  display:flex;
  justify-content:center;
  gap:10px;
  margin: 10px auto 22px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
}
.stars .filled{
  font-size: 64px;
  line-height: 1;
  color:#FFD54F;
  text-shadow:
    0 0 10px rgba(255,213,79,.75),
    0 0 24px rgba(255,213,79,.5);
  animation: starTwinkle 1.8s ease-in-out infinite;
}
@keyframes starTwinkle{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.06); opacity:.95 }
}

/* ===== Responsive (unchanged below) ===== */
@media (max-width: 1440px){
  :root{ --groundH: 680px; --groundLift: -240px; }
  .runner-stage{ height: 70vh; }
  .card{ max-width: 1000px; }
  .runner svg{ width: 270px; }
  .runner.you svg{ width: 290px !important; }
  .obstacle img{ height: 172px !important; }
  .obstacle.hand img{ height: 125px !important; }
  .countdown{ font-size: 110px; }
}
@media (max-width: 1280px){
  :root{ --groundH: 640px; --groundLift: -230px; }
  .runner-stage{ height: 70vh; }
  .card{ max-width: 940px; }
  .avatar-preview{ height: 520px; }
  .avatar-stage svg{ width: 320px; }
  .runner svg{ width: 260px; }
  .runner.you svg{ width: 280px !important; }
  .obstacle img{ height: 164px !important; }
  .obstacle.hand img{ height: 120px !important; }
  .countdown{ font-size: 100px; }
  .passage{ font-size: 1.8rem; }
  .prompt { font-size: 1.4rem; }
  .options .btn{ font-size: 1.3rem; }
}
@media (max-width: 1120px){
  :root{ --groundH: 600px; --groundLift: -220px; }
  .runner-stage{ height: 69vh; }
  .card{ max-width: 880px; }
  .avatar-preview{ height: 500px; }
  .avatar-stage svg{ width: 300px; }
  .runner svg{ width: 250px; }
  .runner.you svg{ width: 270px !important; }
  .obstacle img{ height: 156px !important; }
  .obstacle.hand img{ height: 116px !important; }
  .countdown{ font-size: 92px; }
}
@media (max-width: 1024px){
  :root{ --groundH: 560px; --groundLift: -210px; }
  .runner-stage{ height: 68vh; min-height: 500px; }
  .card{ max-width: 840px; padding: 20px; }
  .start-card h1{ font-size: 2.3rem; }
  .runner svg{ width: 240px; }
  .runner.you svg{ width: 260px !important; }
  .obstacle img{ height: 150px !important; }
  .obstacle.hand img{ height: 112px !important; }
  .countdown{ font-size: 86px; }
  .name-tag{ font-size: .85rem; }
  .passage{ font-size: 1.7rem; }
  .prompt { font-size: 1.35rem; }
  .options .btn{ font-size: 1.2rem; }
}
@media (max-width: 980px){
  :root{ --groundH: 540px; --groundLift: -205px; }
  .runner-stage{ height: 68vh; }
  .skill-grid{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
  .avatar-card{ grid-template-columns: 1fr; }
  .avatar-preview{ height: 460px; }
  .avatar-stage svg{ width: 280px; }
  .control-row input[type="range"]{ width: 220px; }
  .runner svg{ width: 232px; }
  .runner.you svg{ width: 250px !important; }
  .obstacle img{ height: 144px !important; }
  .obstacle.hand img{ height: 108px !important; }
}
@media (max-width: 900px){
  :root{ --groundH: 520px; --groundLift: -196px; }
  .runner-stage{ height: 67vh; }
  .card{ max-width: 760px; }
  .start-card h1{ font-size: 2.2rem; }
  .runner svg{ width: 226px; }
  .runner.you svg{ width: 242px !important; }
  .obstacle img{ height: 138px !important; }
  .obstacle.hand img{ height: 104px !important; }
  .countdown{ font-size: 80px; }
  .tap-hint{ font-size: 1rem; }
}
@media (max-width: 768px){
  :root{ --groundH: 480px; --groundLift: -180px; }
  .runner-stage{ height: 66vh; min-height: 480px; }
  .card{ max-width: 680px; padding: 18px; }
  .btn.lg{ padding: 12px 18px; font-size: 1rem; }
  .runner svg{ width: 220px; }
  .runner.you svg{ width: 236px !important; }
  .obstacle img{ height: 132px !important; }
  .obstacle.hand img{ height: 100px !important; }
  .name-tag{ font-size: .82rem; }
  .passage{ font-size: 1.55rem; }
  .prompt { font-size: 1.25rem; }
  .options .btn{ font-size: 1.1rem; }
}
@media (max-width: 640px){
  :root{ --groundH: 460px; --groundLift: -172px; }
  .screen{ padding: 28px 16px; }
  .runner-stage{ height: 66vh; min-height: 460px; }
  .card{ max-width: 580px; padding: 16px; }
  .start-card h1{ font-size: 2rem; }
  .runner svg{ width: 210px; }
  .runner.you svg{ width: 228px !important; }
  .obstacle img{ height: 126px !important; }
  .obstacle.hand img{ height: 96px !important; }
  .countdown{ font-size: 72px; }
  .tap-hint{ font-size: .98rem; }
}
@media (max-width: 540px){
  :root{ --groundH: 440px; --groundLift: -166px; }
  .runner-stage{ height: 65vh; min-height: 440px; }
  .runner svg{ width: 200px; }
  .runner.you svg{ width: 220px !important; }
  .obstacle img{ height: 120px !important; }
  .obstacle.hand img{ height: 92px !important; }
  .name-tag{ font-size: .8rem; }
  .passage{ font-size: 1.4rem; }
  .prompt { font-size: 1.15rem; }
}
@media (max-width: 480px){
  :root{ --groundH: 410px; --groundLift: -155px; }
  .runner-stage{ height: 64vh; min-height: 410px; }
  .card{ padding: 14px; }
  .runner svg{ width: 188px; }
  .runner.you svg{ width: 210px !important; }
  .obstacle img{ height: 112px !important; }
  .obstacle.hand img{ height: 88px !important; }
  .countdown{ font-size: 64px; }
  .tap-hint{ font-size: .95rem; }
}
@media (max-width: 420px){
  :root{ --groundH: 380px; --groundLift: -142px; }
  .runner-stage{ height: 64vh; min-height: 380px; }
  .runner svg{ width: 176px; }
  .runner.you svg{ width: 198px !important; }
  .obstacle img{ height: 104px !important; }
  .obstacle.hand img{ height: 84px !important; }
  .name-tag{ font-size: .75rem; }
  .passage{ font-size: 1.25rem; }
  .prompt { font-size: 1.05rem; }
}
@media (max-height: 700px) and (orientation: landscape){
  :root{ --groundH: 420px; --groundLift: -150px; }
  .runner-stage{ height: 86vh; min-height: 360px; }
  .countdown{ font-size: 64px; }
  .tap-hint{ font-size: .9rem; }
}

/* GIF collage veil */
.gif-grid::after{ content:""; position:absolute; inset:0; background: rgba(0,0,0,var(--veil-alpha)); }