/* puzzles/puzzles.css
   Styles for /puzzles/. Deliberately NOT linked to /play/css/style.css: that
   file locks html/body to 100dvh with overflow hidden (style.css:78-93), which
   would stop these pages scrolling. Tokens and keypad look are copied from
   style.css (:root at lines 16-63, keypad at lines 514-684); keep in step. */

:root {
  --bg-parchment: #FAF7F2;
  --bg-card: #FFFFFF;
  --bg-card-subtle: #F5EFEB;
  --primary-gold: #D97706;
  --primary-gold-dark: #B45309;
  --primary-gold-light: #FEF3C7;
  --temple-navy: #0F172A;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --border-subtle: #E2D9CF;
  --tile-default-border: #CBD5E1;
  --tile-green-bg: #16A34A;
  --tile-green-border: #15803D;
  --tile-orange-bg: #EA580C;
  --tile-orange-border: #C2410C;
  --tile-grey-bg: #64748B;
  --tile-grey-border: #475569;
  --error: #B91C1C;
  --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --font-tamil: 'Mukta Malar', 'Noto Sans Tamil', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-parchment);
  color: var(--text-main);
  font-family: var(--font-system);
  line-height: 1.5;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.ta { font-family: var(--font-tamil); }
.en { font-family: var(--font-system); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }

/* Letters shrunk to fit their cell by js/fit.js (only the wide ones). */
.fit { display: inline-block; white-space: nowrap; transform-origin: center; }

a { color: var(--primary-gold-dark); }
:focus-visible { outline: 3px solid var(--primary-gold); outline-offset: 2px; }

/* ---- Page frame ------------------------------------------------------- */

.pz-page { max-width: 52rem; margin: 0 auto; }

.pz-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: .75rem;
}
/* inline-block, not flex: flex drops the spaces around mixed-script spans
   ("Play : <span>சொல்லாடல்</span> · Solladal"). */
.pz-top a {
  display: inline-block; min-height: 44px; line-height: 44px;
  font-family: var(--font-tamil); font-weight: 700; text-decoration: none;
}
.pz-top a:hover { text-decoration: underline; }

.pz-title { text-align: center; margin: .25rem 0 .5rem; line-height: 1.25; }
.pz-title .ta {
  display: block; font-size: clamp(1.7rem, 6vw, 2.2rem); font-weight: 800;
  color: var(--primary-gold-dark);
}
.pz-title .en { display: block; font-size: 1rem; font-weight: 600; color: var(--text-muted); }

.pz-help { text-align: center; color: var(--text-muted); font-size: .95rem; margin-bottom: 1rem; }
.pz-help .ta { display: block; }

.pz-card-box {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: 1rem;
}

/* ---- Buttons ---------------------------------------------------------- */

.pz-btn {
  display: inline-block; text-align: center; line-height: 1.3;
  min-height: 44px; padding: .65rem 1.1rem;
  border-radius: 12px; border: 1.5px solid var(--border-subtle);
  background: var(--bg-card); color: var(--temple-navy);
  font: 700 1rem var(--font-system); text-decoration: none; cursor: pointer;
}
.pz-btn:active { transform: translateY(1px); }
.pz-btn-primary {
  background: var(--primary-gold); border-color: var(--primary-gold-dark); color: #fff;
  box-shadow: 0 3px 0 var(--primary-gold-dark);
}
.pz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.25rem 0; }

/* Today / Random switch */
.pz-mode {
  display: flex; justify-content: center; gap: 0; margin: 0 auto 1rem;
  width: fit-content; border: 1.5px solid var(--border-subtle); border-radius: 12px; overflow: hidden;
}
.pz-mode button {
  min-height: 44px; padding: .4rem 1rem; border: 0; background: var(--bg-card);
  font: 700 .95rem var(--font-tamil); color: var(--text-muted); cursor: pointer;
}
.pz-mode button + button { border-left: 1.5px solid var(--border-subtle); }
.pz-mode button[aria-pressed="true"] { background: var(--primary-gold); color: #fff; }

.pz-status { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: .75rem; }

.pz-error {
  text-align: center; border: 1.5px solid var(--error); color: var(--error);
  border-radius: 12px; padding: 1rem; margin: 1rem 0; background: #FEF2F2;
}
.pz-error p { margin-bottom: .75rem; }

.pz-summary {
  text-align: center; margin: 1rem 0; padding: 1rem;
  background: var(--primary-gold-light); border: 1.5px solid var(--primary-gold);
  border-radius: 14px;
}
.pz-summary h2 { font-family: var(--font-tamil); color: var(--primary-gold-dark); font-size: 1.25rem; }
.pz-summary p { margin-top: .35rem; }

.pz-foot { text-align: center; font-size: .9rem; color: var(--text-muted); margin-top: 1.5rem; }
.pz-foot a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .4rem; font-weight: 600; }

/* ---- Hub -------------------------------------------------------------- */

.hub-intro { text-align: center; max-width: 36rem; margin: 0 auto 1.25rem; }
.hub-intro .ta { display: block; margin-top: .35rem; }
.hub-note { text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: .75rem; }

.hub-list { list-style: none; display: grid; gap: 1rem; max-width: 36rem; margin: 0 auto; }
.hub-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-card); padding: 1rem 1.1rem;
}
.hub-card:hover { border-color: var(--primary-gold); }
.hub-card .ta-name { display: block; font: 800 1.4rem var(--font-tamil); color: var(--primary-gold-dark); }
.hub-card .en-name { display: block; font-weight: 700; color: var(--temple-navy); }
.hub-card .desc { display: block; margin-top: .4rem; font-size: .92rem; color: var(--text-muted); }
.hub-card .desc .ta { display: block; }
.hub-today { display: inline-block; margin-top: .6rem; font: 600 .85rem var(--font-tamil); color: var(--text-muted); }
.hub-today.done { color: var(--tile-green-border); }

/* ---- Match the Words --------------------------------------------------- */

.match-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  grid-auto-rows: minmax(56px, auto);
  column-gap: 2.5rem; row-gap: .6rem;
  align-items: center;
}
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.match-lines line { stroke: var(--tile-green-bg); stroke-width: 3; stroke-linecap: round; }

.match-tile {
  position: relative; z-index: 1;
  width: 100%; min-height: 56px; padding: .4rem .6rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg-card); color: var(--text-main);
  border: 2px solid var(--tile-default-border); border-radius: 12px;
  box-shadow: 0 2px 0 #D4C9BC; cursor: pointer;
  overflow-wrap: anywhere;
}
/* Tamil words never break mid-word; the phone layout below is sized so the
   widest Match word (மண்ணெண்ணெய், ~152px at 16px) fits at 360px. */
.match-tile.tamil {
  font: 800 clamp(.95rem, 4.2vw, 1.35rem) var(--font-tamil);
  overflow-wrap: normal; word-break: keep-all;
}
.match-tile.english { font: 600 clamp(.9rem, 3.4vw, 1rem) var(--font-system); }
.match-tile[aria-pressed="true"] {
  border-color: var(--primary-gold); background: var(--primary-gold-light);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .25);
}
.match-tile.matched {
  background: var(--tile-green-bg); border-color: var(--tile-green-border); color: #fff;
  box-shadow: none; cursor: default;
}
.match-tile.matched::after { content: " ✓"; white-space: pre; }
.match-tile.wrong { border-color: var(--error); animation: pz-shake .4s; }

.match-clue {
  font-size: .9rem; line-height: 1.4; padding: .4rem .6rem;
  border-left: 3px solid var(--tile-green-bg); background: var(--bg-card);
  border-radius: 0 8px 8px 0;
}
.match-clue .ta { display: block; font-size: .95rem; }
.match-clue .en { display: block; color: var(--text-muted); font-style: italic; }

.match-clues { display: none; list-style: none; margin-top: 1rem; gap: .6rem; }
.match-clues li { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--tile-green-bg); border-radius: 0 10px 10px 0; padding: .6rem .75rem; }
.match-clues .pair { font-weight: 700; }
.match-clues .pair .ta { font-size: 1.05rem; }
.match-clues .clue-ta { display: block; font-family: var(--font-tamil); margin-top: .2rem; }
.match-clues .clue-en { display: block; color: var(--text-muted); font-style: italic; font-size: .9rem; }

@media (max-width: 600px) {
  /* English (left) | Tamil (right, wider so the longest Tamil word fits). */
  .match-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 1.25rem; }
  .match-tile { padding: .4rem .3rem; }
  .match-board .match-clue { display: none; }
  .match-clues { display: grid; }
}

@keyframes pz-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ---- Jumbled Letters --------------------------------------------------- */

/* Compact so the tiles, the tries and the keypad's check bar fit a 360x640
   screen without scrolling; tile taps alone can solve the puzzle. */
.jb-page .pz-title { margin-bottom: .25rem; }
.jb-page .pz-help { margin-bottom: .5rem; font-size: .85rem; line-height: 1.35; }
.jb-page .pz-mode { margin-bottom: .5rem; }
.jb-page .pz-status { margin-bottom: .5rem; }
.jb-length button { padding: .4rem .8rem; }

.jb-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 .75rem; }
/* Fixed width: a wide letter shrinks to fit (fit.js) instead of widening the
   tile and pushing the sixth tile onto a new row. */
.jb-tile {
  width: 48px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--primary-gold); border-radius: 10px;
  background: var(--primary-gold-light); color: var(--primary-gold-dark);
  font: 800 1.3rem var(--font-tamil); cursor: pointer;
  box-shadow: 0 3px 0 var(--primary-gold-dark);
}
.jb-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-gold-dark); }
.jb-tile:disabled { opacity: .3; cursor: default; box-shadow: none; transform: none; }

/* Cells size to the word length; 6 cells fit a 360px screen. */
.jb-grid {
  --cols: 5;
  --cell: min(48px, calc((100vw - 32px - (var(--cols) - 1) * 6px) / var(--cols)));
  display: grid; gap: 6px; justify-content: center; margin-bottom: .4rem;
}
.jb-row { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); gap: 6px; }
.jb-row.wrong { animation: pz-shake .4s; }
.jb-cell {
  height: var(--cell); display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--tile-default-border); border-radius: 8px;
  font: 800 clamp(1rem, 4.6vw, 1.3rem) var(--font-tamil); color: var(--text-main);
}
.jb-row.active .jb-cell { border-color: var(--border-subtle); }
.jb-row.active .jb-cell.filled { border-color: var(--primary-gold); }
.jb-cell.green { background: var(--tile-green-bg); border-color: var(--tile-green-border); color: #fff; }
.jb-cell.orange { background: var(--tile-orange-bg); border-color: var(--tile-orange-border); color: #fff; }
.jb-cell.grey { background: var(--tile-grey-bg); border-color: var(--tile-grey-border); color: #fff; }

.jb-message { min-height: 1.5em; text-align: center; font-size: .92rem; color: var(--text-main); margin-bottom: .5rem; }
.jb-keypad { max-width: 34rem; margin: 0 auto; }

.jb-result .jb-answer { font: 800 2rem var(--font-tamil); color: var(--primary-gold-dark); margin-top: .25rem; }
.jb-result .jb-meaning { font-weight: 700; }
.jb-result .jb-clue-ta { font-family: var(--font-tamil); margin-top: .6rem; }
.jb-result .jb-clue-en { color: var(--text-muted); font-style: italic; font-size: .92rem; }
.jb-result .jb-next { margin-top: .6rem; font-weight: 700; }

/* ---- Crossword ---------------------------------------------------------- */

/* Cells: never under 44px; on short screens they shrink toward 44px so the
   grid, current clue and keypad fit together (plan §5.3 height budget). */
.cw-page { --cw-cell: max(44px, min(56px, calc((100vw - 47px) / 6), calc((100dvh - 330px) / 6))); }
.cw-page .pz-help { font-size: .85rem; margin-bottom: .5rem; line-height: 1.35; }
.cw-page .pz-mode { margin-bottom: .6rem; }

.cw-board {
  display: grid; grid-template-columns: repeat(6, var(--cw-cell)); grid-auto-rows: var(--cw-cell);
  gap: 3px; justify-content: center; margin: 0 auto 4px;
  scroll-margin-top: 4px;
}
.cw-block { background: #CBD5E1; border-radius: 4px; }
.cw-cell {
  position: relative; padding: 0; cursor: pointer;
  /* flex centring keeps an over-wide letter centred while fit.js scales it */
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--tile-default-border); border-radius: 4px;
  font: 800 clamp(1rem, 4.4vw, 1.3rem) var(--font-tamil); color: var(--text-main);
}
.cw-num {
  position: absolute; top: 1px; left: 3px;
  font: 700 .62rem var(--font-system); color: var(--text-muted); line-height: 1;
}
.cw-cell.in-word { background: var(--primary-gold-light); }
.cw-cell.cursor { border-color: var(--primary-gold); background: #FDE68A; box-shadow: inset 0 0 0 1px var(--primary-gold); }
.cw-cell.revealed .cw-letter { color: var(--primary-gold-dark); text-decoration: underline dotted; text-underline-offset: 3px; }
.cw-cell.wrong { border-color: var(--error); background: #FEE2E2; }
.cw-cell.solved { background: #DCFCE7; border-color: var(--tile-green-border); cursor: default; }

/* Clue boxes for the selected cell. The active box (word being typed) shows
   its clue in full (scrolls past ~3 lines); on phones the other box is one
   line, tap it to switch direction. Wider screens show both in full. */
.cw-clues { display: grid; gap: 3px; max-width: 34rem; margin: 0 auto 3px; }
.cw-cluebox {
  display: flex; align-items: stretch; gap: 4px; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-subtle);
  border-radius: 8px;
}
.cw-cluebox.active { border-left-color: var(--primary-gold); background: var(--primary-gold-light); }
.cw-cluetext {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: var(--text-main);
  padding: .2rem .45rem; font-size: .82rem; line-height: 1.3;
}
.cw-cluetext .cw-tag { font-weight: 800; color: var(--primary-gold-dark); margin-right: .35rem; white-space: nowrap; }
.cw-cluetext .ta { font-family: var(--font-tamil); }
.cw-cluetext .en { display: block; color: var(--text-muted); font-style: italic; }
.cw-cluebox.active .cw-cluetext { max-height: 3.2rem; overflow-y: auto; cursor: default; }
.cw-cluebox:not(.active) .cw-cluetext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-cluebox:not(.active) .cw-cluetext .en { display: inline; margin-left: .35rem; }
.cw-cycle {
  flex-shrink: 0; width: 4.6rem; min-height: 36px; padding: .15rem .3rem; cursor: pointer;
  border: 0; border-left: 1px solid var(--border-subtle); border-radius: 0 8px 8px 0;
  background: var(--bg-card-subtle); color: var(--temple-navy); line-height: 1.15;
}
.cw-cycle .ta { display: block; font: 700 .72rem var(--font-tamil); }
.cw-cycle .en { display: block; font: 600 .68rem var(--font-system); color: var(--text-muted); }
@media (min-width: 700px) {
  .cw-clues { grid-template-columns: 1fr 1fr; max-width: 46rem; }
  .cw-cluebox.active .cw-cluetext { max-height: none; }
  .cw-cluebox:not(.active) .cw-cluetext { white-space: normal; }
  .cw-cluebox:not(.active) .cw-cluetext .en { display: block; margin-left: 0; }
}
.cw-small {
  min-height: 44px; padding: .3rem .6rem; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--border-subtle); background: var(--bg-card);
  font: 700 .8rem var(--font-tamil); color: var(--temple-navy); line-height: 1.25;
}
.cw-small:disabled { opacity: .45; cursor: default; }

.cw-keypad { max-width: 34rem; margin: 0 auto; }
/* Keys shrink before grid cells do (plan §5.3): fits 360 x 580 with browser bars. */
.cw-keypad .tk-key { height: clamp(24px, 4.2vh, 38px); }
.cw-help-row { display: flex; justify-content: center; gap: .5rem; margin: .6rem 0 .25rem; flex-wrap: wrap; }
.cw-message { min-height: 1.5em; text-align: center; font-size: .92rem; margin: .25rem 0 .5rem; }

.cw-summary .cw-words { list-style: none; text-align: left; max-width: 26rem; margin: .6rem auto 0; font-size: .92rem; }
.cw-summary .cw-words li { padding: .15rem 0; }


/* ---- Tamil keypad (copied look from the game's .key-btn / preview) ------ */

.tk {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 6px; display: grid; gap: 6px;
}
.tk-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.tk-preview {
  display: flex; align-items: center; gap: 2px; padding: 3px 4px;
  background: var(--bg-card-subtle); border: 1px solid var(--border-subtle); border-radius: 8px;
}
.tk-tile {
  min-width: 28px; height: 34px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 5px;
  font: 800 1.05rem var(--font-tamil); line-height: 1;
}
.tk-result { min-width: 42px; }
.tk-op { font-weight: 800; color: var(--primary-gold-dark); font-size: .85rem; }
.tk-insert {
  min-width: 44px; height: 38px; margin-left: 2px; border: 0; border-radius: 6px;
  background: var(--tile-green-bg); color: #fff; box-shadow: 0 2px 0 var(--tile-green-border);
  font-weight: 800; font-size: 1.05rem; cursor: pointer;
}
.tk-actions { display: flex; gap: 6px; }
.tk-btn {
  min-height: 44px; min-width: 44px; padding: 0 .6rem; border-radius: 8px;
  border: 1px solid var(--border-subtle); background: var(--bg-card-subtle);
  font: 700 .95rem var(--font-tamil); cursor: pointer;
}
.tk-enter { background: var(--temple-navy); color: #fff; border-color: var(--temple-navy); }
.tk-keys { display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 5px; }
.tk-divider { width: 2px; background: var(--border-subtle); border-radius: 1px; }
.tk-col { display: flex; flex-direction: column; gap: 3px; }
.tk-sub { font-size: .7rem; font-weight: 800; color: var(--text-muted); text-align: center; font-family: var(--font-tamil); }
.tk-grid { display: grid; gap: 3px; }
.tk-mei { grid-template-columns: repeat(6, 1fr); }
.tk-uyir { grid-template-columns: repeat(4, 1fr); }
.tk-key {
  height: clamp(30px, 4.6vh, 38px);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-subtle); border: 1px solid var(--border-subtle); border-radius: 5px;
  box-shadow: 0 1.5px 0 #D4C9BC; cursor: pointer;
  font: 700 clamp(.9rem, 2.4vw, 1.05rem) var(--font-tamil); color: var(--text-main);
}
.tk-key:active { transform: translateY(1.5px); box-shadow: 0 1px 0 #D4C9BC; }
.tk-key.selected {
  background: var(--primary-gold); border-color: var(--primary-gold-dark); color: #fff;
  box-shadow: 0 1.5px 0 var(--primary-gold-dark);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}