/* ============================================================
   MP ENGINE — additions on top of the shared stylesheet
   (tt-engine.css is loaded BEFORE this file, so everything the
   engines share keeps one single source: colours, scoreboard,
   turn bar, timer, tiles, overlays, wheel and Lucky Cards.)

   What is new here:
     · the phase pill and the phase-intro overlay
     · the word-search board (same look as ws-engine.css)
     · the cryptogram board and its code key / letter pad
   ============================================================ */

/* ---------- phase pill in the turn bar ---------- */
.phasepill{
  padding:5px 12px;border-radius:999px;border:2px solid var(--gold,#8a6a1e);
  background:rgba(233,187,85,.12);color:#ffd479;
  font-size:clamp(11px,1vw,13px);font-weight:800;letter-spacing:1px;white-space:nowrap;
}

/* ---------- start screen: the three phases at a glance ---------- */
.phaserow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.phasecard{
  position:relative;background:var(--panel);border:2px solid var(--line);
  border-radius:16px;padding:14px 20px 13px 44px;min-width:210px;max-width:280px;text-align:left;
}
.phasecard .n{
  position:absolute;left:12px;top:13px;width:24px;height:24px;border-radius:50%;
  background:#e9bb55;color:#08131f;font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.phasecard b{display:block;color:var(--text);font-size:clamp(14px,1.3vw,17px);letter-spacing:.6px}
.phasecard i{display:block;color:var(--muted);font-size:clamp(12px,1.1vw,14px);
  font-style:normal;line-height:1.4;margin-top:3px}

/* ---------- phase-intro overlay ---------- */
.phasenum{color:#ffd479;font-weight:900;letter-spacing:3px;
  font-size:clamp(13px,1.4vw,18px)}
#phaseScreen h1{color:var(--text)}

/* ============================================================
   PHASE 1 — build (uses everything from tt-engine.css)
   ============================================================ */
#board.board-build{grid-template-columns:1fr 300px}

.solution{width:100%;text-align:center;margin-top:14px;color:#7ee2a8;
  font-weight:800;font-size:clamp(15px,1.7vw,23px)}

/* ============================================================
   PHASE 2 — word search
   ============================================================ */
#board.board-search{grid-template-columns:minmax(320px,.9fr) minmax(430px,1.1fr)}

#sentenceDisplay{flex:1;display:flex;align-items:center;flex-wrap:wrap;
  gap:.18em .28em;align-content:center;overflow:auto;padding:6px 2px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.4rem,2.6vw,2.6rem);line-height:1.45}
.sentence-word{display:inline-block}
.sentence-blank{display:inline-flex;min-width:2.6em;justify-content:center;
  padding:0 .15em .05em;border-bottom:3px solid rgba(255,255,255,.45);
  color:var(--good);font-weight:700}
.sentence-blank.unfound{color:transparent}

#gridPanel{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border:2px solid var(--line);border-radius:20px;padding:14px;
  display:flex;flex-direction:column;gap:10px;min-height:0}
.gridHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gridHead h3{margin:0;font-size:12px;letter-spacing:1.6px;color:var(--muted);
  text-transform:uppercase}
.gridBtns{display:flex;gap:14px}
.textbtn{border:0;cursor:pointer;background:transparent;color:var(--muted);
  font-weight:800;font-size:12px;letter-spacing:.6px;font-family:inherit;padding:4px 2px}
.textbtn:hover{color:#fff}
.textbtn:disabled{opacity:.4;cursor:not-allowed}
.gridTip{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4}

/* Rows share whatever height is left (see ws-engine.css for the why). */
#wordGrid{display:grid;width:min(100%,620px);max-height:620px;margin:auto;
  flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);
  gap:clamp(2px,.45vw,6px);align-content:stretch;user-select:none;
  -webkit-user-select:none;touch-action:none}
.letterCell{display:grid;min-width:0;min-height:0;border:1px solid rgba(255,255,255,.05);
  border-radius:9px;cursor:pointer;color:var(--text);background:var(--panel2);
  font-family:inherit;font-size:clamp(.78rem,1.9vw,1.25rem);font-weight:800;
  place-items:center;touch-action:none;padding:0;
  transition:background .12s ease,transform .12s ease}
.letterCell:hover{transform:scale(1.08);background:#2c3b56}
.letterCell.selected{background:var(--t1);border-color:transparent;color:#04202e;
  transform:scale(1.06)}
.letterCell.found{background:var(--good);border-color:transparent;color:#062615}
.letterCell.found.selected{background:#7dffc0}

#selectionStrip{display:flex;align-items:center;justify-content:space-between;
  min-height:3.2rem;padding:.7rem 1rem;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);
  color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.4px}
#selectionStrip strong{color:var(--t1);font-size:1.05rem;letter-spacing:.14em;
  font-variant-numeric:tabular-nums}

/* ============================================================
   PHASE 3 — cryptogram
   ============================================================ */
#board.board-crypto{grid-template-columns:1fr minmax(300px,340px)}

#cryptoBoard{flex:1;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:14px 0;align-content:center;overflow:auto;padding:6px}
.cword{display:inline-flex;align-items:flex-end;gap:5px}
.cgap{display:inline-block;width:clamp(16px,2.2vw,32px)}

.ccell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:clamp(34px,4.2vw,62px);padding:7px 0 4px;
  background:var(--tile);color:var(--tileText);
  border:none;border-bottom:4px solid #b9c6dd;border-radius:9px;
  font-family:inherit;cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
  transition:transform .12s,box-shadow .12s,background .12s}
.ccell .cl{font-size:clamp(18px,2.5vw,34px);font-weight:800;line-height:1.05;min-height:1.05em}
.ccell .cn{font-size:clamp(10px,1vw,14px);font-weight:800;
  color:#6a7a95;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.ccell:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(0,0,0,.4)}
.ccell.sel{background:#ffe9b8;border-bottom-color:#c99a2e;
  box-shadow:0 0 0 3px var(--t2),0 7px 16px rgba(0,0,0,.45)}
.ccell.same{background:#dfe9fa;box-shadow:0 0 0 2px rgba(47,181,240,.55)}
/* a letter the engine gives the team for free */
.ccell.fixed{background:#c9d8ef;color:#2b3a55;border-bottom-color:#8fa4c4;cursor:default}
.ccell.fixed:hover{transform:none}
.ccell.right{background:#bdf3d5;border-bottom-color:#4fae7d}
.ccell.wrong{background:#ffd2d7;border-bottom-color:#c96a74}
.cpunct{font-size:clamp(20px,2.7vw,38px);font-weight:800;color:var(--muted);
  align-self:flex-end;padding-bottom:8px}

#keyPanel{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border:2px solid var(--line);border-radius:20px;padding:14px;
  display:flex;flex-direction:column;gap:9px;min-height:0;overflow:auto}
#keyPanel h3{margin:0;font-size:12px;letter-spacing:1.6px;color:var(--muted);
  text-transform:uppercase;text-align:center}

#keyList{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.keyitem{display:flex;flex-direction:column;align-items:center;
  min-width:34px;padding:3px 5px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line)}
.keyitem .kn{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.5px}
.keyitem .kl{font-size:16px;font-weight:900;color:var(--text);line-height:1.1}
.keyitem.done{border-color:#3e56a0;background:rgba(120,150,255,.12)}
.keyitem.done .kl{color:#a9c4ff}
.keyitem.fixed{border-color:#2f7a52;background:rgba(61,220,132,.12)}
.keyitem.fixed .kl{color:#7ee2a8}

#letterPad{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.padkey{font-family:inherit;font-size:15px;font-weight:800;padding:9px 0;
  border-radius:9px;border:2px solid var(--line);background:var(--panel2);
  color:var(--text);cursor:pointer}
.padkey:hover{background:#2c3b56;border-color:#4a5f85}
.padkey.used{opacity:.38}
.padkey.wide{grid-column:span 7;background:#33223a;border-color:#5a3b64;color:#ffc0d6}

/* ---------- narrow screens ---------- */
@media (max-width:1000px){
  #board.board-build,#board.board-search,#board.board-crypto{
    grid-template-columns:1fr;grid-template-rows:1fr auto}
  #trayPanel{max-height:32vh}
  #gridPanel{max-height:46vh}
  #keyPanel{max-height:40vh}
  .team{min-width:150px}
}

/* ---------- short screens (classroom projectors and TVs) ---------- */
@media (max-height:820px){
  /* start screen: the three phase cards and the rules are the tall bits */
  .phaserow{gap:10px}
  .phasecard{padding:10px 14px 9px 38px;min-width:190px}
  .phasecard .n{top:10px}
  .phasecard i{line-height:1.3}

  /* word search: same treatment as ws-engine.css */
  #gridPanel{padding:10px;gap:7px}
  .gridTip{display:none}
  #wordGrid{width:min(100%,500px)}
  #selectionStrip{min-height:2.4rem;padding:.45rem .8rem}
  #sentenceDisplay{font-size:clamp(1.2rem,2.1vw,2rem)}

  /* cryptogram: the key panel carries the tip line too */
  #keyPanel{padding:10px;gap:7px}
  #keyPanel .gridTip{display:none}
  #letterPad{gap:5px}
  .padkey{padding:7px 0}
}