/* ============================================================
   arena/games.css — B&B Arena game engine styles
   ============================================================
   Self-contained styles for the two in-page engines mounted by
   games.js (Daily Word + Groups), the shared zoom pill, buttons,
   and the toast. Mobile-first; boards fit a 375px viewport.

   PALETTE NOTE (intentional, do not "fix"): the gameplay colors
   deliberately do NOT mimic NYT's green/yellow word tiles or
   yellow/green/blue/purple group colors —
     correct-spot tile  → golden crust
     wrong-spot tile    → teal
     absent tile        → neutral gray
     group levels 0–3   → amber, rose, teal, violet
   All gameplay colors run through the --ag-* variables below.
   Variables are scoped to the game roots (not :root) so the
   arena app's own theme tokens never collide.
   ============================================================ */

.wd-wrap, .cn-wrap, .arc-toast, .cn-drag-clone {
  /* --- arena gameplay palette --- */
  --ag-correct:       #d9942b;   /* golden crust — right letter, right spot */
  --ag-correct-deep:  #b0741a;
  --ag-present:       #2e9e9b;   /* teal — right letter, wrong spot */
  --ag-absent:        #8b8f98;   /* neutral gray — letter not in the word */
  --ag-grp0:          #f2c266;   /* level 0 — amber */
  --ag-grp1:          #f0a0b2;   /* level 1 — rose */
  --ag-grp2:          #7fd0c5;   /* level 2 — teal */
  --ag-grp3:          #c4a5ec;   /* level 3 — violet */
  --ag-grp0-deep:     #b8821a;   /* ring/tag variants (hunch tags 1–4) */
  --ag-grp1-deep:     #cf5474;
  --ag-grp2-deep:     #1c8a7d;
  --ag-grp3-deep:     #8253c9;
  --ag-grp-ink:       #2b2b2b;   /* text on the pastel group bars */
  /* --- base theme tokens (same names the ported rules use) ---
     Trophy Club re-point: board chrome goes WALNUT, not green —
     green chrome could read as a teal 'present' hint. */
  --purple:       #5d4427;   /* board chrome = walnut (buttons, cursor ring, hint pulse) */
  --purple-deep:  #3e2d18;   /* text on --purple-soft ≈10:1 */
  --purple-soft:  #eadfc6;   /* parchment keys / hint banners */
  --mint-deep:    #8a5f06;   /* = arena --gold-text: definitions read native to the club */
  --bg:           #f3ebdb;
  --paper:        #fdfaf2;
  --ink:          #2b2013;
  --ink-soft:     #84715e;
  --shadow:       0 4px 14px rgba(43,32,19,.12);
  --font-display: 'Fraunces', 'Georgia', 'Cambria', serif;
}

@media (prefers-color-scheme: dark) {
  .wd-wrap, .cn-wrap, .arc-toast, .cn-drag-clone {
    --ag-correct:      #c8861d;
    --ag-correct-deep: #9c6712;
    --ag-present:      #28918e;
    --ag-absent:       #54504a;   /* warm — the slate blue-gray was the room's only cool leftover */
    --ag-grp0:         #d9a83e;
    --ag-grp1:         #d97f95;
    --ag-grp2:         #58b3a6;
    --ag-grp3:         #a684d9;
    --purple:       #8a6a3e;   /* tan-walnut; white .arc-btn text ≈4.9:1 */
    --purple-deep:  #e3cda4;   /* text on dark --purple-soft ≈8.7:1 */
    --purple-soft:  #352c1d;
    --mint-deep:    #e9b65c;   /* = arena dark --gold-text */
    --bg:           #181410;
    --paper:        #221c13;
    --ink:          #eee3cd;
    --ink-soft:     #a4937a;
    --shadow:       0 4px 14px rgba(0, 0, 0, 0.45);
  }
}

/* ---- base hygiene (the host page may not reset these) ---- */
.wd-wrap, .wd-wrap *, .cn-wrap, .cn-wrap *, .cn-drag-clone { box-sizing: border-box; }
.wd-wrap button, .cn-wrap button { font-family: inherit; }

/* ---- Buttons ---- */
.arc-btn {
  background: var(--purple); color: #fff; border: none; cursor: pointer;
  font-weight: 800; font-size: 0.9rem; padding: 0.6rem 1.3rem; border-radius: 999px;
  transition: transform 0.1s, filter 0.15s, opacity 0.15s;
}
.arc-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.arc-btn:active { transform: scale(0.96); }
.arc-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.arc-btn-ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--purple-soft); }
.arc-btn-ghost:hover { border-color: var(--purple); filter: none; }
.arc-btn-on { background: var(--purple); color: #fff; border-color: var(--purple); }   /* hard-mode toggle (on state) */
@media (hover: none) {
  .arc-btn:hover { transform: none; }
}

/* ---- Toast ---- */
.arc-toast {
  position: fixed; left: 50%; top: 18%; transform: translate(-50%, -8px);
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.9rem;
  padding: 0.6rem 1.1rem; border-radius: 10px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 200;
}
.arc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.arc-toast.good { background: #2f8f5b; color: #fff; }
.arc-toast.bad { background: #c0392b; color: #fff; }

/* ---- Zoom pill (shared by both games) ---- */
.zoom-bar { width: 100%; display: flex; justify-content: flex-end; margin: -0.2rem 0 -0.2rem; }
.zoom-pill { display: inline-flex; align-items: center; border: 1px solid var(--purple-soft);
  border-radius: 999px; overflow: hidden; background: var(--bg); }
.zoom-btn { border: none; background: transparent; color: var(--ink); font-size: 1.15rem;
  font-weight: 800; width: 34px; height: 30px; line-height: 1; cursor: pointer; }
.zoom-btn:hover:not(:disabled) { background: var(--purple-soft); }
.zoom-btn:disabled { opacity: 0.35; cursor: default; }
.zoom-val { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); min-width: 44px; text-align: center; }

/* Stop mobile double-tap-to-zoom on game taps (keeps pinch-zoom). */
.wd-wrap, .wd-grid, .wd-row, .wd-tile, .wd-kb, .wd-key, .zoom-btn,
.cn-wrap, .cn-grid { touch-action: manipulation; }

/* ============================================================
   Daily Word (wd-)
   ============================================================ */
.wd-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: 100%; max-width: 520px; margin: 0 auto; }
.wd-msg { min-height: 1.3em; font-weight: 700; color: var(--ink-soft); font-size: 0.92rem; text-align: center; }
.wd-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 7px; width: 100%; }
.wd-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.wd-tile {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: clamp(1.6rem, 9vw, 2.6rem); font-weight: 800; text-transform: uppercase;
  border: 2px solid var(--purple-soft); border-radius: 6px; color: var(--ink);
  background: var(--paper);
}
.wd-tile.wd-filled { border-color: var(--ink-soft); animation: wdPop 0.1s ease; }
/* Active row: tiles are tappable (move cursor / cycle / long-press to pin). */
.wd-row-active .wd-tile { cursor: pointer; transition: transform 0.05s, border-color 0.1s, box-shadow 0.1s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.wd-row-active .wd-tile:hover { border-color: var(--purple); }
.wd-row-active .wd-tile:active { transform: scale(0.94); }
/* Insertion point (the cell the keyboard types into) — scoped to the active
   row so a stale cursor class can't paint on a restored finished board. */
.wd-row-active .wd-tile.wd-cursor { border-color: var(--purple); box-shadow: inset 0 0 0 3px var(--purple-soft); }
/* Pinned "confident letter" — manually locked while you work the rest. */
.wd-tile.wd-locked { background: var(--ag-correct); border-color: var(--ag-correct-deep); color: #fff; cursor: default; }
.wd-tile.wd-locked::after { content: '📌'; position: absolute; top: 1px; right: 2px; font-size: 0.62rem; }
/* Blank placeholder — park an empty slot to visualize where a letter might go. */
.wd-tile.wd-blank { border-style: dashed; border-color: var(--ink-soft); background: var(--bg); }
.wd-tile.wd-blank::after { content: '·'; color: var(--ink-soft); font-size: 1.3rem; line-height: 0; }
@keyframes wdPop { 0% { transform: scale(0.9); } 100% { transform: scale(1); } }
.wd-reveal { animation: wdFlip 0.5s ease forwards; }
@keyframes wdFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
/* Result states — arena palette (NOT the NYT colors). */
.wd-correct { background: var(--ag-correct); border-color: var(--ag-correct); color: #fff; }
.wd-present { background: var(--ag-present); border-color: var(--ag-present); color: #fff; }
.wd-absent  { background: var(--ag-absent);  border-color: var(--ag-absent);  color: #fff; }
.wd-bounce { animation: wdBounce 0.5s ease; }
@keyframes wdBounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-22px); } 60% { transform: translateY(-8px); } }
.wd-shake { animation: wdShake 0.45s ease; }
@keyframes wdShake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(-5px)} 50%{transform:translateX(5px)} }

/* Keyboard */
.wd-kb { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wd-kbrow { display: flex; justify-content: center; gap: 5px; }
.wd-key {
  min-width: 30px; height: 54px; flex: 1; max-width: 52px;
  border: none; border-radius: 6px; background: var(--purple-soft); color: var(--ink);
  font-weight: 800; font-size: 1rem; cursor: pointer; text-transform: uppercase;
  transition: filter 0.1s, transform 0.05s;
}
.wd-key:hover { filter: brightness(0.95); }
.wd-key:active { transform: scale(0.94); }
.wd-key-wide { flex: 1.5; max-width: 66px; font-size: 1.05rem; }
.wd-key-enter { font-size: .66rem; letter-spacing: .03em; padding: 0 2px; } /* "ENTER" fits the wide key */
.wd-key.wd-correct { background: var(--ag-correct); color: #fff; }
.wd-key.wd-present { background: var(--ag-present); color: #fff; }
.wd-key.wd-absent  { background: var(--ag-absent);  color: #fff; }
/* Bottom row: two big buttons (blank + hide-gone) share the width equally. */
.wd-key-blank, .wd-key-filter { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; font-size: 0.9rem; }
.wd-key-hidden { display: none !important; }              /* letters removed by filter / manual hide */
.wd-key-on { background: var(--purple); color: #fff; }    /* filter active */
@media (max-width: 420px) { .wd-tile { font-size: clamp(1.4rem, 11vw, 1.9rem); } }

/* Actions row + gesture help */
.wd-actions { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; width: 100%; }
.wd-actions .arc-btn { font-size: 0.82rem; }
.wd-tips { width: 100%; max-width: 480px; margin: 0.5rem auto 0; font-size: 0.78rem;
  line-height: 1.45; color: var(--ink-soft); text-align: center; }
.wd-tips strong { color: var(--ink); font-weight: 700; }

/* Hint banner */
.wd-hint {
  width: 100%; max-width: 360px;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
  background: var(--purple-soft); color: var(--purple-deep);
  border-radius: 12px; padding: 0.5rem 0.7rem; font-weight: 800; font-size: 0.82rem;
}
.wd-hint[hidden] { display: none; }
.wd-hint-tag { white-space: nowrap; }
.wd-hint-row { display: inline-flex; gap: 4px; }
.wd-hint-tile {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; text-transform: uppercase;
  border: 1.5px dashed var(--purple); border-radius: 5px; color: var(--purple-deep); background: var(--paper);
}
.wd-hint-tile.wd-hint-on { background: var(--ag-correct); border-color: var(--ag-correct); border-style: solid; color: #fff; }
.wd-hint-cost { white-space: nowrap; font-weight: 700; opacity: 0.85; }

/* Definition shown after the game ends. */
.wd-def { width: 100%; max-width: 480px; margin: 0.2rem auto 0; padding: 0.7rem 0.9rem;
  border: 1px solid var(--purple-soft); border-radius: 10px; background: var(--bg);
  font-size: 0.92rem; line-height: 1.4; text-align: left; }
.wd-def[hidden] { display: none; }
.wd-def-word { font-family: var(--font-display); font-weight: 800; text-transform: capitalize; margin-right: 0.4rem; }
.wd-def-pos { font-style: italic; color: var(--ink-soft); margin-right: 0.4rem; }
.wd-def-text { color: var(--ink); }

/* ============================================================
   Groups (cn-)
   ============================================================ */
.cn-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; width: 100%; max-width: 624px; margin: 0 auto; }
.cn-msg { min-height: 1.2em; font-weight: 700; color: var(--ink-soft); font-size: 0.92rem; text-align: center; }
.cn-solved { display: flex; flex-direction: column; gap: 6px; width: 100%; }
/* solved groups read as enamel award ribbons (additive sheen only) */
.cn-solvedbar { border-radius: 10px; padding: 0.55rem 0.7rem; text-align: center; color: var(--ag-grp-ink); animation: cnDrop 0.35s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12); }
@keyframes cnDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.cn-solvedtitle { font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.4px; }
.cn-solvedwords { font-size: 0.92rem; margin-top: 1px; }
/* Group colors by difficulty level — amber / rose / teal / violet (NOT the NYT set). */
.cn-l0 { background: var(--ag-grp0); }
.cn-l1 { background: var(--ag-grp1); }
.cn-l2 { background: var(--ag-grp2); }
.cn-l3 { background: var(--ag-grp3); }
.cn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.cn-tile {
  aspect-ratio: 1.9; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  border: none; border-radius: 10px; cursor: pointer; padding: 4px;
  background: var(--bg); color: var(--ink);
  font-weight: 800; font-size: 1.05rem; text-transform: uppercase; line-height: 1.05;
  overflow-wrap: anywhere; word-break: break-word;
  transition: transform 0.08s, background 0.12s, color 0.12s;
}
.cn-tile.cn-long { font-size: 0.85rem; }
.cn-tile.cn-xlong { font-size: 0.66rem; letter-spacing: -0.2px; }
.cn-tile:hover { background: var(--purple-soft); }
.cn-tile.cn-sel { background: var(--ink-soft); color: var(--paper); transform: scale(0.95); }
.cn-tile.cn-shake { animation: wdShake 0.45s ease; }
@media (max-width: 640px) {
  /* sized so 6-8 letter words (below the .cn-long threshold) fit a 66px
     tile on ONE line — 0.92rem mid-word-broke five of sixteen real tiles */
  .cn-grid { gap: 6px; }
  .cn-tile { font-size: 0.78rem; }
  .cn-tile.cn-long { font-size: 0.6rem; letter-spacing: -0.2px; }
  .cn-tile.cn-xlong { font-size: 0.52rem; }
}
/* Tiles handle their own gestures (tap = select, drag = rearrange). */
.cn-tile { touch-action: none; }
.cn-tile.cn-dragging { opacity: 0.25; }
.cn-drag-clone { position: fixed; z-index: 9999; pointer-events: none; margin: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4); transform: scale(1.05); opacity: 0.95; }
/* Private color-tags (long-press to cycle) — a ring, so the word stays readable.
   Tags 1–4 mirror group levels 0–3: amber / rose / teal / violet. */
.cn-tile.cn-tag-1 { box-shadow: inset 0 0 0 3px var(--ag-grp0-deep); }
.cn-tile.cn-tag-2 { box-shadow: inset 0 0 0 3px var(--ag-grp1-deep); }
.cn-tile.cn-tag-3 { box-shadow: inset 0 0 0 3px var(--ag-grp2-deep); }
.cn-tile.cn-tag-4 { box-shadow: inset 0 0 0 3px var(--ag-grp3-deep); }
.cn-mistakes { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 700; }
.cn-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--ink-soft); display: inline-block; }
.cn-dot-used { background: var(--bg); border: 1px solid var(--ink-soft); }
.cn-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
/* Hint banner + anchor pulse */
.cn-hint {
  background: var(--purple-soft); color: var(--purple-deep);
  border-radius: 10px; padding: 0.5rem 0.85rem; width: 100%;
  font-weight: 700; font-size: 0.9rem; text-align: center;
}
.cn-hint[hidden] { display: none; }
.cn-hintpulse { box-shadow: 0 0 0 3px var(--purple); animation: cnHintPulse 0.6s ease 3; }
@keyframes cnHintPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* Word definition lookup panel */
.cn-define {
  width: 100%; background: var(--paper); border: 1px solid var(--purple-soft);
  border-radius: 12px; padding: 0.7rem 0.9rem; box-shadow: var(--shadow);
  text-align: left;
}
.cn-define[hidden] { display: none; }
.cn-define-word { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--purple-deep); margin-bottom: 0.35rem; }
.cn-define-body { font-size: 0.88rem; color: var(--ink); }
.cn-define-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.cn-define-list li { line-height: 1.35; }
.cn-pos { font-style: italic; color: var(--mint-deep); font-weight: 700; margin-right: 0.2rem; }
.cn-define-src { margin-top: 0.4rem; font-size: 0.72rem; color: var(--ink-soft); font-style: italic; }
/* Gesture hint */
.cn-tips { width: 100%; max-width: 600px; margin: 0.5rem auto 0; font-size: 0.76rem;
  line-height: 1.4; color: var(--ink-soft); text-align: center; }

/* ---- Touch & motion accommodations ---- */
@media (hover: none) {
  .wd-row-active .wd-tile:hover { border-color: var(--purple-soft); }
  .cn-tile:hover { background: var(--bg); }
  .cn-tile.cn-sel:hover { background: var(--ink-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-tile.wd-filled, .wd-reveal, .wd-bounce, .wd-shake,
  .cn-solvedbar, .cn-tile.cn-shake, .cn-hintpulse { animation: none; }
  .arc-btn, .wd-key, .cn-tile, .arc-toast { transition: none; }
}

/* Narrow phones: release the per-key min-width so all 10 QWERTY keys fit
   inside the card at 375px (min-width floors flex-shrink and overflowed). */
@media (max-width: 430px) {
  .wd-kbrow { gap: 3px; }
  .wd-key { min-width: 0; }
}

/* ============================================================
   Trophy Club visual-critique fixes (appended to win the cascade)
   ============================================================ */
/* Engraved brass: dark ink on the gold "correct" surfaces — white measured
   ~2.6:1 in light mode; this is arena.css's --on-gold treatment. */
.wd-correct, .wd-key.wd-correct, .wd-tile.wd-locked, .wd-hint-tile.wd-hint-on { color: #3a2706; }

@media (prefers-color-scheme: dark) {
  /* spent keys recede BELOW the parchment keys instead of jumping forward */
  .wd-key.wd-absent { background: #2a2520; color: #9b8d7a; }
  /* board chrome was melting into the card after hours — define the edges */
  .wd-tile { border-color: #463a26; }
  .cn-tile { box-shadow: inset 0 0 0 1px rgba(238,227,205,.07); }
  .arc-btn-ghost { border-color: #4a3c26; }
}