/* ─────────────────────────────────────────────────────────
   CIPHER — page + puzzle board
   Accent: wheel violet #B45CFF
   ───────────────────────────────────────────────────────── */
:root{ --wheel:#B45CFF; }
.cipher-page{ --faq-accent:var(--wheel); }
.cipher-page .glow::before{background:var(--wheel);opacity:.12}
.cipher-page .glow::after{background:#33E0FF;opacity:.06}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kbd{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:7px;padding:2px 8px}

/* ── hero ── */
.cf-hero{padding:52px 0 16px}
.cf-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.cf-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(38px,5vw,64px);line-height:1;color:var(--wheel);
  text-shadow:0 0 40px rgba(180,92,255,.35);margin-bottom:14px;
}
.cf-sub{
  font-family:var(--mono);font-size:15px;color:var(--paper);
  border-left:3px solid var(--wheel);padding-left:14px;margin-bottom:22px;line-height:1.7;
}
.cf-hero .lede{color:var(--dim);font-size:16.5px;margin-bottom:24px;max-width:560px}
.cf-points{list-style:none;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.cf-points li{color:var(--dim);font-size:15px}
.cf-points li>span{margin-right:6px}
.cf-points b{color:var(--paper);font-weight:600}

/* ── the puzzle panel ── */
.cf-panel{
  background:var(--night);border:1px solid rgba(180,92,255,.3);border-radius:24px;
  padding:20px 20px 16px;max-width:460px;width:100%;margin:0 auto;
  box-shadow:0 24px 70px rgba(180,92,255,.14);
}
.cf-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cf-head h2{font-family:var(--display);font-weight:700;font-size:16px}
#cf-num{font-family:var(--mono);font-size:13px;color:var(--wheel)}
.cf-tier{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--dim);
}
.cf-tier.t0{color:#5DFF9C;border-color:rgba(93,255,156,.4)}
.cf-tier.t1{color:var(--signal);border-color:rgba(51,224,255,.4)}
.cf-tier.t2{color:#FF5C7A;border-color:rgba(255,92,122,.4)}
.cf-headbtns{margin-left:auto;display:flex;gap:6px}
.cf-ico{
  background:none;border:1px solid var(--line);border-radius:8px;color:var(--dim);
  width:30px;height:30px;cursor:pointer;font-size:13px;line-height:1;
}
.cf-ico:hover{color:var(--paper);border-color:var(--dim)}

/* ciphertext — the thing you are decoding */
.cf-cipherwrap{
  background:rgba(180,92,255,.07);border:1px solid rgba(180,92,255,.28);
  border-radius:14px;padding:12px 10px 10px;margin-bottom:6px;text-align:center;
}
.cf-cipherlabel{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
#cf-cipher{display:flex;justify-content:center;gap:6px}
.cf-sym{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:44px;height:52px;border-radius:10px;
  background:rgba(11,13,26,.6);border:1px solid var(--line);
}
.cf-sym b{font-family:var(--mono);font-weight:600;font-size:19px;color:var(--wheel)}
.cf-sym i{font-family:var(--display);font-style:normal;font-weight:700;font-size:13px;color:var(--dim);margin-top:1px}
.cf-sym.is-known{border-color:rgba(93,255,156,.55);background:rgba(93,255,156,.08)}
.cf-sym.is-known i{color:#5DFF9C}

.cf-meta{display:flex;gap:14px;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:10px}
.cf-meta b{color:var(--paper)}

/* guess rows */
#cf-board{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.cf-row{display:flex;gap:5px;align-items:center;justify-content:center}
.cf-cell{
  width:40px;height:40px;border-radius:8px;
  border:1px solid var(--line);background:rgba(242,241,255,.03);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--paper);
}
.cf-cell.is-typing{border-color:var(--wheel)}
.cf-cell.is-placed{background:rgba(93,255,156,.16);border-color:rgba(93,255,156,.6);color:#5DFF9C}
.cf-cell.is-off{opacity:.5}
.cf-row.is-active .cf-cell{border-color:rgba(180,92,255,.35)}
.cf-score{
  font-family:var(--mono);font-size:13px;color:var(--paper);
  min-width:38px;text-align:right;
}
.cf-score em{font-style:normal;color:var(--dim);font-size:10px}
.cf-score-empty{min-width:38px}
@keyframes cfshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.cf-row.shake{animation:cfshake .5s}

/* the wheel — signature element */
.cf-wheelwrap{border-top:1px solid var(--line);padding-top:12px;margin-bottom:10px}
.cf-wheellabel{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;text-align:center}
#cf-wheel{display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.cf-map{
  display:flex;flex-direction:column;align-items:center;
  border-radius:6px;padding:3px 0;
  background:rgba(242,241,255,.03);border:1px solid transparent;
}
.cf-map b{font-family:var(--mono);font-weight:600;font-size:10px;color:var(--dim)}
.cf-map i{font-family:var(--mono);font-style:normal;font-size:11px;color:rgba(242,241,255,.25)}
.cf-map.is-known{background:rgba(180,92,255,.16);border-color:rgba(180,92,255,.5)}
.cf-map.is-known b{color:var(--paper)}
.cf-map.is-known i{color:var(--wheel)}

.cf-msg{min-height:20px;text-align:center;font-size:13px;color:var(--dim);margin-bottom:8px}
.cf-msg.is-good{color:#5DFF9C}
.cf-msg.is-warn{color:#FFC53F}
.cf-msg.is-bad{color:#FF5C7A}

/* keyboard */
#cf-keys{display:flex;flex-direction:column;gap:5px}
.cf-krow{display:flex;gap:4px;justify-content:center}
.cf-key{
  flex:1;min-width:0;height:42px;border-radius:7px;cursor:pointer;
  background:rgba(242,241,255,.09);border:1px solid var(--line);color:var(--paper);
  font-family:var(--body);font-weight:600;font-size:13px;
  display:grid;place-items:center;
}
.cf-key:hover{background:rgba(242,241,255,.16)}
.cf-key.is-used{opacity:.35}
.cf-key.is-known{background:rgba(180,92,255,.24);border-color:rgba(180,92,255,.6);opacity:1}
.cf-key.wide{flex:1.6;font-size:11px;letter-spacing:.06em}

/* overlays */
.cf-ov{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(5,7,16,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px;
}
.cf-ov[hidden]{display:none}
.cf-ovbox{
  background:var(--night);border:1px solid rgba(180,92,255,.35);border-radius:20px;
  padding:26px 24px;max-width:400px;width:100%;text-align:center;max-height:88vh;overflow-y:auto;
}
.cf-ovbox h3{font-family:var(--display);font-weight:900;font-size:24px;color:var(--wheel);margin-bottom:4px}
.cf-ovbox .sub{color:var(--dim);font-size:13px;font-family:var(--mono);margin-bottom:16px}
#cfr-word{
  font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.14em;
  color:var(--paper);margin-bottom:14px;
}
/* Explicit, because these two are hidden while a puzzle is still in play —
   the answer must not come back if either ever gains a display rule. */
#cfr-word[hidden],#cfr-share[hidden]{display:none}
.cfr-stats{display:flex;justify-content:center;gap:18px;margin-bottom:16px}
.cfr-stats div{display:flex;flex-direction:column}
.cfr-stats b{font-family:var(--display);font-size:19px;color:var(--paper)}
.cfr-stats span{font-family:var(--mono);font-size:10px;color:var(--dim)}
#cfr-dist{display:flex;flex-direction:column;gap:3px;margin-bottom:16px}
.cfr-drow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.cfr-drow>span{width:12px;text-align:right}
.cfr-drow i{
  display:block;background:rgba(242,241,255,.12);border-radius:4px;height:18px;
  font-style:normal;color:var(--paper);font-size:10px;text-align:right;padding:2px 6px 0 0;
}
.cfr-drow.is-now i{background:var(--wheel);color:#1A0A28}
.cf-next{font-family:var(--mono);font-size:12px;color:var(--dim);margin-bottom:14px}
.cf-next b{color:var(--paper)}
.cf-ovbtns{display:flex;flex-direction:column;gap:8px}
.cf-btn{
  font-family:var(--display);font-weight:700;font-size:14px;padding:12px 18px;border-radius:12px;
  cursor:pointer;border:1px solid var(--line);background:rgba(242,241,255,.06);color:var(--paper);
}
.cf-btn:hover{background:rgba(242,241,255,.12)}
.cf-btn-primary{background:var(--wheel);color:#1A0A28;border-color:transparent}
.cf-how-steps{text-align:left;display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.cf-how-steps p{color:var(--dim);font-size:13.5px;line-height:1.6}
.cf-how-steps b{color:var(--paper)}
.cf-demo{display:flex;gap:5px;justify-content:center;margin:6px 0 2px}

/* ── landing sections ── */
.cf-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cf-card{background:var(--night);border:1px solid var(--line);border-radius:16px;padding:24px 22px}
.cf-card .n{font-family:var(--mono);font-size:19px;color:var(--wheel);display:block;margin-bottom:10px}
.cf-card h3{font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:8px}
.cf-card p{color:var(--dim);font-size:14px}
.cf-card b{color:var(--paper)}
.cf-note{
  margin-top:18px;text-align:center;background:rgba(180,92,255,.07);
  border:1px solid rgba(180,92,255,.3);border-radius:14px;padding:14px 18px;
  color:var(--dim);font-size:14.5px;
}
.cf-note b{color:var(--wheel)}

/* practice mode — replaying a finished puzzle */
.cf-practice{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(180,92,255,.08);border:1px solid rgba(180,92,255,.32);
  border-radius:12px;padding:9px 12px;margin-bottom:12px;
  color:var(--dim);font-size:12.5px;line-height:1.5;
}
.cf-practice[hidden]{display:none}
.cf-practice .tag{
  flex-shrink:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--wheel);color:#1A0A28;border-radius:999px;padding:3px 9px;font-weight:600;
}
.cf-practice b{color:var(--paper)}
.cf-practice a{color:var(--wheel);white-space:nowrap}
.cfr-practice{
  color:var(--dim);font-size:12.5px;line-height:1.5;margin:2px 0 10px;
  background:rgba(180,92,255,.08);border:1px solid rgba(180,92,255,.3);
  border-radius:10px;padding:9px 12px;
}
.cfr-practice[hidden]{display:none}
.cfr-practice a{color:var(--wheel);white-space:nowrap}

/* full rules + strategy, on the main page */
.cf-rules{max-width:780px;margin-top:34px}
.cf-rules h3{font-family:var(--display);font-weight:700;font-size:17px;margin:0 0 14px}
.cf-rules h3:not(:first-child){margin-top:30px}
.cf-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cf-steps li{display:flex;gap:14px;align-items:flex-start}
.cf-steps .s{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:rgba(180,92,255,.15);border:1px solid rgba(180,92,255,.4);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--wheel);
}
.cf-steps p{color:var(--dim);font-size:15px;line-height:1.6}
.cf-steps b{color:var(--paper)}
.cf-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cf-tips li{color:var(--dim);font-size:15px;line-height:1.6;padding-left:18px;position:relative}
.cf-tips li::before{content:"◆";position:absolute;left:0;top:0;color:var(--wheel);font-size:11px}
.cf-tips b{color:var(--paper)}
.cf-oneline{
  margin-top:26px;background:var(--night);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;color:var(--dim);font-size:15px;line-height:1.6;
}
.cf-oneline b{color:var(--paper)}
.cf-deeper{margin-top:14px;color:var(--dim);font-size:14px}
.cf-deeper a{color:var(--wheel)}
@media(max-width:640px){
  .cf-steps li{gap:10px}
  .cf-steps p,.cf-tips li{font-size:14px}
}

.cf-archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cf-arch{
  background:var(--night);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  text-decoration:none;color:var(--paper);display:block;transition:transform .15s,border-color .15s;
}
.cf-arch:hover{transform:translateY(-2px);border-color:rgba(180,92,255,.5)}
.cf-arch b{font-family:var(--display);font-size:14px;display:block}
.cf-arch span{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* responsive */
@media(max-width:1020px){
  .cf-hero-grid{grid-template-columns:1fr;gap:32px}
  .cf-hero-copy{text-align:center}
  .cf-sub{border-left:none;border-top:3px solid var(--wheel);padding:12px 0 0;display:inline-block}
  .cf-hero .lede{margin-inline:auto}
  .cf-points{align-items:center}
  .cf-how-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .cf-sym{width:38px;height:46px}
  .cf-sym b{font-size:17px}
  .cf-cell{width:36px;height:36px;font-size:15px}
  .cf-key{height:38px;font-size:12px}
  .cf-panel{padding:16px 14px 12px}
  #cf-wheel{grid-template-columns:repeat(9,1fr)}
}