:root {
  --ink: #0b0b0b;
  --ink-soft: #171513;
  --paper: #f3eee3;
  --paper-2: #e8dfd0;
  --card: #fffdf7;
  --crimson: #7b1622;
  --crimson-bright: #a42b38;
  --gold: #b48a45;
  --gold-soft: #e1cc9f;
  --muted: #6f685f;
  --line: #d7ccba;
  --success: #225c42;
  --danger: #8a1e29;
  --shadow: 0 24px 70px rgba(29, 23, 18, .16);
  --radius: 22px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(180,138,69,.13), transparent 31rem),
    linear-gradient(145deg, #181512, #070706 74%);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.52;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a { color: var(--crimson); }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 12px; top: -90px; z-index: 200; padding: 10px 14px; background: var(--paper); color: var(--ink); border-radius: 8px; font: 750 .88rem system-ui, sans-serif; transition: top .15s ease; }
.skip-link:focus { top: 8px; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  min-height: 64px; padding: 8px 12px;
  color: #f8f1e4; background: rgba(9, 8, 7, .91);
  border-bottom: 1px solid rgba(225,204,159,.2); backdrop-filter: blur(14px);
}
.topbar-brand { justify-self: center; display: inline-flex; align-items: center; gap: 10px; color: #f8f1e4; text-decoration: none; font: 800 clamp(.66rem,2.4vw,.78rem)/1 system-ui, sans-serif; letter-spacing: .17em; white-space: nowrap; }
.topbar-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--card); border: 1px solid rgba(225,204,159,.8); overflow: hidden; }
.topbar-mark img { width: 92%; height: 92%; object-fit: contain; }
.icon-button { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: inherit; cursor: pointer; }
.icon-button:hover { background: rgba(255,255,255,.07); }
.icon-button svg { width: 22px; height: 22px; }
main { flex: 1; }
.view { width: min(100%, 760px); margin: 0 auto; }
.intro-view { color: #f7efe2; padding: clamp(28px,6vh,66px) 18px 44px; text-align: center; }
.brand-medallion { width: clamp(112px,29vw,146px); height: clamp(112px,29vw,146px); margin: 0 auto 23px; display: grid; place-items: center; border-radius: 30%; background: var(--card); border: 2px solid var(--gold); box-shadow: 0 20px 54px rgba(0,0,0,.34), inset 0 0 0 8px rgba(180,138,69,.08); overflow: hidden; }
.brand-medallion img { width: 91%; height: 91%; object-fit: contain; }
.brand-medallion.compact { width: 78px; height: 78px; margin-bottom: 18px; border-radius: 24%; }
.kicker { margin: 0 0 10px; color: var(--gold-soft); font: 800 .74rem/1.25 system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.intro-view h1 { margin: 0; line-height: .86; font-weight: 500; letter-spacing: -.055em; }
.intro-view h1 span { display: block; font-size: clamp(3rem,14vw,6.4rem); }
.intro-view h1 span:last-child { color: var(--gold-soft); font-size: clamp(2.7rem,12.5vw,5.7rem); letter-spacing: .015em; margin-top: 8px; }
.tagline { max-width: 600px; margin: 27px auto 0; font-size: clamp(1.16rem,4vw,1.5rem); }
.tagline strong { color: var(--gold-soft); font-weight: 400; }
.move-line { margin: 9px 0 0; color: var(--gold); font: 850 .77rem/1.2 system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.intro-actions { display: grid; gap: 12px; max-width: 430px; margin: 32px auto 0; }
.primary-button, .secondary-button, .answer-choice {
  min-height: 54px; border-radius: 999px; padding: 13px 22px; cursor: pointer; font-weight: 750;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif; transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none; display: inline-grid; place-items: center;
}
.primary-button { border: 1px solid var(--gold); color: #17120b; background: var(--gold-soft); box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.primary-button:hover { background: #f0ddaf; transform: translateY(-1px); }
.secondary-button { border: 1px solid rgba(225,204,159,.45); background: transparent; color: #f7efe2; }
.secondary-button:hover { border-color: var(--gold-soft); background: rgba(255,255,255,.04); }
.meta-strip { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 28px auto 0; color: rgba(247,239,226,.72); font: .78rem/1.4 system-ui, sans-serif; }
.meta-strip span { display: inline-flex; align-items: center; gap: 7px; }
.meta-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.game-view { min-height: calc(100vh - 64px); background: var(--paper); }
.game-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--line); background: rgba(243,238,227,.97); position: sticky; top: 64px; z-index: 20; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 680px; margin: auto; font-family: system-ui, sans-serif; }
.day-label { color: var(--crimson); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.score { font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 750; color: var(--muted); }
.progress-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; max-width: 680px; margin: 11px auto 0; }
.progress-node { height: 4px; border-radius: 999px; background: #d7cdbd; position: relative; overflow: hidden; }
.progress-node.done, .progress-node.current { background: var(--crimson); }
.progress-node.gambit { background: var(--gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); height: 9px; margin-top: -2px; }
.challenge-wrap { padding: 24px 14px 46px; }
.challenge-card { max-width: 680px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-head { position: relative; isolation: isolate; padding: 25px 22px 20px; background: linear-gradient(180deg, #fffdf7, #f7f0e4); border-bottom: 1px solid var(--line); overflow: hidden; }
.card-head::after { content: ""; position: absolute; z-index: -1; width: 96px; height: 96px; right: 12px; top: 10px; background: url('brand/moriarty-silhouette.png') center/contain no-repeat; opacity: .027; }
.stage-count { margin: 0 0 7px; font: 800 .7rem/1.2 system-ui, sans-serif; letter-spacing: .16em; color: var(--crimson); text-transform: uppercase; }
.challenge-card h2 { margin: 0; padding-right: 36px; font-size: clamp(1.75rem,7vw,2.75rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; }
.intro-copy { color: var(--muted); margin: 12px 0 0; font-style: italic; }
.puzzle-body { padding: 23px 22px 8px; font-size: 1.05rem; }
.puzzle-body p { margin: 0 0 15px; }
.rule-line { padding: 12px 13px; border-left: 3px solid var(--gold); background: #f6efe2; }
.question-copy { margin: 22px 0 14px; font-size: 1.18rem; font-weight: 700; }
.answer-zone { padding: 4px 22px 24px; }
.answer-form { display: grid; gap: 12px; }
.answer-input { min-height: 56px; border: 1px solid #a89c8b; border-radius: 14px; padding: 12px 15px; background: #fff; color: var(--ink); font-family: system-ui, sans-serif; font-size: 1.05rem; }
.answer-input::placeholder { color: #938a7e; }
.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.answer-choice { border: 1px solid #a89c8b; background: #fff; color: var(--ink); border-radius: 14px; }
.answer-choice[aria-pressed="true"] { border-color: var(--crimson); background: #f5e8e8; box-shadow: inset 0 0 0 1px var(--crimson); }
.form-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.submit-answer { border-radius: 14px; min-height: 54px; }
.hint-button { min-width: 54px; min-height: 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); cursor: pointer; font-family: system-ui, sans-serif; font-weight: 800; }
.hint-button:hover { background: var(--paper-2); }
.feedback { margin-top: 13px; border-radius: 14px; padding: 14px 15px; font-family: system-ui, sans-serif; font-size: .95rem; }
.feedback.correct { background: #e7f0e8; color: #174b34; border: 1px solid #b8d2be; }
.feedback.wrong { background: #f6e8e8; color: #761924; border: 1px solid #dfb7bc; }
.feedback.hint { background: #f8f0dc; color: #66501f; border: 1px solid #e3cf9c; }
.explanation { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(0,0,0,.1); }
.continue-button { width: 100%; margin-top: 14px; border-radius: 14px; }
.reveal-button { margin: 4px auto 0; border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: .83rem system-ui, sans-serif; }
.letter-grid { display: grid; grid-template-columns: repeat(3,64px); gap: 8px; justify-content: center; margin: 22px auto; }
.letter-grid span { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #938570; background: #fff; font-size: 1.55rem; }
.evidence-word, .equation-line { margin: 22px auto; padding: 17px 18px; background: #161311; color: var(--gold-soft); border-radius: 12px; text-align: center; letter-spacing: .18em; font: 800 1.35rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.cipher-strip { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px auto; }
.cipher-strip span { min-width: 52px; height: 52px; display: grid; place-items: center; background: #171411; color: var(--gold-soft); border-radius: 10px; font: 800 1.25rem system-ui, sans-serif; }
.evidence-note { margin: 20px 0; padding: 17px 18px; background: #f3eadb; border-left: 4px solid var(--crimson); }
.evidence-note p { margin: 0 0 9px; }
.evidence-note p:last-child { margin-bottom: 0; }
.moriarty-line { text-align: center; font-style: italic; color: var(--crimson); }
.mirror-wheel { width: 220px; height: 220px; margin: 16px auto 24px; border: 12px solid #22201d; border-radius: 50%; position: relative; background: radial-gradient(circle,#f8f2e6,#ddd0bb); box-shadow: inset 0 0 30px rgba(0,0,0,.18); }
.mirror-wheel span { position: absolute; font: 800 1.35rem system-ui, sans-serif; }
.mw1 { top: 7px; left: 96px; }.mw2 { top: 47px; right: 27px; }.mw3 { bottom: 37px; right: 43px; }.mw4 { bottom: 37px; left: 43px; }.mw5 { top: 47px; left: 27px; }
.mirror-wheel i { position: absolute; width: 2px; height: 42px; background: var(--crimson); top: -18px; left: 102px; transform: rotate(18deg); }
.pentagon-puzzle, .map-puzzle { display: block; width: min(100%,360px); margin: 16px auto; }
.pentagon-puzzle .route polyline, .map-puzzle .route-preview polyline { fill: none; stroke: var(--crimson); stroke-width: 4; stroke-linejoin: round; }
.pentagon-puzzle .nodes circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.pentagon-puzzle .nums text { text-anchor: middle; font: 800 16px system-ui, sans-serif; }
.fold-card { width: 180px; aspect-ratio:1; margin: 20px auto; background: #fff; border: 2px solid var(--ink); position: relative; }
.fold-card::before, .fold-card::after { content:""; position:absolute; background: repeating-linear-gradient(90deg,var(--crimson) 0 5px,transparent 5px 10px); opacity:.5; }
.fold-card::before { width:1px;height:100%;left:50%;top:0; }.fold-card::after { width:100%;height:1px;left:0;top:50%; }
.fold-card span { width:13px;height:13px;border-radius:50%;background:var(--ink);position:absolute;left:70%;top:28%; }
.answer-stack { display: grid; gap: 8px; margin: 16px 0; }
.answer-stack span { padding: 11px 13px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font: 750 .95rem system-ui, sans-serif; }
.answer-stack.compact { grid-template-columns: repeat(2,1fr); }
.map-puzzle .grid-lines path { fill:none;stroke:#cfc4b1;stroke-width:1; }
.map-puzzle .map-nodes circle { fill:var(--crimson); }
.map-puzzle .map-labels text { text-anchor:middle; font: 800 12px system-ui,sans-serif; fill:var(--ink); }
.bulb-row { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin:20px 0; }
.bulb-row span { width:31px;height:42px;border-radius:50% 50% 45% 45%;border:1px solid #8e8374;display:grid;place-items:center;background:#d8d1c6;color:#726a61;font:800 .82rem system-ui,sans-serif;position:relative; }
.bulb-row span::after { content:"";position:absolute;bottom:-7px;width:17px;height:8px;background:#7e756a;border-radius:2px; }
.bulb-row span.on { background:#f8d98d;color:#17120b;box-shadow:0 0 18px rgba(219,168,66,.62); }
.fragment-pair { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0; }
.fragment-pair span { padding:16px 8px;text-align:center;background:#f0e6d7;border:1px dashed #8e7b64;font:800 1.1rem ui-monospace,monospace; }
.rebus-stack { display:grid;gap:22px;justify-items:center;margin:26px 0;font:900 1.25rem system-ui,sans-serif;letter-spacing:.13em; }
.rebus-stack span:first-child { border-bottom:3px solid var(--ink);padding:0 26px 4px; }
.band-list { display:grid;gap:7px;margin:18px 0; }
.band-list span { padding:10px 12px;border-left:4px solid var(--gold);background:#f3eadb;font:700 .93rem system-ui,sans-serif; }
.solved-answers { display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:18px 0 6px; }
.solved-answer { min-width:0;padding:11px 5px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:center;font:800 clamp(.68rem,2.7vw,.9rem)/1.15 system-ui,sans-serif;overflow-wrap:anywhere; }
.gambit-card .card-head { background: linear-gradient(145deg,#11100f,#292019);color:#f7efe2;border-color:#48392d; }
.gambit-card .card-head::after { filter: invert(1); opacity: .045; }
.gambit-card .stage-count { color:var(--gold-soft); }
.gambit-card .intro-copy { color:#cdbfae; }
.gambit-mark, .result-brand-mark { width:48px;height:48px;border:1px solid var(--gold);border-radius:14px;margin:0 0 18px 2px;display:grid;place-items:center;background:var(--card);overflow:hidden; }
.gambit-mark img, .result-brand-mark img { width:92%;height:92%;object-fit:contain; }
.result-view { min-height:calc(100vh - 64px);background:var(--paper);padding:30px 15px 60px; }
.result-panel { max-width:680px;margin:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-align:center; }
.result-hero { padding:30px 22px 29px;background:linear-gradient(145deg,#11100f,#292019);color:#f7efe2; }
.result-brand-mark { margin: 0 auto 16px; width:62px;height:62px;border-radius:18px; }
.result-hero h2 { margin:0;font-size:2.35rem;font-weight:500; }
.result-score { font-size:clamp(4rem,20vw,7rem);line-height:.9;color:var(--gold-soft);margin:22px 0 6px;font-variant-numeric:tabular-nums; }
.result-score small { font-size:.22em;color:#cdbfae; }
.rank { letter-spacing:.15em;text-transform:uppercase;font:800 .78rem system-ui,sans-serif;color:var(--gold-soft); }
.result-body { padding:25px 22px 30px; }
.result-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 22px; }
.result-stat { padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff; }
.result-stat strong { display:block;font-size:1.5rem; }
.result-stat span { color:var(--muted);font: .78rem system-ui,sans-serif; }
.reveal-copy { padding:17px;border-left:4px solid var(--crimson);background:#f2e8dc;text-align:left;font-style:italic;margin:18px 0 22px; }
.result-actions { display:grid;gap:10px; }
.result-actions .secondary-button { color:var(--crimson);border-color:#c5aeb0;background:#fff; }
.drawer { position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:min(88vw,370px) 1fr; }
.drawer[hidden] { display:none; }
.drawer-panel { background:#15120f;color:#f7efe2;padding:20px 18px 28px;overflow:auto;box-shadow:20px 0 60px rgba(0,0,0,.4); }
.drawer-scrim { background:rgba(0,0,0,.62);border:0; }
.drawer-brand { display:flex;align-items:center;gap:10px;margin:0 0 20px;color:var(--gold-soft);font:800 .7rem/1 system-ui,sans-serif;letter-spacing:.15em; }
.drawer-brand span { width:34px;height:34px;border:1px solid var(--gold);border-radius:10px;background:var(--card);display:grid;place-items:center;overflow:hidden; }
.drawer-brand img { width:92%;height:92%;object-fit:contain; }
.drawer-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px; }
.drawer-head h2 { margin:0;font-weight:500; }
.day-list { display:grid;gap:10px; }
.day-button { width:100%;text-align:left;padding:14px;border:1px solid #4a4035;border-radius:12px;background:#201b17;color:#f7efe2;cursor:pointer; }
.day-button:hover, .day-button.current { border-color:var(--gold);background:#2a221a; }
.day-button strong { display:block;font-size:1rem; }
.day-button span { display:block;color:#bfb2a1;font:.78rem/1.35 system-ui,sans-serif;margin-top:3px; }
.site-footer { text-align:center;color:rgba(247,239,226,.61);padding:26px 18px 34px;font:.75rem/1.55 system-ui,sans-serif; }
.site-footer a { color:var(--gold-soft); }
.footer-note { color:rgba(247,239,226,.46); }
.toast { position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);opacity:0;z-index:120;background:#171311;color:#fff;padding:11px 16px;border-radius:999px;font:750 .86rem system-ui,sans-serif;transition:.2s ease;pointer-events:none; }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.noscript { position:fixed;inset:auto 16px 16px;z-index:300;padding:14px 16px;background:#fff4d5;color:#4c3a10;border:1px solid #d6b55d;border-radius:12px;font:750 .9rem/1.4 system-ui,sans-serif; }
.legal-view { min-height: calc(100vh - 64px); background: var(--paper); }
.legal-card .puzzle-body { padding-bottom: 28px; }
.legal-card h2 { padding-right: 0; }
.legal-card h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.legal-card ul { padding-left: 22px; }
.contact-email { letter-spacing: .04em; overflow-wrap: anywhere; }
.contact-email a { color: inherit; }
.legal-brand { display:flex;align-items:center;gap:12px;margin-bottom:18px; }
.legal-brand span { width:54px;height:54px;border:1px solid var(--gold);border-radius:15px;background:var(--card);display:grid;place-items:center;overflow:hidden; }
.legal-brand img { width:92%;height:92%;object-fit:contain; }
.legal-brand strong { font:800 .76rem/1.15 system-ui,sans-serif;letter-spacing:.14em;color:var(--crimson); }
@media (max-width: 390px) {
  .topbar-brand { letter-spacing: .11em; gap:7px; }
  .topbar-mark { width:29px;height:29px; }
  .intro-view h1 span { font-size: 2.85rem; }
  .intro-view h1 span:last-child { font-size: 2.55rem; }
  .choice-grid { grid-template-columns: 1fr; }
}
@media (min-width: 620px) {
  .challenge-wrap { padding:38px 22px 66px; }
  .card-head { padding:31px 34px 23px; }
  .puzzle-body { padding:27px 34px 8px; }
  .answer-zone { padding:6px 34px 32px; }
  .intro-actions { grid-template-columns:1fr 1fr;max-width:560px; }
  .form-actions { grid-template-columns:1fr 62px; }
  .result-grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width: 900px) {
  .topbar { grid-template-columns:58px 1fr 58px;padding-inline:22px; }
  .game-view,.result-view,.legal-view { border-left:1px solid rgba(225,204,159,.18);border-right:1px solid rgba(225,204,159,.18); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important;animation:none !important;transition:none !important; }
}