/* ============================================================
   THE WORLDHOPPER'S GAMBIT — Cosmere escape room
   Styling only. Puzzle data lives in js/cosmere-data.js,
   logic in js/cosmere-engine.js.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-deep:#04020f;
  --purple-1:#7c3aed; --purple-2:#a855f7;
  --blue-1:#2563eb;   --blue-2:#60a5fa;
  --accent:#c084fc;   --gold:#e7c873;
  --text:#e7dffb;     --muted:#8b7fb0;
  --good:#5be0a6;     --bad:#f87171;
  --line:rgba(192,132,252,.22);
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;background:#050310;font-family:'Syne',sans-serif;color:var(--text);
  overflow-x:hidden;position:relative
}
/* ---- ambient background (the Cognitive Realm: beads + distant lights) ---- */
canvas#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.9;pointer-events:none}
.bg-spot{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% -8%, rgba(150,165,255,.16) 0%, rgba(124,58,237,.08) 34%, transparent 64%)}
.bg-vign{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 95% 88% at 50% 34%, transparent 30%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.92) 100%)}

.wrap{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:54px 22px 110px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}

.back-btn{position:fixed;top:16px;left:18px;z-index:6;color:var(--muted);text-decoration:none;
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:1px}
.back-btn:hover{color:var(--accent)}

/* ---- type ---- */
.label{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.26em;color:var(--blue-2);text-transform:uppercase;margin-bottom:1rem}
h1{font-size:clamp(2.1rem,6.5vw,3.6rem);font-weight:800;line-height:1.04;
  background:linear-gradient(135deg,#e7c873 0%,#c084fc 42%,#60a5fa 88%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
h2{font-size:clamp(1.35rem,4vw,2rem);font-weight:800;margin-bottom:.3rem}
.divider{width:64px;height:2px;background:linear-gradient(90deg,var(--gold),var(--blue-2));margin:1rem 0 1.4rem;border-radius:2px}
p{font-size:1.02rem;line-height:1.72;margin-bottom:1rem}
p.muted{color:var(--muted)}
.progress{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-bottom:.7rem}
.screen{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---- dialogue: Hoid / Wit voice + the seeker (you) ---- */
.dlg{margin:1.1rem 0;display:flex;flex-direction:column;gap:10px}
.wit,.you{display:flex;flex-direction:column;gap:.25rem;border-radius:13px;padding:13px 16px;line-height:1.66;max-width:95%}
.wit{background:linear-gradient(180deg,rgba(231,200,115,.07),rgba(124,58,237,.06));border:1px solid rgba(231,200,115,.28);align-self:flex-start}
.you{background:rgba(37,99,235,.09);border:1px solid rgba(96,165,250,.28);align-self:flex-end;text-align:right}
.who{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.wit .who{color:var(--gold)} .you .who{color:var(--blue-2)}
.wit p,.you p{margin:0}
.wit i{color:var(--gold)}

/* ---- the riddle / cipher presentation ---- */
.scroll{font-style:italic;color:var(--blue-2);border-left:2px solid rgba(96,165,250,.4);padding:2px 0 2px 16px;margin:1.2rem 0;line-height:1.95;white-space:pre-line}
.cipher{font-family:'DM Mono',monospace;font-size:1.25rem;letter-spacing:.18em;color:var(--accent);text-align:center;margin:1.3rem 0;text-shadow:0 0 18px rgba(192,132,252,.4);line-height:1.9}
.clue-list{list-style:none;margin:1.1rem 0;display:flex;flex-direction:column;gap:.55rem}
.clue-list li{padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(11,7,40,.42);line-height:1.6}
.clue-list li b{color:var(--gold)}
.tablewrap{overflow-x:auto;margin:1.1rem 0}
table.lore{width:100%;border-collapse:collapse;font-size:.92rem}
table.lore th,table.lore td{border:1px solid var(--line);padding:8px 10px;text-align:left}
table.lore th{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.2rem;margin:1rem 0}
.pair .col{display:flex;flex-direction:column;gap:.45rem}
.pair .chip{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(11,7,40,.42);font-size:.92rem}
.pair .chip b{color:var(--gold)}

/* interactive matching */
.matchbox{display:flex;flex-direction:column;gap:.55rem;margin:1.1rem 0}
.matchrow{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:12px;align-items:center;
  padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(11,7,40,.42)}
.matchrow .ml{font-weight:800;color:var(--gold);font-size:.96rem}
select.msel{font-family:'Syne',sans-serif;font-size:16px;color:var(--text);
  background:rgba(5,3,16,.85);border:1px solid rgba(192,132,252,.35);border-radius:7px;padding:9px 10px;width:100%;outline:none;cursor:pointer}
select.msel:focus{border-color:var(--accent);box-shadow:0 0 14px rgba(192,132,252,.22)}
select.msel option{background:#0a0720;color:var(--text)}
@media (max-width:520px){ .matchrow{grid-template-columns:1fr;gap:6px} }

/* ---- input ---- */
.ask{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--gold);letter-spacing:.04em;margin:1.1rem 0 .5rem}
input[type=text]{font-family:'DM Mono',monospace;font-size:1rem;letter-spacing:.1em;
  background:rgba(11,7,40,.6);border:1px solid rgba(192,132,252,.35);color:var(--text);
  padding:12px 16px;border-radius:8px;width:100%;max-width:420px;outline:none}
input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 16px rgba(192,132,252,.25)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.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:.76rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:.22s;margin-top:6px}
.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)}
.btn.gold{border-color:var(--gold);color:var(--gold);background:rgba(231,200,115,.1)}
.btn.gold:hover{background:var(--gold);color:var(--bg-deep);box-shadow:0 0 22px rgba(231,200,115,.45)}
.feedback{font-family:'DM Mono',monospace;font-size:.82rem;margin-top:12px;min-height:20px;line-height:1.6}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)}

/* ---- graded hints ---- */
.hints{margin-top:20px;border-top:1px dashed rgba(139,127,176,.25);padding-top:14px}
.hints-label{font-family:'DM Mono',monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hint{font-family:'DM Mono',monospace;font-size:.82rem;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:"\25B8  ";color:var(--accent)}
.hint[open] summary:before{content:"\25BE  "}
.hint .body{margin-top:6px;padding-left:14px;border-left:1px solid rgba(96,165,250,.3);line-height:1.75;color:var(--text)}

/* ---- the hub: ten Perpendicularities ---- */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.6rem 0}
.portal{position:relative;display:flex;flex-direction:column;gap:.35rem;border:1px solid var(--line);border-radius:14px;
  padding:16px 14px;background:rgba(11,7,40,.5);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;text-align:left}
.portal:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 32px rgba(124,58,237,.28)}
.portal .world{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
.portal .pname{font-weight:800;font-size:1.05rem;line-height:1.15;color:var(--text)}
.portal .pbook{font-size:.78rem;color:var(--muted);line-height:1.4}
.portal .frag{position:absolute;top:12px;right:14px;font-family:'DM Mono',monospace;font-size:1.35rem;font-weight:700;color:var(--gold);text-shadow:0 0 12px rgba(231,200,115,.55)}
.portal.done{border-color:rgba(231,200,115,.5);background:rgba(231,200,115,.06)}
.portal.done .pname{color:var(--gold)}
.portal.locked{opacity:.5;cursor:not-allowed}
.portal.locked:hover{transform:none;border-color:var(--line);box-shadow:none}
.converge{margin-top:8px;border:1px solid rgba(231,200,115,.4);border-radius:14px;padding:18px;
  background:linear-gradient(180deg,rgba(231,200,115,.08),rgba(124,58,237,.06));text-align:center}
.converge.locked{opacity:.55}
.converge h3{font-size:1.2rem;color:var(--gold);margin-bottom:.4rem}

/* ---- fragment tally ---- */
.tally{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:1.2rem 0}
.tally .slot{width:38px;height:46px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:1.3rem;font-weight:700;color:var(--muted);background:rgba(11,7,40,.5)}
.tally .slot.has{color:var(--gold);border-color:rgba(231,200,115,.5);text-shadow:0 0 12px rgba(231,200,115,.5)}

.footnote{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);margin-top:1.6rem;line-height:1.7;border-top:1px solid rgba(139,127,176,.2);padding-top:12px}
.footnote b{color:var(--blue-2)}
.toolbar{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.2rem;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.08em}
.toolbar a{color:var(--muted);cursor:pointer;text-decoration:none}
.toolbar a:hover{color:var(--accent)}

/* ---- victory ---- */
.victory h1{font-size:clamp(2.2rem,7vw,3.8rem)}
.glyphword{font-family:'DM Mono',monospace;font-size:clamp(1.4rem,5vw,2.4rem);letter-spacing:.3em;color:var(--gold);
  text-align:center;margin:1.4rem 0;text-shadow:0 0 24px rgba(231,200,115,.5)}

@media (max-width:520px){
  .pair{grid-template-columns:1fr}
  .hubgrid{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:44px 16px 90px}
  .row{flex-direction:column;align-items:stretch}
  .row .btn{width:100%;text-align:center;margin-top:0}
  input[type=text]{max-width:none}
  .wit,.you{max-width:100%}
}