:root{
  --bg:#121213; --fg:#f5f5f5; --muted:#8f8f92;
  --tile:#3a3a3c; --edge:#565758; --empty:#232325;
  --grey:#3a3a3c; --yellow:#b59f3b; --green:#538d4e;
  --accent:#6aaa64; --panel:#1c1c1e;
  --radius:6px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --fg:#1a1a1b; --muted:#6b6b6e;
    --tile:#787c7e; --edge:#d3d6da; --empty:#ffffff;
    --grey:#787c7e; --yellow:#c9b458; --green:#6aaa64;
    --panel:#f6f7f8;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
header{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--edge);
}
h1{font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; margin:0; font-weight:700}
h2{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .15rem}
.link{
  background:none; border:0; color:var(--muted); font:inherit; font-size:.85rem;
  text-decoration:underline; cursor:pointer; padding:0;
}
#history-btn{margin-left:auto}
.link:hover{color:var(--fg)}

/* ---- history ---- */
#history{padding:1rem; margin:0; border-bottom:1px solid var(--edge); background:var(--panel)}
.hist-list{list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.7rem}
.hist-list li{border:1px solid var(--edge); border-radius:var(--radius); background:var(--bg); padding:.55rem .65rem}
.hist-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; margin-bottom:.4rem}
.hist-date{font-size:.78rem; color:var(--muted)}
.hist-word{font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.hist-score{font-variant-numeric:tabular-nums; font-weight:600; font-size:.82rem}
.hist-score.win{color:var(--green)} .hist-score.loss{color:var(--yellow)}
.hist-grid{display:flex; flex-direction:column; gap:2px}
.hist-row{display:flex; gap:2px}
.hist-row i{
  width:1.15rem; height:1.15rem; display:grid; place-items:center;
  font-size:.6rem; font-weight:700; font-style:normal; color:#fff; border-radius:2px;
  background:var(--grey);
}
.hist-row i[data-state="1"]{background:var(--yellow)}
.hist-row i[data-state="2"]{background:var(--green)}

#about{
  padding:1rem; margin:0; border-bottom:1px solid var(--edge);
  background:var(--panel); font-size:.9rem; max-width:60ch;
}
#about p{margin:0 0 .6rem}
#about p:last-child{margin-bottom:0}
.muted{color:var(--muted); font-size:.82rem}
.stat{color:var(--accent); font-variant-numeric:tabular-nums; font-weight:600}
code{font-size:.85em; background:var(--bg); padding:.1em .35em; border-radius:3px}

main{max-width:31rem; margin:0 auto; padding:1rem 1rem 3rem}

/* ---- grid ---- */
#grid{display:grid; grid-template-rows:repeat(6,1fr); gap:5px; margin-bottom:.85rem}
.row{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.tile{
  aspect-ratio:1; display:grid; place-items:center;
  font-size:clamp(1.4rem,7vw,2rem); font-weight:700; text-transform:uppercase;
  border:2px solid var(--edge); background:var(--empty); color:var(--fg);
  border-radius:var(--radius); padding:0; font-family:inherit;
  transition:background .12s,border-color .12s,transform .06s;
}
.tile[data-filled]{border-color:var(--muted)}
.tile[data-state="0"]{background:var(--grey); border-color:var(--grey); color:#fff}
.tile[data-state="1"]{background:var(--yellow); border-color:var(--yellow); color:#fff}
.tile[data-state="2"]{background:var(--green); border-color:var(--green); color:#fff}
.row[data-active] .tile[data-filled]{cursor:pointer}
.row[data-active] .tile[data-filled]:active{transform:scale(.94)}
.row[data-locked] .tile{opacity:.62}
.tile:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* ---- on-screen keyboard ---- */
#keyboard{display:flex; flex-direction:column; gap:6px; margin-bottom:1rem; touch-action:manipulation}
.kb-row{display:flex; justify-content:center; gap:5px}
.kb-key{
  flex:1 1 auto; min-width:0; height:3.1rem; max-width:2.9rem;
  display:grid; place-items:center; cursor:pointer; padding:0;
  font:inherit; font-size:.95rem; font-weight:600; text-transform:uppercase;
  border:0; border-radius:5px; background:var(--edge); color:var(--fg);
  -webkit-user-select:none; user-select:none;
}
.kb-key.kb-wide{flex:1.5 1 auto; max-width:4.2rem; font-size:.72rem}
.kb-key:active{filter:brightness(.9)}
.kb-key[data-state="0"]{background:var(--grey); color:#fff}
.kb-key[data-state="1"]{background:var(--yellow); color:#fff}
.kb-key[data-state="2"]{background:var(--green); color:#fff}
@media (hover:hover){.kb-key:hover{filter:brightness(1.08)}}

/* ---- controls ---- */
#controls{display:flex; gap:.5rem; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap}
#controls button{
  font:inherit; font-size:.85rem; padding:.42rem .8rem; cursor:pointer;
  background:var(--panel); color:var(--fg);
  border:1px solid var(--edge); border-radius:var(--radius);
}
#controls button:hover:not(:disabled){border-color:var(--muted)}
#controls button:disabled{opacity:.4; cursor:default}
#status{font-size:.85rem; color:var(--muted); margin-left:auto; text-align:right}

/* ---- panels ---- */
.panel{margin-bottom:1.6rem}
.hint{font-size:.78rem; color:var(--muted); margin:0 0 .55rem}
.why{margin:.8rem 0 0; padding:.7rem .85rem; border-left:3px solid var(--muted); font-size:.84rem; line-height:1.45}
.why p{margin:0 0 .5rem}
.why p:last-child{margin:0; font-weight:600}
.why[hidden]{display:none}
.fb{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.6rem 0 0; font-size:.8rem}
.fb[hidden]{display:none}
.fb-q{color:var(--muted); margin-right:.2rem}
.fb-btn{font-size:1rem; line-height:1; padding:.25rem .45rem; border:1px solid var(--edge); border-radius:.4rem; background:transparent; cursor:pointer}
.fb-btn.on{border-color:var(--green); background:rgba(106,170,100,.18)}
.fb input{flex:1 1 10rem; min-width:8rem; font:inherit; padding:.3rem .5rem; border:1px solid var(--edge); border-radius:.4rem; background:transparent; color:inherit}
.fb-send{font:inherit; padding:.3rem .6rem; border:1px solid var(--edge); border-radius:.4rem; background:transparent; cursor:pointer}
.fb-msg{color:var(--muted)}
.foot{margin:2rem 0 1rem; font-size:.8rem; color:var(--muted)}
.foot a[hidden]{display:none}
.k-bits{color:var(--accent)} .k-win{color:var(--yellow)}

.letters{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0}
.letters li{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  min-width:2.6rem; padding:.4rem .3rem; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--edge);
}
.letters b{font-size:1.05rem; text-transform:uppercase; font-weight:700; line-height:1}
.letters small{font-size:.66rem; color:var(--muted); font-variant-numeric:tabular-nums}

.words{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px}
.words li{
  display:grid; grid-template-columns:1.6rem 1fr auto auto; align-items:center; gap:.6rem;
  padding:.46rem .6rem; background:var(--panel);
  border:1px solid var(--edge); border-radius:var(--radius);
  font-variant-numeric:tabular-nums;
}
.words li.pick{cursor:pointer; transition:border-color .1s, background .1s}
.words li.pick:hover,.words li.pick:focus-visible{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--panel)); outline:none}
.words li.pick:active{transform:scale(.995)}
.words li.top{border-color:var(--accent)}
.words .w.odd{opacity:.7; font-style:italic}
.words .rank{color:var(--muted); font-size:.78rem}
.words .w{font-weight:700; letter-spacing:.11em; text-transform:uppercase; font-size:1rem}
.words .bits{color:var(--accent); font-size:.82rem}
.words .win{color:var(--yellow); font-size:.82rem; min-width:3.6rem; text-align:right}
.words .tag{
  grid-column:1/-1; font-size:.72rem; color:var(--muted); padding-top:.1rem;
}
.words .flair{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.3rem; padding-top:.25rem}
.words .pill{
  font-size:.68rem; padding:.08rem .4rem; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--fg); white-space:nowrap;
}
.empty{color:var(--muted); font-size:.87rem; padding:.5rem 0}

@media (max-width:380px){
  .words li{grid-template-columns:1.3rem 1fr auto; gap:.4rem}
  .words .win{display:none}
}

.words .win.probe{color:var(--muted); font-style:italic}

/* ---- decision log ---- */
.log{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px}
.log li{padding:.5rem .6rem; background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius)}
.log-head{display:grid; grid-template-columns:1.5rem auto 1fr auto; align-items:center; gap:.6rem}
.log-head .w{font-weight:700; letter-spacing:.11em; text-transform:uppercase}
.log .pat{display:flex; gap:2px}
.log .pat i{width:.7rem; height:.7rem; border-radius:2px; background:var(--grey)}
.log .pat i[data-state="1"]{background:var(--yellow)}
.log .pat i[data-state="2"]{background:var(--green)}
.log-sub{font-size:.74rem; color:var(--muted); padding-top:.25rem; line-height:1.4}

/* ---- passcode gate ---- */
#lock{position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:var(--bg)}
/* The `hidden` attribute works only through the UA stylesheet's display:none,
   so the display:grid above silently beats it. Without this rule the overlay
   stays on screen and swallows every click even after the passcode is accepted. */
#lock[hidden]{display:none}
.lock-lead{font-size:.86rem; line-height:1.45; margin:0 0 .6rem}
.lock-img{margin:0 0 .8rem; max-width:100%}
.lock-img svg{width:100%; max-width:260px; height:auto; border-radius:.5rem; display:block}
#lock-form{display:flex; flex-direction:column; gap:.6rem; width:min(18rem,84vw)}
#lock-form label{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
#lock-form input{
  font:inherit; font-size:1.5rem; letter-spacing:.4em; text-align:center;
  padding:.6rem; border-radius:var(--radius);
  border:2px solid var(--edge); background:var(--empty); color:var(--fg);
}
#lock-form input:focus{outline:none; border-color:var(--accent)}
#lock-form button{
  font:inherit; padding:.55rem; cursor:pointer; border-radius:var(--radius);
  background:var(--green); color:#fff; border:0; font-weight:600;
}
#lock-msg{min-height:1.2em; margin:0; font-size:.82rem; color:var(--yellow); text-align:center}
body.locked main,body.locked header,body.locked #about{filter:blur(4px); pointer-events:none}

/* ---- update banner ---- */
#update-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  border:0; cursor:pointer; width:100%;
  padding:.8rem 1rem; font:inherit; font-size:.9rem; font-weight:600;
  background:var(--green); color:#fff;
}
#update-bar:hover{filter:brightness(1.05)}

/* ---- most-likely badge + strategy toggle ---- */
.most-likely{
  font-size:.6rem; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--accent); margin-left:.45rem; vertical-align:middle;
}
#strategy.on{background:var(--green); color:#fff; border-color:var(--green)}

/* ---- semiotic read ---- */
#read{
  margin:0 0 1.4rem; padding:.7rem .9rem; border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--panel));
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9rem; line-height:1.5; color:var(--fg); font-style:italic;
}
#read[hidden]{display:none}

/* ---- catch-all option ---- */
#catchall{margin:0 0 1.4rem}
#catchall[hidden]{display:none}
.ca-lead{margin:0 0 .4rem; font-size:.82rem; color:var(--muted)}
#ca-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  width:100%; text-align:left; cursor:pointer; padding:.6rem .8rem;
  border:1px dashed var(--accent); border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 8%, var(--panel)); color:var(--fg); font:inherit;
}
#ca-btn:hover{background:color-mix(in srgb, var(--accent) 14%, var(--panel))}
.ca-word{font-weight:700; letter-spacing:.11em; text-transform:uppercase; font-size:1rem}
.ca-sub{font-size:.76rem; color:var(--muted)}
.ca-or{margin:.4rem 0 0; font-size:.76rem; color:var(--muted); font-style:italic}

/* ---- post-mortem (shown only after a win) ---- */
#postmortem[hidden]{display:none}
.pm-form{display:flex; gap:.5rem; margin:0 0 .5rem}
.pm-form input{
  flex:1 1 auto; min-width:0; font:inherit; font-size:1rem;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  padding:.5rem .6rem; border-radius:var(--radius);
  border:2px solid var(--edge); background:var(--empty); color:var(--fg);
}
.pm-form input:focus{outline:none; border-color:var(--accent)}
.pm-form input::placeholder{letter-spacing:normal; text-transform:none; color:var(--muted); opacity:.8}
.pm-form button{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.5rem 1rem; border-radius:var(--radius);
  background:var(--green); color:#fff; border:0; white-space:nowrap;
}
.pm-form button:hover{filter:brightness(1.06)}
.pm-msg{min-height:1em; margin:0; font-size:.8rem; color:var(--yellow)}
#pm-out[hidden]{display:none}
.pm-read{
  margin:.3rem 0 1rem; padding:.7rem .9rem; border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--panel));
  border-radius:0 var(--radius) var(--radius) 0; font-size:.9rem; line-height:1.5;
}
.pm-learned h3{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .3rem;
}
.pm-learned p{margin:0; font-size:.9rem; line-height:1.55; color:var(--fg)}

/* ---- second-guess palette ---- */
#palette-panel[hidden]{display:none}
.goal-tag{
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--green); padding:.1rem .45rem; border-radius:999px;
  vertical-align:middle; margin-left:.4rem;
}
.palette{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.55rem}
.pcard{
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
  text-align:left; cursor:pointer; font:inherit; color:var(--fg);
  padding:.6rem .7rem; border-radius:var(--radius);
  border:1px solid var(--edge); background:var(--panel);
  transition:border-color .1s, background .1s, transform .06s;
}
.pcard:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.pcard:active{transform:scale(.985)}
.pcard-role{font-size:.66rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}
.pcard-word{font-size:1.25rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; line-height:1.1}
.pcard-phrase{font-size:.74rem; color:var(--muted); line-height:1.35}
.pcard-odds{font-size:.7rem; color:var(--accent); font-variant-numeric:tabular-nums; margin-top:.1rem}
/* each character gets its own accent stripe */
.pcard-safe{border-left:3px solid var(--green)}
.pcard-safe .pcard-role{color:var(--green)}
.pcard-anchor{border-left:3px solid #4a90d9}
.pcard-anchor .pcard-role{color:#4a90d9}
.pcard-bold{border-left:3px solid var(--yellow)}
.pcard-bold .pcard-role{color:var(--yellow)}
.pcard-fun{border-left:3px solid #b06fd6}
.pcard-fun .pcard-role{color:#b06fd6}
.pcard-likely{border-left:3px solid var(--muted)}
.pcard-clear{border-left:3px solid var(--green); grid-column:1/-1}
.pcard-clear .pcard-word{font-size:1.5rem}

/* ---- your record (guess distribution) ---- */
.stats{margin:2rem 0 0; padding-top:1rem; border-top:1px solid var(--edge)}
.stats[hidden]{display:none}
.dist{display:flex; flex-direction:column; gap:3px; margin-top:.5rem}
.dist-row{display:grid; grid-template-columns:1rem 1fr; align-items:center; gap:.5rem}
.dist-bars{display:flex; flex-direction:column; gap:2px}
.dist-bar.bot{opacity:.45}
.dist-bar.app{opacity:.55; font-style:italic; outline:1px dashed var(--muted); outline-offset:-1px}
.dist-legend .lg.app::before{opacity:.55; outline:1px dashed var(--muted)}
.dist-legend{display:flex; gap:1rem; font-size:.74rem; color:var(--muted); margin-top:.4rem}
.dist-legend .lg::before{content:''; display:inline-block; width:.8rem; height:.6rem; margin-right:.3rem; background:var(--edge); vertical-align:middle}
.dist-legend .lg.bot::before{opacity:.45}
.dist-lab{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; text-align:center}
.dist-bar{
  display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:1.4rem; padding:.05rem .4rem; border-radius:3px;
  background:var(--grey); color:#fff; font-size:.72rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.dist-row.goal .dist-bar{background:var(--green)}   /* a 3 — the goal */

.about{margin:.2rem 0 1rem; font-size:.86rem; line-height:1.5}
.stats h2 .muted{white-space:nowrap; font-size:.8rem}
.about summary{cursor:pointer; color:var(--muted); font-size:.82rem}
.about p{margin:.5rem 0}
.about a[hidden]{display:none}