/* WAYRUST-FUNS / SECRET DOOR HUNT */
.way-secret-hint{
  --hint-alpha:.12;
  position:relative;
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-left:10px;
  border:1px solid rgba(0,245,212,.08);
  border-radius:9px;
  background:rgba(0,245,212,.018);
  color:rgba(215,255,250,var(--hint-alpha));
  font:800 9px/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.08em;
  cursor:help;
  transition:.35s ease;
  overflow:hidden;
  vertical-align:middle;
}
.way-secret-hint::before{content:attr(data-node);position:absolute;top:4px;left:6px;font-size:5px;color:rgba(0,245,212,.18)}
.way-secret-hint::after{content:attr(data-digit);font-size:12px;filter:blur(1.4px);transition:.35s ease}
.way-secret-hint:hover,.way-secret-hint:focus-visible{border-color:rgba(0,245,212,.42);background:rgba(0,245,212,.07);box-shadow:0 0 24px rgba(0,245,212,.13),inset 0 0 14px rgba(0,245,212,.05);color:#d9fff9}
.way-secret-hint:hover::after,.way-secret-hint:focus-visible::after{filter:none;text-shadow:0 0 14px rgba(0,245,212,.85)}
.way-secret-hint:focus-visible{outline:2px solid rgba(0,245,212,.5);outline-offset:3px}

/* Make the door closer to the supplied cinematic reference. */
.hack-stage{background:radial-gradient(circle at 52% 48%,rgba(44,52,50,.48),rgba(2,5,6,.97) 61%),linear-gradient(120deg,#0a0f10,#020405 70%)}
.hack-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 28%,transparent 72%,rgba(0,0,0,.48));}
.hack-side-panel{position:absolute;left:28px;top:86px;width:250px;z-index:22;color:#fff;pointer-events:none}
.hack-side-panel .side-kicker{display:block;color:var(--cyan);font:800 8px ui-monospace,monospace;letter-spacing:.2em;margin-bottom:12px}
.hack-side-panel h3{margin:0;font-size:clamp(28px,3.3vw,48px);line-height:.9;text-transform:uppercase;letter-spacing:-.045em;text-shadow:0 12px 30px rgba(0,0,0,.65)}
.hack-side-panel h3 em{font-style:normal;color:var(--cyan);text-shadow:0 0 24px rgba(0,245,212,.22)}
.hack-side-panel p{margin:13px 0 16px;color:#788486;font-size:10px;line-height:1.55;max-width:225px}
.hack-side-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hack-side-panel li{display:flex;align-items:center;gap:8px;color:#9ca7a8;font:700 8px ui-monospace,monospace;letter-spacing:.05em}
.hack-side-panel li i{width:7px;height:7px;border:1px solid rgba(0,245,212,.55);border-radius:2px;box-shadow:0 0 9px rgba(0,245,212,.22)}
.hack-side-tip{margin-top:18px;padding:12px 13px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(4,8,8,.58);backdrop-filter:blur(10px);color:#6e7a7b;font:700 7px/1.5 ui-monospace,monospace;letter-spacing:.05em}
.hack-side-tip b{display:block;color:#b8c4c5;margin-bottom:4px}
.hack-side-panel .way-secret-hint{position:absolute;left:194px;top:12px;transform:scale(.8);pointer-events:auto}

.hack-stage.approaching .hack-side-panel{opacity:.45;transform:translateX(-10px);transition:.65s ease}
.hack-stage.success .hack-side-panel{opacity:0;transform:translateX(-20px)}

/* Four-digit screen: slightly wider and more reference-like. */
.lock-screen strong{letter-spacing:.3em;font-size:24px}
.lock-keyboard{grid-template-columns:repeat(3,1fr)}
.lock-keyboard button{height:46px}

@media(max-width:1050px){
  .hack-side-panel{left:18px;width:210px;transform:scale(.9);transform-origin:left top}
  .door-camera{left:48%}
}
@media(max-width:800px){
  .hack-side-panel{top:22px;left:16px;width:190px;transform:scale(.72);transform-origin:left top}
  .hack-side-panel p,.hack-side-panel ul,.hack-side-tip{display:none}
  .hack-side-panel .way-secret-hint{left:142px;top:0}
  .door-camera{left:50%}
}