/* ==========================================================================
   STYLE-GAME.CSS - styles for the games (educational-games/)
   Loaded AFTER ../style.css; uses its variables (--accent, --bg-panel...)
   so it follows the light/dark theme automatically.
   ========================================================================== */

/* Game container for pages that do not have a playable build yet */
.catalog-intro-media.game-placeholder {
  max-width: 1000px;
  height: 420px;
}
@media (max-width: 700px) {
  .catalog-intro-media.game-placeholder {
    height: 260px;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* ============================================================================================================================================
LEGAL SIMULATION playable game Mobile-first: single column stack under 900px, full two-column "case file" layout on desktop. Fully theme-aware.
============================================================================================================================================  */
.legal-sim {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.legal-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  padding: 0.9rem 1.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.legal-sim-header span#scoreVal,
.legal-sim-header span#caseNum {
  color: var(--accent);
  font-weight: 600;
}
.legal-sim-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-top: none;
}
.legal-sim-file {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.legal-sim-file h3 {
  color: var(--accent);
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
}
.legal-sim-portrait {
  width: 100px;
  height: 100px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legal-sim-portrait svg {
  width: 100%;
  height: 100%;
}
.legal-sim-file p {
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.legal-sim-evidence {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-sim-evidence-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.legal-sim-evidence-item strong {
  color: var(--text-primary);
}
.legal-sim-choices {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#caseChoices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.legal-sim-mic-btn {
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  padding: 0.7rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.legal-sim-mic-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.legal-sim-mic-btn.listening {
  border-style: solid;
  border-color: #e2483d;
  color: #e2483d;
}
.legal-sim-choice-btn {
  text-align: left;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.legal-sim-choice-btn:hover:not(:disabled) {
  border-color: var(--accent);
}
.legal-sim-choice-btn:disabled {
  cursor: default;
}
.legal-sim-choice-btn.correct {
  border-color: #4a9f5a;
  background: rgba(74, 159, 90, 0.12);
}
.legal-sim-choice-btn.incorrect {
  border-color: #e2483d;
  background: rgba(226, 72, 61, 0.1);
}
.legal-sim-feedback {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-top: none;
  padding: 1.2rem 1.5rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.legal-sim-feedback.show {
  display: block;
}
.legal-sim-controls {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1rem 1.5rem;
  text-align: right;
}
.legal-sim-btn {
  background: var(--accent);
  color: var(--bg-primary, #000);
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.legal-sim-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.legal-sim-complete {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.legal-sim-complete h3 {
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.legal-sim-header-actions {
  display: flex;
  gap: 0.5rem;
}
.legal-sim-icon-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.legal-sim-icon-btn:hover {
  border-color: var(--accent);
}
.legal-sim-replay-btn {
  display: block;
  width: auto;
  height: auto;
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  margin: 0 auto 1rem;
  color: var(--text-muted);
}
.legal-sim-credits {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.9rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: -12px;
}
.legal-sim-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.legal-sim-modal-overlay.open {
  display: flex;
}
.legal-sim-modal {
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 2rem;
  max-width: 440px;
  width: 100%;
  position: relative;
}
.legal-sim-modal h3 {
  color: var(--accent);
  margin-bottom: 0.8rem;
}
.legal-sim-modal p {
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 0.9rem;
}
.legal-sim-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}
@media (min-width: 900px) {
  .legal-sim-body {
    grid-template-columns: 1fr 1fr;
  }
  .legal-sim-file {
    border-bottom: none;
    border-right: 1px solid var(--border-color);
  }
}
/* ============================================================
LEGAL SIMULATION - MENU, OPTIONS, STORY PAGES Main menu (Play /
Options / Exit), options panel (sound toggle), and the narrative
story-page stage shown before each case's questions. No external
libraries. Fully theme-aware via existing CSS variables.
============================================================ */
.legal-sim-hidden {
  display: none !important;
}
.legal-sim-menu {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.legal-sim-menu-title {
  font-size: 1.7rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.legal-sim-menu-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.legal-sim-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 280px;
  margin: 0 auto;
}
.legal-sim-menu-btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1.2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.legal-sim-menu-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.legal-sim-menu-btn-primary {
  background: var(--accent);
  color: var(--bg-primary, #000);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.legal-sim-menu-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
}
.legal-sim-btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
}
.legal-sim-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.legal-sim-option-row button {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}
.legal-sim-menu-note {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
.legal-sim-story {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  text-align: center;
  animation: legalStoryFadeIn 0.35s ease;
}
@keyframes legalStoryFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.legal-sim-story-page {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.legal-sim-story-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-primary);
  white-space: pre-line;
  text-align: left;
  margin-bottom: 1.2rem;
}
.legal-sim-story-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
}
.legal-sim-question-block {
  margin-bottom: 1rem;
}
.legal-sim-question-num {
  display: block;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.legal-sim-question-text {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .legal-sim-menu,
  .legal-sim-story {
    padding: 2rem 1.3rem;
    border-radius: 16px;
  }
  .legal-sim-menu-title {
    font-size: 1.4rem;
  }
  .legal-sim-story-text {
    font-size: 0.95rem;
    line-height: 1.75;
  }
  .legal-sim-story-nav {
    flex-direction: column-reverse;
  }
  .legal-sim-story-nav button {
    width: 100%;
  }
}
@media (min-width: 700px) and (max-width: 899px) {
  .legal-sim-menu,
  .legal-sim-story {
    max-width: 620px;
  }
}

/* ==========================================================================
   LEGAL SIMULATION 3D · Expediente Nocturno (.lx-)
   Takes the full window width; fullscreen button and mode.
   ========================================================================== */
.lx{--lx-scan:.4;--joy:110px;position:relative;width:100vw;margin-left:calc(50% - 50vw);height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:420px;overflow:hidden;background:radial-gradient(120% 90% at 50% 15%,#16233f,#05070d);color:#efe6d2;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
.lx:fullscreen{width:100vw;height:100vh;height:100dvh;margin:0;min-height:0}
.lx:-webkit-full-screen{width:100vw;height:100vh;margin:0;min-height:0}
.lx.lx-ffs{position:fixed;inset:0;z-index:5000;width:100vw;height:100vh;height:100dvh;margin:0;min-height:0}
html.lx-noscroll,html.lx-noscroll body{overflow:hidden}
.lx canvas{position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:none}
.lx-flat canvas{display:none}
.lx-hide{display:none!important}
.lx button,.lx a.lx-btn{font:inherit;cursor:pointer;text-decoration:none}
.lx button:focus-visible,.lx a:focus-visible,.lx input:focus-visible{outline:2px solid #ffb454;outline-offset:2px}
/* vignette and monitor scanlines (adjustable in Protocols) */
.lx::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(110% 100% at 0 50%,rgba(3,5,10,.7),transparent 52%),radial-gradient(90% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
.lx.lx-novign::before{display:none}
.lx::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:var(--lx-scan)}
.lx[data-f="3"]::after,.lx[data-f="4"]::after,.lx[data-f="5"]::after{opacity:calc(var(--lx-scan) + .3)}
.lx[data-f="5"]{filter:saturate(.7) contrast(1.1)}
.lx-black{position:absolute;inset:0;z-index:9;background:#000;opacity:0;pointer-events:none;transition:opacity .18s}
.lx-black.on{opacity:1;transition:none}

/* ---------- main menu (glitching text) ---------- */
.lx-menu{position:absolute;z-index:2;left:clamp(16px,6vw,90px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;width:min(330px,84%);transition:opacity .35s,transform .35s}
.lx-menu h2{margin:0;font:600 clamp(30px,4.6vw,52px)/1.02 "Iowan Old Style",Palatino,Georgia,serif;letter-spacing:.01em;color:#f3ead6;text-shadow:0 2px 18px #000;animation:lxg 7s infinite}
.lx-menu p{margin:0 0 14px;color:#ffb454;font-style:italic;font-family:Georgia,serif}
.lx .lx-menu .lx-b{position:relative;display:block;width:100%;text-align:left;background:none;color:#cfd8e6;border:0;border-radius:0;padding:12px 4px 12px 38px;font:600 15px/1 system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;text-shadow:0 1px 8px #000;transition:color .2s,letter-spacing .25s,text-shadow .2s}
.lx-menu .lx-n{position:absolute;left:4px;top:50%;transform:translateY(-50%);font-size:11px;color:#ffb454;letter-spacing:.1em}
.lx-menu .lx-b::after{content:"";position:absolute;left:0;bottom:5px;height:1px;width:0;background:linear-gradient(90deg,#ffb454,transparent);transition:width .3s}
.lx .lx-menu .lx-b:hover,.lx .lx-menu .lx-b:focus-visible{color:#fff;letter-spacing:.42em;text-shadow:-2px 0 #ff3b5c,2px 0 #29e6ff,0 0 14px rgba(255,180,84,.7);animation:lxj .35s steps(2) 1;outline:none}
.lx-menu .lx-b:hover::after,.lx-menu .lx-b:focus-visible::after{width:100%}
@keyframes lxj{0%{transform:none}30%{transform:translateX(-3px) skewX(-6deg)}60%{transform:translateX(3px)}100%{transform:none}}
@keyframes lxg{0%,92%,100%{text-shadow:0 2px 18px #000;transform:none}94%{text-shadow:-3px 0 #ff3b5c,3px 0 #29e6ff;transform:translateX(2px) skewX(-4deg)}96%{text-shadow:3px 0 #ff3b5c,-3px 0 #29e6ff;transform:translateX(-2px)}}

/* ---------- panels (nights, archive, notes, Ernesto) ---------- */
.lx-panel{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,94%);max-height:88%;overflow:auto;padding:22px clamp(16px,3vw,32px);background:rgba(8,12,22,.94);border:1px solid rgba(255,180,84,.4);border-radius:6px;box-shadow:0 20px 60px #000;animation:lxIn .35s both;overscroll-behavior:contain}
.lx-panel h3{margin:0 0 4px;font:600 clamp(20px,2.4vw,26px)/1.2 Georgia,serif;color:#f3ead6}
.lx-panel h4{margin:16px 0 6px;font:600 16px Georgia,serif;color:#ffb454}
.lx-panel p{margin:8px 0;color:#e6ddca}
.lx-story{white-space:pre-line;font:clamp(17px,1.6vw,19px)/1.65 Georgia,serif;margin:14px 0;min-height:1.6em}
.lx-note{background:#e3dccb;color:#1f1a14!important;padding:18px 20px;border-radius:2px;box-shadow:inset 0 0 30px rgba(120,90,40,.25);font-family:"Courier New",monospace}
.lx-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.lx-row .lx-b{width:auto;flex:1 1 170px}
.lx-talk{display:flex;flex-direction:column;gap:8px;margin:12px 0}
/* panel buttons: ALWAYS readable (they used to render white with gray text) */
.lx .lx-panel .lx-b{display:block;width:100%;text-align:left;padding:12px 16px;margin:0;background:#18233a;color:#f3ead6;border:1px solid rgba(255,180,84,.35);border-left:4px solid #ffb454;border-radius:3px;font:500 16px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;transition:background .15s,transform .15s,border-color .15s}
.lx .lx-panel .lx-b:hover:not(:disabled),.lx .lx-panel .lx-b:focus-visible{background:#243353;border-color:#ffb454;transform:translateX(4px)}
.lx .lx-panel .lx-b.lx-p{background:#ffb454;color:#1a140c;border-color:#ffb454;font-weight:700}
.lx .lx-panel .lx-b.lx-p:hover{background:#ffc576}
.lx .lx-panel .lx-b.lx-g{background:transparent;color:#efe6d2;border:1px solid rgba(239,230,210,.45)}
.lx .lx-panel .lx-b.lx-on{border-left-color:#4fd18b;background:#1a3326}
.lx .lx-panel .lx-b:disabled{opacity:.5;cursor:not-allowed;transform:none}
.lx .lx-panel .lx-hx{display:inline-block;width:auto;padding:5px 12px;font-size:13px;background:rgba(0,0,0,.35);color:#efe6d2;border:1px solid rgba(239,230,210,.4);border-left-width:1px}
.lx-ev{margin:6px 0;padding:9px 12px;background:rgba(233,220,192,.08);border-left:3px solid #6fb1d6;font-size:15px}
.lx-night{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0}
.lx-night .lx-b{flex:1}
.lx-tag{font-size:14px;color:#ffb454;white-space:nowrap}
.lx-ch{margin:8px 0}
.lx .lx-panel .lx-ch .lx-b{border-left-color:#6fb1d6}
.lx .lx-panel .lx-ch .lx-b.ok{background:#1d4d33;border-color:#4fd18b;color:#fff;opacity:1}
.lx .lx-panel .lx-ch .lx-b.no{background:#5a2320;border-color:#ff6b5c;color:#fff;opacity:1}
.lx-fb{margin-top:12px;padding:12px;border:1px dashed #ffb454;border-radius:4px;background:rgba(255,180,84,.08)}
.lx-hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:#9fb3cf;font-size:14px;margin-bottom:6px}
.lx-credit{font-size:14px;color:#9fb3cf!important}
.lx-cr{display:flex;flex-direction:column;margin:0 0 12px}.lx-cr small{color:#b8a06a;font-size:11px;letter-spacing:.24em;text-transform:uppercase}.lx-cr b,.lx-cr a{font-size:16px}.lx-cr a{color:#e8c36a;text-underline-offset:3px}.lx-cr a:hover,.lx-cr a:focus-visible{color:#fff2c4}.lx-cr span{color:#9fb3cf;font-size:13px}
.lx-crbig{margin:6px 0 10px;font:600 22px/1.3 Georgia,serif;color:#f1e3bd!important;text-shadow:0 0 18px rgba(232,214,168,.25)}
.lx-mono{font:italic 17px/1.4 Georgia,serif;color:#9fd7ff!important;margin:10px 0}
.lx-gl{animation:lxt 3s infinite}
@keyframes lxt{0%,90%,100%{text-shadow:none;transform:none}93%{text-shadow:-2px 0 #ff3b5c,2px 0 #29e6ff}96%{transform:translateX(2px)}}
.lx.lx-shake{animation:lxs .45s}
@keyframes lxs{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}}
.lx-blink .lx-panel{animation:lxb .9s}
@keyframes lxb{0%,30%{opacity:0}100%{opacity:1}}
@keyframes lxIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* ---------- bar, tooltip, captions, fullscreen ---------- */
.lx-tip{position:absolute;z-index:4;pointer-events:none;padding:4px 10px;background:#e9dcc0;color:#1a140c;font:14px Georgia,serif;border-radius:2px;transform:translate(12px,-32px)}
.lx-load{position:absolute;right:14px;bottom:10px;z-index:2;font-size:13px;color:#9fb3cf;text-shadow:0 1px 4px #000}
.lx-fs{position:absolute;z-index:6;top:12px;right:12px;width:42px;height:42px;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#efe6d2;border:1px solid rgba(239,230,210,.35);border-radius:4px;font-size:20px;line-height:1}
.lx-fs:hover{border-color:#ffb454;color:#ffb454}
.lx-cap{position:absolute;z-index:6;left:50%;bottom:9%;transform:translateX(-50%);max-width:90%;padding:6px 14px;background:rgba(0,0,0,.72);color:#fff;font:600 15px/1.3 system-ui,sans-serif;border-radius:3px;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center}
.lx-cap.on{opacity:1}

/* ---------- exploration ---------- */
.lx-ex{position:absolute;inset:0;z-index:4;pointer-events:none}
.lx-ex>*{pointer-events:auto}
.lx-prompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);max-width:90%;padding:6px 14px;background:rgba(0,0,0,.65);color:#ffb454;font:15px Georgia,serif;border:1px solid rgba(255,180,84,.5);pointer-events:none!important;visibility:hidden;text-align:center}
.lx-obj{position:absolute;left:14px;top:62px;max-width:min(360px,70%);padding:8px 12px;background:rgba(0,0,0,.45);border-left:3px solid #ffb454;font-size:13px;line-height:1.4;pointer-events:none!important}
.lx-obj b{display:block;color:#ffb454;font-weight:600;letter-spacing:.04em}
.lx-obj span{color:#cfd8e6}
.lx .lx-xit{position:absolute;top:12px;left:12px;width:auto;padding:8px 14px;font:600 14px system-ui,sans-serif;background:rgba(0,0,0,.5);color:#efe6d2;border:1px solid rgba(239,230,210,.4);border-radius:3px}
.lx-joy{position:absolute;left:22px;bottom:22px;width:var(--joy);height:var(--joy);border-radius:50%;border:1px solid rgba(239,230,210,.4);background:rgba(255,255,255,.06);touch-action:none;display:none}
.lx-joy i{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:rgba(255,180,84,.55);pointer-events:none}
.lx .lx-act{position:absolute;right:22px;bottom:34px;width:72px;height:72px;border-radius:50%;padding:0;text-align:center;background:rgba(255,180,84,.85);border:0;color:#1a140c;font-size:22px;display:none}
.lx-joy-s{--joy:86px}.lx-joy-m{--joy:110px}.lx-joy-l{--joy:140px}
.lx-joyR .lx-joy{left:auto;right:22px}
.lx.lx-joyR .lx-act{right:auto;left:22px}
@media (pointer:coarse){.lx-joy,.lx .lx-act{display:block}}

/* ==========================================================================
   PROTOCOLS: full options screen (tabs, rows, description)
   ========================================================================== */
.lx-optmode .lx-menu{opacity:0;transform:translate(-30px,-50%)}
.lx-opt{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;padding:clamp(14px,3vw,42px) clamp(14px,4.5vw,64px) clamp(12px,2.4vw,30px);background:linear-gradient(90deg,rgba(4,6,11,.94) 0%,rgba(4,6,11,.84) 55%,rgba(4,6,11,.6) 100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lxOpt .55s .2s both;color:#e8e1d2}
@keyframes lxOpt{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.lx-ohead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.lx-opt h2{margin:0;font:700 clamp(34px,6vw,70px)/.95 "Oswald","Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#e8e1d2}
.lx-over{font-size:12px;color:#8e9bb0;padding-bottom:6px}
.lx-orule{height:1px;margin:10px 0 12px;background:linear-gradient(90deg,#c8483a,rgba(200,72,58,.15))}
.lx-otabs{display:flex;align-items:center;gap:4px 30px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.lx-otabs::-webkit-scrollbar{display:none}
.lx .lx-otab{position:relative;background:none;border:0;color:#8e9bb0;font:600 clamp(15px,1.9vw,21px)/1.2 "Oswald","Arial Narrow",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s}
.lx .lx-otab:hover{color:#e8e1d2}
.lx .lx-otab.on{color:#ffb454;border-bottom-color:#ffb454}
.lx .lx-otab+.lx-otab::before{content:"//";position:absolute;left:-22px;color:#c8483a;font-weight:400}
.lx-olist{flex:1;min-height:0;overflow-y:auto;margin-top:12px;max-width:1150px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c8483a transparent}
.lx-orow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:6px 20px;min-height:46px;padding:4px 12px;border-left:2px solid transparent;transition:background .15s,border-color .15s}
.lx-orow.on{background:linear-gradient(90deg,rgba(255,180,84,.12),rgba(255,180,84,.02));border-left-color:#ffb454}
.lx-olab{font:600 13px/1.3 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e8e1d2}
.lx-octl{display:flex;align-items:center;gap:10px;min-width:0}
.lx .lx-oarr{flex:none;width:40px;height:36px;background:none;border:0;color:#e8e1d2;font-size:26px;line-height:1;border-radius:3px}
.lx .lx-oarr:hover{color:#ffb454;background:rgba(255,255,255,.06)}
.lx-oval{flex:1;text-align:center;font:500 15px system-ui,sans-serif;letter-spacing:.04em}
.lx-onum{flex:none;min-width:58px;font:500 15px system-ui,sans-serif}
.lx-octl input[type=range]{flex:1;min-width:0;height:28px;accent-color:#ffb454;background:transparent;cursor:pointer}
.lx .lx-oact{padding:7px 18px;background:transparent;color:#ff8a7a;border:1px solid rgba(255,138,122,.6);border-radius:3px;font:600 13px system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.lx .lx-oact:hover{background:rgba(255,107,92,.15)}
.lx-oinfo{font-size:14px;color:#b8c2d3;line-height:1.4}
.lx-odesc{margin-top:10px;padding-top:10px;border-top:1px solid rgba(200,72,58,.6);min-height:3em;color:#b8c2d3;font:600 clamp(13px,1.3vw,16px)/1.4 "Oswald","Arial Narrow",sans-serif;letter-spacing:.04em;text-transform:uppercase;max-width:1150px}
.lx-ofoot{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:10px}
.lx .lx-okey{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:4px 0;color:#e8e1d2;font:600 14px system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.lx .lx-okey b{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border:1.5px solid currentColor;border-radius:14px;font-size:11px;letter-spacing:0}
.lx .lx-okey:hover{color:#ffb454}
.lx-otabs .lx-okey b{min-width:26px;height:22px;border-radius:3px;background:rgba(255,255,255,.08)}

/* ---------- accessibility ---------- */
.lx.lx-big .lx-panel{font-size:19px}
.lx.lx-big .lx-story{font-size:23px}
.lx.lx-big .lx-panel .lx-b{font-size:19px}
.lx.lx-big .lx-olab{font-size:15px}
.lx.lx-big .lx-oval,.lx.lx-big .lx-onum{font-size:17px}
.lx.lx-big .lx-odesc{font-size:18px}
.lx.lx-hc .lx-panel,.lx.lx-hc .lx-opt{background:#000;border-color:#ffe600}
.lx.lx-hc .lx-panel p,.lx.lx-hc .lx-story,.lx.lx-hc .lx-olab,.lx.lx-hc .lx-odesc,.lx.lx-hc .lx-oinfo{color:#fff!important}
.lx.lx-hc .lx-panel .lx-b{background:#000;color:#fff;border:2px solid #ffe600}
.lx.lx-hc .lx-panel .lx-b.lx-p{background:#ffe600;color:#000}
.lx.lx-hc .lx-orow.on{background:#1a1a00;border-left-color:#ffe600}
.lx.lx-hc .lx-cap,.lx.lx-hc .lx-prompt{background:#000;color:#ffe600;border:2px solid #ffe600}
.lx.lx-rm *,.lx.lx-rm{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.lx *{transition:none!important;animation:none!important}}

/* ---------- phone and tablet ---------- */
@media (max-width:700px){
  .lx-menu{top:auto;bottom:16px;transform:none;left:14px;right:14px;width:auto}
  .lx-optmode .lx-menu{transform:translateX(-30px)}
  .lx-menu h2{font-size:28px}
  .lx .lx-menu .lx-b{padding:10px 4px 10px 30px;letter-spacing:.16em}
  .lx .lx-menu .lx-b:hover{letter-spacing:.2em}
  .lx-panel{width:96%;max-height:92%;padding:16px 14px}
  .lx-orow{grid-template-columns:1fr;gap:2px;padding:8px 10px}
  .lx-olab{font-size:12px}
  .lx-ofoot{gap:6px 18px}
  .lx .lx-okey{font-size:12px}
  .lx-odesc{min-height:2.6em;font-size:12px}
  .lx-obj{top:60px;font-size:12px}
}
@media (max-height:500px) and (orientation:landscape){
  .lx-menu h2{font-size:26px}
  .lx-menu p{margin-bottom:4px}
  .lx .lx-menu .lx-b{padding:7px 4px 7px 30px}
  .lx-opt{padding:10px 16px}
  .lx-opt h2{font-size:28px}
  .lx-orow{min-height:38px}
  .lx-odesc{min-height:2.4em;margin-top:6px;padding-top:6px}
  .lx-panel{max-height:94%}
}

/* ---------- security cameras (Chapter 3) ---------- */
.lx.lx-cctv::after{opacity:calc(var(--lx-scan) + .45);background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.lx-stamp{position:absolute;z-index:6;top:14px;left:14px;padding:4px 10px;background:rgba(0,0,0,.55);color:#d6ffe0;font:600 14px/1.3 "Courier New",monospace;letter-spacing:.06em;pointer-events:none}
.lx-cctvbar{position:absolute;z-index:6;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:94%}
.lx .lx-cctvbar .lx-cam{width:auto;padding:9px 14px;background:rgba(0,0,0,.65);color:#d6ffe0;border:1px solid rgba(214,255,224,.45);border-radius:3px;font:600 14px "Courier New",monospace;letter-spacing:.08em}
.lx .lx-cctvbar .lx-cam.on{background:#d6ffe0;color:#0b1a10}
.lx .lx-cctvbar .lx-camx{color:#ffd6a0;border-color:rgba(255,214,160,.5)}
@media (max-width:700px){.lx .lx-cctvbar .lx-cam{padding:8px 10px;font-size:12px}.lx-stamp{font-size:11px}}

/* ---------- flashlight button (F on keyboard) ---------- */
.lx .lx-torch{position:absolute;top:12px;right:64px;width:42px;height:42px;display:grid;place-items:center;padding:0;background:rgba(0,0,0,.45);color:#efe6d2;border:1px solid rgba(239,230,210,.35);border-radius:4px;font-size:20px;line-height:1;filter:grayscale(1);opacity:.75;transition:opacity .2s,filter .2s,border-color .2s}
.lx .lx-torch:hover{opacity:1;border-color:#ffb454}
.lx .lx-torch.on{filter:none;opacity:1;border-color:#ffd48a;box-shadow:0 0 14px rgba(255,212,138,.45)}

/* ==========================================================================
   SHARED: "rotate your device" screen for landscape-only games (any game)
   ========================================================================== */
.game-rotate{display:none}
.game-need-rotate{position:relative}
.game-need-rotate .game-rotate{display:flex;position:absolute;inset:0;z-index:60;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--bg-primary,#05070d);color:var(--text-primary,#efe6d2)}
.game-rotate-icon{font-size:56px;line-height:1;display:inline-block;animation:gameRot 2.4s ease-in-out infinite}
@keyframes gameRot{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.game-rotate p{margin:18px 0;font:600 17px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
.game-rotate button{padding:12px 22px;background:var(--accent,#ffb454);color:#111;border:0;border-radius:6px;font:700 15px system-ui,sans-serif;cursor:pointer}
.game-rotate button:focus-visible{outline:2px solid var(--text-primary,#fff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.game-rotate-icon{animation:none}}

/* ==========================================================================
   PHISH OR REAL? - night-desk email triage (Cybersecurity)
   Everything is scoped to .ph so it never touches the rest of the site.
   ========================================================================== */
.ph{--bg:#070b14;--pan:#0e1626;--pan2:#142036;--ln:#22324d;--tx:#e6edf7;--mu:#98a8c2;--ac:#37e2c4;--rd:#ff5a6e;--yl:#ffb454;--gn:#4fd18b;--fs:15px;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:420px;overflow:hidden;
  background:radial-gradient(90% 70% at 20% 0%,rgba(55,226,196,.10),transparent 60%),radial-gradient(80% 60% at 100% 100%,rgba(255,90,110,.08),transparent 60%),var(--bg);
  color:var(--tx);font:var(--fs)/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
.ph:fullscreen{width:100vw;height:100vh;height:100dvh;margin:0;min-height:0}
.ph:-webkit-full-screen{width:100vw;height:100vh;margin:0;min-height:0}
.ph.ph-ffs{position:fixed;inset:0;z-index:5000;width:100vw;height:100vh;height:100dvh;margin:0;min-height:0}
html.ph-noscroll,html.ph-noscroll body{overflow:hidden}
.ph *{box-sizing:border-box}
.ph noscript p{padding:24px}
.ph-app{position:absolute;inset:0}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);z-index:1}
.ph button{font:inherit;color:inherit;cursor:pointer}
.ph button:focus-visible,.ph a:focus-visible,.ph input:focus-visible,.ph [tabindex]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.ph a{color:var(--ac)}
.ph code{font:.92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:3px;word-break:break-all}
.ph kbd{display:inline-block;min-width:1.5em;padding:0 5px;margin:0 2px;border:1px solid currentColor;border-radius:4px;font:600 .72em/1.6 ui-monospace,monospace;text-align:center;opacity:.75}
.ph-hide{display:none!important}

/* ---------- buttons ---------- */
.ph .ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;background:var(--pan2);color:var(--tx);border:1px solid var(--ln);border-radius:6px;font-weight:600;transition:background .15s,border-color .15s,transform .15s}
.ph .ph-btn:hover:not(:disabled){background:#1b2a45;border-color:var(--ac)}
.ph .ph-btn:active:not(:disabled){transform:translateY(1px)}
.ph .ph-btn:disabled{opacity:.45;cursor:not-allowed}
.ph .ph-btn.ph-pri{background:var(--ac);color:#04201b;border-color:var(--ac)}
.ph .ph-btn.ph-pri:hover{background:#6ff0d9}
.ph .ph-btn.ph-danger{background:#3a1520;border-color:var(--rd);color:#ffd6dc}
.ph .ph-btn.ph-rpt{border-color:var(--rd);color:#ffc2cb}
.ph .ph-btn.ph-rpt:hover{background:#3a1520;border-color:var(--rd)}
.ph .ph-btn.ph-okb{border-color:var(--gn);color:#c9f5dc}
.ph .ph-btn.ph-okb:hover{background:#15321f;border-color:var(--gn)}
.ph .ph-btn.ph-sm{padding:6px 12px;font-size:.9em}
.ph-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

/* ---------- screens ---------- */
.ph-scr{position:absolute;inset:0;z-index:2;overflow:auto}
.ph-title,.ph-shifts,.ph-brief,.ph-report,.ph-fail,.ph-ending{display:flex;align-items:flex-start;justify-content:center;padding:28px 20px}
.ph-title{align-items:center}
.ph-tbox{text-align:center;max-width:560px;margin:auto}
.ph-logo{width:110px;height:84px;color:var(--ac);filter:drop-shadow(0 0 18px rgba(55,226,196,.35))}
.ph-tbox h2{margin:6px 0 4px;font:800 clamp(34px,6vw,64px)/1 system-ui,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:var(--tx);text-shadow:0 0 30px rgba(55,226,196,.25)}
.ph-tbox h2 span{color:var(--rd);font-weight:300;font-style:italic;text-transform:lowercase}
.ph-tag{margin:0;color:var(--ac);font-size:.8em;letter-spacing:.2em;text-transform:uppercase}
.ph-sub{color:var(--mu);margin:12px 0 22px}
.ph-tmenu{display:grid;gap:10px;max-width:320px;margin:0 auto}
.ph-h{margin:0 0 12px;font:800 clamp(24px,3.4vw,36px)/1.1 system-ui,sans-serif;color:var(--tx)}
.ph-h3{margin:18px 0 8px;font-size:1em;color:var(--ac);letter-spacing:.12em;text-transform:uppercase}
.ph-sn{margin:0 0 4px;color:var(--ac);font-size:.78em;letter-spacing:.22em;text-transform:uppercase}
.ph-small{color:var(--mu);font-size:.88em}
.ph-intro{color:#d4deec;font-size:1.02em;max-width:68ch}
.ph-shifts{flex-direction:column;align-items:center}
.ph-cards{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;width:min(900px,100%)}
.ph .ph-scard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:18px;min-height:130px;background:linear-gradient(160deg,var(--pan2),var(--pan));border:1px solid var(--ln);border-radius:10px;transition:border-color .15s,transform .15s}
.ph .ph-scard b{font-size:1.25em}
.ph .ph-scard:hover:not(:disabled){border-color:var(--ac);transform:translateY(-2px)}
.ph .ph-scard:disabled{opacity:.45;cursor:not-allowed}
.ph-sg{margin-top:auto;color:var(--mu);font-size:.85em}
.ph-back{margin-top:18px}
.ph-bwrap,.ph-rwrap{width:min(760px,100%);margin:auto 0}
.ph-notes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ph-notes li{position:relative;padding:10px 12px 10px 34px;background:#1d2a1f;border:1px solid #33513a;border-radius:6px;color:#e7f3e3}
.ph-notes li::before{content:"📌";position:absolute;left:10px;top:9px;font-size:.9em}

/* ---------- desk ---------- */
.ph-desk{display:grid;grid-template-columns:minmax(220px,32%) 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "inbox view" "status status";overflow:hidden}
.ph-top{grid-area:top;display:flex;align-items:center;gap:14px;padding:8px 14px;background:rgba(5,9,18,.9);border-bottom:1px solid var(--ln);padding-right:56px}
.ph-brand{font-weight:700;color:var(--ac);white-space:nowrap}
.ph-clock{font:700 1.15em ui-monospace,monospace;color:var(--yl);letter-spacing:.05em;text-shadow:0 0 10px rgba(255,180,84,.4)}
.ph-meter{display:flex;align-items:center;gap:4px;font-size:.78em;color:var(--mu);text-transform:uppercase;letter-spacing:.1em}
.ph-meter span{margin-right:4px}
.ph-meter i{width:12px;height:12px;border-radius:50%;border:1px solid var(--ln);background:transparent}
.ph-mb i.on{background:var(--rd);border-color:var(--rd);box-shadow:0 0 8px var(--rd)}
.ph-mt i.on{background:var(--gn);border-color:var(--gn)}
.ph-score{font:700 1.05em ui-monospace,monospace;min-width:4ch}
.ph-score::before{content:"★ ";color:var(--yl)}
.ph-tools{margin-left:auto;display:flex;gap:6px}
.ph .ph-tb{padding:6px 10px;background:var(--pan2);border:1px solid var(--ln);border-radius:6px;font-size:.88em;white-space:nowrap}
.ph .ph-tb:hover{border-color:var(--ac)}
.ph-inbox{grid-area:inbox;display:flex;flex-direction:column;min-height:0;background:rgba(10,16,28,.85);border-right:1px solid var(--ln)}
.ph-ih{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:700;border-bottom:1px solid var(--ln)}
.ph-ih b{font-size:.8em;font-weight:600;color:var(--mu)}
.ph-ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.ph-li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(34,50,77,.6);cursor:pointer;border-left:3px solid transparent}
.ph-li:hover{background:rgba(55,226,196,.06)}
.ph-li.ph-sel{background:rgba(55,226,196,.12);border-left-color:var(--ac)}
.ph-li.ph-unread .ph-lt b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--ac);vertical-align:middle}
.ph-li.ph-done{opacity:.62}
.ph-lt{min-width:0;display:flex;flex-direction:column}
.ph-lt b,.ph-lt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-lt span{color:var(--mu);font-size:.88em}
.ph-lm{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:.72em;color:var(--mu)}
.ph-rb{font-style:normal;font-weight:800;font-size:1.3em}
.ph-rb.ph-ok{color:var(--gn)} .ph-rb.ph-br,.ph-rb.ph-bad{color:var(--rd)} .ph-rb.ph-fa{color:var(--yl)}
.ph-view{grid-area:view;overflow:auto;padding:18px 22px;min-height:0;outline:none}
.ph-status{grid-area:status;padding:5px 14px;font:.8em ui-monospace,monospace;color:var(--mu);background:#04070e;border-top:1px solid var(--ln);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:26px}
.ph-mhd h3{margin:0 0 6px;font-size:1.25em;color:var(--tx)}
.ph-from{font-size:.98em}
.ph-addr{color:var(--mu);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.ph-meta{color:var(--mu);font-size:.82em;margin-top:2px}
.ph-body{margin:14px 0;padding:16px 18px;background:#f4f1ea;color:#1c1f26;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.ph-body p{margin:0 0 .7em}
.ph-body p:last-child{margin:0}
.ph .ph-body a,.ph .ph-bub a{color:#0b57d0;text-decoration:underline;font-weight:600}
.ph-hdrs{margin:12px 0;padding:10px 12px;background:#050910;border:1px solid var(--ln);border-radius:6px;overflow-x:auto}
.ph-hdrs table{border-collapse:collapse;font:.86em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;width:100%}
.ph-hdrs th{width:1%;text-align:left;color:var(--mu);font-weight:600;padding:3px 12px 3px 0;white-space:nowrap;vertical-align:top}
.ph-hdrs td{padding:3px 0;word-break:break-all}
.ph-hdrs td.ph-bad{color:var(--rd);font-weight:700}
.ph-hnote{margin:10px 0 0;padding:8px 10px;background:rgba(255,180,84,.1);border-left:3px solid var(--yl);font-size:.9em}
.ph-atts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ph .ph-att{padding:8px 12px;background:var(--pan2);border:1px solid var(--ln);border-radius:6px}
.ph .ph-att small{color:var(--mu);margin-left:4px}
.ph .ph-att:hover{border-color:var(--yl)}
.ph-qrbox{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ph-qr{width:130px;height:130px;border-radius:4px;fill:#111}
.ph-qru{margin:8px 0;font-size:.9em}
.ph-phone{width:min(340px,100%);margin:6px auto 12px;padding:14px;background:#0a0d14;border:2px solid #2a3348;border-radius:26px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.ph-pbar{text-align:center;font-size:.82em;color:var(--mu);padding-bottom:8px;border-bottom:1px solid #1f283a;margin-bottom:12px}
.ph-bub{background:#2a3244;color:#f0f3f8;padding:10px 14px;border-radius:18px 18px 18px 4px;max-width:92%}
.ph .ph-bub a{color:#8ab4ff}
.ph-pt{font-size:.72em;color:var(--mu);margin-top:4px}
.ph-pcard{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:#1a2233;border-radius:14px}
.ph-pcard span{color:var(--mu);font-size:.88em}
.ph-pcnt{color:var(--rd)!important;font-weight:700}
.ph-shake{animation:phShake 1.6s ease-in-out infinite}
@keyframes phShake{0%,82%,100%{transform:none}85%{transform:translateX(-4px) rotate(-1deg)}88%{transform:translateX(4px) rotate(1deg)}91%{transform:translateX(-3px)}94%{transform:translateX(3px)}}
.ph-callnote{margin:10px 0;padding:10px 12px;background:rgba(55,226,196,.08);border-left:3px solid var(--ac);border-radius:4px}
.ph-acts{position:sticky;bottom:-18px;display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 18px;margin-top:10px;background:linear-gradient(transparent,var(--bg) 30%)}
.ph-verdict{margin:12px 0;padding:12px 14px;border-radius:6px;border:1px solid var(--ln);background:var(--pan)}
.ph-verdict ul{margin:8px 0 0;padding-left:20px}
.ph-verdict.ph-ok{border-color:var(--gn)} .ph-verdict.ph-fa{border-color:var(--yl)} .ph-verdict.ph-br,.ph-verdict.ph-bad{border-color:var(--rd)}
.ph-rep{margin:10px 0 0;padding:8px 10px;background:rgba(55,226,196,.08);border-radius:4px;font-size:.9em}
.ph-idle{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 10px;color:var(--mu);text-align:center}

/* ---------- modal, toast, flash ---------- */
.ph-modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,4,9,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ph-card{width:min(620px,100%);max-height:100%;overflow:auto;padding:22px 24px;background:var(--pan);border:1px solid var(--ln);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:phIn .22s ease-out}
@keyframes phIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
.ph-card h3{margin:0 0 10px;font-size:1.3em}
.ph-card h4{margin:14px 0 6px;color:var(--ac);font-size:.85em;letter-spacing:.12em;text-transform:uppercase}
.ph-card>.ph-btn{margin-top:16px;width:100%}
.ph-list{margin:0;padding-left:20px}
.ph-list li{margin:4px 0}
.ph-src a{word-break:break-word}
.ph-mt-ok{color:var(--gn)} .ph-mt-fa{color:var(--yl)} .ph-mt-br{color:var(--rd)}
.ph-res-br .ph-card{border-color:var(--rd);box-shadow:0 0 0 1px var(--rd),0 20px 60px rgba(255,90,110,.25)}
.ph-res-ok .ph-card{border-color:var(--gn)}
.ph-res-fa .ph-card{border-color:var(--yl)}
.ph-pts{font:700 1.1em ui-monospace,monospace;color:var(--yl);margin:8px 0}
.ph-bonus{color:var(--gn);margin:4px 0;font-weight:600}
.ph-calls{display:grid;gap:8px;margin:10px 0}
.ph .ph-callb{flex-direction:column;align-items:flex-start;text-align:left;width:100%}
.ph .ph-callb small{color:var(--mu);font-weight:400}
.ph .ph-callb.ph-warnb{border-color:var(--yl)}
.ph-orow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--ln)}
.ph-orow input[type=checkbox]{width:22px;height:22px;accent-color:var(--ac)}
.ph-orow input[type=range]{width:50%;accent-color:var(--ac)}
.ph-dir{width:100%;border-collapse:collapse}
.ph-dir td{padding:8px 4px;border-bottom:1px solid var(--ln);vertical-align:top}
.ph-dir td:last-child{text-align:right;font-family:ui-monospace,monospace;white-space:nowrap}
.ph-dir small{color:var(--mu)}
.ph-lkp{padding:10px 12px;background:#050910;border-radius:6px;line-height:1.8}
.ph-lkp span{color:var(--mu);display:inline-block;min-width:70px}
.ph-toast{position:absolute;left:50%;bottom:40px;z-index:30;max-width:min(560px,90%);padding:10px 16px;background:#0f1a2c;border:1px solid var(--ac);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.ph-toast.ph-on{opacity:1;transform:translate(-50%,0)}
.ph-flash{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0}
.ph-flash.ph-go{animation:phFlash .6s ease-out}
.ph-flash.ph-r{background:radial-gradient(circle,transparent 30%,rgba(255,90,110,.55))}
.ph-flash.ph-g{background:radial-gradient(circle,transparent 45%,rgba(79,209,139,.3))}
.ph-flash.ph-y{background:radial-gradient(circle,transparent 40%,rgba(255,180,84,.35))}
@keyframes phFlash{0%{opacity:1}100%{opacity:0}}
.ph .ph-fs{position:absolute;top:8px;right:10px;z-index:25;width:38px;height:34px;padding:0;background:rgba(0,0,0,.45);color:var(--tx);border:1px solid var(--ln);border-radius:6px;font-size:18px;line-height:1}
.ph .ph-fs:hover{border-color:var(--ac)}

/* ---------- report ---------- */
.ph-grade{width:110px;height:110px;margin:6px auto 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;font:900 60px/1 system-ui,sans-serif;border:4px solid currentColor}
.ph-gA{color:var(--gn)} .ph-gB{color:var(--ac)} .ph-gC{color:var(--yl)} .ph-gD{color:#ff9b54} .ph-gF{color:var(--rd)}
.ph-report .ph-sn,.ph-report .ph-h{text-align:center}
.ph-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0 16px}
.ph-stats div{min-width:92px;padding:10px;text-align:center;background:var(--pan);border:1px solid var(--ln);border-radius:8px;color:var(--mu);font-size:.8em}
.ph-stats b{display:block;font-size:1.6em;color:var(--tx)}
.ph-rev{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ph-rev li{display:grid;grid-template-columns:26px 1fr;column-gap:8px;padding:8px 10px;background:var(--pan);border-left:3px solid var(--ln);border-radius:4px}
.ph-rev li span{grid-row:span 2;font-weight:800;font-size:1.1em}
.ph-rev li em{font-style:normal;color:var(--mu);font-size:.82em}
.ph-rev li.ph-ok{border-left-color:var(--gn)} .ph-rev li.ph-ok span{color:var(--gn)}
.ph-rev li.ph-fa{border-left-color:var(--yl)} .ph-rev li.ph-fa span{color:var(--yl)}
.ph-rev li.ph-br,.ph-rev li.ph-bad{border-left-color:var(--rd)} .ph-rev li.ph-br span,.ph-rev li.ph-bad span{color:var(--rd)}
.ph-fail .ph-h{color:var(--rd)}
.ph-glitch .ph-app{animation:phGlitch .9s steps(6)}
@keyframes phGlitch{0%{filter:none}20%{filter:hue-rotate(90deg) contrast(1.6);transform:translateX(-6px)}40%{transform:translateX(5px)}60%{filter:invert(.15);transform:translateX(-3px)}100%{filter:none;transform:none}}
.ph-ending .ph-h{color:var(--yl)}

/* ---------- accessibility options ---------- */
.ph.ph-big{--fs:18px}
.ph.ph-hc{--bg:#000;--pan:#000;--pan2:#0b0b0b;--ln:#9aa7bb;--tx:#fff;--mu:#d6dde8}
.ph.ph-hc .ph-body{background:#fff;color:#000}
.ph.ph-rm *,.ph.ph-rm *::before,.ph.ph-rm *::after{animation:none!important;transition:none!important}
.ph.ph-nofl .ph-flash{display:none}
@media (prefers-reduced-motion:reduce){.ph *{animation:none!important;transition:none!important}}

/* ---------- small screens (phones in landscape, small tablets) ---------- */
@media (max-width:900px){
  .ph-cards{grid-template-columns:repeat(2,1fr)}
  .ph-tb span{display:none}
  .ph-brand span{display:none}
  .ph-top{gap:10px}
}
@media (max-height:500px){
  .ph{--fs:13px;min-height:0;height:calc(100svh - 64px)}
  .ph-top{padding:4px 10px;padding-right:52px}
  .ph-view{padding:10px 14px}
  .ph-li{padding:7px 10px}
  .ph-body{padding:10px 12px;margin:8px 0}
  .ph .ph-btn{padding:7px 12px}
  .ph-acts{padding:8px 0 12px}
  .ph-title,.ph-shifts,.ph-brief,.ph-report,.ph-fail,.ph-ending{padding:14px}
  .ph-logo{width:70px;height:54px}
  .ph-tmenu{grid-template-columns:1fr 1fr;max-width:460px}
  .ph-tmenu .ph-pri{grid-column:1/-1}
  .ph-sub{margin:6px 0 12px}
  .ph-scard{min-height:90px!important;padding:12px!important}
  .ph-cards{grid-template-columns:repeat(4,1fr)}
  .ph-qr{width:96px;height:96px}
  .ph-card{padding:14px 16px}
  .ph-grade{width:74px;height:74px;font-size:40px;margin:0 auto 8px}
}
@media (max-width:560px){
  .ph-desk{grid-template-columns:1fr;grid-template-rows:auto 34% 1fr auto;grid-template-areas:"top" "inbox" "view" "status"}
  .ph-inbox{border-right:0;border-bottom:1px solid var(--ln)}
  .ph-meter span{display:none}
}

@media (pointer:coarse){.ph kbd{display:none}}
@media (max-height:500px){
  .ph-acts{position:static;background:none;gap:6px}
  .ph-acts .ph-btn{flex:1 1 auto}
  .ph-toast{top:48px;bottom:auto;transform:translate(-50%,-10px)}
  .ph-toast.ph-on{transform:translate(-50%,0)}
}


/* ---------- Phish or Real?: hack sequence, stamps, push bombing ---------- */
.ph-view{position:relative}
.ph-stamp{position:absolute;left:50%;z-index:5;pointer-events:none;transform:translateX(-50%) rotate(-12deg);animation:phStamp .45s cubic-bezier(.2,1.6,.4,1) both}
.ph-stamp span{display:block;padding:10px 26px;border:6px double currentColor;border-radius:10px;font:900 clamp(26px,4vw,46px)/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(5,8,14,.55);box-shadow:0 0 30px currentColor}
.ph-st-r{color:#ff4d63} .ph-st-g{color:var(--gn)} .ph-st-y{color:var(--yl)}
@keyframes phStamp{0%{opacity:0;transform:translateX(-50%) rotate(-12deg) scale(2.6)}100%{opacity:1;transform:translateX(-50%) rotate(-12deg) scale(1)}}
.ph-pstack div{height:9px;margin:0 auto 3px;background:#1a2233;border-radius:6px;animation:phDrop .25s ease-out backwards}
.ph-push .ph-pcard{animation:phDrop .3s ease-out backwards}
@keyframes phDrop{from{opacity:0;transform:translateY(-14px) scale(.96)}}

/* glitch on the whole game while the attack lands */
.ph-glitching .ph-scr{animation:phTear .12s steps(2) infinite}
.ph-glitching .ph-app::before{content:"";position:absolute;inset:0;z-index:35;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,40,80,.18) 0 2px,transparent 2px 7px);mix-blend-mode:screen;animation:phScan .2s linear infinite}
@keyframes phTear{0%{transform:translate(0);filter:none}25%{transform:translate(-8px,2px) skewX(4deg);filter:hue-rotate(80deg) saturate(3)}50%{transform:translate(6px,-3px);filter:invert(.1) contrast(1.8)}75%{transform:translate(-3px,1px) skewX(-6deg);clip-path:inset(12% 0 30% 0)}100%{transform:translate(0)}}
@keyframes phScan{to{background-position:0 14px}}

.ph-hack{position:absolute;inset:0;z-index:40;background:#000;color:#ff4d63;overflow:auto}
.ph-hack.ph-pre{background:transparent}
.ph-off{display:flex;align-items:center;justify-content:center}
.ph-crt{width:100%;height:100%;background:#dfe9ff;animation:phCrt .55s ease-in forwards}
@keyframes phCrt{0%{transform:scale(1,1);opacity:1}45%{transform:scale(1,.004);opacity:1}75%{transform:scale(.004,.004);opacity:1;box-shadow:0 0 30px 8px #fff}100%{transform:scale(0,0);opacity:0}}
.ph-boot{padding:28px 32px}
.ph-boot pre{margin:0;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#b8c4d6;white-space:pre-wrap}
.ph-boot .ph-bad{color:#ff4d63;font-weight:700}
.ph-take{display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 40%,#2a0710,#000 70%);animation:phPulse 2.4s ease-in-out infinite}
.ph-take3{background:radial-gradient(circle at 50% 40%,#4a0612,#000 75%)}
@keyframes phPulse{50%{box-shadow:inset 0 0 120px rgba(255,40,70,.35)}}
.ph-tk{width:min(820px,100%);text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ph-raven{width:120px;height:80px;color:#ff4d63;filter:drop-shadow(0 0 16px rgba(255,77,99,.7))}
.ph-tkh{min-height:1.2em;margin:6px 0 16px;font:900 clamp(28px,5vw,58px)/1.05 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#ff4d63;letter-spacing:.04em;text-shadow:-3px 0 #29e6ff,3px 0 #ff2a4f,0 0 24px rgba(255,77,99,.6);animation:phJit 2.2s steps(1) infinite}
@keyframes phJit{0%,92%,100%{transform:none}93%{transform:translate(-4px,1px)}95%{transform:translate(4px,-1px)}97%{transform:translate(-2px,0)}}
.ph-tkgrid{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:20px;align-items:center;text-align:left}
.ph-cam{position:relative;border:2px solid #ff4d63;border-radius:4px;overflow:hidden;background:#000;box-shadow:0 0 24px rgba(255,77,99,.35)}
.ph-cam canvas{display:block;width:100%;height:auto;image-rendering:pixelated;filter:contrast(1.2)}
.ph-rec{position:absolute;top:6px;right:8px;font:700 12px ui-monospace,monospace;color:#ff3b4f;animation:phBlink 1s steps(1) infinite}
.ph-camlab{position:absolute;left:8px;bottom:6px;font:11px ui-monospace,monospace;color:#e8f0ff;text-shadow:0 1px 2px #000}
@keyframes phBlink{50%{opacity:0}}
.ph-tkl p{margin:0 0 10px;min-height:1.3em;font-size:1.02em;color:#ffd6dc}
.ph-tkl .ph-sig{color:#ff4d63;font-weight:700;letter-spacing:.2em}
.ph-cut{margin-top:22px;color:#b8c4d6;font-size:.9em}
.ph-cut i{display:block;height:6px;margin-top:8px;background:#1a0a0e;border-radius:3px;overflow:hidden}
.ph-cut b{display:block;height:100%;width:0;background:var(--ac);animation:phCut 1.7s linear forwards}
@keyframes phCut{to{width:100%}}
.ph .ph-skip{position:absolute;right:16px;bottom:14px;padding:6px 14px;background:transparent;color:#b8c4d6;border:1px solid #4a2a33;border-radius:6px;font:600 13px system-ui,sans-serif}
.ph .ph-skip:hover{color:#fff;border-color:#ff4d63}
.ph-rm .ph-take,.ph-nofl .ph-take,.ph-rm .ph-tkh,.ph-nofl .ph-tkh,.ph-nofl .ph-rec{animation:none}
@media (max-height:500px){.ph-raven{width:70px;height:46px}.ph-tkh{margin:2px 0 8px}.ph-tkgrid{grid-template-columns:200px 1fr;gap:12px}.ph-tkl p{margin-bottom:5px}.ph-cut{margin-top:10px}}
@media (max-width:560px){.ph-tkgrid{grid-template-columns:1fr}}

/* ---------- Phish or Real?: 3D title scene ---------- */
.ph-3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;outline:none;touch-action:none;display:none}
.ph-3don .ph-3d{display:block}
.ph-3don::after{display:none}
.ph-3don .ph-title,.ph-3don .ph-shifts{pointer-events:none;background:linear-gradient(90deg,rgba(3,6,12,.92) 0%,rgba(3,6,12,.7) 30%,rgba(3,6,12,.15) 58%,transparent 70%)}
.ph-3don .ph-title{justify-content:flex-start;align-items:center;padding-left:clamp(20px,6vw,90px)}
.ph-3don .ph-tbox,.ph-3don .ph-shifts>*{pointer-events:auto}
.ph-3don .ph-tbox{margin:0;text-align:left;max-width:520px;animation:phRise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes phRise{from{opacity:0;transform:translateX(-24px)}}
.ph-3don .ph-logo{width:84px;height:64px;margin-left:-6px}
.ph-3don .ph-tbox h2{font-size:clamp(30px,4.2vw,56px);text-align:left;position:relative;white-space:nowrap}
.ph-3don .ph-tbox h2::after{content:"PHISH or REAL?";position:absolute;inset:0;color:#ff4d63;opacity:0;clip-path:inset(40% 0 45% 0);animation:phTitleGl 6s steps(1) infinite;pointer-events:none;text-transform:uppercase}
@keyframes phTitleGl{0%,94%,100%{opacity:0;transform:none}95%{opacity:.9;transform:translateX(-6px)}97%{opacity:.7;transform:translateX(5px);clip-path:inset(10% 0 70% 0)}}
.ph-3don .ph-tag,.ph-3don .ph-sub{text-align:left}
.ph-3don .ph-tmenu{margin:0;max-width:340px;counter-reset:phm}
.ph-3don .ph-tmenu .ph-btn{position:relative;justify-content:flex-start;padding:12px 16px 12px 52px;background:rgba(8,14,26,.55);border:1px solid rgba(55,226,196,.18);border-left:3px solid rgba(55,226,196,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.14em;text-transform:uppercase;font-size:.9em;transition:transform .2s,background .2s,border-color .2s,letter-spacing .25s,box-shadow .2s}
.ph-3don .ph-tmenu .ph-btn::before{counter-increment:phm;content:"0" counter(phm);position:absolute;left:16px;color:var(--ac);font:700 .8em ui-monospace,monospace;opacity:.7}
.ph-3don .ph-tmenu .ph-btn:hover,.ph-3don .ph-tmenu .ph-btn:focus-visible{transform:translateX(8px);background:rgba(55,226,196,.14);border-color:var(--ac);letter-spacing:.2em;box-shadow:0 0 24px rgba(55,226,196,.2),-4px 0 0 var(--ac)}
.ph-3don .ph-tmenu .ph-btn.ph-pri{background:linear-gradient(90deg,rgba(55,226,196,.9),rgba(55,226,196,.55));color:#04201b;border-color:var(--ac)}
.ph-3don .ph-tmenu .ph-btn.ph-pri::before{color:#04201b}
.ph-3don .ph-shifts{background:rgba(3,6,12,.72)}
.ph-3dhud{position:absolute;right:16px;bottom:12px;z-index:3;display:none;padding:6px 12px;font:12px ui-monospace,monospace;color:#b8c4d6;background:rgba(3,6,12,.55);border:1px solid rgba(55,226,196,.2);border-radius:6px;pointer-events:none}
.ph-3dhud b{color:var(--ac)}
.ph-3don .ph-3dhud{display:block}
.ph-zoomflash .ph-app::after{content:"";position:absolute;inset:0;z-index:45;pointer-events:none;background:radial-gradient(circle at 60% 50%,rgba(210,255,248,.95),rgba(55,226,196,.5) 40%,rgba(0,0,0,0) 75%);animation:phZoom .7s ease-out forwards}
@keyframes phZoom{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.ph-rm .ph-3don .ph-tbox,.ph-rm .ph-tbox h2::after{animation:none}
@media (max-height:500px){
  .ph-3don .ph-title{padding-left:18px}
  .ph-3don .ph-tbox{max-width:360px}
  .ph-3don .ph-logo{width:54px;height:40px}
  .ph-3don .ph-tmenu{grid-template-columns:1fr 1fr;max-width:360px;gap:6px}
  .ph-3don .ph-tmenu .ph-btn{padding:8px 10px 8px 36px;letter-spacing:.06em;font-size:.82em}
  .ph-3don .ph-tmenu .ph-btn::before{left:10px}
  .ph-3dhud{display:none!important}
}
@media (max-width:560px){.ph-3don .ph-title{background:rgba(3,6,12,.75)}}

/* ---------- Phish or Real?: the Credits Shift ---------- */
.ph-credit{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0;padding:26px 18px;text-align:center;border:1px solid #d3dce1;border-radius:10px;background:linear-gradient(180deg,#f7fafb,#e9eff2);color:#14212a}
.ph-credit small{color:#5a6b75;font-size:.72em;letter-spacing:.3em;text-transform:uppercase}
.ph-credit b{font-size:1.45em;line-height:1.25;color:#0d1a22}
.ph-credit span{color:#4d5e68}
.ph-roll{max-height:min(46vh,420px);overflow:auto;margin:8px 0 16px;padding:14px 18px;border:1px solid var(--ln);border-radius:10px;background:var(--pan);text-align:center}
.ph-roll p{display:flex;flex-direction:column;margin:0 0 14px}
.ph-roll small{color:var(--mu);font-size:.68em;letter-spacing:.28em;text-transform:uppercase}
.ph-roll span{color:var(--mu);font-size:.85em}






























/* ==========================================================================
   SHARED STUDIO INTRO (all game pages)
   ========================================================================== */
.lgi{position:absolute;inset:0;z-index:9999;background-color:#000;color:#fff;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:background-color 1.2s ease,backdrop-filter 1.2s ease,-webkit-backdrop-filter 1.2s ease,opacity 1.2s ease}
.lgi.lgi-out{background-color:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);pointer-events:none}
.lgi-wait .lgi-skip,.lgi-wait .lgi-hint{display:none}
.lgi-stage{position:absolute;inset:0}
.lgi-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform 6s cubic-bezier(.2,.8,.2,1)}
.lgi-card.lgi-on{opacity:1;transform:scale(1)}
.lgi .lgi-skip{position:absolute;right:16px;bottom:14px;z-index:2;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(0,0,0,.4);color:rgba(255,255,255,.75);font:600 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.lgi .lgi-skip:hover,.lgi .lgi-skip:focus-visible{color:#fff;border-color:#fff;outline:none}
.lgi-hint{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;color:rgba(255,255,255,.3);font:11px system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.lgi-logo{max-width:min(420px,70vw);max-height:38vh;object-fit:contain;margin-bottom:18px;filter:drop-shadow(0 0 24px rgba(255,255,255,.12))}
.lgi-has-logo .lgi-rings,.lgi-has-logo .lgi-globe{display:none}

/* card 1 · powered by Babylon.js (name only, original animation) */
.lgi-babylon{background:radial-gradient(70% 60% at 50% 45%,#0e1a2c,#000 70%)}
.lgi-orb{width:min(150px,26vh);height:auto;margin-bottom:18px;fill:none;stroke:#cfe6ff;stroke-width:1.2;opacity:.9;animation:lgiSpin 2s linear both}
.lgi-orb *{stroke-dasharray:300;stroke-dashoffset:300;animation:lgiDraw 1s .1s ease forwards}
.lgi-orb .lgi-tilt{transform-origin:60px 60px;transform:rotate(35deg);stroke:#7fb8ff}
@keyframes lgiDraw{to{stroke-dashoffset:0}}
@keyframes lgiSpin{from{transform:rotate(-20deg)}to{transform:rotate(25deg)}}
.lgi-k{margin:0;font:600 12px system-ui,sans-serif;letter-spacing:.55em;text-transform:uppercase;color:#8fa9c4}
.lgi-bab{margin:8px 0 0;font:300 clamp(34px,6vw,64px)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.06em;background:linear-gradient(100deg,#fff 30%,#bcdcff 45%,#fff 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lgiShine 1.3s .25s ease both}
@keyframes lgiShine{from{background-position:100% 0}to{background-position:0 0}}
.lgi-s{margin:14px 0 0;font:12px system-ui,sans-serif;letter-spacing:.12em;color:#6f87a0}

/* card 2 · Studio Legion Networking, Inc. (site palette: #4af626 on black, RGB glitch, scanlines) */
.lgi-vcard{background:#000}
.lgi-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.lgi-studio{background:radial-gradient(60% 55% at 50% 50%,rgba(10,24,14,1),#000 72%);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.lgi-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(74,246,38,.035) 3px,rgba(74,246,38,.035) 4px);animation:lgiScan 6s linear infinite}
@keyframes lgiScan{to{background-position:0 100%}}
.lgi-rings{position:absolute;left:50%;top:50%;width:0;height:0}
.lgi-rings i{position:absolute;border-radius:50%;border:1px solid;transform:translate(-50%,-50%);animation:lgiRing 7s linear infinite}
.lgi-rings i:nth-child(1){width:min(46vh,340px);height:min(46vh,340px);border-color:rgba(136,68,255,.35)}
.lgi-rings i:nth-child(2){width:min(58vh,430px);height:min(58vh,430px);border-color:rgba(0,255,255,.22);animation-direction:reverse}
.lgi-rings i:nth-child(3){width:min(70vh,520px);height:min(70vh,520px);border-color:rgba(74,246,38,.18);border-style:dashed}
@keyframes lgiRing{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lgi-bar{position:relative;width:min(400px,62vw);height:3px;margin:14px 0;background:#4fd1b5;box-shadow:0 0 14px rgba(79,209,181,.55);transform:scaleX(0);animation:lgiLine .9s .15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lgiLine{to{transform:scaleX(1)}}
.lgi-sl{position:relative;margin:0;font:700 clamp(28px,5.4vw,62px)/1.12 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.05em;color:#fff;text-shadow:0 0 20px rgba(74,246,38,.3);opacity:0;animation:lgiUp .8s .35s ease forwards}
.lgi-sl2{animation-delay:.5s}
.lgi-sl::after{content:attr(data-t);position:absolute;inset:0;color:#4af626;opacity:0;animation:lgiGlitch 6s steps(1) both}
.lgi-sl2::after{animation-delay:.25s}
@keyframes lgiGlitch{0%,44%,48%,71%,74%,100%{opacity:0;transform:none;clip-path:none;text-shadow:none}
  45%{opacity:.95;transform:translateX(-4px);clip-path:inset(0 0 70% 0);text-shadow:2px 0 #f64a4a,-2px 0 #4a4af6}
  46%{opacity:.9;transform:translateX(3px);clip-path:inset(40% 0 40% 0);text-shadow:-2px 0 #4af626,2px 0 #f6d44a}
  47%{opacity:.8;transform:translateX(-2px);clip-path:inset(70% 0 10% 0);text-shadow:3px 0 #f64a4a,-3px 0 #00ffff}
  72%{opacity:.9;transform:translateX(4px);clip-path:inset(20% 0 60% 0);text-shadow:-1px 0 #4af626,1px 0 #f64a4a}
  73%{opacity:.7;transform:translateX(-3px);clip-path:inset(55% 0 25% 0)}}
.lgi-sub{margin:18px 0 0;font:500 clamp(11px,1.3vw,14px) ui-monospace,monospace;letter-spacing:.18em;color:#c9e8cf;opacity:0;animation:lgiUp .8s 1.2s ease forwards}
.lgi-cur{color:#4af626;margin-left:2px;animation:lgiBlink .8s infinite}
@keyframes lgiBlink{50%{opacity:0}}
@keyframes lgiUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* card 3 · Legion Bridget Intellectus Il Mondo */
.lgi-lbim{background:radial-gradient(70% 60% at 50% 45%,#08221f,#000 70%)}
.lgi-globe{width:min(130px,22vh);height:auto;margin-bottom:22px;fill:none;stroke:#e3c27a;stroke-width:1.1}
.lgi-globe *{stroke-dasharray:320;stroke-dashoffset:320;animation:lgiDraw 1.8s .15s ease forwards}
.lgi-lb{margin:0;max-width:16em;font:400 clamp(24px,4.2vw,48px)/1.2 Georgia,"Times New Roman",serif;letter-spacing:.04em;color:#f3ead2;opacity:0;animation:lgiUp 1.2s .6s ease forwards}
.lgi-lb span{display:block;margin-top:6px;font-style:italic;color:#e3c27a}
.lgi-pr{margin:22px 0 0;font:12px system-ui,sans-serif;letter-spacing:.6em;margin-right:-.6em;text-transform:uppercase;color:#8fb3aa;opacity:0;animation:lgiUp .9s 1.6s ease forwards}
.lgi-rm *{animation-duration:.01ms!important;animation-delay:0s!important}
.lgi-rm .lgi-card{transform:none!important}
@media (max-height:500px){.lgi-orb,.lgi-globe{width:90px;margin-bottom:10px}.lgi-line{margin-bottom:14px}.lgi-hint{display:none}}













/* ==========================================================================
   OPEN WIDE - Dentistry Training. Scoped to .dx
   ========================================================================== */
.dx{--ac:#5be6d6;--ac2:#ffcf70;--tx:#eef6f7;--mu:#9fb3bb;--pn:rgba(6,14,20,.72);--ln:rgba(91,230,214,.22);--fs:15px;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:420px;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 30%,#11303a,#03080b 70%);color:var(--tx);font:var(--fs)/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}
.dx:fullscreen{width:100vw;height:100vh;height:100dvh;margin:0;min-height:0}
.dx.dx-ffs{position:fixed;inset:0;z-index:5000;width:100vw;height:100vh;height:100dvh;margin:0;min-height:0}
html.dx-noscroll,html.dx-noscroll body{overflow:hidden}
.dx *{box-sizing:border-box}
.dx button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.dx button:focus-visible,.dx input:focus-visible,.dx a:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.dx a{color:var(--ac)}
.dx-hide{display:none!important}
.dx-cv{position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:none}
.dx-2d .dx-cv{display:none}
.dx-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.dx-ui>*{pointer-events:auto}
.dx kbd{display:inline-block;min-width:1.7em;padding:1px 6px;margin-right:6px;border:1px solid rgba(238,246,247,.45);border-radius:4px;font:600 .72em/1.5 ui-monospace,monospace;text-align:center}

/* logo */
.dx-logo{font:200 clamp(30px,4.6vw,64px)/.95 "Segoe UI",system-ui,sans-serif;letter-spacing:.32em;color:#fff;text-shadow:0 0 30px rgba(91,230,214,.35)}
.dx-logo b{font-weight:800;letter-spacing:.12em;color:var(--ac);margin-left:.15em}
.dx-logo.dx-big{font-size:clamp(44px,8vw,120px)}
.dx-ltag{margin:12px 0 0;color:var(--mu);font-size:.78em;letter-spacing:.38em;text-transform:uppercase}

/* loading */
.dx-load{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(90% 70% at 50% 40%,#0b2128,#020507);transition:opacity .8s}
.dx-load.dx-out{opacity:0}
.dx-lbox{width:min(560px,86%);text-align:center}
.dx-bar{position:relative;height:2px;margin:46px 0 14px;background:rgba(255,255,255,.08);overflow:visible}
.dx-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,transparent,var(--ac));box-shadow:0 0 12px var(--ac);transition:width .4s ease}
.dx-bar i::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px var(--ac)}
.dx-lstat{margin:0;color:var(--mu);font-size:.8em;letter-spacing:.2em;text-transform:uppercase}
.dx-tip{margin:26px auto 0;max-width:46ch;color:#cfe3e6;font-size:.95em;min-height:3em}
.dx-err .dx-lstat{color:var(--ac2);letter-spacing:.04em;text-transform:none;font-size:1em}

/* splash */
.dx-splash{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  background:radial-gradient(60% 60% at 50% 55%,rgba(0,0,0,.15),rgba(0,0,0,.65));transition:opacity .7s,transform .7s}
.dx-splash.dx-out{opacity:0;transform:scale(1.04)}
.dx-press{margin-top:48px;font-size:.85em;letter-spacing:.5em;text-transform:uppercase;color:#fff;animation:dxPulse 2.2s ease-in-out infinite}
@keyframes dxPulse{50%{opacity:.25}}

/* main menu */
.dx-menu{position:absolute;left:0;top:0;bottom:0;width:min(520px,46%);padding:clamp(24px,7vh,80px) clamp(22px,4.5vw,72px);display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(2,6,9,.9) 0%,rgba(2,6,9,.62) 55%,transparent 100%);animation:dxIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes dxIn{from{opacity:0;transform:translateX(-30px)}}
.dx-menu ul{list-style:none;margin:clamp(20px,6vh,56px) 0 0;padding:0}
.dx-mi{position:relative;display:grid;grid-template-columns:44px 1fr;align-items:center;width:100%;padding:12px 0 12px 0;text-align:left;overflow:hidden}
.dx-mn{font:600 .72em ui-monospace,monospace;color:var(--ac);opacity:.65}
.dx-ml{font:300 clamp(18px,2.1vw,28px)/1.1 "Segoe UI",system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#d9e6e8;transition:color .2s,letter-spacing .35s,transform .35s}
.dx-mi small{grid-column:2;max-height:0;opacity:0;overflow:hidden;color:var(--mu);font-size:.82em;letter-spacing:.06em;transition:max-height .35s,opacity .35s,margin .35s}
.dx-mi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(91,230,214,.16),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.dx-mi::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--ac);box-shadow:0 0 12px var(--ac);transform:scaleY(0);transition:transform .3s}
.dx-mi:hover::before,.dx-mi:focus-visible::before{transform:scaleX(1)}
.dx-mi:hover::after,.dx-mi:focus-visible::after{transform:scaleY(1)}
.dx-mi:hover .dx-ml,.dx-mi:focus-visible .dx-ml{color:#fff;letter-spacing:.34em;transform:translateX(10px);text-shadow:0 0 18px rgba(91,230,214,.55)}
.dx-mi:hover small,.dx-mi:focus-visible small{max-height:3em;opacity:1;margin-top:4px;transform:translateX(10px)}
.dx .dx-mi:focus-visible,.dx .dx-card:focus-visible{outline:none}
.dx-mi[aria-disabled="true"] .dx-ml{color:#7f9196}
.dx-soon{grid-column:2;justify-self:start;margin-top:4px;padding:1px 8px;font:700 .62em/1.6 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:#07211e;background:var(--ac2);border-radius:3px}
.dx-ver{margin-top:auto;color:rgba(159,179,187,.6);font:.72em ui-monospace,monospace;letter-spacing:.12em}

/* panels */
.dx-panel{position:absolute;top:0;bottom:0;right:0;width:min(780px,62%);display:flex;flex-direction:column;padding:clamp(20px,5vh,56px) clamp(20px,3.5vw,56px);
  background:linear-gradient(270deg,rgba(3,9,13,.92),rgba(3,9,13,.82) 70%,rgba(3,9,13,.4));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);
  border-left:1px solid var(--ln);animation:dxPanel .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes dxPanel{from{opacity:0;transform:translateX(40px)}}
.dx-panel.dx-confirm{left:50%;top:50%;bottom:auto;right:auto;width:min(480px,90%);transform:translate(-50%,-50%);border:1px solid var(--ln);border-radius:10px;animation:dxPop .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes dxPop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.dx-sub .dx-menu{opacity:.25;filter:blur(2px);pointer-events:none}
.dx-ph h2{margin:0;font:200 clamp(24px,3vw,40px)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.dx-ph p{margin:10px 0 0;color:var(--mu)}
.dx-pf{display:flex;gap:12px;justify-content:flex-end;padding-top:18px;margin-top:auto}
.dx-pb{padding:11px 22px;border:1px solid rgba(238,246,247,.3)!important;border-radius:4px;letter-spacing:.18em;text-transform:uppercase;font-size:.8em!important;transition:background .2s,border-color .2s}
.dx-pb:hover,.dx-pb:focus-visible{background:rgba(91,230,214,.12)!important;border-color:var(--ac)!important}
.dx-pb.dx-pri{background:var(--ac)!important;color:#03201c!important;border-color:var(--ac)!important;font-weight:700}

/* map cards */
.dx-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px;overflow:auto;padding:4px}
.dx-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:160px;padding:18px;text-align:left;border:1px solid rgba(238,246,247,.14)!important;border-radius:8px;
  background:linear-gradient(160deg,rgba(91,230,214,.07),rgba(255,255,255,.02))!important;transition:transform .3s,border-color .3s,box-shadow .3s}
.dx-card:hover,.dx-card:focus-visible{transform:translateY(-3px);border-color:var(--ac)!important;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(91,230,214,.3)}
.dx-card b{font-size:1.25em;letter-spacing:.06em}
.dx-cn{position:absolute;right:16px;top:12px;font:800 2.4em/1 "Segoe UI",sans-serif;color:rgba(91,230,214,.13)}
.dx-ca{color:var(--ac);font-size:.72em;letter-spacing:.2em;text-transform:uppercase}
.dx-cd{color:var(--mu);font-size:.9em}
.dx-card .dx-soon{margin-top:auto;align-self:flex-start}

/* options */
.dx-tabs{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid var(--ln);flex-wrap:wrap}
.dx-tab{padding:10px 16px;letter-spacing:.2em;text-transform:uppercase;font-size:.78em!important;color:var(--mu)!important;border-bottom:2px solid transparent!important;transition:color .2s,border-color .2s}
.dx-tab.dx-on,.dx-tab:hover{color:#fff!important;border-bottom-color:var(--ac)!important}
.dx-rows{flex:1;overflow:auto;margin-top:10px;padding-right:6px}
.dx-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.dx-row:hover{background:rgba(91,230,214,.04)}
.dx-rl small{display:block;color:var(--mu);font-size:.82em}
.dx-rc{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.dx-tgl{min-width:72px;padding:6px 12px;border:1px solid rgba(238,246,247,.3)!important;border-radius:20px;font-size:.78em!important;letter-spacing:.16em;text-transform:uppercase}
.dx-tgl.dx-on{background:var(--ac)!important;color:#03201c!important;border-color:var(--ac)!important;font-weight:700}
.dx-sel{display:flex;align-items:center;gap:6px}
.dx-sel b{min-width:150px;text-align:center;font-weight:600;letter-spacing:.08em}
.dx-arr{width:30px;height:30px;border:1px solid rgba(238,246,247,.3)!important;border-radius:50%;font-size:1.1em!important;line-height:1}
.dx-arr:hover{border-color:var(--ac)!important;color:var(--ac)!important}
.dx input[type=range]{width:180px;accent-color:var(--ac)}
.dx output{min-width:44px;text-align:right;font:.85em ui-monospace,monospace;color:var(--mu)}
.dx-info{max-width:360px;color:var(--mu);font-size:.88em;text-align:right}

/* credits */
.dx-cred{flex:1;overflow:auto;margin-top:16px;padding-right:6px;user-select:text}
.dx-cred h3{margin:18px 0 8px;color:var(--ac);font-size:.72em;letter-spacing:.28em;text-transform:uppercase}
.dx-cred p{display:flex;flex-direction:column;margin:0 0 10px}
.dx-cred span{color:var(--mu);font-size:.85em}

/* subtitles, hints, flash, fullscreen */
.dx-subs{position:absolute;left:50%;bottom:clamp(56px,10vh,96px);transform:translate(-50%,10px);max-width:min(760px,86%);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;text-align:center}
.dx-subs span{display:inline-block;padding:8px 16px;background:rgba(0,0,0,.62);border-radius:4px;font-size:1.02em}
.dx-subs b{color:var(--ac2)}
.dx-subs.dx-on{opacity:1;transform:translate(-50%,0)}
.dx-nosubs .dx-subs{display:none}
.dx-sub .dx-subs{left:clamp(16px,3vw,40px);transform:none;max-width:min(520px,34%);text-align:left}
.dx-sub .dx-subs.dx-on{transform:none}
.dx-hints{position:absolute;right:clamp(16px,3vw,40px);bottom:16px;display:flex;gap:18px;color:var(--mu);font-size:.75em;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.dx-flash{position:absolute;inset:0;z-index:30;pointer-events:none;background:#fff;opacity:0}
.dx .dx-fs{position:absolute;top:10px;right:12px;z-index:25;width:38px;height:34px;background:rgba(0,0,0,.4);border:1px solid rgba(238,246,247,.25);border-radius:6px;font-size:18px;line-height:1;color:#fff}
.dx .dx-fs:hover{border-color:var(--ac)}
.dx-2d{background:radial-gradient(120% 90% at 70% 30%,#163f49,#03080b 70%)}

/* accessibility */
.dx.dx-bigt{--fs:18px}
.dx.dx-hc{--mu:#d9e4e6;--pn:rgba(0,0,0,.95)}
.dx.dx-hc .dx-menu{background:rgba(0,0,0,.92)}
.dx.dx-hc .dx-panel{background:#000}
.dx.dx-rm *,.dx.dx-rm *::before,.dx.dx-rm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.dx *{animation:none!important;transition:none!important}}

/* phones in landscape */
@media (max-height:500px){
  .dx{--fs:13px;min-height:0}
  .dx-menu{width:min(380px,48%);padding:14px 22px}
  .dx-menu ul{margin-top:12px}
  .dx-mi{padding:6px 0}
  .dx-mi small{display:none}
  .dx-panel{width:68%;padding:14px 20px}
  .dx-cards{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
  .dx-card{min-height:0;padding:10px}
  .dx-cd{display:none}
  .dx-row{padding:7px 2px}
  .dx input[type=range]{width:120px}
  .dx-sel b{min-width:96px}
  .dx-hints{display:none}
  .dx-bar{margin-top:24px}
  .dx-press{margin-top:22px}
  .dx-ph h2{font-size:20px}
  .dx-ph p{margin-top:4px;font-size:.9em}
  .dx-tabs{margin-top:8px}
  .dx-tab{padding:6px 10px}
  .dx-subs{left:auto;right:12px;bottom:10px;transform:none;max-width:44%;text-align:right}
  .dx-subs.dx-on{transform:none}
  .dx-pf{padding-top:8px}
  .dx-pb{padding:8px 14px}
}
@media (max-width:640px){.dx-menu{width:100%;background:rgba(2,6,9,.8)}.dx-panel{width:100%}.dx-cards{grid-template-columns:1fr}}

/* ---------- play HUD (maps) ---------- */
.dx-hud{position:absolute;inset:0;pointer-events:none!important;z-index:4}
.dx-hud button,.dx-cd2{pointer-events:auto}
.dx-playing .dx-subs{left:clamp(14px,2.5vw,32px);bottom:clamp(14px,3vh,28px);transform:none;max-width:min(520px,44%);text-align:left}
.dx-playing .dx-subs.dx-on{transform:none}
.dx-top{position:absolute;left:clamp(10px,2vw,24px);top:10px;right:64px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.dx-pause{width:36px;height:34px;border:1px solid rgba(238,246,247,.3)!important;border-radius:6px;background:rgba(0,0,0,.4)!important;font-size:12px!important;letter-spacing:1px}
.dx-pause:hover{border-color:var(--ac)!important}
.dx-tt{font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:.9em}
.dx-obj{color:#d4e6e8;font-size:.92em;padding:4px 10px;background:rgba(0,0,0,.35);border-left:2px solid var(--ac);border-radius:2px;max-width:56ch}
.dx-obj:empty{display:none}
.dx-stat{display:flex;gap:8px;margin-left:auto}
.dx-stat span{padding:4px 10px;border:1px solid var(--ln);border-radius:14px;background:rgba(3,9,13,.55);font:600 .8em ui-monospace,monospace;letter-spacing:.06em}
.dx-timer{position:absolute;left:50%;top:52px;width:76px;height:76px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dx-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dx-timer circle{fill:rgba(3,9,13,.55);stroke:rgba(255,255,255,.12);stroke-width:3}
.dx-timer .dx-tp{fill:none;stroke:var(--ac);stroke-dasharray:100;stroke-linecap:round;transition:stroke-dashoffset .25s linear;filter:drop-shadow(0 0 4px var(--ac))}
.dx-timer b{position:relative;font:700 1.2em ui-monospace,monospace}
.dx-timer small{position:relative;font-size:.62em;color:var(--mu);letter-spacing:.1em;text-transform:uppercase}
.dx-cw{position:absolute;right:clamp(10px,2.5vw,32px);top:56px;bottom:56px;width:min(440px,42%);display:flex;align-items:center;pointer-events:none}
.dx-cw.dx-left{right:auto;left:clamp(10px,2.5vw,32px)}
.dx-cw.dx-center{left:50%;right:auto;transform:translateX(-50%);width:min(480px,92%)}
.dx-cd2{width:100%;max-height:100%;overflow:auto;padding:20px 22px;background:linear-gradient(160deg,rgba(6,18,24,.92),rgba(3,9,13,.88));border:1px solid var(--ln);border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:dxCard .45s cubic-bezier(.2,.8,.2,1) both;user-select:text}
@keyframes dxCard{from{opacity:0;transform:translateY(14px) scale(.98)}}
.dx-kick{margin:0 0 6px;color:var(--ac);font:700 .7em/1.4 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}
.dx-cd2 h3{margin:0 0 10px;font-size:1.22em;line-height:1.3;font-weight:600}
.dx-bt{margin:0 0 12px;color:#cfe0e3}
.dx-bt b{color:#fff}
.dx-ch{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dx-ch .dx-pb{text-align:left;text-transform:none;letter-spacing:.02em;font-size:.95em!important;padding:11px 14px;display:flex;align-items:center;gap:10px}
.dx-ch .dx-pb.dx-pri{justify-content:center;text-transform:uppercase;letter-spacing:.16em;font-size:.82em!important}
.dx-ch4 .dx-pb{padding:9px 12px}
.dx-src{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);color:var(--mu);font-size:.74em}
.dx-good .dx-kick{color:#7dffa6}.dx-bad .dx-kick{color:#ffb070}
.dx-good{border-color:rgba(125,255,166,.35)}.dx-bad{border-color:rgba(255,176,112,.35)}
.dx-ic{font-size:1.4em;line-height:1}
.dx-sw{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.6)}
.dx-food{font-size:64px;line-height:1;text-align:center;margin:4px 0 8px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.dx-xs{display:block;width:min(230px,80%);margin:6px auto 4px}
.dx-diag .dx-ch{display:grid;grid-template-columns:1fr 1fr}
.dx-steps .dx-pb{font-size:.9em!important}
.dx-cat{margin:0;padding-left:18px;color:#cfe0e3;font-size:.9em}
.dx-cat li{margin-bottom:4px}.dx-cat b{color:#fff;margin-right:6px}
.dx-log{list-style:none;margin:0;padding:0}
.dx-log li{padding:6px 10px;margin-bottom:6px;border-left:3px solid;border-radius:2px;background:rgba(255,255,255,.03)}
.dx-log li small{display:block;color:var(--mu);font-size:.75em;letter-spacing:.08em;text-transform:uppercase}
.dx-log .dx-ok{border-color:#7dffa6}.dx-log .dx-no{border-color:#ff8a70}
.dx-res{text-align:center}
.dx-stars{display:flex;justify-content:center;gap:10px;margin:6px 0 14px}
.dx-stars i{font-style:normal;font-size:46px;line-height:1;color:rgba(255,255,255,.12)}
.dx-stars i.dx-on{color:var(--ac2);text-shadow:0 0 18px rgba(255,207,112,.6);animation:dxStar .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes dxStar{from{transform:scale(0) rotate(-40deg);opacity:0}}
.dx-rl2{list-style:none;margin:0 0 10px;padding:0;text-align:left}
.dx-rl2 li{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.dx-rl2 span{color:var(--mu)}
.dx-best{color:var(--ac2);font-size:.85em;margin:4px 0 0}
.dx-res .dx-ch{flex-direction:row;flex-wrap:wrap;justify-content:center}
.dx-res .dx-ch .dx-pb{justify-content:center;text-transform:uppercase;letter-spacing:.12em;font-size:.78em!important}
.dx-toast{position:absolute;left:50%;top:26%;transform:translate(-50%,0) scale(.8);opacity:0;pointer-events:none;font:800 clamp(22px,3.4vw,40px)/1.1 "Segoe UI",system-ui,sans-serif;letter-spacing:.06em;color:#fff;text-shadow:0 0 20px rgba(91,230,214,.7),0 2px 8px rgba(0,0,0,.8);text-align:center;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1)}
.dx-toast.dx-on{opacity:1;transform:translate(-50%,0) scale(1)}
.dx-toast.dx-perfect{color:#ffe08a;text-shadow:0 0 22px rgba(255,207,112,.8),0 2px 8px #000}
.dx-toast.dx-off{color:#ffb98a;font-size:clamp(16px,2vw,24px)}
.dx-toast.dx-goodt{color:#9dffbd}
.dx-toast.dx-zone{font-size:clamp(18px,2.4vw,30px)}
.dx-ret{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:2px solid var(--ac);border-radius:50%;box-shadow:0 0 12px var(--ac);pointer-events:none!important}
.dx-ret::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff}
.dx-prompt{position:absolute;left:50%;bottom:clamp(64px,14vh,120px);transform:translateX(-50%);padding:10px 18px;border:1px solid var(--ac)!important;border-radius:6px;background:rgba(3,9,13,.75)!important;font-size:.95em!important;letter-spacing:.06em;box-shadow:0 0 20px rgba(91,230,214,.25);animation:dxCard .3s both}
.dx-fp .dx-cv{cursor:crosshair}
.dx-fp .dx-hud::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 6px rgba(0,0,0,.8)}
.dx-joy{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;left:90px;top:auto;bottom:40px;border:2px solid rgba(255,255,255,.25);border-radius:50%;opacity:.5;pointer-events:none!important;transition:opacity .2s}
.dx-joy.dx-on{opacity:.9}
.dx-joy i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(91,230,214,.5);box-shadow:0 0 16px rgba(91,230,214,.5)}
.dx-xbtn{position:absolute;right:clamp(10px,2.5vw,32px);bottom:clamp(16px,4vh,40px);padding:10px 16px;border:1px solid var(--ac2)!important;border-radius:6px;background:rgba(30,20,0,.6)!important;color:#ffe3a8!important;font-size:.9em!important}
.dx-xray .dx-cv{filter:grayscale(1) invert(.92) contrast(1.35) brightness(.95);transition:filter .5s}
.dx-cv{transition:filter .5s}
.dx-cst{margin-top:auto;font-size:1.1em;letter-spacing:.2em;color:var(--ac2)}
.dx-cst i{font-style:normal;color:rgba(255,255,255,.15)}
.dx-pfv{flex-direction:column;align-items:stretch}
.dx-hc .dx-cd2{background:#000}

/* ---------- Clean the Credits ---------- */
.dx-cc{position:relative;flex:1;min-height:180px;margin-top:16px;border-radius:10px;overflow:hidden;border:1px solid var(--ln);background:rgba(3,9,13,.6);outline:none}
.dx-cc:focus-visible{box-shadow:0 0 0 2px var(--ac)}
.dx-ccard{position:absolute;inset:0;padding:22px 26px;overflow:auto;user-select:text}
.dx-ccard h3{margin:0 0 12px;color:var(--ac);font-size:.78em;letter-spacing:.28em;text-transform:uppercase}
.dx-ccard p{display:flex;flex-direction:column;margin:0 0 12px}
.dx-ccard span{color:var(--mu);font-size:.85em}
.dx-ccv{position:absolute;inset:0;width:100%;height:100%;cursor:none;touch-action:none;transition:opacity .9s}
.dx-brushc{position:absolute;left:-18px;top:-18px;font-size:34px;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.dx-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dx-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15)}
.dx-dots i.dx-on{background:var(--ac)}
.dx-dots i.dx-cur{background:var(--ac2);box-shadow:0 0 8px var(--ac2)}

@media (max-height:500px){
  .dx-cw{top:44px;bottom:8px;width:min(400px,50%)}
  .dx-cd2{padding:12px 14px}
  .dx-cd2 h3{font-size:1.05em;margin-bottom:6px}
  .dx-ch{gap:5px;margin-top:8px}
  .dx-ch .dx-pb{padding:7px 10px}
  .dx-food{font-size:40px}
  .dx-xs{width:150px}
  .dx-timer{top:44px;width:58px;height:58px}
  .dx-stars i{font-size:32px}
  .dx-obj{max-width:40ch;font-size:.85em}
  .dx-playing .dx-subs{max-width:44%}
}
@media (max-width:640px){.dx-cw,.dx-cw.dx-left{left:8px;right:8px;width:auto}.dx-diag .dx-ch{grid-template-columns:1fr}}

/* Open Wide · Today at the clinic (appointment board) */
.dx-day{grid-template-columns:repeat(4,1fr);grid-auto-rows:max-content;align-content:start;min-height:0;flex:1 1 auto}
.dx-appt{min-height:0;height:auto;gap:4px;padding:12px 12px 10px;overflow:hidden}
.dx-appt .dx-cd{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dx-appt .dx-cst{margin-top:2px}
.dx-appt .dx-at{display:flex;align-items:center;gap:8px;font:700 .8em "Segoe UI",sans-serif;color:var(--ac)}
.dx-appt .dx-at b{font-size:1.25em;letter-spacing:.04em}
.dx-appt .dx-at em{font-style:normal;font-size:.8em;padding:2px 7px;border-radius:999px;background:rgba(255,107,107,.18);color:#ff8f8f;letter-spacing:.1em;text-transform:uppercase}
.dx-appt .dx-aw{font-size:.86em;color:var(--mu)}
.dx-appt .dx-aw b{color:inherit;font-size:1em;letter-spacing:0;color:#eef6f7}
.dx-appt>b{font-size:1.08em}
.dx-appt .dx-cd{font-size:.82em;line-height:1.4}
.dx-urgent{border-color:rgba(255,120,120,.45)!important}
.dx-seen{opacity:.86}
.dx-dayp{color:var(--ac);font-weight:700;margin-left:6px}
@media (max-width:1100px){.dx-day{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dx-day{grid-template-columns:1fr}}
@media (max-height:520px){.dx-appt .dx-cd,.dx-appt .dx-ca{display:none}.dx-appt{padding:8px 10px}.dx-appt>b{font-size:.98em}.dx-day{gap:6px}}


/* ==========================================================================
   STILL HERE - Clinical Psychology Practice. Scoped to .cp
   Cinematic UI: letterbox, subtitles, choice wheel, observe markers, phone,
   journal, flowchart. Always dark (it is a film), sized to the game box.
   ========================================================================== */
.cp{--ac:#5fe0f0;--wm:#ffcf8a;--gd:#7ef0a8;--bd:#ff8b8b;--tx:#eef4f7;--mu:#9fb2bd;--pn:rgba(6,10,14,.82);
  position:relative;width:100%;aspect-ratio:16/9;max-height:88vh;margin:0 auto;overflow:hidden;background:#000;border-radius:14px;color:var(--tx);
  font:400 clamp(12px,1.25vw,16px)/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none;isolation:isolate}
.cp:fullscreen{max-height:none;border-radius:0}
.cp *{box-sizing:border-box}
.cp button{font:inherit;color:inherit;cursor:pointer}
.cp-cv{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
.cp-ui{position:absolute;inset:0;pointer-events:none}
.cp-ui>*{pointer-events:auto}
.cp-hide{display:none!important}
.cp.cp-bigt{font-size:clamp(14px,1.5vw,19px)}
/* letterbox */
.cp-bars{pointer-events:none!important}
.cp-bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .9s cubic-bezier(.6,0,.2,1)}
.cp-bars i:first-child{top:0}.cp-bars i:last-child{bottom:0}
.cp-bars.cp-on i{height:9%}
.cp-bars.cp-on.cp-tight i{height:6%}
.cp-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none!important;transition:opacity .6s ease}
.cp-fade.cp-on{opacity:1}
/* loading + splash */
.cp-load,.cp-splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 40%,#0c1a22,#000 70%);text-align:center;padding:20px}
.cp-load.cp-out{opacity:0;transition:opacity .8s}
.cp-logo{font:200 clamp(28px,5vw,64px)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.32em;padding-left:.32em}
.cp-logo b{font-weight:800;color:var(--ac);letter-spacing:.18em;margin-left:.25em}
.cp-logo.cp-big{font-size:clamp(34px,7vw,92px)}
.cp-ltag{margin:0;color:var(--mu);letter-spacing:.3em;text-transform:uppercase;font-size:.75em}
.cp-lbar{width:min(360px,60%);height:2px;background:rgba(255,255,255,.12);margin-top:18px}
.cp-lbar i{display:block;height:100%;width:0;background:var(--ac);transition:width .4s;box-shadow:0 0 12px var(--ac)}
.cp-lmsg{margin:0;font-size:.8em;color:var(--mu)}
.cp-tip{margin:14px 0 0;max-width:460px;font-style:italic;color:#cfe;opacity:.8}
.cp-err .cp-lmsg{color:var(--wm)}
.cp-splash{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.65));cursor:pointer}
.cp-press{margin-top:40px;letter-spacing:.4em;text-transform:uppercase;font-size:.78em;animation:cpPulse 2.2s ease-in-out infinite}
@keyframes cpPulse{50%{opacity:.35}}
/* main menu */
.cp-menu{position:absolute;left:0;top:0;bottom:0;width:min(420px,44%);padding:clamp(18px,5vh,56px) clamp(18px,3vw,48px);background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.35) 75%,transparent);display:flex;flex-direction:column;justify-content:center}
.cp-menu .cp-logo{font-size:clamp(22px,3.2vw,44px);text-align:left;padding-left:0}
.cp-menu .cp-ltag{text-align:left;margin:6px 0 clamp(14px,4vh,40px)}
.cp-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cp-mi{width:100%;display:grid;grid-template-columns:2.4em 1fr;grid-template-rows:auto auto;column-gap:6px;text-align:left;background:transparent;border:0;border-left:2px solid transparent;padding:8px 10px;transition:background .2s,border-color .2s,padding .2s}
.cp-mn{grid-row:1/3;color:var(--ac);font-weight:700;font-size:.8em;padding-top:.25em;opacity:.7}
.cp-ml{font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cp-mi small{color:var(--mu);font-size:.78em;max-height:0;overflow:hidden;transition:max-height .25s}
.cp-mi:hover,.cp-mi:focus-visible{background:linear-gradient(90deg,rgba(95,224,240,.16),transparent);border-color:var(--ac);padding-left:16px;outline:none}
.cp-mi:hover small,.cp-mi:focus-visible small{max-height:3em}
.cp-mi-help .cp-ml{color:var(--wm)}
.cp-ver{margin-top:auto;color:var(--mu);font-size:.7em;letter-spacing:.12em}
/* panels */
.cp-panel{position:absolute;top:0;bottom:0;right:0;width:min(820px,66%);padding:clamp(16px,4.5vh,48px) clamp(16px,3vw,46px);background:linear-gradient(270deg,rgba(2,6,9,.94),rgba(2,6,9,.86) 80%,rgba(2,6,9,.6));display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px)}
.cp-panel.cp-pp,.cp-panel.cp-ep,.cp-panel.cp-wp{left:0;right:0;width:auto;background:rgba(2,6,9,.9)}
.cp-ph h2{margin:0;font-weight:300;font-size:clamp(20px,2.6vw,34px);letter-spacing:.24em;text-transform:uppercase}
.cp-ph p{margin:8px 0 0;color:var(--mu);max-width:640px}
.cp-ph b{color:var(--tx)}
.cp-kick{color:var(--ac)!important;letter-spacing:.24em;text-transform:uppercase;font-size:.75em}
.cp-pf{margin-top:auto;padding-top:14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cp-pb{background:rgba(255,255,255,.04);border:1px solid rgba(238,246,247,.2);padding:9px 18px;border-radius:4px;letter-spacing:.14em;text-transform:uppercase;font-size:.8em;transition:background .2s,border-color .2s,color .2s}
.cp-pb:hover,.cp-pb:focus-visible{border-color:var(--ac);color:#fff;background:rgba(95,224,240,.14);outline:none}
.cp-pb.cp-pri{background:var(--ac);color:#021015;border-color:var(--ac);font-weight:700}
.cp-pb.cp-pri:hover,.cp-pb.cp-pri:focus-visible{background:#9af2fb;color:#021015}
.cp-pm{display:flex;flex-direction:column;gap:10px;max-width:340px;margin-top:22px}
.cp-pm .cp-pb{text-align:left;padding:12px 16px}
/* chapters */
.cp-chs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;overflow:auto;padding:3px}
.cp-chc{position:relative;isolation:isolate;background-color:#05080b;display:flex;flex-direction:column;gap:6px;min-height:220px;padding:16px;text-align:left;border:1px solid rgba(238,246,247,.14);border-radius:8px;background-size:cover;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.cp-chc::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.9}
.cp-art-sunset::before{background:linear-gradient(180deg,#2b1f4a 0%,#c4584f 48%,#f2a65d 62%,#1a1418 100%)}
.cp-art-room::before{background:linear-gradient(180deg,#08121a 0%,#173040 50%,#0d1a20 100%)}
.cp-art-night::before{background:radial-gradient(circle at 75% 20%,#dfe8ff 0 3%,transparent 4%),linear-gradient(180deg,#02040c 0%,#13224a 55%,#03050b 100%)}
.cp-chc::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.1) 70%)}
.cp-chc:hover,.cp-chc:focus-visible{transform:translateY(-4px);border-color:var(--ac);box-shadow:0 14px 40px rgba(0,0,0,.5);outline:none}
.cp-chn{position:absolute;right:14px;top:10px;font:800 2.6em/1 "Segoe UI",sans-serif;color:rgba(255,255,255,.14)}
.cp-cha{margin-top:auto;color:var(--ac);font-size:.72em;letter-spacing:.16em;text-transform:uppercase}
.cp-cha em{font-style:normal;color:var(--wm)}
.cp-chc b{font-size:1.25em;letter-spacing:.06em}
.cp-chd{color:#c9d6dc;font-size:.88em}
.cp-chb{letter-spacing:.2em;color:var(--ac);font-size:.8em}.cp-chb i{font-style:normal;color:rgba(255,255,255,.18)}
.cp-chx{font-size:.7em;color:var(--mu)}
/* journal, help, options, credits */
.cp-jr{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;overflow:auto;padding-right:6px}
.cp-je{padding:12px 14px;border:1px solid rgba(238,246,247,.12);border-radius:6px;background:rgba(255,255,255,.03)}
.cp-je small{color:var(--ac);letter-spacing:.14em;text-transform:uppercase;font-size:.68em}
.cp-je h3{margin:4px 0 6px;font-size:1em}
.cp-je p{margin:0;font-size:.86em;color:#cbd8de}
.cp-je.cp-locked{opacity:.4}
.cp-src{margin-top:6px!important;font-size:.72em!important;color:var(--mu)!important;font-style:italic}
.cp-res{display:flex;flex-direction:column;gap:10px;margin-top:16px;overflow:auto}
.cp-rr{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:14px;align-items:center;padding:12px 14px;border:1px solid rgba(238,246,247,.12);border-radius:6px;background:rgba(255,255,255,.03)}
.cp-rr>b{font-size:1.25em;color:var(--wm);letter-spacing:.04em;user-select:text;-webkit-user-select:text}
.cp-rr h3{margin:0 0 2px;font-size:.95em}.cp-rr p{margin:0;font-size:.84em;color:#cbd8de}
.cp-gd{margin:14px 0 0}
.cp-opts{display:flex;flex-direction:column;gap:2px;margin-top:14px;overflow:auto;padding-right:6px}
.cp-or{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.cp-or small{display:block;color:var(--mu);font-size:.78em}
.cp-oc{display:flex;align-items:center;gap:10px}
.cp-oc b{min-width:7em;text-align:center;font-weight:600;color:var(--ac)}
.cp-oa{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent}
.cp-oa:hover,.cp-oa:focus-visible{border-color:var(--ac);color:var(--ac);outline:none}
.cp-cr{overflow:auto;margin-top:12px;display:flex;flex-direction:column;gap:12px}
.cp-cr h3{margin:0 0 4px;color:var(--ac);letter-spacing:.14em;text-transform:uppercase;font-size:.8em}.cp-cr p{margin:0;color:#cbd8de}
/* HUD */
.cp-hud{position:absolute;inset:0;pointer-events:none!important}
.cp-hud>*{pointer-events:auto}
.cp-top{position:absolute;top:calc(9% + 10px);left:14px;right:14px;display:flex;align-items:center;gap:14px;pointer-events:none}
.cp-top>*{pointer-events:auto}
.cp-pause{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);font-size:.7em}
.cp-pause:hover,.cp-pause:focus-visible{border-color:var(--ac);outline:none}
.cp-chap{letter-spacing:.3em;text-transform:uppercase;font-size:.72em;color:rgba(238,246,247,.7)}
.cp-thread{margin-left:auto;display:flex;align-items:center;gap:10px}
.cp-thread b{font-size:.66em;letter-spacing:.24em;text-transform:uppercase;color:var(--mu);font-weight:600}
.cp-tr{position:relative;width:clamp(80px,12vw,150px);height:3px;background:rgba(255,255,255,.12);border-radius:3px}
.cp-tr i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,var(--wm),var(--ac));box-shadow:0 0 10px var(--ac);transition:width .9s cubic-bezier(.3,.7,.2,1)}
.cp-thread.cp-up .cp-tr i{box-shadow:0 0 18px var(--ac),0 0 4px #fff}
.cp-thread.cp-dn .cp-tr i{filter:saturate(.3) brightness(.8)}
/* notes (top right) */
.cp-notes{position:absolute;top:calc(9% + 56px);right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none!important}
.cp-note{padding:8px 14px;background:rgba(0,0,0,.6);border-left:2px solid var(--ac);font-size:.84em;opacity:0;transform:translateX(20px);transition:opacity .45s,transform .45s;backdrop-filter:blur(4px)}
.cp-note.cp-in{opacity:1;transform:none}
.cp-note b{color:var(--ac);margin-right:4px}
.cp-nmem{border-color:var(--wm)}.cp-nmem b{color:var(--wm)}
.cp-ndown{border-color:var(--bd)}.cp-ndown b{color:var(--bd)}
.cp-nlearn{border-color:var(--gd)}.cp-nlearn b{color:var(--gd);letter-spacing:.14em;text-transform:uppercase;font-size:.85em}
/* subtitles */
.cp-sub{position:absolute;left:50%;bottom:calc(9% + 14px);transform:translateX(-50%);width:min(860px,88%);padding:12px 44px 12px 18px;background:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.62) 12%,rgba(0,0,0,.62) 88%,rgba(0,0,0,0));text-align:center;cursor:pointer}
.cp-who{display:block;color:var(--ac);letter-spacing:.24em;text-transform:uppercase;font-size:.72em;margin-bottom:4px}
.cp-line{margin:0;font-size:1.12em;text-shadow:0 2px 8px #000;min-height:1.4em}
.cp-sub.cp-narr .cp-line{font-style:italic;color:#e6ecef}
.cp-next{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border:0;background:transparent;color:var(--ac);opacity:0;transition:opacity .3s}
.cp-sub.cp-done .cp-next{opacity:1;animation:cpNudge 1.2s ease-in-out infinite}
@keyframes cpNudge{50%{transform:translateX(4px)}}
/* the choice wheel */
.cp-wheel{position:absolute;left:50%;bottom:calc(6% + 10px);transform:translateX(-50%);width:min(980px,94%);display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"q q" "a b" "c d";gap:8px 12px;align-items:stretch;animation:cpIn .35s ease both}
@keyframes cpIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}}
.cp-wq{grid-area:q;margin:0 0 2px;text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:.72em;color:var(--mu)}
.cp-wt{position:absolute;left:50%;top:-34px;width:34px;height:34px;transform:translateX(-50%) rotate(-90deg)}
.cp-wt circle{fill:none;stroke:rgba(255,255,255,.15);stroke-width:3}
.cp-wt .cp-wtp{stroke:var(--wm);stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round}
.cp-wo{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 14px;border:1px solid rgba(238,246,247,.16);border-radius:6px;background:rgba(4,8,12,.72);backdrop-filter:blur(6px);transition:border-color .2s,background .2s,transform .2s,opacity .3s}
.cp-w0{grid-area:a}.cp-w1{grid-area:b}.cp-w2{grid-area:c}.cp-w3{grid-area:d}
.cp-wo kbd{flex:none;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;font:700 .72em "Segoe UI",sans-serif;color:var(--ac)}
.cp-wo span{font-size:.95em}
.cp-wo:hover,.cp-wo:focus-visible{border-color:var(--ac);background:rgba(10,40,48,.85);transform:translateY(-2px);outline:none}
.cp-wquiet span{font-style:italic;color:#cfd9de}
.cp-picked .cp-wo{opacity:.15}
.cp-picked .cp-wo.cp-sel{opacity:1;border-color:var(--wm);background:rgba(60,40,10,.75);transform:scale(1.03)}
/* observe */
.cp-obs{position:absolute;left:50%;top:calc(9% + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(0,0,0,.55);border:1px solid rgba(95,224,240,.35);border-radius:999px;backdrop-filter:blur(4px)}
.cp-obs b{letter-spacing:.22em;text-transform:uppercase;font-size:.72em;color:var(--ac)}
.cp-obs span{font-size:.82em;color:var(--mu)}
.cp-obs .cp-pb{padding:6px 12px;font-size:.7em}
.cp-spots{position:absolute;inset:0;pointer-events:none!important}
.cp-spot{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:transparent;pointer-events:auto;display:grid;place-items:center}
.cp-spot i{width:16px;height:16px;transform:rotate(45deg);border:2px solid var(--ac);box-shadow:0 0 14px var(--ac),inset 0 0 8px rgba(95,224,240,.6);animation:cpSpot 1.6s ease-in-out infinite}
.cp-spot span{position:absolute;top:44px;font-size:.62em;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);opacity:0;transition:opacity .2s;white-space:nowrap}
.cp-spot:hover span,.cp-spot:focus-visible span{opacity:1}
.cp-spot:focus-visible{outline:none}.cp-spot:focus-visible i{border-color:#fff}
.cp-spot.cp-seen i{border-color:var(--mu);box-shadow:none;animation:none;opacity:.6}
@keyframes cpSpot{50%{transform:rotate(45deg) scale(1.25);box-shadow:0 0 22px var(--ac)}}
/* the phone */
.cp-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,80%);height:min(560px,80%);border-radius:30px;background:#05070b;border:8px solid #151a22;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;overflow:hidden;animation:cpPh .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes cpPh{from{opacity:0;transform:translate(-50%,-40%)}}
.cp-ph-head{padding:16px 16px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}
.cp-ph-head b{display:block}.cp-ph-head small{color:var(--gd);font-size:.75em}
.cp-ph-log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.cp-msg{max-width:82%;padding:8px 12px;border-radius:16px;font-size:.9em;animation:cpMsg .3s ease both}
@keyframes cpMsg{from{opacity:0;transform:translateY(8px)}}
.cp-msg.cp-in{align-self:flex-start;background:#20262f;border-bottom-left-radius:4px}
.cp-msg.cp-out{align-self:flex-end;background:#1d6f86;border-bottom-right-radius:4px}
.cp-typing{display:flex;gap:4px;padding:12px}
.cp-typing i{width:6px;height:6px;border-radius:50%;background:#8a96a3;animation:cpDot 1s infinite}
.cp-typing i:nth-child(2){animation-delay:.15s}.cp-typing i:nth-child(3){animation-delay:.3s}
@keyframes cpDot{50%{opacity:.25;transform:translateY(-3px)}}
.cp-ph-opts{display:flex;flex-direction:column;gap:6px;padding:10px}
.cp-pho{display:flex;gap:8px;align-items:center;text-align:left;padding:9px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:.85em}
.cp-pho kbd{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-size:.75em;color:var(--ac)}
.cp-pho:hover,.cp-pho:focus-visible{border-color:var(--ac);outline:none}
/* skill / note card */
.cp-card{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.cp-cd{width:min(560px,90%);padding:22px 24px;background:rgba(5,10,14,.95);border:1px solid rgba(95,224,240,.35);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:cpPh2 .4s ease both}
@keyframes cpPh2{from{opacity:0;transform:translateY(16px)}}
.cp-cd small{color:var(--gd);letter-spacing:.2em;text-transform:uppercase;font-size:.7em}
.cp-cd h3{margin:6px 0 10px;font-size:1.3em;font-weight:500}
.cp-cd p{margin:0 0 8px;color:#d3dee3}
.cp-cch{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
/* end screen + flowchart */
.cp-endrow{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.cp-endc{padding:10px 16px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.03);min-width:130px}
.cp-endc small{display:block;color:var(--mu);font-size:.7em;letter-spacing:.2em;text-transform:uppercase}
.cp-endc b{font-size:1.3em}
.cp-dots{color:var(--ac);letter-spacing:.15em}.cp-dots i{font-style:normal;color:rgba(255,255,255,.15)}
.cp-fh{margin:16px 0 8px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:.75em;color:var(--mu)}
.cp-flow{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:6px}
.cp-fc{display:flex;flex-direction:column;gap:4px;min-width:118px;flex:none}
.cp-fc small{color:var(--mu);font-size:.66em;text-align:center}
.cp-fo{display:block;padding:4px 6px;border-radius:4px;font-size:.68em;text-align:center;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-fg{background:rgba(126,240,168,.18);border-color:var(--gd);color:#dfffe9}
.cp-fn{background:rgba(255,207,138,.16);border-color:var(--wm);color:#fff2dc}
.cp-fb{background:rgba(255,139,139,.16);border-color:var(--bd);color:#ffe2e2}
.cp-fx{color:rgba(255,255,255,.7);border-style:dashed}
.cp-fl{color:rgba(255,255,255,.25)}
.cp-fa{flex:none;width:14px;height:1px;background:rgba(255,255,255,.25)}
.cp-ll{margin:0;padding-left:18px;columns:2;color:#d3dee3;font-size:.86em}
.cp-endhelp{margin:14px 0 0;color:var(--wm);font-size:.86em}
.cp-ep{overflow:auto}
/* fallback, small screens, reduced motion */
.cp-2d{background:radial-gradient(circle at 60% 30%,#1b2a52,#02040c 70%)}
@media (max-width:760px){
  .cp{aspect-ratio:auto;height:min(78vh,620px)}
  .cp-menu{width:100%;background:rgba(0,0,0,.7)}
  .cp-panel{width:100%}
  .cp-chs{grid-template-columns:1fr}.cp-chc{min-height:120px}
  .cp-jr{grid-template-columns:1fr}
  .cp-wheel{grid-template-columns:1fr;grid-template-areas:"q" "a" "b" "c" "d";gap:6px}
  .cp-wo{padding:8px 10px}
  .cp-ll{columns:1}
}
.cp-rm *,.cp-rm *::before,.cp-rm *::after{animation:none!important;transition:none!important}

/* STILL HERE · own identity: ice-blue hairlines, glass with cut corners, a status corner and a listening coach */
.cp{--ac:#9fdcff;--ac2:#e6f6ff;--ln:rgba(200,232,255,.32);--gl:rgba(10,18,28,.58);font-family:"Segoe UI Light","Segoe UI","Helvetica Neue",system-ui,sans-serif}
.cp-logo b{color:var(--ac2);text-shadow:0 0 18px rgba(159,220,255,.55)}
.cp-ui.cp2-glitch>*:not(.cp-bars):not(.cp-fade){animation:cp2-glitch .42s steps(2,end)}
@keyframes cp2-glitch{0%{clip-path:inset(0 0 0 0);transform:translateX(0);filter:none}20%{clip-path:inset(12% 0 60% 0);transform:translateX(-6px);filter:hue-rotate(20deg)}40%{clip-path:inset(55% 0 18% 0);transform:translateX(5px)}60%{clip-path:inset(30% 0 40% 0);transform:translateX(-3px)}100%{clip-path:inset(0 0 0 0);transform:none;filter:none}}

/* main menu: whole frame, transparent over the 3D scene */
.cp-menu{left:0;right:0;width:auto;padding:clamp(16px,4vh,40px) clamp(18px,4vw,56px);background:radial-gradient(120% 80% at 0% 50%,rgba(2,8,14,.78),rgba(2,8,14,.35) 45%,transparent 70%),linear-gradient(0deg,rgba(2,8,14,.65),transparent 30%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto;gap:0 2rem}
.cp2-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.cp2-brand .cp-logo{font-size:clamp(20px,2.8vw,40px);text-align:left;padding-left:0}
.cp2-brand .cp-ltag{text-align:left;margin:6px 0 0;letter-spacing:.42em;text-transform:uppercase;font-size:.68em;color:var(--ac)}
.cp2-clock{text-align:right;border-right:1px solid var(--ln);padding-right:14px}
.cp2-clock b{display:block;font-weight:200;font-size:clamp(20px,2.6vw,38px);letter-spacing:.08em;color:var(--ac2)}
.cp2-clock small{display:block;font-size:.72em;letter-spacing:.22em;text-transform:uppercase;color:var(--mu)}
.cp2-clock span{display:block;margin-top:6px;font-size:.66em;letter-spacing:.24em;text-transform:uppercase;color:var(--ac)}
.cp2-list{grid-column:1;align-self:center;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(2px,.8vh,8px)}
.cp2-mi{position:relative;display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;padding:clamp(6px,1.2vh,11px) 18px clamp(6px,1.2vh,11px) 4px;background:transparent;border:0;text-align:left;opacity:0;animation:cp2-in .6s calc(.15s + var(--i)*.07s) cubic-bezier(.2,.8,.2,1) forwards;outline:none}
@keyframes cp2-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.cp2-dia{flex:none;width:9px;height:9px;border:1px solid var(--ac);transform:rotate(45deg);transition:background .25s,box-shadow .25s,transform .35s}
.cp2-ic{flex:none;width:22px;height:22px;color:var(--mu);transition:color .25s}
.cp2-ic svg{width:100%;height:100%;display:block}
.cp2-mi .cp-ml{font-weight:300;font-size:clamp(14px,1.6vw,21px);letter-spacing:.32em;text-transform:uppercase;color:rgba(230,246,255,.72);transition:color .25s,letter-spacing .35s}
.cp2-rule{position:absolute;left:24px;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,var(--ac),transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cp2-mi::before{content:'';position:absolute;inset:0 -30px 0 -10px;background:linear-gradient(90deg,rgba(159,220,255,.14),transparent 80%);opacity:0;transition:opacity .25s;pointer-events:none}
.cp2-mi.cp2-on::before{opacity:1}
.cp2-mi.cp2-on .cp2-dia{background:var(--ac);box-shadow:0 0 12px var(--ac);transform:rotate(225deg)}
.cp2-mi.cp2-on .cp2-ic{color:var(--ac2)}
.cp2-mi.cp2-on .cp-ml{color:#fff;letter-spacing:.38em}
.cp2-mi.cp2-on .cp2-rule{transform:scaleX(1)}
.cp2-mi.cp-mi-help .cp-ml{color:var(--wm)}
.cp2-mi.cp-mi-help .cp2-dia{border-color:var(--wm)}
.cp2-mi.cp-mi-help.cp2-on .cp2-dia{background:var(--wm);box-shadow:0 0 12px var(--wm)}
.cp2-desc{grid-column:1/-1;justify-self:center;margin:0 0 clamp(8px,2vh,18px);padding:8px 22px;font-size:.86em;letter-spacing:.12em;color:var(--ac2);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);background:rgba(10,18,28,.4);opacity:0}
.cp2-desc.cp2-in{animation:cp2-fade .45s ease forwards}
@keyframes cp2-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cp2-coach{grid-column:1;display:flex;align-items:center;gap:12px;max-width:min(520px,100%)}
.cp2-av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);display:grid;place-items:center}
.cp2-av i{width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 14px var(--ac);animation:cp2-breathe 3.2s ease-in-out infinite}
.cp2-av::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(159,220,255,.25);animation:cp2-ring 3.2s ease-out infinite}
@keyframes cp2-breathe{50%{transform:scale(.6);opacity:.6}}
@keyframes cp2-ring{from{transform:scale(.8);opacity:1}to{transform:scale(1.35);opacity:0}}
.cp2-coach small{display:block;font-size:.64em;letter-spacing:.3em;text-transform:uppercase;color:var(--ac)}
.cp2-coach p{margin:2px 0 0;min-height:2.6em;font-size:.86em;line-height:1.45;color:var(--ac2)}
.cp2-ver{grid-column:2;justify-self:end;align-self:end;margin:0;letter-spacing:.2em;text-transform:uppercase;font-size:.62em}

/* panels: glass with a cut corner and hairline frame */
.cp-panel{background:linear-gradient(270deg,rgba(4,10,18,.93),rgba(4,10,18,.82) 80%,rgba(4,10,18,.5));border-left:1px solid var(--ln)}
.cp-ph h2{font-weight:200;letter-spacing:.34em}
.cp2-kick{margin:0 0 6px;font-size:.66em;letter-spacing:.34em;text-transform:uppercase;color:var(--ac)}
.cp-pb{border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));border-color:var(--ln);letter-spacing:.24em}
.cp-pb.cp-pri{background:var(--ac2);border-color:var(--ac2);color:#05121c}
.cp-pb.cp-pri:hover,.cp-pb.cp-pri:focus-visible{background:#fff}
.cp-je,.cp-rr,.cp-or,.cp-cr section{border-radius:0!important;border-color:var(--ln)!important}

/* chapters with flowchart */
.cp-panel.cp2-chp{left:0;right:0;width:auto;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(4,10,18,.95),rgba(4,10,18,.86))}
.cp2-chwrap{flex:1;min-height:0;display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:clamp(12px,2.4vw,32px);margin-top:clamp(8px,2vh,18px)}
.cp2-chlist{display:flex;flex-direction:column;gap:10px;overflow:auto}
.cp2-chc{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left;border:1px solid var(--ln);background:rgba(10,18,28,.55);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);transition:border-color .25s,background .25s,transform .25s}
.cp2-chc:hover,.cp2-chc:focus-visible{border-color:var(--ac);outline:none;transform:translateX(4px)}
.cp2-chc.cp2-on{border-color:var(--ac2);background:linear-gradient(90deg,rgba(159,220,255,.18),rgba(10,18,28,.55))}
.cp2-chn{font-weight:200;font-size:1.9em;color:var(--ac);min-width:1.6em}
.cp2-cht{flex:1;display:flex;flex-direction:column;gap:2px}
.cp2-cht b{font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.cp2-cht small{color:var(--mu);font-size:.78em}
.cp2-chp{font-size:.8em;letter-spacing:.12em;color:var(--ac2)}
.cp2-flowbox{min-width:0;display:flex;flex-direction:column;overflow:auto;padding-right:4px}
.cp2-flowbox.cp2-in{animation:cp2-fade .45s ease}
.cp2-fhead{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-end;border-bottom:1px solid var(--ln);padding-bottom:12px}
.cp2-fhead h3{margin:0;font-weight:200;font-size:clamp(20px,2.4vw,32px);letter-spacing:.24em;text-transform:uppercase}
.cp2-who{margin:4px 0 0;color:var(--mu);font-size:.85em}
.cp2-stats{display:flex;gap:22px}
.cp2-stats small{display:block;font-size:.62em;letter-spacing:.26em;text-transform:uppercase;color:var(--mu)}
.cp2-stats b{font-weight:300;font-size:1.3em;color:var(--ac2)}
.cp2-flow{display:flex;align-items:center;gap:0;padding:clamp(14px,3vh,28px) 4px;overflow-x:auto}
.cp2-step{flex:none;display:flex;flex-direction:column;gap:14px;align-items:center}
.cp2-link{flex:1 0 22px;height:1px;background:linear-gradient(90deg,var(--ln),var(--ac),var(--ln));min-width:22px}
.cp2-node{position:relative;width:clamp(96px,11vw,130px);padding:12px 10px 10px;text-align:center;border:1px solid var(--ln);background:rgba(10,18,28,.6);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cp2-node b{display:block;font-weight:400;font-size:.74em;letter-spacing:.06em;line-height:1.3;min-height:2.6em}
.cp2-nd{display:block;width:9px;height:9px;margin:0 auto 8px;border:1px solid var(--ac);transform:rotate(45deg)}
.cp2-seen{border-color:rgba(159,220,255,.6)}
.cp2-seen .cp2-nd{background:var(--ac);box-shadow:0 0 10px var(--ac)}
.cp2-lock{opacity:.55}
.cp2-lock b{color:var(--mu);font-style:italic}
.cp2-alt{border-style:dashed;transform:scale(.92)}
.cp2-dots{display:flex;justify-content:center;gap:4px;margin-top:8px}
.cp2-dots i,.cp2-legend i{width:7px;height:7px;border:1px solid var(--ln);display:inline-block;transform:rotate(45deg)}
.cp2-dots i.cp2-got,.cp2-legend i.cp2-got{background:var(--ac2);border-color:var(--ac2)}
.cp2-legend i.cp2-dash{border-style:dashed}
.cp2-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0;font-size:.7em;color:var(--mu);letter-spacing:.08em}
.cp2-legend span{display:inline-flex;align-items:center;gap:8px}
.cp2-go{margin-top:auto;padding-top:16px;display:flex;justify-content:flex-end}
.cp2-play{padding:12px 34px;font-size:.9em}

/* playable credits */
.cp2-cred{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,rgba(2,8,14,.25),rgba(2,8,14,.75));cursor:none}
.cp2-cred canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.cp2-cred-hud{position:absolute;left:clamp(16px,4vw,48px);top:clamp(14px,4vh,36px);pointer-events:none}
.cp2-cred-hint{margin:2px 0 6px;color:var(--ac2);letter-spacing:.14em;font-size:.86em}
.cp2-cred-n{font-weight:200;font-size:1.6em;letter-spacing:.16em;color:var(--ac2)}
.cp2-cred-card{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0;width:min(640px,86%)}
.cp2-cred-card small{display:block;font-size:.72em;letter-spacing:.4em;text-transform:uppercase;color:var(--ac)}
.cp2-cred-card b{display:block;margin-top:10px;font-weight:200;font-size:clamp(18px,2.6vw,34px);letter-spacing:.12em;color:#fff;text-shadow:0 0 22px rgba(159,220,255,.5)}
.cp2-cred-card.cp2-in{animation:cp2-credin 4.2s ease forwards}
.cp2-cred-card.cp2-final{animation:cp2-fade 1.2s ease forwards}
.cp2-cred-card.cp2-final b{font-size:clamp(26px,4vw,52px)}
@keyframes cp2-credin{0%{opacity:0;letter-spacing:.4em}12%,80%{opacity:1;letter-spacing:.12em}100%{opacity:0}}
.cp2-cred-btns{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(14px,4vh,36px);display:flex;gap:10px;cursor:auto}

@media (max-width:760px),(max-height:430px){
  .cp-menu{grid-template-columns:1fr;gap:0}
  .cp2-clock span,.cp2-ver{display:none}
  .cp2-desc{display:none}
  .cp2-coach p{min-height:0;font-size:.8em}
  .cp2-chwrap{grid-template-columns:1fr;overflow:auto}
  .cp2-chlist{flex-direction:row;overflow-x:auto}
  .cp2-chc{flex:none;min-width:200px}
}
@media (prefers-reduced-motion:reduce){.cp2-mi{animation:none;opacity:1}.cp-ui.cp2-glitch>*{animation:none!important}}
.cp2-node{width:clamp(74px,8.2vw,118px);padding:10px 6px 8px}
.cp2-link{flex:1 0 10px;min-width:10px}
.cp2-flow{justify-content:space-between}
@media (max-height:430px){.cp-menu{padding:10px 18px;grid-template-rows:auto 1fr auto}.cp2-list{gap:0}.cp2-mi{padding:3px 12px 3px 4px}.cp2-mi .cp-ml{font-size:13px}.cp2-coach{display:none}.cp2-brand .cp-ltag{display:none}.cp2-clock small{display:none}}
@media (max-height:430px),(max-width:760px){
  .cp-panel.cp2-chp{overflow-y:auto;padding:12px 18px}
  .cp2-chp .cp2-ph h2{font-size:18px}
  .cp2-chwrap{display:block;overflow:visible;margin-top:8px}
  .cp2-chlist{margin-bottom:10px}
  .cp2-chc{padding:8px 12px;min-width:170px}
  .cp2-chn{font-size:1.3em}
  .cp2-flowbox{overflow:visible}
  .cp2-fhead h3{font-size:18px}
  .cp2-flow{padding:12px 2px}
  .cp2-node{width:clamp(64px,13vw,96px)}
  .cp2-node b{font-size:.66em;min-height:2.4em}
  .cp2-go{position:sticky;bottom:0;padding:8px 0;background:linear-gradient(0deg,rgba(4,10,18,.95),transparent)}
}

/* v14 fixes: paused = only the pause panel; readable primary button; fullscreen button */
.cp-paused .cp-hud{visibility:hidden}
.cp-pb.cp-pri,.cp-pb.cp-pri:hover,.cp-pb.cp-pri:focus-visible{color:#05121c;text-shadow:none;font-weight:700}
.cp-fs{position:absolute;bottom:12px;right:12px;z-index:40;width:36px;height:36px;border:1px solid var(--ln,rgba(238,246,247,.25));background:rgba(4,10,18,.55);color:var(--tx);font-size:16px;line-height:1;cursor:pointer}
.cp-fs:hover,.cp-fs:focus-visible{border-color:var(--ac);outline:none}
.cp:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}

/* STILL HERE · v3 menu: plain words over the living scene, a dot marks the choice */
.cp-menu.cp3-menu{display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:clamp(18px,5vh,56px) clamp(20px,6vw,90px) clamp(16px,4vh,40px);background:linear-gradient(90deg,rgba(1,4,8,.72),rgba(1,4,8,.25) 42%,transparent 65%),linear-gradient(0deg,rgba(1,4,8,.7),transparent 34%)}
.cp3-brand{position:absolute;top:clamp(18px,5vh,52px);left:clamp(20px,6vw,90px)}
.cp3-brand .cp-logo{font-size:clamp(22px,3.2vw,46px);text-align:left;padding:0}
.cp3-brand .cp-ltag{text-align:left;margin:6px 0 0;letter-spacing:.42em;text-transform:uppercase;font-size:.66em;color:var(--ac)}
.cp3-list{list-style:none;margin:0 0 clamp(14px,4vh,34px);padding:0;display:flex;flex-direction:column;gap:clamp(0px,.4vh,4px)}
.cp3-mi{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:16px;cursor:pointer;padding:clamp(5px,1vh,9px) 6px;opacity:0;animation:cp3-in .5s ease forwards;animation-delay:calc(var(--i) * 70ms)}
.cp3-mi .cp-ml{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(17px,2vw,27px);letter-spacing:.06em;color:rgba(232,240,246,.5);transition:color .25s,transform .25s}
.cp3-dot{width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;transform:scale(.3);transition:opacity .25s,transform .25s;box-shadow:0 0 10px rgba(255,255,255,.8)}
.cp3-mi.cp3-on .cp-ml,.cp3-mi:focus-visible .cp-ml{color:#fff;transform:translateX(4px)}
.cp3-mi.cp3-on .cp3-dot{opacity:1;transform:scale(1)}
.cp3-mi:focus-visible{outline:none}
.cp3-mi:focus-visible .cp-ml{text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.35)}
.cp3-help .cp-ml{color:rgba(255,190,140,.7)}.cp3-help.cp3-on .cp-ml{color:#ffd2ad}.cp3-help .cp3-dot{background:#ffbe8c}
.cp3-hint{margin:0;min-height:1.5em;font-size:clamp(12px,1.05vw,15px);letter-spacing:.05em;color:rgba(232,240,246,.72);text-shadow:0 1px 6px #000;max-width:min(640px,100%)}
.cp3-hint.cp3-in{animation:cp3-fadein .4s ease}
.cp3-keys{position:absolute;right:clamp(70px,7vw,96px);bottom:clamp(14px,4vh,36px);margin:0;display:flex;gap:18px;font-size:.74em;letter-spacing:.08em;color:rgba(232,240,246,.62)}
.cp3-keys kbd{font:inherit;display:inline-block;min-width:1.4em;padding:1px 5px;margin-right:4px;border:1px solid rgba(232,240,246,.35);border-radius:4px;text-align:center}
.cp3-keys kbd+kbd{margin-left:-2px}
.cp3-ver{position:absolute;left:clamp(20px,6vw,90px);bottom:6px;margin:0;font-size:.62em;opacity:.55}
@keyframes cp3-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes cp3-fadein{from{opacity:0}to{opacity:1}}
/* pause and end screens: words, not boxes */
.cp-panel.cp-pp{background:linear-gradient(90deg,rgba(1,4,8,.88),rgba(1,4,8,.55) 55%,rgba(1,4,8,.3))}
.cp-pp .cp-pm{gap:2px}
.cp-pp .cp-pm .cp-pb{all:unset;box-sizing:border-box;position:relative;cursor:pointer;padding:8px 0 8px 22px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(16px,1.8vw,23px);color:rgba(232,240,246,.55);transition:color .2s}
.cp-pp .cp-pm .cp-pb::before{content:'';position:absolute;left:4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;opacity:0;transform:scale(.3);transition:.2s;box-shadow:0 0 10px rgba(255,255,255,.8)}
.cp-pp .cp-pm .cp-pb:hover,.cp-pp .cp-pm .cp-pb:focus{color:#fff}
.cp-pp .cp-pm .cp-pb:hover::before,.cp-pp .cp-pm .cp-pb:focus::before{opacity:1;transform:scale(1)}
/* autosave mark and the instant replay curtain */
.cp-save{position:absolute;right:18px;top:16px;z-index:40;display:flex;align-items:center;gap:8px;font-size:.7em;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,240,246,.8);opacity:0;pointer-events:none}
.cp-save i{width:14px;height:14px;border:2px solid rgba(232,240,246,.3);border-top-color:#fff;border-radius:50%;animation:cp3-spin .8s linear infinite}
.cp-save.cp-on{animation:cp3-save 2.2s ease forwards}
@keyframes cp3-spin{to{transform:rotate(360deg)}}
@keyframes cp3-save{0%,100%{opacity:0}15%,80%{opacity:1}}
.cp-ff{position:absolute;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:#000;color:rgba(232,240,246,.75);font-family:Georgia,serif;letter-spacing:.08em}
.cp-ffing .cp-ff{display:flex}
@media (max-width:760px),(max-height:430px){.cp3-keys{display:none}.cp3-brand{position:static;margin-bottom:auto}.cp-menu.cp3-menu{justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.cp3-mi{animation:none;opacity:1}.cp-save i{animation:none}}
.cp-rm .cp3-mi{animation:none;opacity:1}

/* ==========================================================================
   LEGION DRIVE - scoped to .rc. Festival UI: dark glass over the 3D view,
   cyan + violet accents, sized to the game box (16:9), fullscreen-ready.
   ========================================================================== */
.rc{--ac:#22d3ee;--ac2:#a78bfa;--gd:#4ade80;--wn:#fbbf24;--bd:#ff6b6b;--tx:#f1f6f9;--mu:#9fb3c2;--pn:rgba(7,12,18,.78);--pn2:rgba(255,255,255,.06);--ln:rgba(255,255,255,.12);
  position:relative;width:100%;aspect-ratio:16/9;max-height:88vh;min-height:320px;margin:0 auto;overflow:hidden;background:#000;border-radius:14px;color:var(--tx);
  font:400 clamp(11px,1.15vw,15px)/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none;isolation:isolate;touch-action:none}
.rc:fullscreen{max-height:none;border-radius:0;aspect-ratio:auto}
.rc *{box-sizing:border-box}
.rc button,.rc a{font:inherit;color:inherit;cursor:pointer}
.rc kbd{display:inline-block;min-width:1.6em;padding:0 .35em;border:1px solid var(--ln);border-bottom-width:2px;border-radius:4px;font:600 .78em/1.5 inherit;text-align:center;color:var(--tx);background:rgba(255,255,255,.06)}
.rc.rc-bigt{font-size:clamp(13px,1.4vw,18px)}
.rc-cv{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
.rc-huds,.rc-ui{position:absolute;inset:0;pointer-events:none}
.rc-ui>*{pointer-events:auto}
.rc-hide{display:none!important}
.rc :focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.rc-logo{font:200 clamp(26px,4.6vw,60px)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase}
.rc-logo b{font-weight:900;font-style:italic;letter-spacing:.12em;margin-left:.2em;background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-logo.rc-xl{font-size:clamp(34px,7vw,96px);text-shadow:0 4px 30px rgba(34,211,238,.45),0 2px 4px rgba(0,0,0,.8)}
.rc-endcard .rc-hud,.rc-endcard .rc-touch,.rc-endcard .rc-lt{display:none}
.rc-logo.rc-sm{font-size:clamp(15px,1.8vw,24px);padding-left:0;letter-spacing:.22em}
.rc-ltag{margin:0;color:var(--mu);letter-spacing:.3em;text-transform:uppercase;font-size:.72em}
/* loading + splash + end */
.rc-load,.rc-splash,.rc-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:radial-gradient(circle at 50% 40%,#0b2230,#000 72%)}
.rc-splash,.rc-end{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.7));cursor:pointer}
.rc-load.rc-out,.rc-splash.rc-out{opacity:0;transition:opacity .6s}
.rc-lbar{width:min(360px,60%);height:3px;background:rgba(255,255,255,.12);margin-top:16px;border-radius:3px;overflow:hidden}
.rc-lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .4s}
.rc-lmsg{margin:0;font-size:.82em;color:var(--mu)}
.rc-tip{margin:14px 0 0;max-width:480px;font-style:italic;color:#d9f6ff;opacity:.85}
.rc-err .rc-lmsg{color:var(--wn);max-width:520px}
.rc-press{margin-top:36px;background:none;border:0;letter-spacing:.35em;text-transform:uppercase;font-size:.8em;animation:rcPulse 2.2s ease-in-out infinite}
.rc-rm .rc-press{animation:none}
@keyframes rcPulse{50%{opacity:.35}}
.rc-end p{margin:0}
.rc-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none!important;transition:opacity .38s}
.rc-fade.rc-on{opacity:1}
.rc-fs{position:absolute;top:10px;right:10px;z-index:30;width:34px;height:34px;border-radius:8px;border:1px solid var(--ln);background:rgba(0,0,0,.45);font-size:16px;line-height:1}
.rc-fs:hover{border-color:var(--ac)}
/* buttons, tabs, cards */
.rc-btn{padding:.6em 1.1em;border-radius:8px;border:1px solid var(--ln);background:var(--pn2);font-weight:600;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;gap:.5em;transition:background .15s,border-color .15s,transform .15s}
.rc-btn:hover,.rc-btn:focus-visible{border-color:var(--ac);background:rgba(34,211,238,.14)}
.rc-btn.rc-pri{background:linear-gradient(90deg,#0e7490,#6d28d9);border-color:transparent}
.rc-btn.rc-pri:hover,.rc-btn.rc-pri:focus-visible{filter:brightness(1.15);outline:2px solid #fff}
.rc-btn:disabled{opacity:.45;cursor:not-allowed}
.rc-btn.rc-wide{width:100%;justify-content:center;margin-top:10px;padding:.8em}
.rc-btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rc-tabs{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.rc-tab{background:none;border:0;border-bottom:2px solid transparent;padding:.5em .65em;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.8em;color:var(--mu);white-space:nowrap}
.rc-mtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.rc-tab:hover,.rc-tab:focus-visible{color:var(--tx)}
.rc-tab.rc-on{color:var(--tx);border-color:var(--ac)}
.rc-kq{opacity:.6;margin:0 4px}
.rc-card{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid var(--ln);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));min-height:92px;transition:transform .15s,border-color .15s,background .15s}
.rc-card:hover,.rc-card:focus-visible{border-color:var(--ac);transform:translateY(-2px);background:linear-gradient(160deg,rgba(34,211,238,.16),rgba(167,139,250,.06))}
.rc-card b{font-size:1.05em}
.rc-card small{color:var(--mu)}
.rc-ck{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.rc-cond{margin-top:auto;font-size:.75em;color:#cfe8f1;opacity:.85}
.rc-locked{opacity:.55;cursor:not-allowed}
.rc-locked:hover{transform:none;border-color:var(--ln)}
.rc-demo .rc-cond,.rc-demo em{color:var(--wn)}
.rc-stars{position:absolute;top:10px;right:12px;letter-spacing:2px}
.rc-stars i{font-style:normal;color:rgba(255,255,255,.2)}
.rc-stars i.rc-on{color:var(--wn);text-shadow:0 0 8px rgba(251,191,36,.6)}
.rc-rbox .rc-stars{position:static;font-size:1.8em;display:block;text-align:center;margin:6px 0}
/* menu */
.rc-menu{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 62%,rgba(0,0,0,.05))}
.rc-mtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;padding:10px 56px 0 18px;border-bottom:1px solid var(--ln);background:rgba(0,0,0,.35)}
.rc-mtabs{order:3;width:100%;justify-content:flex-start;margin-left:-.6em}
.rc-wallet{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.rc-wallet b{font-size:1.15em;color:var(--wn)}
.rc-wallet small{color:var(--mu)}
.rc-cls{display:inline-block;padding:1px 7px;border-radius:4px;font-weight:800;font-size:.75em;letter-spacing:.06em;background:#64748b;color:#fff;margin-left:6px}
.rc-cD{background:#3b82f6}.rc-cC{background:#eab308;color:#111}.rc-cB{background:#f97316}.rc-cA{background:#ef4444}.rc-cS1{background:#a855f7}.rc-cS2{background:#2563eb}.rc-cX{background:#16a34a}
.rc-cls.rc-clsL{font-size:1em;padding:3px 10px}
.rc-mbody{flex:1;overflow:auto;padding:14px 18px 10px;scrollbar-width:thin;max-width:min(1100px,100%)}
.rc-mfoot{display:flex;gap:16px;flex-wrap:wrap;padding:8px 18px;font-size:.75em;color:var(--mu);border-top:1px solid var(--ln);background:rgba(0,0,0,.35)}
.rc-sec h3{margin:6px 0 2px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:1.25em}
.rc-sec p{margin:0 0 10px;color:var(--mu);max-width:720px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:14px;max-width:62%}
.rc-cities{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.rc-city.rc-open{border-color:rgba(74,222,128,.5)}
.rc-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:62%}
.rc-panel{padding:12px;border-radius:10px;background:var(--pn);border:1px solid var(--ln);backdrop-filter:blur(6px)}
.rc-rh{margin:4px 0 8px;font-size:.78em;letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
.rc-note2{color:var(--mu);font-size:.82em;margin:8px 0 0}
.rc-keys table{width:100%;border-collapse:collapse;font-size:.8em}
.rc-keys th,.rc-keys td{padding:4px 5px;border-bottom:1px solid var(--ln);text-align:left}
.rc-keys th{color:var(--mu);font-weight:600}
.rc-lan{margin-top:10px;width:100%}
/* rows */
.rc-row{display:grid;grid-template-columns:1fr auto minmax(7em,auto) auto;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;border-left:2px solid transparent;outline:none}
.rc-row:hover,.rc-row:focus,.rc-row:focus-within{background:rgba(34,211,238,.1);border-left-color:var(--ac)}
.rc-rl{font-weight:600}
.rc-rl em{font-style:normal;color:var(--wn);font-size:.78em;margin-left:4px}
.rc-rv{text-align:center;font-weight:600;color:#e5f9ff;min-width:6em}
.rc-ra{width:1.9em;height:1.9em;border-radius:50%;border:1px solid var(--ln);background:rgba(255,255,255,.04);font-size:.7em;padding:0}
.rc-ra:hover{border-color:var(--ac)}
.rc-row input[type=range]{grid-column:2/4;width:100%;min-width:8em;accent-color:var(--ac);cursor:pointer}
.rc-row input[type=range]+.rc-rv{grid-column:4;min-width:4.5em}
.rc-rb{grid-column:2/5;justify-self:end;padding:.35em .9em;border-radius:6px;border:1px solid var(--ln);background:var(--pn2)}
.rc-help p{color:#d2e6ee;margin:0 0 8px}
.rc-srows{max-height:100%}
.rc-stabs{margin-bottom:10px;max-width:62%}
/* garage */
.rc-b3{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(260px,360px);gap:14px;max-width:none}
.rc-carlist{display:flex;flex-direction:column;gap:6px;overflow:auto}
.rc-carb{min-height:0;padding:8px 10px}
.rc-carb.rc-on{border-color:var(--ac);background:rgba(34,211,238,.16)}
.rc-carb em{font-style:normal;font-size:.75em;color:var(--wn)}
.rc-carb .rc-cls{position:absolute;right:8px;top:8px}
.rc-gside{grid-column:3;padding:12px;border-radius:10px;background:var(--pn);border:1px solid var(--ln);overflow:auto;backdrop-filter:blur(6px)}
.rc-ghead{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.rc-ghead b{font-size:1.3em}
.rc-ghead small{color:var(--mu)}
.rc-ghead .rc-cls{align-self:flex-start;margin:4px 0 0}
.rc-bars>div{display:grid;grid-template-columns:7em 1fr 2.4em;gap:6px;align-items:center;font-size:.8em;margin:3px 0}
.rc-bars i{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.rc-bars i b{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.rc-bars em{font-style:normal;color:var(--mu);text-align:right}
.rc-gacts{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.rc-need{color:var(--wn)}
.rc-tag{color:var(--gd);font-weight:600}
.rc-upg{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--ln)}
.rc-upg small{display:block;color:var(--mu);font-size:.78em}
.rc-pips{display:flex;gap:3px}
.rc-pips i{width:8px;height:14px;border-radius:2px;background:rgba(255,255,255,.12)}
.rc-pips i.rc-on{background:var(--ac)}
.rc-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0}
.rc-sw{aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.2)}
.rc-sw.rc-on,.rc-sw:hover,.rc-sw:focus-visible{border-color:#fff;box-shadow:0 0 0 3px var(--ac)}
.rc-flashmsg{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);padding:10px 18px;border-radius:8px;background:rgba(6,40,30,.9);border:1px solid var(--gd);font-weight:600;transition:opacity .4s}
.rc-flashmsg.rc-out{opacity:0}
/* photos */
.rc-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-width:62%}
.rc-ph-item{padding:0;border:1px solid var(--ln);border-radius:8px;overflow:hidden;background:#000;display:flex;flex-direction:column;text-align:left}
.rc-ph-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.rc-ph-item small{padding:4px 6px;color:var(--mu);font-size:.72em}
.rc-ph-item:hover,.rc-ph-item:focus-visible{border-color:var(--ac)}
.rc-empty{color:var(--mu);grid-column:1/-1}
.rc-view,.rc-galov{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:10px}
.rc-view img{max-width:100%;max-height:78%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.rc-vbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.rc-vbar small{color:var(--mu)}
.rc-galov{justify-content:flex-start}
.rc-galov .rc-gal{max-width:none;width:100%;overflow:auto}
.rc-ghd{display:flex;justify-content:space-between;width:100%;align-items:center}
/* credits list */
.rc-clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:12px;max-width:62%}
.rc-clist div{padding:10px;border-radius:8px;background:var(--pn);border:1px solid var(--ln);display:flex;flex-direction:column}
.rc-clist small{color:var(--ac);letter-spacing:.12em;text-transform:uppercase;font-size:.7em}
.rc-clist span{color:var(--mu);font-size:.82em}
/* pause + results */
.rc-pause,.rc-res{position:absolute;inset:0;z-index:20;display:flex;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.rc-pcol{width:min(340px,40%);padding:24px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.5))}
.rc-plist{display:flex;flex-direction:column;gap:3px}
.rc-pi{display:flex;flex-direction:column;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:.55em .8em;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.rc-pi small{font-size:.7em;color:var(--mu);letter-spacing:.06em;text-transform:none;font-weight:400}
.rc-pi:hover,.rc-pi:focus-visible{background:linear-gradient(90deg,rgba(34,211,238,.18),transparent);border-color:var(--ac);outline:none}
.rc-pside{flex:1;max-width:560px;margin:24px;padding:14px;border-radius:10px;background:var(--pn);border:1px solid var(--ln);overflow:auto}
.rc-pside .rc-cols,.rc-pside .rc-stabs{max-width:none}
.rc-pside .rc-cols{grid-template-columns:1fr}
.rc-pside .rc-help{display:none}
.rc-np{margin:0 0 8px;color:#d9f3fb}
.rc-stand{margin:0;padding-left:1.6em}
.rc-stand li{padding:2px 0}
.rc-stand small{color:var(--mu);margin-left:6px}
.rc-stand .rc-me{color:var(--ac);font-weight:700}
.rc-res{align-items:center;justify-content:center}
.rc-rbox{width:min(640px,92%);max-height:92%;overflow:auto;padding:20px;border-radius:12px;background:var(--pn);border:1px solid var(--ln);text-align:center}
.rc-rtab{width:100%;border-collapse:collapse;margin:10px 0;text-align:left}
.rc-rtab td{padding:5px 8px;border-bottom:1px solid var(--ln)}
.rc-rtab td:first-child{width:2em;font-weight:800;color:var(--mu)}
.rc-rtab tr.rc-me td{color:var(--ac);font-weight:700;background:rgba(34,211,238,.08)}
.rc-rew{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:10px 0}
.rc-rew div{display:flex;flex-direction:column}
.rc-rew small{color:var(--mu);font-size:.75em;text-transform:uppercase;letter-spacing:.12em}
.rc-rew b{font-size:1.3em;color:var(--wn)}
.rc-rbox .rc-btnrow{justify-content:center}
/* radio toast + lower third */
.rc-radio{position:absolute;left:14px;top:14px;display:flex;gap:10px;align-items:center;padding:8px 14px 8px 10px;border-radius:10px;background:var(--pn);border:1px solid var(--ln);transform:translateY(-140%);opacity:0;transition:transform .45s,opacity .45s;pointer-events:none!important;z-index:25;max-width:60%}
.rc-radio.rc-on{transform:none;opacity:1}
.rc-radio i{font-style:normal;font-size:1.4em;color:var(--ac)}
.rc-radio div{display:flex;flex-direction:column}
.rc-radio small{color:var(--mu)}
.rc-lt{position:absolute;left:6%;bottom:16%;display:flex;flex-direction:column;padding:12px 22px;border-left:4px solid var(--ac);background:linear-gradient(90deg,rgba(0,0,0,.78),transparent);opacity:0;transform:translateX(-30px);transition:opacity .6s,transform .6s;pointer-events:none!important}
.rc-lt.rc-on{opacity:1;transform:none}
.rc-lt small{color:var(--ac);letter-spacing:.2em;text-transform:uppercase}
.rc-lt b{font-size:1.8em;font-weight:700}
.rc-lt span{color:var(--mu)}
/* HUD */
.rc-hud{position:absolute;inset:0;overflow:hidden;pointer-events:none;font-variant-numeric:tabular-nums}
.rc-v2.rc-vp0{bottom:50%}.rc-v2.rc-vp1{top:50%}
.rc-v4.rc-vp0{right:50%;bottom:50%}.rc-v4.rc-vp1{left:50%;bottom:50%}.rc-v4.rc-vp2{right:50%;top:50%}.rc-v4.rc-vp3{left:50%;top:50%}
.rc-split .rc-hud{border:1px solid rgba(0,0,0,.6)}
.rc-v4{font-size:.78em}
.rc-v2 .rc-map{width:clamp(70px,9vw,120px)}.rc-v4 .rc-map{width:clamp(56px,6.5vw,96px)}
.rc-v2 .rc-speedo{width:clamp(80px,9.5vw,130px)}.rc-v4 .rc-speedo{width:clamp(70px,7.5vw,110px)}
.rc-nohud .rc-hud>*:not(.rc-notes):not(.rc-big):not(.rc-prompt){display:none}
.rc-top{position:absolute;top:12px;right:56px;display:flex;gap:18px;align-items:flex-start;text-shadow:0 1px 4px #000}
.rc-split .rc-top{right:12px}
.rc-pos b{font-size:2.4em;font-weight:800;font-style:italic;line-height:1}
.rc-pos small,.rc-lap small{color:var(--mu);font-size:.95em}
.rc-lap{font-size:1.1em;padding-top:.4em}.rc-lap b{font-size:1.4em}
.rc-tm{display:flex;flex-direction:column;align-items:flex-end;font-size:1.15em;padding-top:.4em}
.rc-tm small{font-size:.7em;color:var(--mu)}
.rc-chain{position:absolute;top:12%;left:50%;transform:translateX(-50%) scale(.9);text-align:center;opacity:0;transition:opacity .25s,transform .25s;text-shadow:0 2px 8px #000}
.rc-chain.rc-on{opacity:1;transform:translateX(-50%) scale(1)}
.rc-chain b{display:block;font-size:1.6em;font-weight:900;font-style:italic;letter-spacing:.04em;color:#fff}
.rc-chain small{color:var(--wn);font-weight:700;letter-spacing:.14em}
.rc-notes{position:absolute;top:26%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:90%}
.rc-note{padding:6px 16px;border-radius:6px;background:rgba(0,0,0,.6);font-weight:600;letter-spacing:.04em;transition:opacity .4s,transform .4s;text-align:center}
.rc-note.rc-out{opacity:0;transform:translateY(-8px)}
.rc-note.rc-good{border-left:3px solid var(--gd)}
.rc-note.rc-warn{border-left:3px solid var(--wn)}
.rc-note.rc-title{font-size:1.25em;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(90deg,rgba(14,116,144,.8),rgba(109,40,217,.8))}
.rc-prompt{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);padding:8px 16px;border-radius:8px;background:var(--pn);border:1px solid var(--ac);text-align:center;opacity:0;transition:opacity .25s;max-width:80%}
.rc-prompt.rc-on{opacity:1}
.rc-prompt b{color:var(--ac);margin-right:6px}
.rc-prompt small{display:block;color:var(--mu)}
.rc-big{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:clamp(40px,9vw,120px);font-weight:900;font-style:italic;text-shadow:0 4px 30px rgba(34,211,238,.6),0 2px 4px #000}
.rc-big.rc-pop{animation:rcPop .5s cubic-bezier(.2,1.6,.4,1)}
.rc-rm .rc-big.rc-pop{animation:none}
@keyframes rcPop{from{transform:scale(1.8);opacity:0}}
.rc-map{position:absolute;left:14px;bottom:14px;width:clamp(90px,14vw,180px);height:auto;aspect-ratio:1}
.rc-speedo{position:absolute;right:14px;bottom:10px;width:clamp(100px,14vw,190px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 1px 4px #000}
.rc-speedo canvas{position:absolute;inset:0;width:100%;height:100%}
.rc-spd{font-size:2.6em;font-weight:800;font-style:italic;line-height:1}
.rc-unit{color:var(--mu);font-size:.8em}
.rc-gear{font-style:normal;font-weight:800;font-size:1.1em;color:var(--ac);margin-top:2px}
.rc-nos{position:absolute;left:18%;right:18%;bottom:8%;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.rc-nos i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#22d3ee)}
.rc-nos.rc-on i{background:linear-gradient(90deg,#a78bfa,#f0abfc);box-shadow:0 0 10px #a78bfa}
.rc-ptag{position:absolute;top:10px;left:12px;padding:2px 10px;border-radius:4px;background:var(--pc);color:#000;font-weight:900}
.rc-hc .rc-hud{text-shadow:0 0 3px #000,0 0 6px #000}
.rc-hc .rc-note,.rc-hc .rc-prompt{background:#000;border-color:#fff}
.rc-rewinding .rc-cv{filter:saturate(.4) hue-rotate(160deg) brightness(1.1)}
.rc-rewinding .rc-huds::after{content:'⏪ REWIND';position:absolute;top:44%;left:0;right:0;text-align:center;font-size:2em;font-weight:900;letter-spacing:.2em;text-shadow:0 2px 10px #000}
.rc-playing .rc-fs{top:auto;bottom:auto;top:10px}
.rc-photo .rc-huds{display:none}
/* touch */
.rc-touch{position:absolute;inset:0;pointer-events:none!important}
.rc-touch button{position:absolute;pointer-events:auto;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);border-radius:14px;font-weight:800;font-size:.85em;touch-action:none}
.rc-touch button.rc-on{background:rgba(34,211,238,.4)}
.rc-touch [data-k=lf]{left:3%;bottom:6%;width:12%;height:22%}
.rc-touch [data-k=rt]{left:16%;bottom:6%;width:12%;height:22%}
.rc-touch [data-k=hb]{left:3%;bottom:31%;width:12%;height:12%}
.rc-touch [data-k=nos]{right:16%;bottom:31%;width:12%;height:12%}
.rc-touch [data-k=dn]{right:16%;bottom:6%;width:12%;height:22%}
.rc-touch [data-k=up]{right:3%;bottom:6%;width:12%;height:34%}
.rc-touch [data-a=cam]{right:3%;bottom:43%;width:12%;height:11%}
.rc-touch [data-a=act]{left:16%;bottom:31%;width:12%;height:12%}
.rc-touch [data-a=pause]{left:50%;top:10px;transform:translateX(-50%);width:44px;height:34px}
.rc-touchon .rc-speedo{bottom:auto;top:52px;right:10px;width:96px}
.rc-touchon .rc-map{bottom:auto;top:52px;left:10px;width:90px}
.rc-touchon .rc-top{right:120px}
/* photo mode */
.rc-ph{position:absolute;inset:0;z-index:15}
.rc-ph-temp{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:0;pointer-events:none}
.rc-ph-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%);pointer-events:none}
.rc-ph-grain{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:overlay;opacity:0;pointer-events:none;image-rendering:pixelated}
.rc-ph-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rc-ph-flash.rc-on{animation:rcFlash .35s ease-out}
@keyframes rcFlash{from{opacity:.85}to{opacity:0}}
.rc-ph-shooting .rc-ph-panel,.rc-ph-shooting .rc-foot-ui,.rc-ph-shooting .rc-app-ui>*:not(.rc-app-frame){visibility:hidden}
.rc-ph-panel{position:absolute;left:14px;top:14px;bottom:14px;width:min(360px,42%);padding:12px;border-radius:12px;background:var(--pn);border:1px solid var(--ln);display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(8px);overflow:auto}
.rc-ph-panel.rc-hide{display:flex!important;transform:translateX(-110%);opacity:0;transition:transform .3s,opacity .3s}
.rc-ph-head{display:flex;justify-content:space-between;align-items:baseline}
.rc-ph-head b{letter-spacing:.2em}
.rc-ph-head span{color:var(--mu);font-size:.8em}
.rc-ph-rows{flex:1}
.rc-ph-keys{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.72em;color:var(--mu)}
.rc-ph-acts{display:flex;gap:8px;flex-wrap:wrap}
.rc-ph-toast{position:absolute;right:14px;bottom:14px;display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;background:var(--pn);border:1px solid var(--gd);transform:translateY(140%);transition:transform .4s;z-index:5}
.rc-ph-toast.rc-on{transform:none}
.rc-ph-toast img{width:120px;border-radius:6px}
.rc-ph-toast div{display:flex;flex-direction:column;gap:2px}
.rc-ph-toast small{color:var(--mu)}
.rc-ph-toast a{color:var(--ac)}
/* on foot */
.rc-foot-ui{position:absolute;inset:0;pointer-events:none}
.rc-foot-ui>*{pointer-events:auto}
.rc-foot-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);text-align:center;padding:8px 16px;border-radius:8px;background:var(--pn);display:flex;flex-direction:column}
.rc-foot-top small{color:var(--mu)}
.rc-foot-keys{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:4px;font-size:.78em;color:#d9eef5;text-shadow:0 1px 3px #000}
.rc-foot-btns{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.rc-foot-stick{position:absolute;left:5%;bottom:10%;width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.25);touch-action:none}
.rc-foot-stick i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;background:rgba(255,255,255,.5)}
.rc-app .rc-foot-ui{display:none}
/* the phone camera app */
.rc-app-ui{position:absolute;inset:0}
.rc-app-frame{position:absolute;inset:3% 9%;border:10px solid #050607;border-radius:34px;box-shadow:0 0 0 2px #2b2f33,0 0 0 2000px rgba(0,0,0,.55);pointer-events:none}
.rc-app-frame::before,.rc-app-frame::after{content:'';position:absolute;bottom:-46px;width:22%;height:90px;border-radius:40px 40px 0 0;background:linear-gradient(180deg,#a8735a,#8a5c47);box-shadow:inset 0 6px 10px rgba(255,255,255,.12)}
.rc-app-frame::before{left:-6%;transform:rotate(16deg)}
.rc-app-frame::after{right:-6%;transform:rotate(-16deg)}
.rc-app-grid{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,transparent calc(33.3% - 1px),rgba(255,255,255,.35) 33.3%,transparent calc(33.3% + 1px),transparent calc(66.6% - 1px),rgba(255,255,255,.35) 66.6%,transparent calc(66.6% + 1px)),linear-gradient(0deg,transparent calc(33.3% - 1px),rgba(255,255,255,.35) 33.3%,transparent calc(33.3% + 1px),transparent calc(66.6% - 1px),rgba(255,255,255,.35) 66.6%,transparent calc(66.6% + 1px))}
.rc-gridon .rc-app-grid{opacity:1}
.rc-app-focus{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px;border:1.5px solid var(--wn);border-radius:6px;opacity:.8}
.rc-app-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5em;font-weight:200}
.rc-app-top{position:absolute;top:5%;left:11%;right:11%;display:flex;gap:10px;align-items:center;font-size:.85em}
.rc-app-top button{background:rgba(0,0,0,.4);border:1px solid var(--ln);border-radius:14px;padding:3px 10px}
.rc-app-zl{margin-left:auto;font-weight:700;color:var(--wn)}
.rc-app-info{color:#e2f2f8}
.rc-app-pro{position:absolute;right:11%;top:13%;width:min(300px,34%);padding:6px;border-radius:10px;background:rgba(0,0,0,.5)}
.rc-app-pro:empty{display:none}
.rc-app-pro .rc-row{grid-template-columns:1fr auto 6.5em auto;padding:3px 4px;font-size:.85em}
.rc-app-zoom{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:4px;border-radius:20px;background:rgba(0,0,0,.4)}
.rc-app-zoom button{width:2.6em;height:2.6em;border-radius:50%;border:0;background:rgba(255,255,255,.08);font-weight:700;font-size:.8em}
.rc-app-zoom button.rc-on{background:rgba(255,255,255,.22);color:var(--wn)}
.rc-app-modes{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);display:flex;gap:14px}
.rc-app-modes button{background:none;border:0;letter-spacing:.14em;font-weight:700;font-size:.78em;color:rgba(255,255,255,.65)}
.rc-app-modes button.rc-on{color:var(--wn)}
.rc-app-bot{position:absolute;bottom:5%;left:20%;right:20%;display:flex;align-items:center;justify-content:space-between}
.rc-app-shut{width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 3px #000}
.rc-app-shut:active{transform:scale(.92)}
.rc-app-thumb{width:46px;height:46px;border-radius:10px;border:2px solid #fff;background:#222 center/cover}
.rc-app-x{width:46px;height:46px;border-radius:50%;border:1px solid var(--ln);background:rgba(0,0,0,.4);font-size:1.3em}
.rc-app-thumbs{display:none}
/* narrow screens: stack menus, smaller HUD */
@media (max-width:760px){
  .rc{aspect-ratio:auto;height:min(78vh,620px)}
  .rc:fullscreen{height:100%}
  .rc-mtop{flex-wrap:wrap;padding:8px 50px 6px 10px;gap:6px}
  .rc-mtabs{order:3;width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .rc-kq{display:none}
  .rc-grid,.rc-cols,.rc-gal,.rc-clist,.rc-stabs{max-width:none}
  .rc-cols{grid-template-columns:1fr}
  .rc-b3{grid-template-columns:1fr;max-width:none}
  .rc-gside{grid-column:auto}
  .rc-carlist{flex-direction:row;overflow-x:auto}
  .rc-carb{min-width:150px}
  .rc-menu{background:rgba(0,0,0,.7)}
  .rc-pause{flex-direction:column}
  .rc-pcol{width:auto}
  .rc-pside{margin:0 10px 10px}
  .rc-ph-panel{width:auto;right:14px;top:auto;max-height:55%}
  .rc-app-frame{inset:3% 3%}
  .rc-mfoot{display:none}
}
.rc-photo .rc-touch{display:none}
/* ---------- v2: splash sweep, festival chips, world map, city loader, driver, credits, HUD extras ---------- */
.rc-splash{overflow:hidden}
.rc-sweep{position:absolute;inset:-50% -20%;background:linear-gradient(105deg,transparent 42%,rgba(34,211,238,.18) 48%,rgba(167,139,250,.22) 52%,transparent 58%);animation:rcSweep 4.5s ease-in-out infinite;pointer-events:none}
.rc-rm .rc-sweep{animation:none;opacity:0}
@keyframes rcSweep{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
.rc-l2{opacity:.7;font-size:.66em}
.rc-fhead{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;max-width:62%}
.rc-meter{flex:0 0 160px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:12px}
.rc-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--wn),#f97316)}
.rc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;max-width:62%}
.rc-chip{padding:.35em .85em;border-radius:20px;border:1px solid var(--ln);background:rgba(0,0,0,.35);font-size:.8em;font-weight:600;letter-spacing:.04em}
.rc-chip::before{content:'';display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--cc);margin-right:.45em;vertical-align:.05em;box-shadow:0 0 8px var(--cc)}
.rc-chip.rc-on,.rc-chip:hover,.rc-chip:focus-visible{border-color:var(--cc);background:rgba(255,255,255,.08)}
.rc-ev{border-top:2px solid var(--cc,var(--ln))}
.rc-ev .rc-ck{color:var(--cc,var(--ac))}
.rc-menu.rc-wide .rc-mbody{max-width:none}
.rc-world{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:14px;height:100%}
.rc-wmap{position:relative;border-radius:12px;border:1px solid var(--ln);background:radial-gradient(ellipse at 40% 40%,rgba(14,60,80,.55),rgba(0,0,0,.75));overflow:hidden;align-self:start}
.rc-wcv{display:block;width:100%;height:auto;aspect-ratio:1200/560;outline:none}
.rc-wcv:focus-visible{box-shadow:inset 0 0 0 2px var(--ac)}
.rc-wpins{position:absolute;inset:0;pointer-events:none}
.rc-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;padding:6px;display:flex;align-items:center;gap:5px}
.rc-pin i{width:12px;height:12px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 14px var(--cc);transition:transform .2s}
.rc-pin span{font-size:.72em;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.6);opacity:.75;white-space:nowrap}
.rc-pin.rc-on i,.rc-pin:hover i,.rc-pin:focus-visible i{transform:scale(1.5)}
.rc-pin.rc-on span{opacity:1;color:var(--cc);border:1px solid var(--cc)}
.rc-pin[data-c=geneva] span{transform:translateX(-118%)}
.rc-pin[data-c=uppsala] span{transform:translateY(-70%)}
.rc-pin[data-c=castelnuovo] span{transform:translateY(70%)}
.rc-whint{position:absolute;left:10px;bottom:8px;font-size:.72em;color:var(--mu)}
.rc-wside{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.rc-wcard{padding:12px 14px;border-radius:12px;background:var(--pn);border:1px solid var(--ln);border-top:3px solid var(--cc)}
.rc-wcard h3{margin:2px 0 4px;font-size:1.7em;font-weight:800;letter-spacing:.04em}
.rc-wcard p{margin:0 0 8px;color:#d2e6ee}
.rc-wcard .rc-ck{color:var(--cc)}
.rc-wprev{display:block;width:100%;height:auto;border-radius:8px;background:rgba(0,0,0,.45);margin:4px 0 8px}
.rc-wstats{display:flex;gap:16px;flex-wrap:wrap}
.rc-wstats span{display:flex;flex-direction:column}
.rc-wstats b{font-size:1.2em;color:#fff}
.rc-wstats small{color:var(--mu);font-size:.72em;text-transform:uppercase;letter-spacing:.1em}
.rc-wopts .rc-row{padding:4px 6px}
.rc-wacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.rc-wacts .rc-btn{justify-content:center}
.rc-wacts .rc-pri{grid-column:1/-1;padding:.8em}
.rc-cload{position:absolute;inset:0;z-index:35;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:24px;align-items:center;padding:4% 6%;background:radial-gradient(circle at 30% 50%,rgba(12,40,56,.95),#000 75%)}
.rc-cl-map canvas{width:100%;height:auto;max-height:80vh;aspect-ratio:1;display:block;filter:drop-shadow(0 0 24px rgba(34,211,238,.15))}
.rc-cl-info h2{margin:4px 0 8px;font-size:clamp(28px,4.5vw,64px);font-weight:900;font-style:italic;letter-spacing:.02em;color:#fff;text-shadow:0 0 30px var(--cc)}
.rc-cl-info .rc-ck{color:var(--cc)}
.rc-cl-info p{color:#d2e6ee;margin:0 0 10px}
.rc-cl-info .rc-lbar{width:100%;margin:18px 0 8px}
.rc-cl-info .rc-lbar i{background:linear-gradient(90deg,var(--cc),var(--ac2))}
.rc-drivers{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-top:8px}
.rc-drv{display:flex;flex-direction:column;align-items:flex-start;padding:7px 9px;border-radius:8px;border:1px solid var(--ln);background:rgba(255,255,255,.04);text-align:left}
.rc-drv small{color:var(--mu);font-size:.7em}
.rc-drv.rc-on,.rc-drv:hover,.rc-drv:focus-visible{border-color:var(--ac);background:rgba(34,211,238,.14)}
.rc-crcols{max-width:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);height:100%}
.rc-crgo h3{margin:4px 0;font-size:1.6em}
.rc-crgo p{color:#d2e6ee}
.rc-attr{overflow:auto;max-height:100%}
.rc-alist{display:flex;flex-direction:column;gap:6px}
.rc-ac,.rc-aa{display:grid;gap:1px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.04)}
.rc-ac small{color:var(--ac);letter-spacing:.12em;text-transform:uppercase;font-size:.68em}
.rc-ac span,.rc-aa span{color:var(--mu);font-size:.8em}
.rc-aa em{font-style:normal;color:var(--wn);font-size:.74em;font-weight:700}
.rc-endstat{display:flex;flex-direction:column;align-items:center;margin:6px 0}
.rc-endstat b{font-size:2.4em;font-weight:900;color:var(--wn)}
.rc-endstat small{color:var(--mu);letter-spacing:.2em;text-transform:uppercase}
.rc-gold{color:var(--wn)!important;font-weight:700}
.rc-street{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:4px 14px;border-radius:6px;background:rgba(0,0,0,.55);font-weight:700;letter-spacing:.06em;opacity:0;transition:opacity .4s;white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.rc-street.rc-on{opacity:1}
.rc-gps{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:4px 14px;border-radius:10px;background:rgba(0,0,0,.6);border:1px solid var(--ac);opacity:0;transition:opacity .25s}
.rc-gps.rc-on{opacity:1}
.rc-gps i{font-style:normal;font-size:1.8em;line-height:1;color:var(--ac)}
.rc-gps b{font-size:1.1em}
.rc-gps.rc-sharp{border-color:var(--wn)}.rc-gps.rc-sharp i{color:var(--wn)}
.rc-split .rc-street,.rc-split .rc-gps{font-size:.8em}
@media (max-width:760px){
  .rc-world,.rc-cload,.rc-crcols{grid-template-columns:1fr}
  .rc-fhead,.rc-chips{max-width:none}
  .rc-cl-map{display:none}
}
@media (orientation:portrait) and (max-width:760px){
  .rc-playing .rc-huds::before{content:'↻ Turn your phone sideways for the full view';position:absolute;left:50%;top:44%;transform:translateX(-50%);padding:8px 14px;border-radius:8px;background:rgba(0,0,0,.7);font-weight:600;white-space:nowrap;animation:rcHint 6s forwards}
}
@keyframes rcHint{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}

/* speed limit of the street you are on (real OSM value or the country default) */
.rc-lim{position:absolute;right:clamp(140px,15vw,190px);bottom:clamp(18px,3vh,30px);width:52px;height:52px;border-radius:50%;background:#fff;border:7px solid #d0141c;display:none;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none}
.rc-lim.rc-on{display:flex}.rc-lim b{color:#111;font:800 19px/1 Arial,sans-serif}
.rc-lim.rc-jp b{color:#1846a8}
.rc-lim.rc-us{border-radius:4px;border:3px solid #111;width:44px;height:56px;flex-direction:column}.rc-lim.rc-us::before{content:'SPEED LIMIT';font:700 7px/1.1 Arial,sans-serif;color:#111;text-align:center;width:30px;margin-bottom:2px}
.rc-lim.rc-over{animation:rcLimP 1s ease-in-out infinite}
@keyframes rcLimP{50%{box-shadow:0 0 0 6px rgba(208,20,28,.55),0 2px 10px rgba(0,0,0,.5)}}
.rc-v2 .rc-lim,.rc-v4 .rc-lim{transform:scale(.8);transform-origin:bottom right}

.rc-lens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* credits powers + co-driver */
.rc-pw{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);width:min(240px,46%);height:22px;border-radius:11px;background:rgba(6,14,22,.72);border:1px solid rgba(56,225,245,.45);overflow:hidden;pointer-events:none}
.rc-pw i{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#22d3ee,#a78bfa);opacity:.55;transition:width .15s}
.rc-pw small{position:relative;display:block;text-align:center;line-height:22px;font-size:.72em;letter-spacing:.06em;color:#e6f6fb;text-shadow:0 1px 3px #000}
.rc-pw kbd{font:inherit;font-weight:800;padding:0 4px;border-radius:3px;background:rgba(255,255,255,.16)}
.rc-pw-full{border-color:#a78bfa;box-shadow:0 0 10px rgba(167,139,250,.55)}
.rc-pw-on i{opacity:.95;animation:rcPw .5s ease-in-out infinite alternate}
.rc-pw-ai{border-color:rgba(251,191,36,.55)}.rc-pw-ai i{background:linear-gradient(90deg,#fbbf24,#f97316)}
@keyframes rcPw{to{filter:brightness(1.5)}}
.rc-slowmo .rc-cv{filter:saturate(.55) contrast(1.12) hue-rotate(-8deg)}
.rc-slowmo .rc-huds::before{content:'SLOW-MO';position:absolute;top:10px;left:0;right:0;text-align:center;font-weight:900;letter-spacing:.4em;color:#c4b5fd;text-shadow:0 0 12px rgba(167,139,250,.9)}
.rc-rm .rc-pw-on i{animation:none}
.rc-pwhelp kbd{font:inherit;font-weight:800;padding:0 5px;border-radius:4px;background:rgba(127,127,127,.2)}

/* ---------- PHISH OR REAL v2: LegionOS ---------- */
.ph-desktop{position:absolute;inset:0;z-index:1;display:none;background:#0b1a3a center/cover no-repeat}
.ph-chrome,.ph-task{display:none}
.ph.ph-os .ph-desktop,.ph.ph-os .ph-chrome{display:block}
.ph.ph-os .ph-task{display:flex}
.ph.ph-os .ph-scr{top:calc(18px + 62px);left:max(12px,3%);right:max(12px,3%);bottom:56px;border-radius:0 0 12px 12px;box-shadow:0 24px 60px rgba(0,0,0,.55);background:var(--bg)}
.ph-chrome{position:absolute;z-index:3;top:18px;left:max(12px,3%);right:max(12px,3%);height:62px;border-radius:12px 12px 0 0;background:#111b2e;border:1px solid #23324d;border-bottom:0;overflow:hidden;font:12px system-ui,sans-serif;color:#c9d6e8}
.ph-tabs{display:flex;align-items:flex-end;gap:2px;height:30px;padding:4px 8px 0;background:#0b1322}
.ph-tab{max-width:240px;padding:6px 14px;border:0;border-radius:8px 8px 0 0;background:transparent;color:#98a8c2;font:600 12px system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ph-tab.ph-on{background:#111b2e;color:#e6edf7}
.ph-tab:hover{color:#e6edf7;background:rgba(255,255,255,.05)}
.ph-wctl{margin-left:auto;display:flex;gap:14px;align-items:center;padding:0 6px 6px;color:#98a8c2}
.ph-wctl i{font-style:normal;opacity:.6}
.ph-wctl button{border:0;background:none;color:#ff8a9a;font-size:13px;cursor:pointer}
.ph-url{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px}
.ph-nav{color:#6b7c99;letter-spacing:4px}
.ph-addr{flex:1;padding:4px 12px;border-radius:14px;background:#0a1120;border:1px solid #23324d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-addr b{color:#4fd18b;font-weight:400}.ph-addr em{font-style:normal;color:#6b7c99}.ph-host{color:#e6edf7;font-weight:600}.ph-path{color:#98a8c2}
.ph-acct{color:#98a8c2;font-size:11px;white-space:nowrap}
.ph-task{position:absolute;z-index:3;left:0;right:0;bottom:0;height:44px;align-items:center;gap:12px;padding:0 10px;background:rgba(6,12,22,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(124,224,255,.15);font:13px system-ui,sans-serif;color:#e6edf7}
.ph-start{display:flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:8px;background:rgba(124,224,255,.12);color:#7ce0ff;font:inherit;cursor:pointer}
.ph-start:hover{background:rgba(124,224,255,.24)}
.ph-search{padding:6px 14px;border-radius:16px;background:rgba(255,255,255,.07);color:#98a8c2;min-width:120px}
.ph-apps{display:flex;gap:4px;margin:0 auto}
.ph-tapp{width:36px;height:36px;border:0;border-radius:8px;background:transparent;font-size:17px;cursor:pointer;position:relative}
.ph-tapp:hover{background:rgba(255,255,255,.08)}
.ph-tapp.on::after{content:"";position:absolute;left:30%;right:30%;bottom:2px;height:3px;border-radius:2px;background:#7ce0ff}
.ph-tray{display:flex;align-items:center;gap:10px}
.ph-tray i{font-style:normal;font-size:13px;opacity:.85}
.ph-tclock{font:600 13px ui-monospace,monospace;min-width:70px;text-align:right}
.ph-icons{position:absolute;top:96px;left:12px;display:none;flex-direction:column;gap:14px}
.ph-icons button{width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:8px;padding:6px 4px;background:transparent;color:#fff;font:12px system-ui,sans-serif;text-shadow:0 1px 3px #000;cursor:pointer}
.ph-icons button i{font-style:normal;font-size:28px}
.ph-icons button:hover,.ph-icons button:focus-visible{background:rgba(124,224,255,.18)}
@media (min-width:1180px){.ph.ph-os .ph-icons{display:flex}.ph.ph-os .ph-scr,.ph.ph-os .ph-chrome{left:110px}}
.ph.ph-os .ph-fs{z-index:4}
@media (max-width:760px){
  .ph.ph-os .ph-scr{top:calc(6px + 40px);left:4px;right:4px;bottom:44px}
  .ph-chrome{top:6px;left:4px;right:4px;height:40px}.ph-tabs{display:none}
  .ph-acct,.ph-search,.ph-nav{display:none}
  .ph-task{height:40px}
}