/* INVIZBL3 escape room layer. True black, true white, grayscale. */
:root {
  --er-black:#000;
  --er-ink:#030303;
  --er-panel:#0a0a0a;
  --er-card:#111;
  --er-card-2:#171717;
  --er-line:#343434;
  --er-line-soft:#202020;
  --er-text:#f6f6f6;
  --er-muted:#a9a9a9;
  --er-dim:#696969;
  --er-white:#fff;
  --er-radius:28px;
  --er-radius-sm:18px;
  --er-shadow:0 34px 90px rgba(0,0,0,.58);
  --er-focus:0 0 0 3px rgba(255,255,255,.22);
}
.escape-wrap {
  width:min(1560px, calc(100vw - 32px));
  margin:0 auto;
}
.escape-hero {
  position:relative;
  overflow:hidden;
  border:1px solid var(--er-line);
  border-radius:var(--er-radius);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.11), transparent 28%),
    linear-gradient(135deg, #161616, #050505 70%);
  box-shadow:var(--er-shadow);
  padding:clamp(28px, 5vw, 72px);
  margin:clamp(18px, 4vw, 48px) auto;
}
.escape-hero:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:linear-gradient(90deg, #fff 1px, transparent 1px), linear-gradient(#fff 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, black, transparent 72%);
}
.escape-hero > * { position:relative; z-index:1; }
.escape-kicker,
.escape-room-tag,
.escape-micro {
  letter-spacing:.23em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--er-muted);
  font-weight:700;
}
.escape-hero h1,
.escape-room-title {
  margin:.18em 0 .22em;
  font-size:clamp(3.2rem, 9vw, 9rem);
  line-height:.88;
  letter-spacing:-.08em;
  color:var(--er-white);
  text-wrap:balance;
}
.escape-lead {
  max-width:980px;
  color:#d9d9d9;
  font-size:clamp(1.05rem, 2vw, 1.45rem);
  line-height:1.55;
}
.escape-actions,
.escape-actions-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:24px;
}
.escape-btn,
.escape-btn:visited,
button.escape-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:999px;
  background:#f7f7f7;
  color:#050505;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  touch-action:manipulation;
}
.escape-btn:hover,
button.escape-btn:hover { transform:translateY(-1px); }
.escape-btn.secondary,
button.escape-btn.secondary {
  background:#151515;
  color:#f7f7f7;
  border-color:#424242;
}
.escape-btn.ghost,
button.escape-btn.ghost {
  background:transparent;
  color:#f7f7f7;
  border-color:#2f2f2f;
}
.escape-btn:focus-visible,
.escape-object:focus-visible,
.escape-choice:focus-visible,
.escape-door-pad:focus-visible,
.escape-slider input:focus-visible,
.escape-final input:focus-visible { outline:none; box-shadow:var(--er-focus); }
.escape-notice {
  border:1px solid #353535;
  border-radius:var(--er-radius-sm);
  padding:16px 18px;
  background:linear-gradient(180deg, #151515, #090909);
  color:#dcdcdc;
}
.escape-hub-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin:32px 0 48px;
}
.escape-card {
  display:flex;
  min-height:360px;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--er-line);
  border-radius:var(--er-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    #090909;
  box-shadow:0 20px 60px rgba(0,0,0,.42);
  padding:28px;
}
.escape-card h2 { margin:.2em 0; font-size:clamp(1.7rem, 3vw, 3rem); line-height:.96; letter-spacing:-.04em; }
.escape-card p { color:#bdbdbd; line-height:1.55; }
.escape-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.escape-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #333;
  border-radius:999px;
  padding:8px 10px;
  color:#c9c9c9;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.escape-progress-mini {
  height:8px;
  border-radius:999px;
  background:#050505;
  border:1px solid #2c2c2c;
  overflow:hidden;
}
.escape-progress-mini span { display:block; height:100%; width:var(--p,0%); background:linear-gradient(90deg, #7a7a7a, #fff); }
.escape-room {
  width:min(1640px, calc(100vw - 28px));
  margin:0 auto 60px;
}
.escape-room-head {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:stretch;
  margin:clamp(18px, 4vw, 46px) 0 28px;
}
.escape-room-head .escape-panel { min-height:360px; }
.escape-panel {
  border:1px solid var(--er-line);
  border-radius:var(--er-radius);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(180deg, #151515, #060606);
  box-shadow:var(--er-shadow);
  padding:clamp(22px, 3vw, 42px);
}
.escape-room-title { font-size:clamp(3rem, 7vw, 7.2rem); }
.escape-status-box {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
}
.escape-progress {
  display:grid;
  gap:10px;
}
.escape-progress-bar {
  height:12px;
  border-radius:999px;
  border:1px solid #333;
  background:#030303;
  overflow:hidden;
}
.escape-progress-bar span { display:block; width:var(--progress,0%); height:100%; background:linear-gradient(90deg, #555, #fff); transition:width .28s ease; }
.escape-status {
  min-height:96px;
  border:1px solid #2f2f2f;
  border-radius:22px;
  padding:18px;
  color:#dfdfdf;
  background:#080808;
  line-height:1.5;
}
.escape-status.good { border-color:#666; background:#111; }
.escape-stage {
  display:grid;
  gap:22px;
}
.escape-stage-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.escape-stage-grid.two { grid-template-columns:1fr 1fr; }
.escape-console {
  border:1px solid #303030;
  border-radius:var(--er-radius);
  background:linear-gradient(180deg, #121212, #050505);
  padding:clamp(18px, 2.5vw, 34px);
}
.escape-console h2,
.escape-console h3 { margin:.1em 0 .6em; letter-spacing:-.035em; }
.escape-object,
.escape-choice,
.escape-card-button,
.escape-door-pad {
  width:100%;
  min-height:56px;
  border:1px solid #343434;
  border-radius:18px;
  background:linear-gradient(180deg, #181818, #070707);
  color:#f5f5f5;
  text-align:left;
  padding:16px;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.escape-object:hover,
.escape-choice:hover,
.escape-card-button:hover,
.escape-door-pad:hover { transform:translateY(-1px); border-color:#7b7b7b; }
.escape-object[aria-pressed="true"],
.escape-choice.selected,
.escape-choice.correct,
.escape-card-button.correct,
.escape-door-pad.collected {
  border-color:#ececec;
  background:linear-gradient(180deg, #2d2d2d, #0c0c0c);
}
.escape-choice.wrong,
.escape-card-button.wrong { border-color:#707070; background:repeating-linear-gradient(135deg, #131313, #131313 8px, #0a0a0a 8px, #0a0a0a 16px); }
.escape-drawer-grid,
.escape-inspection-grid,
.escape-form-pool,
.escape-breaker-grid,
.escape-seam-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.escape-drawer-grid .escape-object { min-height:116px; }
.escape-object strong,
.escape-choice strong { display:block; font-size:1.15rem; margin-bottom:8px; }
.escape-object small,
.escape-choice small { display:block; color:#a7a7a7; line-height:1.4; }
.escape-token-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.escape-token {
  border:1px solid #333;
  border-radius:999px;
  padding:9px 11px;
  color:#a2a2a2;
  background:#070707;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.escape-token.found { color:#fff; border-color:#fff; background:#1b1b1b; }
.escape-order-slots,
.escape-final {
  border:1px solid #2e2e2e;
  border-radius:20px;
  min-height:82px;
  padding:14px;
  background:#070707;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.escape-slot-chip {
  border:1px solid #454545;
  border-radius:999px;
  padding:9px 12px;
  background:#141414;
  color:#f0f0f0;
}
.escape-final { margin-top:20px; flex-direction:column; align-items:stretch; }
.escape-final label { display:grid; gap:8px; color:#cfcfcf; }
.escape-final input {
  min-height:54px;
  border:1px solid #333;
  border-radius:16px;
  background:#030303;
  color:#fff;
  padding:0 14px;
  font-size:1.05rem;
}
.escape-complete {
  display:none;
  border:1px solid #fff;
  border-radius:var(--er-radius);
  background:linear-gradient(180deg, #f5f5f5, #bfbfbf);
  color:#050505;
  padding:26px;
  margin-top:20px;
}
.escape-room[data-complete="true"] .escape-complete { display:block; }
.stamp-dials {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.stamp-dial {
  min-height:80px;
  border:1px solid #444;
  border-radius:18px;
  background:#090909;
  color:#fff;
  font-size:2rem;
  font-weight:900;
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}
.inspection-card {
  border:1px solid #303030;
  border-radius:20px;
  background:#0b0b0b;
  padding:16px;
  display:grid;
  gap:12px;
}
.inspection-card p { color:#cacaca; line-height:1.45; }
.inspection-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.door-slab {
  position:relative;
  min-height:560px;
  border:1px solid #3a3a3a;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.14), transparent 12%),
    linear-gradient(90deg, #040404, #161616 48%, #050505);
  box-shadow:inset 0 0 90px rgba(255,255,255,.05), var(--er-shadow);
  overflow:hidden;
}
.door-slab:before {
  content:"";
  position:absolute;
  inset:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:32px;
  pointer-events:none;
}
.door-hold-target {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(240px, 45vw);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid #222;
  background:radial-gradient(circle, #1d1d1d, #030303 72%);
  display:grid;
  place-items:center;
  color:#aaa;
  cursor:pointer;
  user-select:none;
  touch-action:none;
}
.door-hold-target.ready { border-color:#fff; color:#fff; }
.door-seam {
  min-height:120px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#aaa;
}
.knock-pad-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.repair-board {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.repair-screen {
  min-height:340px;
  border:1px solid #333;
  border-radius:24px;
  background:#050505;
  padding:20px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color:#dcdcdc;
  overflow:auto;
}
.repair-screen .line { display:block; margin:8px 0; }
.breaker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.breaker .switch {
  width:58px;
  height:32px;
  border:1px solid #444;
  border-radius:999px;
  background:#050505;
  position:relative;
  flex:0 0 auto;
}
.breaker .switch:before {
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#777;
  top:4px;
  left:5px;
  transition:left .18s ease, background .18s ease;
}
.breaker.correct .switch:before { left:29px; background:#fff; }
.patience-gate {
  min-height:520px;
  border:1px solid #383838;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.13), transparent 18%),
    linear-gradient(180deg, #141414, #020202);
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  user-select:none;
  touch-action:manipulation;
}
.patience-gate .count {
  font-size:clamp(4rem, 12vw, 12rem);
  line-height:1;
  letter-spacing:-.08em;
  font-weight:950;
}
.patience-ring {
  width:min(360px, 64vw);
  aspect-ratio:1;
  border:1px solid #323232;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 80px rgba(255,255,255,.04);
}
.gray-lab {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.gray-targets {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.gray-chip {
  min-height:180px;
  border:1px solid #333;
  border-radius:22px;
  background:rgb(var(--shade), var(--shade), var(--shade));
  display:flex;
  align-items:flex-end;
  padding:14px;
  color:var(--text, #fff);
  font-weight:800;
}
.escape-slider {
  display:grid;
  gap:10px;
  margin:16px 0;
}
.escape-slider input { width:100%; accent-color:#fff; }
.gray-preview {
  min-height:280px;
  border:1px solid #333;
  border-radius:26px;
  background:linear-gradient(90deg, rgb(var(--a),var(--a),var(--a)), rgb(var(--b),var(--b),var(--b)), rgb(var(--c),var(--c),var(--c)));
}
.escape-room .subtle { color:#9e9e9e; }
.escape-reset { margin-left:auto; }
@media (max-width:1100px) {
  .escape-hub-grid { grid-template-columns:1fr 1fr; }
  .escape-room-head,
  .escape-stage-grid,
  .escape-stage-grid.two,
  .gray-lab,
  .repair-board { grid-template-columns:1fr; }
  .escape-room-head .escape-panel { min-height:auto; }
}
@media (max-width:720px) {
  .escape-wrap,
  .escape-room { width:min(100vw - 18px, 760px); }
  .escape-hub-grid,
  .escape-drawer-grid,
  .escape-inspection-grid,
  .escape-seam-grid,
  .escape-breaker-grid { grid-template-columns:1fr; }
  .escape-hero,
  .escape-panel,
  .escape-console,
  .escape-card { border-radius:22px; padding:20px; }
  .escape-card { min-height:auto; }
  .escape-hero h1,
  .escape-room-title { letter-spacing:-.06em; }
  .knock-pad-row { grid-template-columns:1fr 1fr; }
  .stamp-dials { grid-template-columns:repeat(2, 1fr); }
  .door-slab { min-height:430px; border-radius:28px; }
  .patience-gate { min-height:430px; }
}
@media (prefers-reduced-motion: reduce) {
  .escape-btn,
  .escape-object,
  .escape-choice,
  .escape-card-button,
  .escape-door-pad,
  .stamp-dial { transition:none; }
}