/* =========================================================================
   EFL Crossword — styles
   -------------------------------------------------------------------------
   EVERY rule is scoped under #crossword-game. Nothing here targets html,
   body or any bare element selector, so dropping this into a WordPress
   theme cannot affect the rest of the page.

   The safeguard below handles the opposite direction — theme CSS reaching
   IN. Two cases it cannot cover, both cascade facts rather than bugs:

     a) A theme selector anchored on an ancestor id, e.g.
        `#content div { float: left }` — (1,0,1) outranks the (1,0,0) of
        the revert rule below.
     b) Any theme declaration marked !important.

   If you hit one, append a targeted override to the END of this file.
   Doubling the id scores (2,0,0), which beats any single-id theme
   selector. Only list the properties actually being broken — a blanket
   revert would strip the component's own styling:

     #crossword-game#crossword-game :where(div, p, ol, li, button) {
       float: none !important;
     }
   ========================================================================= */

/* ------------------- Safeguard: no theme CSS bleeding IN ------------------
   WordPress themes style bare elements and reach into post content with
   selectors like `.entry-content ol li`. `all: revert` rolls every property
   on our descendants back to the browser default, discarding the theme's
   author-origin declarations. It sits inside :where(), which contributes no
   specificity, so every component rule below (id + class) still wins.

   The grid inputs are deliberately included: themes very often set a
   border, background, min-height or box-shadow on `input`, any of which
   would wreck the crossword squares.
   ------------------------------------------------------------------------- */
#crossword-game :where(div, p, span, ol, ul, li, h2, h3, label, select, button, input, b, strong) {
  all: revert;
}

#crossword-game{
  --cw-line:#c8cdd6;
  --cw-ink:#1d2330;
  --cw-cell:#ffffff;
  --cw-blank:transparent;
  --cw-word:#dbeafe;      /* active word highlight */
  --cw-focus:#fbbf24;     /* active cell highlight */
  --cw-ok:#bbf7d0;
  --cw-bad:#fecaca;
  --cw-accent:#2563eb;
  --cw-radius:10px;
  max-width:760px;
  margin:0 auto;
  padding:14px;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--cw-ink);
  font-size:16px;
  line-height:1.4;
  -webkit-text-size-adjust:100%;
}
#crossword-game *{box-sizing:border-box;}

/* --- setup row --- */
#crossword-game .cw-setup{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;}
#crossword-game .cw-label{font-weight:600;}
#crossword-game .cw-select{
  flex:1 1 180px;min-width:150px;padding:11px 12px;font-size:16px;
  border:1px solid var(--cw-line);border-radius:var(--cw-radius);background:#fff;color:inherit;
}
#crossword-game .cw-btn{
  padding:11px 18px;font-size:16px;font-weight:600;cursor:pointer;
  border:1px solid var(--cw-line);border-radius:var(--cw-radius);
  background:#f4f6fa;color:var(--cw-ink);
  -webkit-appearance:none;appearance:none;
  touch-action:manipulation;
}
#crossword-game .cw-btn:active{transform:translateY(1px);}
#crossword-game .cw-btn-primary{background:var(--cw-accent);border-color:var(--cw-accent);color:#fff;}

/* --- idle prompt, shown until the first puzzle is built --- */
#crossword-game .cw-idle{
  margin:0 0 12px;padding:14px;border-radius:var(--cw-radius);
  background:#f4f6fa;border:1px dashed var(--cw-line);color:#5b6272;
}
#crossword-game .cw-idle a{color:var(--cw-accent);}

/* --- messages --- */
#crossword-game .cw-message{
  padding:12px 14px;border-radius:var(--cw-radius);
  background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;margin-bottom:12px;
}
#crossword-game .cw-message.cw-good{background:#ecfdf5;border-color:#6ee7b7;color:#065f46;}

/* --- header bar --- */
#crossword-game .cw-bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;}
#crossword-game .cw-title{font-weight:700;font-size:18px;}
#crossword-game .cw-progress{font-size:14px;color:#5b6272;}

/* --- grid --- */
#crossword-game .cw-gridwrap{display:flex;justify-content:center;}
#crossword-game .cw-grid{
  display:grid;
  grid-template-columns:repeat(11,1fr);
  gap:2px;
  width:100%;
  max-width:520px;
  background:transparent;
}
#crossword-game .cw-cell{position:relative;aspect-ratio:1/1;}
#crossword-game .cw-cell.cw-blank{background:var(--cw-blank);}
#crossword-game .cw-cell.cw-live{
  background:var(--cw-cell);
  border:1px solid var(--cw-line);
  border-radius:3px;
}
#crossword-game .cw-num{
  position:absolute;top:1px;left:2px;
  font-size:9px;line-height:1;color:#6b7280;pointer-events:none;user-select:none;z-index:2;
}
#crossword-game .cw-input{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent;
  text-align:center;text-transform:uppercase;
  font-size:clamp(14px,4.2vw,22px);font-weight:700;font-family:inherit;color:var(--cw-ink);
  padding:0;margin:0;border-radius:3px;
  -webkit-appearance:none;appearance:none;
  caret-color:transparent;
}
#crossword-game .cw-input:focus{outline:none;}
#crossword-game .cw-cell.cw-inword{background:var(--cw-word);}
#crossword-game .cw-cell.cw-active{background:var(--cw-focus);}
#crossword-game .cw-cell.cw-correct{background:var(--cw-ok);}
#crossword-game .cw-cell.cw-wrong{background:var(--cw-bad);}
#crossword-game .cw-cell.cw-revealed .cw-input{color:var(--cw-accent);}

/* --- current clue banner --- */
#crossword-game .cw-current{
  margin:10px 0;padding:11px 13px;min-height:44px;
  background:#f4f6fa;border:1px solid var(--cw-line);border-radius:var(--cw-radius);
  font-size:15px;
}
#crossword-game .cw-current b{color:var(--cw-accent);}

/* --- controls --- */
#crossword-game .cw-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
#crossword-game .cw-controls .cw-btn{flex:1 1 auto;}

/* --- clue lists --- */
#crossword-game .cw-clues{display:grid;grid-template-columns:1fr;gap:16px;}
#crossword-game .cw-cluehead{
  margin:0 0 6px;font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:#5b6272;
}
#crossword-game .cw-cluelist{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
#crossword-game .cw-cluelist li{
  padding:9px 10px;margin-bottom:4px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;font-size:15px;
}
#crossword-game .cw-cluelist li:hover{background:#f4f6fa;}
#crossword-game .cw-cluelist li.cw-selected{background:var(--cw-word);border-color:var(--cw-accent);}
#crossword-game .cw-cluelist li.cw-done{color:#8b93a3;text-decoration:line-through;}
#crossword-game .cw-cluenum{font-weight:700;margin-right:6px;}
#crossword-game .cw-cluelen{color:#6b7280;font-size:13px;}

/* Narrow phones: claw back every pixel so the squares stay tappable. */
@media (max-width:430px){
  #crossword-game{padding:8px;}
  #crossword-game .cw-grid{gap:1px;}
  #crossword-game .cw-num{font-size:8px;top:0;left:1px;}
}
@media (min-width:640px){
  #crossword-game .cw-clues{grid-template-columns:1fr 1fr;gap:24px;}
  #crossword-game .cw-num{font-size:11px;}
}