/* Cyber Smart Week 2026: terminal theme (black and green).
   Loaded after each page's own styles. Change colours in the block below. */

:root:root:root{
  color-scheme:dark;
  --bg:#020604; --surface:#06140b; --ink:#c8f5d4; --muted:#7fc494; --line:#14652f;
  --accent:#2bff70; --mint:#2bff70; --mint-soft:#0f3a1e; --mint-mid:#166030;
  --block:#000000; --cell:#0a2213; --cell-ink:#c8f5d4;
  --good:#2bff70; --good-bg:#062a12; --bad:#ff6b57; --bad-bg:#2a0d08;
  --wrong:#ff6b57; --wrong-bg:#3a130c; --gold:#ffd23f;
  --on-accent:#001a08;
  --font:"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,"DejaVu Sans Mono","Liberation Mono","Courier New",monospace;
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent)}

/* Scanlines: static, very light */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.14) 2px,rgba(0,0,0,.14) 3px)}

/* Matrix rain canvas (landing page and locked screens only) */
#csw-rain{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.3;pointer-events:none}

/* Headings */
h1{color:var(--muted);font-weight:400;letter-spacing:.02em;overflow-wrap:anywhere}
h1 strong{color:var(--accent);font-weight:700;letter-spacing:0;font-size:clamp(26px,6.4vw,54px);
  text-shadow:0 0 14px rgba(43,255,112,.5)}
h1 strong::before{content:"> ";opacity:.7}
h1 strong::after{content:"_";animation:csw-blink 1.1s steps(1) infinite}
@keyframes csw-blink{50%{opacity:0}}
.intro::before{content:"$ ";color:var(--accent)}
.back{color:var(--accent);font-weight:400}
.back::before{content:"< "}
.foot{color:var(--muted)}
.foot::before{content:"// "}

/* Square corners */
.btn,.card,.pill,.verdict,.day a,.day .locked,.day .dn,.review li,.msgcard,.linkbox,.bubble,.tier,
.quote,.win,.clue-bar,.clue-bar .tag,.clue,.words li,.secret-slots li,.bar,.bar i,.qrscene svg,#csw-lock{border-radius:0}

/* Stat pills look like [ 0 of 12 clues ] */
.pill{background:transparent;border:0;padding:6px 4px;color:var(--accent)}
.pill::before{content:"[ ";color:var(--muted)}
.pill::after{content:" ]";color:var(--muted)}

/* Buttons */
.btn{background:transparent;border:1px solid var(--accent);color:var(--accent);font-weight:500}
.btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:hover .k{color:var(--on-accent)}
:root:root .btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
:root:root .btn.primary:hover{background:transparent;color:var(--accent)}
.btn.warn{border-color:var(--wrong);color:var(--wrong)}
.btn.warn:hover{background:var(--wrong);color:var(--on-accent)}
.btn:focus-visible,.clue:focus-visible,.cell:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.answers .btn.myth:hover,.answers .btn.phish:hover{background:var(--bad-bg);color:var(--bad)}
.answers .btn.fact:hover,.answers .btn.legit:hover{background:var(--good-bg);color:var(--good)}

/* Cards, verdicts, progress */
.card,.review li,.words li{background:var(--surface);border:1px solid var(--line)}
.verdict{border-width:1px}
.verdict.good h3::before{content:"[OK] "}
.verdict.bad h3::before{content:"[X] "}
.review .ok .tag::before{content:"[OK] "}
.review .no .tag::before{content:"[X] "}
.tier.good::before{content:"[OK] "}
.tier.bad::before{content:"[X] "}
.tier{border-width:1px}
.bar{height:10px;background:var(--surface);border:1px solid var(--line)}
.bar i{background:var(--accent);box-shadow:0 0 8px rgba(43,255,112,.6)}
.msgcard .hd,.bubblewrap{background:var(--mint-soft)}
.linkbox{border:1px dashed var(--line)}
.quote{border-left-width:3px}
.big{text-shadow:0 0 14px rgba(43,255,112,.5)}
.win{border-width:1px;box-shadow:0 0 16px rgba(43,255,112,.25)}

/* Crossword */
.grid{border-color:var(--line)}
.cell{border-color:rgba(20,101,47,.35)}
.cell.open{background:var(--cell);border-color:var(--line)}
.cell.word{background:var(--mint-soft);color:var(--ink)}
.cell.active{background:var(--accent);color:var(--on-accent);outline-color:var(--gold)}
.cell.done{background:#0c3d1f}
.cell.done.word{background:var(--mint-mid)}
.cell.revealed{color:#6fd3ff}
.cell .num{color:var(--muted)}
.cell.active .num{color:var(--on-accent)}
.clue-bar{background:var(--block);color:var(--ink);border:1px solid var(--line)}
.clue-bar .tag{background:var(--accent);color:var(--on-accent)}
.clue:hover,.clue.on{background:var(--mint-soft)}

/* Word find */
.cell.sel{background:var(--accent);color:var(--on-accent)}
.cell.hint{background:var(--gold);color:var(--on-accent)}
.pillfound{mix-blend-mode:normal;opacity:.4}
.pillfound.secret{opacity:.55;box-shadow:0 0 0 2px var(--gold) inset}
.secret-slots li.found{border:1px solid var(--gold);background:#2a2300;color:var(--gold)}

/* Landing page cards */
.day a,.day .locked{background:var(--surface);border:1px solid var(--line)}
.day a:hover{background:var(--mint-soft);border-color:var(--accent);box-shadow:0 0 14px rgba(43,255,112,.3)}
.day .dn{background:var(--accent);color:var(--on-accent)}
.day h2{color:var(--accent)}
.day .locked{opacity:.75;border-style:dashed}
.day .locked h2{color:var(--muted)}
.day .locked .dn{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.day.today a{border-color:var(--accent)}

/* Locked screen (built by gate.js) */
#csw-lock{max-width:640px;margin:14vh auto 0;padding:24px 22px;background:rgba(2,6,4,.88);border:1px solid var(--line)}
#csw-lock h1{color:var(--bad);font-size:clamp(22px,6vw,34px);margin:0 0 12px}
#csw-lock h1::before{content:"> ";opacity:.7}
#csw-lock h1::after{content:"_";animation:csw-blink 1.1s steps(1) infinite}
#csw-lock p{margin:0 0 12px}
#csw-lock .when{color:var(--accent)}
#csw-lock a.btn{display:inline-block;text-decoration:none;padding:10px 16px}

/* Preview badge (shown when preview mode is on) */
#csw-preview{position:fixed;right:8px;bottom:8px;z-index:60;background:var(--gold);color:#1a1400;padding:4px 10px;font-size:13px}

@media (prefers-reduced-motion:reduce){
  h1 strong::after,#csw-lock h1::after{animation:none!important}
  #csw-rain{display:none}
}

/* Crossword layout. The long clue bar must not stretch the grid column, and the clue lists must
   never overlap, however wide or narrow the window is. */
.layout>*{min-width:0}
@media (min-width:861px){.layout{grid-template-columns:auto minmax(280px,1fr)}}
.clue-bar{width:0;min-width:100%}
.clue-cols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.clue{font-size:14px;line-height:1.4;min-width:0}
.clue .t{min-width:0;overflow-wrap:anywhere}

/* Preview badge (shown when preview mode is on) */
#csw-preview{position:fixed;right:8px;bottom:8px;z-index:60;background:var(--gold);color:#1a1400;padding:4px 10px;font-size:13px}

@media (prefers-reduced-motion:reduce){
  h1 strong::after,#csw-lock h1::after{animation:none!important}
  #csw-rain{display:none}
}

/* Crossword: monospace clues are wider, so stack Across and Down until the screen is wide */
.layout>*{min-width:0}
.clue-cols{grid-template-columns:minmax(0,1fr)}
.clue{font-size:14px;line-height:1.4}
@media (min-width:1400px){.clue-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:861px){.layout{grid-template-columns:auto minmax(0,1fr)}}

/* Preview badge: small and never blocks a tap */
#csw-preview{pointer-events:none;font-size:11px;padding:2px 8px;opacity:.9}

/* Word find: found words stay highlighted (colour is set per word in the page script) */
.pillfound,.pillfound.secret{opacity:1;mix-blend-mode:normal}
.pillfound.secret{box-shadow:0 0 10px var(--gold)}

/* Keep grid squares square: the wider line height of the terminal font made word find rows taller than columns */
.cell{line-height:1}

/* Lock screen checklist for the final level */
#csw-lock ul.todo{list-style:none;margin:0 0 14px;padding:0}
#csw-lock ul.todo li{padding:2px 0;color:var(--muted)}