/* reto.css — El Reto page + load-balancer game. Built on colors_and_type.css + site.css. */

.reto-scope{
  --reto-accent:#005090;
  --st-ok:var(--reto-accent);
  --st-ok-lift:#5A95D0;
  --st-under:#C79A4E;   /* muted ochre — under band */
  --st-over:#C0563F;    /* desaturated brick — over band */
  --bus-amber:#E8A33D;  /* 400 V */
  --bus-cyan:#46C6E0;   /* 1000 V */
  --bus-green:#6FB58A;  /* 800 V */
  --bus-cyan-ink:#2f9fb8;
  --stage:#0a1623;
  --panel:#0f1f30;
  --panel-2:#13263a;
  --hair-d:rgba(245,245,243,0.12);
  --hair-d2:rgba(245,245,243,0.22);
}

.reto-scope{background:var(--bg);}
.reto-scope main{display:block;}

/* ============================ HERO ============================ */
.reto-scope .reto-hero{
  position:relative;min-height:88vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;overflow:hidden;
}
.reto-scope .reto-hero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.30) 0%,rgba(13,27,42,.55) 48%,rgba(10,18,28,.92) 100%);}
.reto-scope .reto-hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(90,149,208,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(90,149,208,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 80% at 30% 70%,#000 30%,transparent 100%);
}
.reto-scope .reto-hero__inner{position:relative;z-index:2;padding-bottom:var(--sp-9);padding-top:calc(var(--nav-h) + 40px);display:flex;flex-direction:column;gap:18px;}
.reto-scope .reto-hero__title{
  font-family:var(--font-display);font-weight:700;color:#F5F5F3;
  font-size:clamp(44px,5.4vw,82px);line-height:1.02;letter-spacing:-0.015em;
  max-width:16ch;margin:6px 0 6px;text-wrap:balance;
}
.reto-scope .reto-hero__sub{font-size:18px;font-weight:300;line-height:1.6;color:rgba(245,245,243,.84);max-width:60ch;margin:0;}
.reto-scope .reto-hero__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:14px;}
.reto-scope .reto-hero__btn{padding:16px 26px;font-size:15px;}
.reto-scope .reto-hero__note{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:rgba(245,245,243,.6);}

/* ============================ INTRO ============================ */
.reto-scope .reto-intro__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-9);align-items:start;}
.reto-scope .reto-intro__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h1);line-height:1.1;letter-spacing:-0.01em;margin:14px 0 20px;color:var(--fg);max-width:18ch;}
.reto-scope .reto-intro__body{font-size:17px;line-height:1.7;font-weight:300;color:var(--fg-mid);max-width:54ch;}
.reto-scope .reto-rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--ai-hairline);}
.reto-scope .reto-rule{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;padding:18px 0 18px 16px;border-bottom:1px solid var(--ai-hairline);border-left:2px solid var(--ai-hairline);}
.reto-scope .reto-rule__k{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mid);}
.reto-scope .reto-rule__v{font-size:15px;line-height:1.55;color:var(--fg);}
.reto-scope .reto-rule--goal{border-left-color:var(--reto-accent);}
.reto-scope .reto-rule--goal .reto-rule__k{color:var(--reto-accent);}
.reto-scope .reto-rule--under{border-left-color:var(--st-under);}
.reto-scope .reto-rule--under .reto-rule__k{color:var(--st-under);}
.reto-scope .reto-rule--over{border-left-color:var(--st-over);}
.reto-scope .reto-rule--over .reto-rule__k{color:var(--st-over);}
.reto-scope .reto-rule--ok{border-left-color:var(--reto-accent);}
.reto-scope .reto-rule--ok .reto-rule__k{color:var(--reto-accent);}
@media (max-width:900px){.reto-scope .reto-intro__grid{grid-template-columns:1fr;gap:48px;}.reto-scope .reto-rule{grid-template-columns:100px 1fr;}}

/* ============================ GAME WRAP ============================ */
.reto-scope .reto-gamewrap{background:var(--bg-dark);padding-top:var(--sp-9);padding-bottom:var(--sp-9);}

.reto-scope .game-stage{
  position:relative;background:var(--stage);border:1px solid var(--hair-d);
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:20px;
  border-radius:2px;
}
.reto-scope .game-stage.is-fs{
  position:fixed;inset:0;z-index:1000;border:0;border-radius:0;
  padding:clamp(20px,4vh,48px) clamp(20px,5vw,80px);overflow:auto;justify-content:center;
}

/* ---- HUD ---- */
.reto-scope .game-hud{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--hair-d);}
.reto-scope .game-hud__room{display:flex;flex-direction:column;gap:6px;}
.reto-scope .game-hud__roomlbl{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-0.01em;color:#F5F5F3;line-height:1.1;}
.reto-scope .game-hud__roomidx{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,243,.55);}
.reto-scope .game-hud__dots{display:flex;gap:8px;margin-top:10px;}
.reto-scope .game-dot{width:28px;height:3px;background:rgba(245,245,243,.2);transition:background .3s var(--ease-out);}
.reto-scope .game-dot.is-now{background:var(--st-ok-lift);}
.reto-scope .game-dot.is-done{background:var(--reto-accent);}
.reto-scope .game-hud__r{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;}
.reto-scope .game-meter{display:flex;flex-direction:column;gap:5px;}
.reto-scope .game-meter__k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.5);font-weight:500;white-space:nowrap;}
.reto-scope .game-meter__v{font-family:var(--font-display-book);font-weight:500;font-size:26px;color:#F5F5F3;letter-spacing:-0.01em;line-height:1;}
.reto-scope .game-meter__v em{font-style:normal;font-size:13px;color:rgba(245,245,243,.55);font-family:var(--font-sans);}
.reto-scope .game-fsbtn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:transparent;color:rgba(245,245,243,.8);border:1px solid var(--hair-d2);padding:9px 14px;border-radius:2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:all .18s var(--ease-out);}
.reto-scope .game-fsbtn:hover{color:#fff;border-color:var(--st-ok-lift);}

/* ---- FEEDS ---- */
.reto-scope .game-feeds{display:grid;gap:18px;}
.reto-scope .game-feeds--2{grid-template-columns:repeat(2,1fr);}
.reto-scope .game-feeds--3{grid-template-columns:repeat(3,1fr);}
.reto-scope .game-feeds.is-shake{animation:gameShake .42s var(--ease-in-out);}
@keyframes gameShake{10%,90%{transform:translateX(-2px);}30%,70%{transform:translateX(4px);}50%{transform:translateX(-5px);}}
@media (max-width:820px){.reto-scope .game-feeds--2, .reto-scope .game-feeds--3{grid-template-columns:1fr;}}

.reto-scope .feed{
  background:var(--panel);border:1px solid var(--hair-d);border-top:3px solid var(--hair-d2);
  padding:18px 18px 14px;display:flex;flex-direction:column;gap:14px;min-height:230px;
  transition:border-color .22s var(--ease-out),background .22s var(--ease-out),box-shadow .22s var(--ease-out),transform .22s var(--ease-out);
}
.reto-scope .feed.is-hover{border-color:var(--st-ok-lift);background:var(--panel-2);box-shadow:0 0 0 1px var(--st-ok-lift) inset;}
.reto-scope .feed--ok{border-top-color:var(--st-ok);}
.reto-scope .feed--under{border-top-color:var(--st-under);}
.reto-scope .feed--over, .reto-scope .feed--trip{border-top-color:var(--st-over);}
.reto-scope .feed.is-live{border-top-color:var(--st-ok-lift);}
.reto-scope .feed__head{display:flex;justify-content:space-between;align-items:center;}
.reto-scope .feed__id{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:17px;color:#F5F5F3;letter-spacing:.01em;}
.reto-scope .feed__id svg{color:var(--st-ok-lift);}
.reto-scope .feed__cap{font-family:var(--font-mono);font-size:12px;color:rgba(245,245,243,.5);}

.reto-scope .feed__gaugewrap{display:flex;flex-direction:column;gap:8px;}
.reto-scope .feed__gauge{position:relative;height:14px;background:rgba(245,245,243,.07);border:1px solid var(--hair-d);overflow:hidden;}
.reto-scope .feed__band{position:absolute;top:0;bottom:0;background:rgba(90,149,208,.16);border-left:1px dashed rgba(90,149,208,.6);border-right:1px dashed rgba(90,149,208,.6);}
.reto-scope .feed__fill{position:absolute;top:0;bottom:0;left:0;background:var(--st-under);transition:width .4s var(--ease-out),background .25s var(--ease-out);}
.reto-scope .feed--ok .feed__fill{background:var(--st-ok);}
.reto-scope .feed--over .feed__fill, .reto-scope .feed--trip .feed__fill{background:var(--st-over);}
.reto-scope .feed__tick{position:absolute;top:-3px;bottom:-3px;width:1px;background:rgba(245,245,243,.45);}
.reto-scope .feed__readout{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.reto-scope .feed__total{font-family:var(--font-display-book);font-weight:500;font-size:22px;color:#F5F5F3;letter-spacing:-0.01em;}
.reto-scope .feed__total em{font-style:normal;font-size:12px;color:rgba(245,245,243,.5);font-family:var(--font-sans);}
.reto-scope .feed__status{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.reto-scope .feed__status--empty{color:rgba(245,245,243,.5);background:rgba(245,245,243,.08);}
.reto-scope .feed__status--under{color:var(--st-under);background:rgba(199,154,78,.14);}
.reto-scope .feed__status--ok{color:#cfe3f5;background:rgba(0,80,144,.4);}
.reto-scope .feed__status--over, .reto-scope .feed__status--trip{color:#f0c4ba;background:rgba(192,86,63,.22);}
.reto-scope .feed__bandlbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:rgba(245,245,243,.42);}

.reto-scope .feed__drop{flex:1;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:12px;border:1px dashed var(--hair-d);background:rgba(0,0,0,.12);min-height:74px;transition:border-color .2s var(--ease-out),background .2s var(--ease-out);}
.reto-scope .feed.is-hover .feed__drop{border-color:var(--st-ok-lift);background:rgba(90,149,208,.06);}
.reto-scope .feed__placeholder{color:rgba(245,245,243,.3);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;align-self:center;margin:auto;text-align:center;}
.reto-scope .feed__delta{min-height:20px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;}
.reto-scope .feed__delta--more{color:var(--st-under);}
.reto-scope .feed__delta--less{color:var(--st-over);}
.reto-scope .feed__ok{display:inline-flex;align-items:center;gap:6px;color:var(--st-ok-lift);font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}

/* ---- CHIPS (v4: drawing + name only) ---- */
.reto-scope .rk-chip{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  background:#F5F5F3;color:#0D1B2A;border:1px solid #cdd3d8;
  padding:7px 14px 7px 10px;min-height:48px;border-radius:2px;cursor:grab;
  font-family:var(--font-sans);user-select:none;touch-action:none;
  transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),opacity .14s;
}
.reto-scope .rk-chip:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.35);}
.reto-scope .rk-chip:active{cursor:grabbing;}
.reto-scope .rk-chip.is-dragging{opacity:.28;}
/* Tour pulse — applied to one mid-row rack chip during step 2
   ("Abra una ficha") to guide the player to tap one. Loud
   intentionally: thick outline, large glow ring, gentle scale
   breathing. Animation pauses once the sheet opens (the prop is
   removed from the chip). */
.reto-scope .rk-chip.is-tour-pulse{
  outline:3px solid var(--st-ok-lift);
  outline-offset:3px;
  animation:rkChipPulse 1.25s var(--ease-in-out) infinite;
  position:relative;z-index:3;
}
@keyframes rkChipPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 0 0 0 rgba(90,149,208,.7),
      0 0 14px rgba(90,149,208,.55),
      0 6px 16px rgba(0,0,0,.35);
  }
  50%{
    transform:scale(1.05);
    box-shadow:
      0 0 0 14px rgba(90,149,208,0),
      0 0 28px rgba(90,149,208,.75),
      0 8px 22px rgba(90,149,208,.5);
  }
}
@media (prefers-reduced-motion: reduce){.reto-scope .rk-chip.is-tour-pulse{animation:none;}}
.reto-scope .rk-chip__glyph{display:inline-flex;color:#2a3b49;flex:none;}
.reto-scope .rk-chip__name{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.02em;color:#1d2b38;}
.reto-scope .rk-ghost{
  position:fixed;z-index:1100;pointer-events:none;display:inline-flex;align-items:center;gap:9px;
  background:#FFFFFF;color:#0D1B2A;border:1px solid var(--st-ok-lift);
  padding:7px 14px 7px 10px;border-radius:2px;box-shadow:0 14px 34px rgba(0,0,0,.5);
  font-family:var(--font-sans);transform:rotate(-1.5deg);
}
.reto-scope .rk-ghost .rk-chip__glyph{color:#2a3b49;}
.reto-scope .rk-ghost .rk-chip__name{font-family:var(--font-mono);font-size:13px;font-weight:600;color:#1d2b38;}

/* ---- TRAY ---- */
.reto-scope .game-tray{border:1px solid var(--hair-d);background:rgba(0,0,0,.18);padding:16px 18px;transition:border-color .2s var(--ease-out),background .2s var(--ease-out);}
.reto-scope .game-tray.is-hover{border-color:var(--st-ok-lift);background:rgba(90,149,208,.06);}
.reto-scope .game-tray__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.reto-scope .game-tray__lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.7);}
.reto-scope .game-tray__hint{font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.42);}
.reto-scope .game-tray__chips{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;align-items:center;}
.reto-scope .game-tray__empty{display:inline-flex;align-items:center;gap:8px;color:var(--st-ok-lift);font-size:13px;font-weight:500;letter-spacing:.02em;}

/* ---- CONTROLS ---- */
.reto-scope .game-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:18px;border-top:1px solid var(--hair-d);flex-wrap:wrap;}
.reto-scope .game-reset{background:transparent;color:rgba(245,245,243,.7);border:1px solid var(--hair-d2);padding:11px 18px;border-radius:2px;font-size:12px;letter-spacing:.06em;font-weight:500;white-space:nowrap;transition:all .18s var(--ease-out);}
.reto-scope .game-reset:hover{color:#fff;border-color:rgba(245,245,243,.5);}
.reto-scope .game-controls__r{display:flex;align-items:center;gap:20px;}
.reto-scope .game-tries{font-family:var(--font-mono);font-size:12px;color:rgba(245,245,243,.5);letter-spacing:.04em;}
.reto-scope .game-energise{padding:14px 24px;font-size:14px;background:var(--reto-accent);white-space:nowrap;}
.reto-scope .game-energise:hover{background:var(--ai-blue-600);}
.reto-scope .game-energise.is-locked{background:rgba(245,245,243,.14);color:rgba(245,245,243,.55);cursor:not-allowed;}
.reto-scope .game-energise.is-locked:hover{transform:none;}
.reto-scope .game-energise svg{flex:none;}

/* ---- ROUND CLEAR OVERLAY ---- */
.reto-scope .game-clear{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(8,16,26,.86);backdrop-filter:blur(4px);animation:clearIn .3s var(--ease-out);}
.reto-scope .is-fs .game-clear{position:fixed;}
@keyframes clearIn{from{opacity:0;}to{opacity:1;}}
.reto-scope .game-clear__card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:44px 48px;border:1px solid var(--st-ok-lift);background:var(--panel);max-width:420px;animation:clearCard .42s var(--ease-out);}
@keyframes clearCard{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.reto-scope .game-clear__ic{width:58px;height:58px;border-radius:999px;background:var(--reto-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(0,80,144,.18);}
.reto-scope .game-clear__t{font-family:var(--font-display);font-weight:700;font-size:28px;color:#F5F5F3;letter-spacing:-0.01em;}
.reto-scope .game-clear__sub{font-size:13px;color:rgba(245,245,243,.6);letter-spacing:.04em;}
.reto-scope .game-clear__btn{margin-top:8px;padding:14px 26px;}

/* ============================ TREATMENT — BLUEPRINT ============================ */
.reto-scope .game-stage--blueprint{
  background:#071322;
  background-image:linear-gradient(rgba(90,149,208,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,149,208,.07) 1px,transparent 1px);
  background-size:26px 26px;border-color:rgba(90,149,208,.32);
}
.reto-scope .game-stage--blueprint .feed{background:rgba(10,24,40,.66);border-color:rgba(90,149,208,.28);border-top-width:1px;box-shadow:none;}
.reto-scope .game-stage--blueprint .feed::before{content:"";position:absolute;}
.reto-scope .game-stage--blueprint .feed__id, .reto-scope .game-stage--blueprint .game-hud__roomlbl, .reto-scope .game-stage--blueprint .feed__total, .reto-scope .game-stage--blueprint .game-meter__v{font-family:var(--font-mono);font-weight:500;}
.reto-scope .game-stage--blueprint .feed__drop{border-style:solid;border-color:rgba(90,149,208,.22);background:rgba(90,149,208,.03);}
.reto-scope .game-stage--blueprint .rk-chip{background:rgba(7,19,34,.9);color:#cfe3f5;border:1px solid var(--st-ok-lift);font-family:var(--font-mono);}
.reto-scope .game-stage--blueprint .rk-chip__kw{color:#eaf3fb;}
.reto-scope .game-stage--blueprint .rk-chip__u{color:#7fa9cf;}
.reto-scope .game-stage--blueprint .rk-chip__bar{background:var(--st-ok-lift);}
.reto-scope .game-stage--blueprint .rk-ghost{background:rgba(7,19,34,.96);color:#eaf3fb;border-color:var(--st-ok-lift);font-family:var(--font-mono);}
.reto-scope .game-stage--blueprint .feed--ok{box-shadow:0 0 0 1px rgba(90,149,208,.5) inset;}

/* ============================ TREATMENT — ISOMETRIC ============================ */
.reto-scope .game-stage--iso .game-feeds{
  transform:perspective(2100px) rotateX(13deg) rotateZ(-6deg);
  transform-style:preserve-3d;transform-origin:center center;margin:34px 0 34px;
  transition:transform .5s var(--ease-out);
}
.reto-scope .game-stage--iso .feed{
  box-shadow:-10px 14px 0 -2px rgba(0,0,0,.45),0 22px 40px rgba(0,0,0,.4);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .22s var(--ease-out),background .22s var(--ease-out);
}
.reto-scope .game-stage--iso .feed.is-hover{transform:translateZ(26px);}
.reto-scope .game-stage--iso .rk-chip{box-shadow:-3px 4px 0 -1px rgba(0,0,0,.4);}
.reto-scope .game-stage--iso .game-tray{transform:perspective(1700px) rotateX(8deg);transform-origin:center top;}
@media (max-width:820px){
  .reto-scope .game-stage--iso .game-feeds{transform:none;margin:0;}
  .reto-scope .game-stage--iso .game-tray{transform:none;}
}

/* ============================ WIN PANEL ============================
   End-game / recruitment hand-off — lives INSIDE the game stage.
   Two stateful views, switched via a local view state:
     · "victory" — eyebrow + headline + tries/code + Find-your-spot CTA
     · "apply"   — 3 how-to-apply cards + mailto CTA + see-positions link
   Both share a single dark-navy frame with the grid+glow bg layers,
   so the swap is a card-only transition (no flash of light section). */
.reto-scope .win{position:relative;overflow:hidden;background:var(--bg-deep);color:#F5F5F3;isolation:isolate;animation:winIn .6s var(--ease-out);min-height:560px;display:flex;flex-direction:column;justify-content:center;padding:var(--sp-9) 0;}
@keyframes winIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
/* Per-view content panel — fades in on top of the shared bg. */
.reto-scope .win__screen{position:relative;z-index:1;max-width:920px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;animation:winScreenIn .35s var(--ease-out);}
@keyframes winScreenIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.reto-scope .win__bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
/* Blueprint grid laid over the deep navy bg — same vocabulary as
   the boot screen so the win panel reads as "still inside the
   game's world", not a marketing landing dropped on top. */
.reto-scope .win__gridbg{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(90,149,208,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,149,208,.07) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(85% 70% at 50% 40%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(85% 70% at 50% 40%,#000 30%,transparent 80%);
  opacity:.9;}
.reto-scope .win__glow{position:absolute;inset:0;
  background:
    radial-gradient(55% 65% at 50% 20%,rgba(0,80,144,.32) 0%,transparent 65%),
    radial-gradient(40% 55% at 18% 90%,rgba(90,149,208,.18) 0%,transparent 70%),
    radial-gradient(40% 55% at 82% 80%,rgba(90,149,208,.15) 0%,transparent 70%);}
.reto-scope .win__hero-inner{position:relative;z-index:1;max-width:920px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.reto-scope .win__eyebrow{display:inline-flex;align-items:center;gap:9px;}
.reto-scope .win__pulse{width:9px;height:9px;border-radius:999px;background:var(--st-ok-lift);box-shadow:0 0 0 0 rgba(90,149,208,.6);animation:winPulse 2s ease-out infinite;}
@keyframes winPulse{0%{box-shadow:0 0 0 0 rgba(90,149,208,.55);}70%{box-shadow:0 0 0 12px rgba(90,149,208,0);}100%{box-shadow:0 0 0 0 rgba(90,149,208,0);}}
.reto-scope .win__title{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-0.02em;color:#F5F5F3;max-width:22ch;margin:6px 0 0;}
.reto-scope .win__lead{font-size:18px;font-weight:300;line-height:1.55;color:rgba(245,245,243,.82);max-width:54ch;margin:0;}

/* Meta row — tries (smaller) + the challenge code (hero artefact).
   The two stats sit side by side with a hairline divider. */
.reto-scope .win__meta{display:flex;align-items:stretch;gap:28px;margin-top:18px;padding:18px 24px;border:1px solid rgba(90,149,208,.32);background:rgba(0,80,144,.10);backdrop-filter:blur(4px);}
.reto-scope .win__meta-stat, .reto-scope .win__meta-code{display:flex;flex-direction:column;gap:8px;}
.reto-scope .win__meta-code{flex:1;min-width:0;}
.reto-scope .win__meta-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,243,.55);font-weight:600;}
.reto-scope .win__meta-v{font-family:var(--font-mono);font-size:26px;font-weight:600;color:#fff;line-height:1;letter-spacing:.04em;}
.reto-scope .win__meta-div{width:1px;background:rgba(245,245,243,.14);align-self:stretch;}
.reto-scope .win__code-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.reto-scope .win__code-v{font-family:var(--font-mono);font-size:30px;font-weight:600;letter-spacing:.10em;color:#fff;line-height:1;
  text-shadow:0 0 18px rgba(90,149,208,.45);}
.reto-scope .win__copy{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:transparent;color:rgba(245,245,243,.85);border:1px solid rgba(245,245,243,.32);font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out);}
.reto-scope .win__copy:hover{background:rgba(245,245,243,.08);border-color:rgba(245,245,243,.55);color:#fff;}

/* ---------- Apply view (dark — shares the .win frame) ----------
   Was previously a separate light section below the game; now it's
   another card swapped into the same stage, navy from edge to edge. */
.reto-scope .win__back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:rgba(245,245,243,.65);font-family:var(--font-mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:0;margin-bottom:6px;transition:color .18s var(--ease-out);}
.reto-scope .win__back:hover{color:#fff;}
.reto-scope .win__back .arr{font-size:14px;line-height:1;}
.reto-scope .win__send-eyebrow{color:var(--st-ok-lift);}
.reto-scope .win__send-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-0.015em;color:#F5F5F3;margin:4px 0 0;max-width:22ch;}
.reto-scope .win__send-lead{font-size:16px;line-height:1.6;font-weight:300;color:rgba(245,245,243,.82);max-width:58ch;margin:0 0 14px;}

/* Three numbered cards — same dark glass treatment as .win__meta. */
.reto-scope .win__steps{list-style:none;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;}
.reto-scope .win__step{display:flex;gap:14px;padding:18px 18px 20px;border:1px solid rgba(90,149,208,.32);border-top:2px solid var(--st-ok-lift);background:rgba(0,80,144,.10);backdrop-filter:blur(4px);transition:transform .25s var(--ease-out),background .25s var(--ease-out),border-color .25s var(--ease-out);}
.reto-scope .win__step:hover{transform:translateY(-2px);background:rgba(0,80,144,.16);border-color:rgba(90,149,208,.55);}
.reto-scope .win__step-k{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--st-ok-lift);letter-spacing:.08em;flex:none;}
.reto-scope .win__step-c{display:flex;flex-direction:column;gap:6px;}
.reto-scope .win__step-t{font-family:var(--font-display);font-weight:600;font-size:17px;color:#F5F5F3;letter-spacing:-0.005em;}
.reto-scope .win__step-b{font-size:13.5px;line-height:1.55;font-weight:300;color:rgba(245,245,243,.72);margin:0;}

/* Primary mailto + secondary scroll-down link, sit side-by-side. */
.reto-scope .win__cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;}
.reto-scope .win__cta{padding:16px 28px;font-size:14px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.reto-scope .win__link{background:transparent;border:0;padding:14px 4px;display:inline-flex;align-items:center;gap:8px;color:rgba(245,245,243,.85);font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:.04em;cursor:pointer;border-bottom:1px solid rgba(245,245,243,.32);transition:color .18s var(--ease-out),border-color .18s var(--ease-out);}
.reto-scope .win__link:hover{color:#fff;border-bottom-color:#fff;}
.reto-scope .win__link .arr{font-size:12px;}
.reto-scope .win__cta-sub{font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.55);margin:8px 0 0;letter-spacing:.06em;}
.reto-scope .win__fallback{font-size:13px;color:rgba(245,245,243,.6);margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(245,245,243,.12);width:100%;}
.reto-scope .win__fallback-link{color:var(--st-ok-lift);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(90,149,208,.4);}
.reto-scope .win__fallback-link:hover{color:#fff;border-bottom-color:#fff;}

@media (max-width:900px){
  .reto-scope .win{min-height:auto;padding:48px 0;}
  .reto-scope .win__meta{flex-direction:column;gap:18px;padding:18px 20px;}
  .reto-scope .win__meta-div{display:none;width:100%;height:1px;}
  .reto-scope .win__steps{grid-template-columns:1fr;gap:12px;}
  .reto-scope .win__cta-row{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* ============================ FOOTER tweaks ============================ */
.reto-scope .reto-footer__inner{grid-template-columns:1.3fr 1fr;}
.reto-scope .reto-footer__tag{font-size:12px;letter-spacing:.06em;color:rgba(245,245,243,.5);margin-top:6px;}
.reto-scope .reto-footer__contact{gap:8px;}
.reto-scope .reto-footer__icons{display:flex;gap:8px;margin-top:14px;}
@media (max-width:900px){.reto-scope .reto-footer__inner{grid-template-columns:1fr;gap:32px;}}

@media (prefers-reduced-motion: reduce){
  .reto-scope .win, .reto-scope .game-clear, .reto-scope .game-clear__card, .reto-scope .win__pulse{animation:none !important;}
  .reto-scope .feed__fill{transition:none;}
}

/* ============================ V2 — HUD METERS ============================ */
.reto-scope .hud-meter{display:flex;flex-direction:column;gap:5px;}
.reto-scope .hud-meter__k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.5);font-weight:500;white-space:nowrap;}
.reto-scope .hud-meter__v{font-family:var(--font-display-book);font-weight:500;font-size:24px;color:#F5F5F3;letter-spacing:-0.01em;line-height:1;}
.reto-scope .hud-meter__v em{font-style:normal;font-size:12px;color:rgba(245,245,243,.5);font-family:var(--font-sans);}
.reto-scope .hud-meter__v.is-ok{color:var(--st-ok-lift);}

/* ============================ V2 — BOARD LAYOUT ============================ */
.reto-scope .game-board{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start;}
.reto-scope .game-left{display:flex;flex-direction:column;gap:18px;min-width:0;}
@media (max-width:960px){.reto-scope .game-board{grid-template-columns:1fr;}}

/* HUD meters — horizontal, with limit bars */
.reto-scope .game-hud{flex-wrap:wrap;gap:18px;}
.reto-scope .game-hud__r{flex-wrap:wrap;gap:20px;align-items:flex-end;}
.reto-scope .hud-meter{display:flex;flex-direction:column;gap:5px;min-width:138px;overflow:visible;}
.reto-scope .hud-meter__k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,243,.5);font-weight:500;white-space:nowrap;}
.reto-scope .hud-meter__v{font-family:var(--font-display-book);font-weight:500;font-size:21px;line-height:1.1;color:#F5F5F3;letter-spacing:0;white-space:nowrap;overflow:visible;}
.reto-scope .hud-meter__v em{font-style:normal;font-size:12px;color:rgba(245,245,243,.6);font-family:var(--font-sans);font-weight:400;margin-left:2px;}
/* Budget €-cap glyph — Inter at 12px inheriting weight 500 from the
   parent rendered the € as a mushy heavy blob next to the slash.
   Pin it to font-display-book (same family as the bright spent value)
   so the two € glyphs match in shape, and nudge spacing so it sits
   clear of the slash. */
.reto-scope .hud-meter__v em .hud-meter__eur{font-family:var(--font-display-book);font-weight:500;font-size:11px;letter-spacing:.01em;margin:0 1px 0 1px;}
.reto-scope .hud-meter__v.is-ok{color:var(--st-ok-lift);}
.reto-scope .hud-meter__v.is-over{color:var(--st-over);}
.reto-scope .hud-bar{height:6px;background:rgba(245,245,243,.1);border:1px solid var(--hair-d);overflow:hidden;}
.reto-scope .hud-bar__fill{height:100%;width:0;background:rgba(245,245,243,.4);transition:width .4s var(--ease-out),background .25s var(--ease-out);}
.reto-scope .hud-bar__fill.is-ok{background:var(--st-ok-lift);}
.reto-scope .hud-bar__fill.is-budget{background:var(--reto-accent);}
.reto-scope .hud-bar__fill.is-overbudget{background:var(--st-over);}

/* HUD meter bars */
.reto-scope .game-hud__r .hud-meter{min-width:118px;}
.reto-scope .hud-bar{height:5px;background:rgba(245,245,243,.1);border:1px solid var(--hair-d);overflow:hidden;margin-top:2px;}
.reto-scope .hud-bar__fill{height:100%;width:0;background:rgba(245,245,243,.4);transition:width .4s var(--ease-out),background .25s var(--ease-out);}
.reto-scope .hud-bar__fill.is-ok{background:var(--st-ok-lift);}
.reto-scope .hud-bar__fill.is-budget{background:var(--reto-accent);}
.reto-scope .hud-bar__fill.is-overbudget{background:var(--st-over);}

/* ============================ V3 — VOLTAGE BADGES / TINTS ============================ */
.reto-scope .bus-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid;white-space:nowrap;}
.reto-scope .bus-badge.v-amber{color:var(--bus-amber);border-color:rgba(232,163,61,.5);background:rgba(232,163,61,.1);}
.reto-scope .bus-badge.v-cyan{color:var(--bus-cyan);border-color:rgba(70,198,224,.5);background:rgba(70,198,224,.1);}
.reto-scope .bus-badge.v-green{color:var(--bus-green);border-color:rgba(111,181,138,.5);background:rgba(111,181,138,.1);}
.reto-scope .feed.v-amber{border-top-color:var(--bus-amber);}
.reto-scope .feed.v-cyan{border-top-color:var(--bus-cyan);}
.reto-scope .feed.v-green{border-top-color:var(--bus-green);}
.reto-scope .feed.v-amber.feed--ok, .reto-scope .feed.v-cyan.feed--ok, .reto-scope .feed.v-green.feed--ok{border-top-color:var(--st-ok);}
.reto-scope .feed.v-amber.feed--over, .reto-scope .feed.v-cyan.feed--over, .reto-scope .feed.v-green.feed--over, .reto-scope .feed.v-amber.feed--trip, .reto-scope .feed.v-cyan.feed--trip, .reto-scope .feed.v-green.feed--trip{border-top-color:var(--st-over);}
.reto-scope .hud-meter__v.is-over{color:var(--st-over);}

/* ============================ V2 — COOLING BAY ============================ */
.reto-scope .cool-bay{background:var(--panel);border:1px solid var(--hair-d);border-top:3px solid var(--st-ok-lift);padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;align-self:stretch;}
.reto-scope .cool-bay__head{display:flex;justify-content:space-between;align-items:center;}
.reto-scope .cool-bay__title{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:16px;color:#F5F5F3;letter-spacing:.01em;}
.reto-scope .cool-bay__title svg{color:var(--st-ok-lift);}
.reto-scope .cool-slots{display:flex;flex-direction:column;gap:8px;}
.reto-scope .cool-slot{position:relative;border:1px dashed var(--hair-d2);background:rgba(0,0,0,.14);padding:10px 12px;min-height:54px;cursor:pointer;transition:border-color .18s var(--ease-out),background .18s var(--ease-out);display:flex;flex-direction:column;justify-content:center;gap:4px;}
.reto-scope .cool-slot:hover{border-color:var(--st-ok-lift);}
.reto-scope .cool-slot.is-filled{border-style:solid;background:rgba(90,149,208,.07);}
.reto-scope .cool-slot.is-active{border-color:var(--st-ok-lift);background:rgba(90,149,208,.1);}
.reto-scope .cool-slot__empty{display:inline-flex;align-items:center;gap:8px;color:rgba(245,245,243,.55);font-size:12px;font-weight:500;letter-spacing:.04em;justify-content:center;white-space:nowrap;}
.reto-scope .cool-slot__top{display:flex;justify-content:space-between;align-items:center;}
.reto-scope .cool-slot__name{font-family:var(--font-mono);font-size:13px;font-weight:600;color:#F5F5F3;letter-spacing:.02em;}
.reto-scope .cool-slot__x{background:transparent;border:0;color:rgba(245,245,243,.45);padding:2px;display:inline-flex;transition:color .15s;}
.reto-scope .cool-slot__x:hover{color:var(--st-over);}
.reto-scope .cool-slot__fam{font-size:11px;color:rgba(245,245,243,.5);}
.reto-scope .cool-slot__stats{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.7);margin-top:2px;}
.reto-scope .cool-slot__stats b{color:#F5F5F3;font-weight:600;}
.reto-scope .cool-slot__draw{color:var(--st-under);}
.reto-scope .cool-slot__serve{display:inline-flex;align-items:center;}
.reto-scope .cool-slot__serve.serve-air{color:var(--bus-cyan);opacity:.85;}
.reto-scope .cool-slot__serve.serve-liquid{color:var(--st-ok-lift);}
/* picker popover */
.reto-scope .cool-picker{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:#0c1d2e;border:1px solid var(--st-ok-lift);box-shadow:0 18px 40px rgba(0,0,0,.55);padding:6px;display:flex;flex-direction:column;gap:2px;animation:pickerIn .18s var(--ease-out);}
@keyframes pickerIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.reto-scope .cool-picker__hd{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.5);font-weight:600;padding:6px 8px 4px;}
.reto-scope .cool-picker__opt{display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent;border:0;padding:9px 8px;cursor:pointer;transition:background .15s;text-align:left;}
.reto-scope .cool-picker__opt:hover{background:rgba(90,149,208,.18);}
.reto-scope .cool-picker__name{font-family:var(--font-mono);font-size:12px;font-weight:600;color:#F5F5F3;}
.reto-scope .cool-picker__meta{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.6);}
.reto-scope .cool-picker__meta b{color:#F5F5F3;}
.reto-scope .cool-picker__draw{color:var(--st-under);}
.reto-scope .cool-picker__clear{color:var(--st-over);font-size:11px;letter-spacing:.06em;text-transform:uppercase;justify-content:center;border-top:1px solid var(--hair-d);margin-top:2px;}

/* cooling meter */
.reto-scope .cool-meter{display:flex;flex-direction:column;gap:6px;}
.reto-scope .cool-meter__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.reto-scope .cool-meter__k{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.04em;color:rgba(245,245,243,.6);font-weight:500;white-space:nowrap;}
.reto-scope .cool-meter__v{font-family:var(--font-display-book);font-weight:500;font-size:17px;color:#F5F5F3;white-space:nowrap;}
.reto-scope .cool-meter__v em{font-style:normal;font-size:11px;color:rgba(245,245,243,.5);font-family:var(--font-sans);}
.reto-scope .cool-meter__v.is-ok{color:var(--st-ok-lift);}
.reto-scope .cool-meter__v.is-under{color:var(--st-under);}
.reto-scope .cool-meter__track{height:8px;background:rgba(245,245,243,.08);border:1px solid var(--hair-d);overflow:hidden;}
.reto-scope .cool-meter__fill{height:100%;transition:width .4s var(--ease-out);}
.reto-scope .cool-meter__fill.is-ok{background:var(--st-ok-lift);}
.reto-scope .cool-meter__fill.is-under{background:var(--st-under);}

/* PUE dial */
.reto-scope .cool-pue{border-top:1px solid var(--hair-d);padding-top:14px;display:flex;flex-direction:column;gap:8px;}
.reto-scope .cool-pue__hd{display:flex;justify-content:space-between;align-items:center;}
.reto-scope .cool-pue__k{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.6);font-weight:600;}
.reto-scope .cool-pue__info{background:transparent;border:0;color:var(--st-ok-lift);padding:0;display:inline-flex;cursor:pointer;}
.reto-scope .cool-pue__lock{font-family:var(--font-mono);font-size:10px;color:rgba(245,245,243,.4);letter-spacing:.04em;}
.reto-scope .pue-dial{display:flex;align-items:center;gap:16px;}
.reto-scope .pue-dial.is-locked{opacity:.5;}
.reto-scope .pue-dial__svg{width:120px;height:72px;flex:none;}
.reto-scope .pue-dial__track{fill:none;stroke:rgba(245,245,243,.14);stroke-width:6;stroke-linecap:round;}
.reto-scope .pue-dial__fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .4s var(--ease-out);}
.reto-scope .pue-dial__fill.is-ok{stroke:var(--st-ok-lift);}
.reto-scope .pue-dial__fill.is-over{stroke:var(--st-over);}
.reto-scope .pue-dial__target{stroke:#F5F5F3;stroke-width:1.4;}
.reto-scope .pue-dial__needle{stroke:#F5F5F3;stroke-width:2;stroke-linecap:round;transition:all .4s var(--ease-out);}
.reto-scope .pue-dial__hub{fill:#F5F5F3;}
.reto-scope .pue-dial__read{display:flex;flex-direction:column;gap:2px;}
.reto-scope .pue-dial__val{font-family:var(--font-display-book);font-weight:500;font-size:30px;line-height:1;letter-spacing:-0.01em;color:#F5F5F3;}
.reto-scope .pue-dial__val.is-ok{color:var(--st-ok-lift);}
.reto-scope .pue-dial__val.is-over{color:var(--st-over);}
.reto-scope .pue-dial__val.is-locked{color:rgba(245,245,243,.4);}
.reto-scope .pue-dial__tgt{font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.5);}
.reto-scope .cool-pue--locked .pue-locked{display:flex;align-items:center;gap:9px;padding:14px 4px 4px;color:rgba(245,245,243,.4);font-size:12px;letter-spacing:.02em;}
.reto-scope .cool-pue--locked .pue-locked svg{opacity:.7;}

/* Boot / briefing screen — self-contained game intro */
.reto-scope .boot{
  position:absolute;inset:0;z-index:95;
  display:flex;align-items:center;justify-content:center;
  /* Layered background: deep navy + a soft blue radial glow off the
     top-left for depth, plus a faint blueprint grid masked off the
     centre so the panel content sits on a clean disc. Reads as the
     "control-room" identity of the rest of the game instead of a
     plain dark wash. */
  background:
    radial-gradient(circle at 22% 18%, rgba(90,149,208,0.18) 0%, transparent 45%),
    radial-gradient(circle at 78% 82%, rgba(0,80,144,0.14) 0%, transparent 50%),
    var(--stage);
  overflow:auto;padding:32px;
}
.reto-scope .boot::before{
  /* Blueprint grid layer — sits behind everything, masked into a
     radial vignette so it only whispers around the edges. */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(90,149,208,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,149,208,0.07) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%, transparent 35%, #000 95%);
          mask-image:radial-gradient(75% 75% at 50% 50%, transparent 35%, #000 95%);
}
.reto-scope .is-fs .boot{position:fixed;}
/* Persistent fullscreen exit button — pinned to the top-right of the
   boot overlay, only renders when the user is in fullscreen (gated
   in game.jsx). */
.reto-scope .boot__fsexit{
  position:absolute;top:18px;right:18px;z-index:5;
}
.reto-scope .boot__load{display:flex;flex-direction:column;align-items:center;gap:14px;animation:clearIn .3s var(--ease-out);}
.reto-scope .boot__name{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,4vw,38px);letter-spacing:-0.015em;color:#F5F5F3;margin-top:6px;text-align:center;}
.reto-scope .boot__sys{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,243,.5);}
.reto-scope .boot__track{width:260px;max-width:60vw;height:4px;background:rgba(245,245,243,.1);border:1px solid var(--hair-d);overflow:hidden;margin-top:6px;}
/* Bar animation only runs once the user clicks Start (game.jsx adds
   `.is-running` to .boot__track). Pause-by-default; `forwards` keeps
   the filled state after the 3s animation completes. */
.reto-scope .boot__fill{height:100%;width:0;background:var(--st-ok-lift);animation:bootFill 3s var(--ease-out) forwards;animation-play-state:paused;}
.reto-scope .boot__track.is-running .boot__fill{animation-play-state:running;}
@keyframes bootFill{from{width:0;}to{width:100%;}}
.reto-scope .boot__loading{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:rgba(245,245,243,.45);}
.reto-scope .boot__brief{max-width:640px;width:100%;display:flex;flex-direction:column;gap:12px;animation:clearCard .4s var(--ease-out);}
.reto-scope .boot__title{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.6vw,48px);line-height:1.02;letter-spacing:-0.015em;color:#F5F5F3;margin:2px 0 0;}
.reto-scope .boot__intro{font-size:16px;line-height:1.6;font-weight:300;color:rgba(245,245,243,.82);margin:0 0 4px;max-width:60ch;}
.reto-scope .boot__sec{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.reto-scope .boot__sec-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--st-ok-lift);}
.reto-scope .boot__rules{list-style:none;counter-reset:r;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.reto-scope .boot__rules li{counter-increment:r;position:relative;padding:8px 0 8px 34px;font-size:14px;line-height:1.5;color:rgba(245,245,243,.85);border-bottom:1px solid var(--hair-d);}
.reto-scope .boot__rules li:last-child{border-bottom:0;}
.reto-scope .boot__rules li::before{content:counter(r);position:absolute;left:0;top:7px;width:22px;height:22px;border:1px solid var(--st-ok-lift);color:var(--st-ok-lift);border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;}
.reto-scope .boot__terms-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.reto-scope .boot__terms-list li{display:flex;gap:14px;align-items:baseline;padding:9px 0 9px 14px;border-left:2px solid var(--reto-accent);border-bottom:1px solid var(--hair-d);}
.reto-scope .boot__terms-list li:last-child{border-bottom:0;}
.reto-scope .boot__term-k{flex:0 0 150px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--st-ok-lift);letter-spacing:.01em;}
.reto-scope .boot__term-v{font-size:13px;line-height:1.45;color:rgba(245,245,243,.72);font-weight:300;}
.reto-scope .boot__start{align-self:flex-start;padding:14px 26px;font-size:15px;margin-top:8px;}
/* Brief screen nav row — Back · step indicator · Next/Start, evenly
   spaced. Browser default styles are hideous here, so explicit. */
.reto-scope .boot__nav{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--hair-d);
}
.reto-scope .boot__step{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  color:rgba(245,245,243,.5);
}
/* Back button — minimalist ghost on dark. Matches the boot panel
   identity instead of the browser's default chrome. */
.reto-scope .boot__backbtn{
  background:transparent;
  border:1px solid var(--hair-d2);
  color:rgba(245,245,243,.78);
  padding:10px 18px;
  font-family:var(--font-sans);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;border-radius:2px;
  transition:all .18s var(--ease-out);
}
.reto-scope .boot__backbtn:hover{
  color:#FFFFFF;
  border-color:var(--st-ok-lift);
}
/* Loading-state Start button — centred (not flex-start like the
   .boot__brief variant) and a notch smaller so it reads as a quiet
   call-to-action under the bar rather than a heavy CTA. */
.reto-scope .boot__load .boot__start{align-self:center;padding:10px 22px;font-size:13px;margin-top:18px;}
@media (max-width:560px){.reto-scope .boot__terms-list li{flex-direction:column;gap:2px;}.reto-scope .boot__term-k{flex:none;}}
@media (prefers-reduced-motion: reduce){.reto-scope .boot__fill{animation:none;width:100%;}}

/* ============================ V2 — TOAST ============================ */
.reto-scope .game-toast{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:80;display:inline-flex;align-items:center;gap:10px;background:#2a1410;border:1px solid var(--st-over);color:#f0c4ba;padding:12px 18px;font-size:13px;font-weight:500;max-width:min(520px,86%);box-shadow:0 14px 34px rgba(0,0,0,.5);animation:toastIn .22s var(--ease-out);}
.reto-scope .is-fs .game-toast{position:fixed;}
.reto-scope .game-toast svg{color:var(--st-over);flex:none;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}

/* ============================ V2 — INTRO / MODAL ============================ */
.reto-scope .game-intro, .reto-scope .game-modal{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(8,16,26,.82);backdrop-filter:blur(4px);animation:clearIn .26s var(--ease-out);padding:24px;}
.reto-scope .is-fs .game-intro, .reto-scope .is-fs .game-modal{position:fixed;}
/* Rack-sheet modal sits ABOVE the tour overlay so the ficha stays
   bright even if the player keeps it open after pressing Siguiente
   (tour spot's 9999px dim would otherwise darken it). Forced fixed
   positioning lifts it out of .game-stage's stacking context so the
   z-index actually compares against .tour at root. */
.reto-scope .game-modal{position:fixed;z-index:1250;}
.reto-scope .game-intro__card{position:relative;display:flex;flex-direction:column;gap:14px;max-width:480px;padding:36px 40px;border:1px solid var(--hair-d2);border-top:3px solid var(--st-ok-lift);background:var(--panel);animation:clearCard .4s var(--ease-out);}
.reto-scope .game-intro__txt{font-size:16px;line-height:1.6;color:rgba(245,245,243,.85);font-weight:300;margin:4px 0 0;}
.reto-scope .game-intro__btn{align-self:flex-start;margin-top:8px;padding:13px 24px;}
.reto-scope .game-modal__card{position:relative;max-width:460px;padding:34px 40px 30px;border:1px solid var(--hair-d2);background:var(--panel);}
.reto-scope .game-modal__txt{font-size:15px;line-height:1.65;color:rgba(245,245,243,.82);font-weight:300;margin:10px 0 0;}
.reto-scope .game-modal__close{position:absolute;top:14px;right:14px;background:transparent;border:0;color:rgba(245,245,243,.6);padding:4px;cursor:pointer;}
.reto-scope .game-modal__close:hover{color:#fff;}

/* ============================ V2 — ALARM (sober, editorial) ============================ */
.reto-scope .game-alarm{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:rgba(20,8,6,.9);backdrop-filter:blur(5px);animation:alarmIn .3s var(--ease-out);}
.reto-scope .is-fs .game-alarm{position:fixed;}
@keyframes alarmIn{from{opacity:0;}to{opacity:1;}}
.reto-scope .game-alarm__rule{width:100%;height:2px;background:var(--st-over);opacity:.55;animation:alarmRule 2.4s var(--ease-in-out) infinite;}
@keyframes alarmRule{0%,100%{opacity:.25;}50%{opacity:.7;}}
.reto-scope .game-alarm__card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:48px 52px;max-width:460px;margin:auto;}
.reto-scope .game-alarm__ic{width:62px;height:62px;border-radius:999px;border:1px solid var(--st-over);color:var(--st-over);display:flex;align-items:center;justify-content:center;animation:alarmPulse 1.8s var(--ease-in-out) infinite;}
@keyframes alarmPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,86,63,.4);}60%{box-shadow:0 0 0 12px rgba(192,86,63,0);}}
.reto-scope .game-alarm__t{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:.02em;color:#F5F5F3;text-transform:uppercase;}
.reto-scope .game-alarm__sub{font-size:14px;color:rgba(245,245,243,.7);}
.reto-scope .game-alarm__reason{display:flex;flex-direction:column;gap:4px;margin:8px 0 2px;padding:12px 22px;border:1px solid rgba(192,86,63,.4);background:rgba(192,86,63,.08);}
.reto-scope .game-alarm__reason span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.55);font-weight:600;}
.reto-scope .game-alarm__reason b{font-family:var(--font-mono);font-size:15px;color:#f0c4ba;font-weight:600;}
.reto-scope .game-alarm__restart{font-family:var(--font-mono);font-size:12px;color:rgba(245,245,243,.6);letter-spacing:.04em;margin-top:6px;}
.reto-scope .game-alarm__btn{margin-top:18px;padding:13px 26px;}
@media (prefers-reduced-motion: reduce){.reto-scope .game-alarm__rule, .reto-scope .game-alarm__ic{animation:none !important;}}

/* ============================ V3 — COST / BUDGET ============================ */
.reto-scope .cool-bay__cost{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--st-ok-lift);letter-spacing:.02em;}
.reto-scope .cool-slot__money{color:var(--reto-accent);font-weight:600;margin-left:auto;}
.reto-scope .cool-slot__stats{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.7);margin-top:2px;}
.reto-scope .cool-picker__money{color:#bcd3e8;font-weight:600;}

/* ============================ V3 — RACK SPEC SHEET ============================ */
.reto-scope .rack-sheet{position:relative;width:min(440px,92%);background:var(--panel);border:1px solid var(--hair-d2);border-top:3px solid var(--st-ok-lift);padding:30px 34px 28px;display:flex;flex-direction:column;gap:10px;animation:clearCard .38s var(--ease-out);}
.reto-scope .rack-sheet__name{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:26px;color:#F5F5F3;letter-spacing:-0.01em;margin-top:4px;}
.reto-scope .rack-sheet__dot{width:14px;height:14px;border-radius:3px;flex:none;}
.reto-scope .rack-sheet__dot.vbar-amber{background:var(--bus-amber);}
.reto-scope .rack-sheet__dot.vbar-cyan{background:var(--bus-cyan);}
.reto-scope .rack-sheet__dot.vbar-green{background:var(--bus-green);}
.reto-scope .rack-sheet__dot.vbar-multi{background:linear-gradient(135deg,var(--bus-amber),var(--bus-green),var(--bus-cyan));}
.reto-scope .rack-sheet__vendor{font-size:12px;color:rgba(245,245,243,.55);letter-spacing:.02em;margin-bottom:6px;}
.reto-scope .rack-sheet__specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-d);border:1px solid var(--hair-d);margin-bottom:6px;}
.reto-scope .rack-spec{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:4px;}
.reto-scope .rack-spec span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,243,.5);font-weight:500;}
.reto-scope .rack-spec b{font-family:var(--font-display-book);font-weight:500;font-size:20px;color:#F5F5F3;letter-spacing:-0.01em;}
.reto-scope .rack-sheet__lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,.55);font-weight:600;display:block;margin-bottom:8px;}
.reto-scope .rack-sheet__btns{display:flex;flex-wrap:wrap;gap:8px;}
.reto-scope .rack-place{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap;background:rgba(245,245,243,.05);border:1px solid var(--hair-d2);color:#F5F5F3;padding:9px 14px;border-radius:2px;font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all .15s var(--ease-out);border-left-width:3px;}
.reto-scope .rack-place em{font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:500;color:rgba(245,245,243,.55);}
.reto-scope .rack-place.v-amber{border-left-color:var(--bus-amber);}
.reto-scope .rack-place.v-cyan{border-left-color:var(--bus-cyan);}
.reto-scope .rack-place.v-green{border-left-color:var(--bus-green);}
.reto-scope .rack-place:hover{background:rgba(90,149,208,.16);border-color:var(--st-ok-lift);}
.reto-scope .rack-place.is-here{background:rgba(0,80,144,.32);border-color:var(--st-ok-lift);}
.reto-scope .rack-place.is-disabled{opacity:.32;cursor:not-allowed;border-left-color:var(--hair-d2);}
.reto-scope .rack-place.is-disabled:hover{background:rgba(245,245,243,.05);border-color:var(--hair-d2);}
.reto-scope .rack-place--tray{flex-direction:row;align-items:center;border-left-color:rgba(245,245,243,.3);color:rgba(245,245,243,.7);}

/* ============================ V4 — CAPACITY GAUGE / MISWIRE / SPECS ============================ */
.reto-scope .feed__gauge--cap .feed__fill{background:var(--st-ok-lift);}
.reto-scope .feed--over .feed__fill{background:var(--st-over);}
.reto-scope .feed--miswire .feed__fill{background:var(--st-under);}
.reto-scope .feed.feed--miswire{border-top-color:var(--st-under);}
.reto-scope .feed__status--miswire{color:var(--st-under);background:rgba(199,154,78,.16);}
.reto-scope .feed__delta--mis{color:var(--st-under);}
.reto-scope .feed__miswire{display:inline-flex;align-items:center;gap:6px;color:var(--st-under);font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.reto-scope .feed__miswire svg{flex:none;}
.reto-scope .hud-meter--cpu .hud-meter__v{color:#F5F5F3;}
.reto-scope .hud-meter--cpu .hud-meter__v.is-ok{color:var(--st-ok-lift);}

/* readable spec sheet table */
.reto-scope .rack-sheet__title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin-bottom:2px;}
.reto-scope .rack-sheet__glyph{display:inline-flex;color:var(--st-ok-lift);}
.reto-scope .rack-specs{margin:6px 0 4px;padding:0;border-top:1px solid var(--hair-d);}
.reto-scope .rack-specs__row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 2px;border-bottom:1px solid var(--hair-d);}
.reto-scope .rack-specs__row dt{font-size:12px;letter-spacing:.04em;color:rgba(245,245,243,.6);}
.reto-scope .rack-specs__row dd{margin:0;font-family:var(--font-display-book);font-weight:500;font-size:19px;color:#F5F5F3;letter-spacing:-0.01em;}
.reto-scope .rack-specs__cpu{color:var(--st-ok-lift) !important;}
.reto-scope .rack-specs__cost{color:#e9eff4 !important;font-family:var(--font-mono) !important;font-size:17px !important;font-weight:600 !important;}

/* Tutorial replay button */
.reto-scope .game-tourbtn{display:inline-flex;align-items:center;gap:7px;}
.reto-scope .game-tourbtn svg{opacity:.8;}

/* Guided tour / coachmarks */
/* The tour root MUST be pointer-events:none — otherwise the
   position:fixed;inset:0 wrapper hit-tests every click across the
   viewport and swallows them, even when its children have
   pointer-events:none. With the wrapper transparent to clicks,
   the explicit `pointer-events:auto` on .tour__card keeps Skip /
   Next clickable, and the highlighted UI underneath (rack chips,
   cooling slots) receives the player's taps during gated steps. */
.reto-scope .tour{position:fixed;inset:0;z-index:1200;pointer-events:none;}
.reto-scope .tour__block{position:absolute;inset:0;pointer-events:none;}
/* Waiting hint shown in place of Next during gated steps. Same
   slot as the Next button — primary blue dot pulses to signal
   the tutorial is paused on the player's action. */
.reto-scope .tour__waiting{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:rgba(245,245,243,.62);padding:11px 4px;}
.reto-scope .tour__waiting-dot{width:8px;height:8px;border-radius:50%;background:var(--st-ok-lift);box-shadow:0 0 10px var(--st-ok-lift);animation:tourPulse 1.2s var(--ease-in-out) infinite;}
@keyframes tourPulse{0%,100%{opacity:.45;transform:scale(.9);}50%{opacity:1;transform:scale(1.15);}}
@media (prefers-reduced-motion: reduce){.reto-scope .tour__waiting-dot{animation:none;}}
.reto-scope .tour__spot{position:fixed;border:2px solid var(--st-ok-lift);border-radius:3px;box-shadow:0 0 0 9999px rgba(6,13,22,.82);pointer-events:none;transition:top .28s var(--ease-out),left .28s var(--ease-out),width .28s var(--ease-out),height .28s var(--ease-out);}
/* z-index 1300 — above the lifted .game-modal (1250) so Siguiente
   stays clickable on top of an open rack sheet during step 2/3. */
.reto-scope .tour__card{position:fixed;width:340px;max-width:calc(100vw - 28px);background:var(--panel);border:1px solid var(--st-ok-lift);border-top:3px solid var(--st-ok-lift);padding:20px 22px 18px;box-shadow:0 18px 44px rgba(0,0,0,.55);animation:clearCard .3s var(--ease-out);pointer-events:auto;z-index:1300;}
.reto-scope .tour__step{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--st-ok-lift);font-weight:600;}
.reto-scope .tour__title{font-family:var(--font-display);font-weight:700;font-size:21px;color:#F5F5F3;letter-spacing:-0.01em;margin:6px 0 8px;}
.reto-scope .tour__body{font-size:14px;line-height:1.6;font-weight:300;color:rgba(245,245,243,.82);margin:0 0 16px;}
.reto-scope .tour__actions{display:flex;justify-content:space-between;align-items:center;gap:14px;}
.reto-scope .tour__skip{background:transparent;border:0;color:rgba(245,245,243,.6);font-size:12px;letter-spacing:.06em;cursor:pointer;padding:8px 4px;}
.reto-scope .tour__skip:hover{color:#fff;}
.reto-scope .tour__next{padding:11px 20px;font-size:13px;}
@media (prefers-reduced-motion: reduce){.reto-scope .tour__spot, .reto-scope .tour__card{transition:none;animation:none;}}

/* Harmonics readout */
.reto-scope .harm{border-top:1px solid var(--hair-d);padding-top:12px;display:flex;flex-direction:column;gap:9px;}
.reto-scope .harm__hd{display:flex;justify-content:space-between;align-items:center;}
.reto-scope .harm__limit{font-family:var(--font-mono);font-size:10px;color:rgba(245,245,243,.45);letter-spacing:.02em;}
.reto-scope .harm__chips{display:flex;flex-wrap:wrap;gap:6px;}
.reto-scope .harm__chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:rgba(245,245,243,.5);background:rgba(245,245,243,.05);border:1px solid var(--hair-d);border-radius:999px;padding:3px 9px;transition:all .18s var(--ease-out);}
.reto-scope .harm__chip b{font-weight:700;color:rgba(245,245,243,.7);}
.reto-scope .harm__chip.is-on{color:#cfe3f5;border-color:rgba(90,149,208,.45);background:rgba(0,80,144,.22);}
.reto-scope .harm__chip.is-on b{color:#fff;}
.reto-scope .harm__chip.is-bad{color:#f0c4ba;border-color:var(--st-over);background:rgba(192,86,63,.2);animation:harmPulse 1.4s var(--ease-in-out) infinite;}
.reto-scope .harm__chip.is-bad b{color:#fff;}
@keyframes harmPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,86,63,.5);}60%{box-shadow:0 0 0 6px rgba(192,86,63,0);}}
@media (prefers-reduced-motion: reduce){.reto-scope .harm__chip.is-bad{animation:none;}}

/* Software platform badge + mixed-platform state */
.reto-scope .plat-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(245,245,243,.7);background:rgba(245,245,243,.08);border:1px solid var(--hair-d2);border-radius:999px;padding:2px 8px;margin-left:8px;}
.reto-scope .plat-badge.is-bad{color:#f0c4ba;border-color:var(--st-over);background:rgba(192,86,63,.2);}
.reto-scope .feed--mixplat{border-top-color:var(--st-over);}
.reto-scope .feed--mixplat .feed__fill{background:var(--st-over);}
.reto-scope .feed__status--mixplat{color:#f0c4ba;background:rgba(192,86,63,.22);}

/* Project schedule (PM) readout */
.reto-scope .sched{border-top:1px solid var(--hair-d);padding-top:12px;display:flex;flex-direction:column;gap:9px;}
.reto-scope .sched__total{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--st-ok-lift);letter-spacing:.02em;}
.reto-scope .sched__total.is-bad{color:var(--st-over);}
.reto-scope .sched__bar{position:relative;display:flex;height:18px;background:rgba(245,245,243,.07);border:1px solid var(--hair-d);overflow:hidden;}
.reto-scope .sched__seg{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:600;color:#0a1623;transition:width .35s var(--ease-out);min-width:0;overflow:hidden;}
.reto-scope .sched__seg--lead{background:var(--st-ok-lift);}
.reto-scope .sched__seg--comm{background:#8FB8E0;}
.reto-scope .sched__seg--comm.is-bad{background:var(--st-over);color:#fff;}
.reto-scope .sched__deadline{position:absolute;top:-3px;bottom:-3px;width:2px;background:#F5F5F3;transform:translateX(-1px);}
.reto-scope .sched__legend{display:flex;gap:16px;font-size:10px;color:rgba(245,245,243,.55);letter-spacing:.02em;}
.reto-scope .sched__legend span{display:inline-flex;align-items:center;gap:5px;}
.reto-scope .sched__dot{width:8px;height:8px;border-radius:2px;display:inline-block;}
.reto-scope .sched__dot--lead{background:var(--st-ok-lift);}
.reto-scope .sched__dot--comm{background:#8FB8E0;}
@media (prefers-reduced-motion: reduce){.reto-scope .sched__seg{transition:none;}}

/* =========================================================
   Rotate-device overlay — portrait phones / narrow viewports
   ========================================================= */
/* Hidden by default; the orientation/size query below turns it on.
   Sits above ALL game chrome (z-index 999999) so even the boot-up
   loading screen yields to it. The element is markup in
   El Reto Aguilera.html so it paints from the first frame, before
   the Babel/React bundle is fully transpiled. */
.reto-scope .reto-rotate{
  display:none;
}
/* :lang(es) on <html> shows the Spanish copy; :lang(en) shows English.
   The HTML's <html lang="es"> means Spanish is the default; if the
   user switches the language inside the game (RetoLangProvider sets
   document.documentElement.lang on mount), the overlay swaps too. */
.reto-scope html:lang(es) .reto-rotate__title[lang="en"], .reto-scope html:lang(es) .reto-rotate__body[lang="en"]{display:none;}
.reto-scope html:lang(en) .reto-rotate__title[lang="es"], .reto-scope html:lang(en) .reto-rotate__body[lang="es"]{display:none;}

/* Show on portrait orientation OR very narrow viewports. The width
   ceiling catches Android phones in awkward zooms; orientation catches
   typical iOS / Android portrait holds. Hides immediately on rotate
   (CSS reactive — no JS listener needed). */
@media (orientation: portrait) and (max-width: 960px),
       (max-width: 600px) and (max-height: 720px){
  .reto-scope .reto-rotate{
    display:flex;
    position:fixed;inset:0;
    z-index:999999;
    background:#0a1623;
    /* Subtle gradient so the overlay reads as intentional surface
       rather than a missing-page state. */
    background-image:
      radial-gradient(circle at 30% 20%, rgba(0,80,144,0.18), transparent 55%),
      radial-gradient(circle at 70% 80%, rgba(0,80,144,0.10), transparent 55%);
    align-items:center;justify-content:center;
    padding:32px;
  }
  .reto-scope .reto-rotate__inner{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    gap:18px;
    max-width:320px;
    color:#F5F5F3;
  }
  /* Rotate icon — pulsing tilt so users see the "rotate" intent
     without having to read. ~1.8s cycle, eases into 25° and back. */
  .reto-scope .reto-rotate__ic{
    color:#5A95D0;
    animation:reto-rotate-anim 1.8s ease-in-out infinite;
    transform-origin:50% 50%;
  }
  .reto-scope .reto-rotate__title{
    font-family:var(--font-display, "Futura"), -apple-system, sans-serif;
    font-weight:500;
    font-size:22px;line-height:1.2;
    letter-spacing:-0.01em;
    color:#F5F5F3;
    margin:0;
  }
  .reto-scope .reto-rotate__body{
    font-family:-apple-system, "Inter", sans-serif;
    font-size:13px;line-height:1.5;
    color:rgba(245,245,243,0.7);
    margin:0;
  }
}
@keyframes reto-rotate-anim{
  0%, 100% { transform:rotate(0deg); }
  45%      { transform:rotate(-25deg); }
  55%      { transform:rotate(-25deg); }
}
/* Honour reduced-motion — replace the tilt with a soft fade. */
@media (prefers-reduced-motion: reduce){
  .reto-scope .reto-rotate__ic{
    animation:reto-rotate-fade 2s ease-in-out infinite;
  }
  .reto-scope @keyframes reto-rotate-fade{
    0%, 100% { opacity:1; }
    50%      { opacity:.6; }
  }
}