*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-deep:#04020f;--purple-1:#7c3aed;--blue-2:#60a5fa;--accent:#c084fc;--text:#e2d9f3;--muted:#8b7fb0;--good:#4ade80;--bad:#f87171}
body{min-height:100vh;background:#060507;font-family:'Syne',sans-serif;color:var(--text);overflow-x:hidden;position:relative}
canvas#dna{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.75;pointer-events:none}
.bg-spot{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 78% 62% at 50% -6%, rgba(150,165,255,.18) 0%, rgba(95,82,175,.07) 32%, transparent 62%);animation:flick 7s infinite ease-in-out}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:linear-gradient(rgba(180,190,235,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(180,190,235,.5) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 75%)}
.bg-vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 95% 85% at 50% 32%, transparent 30%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.9) 100%)}
@keyframes flick{0%,100%{opacity:.96}43%{opacity:1}48%{opacity:.8}50%{opacity:.97}68%{opacity:.9}}
.wrap{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:48px 24px 96px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.back-btn{position:fixed;top:18px;left:20px;z-index:5;color:var(--muted);text-decoration:none;font-family:'DM Mono',monospace;font-size:0.7rem;letter-spacing:1px}
.back-btn:hover{color:var(--accent)}
.label{font-family:'DM Mono',monospace;font-size:0.72rem;letter-spacing:0.25em;color:var(--blue-2);text-transform:uppercase;margin-bottom:1rem}
h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:800;line-height:1.05;background:linear-gradient(135deg,#c084fc 0%,#818cf8 40%,#60a5fa 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
h2{font-size:clamp(1.4rem,4vw,2rem);font-weight:800;margin-bottom:.4rem}
.divider{width:60px;height:2px;background:linear-gradient(90deg,var(--purple-1),var(--blue-2));margin:1rem 0 1.5rem;border-radius:2px}
p{font-size:1.02rem;line-height:1.7;margin-bottom:1rem}
p.muted{color:var(--muted)}
.poem{font-style:italic;color:var(--blue-2);border-left:2px solid rgba(96,165,250,.4);padding-left:16px;margin:1.2rem 0;line-height:1.9;white-space:pre-line}
.cipher{font-family:'DM Mono',monospace;font-size:1.5rem;letter-spacing:.3em;color:var(--accent);text-align:center;margin:1.4rem 0;text-shadow:0 0 18px rgba(192,132,252,.4)}
input[type=text]{font-family:'DM Mono',monospace;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(11,7,48,.6);border:1px solid rgba(192,132,252,.35);color:var(--text);padding:12px 16px;border-radius:8px;width:100%;max-width:360px;outline:none}
input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 16px rgba(192,132,252,.25)}
.btn{font-family:'DM Mono',monospace;text-decoration:none;display:inline-block;padding:11px 22px;border:1px solid var(--accent);color:var(--accent);background:rgba(124,58,237,.12);border-radius:6px;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:.25s;margin-top:8px}
.btn:hover{background:var(--accent);color:var(--bg-deep);box-shadow:0 0 22px rgba(192,132,252,.5)}
.btn.ghost{border-color:rgba(139,127,176,.4);color:var(--muted);background:transparent}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.feedback{font-family:'DM Mono',monospace;font-size:.82rem;margin-top:12px;min-height:20px}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)}
.hints{margin-top:18px}
.hint{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--muted);margin-top:8px}
.hint summary{cursor:pointer;color:var(--blue-2);list-style:none}
.hint summary::-webkit-details-marker{display:none}
.hint summary:before{content:"⊕ ";color:var(--accent)}
.hint[open] summary:before{content:"⊖ "}
.hint .body{margin-top:6px;padding-left:14px;border-left:1px solid rgba(96,165,250,.3);line-height:1.7}
/* dialogue */
.dlg{margin:1.1rem 0;display:flex;flex-direction:column;gap:10px}
.keeper,.player{display:flex;gap:.7rem;align-items:flex-start;border-radius:12px;padding:12px 15px;line-height:1.65;max-width:94%}
.keeper{background:rgba(124,58,237,.08);border:1px solid rgba(192,132,252,.22);align-self:flex-start}
.player{background:rgba(37,99,235,.09);border:1px solid rgba(96,165,250,.28);align-self:flex-end;flex-direction:row-reverse;text-align:right}
.kface,.pface{font-family:'Syne',sans-serif;font-weight:800;font-size:.6rem;letter-spacing:.04em;min-width:34px;height:34px;padding:0 7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kface{background:rgba(192,132,252,.16);border:1px solid var(--accent);color:var(--accent);border-radius:50%}
.pface{background:rgba(96,165,250,.16);border:1px solid var(--blue-2);color:var(--blue-2);border-radius:9px}
.kline{font-size:.92rem;color:#cdc1e4}.kline i{color:var(--accent)}
.pline{font-size:.92rem;color:#bcd2f0;font-style:italic}.pline b{color:var(--blue-2);font-style:normal}
.storm{align-self:stretch;text-align:center;padding:14px 18px;margin:2px 0;border-top:1px solid rgba(150,170,210,.3);border-bottom:1px solid rgba(150,170,210,.3);background:rgba(120,140,180,.06)}
.storm .slabel{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.28em;color:#6f7e9c;text-transform:uppercase;margin-bottom:7px}
.storm .sline{font-family:'Syne',sans-serif;font-weight:800;font-size:.92rem;letter-spacing:.05em;color:#b3c0dd;text-transform:uppercase;line-height:1.65}
/* doors */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:20px}
.door{border:1px solid rgba(192,132,252,.25);border-radius:12px;padding:22px;cursor:pointer;transition:.25s;background:rgba(11,7,48,.4)}
.door:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 30px rgba(124,58,237,.25)}
.door .glyph{font-size:2rem;margin-bottom:10px;color:var(--accent);font-family:'DM Mono',monospace}
.door .glyph-img{width:46px;height:46px;object-fit:contain;vertical-align:middle}
.door h3{font-family:'Syne',sans-serif;font-size:1.05rem;margin-bottom:6px;color:var(--accent)}
.door p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5}
.progress{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.footnote{font-family:'DM Mono',monospace;font-size:.74rem;color:var(--accent);background:rgba(124,58,237,.08);border:1px solid rgba(192,132,252,.18);border-radius:8px;padding:9px 13px;margin:.8rem 0;line-height:1.6}
/* codon table */
table.codon{border-collapse:collapse;margin:1rem 0;font-family:'DM Mono',monospace;font-size:.76rem}
table.codon td,table.codon th{border:1px solid rgba(192,132,252,.22);padding:4px 9px}
table.codon th{color:var(--blue-2)}
.backstep{display:inline-flex;align-items:center;width:auto;margin-bottom:16px;font-size:.76rem;padding:6px 13px}
.cgboard{display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:360px;margin:1.1rem auto;border:3px solid #2c2417;border-radius:5px;overflow:hidden}
.cgsq{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cgl{background:#d8b48a}.cgd{background:#7c5230}
.cgsel{box-shadow:inset 0 0 0 3px #c084fc}
.cgsq:hover{box-shadow:inset 0 0 0 2px rgba(192,132,252,.6)}
.cgp{font-size:26px;line-height:1;user-select:none;pointer-events:none}
.cgw{color:#f6f6fa;text-shadow:0 0 1px #000,0 0 2px #000,0 1px 1px #000}
.cgb{color:#161616;text-shadow:0 0 1px #aaa,0 1px 1px #000}
.cgdot{position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(40,25,8,.4);pointer-events:none}
.cgdot.cgcap{width:84%;height:84%;background:none;box-shadow:inset 0 0 0 4px rgba(40,25,8,.4)}
.cwwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.1rem 0;padding-bottom:8px}
.cwgrid{display:grid;width:max-content;margin:0 auto}
.cwblank{width:30px;height:30px}
.cwcellwrap{position:relative;width:30px;height:30px}
.cwcell{width:30px;height:30px;border:1px solid rgba(192,132,252,.3);background:rgba(11,7,48,.55);color:#e2d9f3;font-family:'DM Mono',monospace;font-size:16px;text-align:center;text-transform:uppercase;padding:0;display:block;caret-color:#c084fc}
.cwcell:focus{outline:none;background:rgba(124,58,237,.45);border-color:#c084fc}
.cwnum{position:absolute;top:1px;left:2px;font-size:8px;line-height:1;color:#8b7fb0;pointer-events:none;z-index:2}
.cwred .cwcell{border-color:#ff5a5a;box-shadow:inset 0 0 0 1px #ff5a5a}
.cwredord{position:absolute;bottom:1px;right:2px;font-size:8px;line-height:1;color:#ff6b6b;font-weight:bold;pointer-events:none;z-index:2}
.cwclues{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:1.1rem 0;font-size:.82rem}
.cwclues h4{color:var(--blue-2);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin:0 0 .5rem}
.cwclues p{margin:.3rem 0;color:var(--muted);line-height:1.5}
.cwclues b{color:var(--accent)}
@media(max-width:560px){.cwclues{grid-template-columns:1fr}}
table.codontable{font-size:.66rem;width:100%;table-layout:fixed}
table.codontable td,table.codontable th{padding:3px 4px;text-align:center;white-space:nowrap}
table.codontable td{color:var(--text)}
/* glyph tiles */
.tiles{display:flex;gap:18px;flex-wrap:wrap;margin:1.2rem 0}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px}
.tile .face{width:74px;height:74px;border:1px solid rgba(96,165,250,.35);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2.1rem;background:rgba(11,7,48,.5)}
.tile .river{height:5px;border-radius:3px;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.legend{font-family:'DM Mono',monospace;font-size:.85rem;color:var(--muted);line-height:2.4}
.tile .face svg{width:2rem;height:2rem;color:var(--blue-2)}
.legend svg{width:1.05em;height:1.05em;vertical-align:-.2em;color:var(--blue-2)}
.morsechart{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--muted);line-height:2.1;background:rgba(11,7,48,.4);border:1px solid rgba(192,132,252,.18);border-radius:8px;padding:12px 16px;margin:1rem 0;letter-spacing:.04em}
table.grid{border-collapse:collapse;margin:1.2rem auto;font-family:'DM Mono',monospace;font-size:.95rem}
table.grid th,table.grid td{border:1px solid rgba(192,132,252,.25);padding:6px 13px;text-align:center}
table.grid td{color:var(--text)}
table.grid th{color:var(--blue-2);background:rgba(96,165,250,.08)}
.strand{font-family:'DM Mono',monospace;font-size:1.4rem;letter-spacing:.4em;color:var(--blue-2);text-align:center;margin:1.2rem 0}
.anagram{font-family:'DM Mono',monospace;font-size:1.7rem;letter-spacing:.45em;color:var(--accent);text-align:center;margin:1.3rem 0}
.riddlelist{text-align:left;margin:1rem 0;background:rgba(11,7,48,.4);border:1px solid rgba(192,132,252,.18);border-radius:8px;padding:14px 18px}
.riddlelist p{font-size:.95rem;color:#cdc1e4;margin:.55rem 0;line-height:1.6}
.riddlelist b{color:var(--blue-2)}
/* circuit */
#board{margin:1.2rem auto;max-width:560px;overflow-x:auto;-webkit-overflow-scrolling:touch}
#board svg{display:block;width:100%;height:auto;border:1px solid rgba(96,165,250,.25);border-radius:12px;box-shadow:0 0 30px rgba(20,120,40,.18)}
/* inner archive */
.cluebox{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--muted);line-height:1.7;white-space:pre-line;background:rgba(11,7,48,.4);border:1px solid rgba(192,132,252,.18);border-radius:8px;padding:14px 16px;margin:1rem 0}
.cluebox b{color:var(--blue-2);display:block;margin:.5rem 0 .2rem}
.cw-img{display:block;width:100%;max-width:540px;margin:1rem auto;border-radius:10px;border:1px solid rgba(192,132,252,.25);background:#fff;padding:6px}
.board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:340px;margin:1.2rem auto;border:2px solid #2a2a33;border-radius:6px;overflow:hidden}
.sq{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1}
.sq.l{background:#cbb486}.sq.d{background:#7a5a38}
.sq .wp{color:#fff;text-shadow:0 0 2px rgba(0,0,0,.6)}
.sq .bp{color:#161616}
.posters{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:1.2rem 0}
.poster{display:flex;flex-direction:column;align-items:center;gap:6px;width:112px;text-align:center}
.poster img{width:112px;height:168px;object-fit:cover;border-radius:8px;border:1px solid rgba(192,132,252,.3);background:#15101f;display:block}
.poster span{font-family:'DM Mono',monospace;font-size:.66rem;color:var(--muted);line-height:1.3}
.screen{animation:fadeUp .6s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* ---- mobile ---- */
@media(max-width:560px){
  .wrap{padding:40px 16px 80px}
  .row{flex-direction:column;align-items:stretch}
  .row .btn,.row input[type=text]{width:100%;max-width:none}
  .row .btn{text-align:center}
  .backstep{width:auto;align-self:flex-start}
  .cipher{font-size:1.15rem;letter-spacing:.18em;word-break:break-word}
  .cwgrid{margin:0}                 /* left-align so horizontal scroll starts at A1 */
  /* keep the circuit finger-tappable: let it pan rather than shrink to nothing */
  #board svg{width:auto;min-width:480px}
  .keeper,.player{max-width:100%}
  .doors{grid-template-columns:1fr}
}