/* ============================================================================
   word.css — WordLab's signature layer

   VOICE: the tile rack. This is a game site, so the interface should feel like
   the game — tiles with their point value in the corner, laid out in a rack,
   snapping into a grid. Confident and fast, not cute.

   Distinct from NameCurve on purpose (AAA spec: sameness forbidden in hero
   composition, set piece, iconography). NameCurve is warm violet/coral with
   curves; WordLab is deep green felt with square tiles and monospace numerals.
   Same skeleton, different company.
   ========================================================================== */

:root {
  --wl:        #1E7A6B;   /* felt green   */
  --wl-deep:   #14584D;   /* text-safe    */
  --wl-tile:   #F2E4C9;   /* tile ivory   */
  --wl-tile-e: #D9C49E;   /* tile edge    */
  --wl-hot:    #C2410C;   /* high score   */
  --wl-rule:   #DCE5E2;
  --wl-soft:   #EFF5F3;
  --wl-fg:     #16211F;
  --wl-shadow: 0 1px 2px rgba(20,88,77,.08), 0 8px 22px -10px rgba(20,88,77,.28);
  --wl-r:      12px;      /* squarer than NameCurve — these are tiles */
}
@media (prefers-color-scheme: dark) {
  :root {
    --wl: #4FD1B8; --wl-deep: #7FE3CE; --wl-tile: #2A3A36; --wl-tile-e: #3E534D;
    --wl-rule: #2C3A37; --wl-soft: #17221F; --wl-fg: #E6F0ED; --wl-hot: #FF9A6B;
    --wl-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 22px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --wl: #4FD1B8; --wl-deep: #7FE3CE; --wl-tile: #2A3A36; --wl-tile-e: #3E534D;
  --wl-rule: #2C3A37; --wl-soft: #17221F; --wl-fg: #E6F0ED; --wl-hot: #FF9A6B;
}
:root[data-theme="light"] {
  --wl: #1E7A6B; --wl-deep: #14584D; --wl-tile: #F2E4C9; --wl-tile-e: #D9C49E;
  --wl-rule: #DCE5E2; --wl-soft: #EFF5F3; --wl-fg: #16211F; --wl-hot: #C2410C;
}

/* --- the solver: the product, so it gets the felt ------------------------ */
.wl-solve {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--wl) 14%, transparent) 0%, transparent 60%),
    var(--wl-soft);
  border: 1px solid var(--wl-rule); border-radius: var(--wl-r);
  padding: clamp(1rem, 3vw, 1.6rem); box-shadow: var(--wl-shadow);
}
.wl-lab {
  display: block; font: 700 .82rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--wl-deep);
  margin-bottom: .5rem;
}
.wl-lab span {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--muted, #6b7a76); margin-left: .4rem;
}
.wl-in {
  width: 100%; font: 700 clamp(1.3rem, 5vw, 1.9rem)/1.2 ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .75rem .9rem; border: 2px solid var(--wl-rule); border-radius: 10px;
  background: var(--paper, #fff); color: inherit;
}
.wl-in:focus {
  outline: 0; border-color: var(--wl);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wl) 20%, transparent);
}
.wl-opts {
  display: flex; flex-wrap: wrap; gap: .7rem; margin: .8rem 0;
}
.wl-opts label {
  font: 600 .8rem/1.6 Inter, system-ui, sans-serif; color: var(--muted, #6b7a76);
  display: flex; flex-direction: column; gap: .25rem;
}
.wl-mini, .wl-opts select {
  font: 600 .95rem/1 ui-monospace, Consolas, monospace; text-transform: uppercase;
  padding: .5rem .6rem; border: 1px solid var(--wl-rule); border-radius: 8px;
  background: var(--paper, #fff); color: inherit; min-width: 5.5rem;
}
.wl-btn {
  font: 700 1rem/1 Inter, system-ui, sans-serif; cursor: pointer; border: 0;
  background: var(--wl); color: #fff; border-radius: 10px;
  padding: .85rem 1.5rem; box-shadow: 0 2px 10px -3px rgba(20,88,77,.6);
  transition: transform .14s, box-shadow .14s, filter .14s;
}
.wl-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.wl-btn:active { transform: translateY(0); }

/* --- results ------------------------------------------------------------- */
.wl-out { margin-top: 1.4rem; }
.wl-count {
  font: 700 1rem/1.4 Inter, system-ui, sans-serif; color: var(--wl-deep);
  margin: .2rem 0 .6rem;
}
.wl-muted { color: var(--muted, #6b7a76); }
.wl-lh {
  font: 700 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted, #6b7a76);
  margin: 1.4rem 0 .6rem; display: flex; align-items: center; gap: .55rem;
}
.wl-lh span {
  font-family: ui-monospace, Consolas, monospace; letter-spacing: 0;
  background: color-mix(in srgb, var(--wl) 13%, transparent);
  color: var(--wl-deep); padding: .18rem .45rem; border-radius: 5px;
}
.wl-lh::after {
  content: ""; flex: 1; height: 1px; background: var(--wl-rule);
}

/* the word tile — the set piece, repeated */
.wl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: .4rem;
}
.wl-grid a {
  position: relative; display: flex; align-items: baseline; gap: .3rem;
  background: var(--wl-tile); border: 1px solid var(--wl-tile-e);
  border-bottom-width: 3px; border-radius: 7px;
  padding: .5rem .55rem; text-decoration: none; color: var(--wl-fg);
  transition: transform .12s, box-shadow .12s;
}
.wl-grid a:hover { transform: translateY(-2px); box-shadow: var(--wl-shadow); }
.wl-w {
  font: 650 1rem/1.15 ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere;
}
.wl-s {
  margin-left: auto; font: 700 .7rem/1 ui-monospace, Consolas, monospace;
  color: var(--wl-deep); opacity: .75; font-variant-numeric: tabular-nums;
}
.wl-more { color: var(--muted, #6b7a76); font-size: .9rem; margin-top: .7rem; }

/* --- the single-word answer block --------------------------------------- */
.wl-answer {
  background: var(--wl-soft); border: 1px solid var(--wl-rule);
  border-radius: var(--wl-r); padding: clamp(1rem, 3vw, 1.6rem);
  margin: 1rem 0 1.4rem;
}
.wl-tiles { display: flex; flex-wrap: wrap; gap: .4rem; }
.wl-tile {
  position: relative; width: 3.1rem; height: 3.1rem;
  background: var(--wl-tile); border: 1px solid var(--wl-tile-e);
  border-bottom-width: 4px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 1.5rem/1 ui-monospace, Consolas, monospace; text-transform: uppercase;
  color: var(--wl-fg);
}
.wl-tile b {
  position: absolute; right: .22rem; bottom: .12rem;
  font: 700 .58rem/1 ui-monospace, Consolas, monospace; opacity: .7;
}
.wl-score {
  margin: .9rem 0 0; font: 500 1rem/1.5 Inter, system-ui, sans-serif;
  color: var(--muted, #6b7a76);
}
.wl-score strong {
  font: 700 1.7rem/1 ui-monospace, Consolas, monospace; color: var(--wl-hot);
}

/* --- letter filter strips ------------------------------------------------ */
.wl-filters {
  display: flex; flex-wrap: wrap; gap: .32rem; align-items: center;
  margin: .9rem 0;
}
.wl-filters > span {
  font: 700 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted, #6b7a76); margin-right: .3rem;
}
.wl-filters a {
  width: 2.3rem; height: 2.3rem; border-radius: 7px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .88rem/1 ui-monospace, Consolas, monospace; text-transform: uppercase;
  background: var(--wl-tile); border: 1px solid var(--wl-tile-e);
  border-bottom-width: 2px; color: var(--wl-fg);
  transition: transform .12s, background .12s;
}
.wl-filters a:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--wl) 18%, var(--wl-tile)); }

/* --- tables / shared ----------------------------------------------------- */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* grid children default to min-width:auto — guard the sideways-scroll bug */
.with-rail > * { min-width: 0; }

.cardgrid .card { border-radius: var(--wl-r); }

/* --- touch targets ------------------------------------------------------- */
@media (pointer: coarse) {
  .wl-btn { min-height: 48px; width: 100%; }
  .wl-filters a { width: 2.75rem; height: 2.75rem; }
  .wl-grid a { min-height: 44px; align-items: center; }
  .wl-mini, .wl-opts select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-btn, .wl-grid a, .wl-filters a { transition: none; }
  .wl-btn:hover, .wl-grid a:hover, .wl-filters a:hover { transform: none; }
}