/* SherloCode — design tokens condivisi + stili puntate */

:root{
  --bg:#0A0A0B;
  --panel:#101013;
  --border:#232327;
  --border-soft:#1C1C20;
  --text:#F2F2F0;
  --muted:#9A9A94;
  --dim:#6E6E68;
  --accent:#CDFF3A;
  --danger:#FF7A2B;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--bg);
  background-image:radial-gradient(#15151A 1.2px, transparent 1.2px);
  background-size:34px 34px;
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.5;
  min-height:100vh;
  padding:0 0 120px;
}
.mono{font-family:'Space Mono', monospace;}
.wrap{max-width:720px;margin:0 auto;padding:0 28px;}

/* header */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--border-soft);
  font-family:'Space Mono',monospace;font-size:13px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--dim);gap:16px;flex-wrap:wrap;
}
header .status{color:var(--accent);}
header .status.locked{color:var(--dim);}
header .status.solved{color:var(--danger);}
header .header-right{display:flex;align-items:center;gap:18px;}
header .brand{display:flex;align-items:center;gap:10px;}
header .brand-mark{display:block;flex-shrink:0;border-radius:5px;}

.lang-switch{display:flex;gap:2px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.1em;}
.lang-switch a{
  color:var(--dim);text-decoration:none;padding:4px 8px;border:1px solid var(--border);
  border-radius:3px;transition:color .15s ease,border-color .15s ease;
}
.lang-switch a.active{color:var(--accent);border-color:var(--accent);}
.lang-switch a:hover{color:var(--text);}

/* hero */
.hero{padding:64px 0 40px;}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:13px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px;display:block;
}
h1{
  font-size:clamp(32px, 6vw, 52px);
  font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin-bottom:22px;
}
.lede{font-size:19px;color:var(--muted);max-width:60ch;}

/* narrative */
.narrative{padding:8px 0 48px;font-size:17px;color:#C9C9C3;}
.narrative p{margin-bottom:18px;max-width:62ch;}
.narrative strong{color:var(--text);font-weight:600;}

.block{margin-bottom:18px;max-width:62ch;}
.block-p{font-size:17px;color:#C9C9C3;}
.block-code{
  font-family:'Space Mono',monospace;font-size:14px;color:var(--accent);
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:16px 18px;white-space:pre;overflow-x:auto;max-width:100%;
}
.block-quote{
  font-family:'Space Mono',monospace;font-size:15px;color:var(--text);font-weight:700;
  border-left:3px solid var(--accent);padding:4px 0 4px 18px;letter-spacing:0.02em;
}
.block-puzzle-cipher{
  font-family:'Space Mono',monospace;font-size:14px;color:var(--accent);
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:16px 18px;white-space:pre;overflow-x:auto;max-width:100%;
}
.block-puzzle-diff{
  font-family:'Space Mono',monospace;font-size:14px;
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:10px 0;overflow-x:auto;max-width:100%;
}
.diff-line{display:flex;gap:12px;padding:3px 18px;white-space:pre;}
.diff-marker{flex-shrink:0;width:10px;font-weight:700;user-select:none;}
.diff-add{background:rgba(205,255,58,0.06);color:var(--accent);}
.diff-add .diff-marker{color:var(--accent);}
.diff-remove{background:rgba(255,122,43,0.05);color:var(--dim);}
.diff-remove .diff-marker{color:var(--danger);}

/* cipher glyphs — testo ancora bloccato */
.chr{transition:color .15s ease;}
.chr.scrambled{color:var(--dim);}
.chr.revealed{color:inherit;}
.locked .block-code .chr.scrambled{color:var(--border);}
.locked .block-quote .chr.scrambled{color:var(--dim);}

/* unlock box */
.unlock{
  margin-top:12px;padding:32px 30px;
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
}
.unlock .eyebrow{margin-bottom:12px;}
.unlock h2{font-size:21px;font-weight:600;margin-bottom:10px;letter-spacing:-0.01em;}
.unlock p{color:var(--muted);font-size:15px;margin-bottom:22px;max-width:48ch;}
.unlock-form{display:flex;gap:12px;max-width:380px;flex-wrap:wrap;}
input.key-input{
  flex:1;min-width:180px;background:var(--bg);border:1px solid var(--border);
  border-radius:4px;padding:14px 16px;color:var(--text);font-family:'Space Mono',monospace;
  font-size:16px;letter-spacing:0.08em;text-transform:uppercase;text-align:center;
  outline:none;transition:border-color .2s ease;
}
input.key-input:focus{border-color:var(--accent);}
input.key-input.shake{animation:shake .3s ease;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}
button.key-submit{
  background:var(--accent);color:var(--bg);border:none;border-radius:4px;
  padding:14px 26px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  cursor:pointer;transition:transform .15s ease, opacity .15s ease;
}
button.key-submit:hover{transform:translateY(-1px);opacity:0.92;}
button.key-submit:active{transform:translateY(0);}
.unlock-feedback{
  margin-top:14px;font-family:'Space Mono',monospace;font-size:13px;
  letter-spacing:0.06em;text-transform:uppercase;min-height:18px;
}
.unlock-feedback.wrong{color:var(--danger);}
.unlock-feedback.right{color:var(--accent);}

/* footer nav */
.episode-nav{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--border-soft);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:'Space Mono',monospace;font-size:13px;letter-spacing:0.06em;
}
.episode-nav a{color:var(--accent);text-decoration:none;}
.episode-nav a:hover{text-decoration:underline;}
.episode-nav .forget{
  color:var(--dim);background:none;border:none;font-family:'Space Mono',monospace;
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;
  text-decoration:underline;padding:0;
}
.episode-nav .forget:hover{color:var(--muted);}

.not-found{padding:40px 0;}
.not-found p{color:var(--muted);margin-bottom:18px;max-width:56ch;}
.not-found a{color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  .chr, input.key-input.shake{animation:none !important;transition:none !important;}
}

@media (max-width:480px){
  .wrap{padding:0 20px;}
  .unlock{padding:26px 20px;}
}