/* ==========================================================================
   KaySociety course runtime (.kcf) - Cybersecurity Fundamentals
   Depends on ks.css custom properties: --text --muted --ks --pc --line-strong
   ========================================================================== */

.kcf { padding-bottom: var(--s-8); }

/* ---------- hero ---------- */
.kcf-hero { margin-top: var(--s-5); }
.kcf-hero .ks-sub { max-width: 46rem; }
.kcf-hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.kcf-overall { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.4rem; max-width: 34rem; }
.kcf-overall__bar { flex: 1; display: flex; }
.kcf-overall__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* ---------- enroll gate ---------- */
.kcf-gate { margin-top: var(--s-6); }
.kcf-gate__card { padding: 1.5rem; border-color: rgba(34,197,94,0.35); }
.kcf-gate__row { display: flex; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
.kcf-input {
  flex: 1; min-width: 220px;
  background: #0b0f0c; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 0.65rem 1rem; font-family: var(--font-mono); font-size: 0.95em;
}
.kcf-input:focus { outline: none; border-color: var(--ks); }
.kcf-gate__err { color: #f59e0b; font-size: 0.9em; margin-top: 0.6rem; }

/* ---------- module grid ---------- */
.kcf-modgrid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  margin-top: var(--s-6);
}
.kcf-mod {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.kcf-mod:hover { transform: translateY(-3px); border-color: rgba(34,197,94,0.45); }
.kcf-mod.is-done { border-color: rgba(34,197,94,0.55); background: linear-gradient(160deg, rgba(34,197,94,0.08), transparent 55%); }
.kcf-mod.is-locked { opacity: 0.62; filter: saturate(0.7); }
.kcf-mod.is-wip .kcf-mod__icon { filter: grayscale(1) opacity(0.75); }
.kcf-mod__top { display: flex; align-items: center; gap: 0.6rem; }
.kcf-mod__icon { font-size: 1.5rem; line-height: 1; color: var(--ks); }
.kcf-mod__icon svg { width: 1em; height: 1em; vertical-align: -0.125em; }
.kcf-big { font-size: 2.6rem; }
.kcf-big svg { width: 1em; height: 1em; }
.kcf-mod__num { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.kcf-mod__done, .kcf-mod__lock { margin-left: auto; }
.kcf-mod h3 { margin: 0.15rem 0 0; font-size: 1.06rem; line-height: 1.25; }
.kcf-mod__tag { margin: 0; color: var(--muted); font-size: 0.82em; }
.kcf-mod__soon { margin: 0.2rem 0 0.4rem; color: var(--muted); font-size: 0.85em; font-style: italic; }
.kcf-mod__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.6rem; }
.kcf-mod .ks-btn { margin-top: auto; justify-content: center; }

.kcf-chip {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem; border-radius: 99px;
  border: 1px solid var(--line-strong); color: var(--muted);
}
.kcf-chip.on { color: #04120a; background: var(--ks); border-color: var(--ks); font-weight: 700; }

/* ---------- reader ---------- */
.kcf-reader { margin-top: var(--s-5); padding: clamp(1.2rem, 4vw, 2.4rem); }
.kcf-reader__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.kcf-kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ks); }
.kcf-reader h2 { margin: 0.2rem 0 0; font-size: clamp(1.4rem, 3.4vw, 2rem); }
.kcf-intro { font-size: 1.05em; color: var(--text); border-left: 3px solid var(--ks); padding-left: 1rem; }
.kcf-h3 { margin: 1.7rem 0 0.5rem; font-size: 1.13rem; color: var(--text); }
.kcf-h3::before { content: '# '; color: var(--ks); font-family: var(--font-mono); }
.kcf-reader p { color: #c9d4cc; line-height: 1.75; margin: 0.55rem 0; }
.kcf-reader code { font-family: var(--font-mono); background: rgba(34,197,94,0.1); color: #86efac; padding: 0.08em 0.4em; border-radius: 6px; font-size: 0.92em; }

.kcf-terms { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 1.5rem; }
.kcf-term { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.kcf-term b { color: var(--ks); font-family: var(--font-mono); font-size: 0.85em; }
.kcf-term span { color: var(--muted); font-size: 0.85em; line-height: 1.5; }

.kcf-tldr {
  margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.35);
  color: var(--text); line-height: 1.6;
}
.kcf-tldr b { display: block; color: var(--ks); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: 0.3rem; }

.kcf-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

/* ---------- quiz ---------- */
.kcf-quiz { margin-top: var(--s-5); padding: clamp(1.2rem, 4vw, 2.2rem); }
.kcf-q { font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0.7rem 0 1.2rem; line-height: 1.35; }
.kcf-opts { display: grid; gap: 0.6rem; }
.kcf-opt {
  text-align: left; padding: 0.85rem 1.1rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong);
  color: var(--text); cursor: pointer; font-size: 0.97em; line-height: 1.45;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.12s var(--ease);
}
.kcf-opt:hover { border-color: var(--ks); transform: translateX(3px); }
.kcf-opt.is-right { border-color: #22c55e; background: rgba(34,197,94,0.16); font-weight: 600; }
.kcf-opt.is-wrong { border-color: #ef4444; background: rgba(239,68,68,0.12); animation: kcfshake 0.32s ease; }
@keyframes kcfshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.kcf-why {
  margin-top: 1.1rem; padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.93em; line-height: 1.6;
  background: rgba(96,165,250,0.09); border-left: 3px solid #60a5fa; color: #dbe7f5;
}
.kcf-result { text-align: center; }
.kcf-big { font-size: 3rem; margin-bottom: 0.4rem; }

/* ---------- game shell ---------- */
.kcf-game { margin-top: var(--s-5); padding: clamp(1.2rem, 4vw, 2.2rem); }
.kcf-gtitle { margin: 0.4rem 0 0.2rem; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.kcf-gsub { color: var(--muted); margin: 0 0 0.4rem; }
.kcf-hud {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted);
  padding: 0.6rem 0.9rem; border: 1px dashed var(--line-strong); border-radius: 10px;
  margin: 1rem 0 1.2rem;
}
#kcfStreak { color: #fbbf24; font-weight: 700; }
.kcf-arena { min-height: 220px; }
.kcf-statement {
  font-size: clamp(1.1rem, 2.6vw, 1.45rem); line-height: 1.5; text-align: center;
  padding: 1.6rem 1rem; margin: 0.4rem auto 1.3rem; max-width: 34rem;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: radial-gradient(circle at top, rgba(34,197,94,0.07), transparent 70%);
}
.kcf-goal { text-align: center; color: var(--muted); font-size: 0.95em; margin: 0.2rem 0 1rem; }
.kcf-bins, .kcf-trio { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.kcf-trio .ks-btn { flex-direction: column; min-width: 130px; }
.kcf-trio .ks-btn b { font-size: 1.25rem; color: var(--ks); }
.kcf-trio .ks-btn small { font-size: 0.78em; opacity: 0.85; }

/* match pairs */
.kcf-grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.kcf-cardbtn {
  min-height: 84px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03);
  color: var(--muted); font-size: 0.86em; line-height: 1.35; padding: 0.5rem;
}
.kcf-cardbtn span { display: block; }
.kcf-cardbtn.is-up { color: var(--text); border-color: var(--ks); background: rgba(34,197,94,0.07); }
.kcf-cardbtn.is-found { color: #04120a; background: var(--ks); border-color: var(--ks); font-weight: 600; }

/* order / sequence */
.kcf-seqlist { margin: 0 0 1rem; padding-left: 1.6rem; min-height: 2.2rem; color: var(--muted); }
.kcf-seqlist li.ok { color: var(--text); margin: 0.25rem 0; }
.kcf-seqlist li.ok::marker { color: var(--ks); font-weight: 700; }
.kcf-seqtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.kcf-tile {
  text-align: left; padding: 0.8rem 0.95rem; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03);
  color: var(--text); font-size: 0.88em; line-height: 1.45;
  transition: transform 0.12s var(--ease), border-color 0.15s var(--ease);
}
.kcf-tile:hover { border-color: var(--ks); transform: translateY(-2px); }
.kcf-tile.used { opacity: 0.28; pointer-events: none; }
.kcf-tile.shake { animation: kcfshake 0.32s ease; border-color: #ef4444; }

/* generic input round (terminal etc.) */
.kcf-inputrow { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.kcf-muted-sm { color: var(--muted); font-size: 0.85em; }

/* file hunt */
.kcf-tree { max-width: 30rem; margin: 0 auto; text-align: left; font-family: var(--font-mono); font-size: 0.9em; }
.kcf-folder { margin: 0.15rem 0; }
.kcf-dirtree { display: none; padding-left: 1.2rem; border-left: 1px dashed var(--line-strong); }
.kcf-folder.open > .kcf-dirtree { display: block; }
.kcf-dirname { cursor: pointer; color: #fbbf24; user-select: none; }
.kcf-dirname:hover { text-decoration: underline; }
.kcf-file { display: block; color: var(--muted); cursor: pointer; padding: 0.05rem 0; }
.kcf-file:hover { color: var(--text); }
.kcf-file.hit { color: #04120a; background: var(--ks); border-radius: 6px; font-weight: 700; }
.kcf-file.miss { animation: kcfshake 0.3s ease; color: #ef4444; }

/* terminal rush */
.kcf-term-win {
  background: #071008; border: 1px solid rgba(34,197,94,0.3); border-radius: 12px;
  color: #d9fbe6; font-family: var(--font-mono); font-size: 0.92em;
  padding: 1.1rem 1.2rem; min-height: 3.2em; white-space: pre-wrap; word-break: break-all;
}
.kcf-caret { animation: kcfcaret 1s steps(1) infinite; }
@keyframes kcfcaret { 50% { opacity: 0; } }

/* rapid choice */
.kcf-opts.kcf-narrow { max-width: 30rem; margin: 0 auto; }

/* cipher crack */
.kcf-cipher-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem auto; max-width: 26rem; }
.kcf-cipher-label { font-family: var(--font-mono); color: var(--ks); min-width: 5.2em; text-align: right; }
.kcf-dial { flex: 1; accent-color: #22c55e; cursor: pointer; }
.kcf-decoded {
  font-family: var(--font-mono); font-size: 1.15em; letter-spacing: 0.06em; text-align: center;
  color: #86efac; background: rgba(34,197,94,0.07); border-radius: 10px; padding: 0.8rem; margin: 0 auto;
  max-width: 30rem; min-height: 1.6em;
}

/* mail cards (phishrush) */
.kcf-mailcard { max-width: 34rem; margin: 0.4rem auto 1.1rem; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; }
.kcf-mailtop {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted);
  padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--line-strong); background: rgba(255,255,255,0.02);
}
.kcf-mailcard p { margin: 0; padding: 1.3rem 1.2rem; font-size: 1.04em; line-height: 1.55; text-align: left; }

/* severity row */
.kcf-trio.kcf-sevrow .ks-btn b { font-size: 0.95rem; color: var(--text); }
.kcf-trio.kcf-sevrow [data-k="C"] { border-color: rgba(239,68,68,0.6); }
.kcf-trio.kcf-sevrow [data-k="H"] { border-color: rgba(249,115,22,0.6); }
.kcf-mono { font-family: var(--font-mono); font-size: 0.82em !important; }

/* firewall duty */
.kcf-ruleswrap { max-width: 34rem; margin: 0 auto 0.8rem; }
.kcf-rules { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.78em; }
.kcf-rules th { text-align: left; color: var(--muted); padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--line-strong); }
.kcf-rules td { padding: 0.3rem 0.6rem; color: var(--text); border-bottom: 1px dashed rgba(255,255,255,0.06); }
.kcf-rules tr.now td { background: rgba(34,197,94,0.12); }

/* scope guard */
.kcf-scopefield {
  position: relative; height: 300px; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,197,94,0.06), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(96,165,250,0.05), transparent 50%);
  border: 1px solid var(--line-strong);
}
.kcf-pop {
  position: absolute; cursor: pointer;
  background: #0b0f0c; border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--text); font-size: 0.85em; padding: 0.45rem 0.7rem; white-space: nowrap;
  animation: kcfpopin 0.18s var(--ease);
}
@keyframes kcfpopin { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kcf-pop svg { width: 1em; height: 1em; vertical-align: -0.12em; }
.kcf-pop svg.i-ok { color: #22c55e; }
.kcf-pop svg.i-no { color: #ef4444; }
.kcf-pop.boom { transform: scale(0); transition: transform 0.3s ease; background: var(--ks); color: #04120a; font-weight: 700; }
.kcf-pop.busted { animation: kcfshake 0.3s ease; background: rgba(239,68,68,0.3); border-color: #ef4444; }

/* boss breach-analysis board */
.kcf-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.7rem; margin: 1rem 0; }
.kcf-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  text-align: left; padding: 0.9rem 1rem; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong);
  color: var(--text);
}
.kcf-cell small { color: var(--muted); font-size: 0.8em; line-height: 1.4; }
.kcf-cell__icon { font-size: 1.5rem; color: var(--ks); }
.kcf-cell__icon svg { width: 1.5rem; height: 1.5rem; }
.kcf-cell__mark { display: none; font-size: 0.78em; line-height: 1.45; margin-top: 0.2rem; }
.kcf-cell.done .kcf-cell__mark { display: block; }
.kcf-cell.good { border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.07); }
.kcf-cell.good .kcf-cell__mark { color: #fca5a5; }
.kcf-cell.bad { opacity: 0.75; }
.kcf-cell.bad .kcf-cell__mark { color: #86efac; }

/* game end */
.kcf-gend { text-align: center; padding: 1.2rem 0 0.4rem; }
.kcf-gend .kcf-actions { justify-content: center; }
.kcf-gend .kcf-big svg { color: #fbbf24; }

.kcf .ks-btn svg { width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.15rem; }
.kcf-cert h3 svg { width: 1.1em; height: 1.1em; vertical-align: -0.12em; color: var(--ks); }
.kcf-chip svg { width: 1em; height: 1em; vertical-align: -0.1em; margin-right: 0.15rem; }
.kcf-mod__done svg, .kcf-mod__lock svg { width: 1rem; height: 1rem; vertical-align: -0.12em; }
.kcf-dirname svg, .kcf-file svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.2rem; }
.kcf-mailtop svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.25rem; }


/* ---------- certificate ---------- */
.kcf-cert { margin-top: var(--s-7); padding: 1.6rem; text-align: center; border-color: rgba(34,197,94,0.5); }
.kcf-cert__box {
  max-width: 30rem; margin: 0 auto; padding: 2rem 1.4rem;
  border: 2px solid var(--ks); border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(34,197,94,0.1), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
}
.kcf-cert__brand { font-family: var(--font-mono); letter-spacing: 0.3em; font-size: 0.68rem; color: var(--muted); }
.kcf-cert__title { font-size: 1.5rem; font-weight: 700; margin: 0.7rem 0 0.2rem; }
.kcf-cert__course { color: var(--ks); font-weight: 600; }
.kcf-cert__sig { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

@media (max-width: 560px) {
  .kcf-overall { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .kcf-trio .ks-btn { min-width: 100px; }
}

@media (max-width: 480px) {
  .kcf-overall__label, .kcf-mod__num, .kcf-chip, .kcf-kicker, .kcf-cert__sig { font-size: 0.75rem; }
  .kcf-mod__meta { flex-wrap: wrap; }
}