/* styles.css — DailyGameTime (Kid’s Mind Games) */

/* --- Base & layout --- */
:root{
  --bg: #f7fbff;
  --ink: #0b1220;
  --muted: #5b6b82;
  --brand: #2b95ff;
  --brand-2: #7cc7ff;
  --focus: #ff9e2b;
  --tile: #ffffff;
  --tile-border: #dbe6f6;
  --tile-hover: #eef6ff;
  --pill-bg: #eaf3ff;
  --kbd: #0b1220;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --ink:#ebf3ff; --muted:#a5b3c8; --tile:#0f1a2b;
    --tile-border:#1e2a40; --tile-hover:#0d223f; --pill-bg:#12243f;
    --brand:#7cc7ff; --brand-2:#2b95ff; --focus:#ffd166;
  }
}

html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
.prata-regular {
  font-family: "Prata", serif;
  font-weight: 400;
  font-style: normal;
}
  color:var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, var(--brand-2) 0%, transparent 40%),
              radial-gradient(1000px 700px at 110% 10%, var(--brand) 0%, transparent 35%),
              var(--bg);
}

.wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* --- Accessibility helpers --- */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;color:#000;padding:8px 10px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* --- Header / brand / nav --- */
.site-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:142px;height:142px;object-fit:contain}
h1{font-size:clamp(22px,3vw,34px);margin:0 0 8px 0}
.topnav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.topnav a{color:var(--brand);text-decoration:underline}
.topnav a:hover{opacity:.85}

/* --- Pills, buttons, tiles --- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:16px;background:var(--pill-bg);color:var(--ink);
  font-size:14px;border:1px solid var(--tile-border)
}
.toggle{display:inline-flex;align-items:center;gap:6px}
.toggle input{inline-size:1rem; block-size:1rem}

button, .tile{
  appearance:none;border:1px solid var(--tile-border);background:var(--tile);
  color:var(--ink);padding:10px 14px;border-radius:12px;cursor:pointer;
  font-size:16px;line-height:1.2;transition:transform .05s ease, background .15s ease, box-shadow .15s ease
}
button:hover, .tile:hover{background:var(--tile-hover)}
button:active, .tile:active{transform:translateY(1px)}
button:focus-visible, .tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button.ghost{background:transparent}
button.back{font-size:14px}

/* --- Cards & grids --- */
.card{
  background:rgba(255,255,255,.66);
  backdrop-filter: blur(6px);
  border:1px solid var(--tile-border);
  border-radius:16px;padding:18px;margin:18px 0;
  box-shadow:0 6px 24px rgba(17, 35, 70, .06)
}
.center{text-align:left}
.grid{display:grid;gap:12px}
.age-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.game-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.outline{border-style:dashed}

/* --- Utilities --- */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.theme-badge{width:12px;height:12px;border-radius:50%;display:inline-block;margin-left:8px;background:var(--brand)}
.hide{display:none}

/* --- Headings --- */
h2{font-size:clamp(22px,3.2vw,34px);margin:10px 0 14px 0}

/* --- Footer --- */
footer{margin-top:36px;text-align:center;color:var(--muted);font-size:14px}

/* --- Game host area --- */
#gameHost{min-height:280px}

/* --- Sudoku small pencil marks (you already render them in JS) --- */
.s-note{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1px;font-size:10px;color:#475569}

/* --- Crossword grid & clues (lightweight) --- */
.xwrap{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
.xword{display:grid;gap:2px}
.xcell{position:relative;width:38px;height:38px;border-radius:6px;border:1px solid var(--tile-border);display:flex;align-items:center;justify-content:center;background:#fff}
.xcell.block{background:#0f172a20}
.xnum{position:absolute;left:2px;top:2px;font-size:10px;color:#334155}
.xbox{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.xbox:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.xbox.xreveal{background:#e0f2fe;font-weight:700}
.xclues h3{margin:.2rem 0}
.xclues ol{margin:.2rem 0 .6rem 1.2rem}

/* --- Confetti canvas --- */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}

/* Fix: the .prata-regular block was inside body{} (invalid). Use it on headings. */
h1 { font-family: "Prata", serif; }

/* Sticky footer layout */
.page { min-height: 100svh; display: flex; }
.wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.main-space { flex: 1 0 auto; margin-top: clamp(16px, 4vw, 28px); } /* drops content lower */
.site-footer { margin-top: 28px; text-align: center; color: var(--muted); font-size: 14px; }

/* Scale up headings & tiles */
h1 { font-size: clamp(34px, 6vw, 56px); margin: 0 0 8px; }
h2 { font-size: clamp(26px, 4vw, 38px); }

/* Bigger tiles/buttons */
button, .tile {
  font-size: clamp(16px, 2.2vw, 18px);
  padding: 14px 18px;
  border-radius: 14px;
}

/* More colorful age/game tiles */
.b1 { background: #fff8e6; border-color: #ffd89a; }
.b1:hover { background: #ffefcc; }
.b2 { background: #e9f8ff; border-color: #bfe8ff; }
.b2:hover { background: #d9f1ff; }
.b3 { background: #eef7ff; border-color: #c9dcff; }
.b3:hover { background: #e0efff; }
.b4 { background: #f2f3ff; border-color: #d4d6ff; }
.b4:hover { background: #e8e9ff; }
.b5 { background: #f8eefc; border-color: #ecc6ff; }
.b5:hover { background: #f3e2fb; }

/* Give the top bar a little breathing room and soft glass */
.site-header { margin-bottom: 10px; }
.topnav .pill { font-size: 15px; }
.card { margin: 22px 0; padding: 22px; }

/* Center the Age block a bit more on large screens */
@media (min-width: 900px){
  #ageView, #gameView, #playView { margin-inline: 8px; }
}

/* Sudoku grid */
.sgrid{display:grid;grid-template-columns:repeat(9,38px);gap:4px}
.scell{position:relative}
.sbox{width:38px;height:38px;text-align:center;border:1px solid var(--tile-border);border-radius:6px;font-size:18px}
.given .sbox{background:#f1f5f9;font-weight:700}
.sbox.good{background:#e7fbe7}
.sbox.bad{background:#ffe8e8}

/* Word Guess */
.wg{display:grid;gap:12px}
.wg-slots{display:flex;gap:8px;flex-wrap:wrap;font-size:22px;letter-spacing:.1em}
.wg-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(34px,1fr));gap:6px}
.wgk{padding:8px 0}
.wgk.good{background:#e7fbe7}
.wgk.bad{background:#ffe8e8}

/* Math */
.mgrid{display:grid;gap:8px}
.mbox{width:90px;border:1px solid var(--tile-border);border-radius:8px;padding:6px 8px;margin-left:6px;font-size:16px}

/* ====== Cross-device cell sizes ====== */
:root{
  --cell-s: 44px;  /* Sudoku size */
  --cell-x: 38px;  /* Crossword size */
}
@media (max-width: 900px){
  :root{ --cell-s: 38px; --cell-x: 32px; }
}
@media (max-width: 600px){
  :root{ --cell-s: 32px; --cell-x: 28px; }
}

/* ====== Sudoku styling (clearer 3×3 boxes) ====== */
.sgrid{display:grid; grid-template-columns:repeat(9,var(--cell-s)); gap:4px}
.scell{position:relative}
.sbox{
  width:var(--cell-s); height:var(--cell-s);
  text-align:center; border:1px solid var(--tile-border);
  border-radius:6px; font-size:calc(var(--cell-s) * 0.45);
  background:#fff;
}
.given .sbox{background:#f1f5f9; font-weight:700}
.sbox.good{background:#e7fbe7}
.sbox.bad{background:#ffe8e8}

/* 3×3 heavy borders */
.scell.b-top    .sbox{border-top: 2px solid var(--brand-2)}
.scell.b-left   .sbox{border-left:2px solid var(--brand-2)}
.scell.b-right  .sbox{border-right:2px solid var(--brand-2)}
.scell.b-bottom .sbox{border-bottom:2px solid var(--brand-2)}

/* ====== Crossword polish ====== */
.xwrap{display:grid; grid-template-columns: 1fr 300px; gap:16px; align-items:start}
@media (max-width: 900px){ .xwrap{grid-template-columns:1fr} }

.xword{display:grid; gap:2px}
.xcell{position:relative; width:var(--cell-x); height:var(--cell-x);
  border-radius:6px; border:1px solid var(--tile-border); background:#fff}
.xcell.block{background:#e7eef8}
.xnum{position:absolute; left:2px; top:2px; font-size:10px; color:#334155}
.xbox{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-transform:uppercase; border:none; background:transparent; font-size:calc(var(--cell-x)*0.55);
}
.xbox:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.xbox.xreveal{background:#e0f2fe; font-weight:700}

/* Make the first card sit a bit lower */
.main-space{ margin-top: clamp(20px, 5vw, 36px); }

:root{ --cell-s: 44px; }
@media (max-width: 900px){ :root{ --cell-s: 38px; } }
@media (max-width: 600px){ :root{ --cell-s: 32px; } }

.sgrid{ display:grid; grid-template-columns:repeat(9,var(--cell-s)); gap:4px }
.scell{ position:relative }
.sbox{
  width:var(--cell-s); height:var(--cell-s);
  text-align:center; border:1px solid var(--tile-border);
  border-radius:6px; font-size:calc(var(--cell-s)*0.45);
  background:#fff;
}
.given .sbox{ background:#f1f5f9; font-weight:700 }
.sbox.good{ background:#e7fbe7 }
.sbox.bad{  background:#ffe8e8 }

/* bold borders for 3×3 boxes */
.scell.b-top    .sbox{ border-top:    2px solid var(--brand-2) }
.scell.b-left   .sbox{ border-left:   2px solid var(--brand-2) }
.scell.b-right  .sbox{ border-right:  2px solid var(--brand-2) }
.scell.b-bottom .sbox{ border-bottom: 2px solid var(--brand-2) }

/* selection + feedback */
.xbox.xsel { outline:2px solid var(--brand); outline-offset:-2px; background:#f0f9ff; }
.xclues li.on { background:#eef6ff; border-radius:6px; }
.xwrong { animation: xshake .18s 2; background:#fff1f2; }
@keyframes xshake {
  0%{ transform:translateX(0) } 25%{ transform:translateX(-2px) }
  50%{ transform:translateX(2px) } 75%{ transform:translateX(-2px) }
  100%{ transform:translateX(0) }
}

@font-face {
  font-family: 'Prata';
  src: url('/fonts/Prata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === Sudoku responsive tuning === */
:root {
  --sd-cell: 40px;      /* default desktop-ish cell size */
  --sd-gap:  4px;
}

/* Sudoku grid + cells */
.sgrid {
  display: grid;
  grid-template-columns: repeat(9, var(--sd-cell));
  gap: var(--sd-gap);
  margin: 8px auto 12px;
  /* keeps the whole board centered on small phones */
  max-width: calc(9 * var(--sd-cell) + 8 * var(--sd-gap));
}

.scell {
  width: var(--sd-cell);
  height: var(--sd-cell);
  border-radius: 10px;
}

.sbox {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: calc(var(--sd-cell) * 0.5);  /* scales number size */
  line-height: 1;
  padding: 0;
}

/* tigher board + smaller numbers on narrow phones */
@media (max-width: 430px) {
  :root { --sd-cell: 34px; --sd-gap: 3px; }
  .pill, .tile { padding: 8px 10px; font-size: 0.95rem; }
}

/* very small phones (SE/older minis) */
@media (max-width: 360px) {
  :root { --sd-cell: 30px; --sd-gap: 2px; }
  .sbox { font-size: 14px; }
}

/* give the tab buttons a bit more touch area without crowding */
#gameHost [data-sd-ix] {
  min-width: 44px;
  padding: 6px 10px;
}