/* PUNTO CIEGO 30 · v24.51 clean-room polish
   The mechanic is the visual: acquire rhythm, lose the signal, infer arrival. */
:root{
  --blind:#ffd84a;
  --blind-soft:#fff1a8;
  --blind-deep:#9a7400;
  --blind-ink:#0c0c09;
  --blind-panel:#12120d;
  --blind-track-left:11%;
  --blind-track-right:11%;
}

/* Hub identity ------------------------------------------------------------- */
.clandestine-game--blind{cursor:pointer}
.clandestine-cover--blind{
  --cover-accent:#ffd84a;
  background:
    radial-gradient(circle at 70% 28%,rgba(255,216,74,.19),transparent 26%),
    linear-gradient(140deg,#111109 0%,#25210d 56%,#715500 100%);
}
.clandestine-cover--blind>strong{color:#fff7cf!important;max-width:62%;font-size:clamp(34px,10.4vw,49px)!important;letter-spacing:-.07em}
.blind-cover-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blind-cover-track{position:absolute;left:28px;right:26px;bottom:43px;height:2px;background:rgba(255,245,198,.18)}
.blind-cover-track::before{content:'';position:absolute;left:0;top:-1px;width:46%;height:4px;border-radius:999px;background:linear-gradient(90deg,#fff0a0,#ffd84a);box-shadow:0 0 16px rgba(255,216,74,.45);animation:blindCoverTrace 3.4s ease-in-out infinite}
.blind-cover-target{position:absolute;right:44px;bottom:22px;width:1px;height:72px;background:linear-gradient(180deg,transparent,rgba(255,216,74,.72),transparent);box-shadow:0 0 17px rgba(255,216,74,.36)}
.blind-cover-signal{position:absolute;left:28px;bottom:36px;width:13px;height:13px;border:2px solid #fff3b0;border-radius:50%;box-shadow:0 0 0 5px rgba(255,216,74,.08),0 0 18px rgba(255,216,74,.42);animation:blindCoverSignal 3.4s ease-in-out infinite}
.blind-cover-signal::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#ffd84a}
.blind-cover-signal::after{display:none}
@keyframes blindCoverSignal{0%{left:28px;opacity:1}34%{opacity:1}54%{left:54%;opacity:0}100%{left:54%;opacity:0}}
@keyframes blindCoverTrace{0%{width:0;opacity:.2}34%{width:34%;opacity:1}54%{width:54%;opacity:0}100%{width:54%;opacity:0}}
.clandestine-game--blind .clandestine-play{background:linear-gradient(135deg,#ffd84a,#fff09a)!important;color:#211900!important;border-color:rgba(255,242,163,.55)!important;box-shadow:0 12px 28px rgba(255,216,74,.18)!important}

/* Shell / loading ---------------------------------------------------------- */
.blind-dialog{background:#0c0c09;color:#fff8da}
.blind-shell{background:radial-gradient(circle at 50% -12%,rgba(255,216,74,.12),transparent 38%),#0d0d09}
.blind-head small,.blind-ranking small{color:var(--blind)}
.blind-game-card,.blind-ranking{max-width:540px;margin:0 auto 20px}
.operation-loading--blind{--operation-accent:#ffd84a;background:radial-gradient(circle at 50% 40%,rgba(255,216,74,.12),transparent 30%),linear-gradient(145deg,#111109,#27220d 55%,#4d3a00)}
.operation-loading--blind .operation-loading__visual{width:176px;height:146px}
.operation-loading--blind .operation-loading__visual>i{width:118px;height:1px;background:#ffd84a;opacity:.32;box-shadow:0 0 18px rgba(255,216,74,.42)}
.operation-loading--blind .operation-loading__spinner{width:96px;height:96px;border:1px solid rgba(255,216,74,.16);border-radius:50%}
.operation-loading--blind .operation-loading__spinner::before,.operation-loading--blind .operation-loading__spinner::after{content:'';position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);border-radius:50%}
.operation-loading--blind .operation-loading__spinner::before{width:52px;height:52px;border:1px dashed rgba(255,216,74,.44);animation:blindLoaderSpin 3s linear infinite}
.operation-loading--blind .operation-loading__spinner::after{width:7px;height:7px;background:#ffd84a;box-shadow:0 0 14px rgba(255,216,74,.75)}
@keyframes blindLoaderSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Fullscreen game ---------------------------------------------------------- */
body.blind-playing .blind-dialog{position:relative;width:100%;max-width:none;height:100%;min-height:100%;margin:0;padding:0;border:0;border-radius:0;overflow:hidden}
body.blind-playing .blind-shell{position:relative;width:100%;height:100%;min-height:0;padding:0;overflow:hidden}
body.blind-playing .blind-game-card{position:absolute;inset:0;width:100%;max-width:none!important;height:100%;margin:0!important;border:0!important;border-radius:0!important}
body.blind-playing .blind-head,body.blind-playing .blind-ranking,body.blind-playing #blindMessage{display:none!important}
.blind-game{
  position:absolute;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  box-sizing:border-box;
  padding:14px;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,216,74,.055),transparent 34%),
    linear-gradient(180deg,#0b0b09 0%,#11110c 58%,#090906 100%);
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;
}
.blind-game[hidden]{display:none!important}
.blind-game::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.1),#000 26%,#000 76%,transparent)}
.game-exit--blind{z-index:30}
.blind-practice-badge{position:absolute;z-index:25;top:17px;right:14px;padding:6px 8px;border:1px solid rgba(255,216,74,.16);border-radius:999px;background:rgba(12,12,9,.72);color:#ddca79;font-size:7px;font-weight:950;letter-spacing:.12em;backdrop-filter:blur(8px)}

.blind-livebar{position:relative;z-index:8;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,430px);margin:0 auto;padding-left:48px}
.blind-livebar>div{min-height:42px;padding:7px 10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(17,17,13,.58);backdrop-filter:blur(8px)}
.blind-livebar__round{text-align:left}.blind-livebar__score{text-align:right}
.blind-livebar small{display:block;color:rgba(255,244,194,.42);font-size:8px;font-weight:900;line-height:1;letter-spacing:.14em}
.blind-livebar strong{display:block;margin-top:5px;color:#f9f4df;font-size:16px;font-weight:950;line-height:1;font-variant-numeric:tabular-nums}
.blind-livebar__score strong{color:var(--blind-soft)}

.blind-stage{position:relative;z-index:5;min-height:0;display:grid;grid-template-rows:auto minmax(190px,1fr) auto;align-items:center;gap:clamp(16px,3dvh,26px);width:min(100%,560px);margin:0 auto;padding:clamp(22px,4dvh,38px) 0 clamp(8px,1.6dvh,14px)}
.blind-cue{text-align:center;min-height:34px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.blind-cue strong{color:#fff8df;font-size:clamp(15px,4.3vw,18px);font-weight:950;line-height:1;letter-spacing:.055em}

.blind-field{
  --blind-travel:0%;
  --blind-visible:1;
  --blind-tap-x:50%;
  position:relative;width:min(96vw,540px);height:clamp(210px,36dvh,320px);min-height:210px;align-self:center;
  border:1px solid rgba(255,216,74,.11);border-radius:24px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(255,216,74,.045),transparent 52%),linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.005));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -70px 110px rgba(0,0,0,.22),0 22px 54px rgba(0,0,0,.25);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.blind-field__grid{position:absolute;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(255,216,74,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,216,74,.023) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(circle at 50% 48%,#000,transparent 78%)}
.blind-field::before{content:'';position:absolute;left:var(--blind-track-left);right:var(--blind-track-right);top:50%;height:84px;transform:translateY(-50%);border-radius:19px;border:1px solid rgba(255,216,74,.055);background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,216,74,.016) 48%,rgba(255,255,255,.008));pointer-events:none}

.blind-track{position:absolute;z-index:4;left:var(--blind-track-left);right:var(--blind-track-right);top:50%;height:44px;transform:translateY(-50%)}
.blind-track__base{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,rgba(255,247,210,.16),rgba(255,247,210,.085));box-shadow:0 0 0 1px rgba(255,216,74,.035)}
.blind-track__base::before{content:'';position:absolute;inset:-5px 0;border-radius:999px;background:linear-gradient(90deg,rgba(255,216,74,.025),transparent 35%,rgba(255,216,74,.02));filter:blur(4px)}
.blind-track__trace{position:absolute;left:0;top:50%;height:4px;width:var(--blind-travel);transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,#ffe98a 0%,#ffd84a 72%,#fff6c8 100%);box-shadow:0 0 16px rgba(255,216,74,.42);opacity:var(--blind-visible);transform-origin:left center;transition:opacity .04s linear,filter .08s linear;overflow:visible}
.blind-track__trace::after{content:'';position:absolute;inset:-4px 0;border-radius:inherit;background:inherit;filter:blur(7px);opacity:.25}
.blind-signal{position:absolute;z-index:7;left:var(--blind-travel);top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border:1px solid rgba(255,244,185,.88);border-radius:50%;opacity:var(--blind-visible);box-shadow:0 0 0 6px rgba(255,216,74,.055),0 0 24px rgba(255,216,74,.45);transition:opacity .04s linear}
.blind-signal i{position:absolute;inset:4px;border-radius:50%;background:#ffd84a;box-shadow:0 0 10px rgba(255,216,74,.75)}
.blind-signal::before,.blind-signal::after{content:'';position:absolute;inset:-9px;border:1px solid rgba(255,216,74,.16);border-radius:50%;animation:blindSignalRing 1.1s ease-out infinite}
.blind-signal::after{animation-delay:.36s}
@keyframes blindSignalRing{0%{transform:scale(.45);opacity:.75}100%{transform:scale(1.55);opacity:0}}
.blind-node{position:absolute;z-index:6;top:50%;width:58px;height:82px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.blind-node--start{left:calc(var(--blind-track-left) - 29px)}
.blind-node--target{right:calc(var(--blind-track-right) - 29px)}
.blind-node>i{position:relative;display:block;width:28px;height:28px;border-radius:50%;box-sizing:border-box}
.blind-node--start>i{border:1px solid rgba(255,216,74,.38);box-shadow:0 0 0 6px rgba(255,216,74,.03)}
.blind-node--start>i::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#ffd84a;box-shadow:0 0 12px rgba(255,216,74,.58)}
.blind-node--start>i::after{content:'';position:absolute;left:50%;top:50%;width:38px;height:1px;transform:translate(-50%,-50%) rotate(-34deg);background:linear-gradient(90deg,transparent,rgba(255,216,74,.3),transparent)}
.blind-node--target>i{border:2px solid rgba(255,239,163,.78);box-shadow:0 0 0 5px rgba(255,216,74,.045),0 0 18px rgba(255,216,74,.12)}
.blind-node--target>i::before,.blind-node--target>i::after{content:'';position:absolute;left:50%;top:50%;background:#ffd84a;transform:translate(-50%,-50%)}
.blind-node--target>i::before{width:2px;height:38px}.blind-node--target>i::after{width:38px;height:2px}
.blind-node span{color:rgba(255,242,187,.37);font-size:6.5px;font-weight:950;letter-spacing:.17em}

/* No visual element tracks the hidden signal after fade-out. */
.blind-field[data-phase="fading"] .blind-track__trace{filter:saturate(.72);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.3) 94%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.3) 94%,transparent 100%)}
.blind-field[data-phase="fading"] .blind-signal{filter:saturate(.72)}
.blind-field[data-phase="hidden"]{border-color:rgba(255,216,74,.075);background:radial-gradient(circle at 50% 50%,rgba(255,216,74,.02),transparent 52%),linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.003))}
.blind-field[data-phase="hidden"] .blind-track__trace,.blind-field[data-phase="hidden"] .blind-signal{opacity:0!important}
.blind-field[data-phase="ready"] .blind-signal{opacity:.68}
.blind-field[data-phase="ready"] .blind-track__trace{opacity:.42;width:0}

.blind-reveal{position:absolute;z-index:12;left:var(--blind-track-left);right:var(--blind-track-right);top:50%;height:70px;transform:translateY(-50%);pointer-events:none;overflow:visible}
.blind-reveal[hidden]{display:none!important}
.blind-reveal>i,.blind-reveal>b{position:absolute;top:50%;width:2px;height:46px;transform:translate(-50%,-50%);border-radius:999px}
.blind-reveal>i{left:100%;background:#ffd84a;box-shadow:0 0 14px rgba(255,216,74,.5)}
.blind-reveal>b{left:var(--blind-tap-x);background:#fff;box-shadow:0 0 12px rgba(255,255,255,.28)}
.blind-reveal>i::before,.blind-reveal>b::before{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(255,255,255,.04)}
.blind-reveal>i{color:#ffd84a}.blind-reveal>b{color:#fff}
.blind-reveal span{position:absolute;left:50%;top:-18px;transform:translateX(-50%);color:currentColor;font-size:6.5px;font-weight:950;letter-spacing:.13em;white-space:nowrap}

.blind-feedback{position:absolute;z-index:14;left:50%;top:22px;transform:translateX(-50%) translateY(-8px);min-width:154px;padding:10px 14px 11px;border:1px solid rgba(255,216,74,.12);border-radius:14px;background:rgba(10,10,8,.82);backdrop-filter:blur(9px);text-align:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease,border-color .16s ease}
.blind-feedback.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.blind-feedback small{display:block;color:rgba(255,244,194,.42);font-size:6.5px;font-weight:950;letter-spacing:.14em}
.blind-feedback strong{display:block;margin-top:4px;color:#fff7d5;font-size:21px;font-weight:950;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.blind-feedback span{display:block;margin-top:4px;color:#ffd84a;font-size:7px;font-weight:950;letter-spacing:.13em}
.blind-feedback[data-result="perfect"]{border-color:rgba(255,232,128,.34);background:rgba(28,24,8,.87)}
.blind-feedback[data-result="late"] span{color:rgba(255,255,255,.72)}

.blind-tap-hint{min-height:34px;display:flex;align-items:center;justify-content:center;gap:9px;color:rgba(255,244,202,.38);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.blind-tap-hint i{position:relative;width:18px;height:18px;border:1px solid currentColor;border-radius:50%}
.blind-tap-hint i::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:currentColor}
.blind-tap-hint span{font-size:8px;font-weight:950;letter-spacing:.16em}
.blind-field[data-phase="visible"]~.blind-tap-hint,.blind-field[data-phase="fading"]~.blind-tap-hint{opacity:.44}
.blind-field[data-phase="hidden"]~.blind-tap-hint{opacity:1;color:rgba(255,232,143,.7);transform:translateY(-1px)}
.blind-field[data-phase="feedback"]~.blind-tap-hint{opacity:0;transform:translateY(2px)}

.blind-field.is-round-start{animation:blindRoundWake .34s ease-out}
@keyframes blindRoundWake{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 22px 54px rgba(0,0,0,.25)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 22px 54px rgba(0,0,0,.25),0 0 0 1px rgba(255,216,74,.12),0 0 28px rgba(255,216,74,.08)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 22px 54px rgba(0,0,0,.25)}}
.blind-field.is-impact::before{animation:blindImpactWash .38s ease-out}
@keyframes blindImpactWash{0%{background-color:rgba(255,216,74,.09)}100%{background-color:transparent}}

/* Results / ranking -------------------------------------------------------- */
.operation-result--blind{--result-accent:#ffd84a;background:radial-gradient(circle at 50% 38%,rgba(255,216,74,.12),transparent 31%),linear-gradient(180deg,#121109,#0b0b08)!important}
.operation-result--blind .operation-result__mark{width:34px;height:34px;border:1px solid rgba(255,216,74,.44);border-radius:50%;font-size:16px;color:#ffd84a!important}
.operation-result--blind .btn--accent{background:linear-gradient(135deg,#ffd84a,#fff09a)!important;color:#211900!important}
.blind-result-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,330px);margin:10px auto 0}
.blind-result-breakdown span{display:grid;gap:3px;padding:9px 5px;border:1px solid rgba(255,216,74,.08);border-radius:10px;background:rgba(255,216,74,.035);text-align:center}
.blind-result-breakdown small{color:rgba(255,244,194,.42);font-size:6.5px;font-weight:950;letter-spacing:.12em}
.blind-result-breakdown b{color:#fff7d7;font-size:12px;font-variant-numeric:tabular-nums}
.blind-ranking .arcade-ranking__head>span{background:rgba(255,216,74,.1);color:#f4d65c}

@media(max-width:390px){
  :root{--blind-track-left:12.5%;--blind-track-right:12.5%}
  .blind-field{width:calc(100vw - 20px);border-radius:21px}
  .blind-node{width:50px}.blind-node--start{left:calc(var(--blind-track-left) - 25px)}.blind-node--target{right:calc(var(--blind-track-right) - 25px)}
}
@media(max-height:720px){
  .blind-stage{grid-template-rows:auto minmax(176px,1fr) auto;gap:12px;padding-top:14px}
  .blind-cue{min-height:30px}.blind-cue strong{font-size:15px}
  .blind-field{height:clamp(176px,32dvh,235px);min-height:176px}
  .blind-livebar>div{min-height:38px;padding-block:6px}.blind-livebar strong{font-size:14px}
}
@media(max-height:610px){
  .blind-stage{grid-template-rows:auto minmax(150px,1fr) auto;gap:8px;padding-top:8px}
  .blind-cue{min-height:26px}.blind-cue strong{font-size:14px}
  .blind-field{height:29dvh;min-height:150px;border-radius:18px}
  .blind-field::before{height:64px}
  .blind-node{height:64px}.blind-node>i{width:23px;height:23px}.blind-node span{font-size:5.8px}
  .blind-feedback{top:10px;padding:8px 11px}.blind-feedback strong{font-size:18px}
  .blind-tap-hint{min-height:26px}.blind-tap-hint span{font-size:6.5px}
}
@media(prefers-reduced-motion:reduce){
  .blind-cover-track::before,.blind-cover-signal,.operation-loading--blind .operation-loading__spinner::before,.blind-signal::before,.blind-signal::after,.blind-field.is-round-start{animation:none!important}
  .blind-feedback,.blind-tap-hint{transition:none!important}
}