:root{
  --b:rgba(255,255,255,0.10);
  --t:rgba(255,255,255,0.92);
  --m:rgba(255,255,255,0.70);
  --a:#5CE1E4;
  --g:#35d07f;
  --r:#ff4d4d;
  --w:#ff9f43;
}

/* Card */
.htf-card{background:rgba(15,21,26,0.92);border:1px solid var(--b);border-radius:14px;padding:18px 16px;margin:14px 0;}
.htf-card-head h2,.htf-card-head h3{margin:0 0 6px 0;color:var(--t);}
.htf-help{margin:0;color:var(--m);font-size:13px;}

/* Buttons */
.htf-btn{border:1px solid var(--b);background:rgba(255,255,255,0.06);color:var(--t);padding:6px 12px;border-radius:10px;font-weight:700;letter-spacing:0.5px;cursor:pointer;}
.htf-btn:hover{border-color:var(--a);}
.htf-btn-primary{border-color:rgba(92,225,228,0.45);box-shadow:0 0 0 1px rgba(92,225,228,0.20) inset;}

/* Video selector */
.htf-select{min-width:260px;max-width:520px;background:rgba(0,0,0,0.35);border:1px solid var(--b);color:var(--t);border-radius:12px;padding:10px 12px;}

/* ===== Word Search ===== */
.htf-grid{display:grid;gap:4px;grid-template-columns:repeat(var(--ws-size,16),24px);touch-action:none;user-select:none;}
.ws-cell{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--b);border-radius:6px;font-weight:800;font-size:12px;color:var(--t);background:rgba(0,0,0,0.25);cursor:pointer;user-select:none;}
.ws-cell.sel{outline:2px solid rgba(92,225,228,0.55);}
.ws-cell.found{background:rgba(53,208,127,0.20);border-color:rgba(53,208,127,0.55);}

.htf-side{border:1px solid var(--b);border-radius:12px;padding:10px;background:rgba(0,0,0,0.22);}
.htf-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.htf-word{padding:6px 10px;border:1px solid rgba(92,225,228,0.45);border-radius:999px;color:var(--t);font-weight:700;font-size:12px;}
.htf-word.found{text-decoration:line-through;opacity:0.70;}

/* If JS renders plain <li> without class */
#ws-list li{padding:6px 10px;border:1px solid rgba(92,225,228,0.45);border-radius:999px;color:var(--t);font-weight:700;font-size:12px;list-style:none;}
#ws-list li.found{text-decoration:line-through;opacity:0.70;}

/* ===== Crossword ===== */
.htf-cw-grid{display:grid;gap:4px;grid-template-columns:repeat(var(--cw-size,16),24px);user-select:none;}
.cw-cell{width:24px;height:24px;position:relative;}
.cw-cell.black{background:rgba(0,0,0,0.55);border-radius:6px;border:1px solid rgba(255,255,255,0.06);}
/* JS uses .block for black squares */
.cw-cell.block{background:rgba(0,0,0,0.55);border-radius:6px;border:1px solid rgba(255,255,255,0.06);}
.cw-cell input{width:24px;height:24px;border-radius:6px;border:1px solid var(--b);background:rgba(0,0,0,0.25);color:var(--t);text-align:center;font-weight:900;font-size:12px;text-transform:uppercase;}
.cw-cell input:focus{outline:2px solid rgba(92,225,228,0.55);}
.cw-num{position:absolute;top:1px;left:3px;font-size:9px;color:var(--m);pointer-events:none;}

/* Remove default OL numbering to fix "1.1" duplicates */
#cw-across,#cw-down{list-style:none;padding-left:0;margin:0;}
#cw-across li,#cw-down li{margin:6px 0;color:var(--t);font-size:13px;}
#cw-across li span,#cw-down li span{color:var(--m);}

/* Validation colors */
.cw-cell input.good{border-color:rgba(53,208,127,0.70);background:rgba(53,208,127,0.12);}
.cw-cell input.bad{border-color:rgba(255,77,77,0.75);background:rgba(255,77,77,0.12);}
.cw-cell input.miss{border-color:rgba(255,159,67,0.80);background:rgba(255,159,67,0.12);}
.cw-cell input.show{box-shadow:0 0 0 1px rgba(92,225,228,0.20) inset;}

/* ===== Anagrams ===== */
.an-row{display:grid;grid-template-columns:180px 1fr 88px;gap:10px;align-items:center;margin:10px 0;}
.an-scramble{background:rgba(0,0,0,0.25);border:1px solid var(--b);border-radius:12px;padding:10px 12px;color:var(--t);font-weight:900;letter-spacing:1px;}
.an-answer{background:rgba(0,0,0,0.25);border:1px solid var(--b);border-radius:12px;padding:10px 12px;color:var(--t);}
.an-answer::placeholder{color:rgba(255,255,255,0.45);}

/* Status */
.htf-status{margin-top:8px;color:var(--m);font-size:12px;}

/* ===== Trivia (Multiple Choice) ===== */
.htf-trivia-q{margin-top:10px;font-weight:800;font-size:14px;}
.htf-trivia-choices{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.htf-choice{width:100%;text-align:left;}
.htf-choice.is-correct{border-color:rgba(53,208,127,.85);background:rgba(53,208,127,.12);}
.htf-choice.is-wrong{border-color:rgba(255,77,77,.85);background:rgba(255,77,77,.12);}
#tr-feedback.is-good{color:rgba(53,208,127,.95);}
#tr-feedback.is-bad{color:rgba(255,77,77,.95);}


/* Layout shell to prevent narrow/vertical collapse */
.htf-shell{width:min(980px, calc(100% - 32px));margin:0 auto;}
.htf-shell .htf-card{width:100%;}

/* Word Search layout */
.ws-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
#ws-grid{flex:1 1 360px;min-width:320px;}
#ws-list{flex:0 1 240px;min-width:200px;}

/* Crossword layout */
.cw-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
#cw-grid{flex:1 1 480px;min-width:320px;}
#cw-clues{flex:0 1 320px;min-width:260px;}

/* Trivia layout */
.htf-trivia-q{margin-top:10px;font-size:14px;}
.htf-trivia-choices{display:flex;flex-direction:column;gap:8px;margin-top:10px;}

/* =========================================================
   CROSSWORD GRID SPACING (SAFE + RESPONSIVE)
   - Fixes cramped spacing / overlap
   - Prevents "giant" grid
   - Avoids breaking Word Search / Trivia
   ========================================================= */

/* Give the crossword area horizontal scroll if needed (instead of collapsing/stacking) */
.htf-cw-wrap,
#htf-crossword,
.htf-crossword {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grid sizing: smaller + responsive, with clean spacing */
.htf-cw-grid {
  /* Cell size tuned to avoid "too large" */
  --cw-size: clamp(18px, 2.0vw, 26px);
  --cw-gap: 3px;

  display: grid;
  gap: var(--cw-gap);

  /* Keep grid from shrinking into a vertical stack */
  width: max-content;
  max-width: 100%;
}

/* Force cells to be true squares + stop stretching */
.htf-cw-cell {
  width: var(--cw-size);
  height: var(--cw-size);
  box-sizing: border-box;
  padding: 0;
}

/* Inputs match the cell (prevents “fat” cells) */
.htf-cw-cell input,
.htf-cw-input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1;
}

/* Numbers stay readable but not huge */
.htf-cw-num {
  font-size: 11px;
  line-height: 1;
}

/* =========================================================
   CROSSWORD – final spacing tweak (match your target look)
   Paste at VERY BOTTOM of htf-games.v5.8.css
   ========================================================= */

/* Give the crossword area horizontal scroll if needed (prevents “vertical stacking”) */
#cw-grid,
.htf-cw-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Use a responsive cell size + slightly larger gap (but not “giant”) */
#cw-grid,
.htf-cw-grid {
  --cw-cell: clamp(20px, 2.1vw, 28px); /* keeps it reasonable */
  --cw-gap: 5px;                      /* slightly more breathing room */

  display: grid !important;
  gap: var(--cw-gap) !important;

  /* keep the grid from compressing into a skinny column */
  width: max-content !important;
  max-width: 100% !important;
}

/* Make sure each cell is a true square and not stretched */
#cw-grid .cw-cell,
.htf-cw-grid .cw-cell {
  width: var(--cw-cell) !important;
  height: var(--cw-cell) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Inputs match the square exactly */
#cw-grid .cw-cell input,
.htf-cw-grid .cw-cell input {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

/* Keep black squares consistent */
#cw-grid .cw-cell.black,
#cw-grid .cw-cell.block,
.htf-cw-grid .cw-cell.black,
.htf-cw-grid .cw-cell.block {
  width: var(--cw-cell) !important;
  height: var(--cw-cell) !important;
}

/* Number position/size tweak */
#cw-grid .cw-num,
.htf-cw-grid .cw-num {
  top: 2px !important;
  left: 4px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* =========================================================
   CROSSWORD – micro-tweak to match target spacing
   Paste UNDER the previous crossword block (bottom of file)
   ========================================================= */

/* 1) Tiny size + gap adjustment */
#cw-grid,
.htf-cw-grid {
  --cw-cell: clamp(18px, 1.9vw, 27px) !important; /* slightly smaller */
  --cw-gap: 7px !important;                       /* slightly more spacing */
}

/* 2) Make the tiles feel less “puffy” so the gap looks like your screenshot */
#cw-grid .cw-cell,
.htf-cw-grid .cw-cell {
  border-radius: 8px !important;                  /* less rounded */
  box-shadow: none !important;                    /* remove extra glow/shadow */
}

/* 3) Keep the inner tile border subtle but crisp */
#cw-grid .cw-cell,
.htf-cw-grid .cw-cell {
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* 4) Number size/placement to match cleaner look */
#cw-grid .cw-num,
.htf-cw-grid .cw-num {
  top: 2px !important;
  left: 4px !important;
  font-size: 10px !important;
  opacity: 0.95 !important;
}

/* =========================================================
   CROSSWORD — STANDARD PROPORTIONS (DARK THEME)
   Matches classic crossword layout
========================================================= */

/* Grid container */
.htf-cw-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--cw-cols), 1fr) !important;
  gap: 2px !important;              /* tight crossword spacing */
  width: fit-content !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* All cells */
.htf-cw-cell {
  width: 34px !important;
  height: 34px !important;          /* KEY: same as width */
  padding: 0 !important;
  margin: 0 !important;

  border-radius: 4px !important;    /* subtle, not pill-like */
  background: #0f1316 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Black (blocked) squares */
.htf-cw-cell.block {
  background: #000 !important;
  border-color: #000 !important;
}

/* Input field */
.htf-cw-cell input {
  width: 100% !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;

  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
}

/* Number labels */
.htf-cw-num {
  position: absolute !important;
  top: 2px !important;
  left: 3px !important;

  font-size: 10px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}

/* =========================================================
   CROSSWORD — PREVENT VERTICAL COLLAPSE (FORCE TRUE GRID)
   Put this at the VERY BOTTOM of htf-games.v5.8.css
========================================================= */

.htf-cw-grid {
  /* force fixed-size columns so it cannot collapse into a vertical strip */
  --cw-size: 34px;
  display: grid !important;
  grid-template-columns: repeat(var(--cw-cols), var(--cw-size)) !important;
  gap: 2px !important;

  /* allow wide grids to stay wide (and scroll if needed) */
  width: max-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

/* ensure each cell is a true square */
.htf-cw-cell {
  width: var(--cw-size) !important;
  height: var(--cw-size) !important;
}

/* keep the input filling the square */
.htf-cw-cell input {
  width: 100% !important;
  height: 100% !important;
}

/* =========================================================
   CROSSWORD GRID FIX (prevents vertical "1-column" collapse)
   IMPORTANT: JS uses --cw-size as the grid dimension (number)
   So we use a NEW variable (--cw-cell) for pixel sizing.
   Paste this at the VERY BOTTOM of the CSS file.
========================================================= */

#cw-grid,
.htf-cw-grid {
  /* cell pixel size (DO NOT use --cw-size for pixels) */
  --cw-cell: clamp(22px, 2.15vw, 30px);
  --cw-gap: 2px;

  display: grid !important;
  grid-template-columns: repeat(var(--cw-size, 15), var(--cw-cell)) !important;
  grid-auto-rows: var(--cw-cell) !important;
  gap: var(--cw-gap) !important;

  /* keep it from squeezing into a tall column */
  width: max-content !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

/* allow horizontal scroll if needed (instead of collapsing) */
#cw-grid-wrap,
.cw-wrap,
.htf-cw-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* cell + input sizing */
.cw-cell {
  width: var(--cw-cell) !important;
  height: var(--cw-cell) !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

.cw-input {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: calc(var(--cw-cell) * 0.55) !important;
  text-transform: uppercase;
}

/* clue numbers */
.cw-num {
  font-size: calc(var(--cw-cell) * 0.32) !important;
  top: 2px !important;
  left: 3px !important;
}

/* =========================================================
   CROSSWORD: "Standard crossword" look (square, tight grid)
   Paste at VERY BOTTOM of htf-games.v5.8.css
   ========================================================= */

/* 1) Make the crossword grid tight and centered */
#crossword-grid,
#crossword-grid .htf-cw-grid,
.htf-cw-grid {
  display: grid !important;
  gap: 2px !important;                 /* tighter spacing */
  justify-content: center !important;
  align-content: start !important;
}

/* 2) Force square cells + remove the puffy/rounded look */
#crossword-grid .htf-cw-cell,
.htf-cw-grid .htf-cw-cell,
.htf-cw-cell {
  border-radius: 0 !important;          /* square corners */
  box-shadow: none !important;          /* removes "pill/inset" look */
  background-image: none !important;
  outline: none !important;

  /* crisp border like a standard crossword */
  border: 1px solid rgba(255,255,255,0.18) !important;

  /* keep squares */
  aspect-ratio: 1 / 1 !important;
}

/* 3) Make “black” blocks look like true crossword blocks */
#crossword-grid .htf-cw-cell.is-block,
.htf-cw-cell.is-block {
  background: #000 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* 4) Make “open” cells look like a standard blank cell */
#crossword-grid .htf-cw-cell:not(.is-block),
.htf-cw-cell:not(.is-block) {
  background: rgba(255,255,255,0.06) !important;
}

/* 5) Tighten the little clue numbers to match crossword style */
#crossword-grid .htf-cw-num,
.htf-cw-num {
  top: 2px !important;
  left: 3px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  opacity: 0.95 !important;
}

/* 6) Make the letter input fill the square cleanly */
#crossword-grid input,
.htf-cw-grid input,
.htf-cw-cell input {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  text-align: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* =========================================================
   CROSSWORD "STANDARD GRID" OVERRIDE (DO NOT TOUCH --cw-size)
   - --cw-size must stay numeric (15) from HTML (column count)
   - We use --cw-cell for pixel size instead
   ========================================================= */

.htf-cw-grid{
  /* keep the column count coming from HTML: style="--cw-size: 15;" */
  --cw-cell: 34px;   /* cell width/height */
  --cw-gap: 1px;     /* tighter spacing like standard crossword */

  display: grid !important;
  grid-template-columns: repeat(var(--cw-size), var(--cw-cell)) !important;
  gap: var(--cw-gap) !important;

  width: max-content !important;   /* prevents “vertical collapse” */
  max-width: 100% !important;
}

/* Mobile: shrink cells so it fits without breaking layout */
@media (max-width: 600px){
  .htf-cw-grid{ --cw-cell: 24px; }
}

/* Make each cell a true square */
.cw-cell{
  width: var(--cw-cell) !important;
  height: var(--cw-cell) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important; /* standard crossword look */
}

/* Black blocks: square corners, thin border */
.cw-cell.block,
.cw-cell.black{
  background: rgba(0,0,0,0.75) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 0 !important;
}

/* Letter inputs: fill the square, no “rounded bubble” look */
.cw-cell .cw-input,
.cw-cell input{
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  border-radius: 0 !important; /* standard crossword look */
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(0,0,0,0.20) !important;

  font-size: calc(var(--cw-cell) * 0.45) !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

/* Number position/size like a standard crossword */
.cw-num{
  top: 2px !important;
  left: 2px !important;
  font-size: calc(var(--cw-cell) * 0.28) !important;
  line-height: 1 !important;
  color: rgba(255,255,255,0.75) !important;
}

/* ================================
   CROSSWORD — crisp “classic” look
   ================================ */

.htf-cw-wrap{
  overflow-x: auto;         /* prevents squish on smaller screens */
  -webkit-overflow-scrolling: touch;
}

/* IMPORTANT: remove the “gap” look and make a boxed grid */
.htf-cw-grid{
  /* change this value to tweak overall size */
  --cw-cell: 34px;

  display: grid;
  grid-template-columns: repeat(var(--cw-size), var(--cw-cell));
  gap: 0;                   /* <-- this is the big difference */
  justify-content: start;

  padding: 0;
  border: 1px solid rgba(255,255,255,.55);  /* outer border like classic */
  background: transparent;
}

/* Each tile becomes a perfect square with thin borders */
.htf-cw-grid .cw-cell{
  width: var(--cw-cell);
  height: var(--cw-cell);
  position: relative;

  border: 1px solid rgba(255,255,255,.55);  /* thin grid lines */
  border-radius: 0;                          /* <-- remove rounded corners */
  background: #fff;                          /* classic white tile */
  box-shadow: none;
}

/* Block cells are solid black */
.htf-cw-grid .cw-cell.block{
  background: #000;
}

/* Letter input centered */
.htf-cw-grid .cw-input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;

  text-align: center;
  font-weight: 700;
  font-size: 18px;        /* adjust if you want larger letters */
  text-transform: uppercase;
  color: #000;
  padding: 0;
}

/* Number in top-left like classic crosswords */
.htf-cw-grid .cw-num{
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  pointer-events: none;
}


/* ================================
   CROSSWORD — crisp “classic” look
   ================================ */

.htf-cw-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grid container */
.htf-cw-grid{
  --cw-cell: 34px;

  display: grid;
  grid-template-columns: repeat(var(--cw-size), var(--cw-cell));
  gap: 0;
  justify-content: start;

  padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
}

/* Cells */
.htf-cw-grid .cw-cell{
  width: var(--cw-cell);
  height: var(--cw-cell);
  position: relative;

  border: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

/* Block cells */
.htf-cw-grid .cw-cell.block{
  background: #000;
}

/* Letter input */
.htf-cw-grid .cw-input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;

  text-align: center;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: #000;
  padding: 0;
}

/* 🔢 Crossword numbers — FORCE BLACK */
.htf-cw-grid .cw-num{
  position: absolute;
  top: 2px;
  left: 3px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  color: #000 !important;   /* ensures black even with theme overrides */
  opacity: 1;               /* prevents dimming */
  pointer-events: none;
}


/* Answer letters */
.htf-cw-grid .cw-input{
  color: #1E88E5; /* blue */
}

/* Clue numbers */
.htf-cw-grid .cw-num{
  color: #000000; /* black */
}


.htf-cw-grid .cw-input{
  ...
  color: #000;   /* <-- THIS is the answer/letter color */
}


/* =========================================
   CROSSWORD — Correct / Incorrect coloring
   (JS adds: good, bad, miss, show)
   ========================================= */

.htf-cw-grid{
  --cw-correct: #19b35b;   /* green */
  --cw-wrong:   #e03a3a;   /* red */
  --cw-missing: #9aa0a6;   /* gray */
}

/* Correct */
.htf-cw-grid .cw-input.good{
  color: var(--cw-correct) !important;
  background: color-mix(in srgb, var(--cw-correct) 18%, transparent);
  outline: 2px solid color-mix(in srgb, var(--cw-correct) 55%, transparent);
  outline-offset: -2px;
}

/* Incorrect */
.htf-cw-grid .cw-input.bad{
  color: var(--cw-wrong) !important;
  background: color-mix(in srgb, var(--cw-wrong) 18%, transparent);
  outline: 2px solid color-mix(in srgb, var(--cw-wrong) 55%, transparent);
  outline-offset: -2px;
}

/* Missing (blank when checked) */
.htf-cw-grid .cw-input.miss{
  color: var(--cw-missing) !important;
  background: color-mix(in srgb, var(--cw-missing) 14%, transparent);
  outline: 2px solid color-mix(in srgb, var(--cw-missing) 45%, transparent);
  outline-offset: -2px;
}

/* When showing answers, keep it readable */
.htf-cw-grid .cw-input.show{
  font-weight: 800;
}