/* games.css — shared look for the calm word games (Quiet Words, Word Bloom, Quiet Crossword).
   Tile colours come from the keepsake you choose (rewards.js sets html[data-tiles]). */

:root{
  --g-board: linear-gradient(145deg, #FFF8EE 0%, #F6EEF8 55%, #EEF4FA 100%);
  --g-edge: #E6D6EE; --g-tile: #FFFFFF; --g-ink: #3C3350; --g-soft: #8A6D8F;
  --g-accent: #D9C8F0; --g-accent-ink: #3C3350; --g-found: #BFE3CF; --g-empty: rgba(255,255,255,.55);
}
html[data-tiles="tiles-rose"]{ --g-board: linear-gradient(150deg, #FFF3F5 0%, #FBE3EA 100%); --g-edge: #F2C9D4; --g-tile: #FFFAFB; --g-ink: #6B2E45; --g-soft: #A65A76; --g-accent: #F4A6B8; --g-found: #F9D3DE; }
html[data-tiles="tiles-moon"]{ --g-board: linear-gradient(160deg, #22264C 0%, #33335F 100%); --g-edge: #4A4B85; --g-tile: #3A3F72; --g-ink: #F3EEFF; --g-soft: #C9C1EE; --g-accent: #8F7FC4; --g-accent-ink: #fff; --g-found: #5E5AA0; --g-empty: rgba(255,255,255,.08); }
html[data-tiles="tiles-meadow"]{ --g-board: linear-gradient(150deg, #F1F9EC 0%, #DFEFD8 100%); --g-edge: #C4E0BB; --g-tile: #FBFFF8; --g-ink: #2F4A3A; --g-soft: #5D7F66; --g-accent: #A9DCB8; --g-found: #CDEBC4; }
html[data-tiles="tiles-sunrise"]{ --g-board: linear-gradient(160deg, #FFF3E2 0%, #FFE0D0 100%); --g-edge: #F7CDB0; --g-tile: #FFFBF5; --g-ink: #6B3A22; --g-soft: #A8674A; --g-accent: #F9C08F; --g-found: #FCD9B8; }
html[data-tiles="tiles-gold"]{ --g-board: linear-gradient(160deg, #FFF8DE 0%, #F6E3A2 100%); --g-edge: #E9D08A; --g-tile: #FFFCEF; --g-ink: #5B4410; --g-soft: #8E6F24; --g-accent: #E8C55B; --g-found: #F4DE8E; }

/* the row of games at the top of each game page */
.gm-switch{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 1rem; }
.gm-switch a.gm-tab{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.35rem .85rem; border-radius:999px; border:1px solid #E6D6EE; background:#fff; color:#4E3F6B; text-decoration:none; font-size:.9rem; font-weight:600; }
.gm-switch a.gm-tab[aria-current="page"]{ background:#3C3350; border-color:#3C3350; color:#FFF8EE; }
.gm-switch .gm-chip{ margin-left:auto; }
@media (max-width:420px){ .gm-switch a.gm-tab{ padding:.3rem .65rem; font-size:.84rem; } }

/* shared board */
.gm-board{ margin:0 0 1.4rem; padding:1rem; border-radius:26px; background:var(--g-board); border:1px solid var(--g-edge); box-shadow:0 14px 40px rgba(120,90,140,.12); color:var(--g-ink); touch-action:manipulation; }
.gm-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:0 0 .6rem; }
.gm-k{ margin:0; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g-soft); }
.gm-title{ margin:0; font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.3rem; color:var(--g-ink); }
.gm-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1rem; }
.gm-btns button{ font:inherit; font-size:.9rem; min-height:44px; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--g-edge); background:var(--g-tile); color:var(--g-ink); cursor:pointer; }
.gm-btns .gm-primary{ background:#3C3350; border-color:#3C3350; color:#FFF8EE; }
html[data-tiles="tiles-moon"] .gm-btns .gm-primary{ background:#F3EEFF; color:#22264C; }
.gm-note{ min-height:2.6rem; margin:.7rem auto 0 !important; max-width:30rem; text-align:center; line-height:1.45; color:var(--g-ink); }
.gm-note b{ font-family:"Fraunces", Georgia, serif; }
.gm-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* a crossword-style grid of letter cells (Word Bloom and Quiet Crossword) */
.gm-grid{ display:grid; gap:4px; margin:0 auto; width:100%; }
.gm-cell{ position:relative; aspect-ratio:1; border-radius:9px; display:grid; place-items:center; font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:clamp(1rem, 5.2vw, 1.5rem); line-height:1; color:var(--g-ink); }
.gm-cell.is-on{ background:var(--g-empty); border:1px solid var(--g-edge); }
.gm-cell.is-found{ background:var(--g-found); border-color:transparent; animation:gm-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes gm-pop{ 0%{ transform:scale(.6); } 100%{ transform:scale(1); } }
.gm-cell .gm-n{ position:absolute; left:4px; top:2px; font:500 .6rem/1 "IBM Plex Mono", monospace; color:var(--g-soft); }

@media (prefers-reduced-motion: reduce){ .gm-cell.is-found{ animation:none; } }
.gm-switch a.gm-home{ min-width:44px; justify-content:center; padding:.35rem .6rem; }

/* difficulty levels, Next and Random (game-levels.js) */
.gl-bar{ margin:0 0 .8rem; }
.gl-tiers{ display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.45rem; }
.gl-tiers button{ font:inherit; font-size:.82rem; min-height:36px; padding:.25rem .7rem; border-radius:999px; border:1px solid var(--g-edge); background:var(--g-tile); color:var(--g-ink); cursor:pointer; }
.gl-tiers button[aria-pressed="true"]{ background:#3C3350; border-color:#3C3350; color:#FFF8EE; }
html[data-tiles="tiles-moon"] .gl-tiers button[aria-pressed="true"]{ background:#F3EEFF; color:#22264C; }
.gl-row{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.gl-where{ flex:1 1 auto; font-family:"IBM Plex Mono", monospace; font-size:.74rem; color:var(--g-soft); }
.gl-row button{ font:inherit; font-size:.86rem; min-height:40px; padding:.3rem .85rem; border-radius:999px; border:1px solid var(--g-edge); background:var(--g-tile); color:var(--g-ink); cursor:pointer; }
.gl-row .gl-next{ background:var(--g-accent); color:var(--g-accent-ink); border-color:transparent; font-weight:600; }
/* a tip from the program after each puzzle */
.gl-tip{ margin:.8rem 0 .2rem; padding:.7rem .9rem; border-radius:16px; background:#F4F9F2; border:1px solid #CFE0CC; text-align:left; color:#2F4A3A; font-size:.9rem; line-height:1.45; }
.gl-tip p{ margin:0 0 .25rem; }
.gl-tip-k{ font:500 .68rem/1 "IBM Plex Mono", monospace; letter-spacing:.1em; text-transform:uppercase; color:#3E6B4C; }
.gl-tip a{ font-weight:600; color:#2F5A3D; }

/* on the game pages, let the Night Garden behind show through more */
html.has-garden body.is-game .tol-garden-veil{ background:linear-gradient(180deg, rgba(250,244,232,.46) 0%, rgba(250,244,232,.36) 50%, rgba(250,244,232,.3) 100%); }
html.has-garden body.is-game main > .read-head, html.has-garden body.is-game main > .simple-lede,
html.has-garden body.is-game main > .try-this{ background:rgba(255,252,244,.82); border-radius:18px; padding:.8rem 1rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
html.has-garden body.is-game .gm-board{ background-color:rgba(255,255,255,.2); }
html.has-garden body.is-game .gm-switch{ padding:.35rem; border-radius:999px; background:rgba(255,252,244,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.wb-done > div, .xw-done > div{ max-height:calc(100% - 1rem); overflow:auto; }
/* the game tabs stay on one line; swipe for more on a small phone */
.gm-switch{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gm-switch::-webkit-scrollbar{ display:none; }
.gm-switch a.gm-tab{ flex:none; }
@media (max-width:420px){ .gm-switch a.gm-tab{ padding:.3rem .6rem; font-size:.82rem; } }

/* today's puzzles (the crosswords), above the difficulty bar */
.xw-today{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 .6rem; padding:0 0 .6rem; border-bottom:1px dashed var(--g-edge); }
.xw-today-k{ font:500 .7rem/1 "IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--g-soft); margin-right:.1rem; }
.xw-today button{ font:inherit; font-size:.9rem; font-weight:600; min-height:40px; padding:.3rem .95rem; border-radius:999px; border:1px solid var(--g-edge); background:var(--g-tile); color:var(--g-ink); cursor:pointer; }
.xw-today button[aria-pressed="true"]{ background:#3C3350; border-color:#3C3350; color:#FFF8EE; }
.xw-today-more{ margin-left:auto; font-size:.74rem; color:var(--g-soft); }
@media (max-width:420px){ .xw-today-more{ display:none; } }
/* bigger squares: the grid keeps a comfortable square size and scrolls sideways */
.xw-scroll{ position:relative; }
.xw.is-zoom .xw-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px; margin:0 -.2rem; overscroll-behavior-x:contain; }
.xw.is-zoom .xw-grid{ margin:0; }
.xw.is-zoom .xw-cell{ font-size:1.2rem !important; }
.xw.is-zoom .gm-n{ font-size:.55rem !important; }
.xw-zoom[hidden]{ display:none; }
/* Quiet Words: a soft nudge when a line isn't one of the hidden words */
.qw-grid.is-miss{ animation:qw-nope .45s ease-in-out; }
@keyframes qw-nope{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){ .qw-grid.is-miss{ animation:none; } }