/* ==========================================================================
   Lazy Lion Studios — games.css
   Surfaces for the playable warm-ups in js/games.js.

   Each warm-up is dressed in its own game's palette rather than the studio's,
   the same way the static art panels wear each product's kit. The console
   screen is a window into the game, not a studio-branded frame around it.
   Load after site.css.
   ========================================================================== */

.mg-host {
  position:absolute; inset:0;
  container-type:size;
}

.mg {
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:10px;
  padding:14px 15px 12px;
  font-family:var(--body);
  text-align:left;
}

.mg__head { flex:none; display:flex; align-items:baseline; gap:9px; }
.mg__eyebrow {
  font-size:8.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
}
.mg__name { font-size:11.5px; font-weight:700; letter-spacing:.01em; }

.mg__stage {
  flex:1; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
}

.mg__foot {
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mg__msg {
  margin:0; min-width:0; flex:1;
  font-size:10.5px; line-height:1.35;
}
.mg__tools { flex:none; display:flex; align-items:center; gap:10px; }

/* in a narrow window the hint and the controls stop sharing a line */
@container (max-width:340px) {
  .mg__foot { flex-direction:column; align-items:flex-start; gap:8px; }
  .mg__msg { flex:none; }
}
.mg__score { font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.mg__reset {
  border:1px solid; background:transparent;
  font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border-radius:3px; cursor:pointer;
  transition:background-color .15s, color .15s, border-color .15s;
}

/* ==========================================================================
   Nudge — the game's paper world (paper ground, juniper ink)
   ========================================================================== */

/* lifted from the game's own :root in web/app/globals.css — keep them in step,
   the warm-up is meant to look like the thing it is a miniature of */
.mg--ws {
  --ws-oat:#f0ebe0;
  --ws-cream:#ffffff;
  --ws-coffee:#1c2a22;
  --ws-muted:#5b6660;
  --ws-line:#e6dfd0;
  --ws-line-strong:#d6cdba;
  --ws-sage:#5e7462;
  --ws-sage-ink:#fbf8f1;
  --ws-banked:#22352b;
  --ws-banked-ink:#a8bba8;
  --ws-copper:#a34d22;
  --ws-yellow:#d2ac46;
  --ws-yellow-soft:#f3dfa2;
  background:var(--ws-oat);
  color:var(--ws-coffee);
}
.mg--ws .mg__eyebrow { color:var(--ws-copper); }
.mg--ws .mg__name { color:var(--ws-coffee); }
.mg--ws .mg__msg { color:var(--ws-muted); }
.mg--ws .mg__score { color:var(--ws-sage); }
.mg--ws .mg__reset { border-color:var(--ws-line); color:var(--ws-muted); }
.mg--ws .mg__reset:hover { border-color:var(--ws-coffee); color:var(--ws-coffee); }

.ws-board {
  flex:none;
  display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr;
  gap:5px;
  width:min(100%,264px); aspect-ratio:1;
  width:min(264px, 96cqw, 54cqh);
}

.ws-tile {
  display:flex; align-items:center; justify-content:center;
  min-width:0; padding:0;
  border:1px solid var(--ws-line); border-radius:5px;
  background:var(--ws-cream);
  color:var(--ws-coffee);
  font-family:var(--body);
  font-size:clamp(11px,3.4cqw,17px); font-weight:700; letter-spacing:.02em;
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.ws-tile:hover:not(:disabled) { border-color:var(--ws-line-strong); background:var(--ws-cream); }

/* the two hint states the real board uses: a tile one move from home turns
   yellow, a tile already home turns sage */
.ws-tile.is-close {
  border-color:var(--ws-yellow); background:var(--ws-yellow-soft); color:var(--ws-coffee);
}
.ws-tile.is-home {
  border-color:var(--ws-sage); background:var(--ws-sage); color:var(--ws-sage-ink);
}
/* a banked row goes deep sage whole, the full game's fourth state. Two
   identical letters can sit in each other's home square — the word is right
   even though neither tile is — so the row state has to win over the
   per-tile one. */
.ws-tile.is-banked {
  border-color:var(--ws-banked); background:var(--ws-banked); color:var(--ws-banked-ink);
}
.ws-tile.is-selected {
  transform:scale(1.06);
  box-shadow:0 0 0 2px var(--ws-copper);
  border-color:var(--ws-copper);
}
.ws-tile:disabled { cursor:default; }
.ws-tile:focus-visible { outline:2px solid var(--ws-copper); outline-offset:2px; }

.ws-clues {
  flex:none; list-style:none; margin:0; padding:0;
  width:min(100%,320px);
  display:flex; flex-direction:column; gap:1px;
}
.ws-clue {
  display:flex; align-items:baseline; gap:8px;
  font-size:clamp(8.5px,2.4cqw,11px); line-height:1.45;
  color:var(--ws-muted);
}

/* status mark — the full game's checkmark, at this scale */
.ws-clue__mark {
  flex:none; width:1em; height:1em; align-self:center;
  display:grid; place-items:center;
  border:1px solid var(--ws-line); border-radius:50%;
  font-size:.72em; line-height:1; font-weight:800;
  color:transparent;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease;
}
.ws-clue.is-done .ws-clue__mark {
  border-color:var(--ws-sage); background:var(--ws-sage); color:var(--ws-sage-ink);
}

/* Answer column. Until the word is banked this is five blank slots drawn in
   CSS — the element holds no text, so the row stays quiet for screen readers
   and the answer drops in without shifting the clue beside it. */
/* inline-block, or an empty span collapses and takes the slots with it */
.ws-clue__word {
  flex:none; display:inline-block;
  width:5.4em; min-height:1.3em;
  font-weight:700; letter-spacing:.08em;
  color:var(--ws-sage);
  background-image:repeating-linear-gradient(90deg,var(--ws-line) 0 .74em,transparent .74em 1.08em);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:0 .92em;
}
.ws-clue.is-done .ws-clue__word {
  background-image:none;
  animation:wsAnswerIn .26s ease both;
}

/* The strike is transitioned in as a colour rather than drawn by a pseudo
   element, so it still breaks correctly if a clue ever wraps. */
.ws-clue__text {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:line-through;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  transition:color .22s ease, opacity .22s ease, text-decoration-color .3s ease;
}
.ws-clue.is-done .ws-clue__text {
  color:var(--ws-sage); opacity:.66;
  text-decoration-color:var(--ws-sage);
}

@keyframes wsAnswerIn {
  from { opacity:0; transform:translateY(-2px) }
  to   { opacity:1; transform:none }
}

.mg--ws[data-state="won"] .mg__msg { color:var(--ws-sage); font-weight:700; }

/* ==========================================================================
   Circles — the game's dark mode (slate ground, cream arcs)
   ========================================================================== */

.mg--ci {
  --ci-bg:#171c1e;
  --ci-ink:#e7eceb;
  --ci-muted:#9ca8aa;
  --ci-line:rgba(231,236,235,.14);
  --ci-line-strong:rgba(231,236,235,.3);
  --ci-accent:#cf776c;
  --ci-tone-1:#cf776c;
  --ci-tone-2:#c09a64;
  --ci-tone-3:#75a19b;
  --ci-tone-4:#9692ad;
  background:radial-gradient(120% 100% at 50% 42%,#1d2426 0%,var(--ci-bg) 100%);
  color:var(--ci-ink);
}
.mg--ci .mg__eyebrow { color:var(--ci-accent); }
.mg--ci .mg__msg { color:var(--ci-muted); }
.mg--ci .mg__score { color:var(--ci-muted); }
.mg--ci .mg__reset { border-color:var(--ci-line-strong); color:var(--ci-muted); }
.mg--ci .mg__reset:hover { border-color:var(--ci-ink); color:var(--ci-ink); }

.ci-board {
  flex:none; display:block;
  width:min(100%,340px); aspect-ratio:1;
  width:min(340px, 96cqw, 74cqh);
  overflow:visible;
}

.ci-guides circle { fill:none; stroke:var(--ci-line); stroke-width:1; }

.ci-ring { cursor:grab; transition:transform 190ms cubic-bezier(.16,1,.3,1); }
.ci-board.is-dragging .ci-ring { transition:none; }
.ci-ring:active { cursor:grabbing; }
.ci-ring:focus-visible { outline:none; }
.ci-ring:focus-visible .ci-arc { stroke:var(--ci-ink); stroke-width:11; opacity:1; }

.ci-hit { fill:none; stroke:transparent; stroke-width:36; }

.ci-arc {
  fill:none; stroke:var(--ci-ink); stroke-linecap:round; stroke-width:8;
  opacity:.82;
  transition:stroke 180ms ease, opacity 180ms ease, stroke-width 180ms ease;
}
.ci-ring:hover .ci-arc { opacity:1; }

.ci-port {
  stroke:#171c1e; stroke-width:2;
  transition:r 180ms ease, stroke-width 180ms ease;
}
.ci-port.ci-tone-1, .ci-join.ci-tone-1 { fill:var(--ci-tone-1); stroke-width:2; }
.ci-port.ci-tone-2, .ci-join.ci-tone-2 { fill:var(--ci-tone-2); }
.ci-port.ci-tone-3, .ci-join.ci-tone-3 { fill:var(--ci-tone-3); }
.ci-port.ci-tone-4, .ci-join.ci-tone-4 { fill:var(--ci-tone-4); }
.ci-port.is-linked { stroke:var(--ci-ink); stroke-width:3.5; }

/* the joined pair sits on one radial line — this is the segment that proves it */
.ci-join { stroke-linecap:round; stroke-width:7; }
.ci-join.ci-tone-1 { stroke:var(--ci-tone-1); }
.ci-join.ci-tone-2 { stroke:var(--ci-tone-2); }
.ci-join.ci-tone-3 { stroke:var(--ci-tone-3); }
.ci-join.ci-tone-4 { stroke:var(--ci-tone-4); }

.ci-hub { fill:var(--ci-line-strong); }
.ci-board.is-complete .ci-hub { fill:var(--ci-accent); }
.ci-board.is-complete .ci-arc { stroke:var(--ci-ink); opacity:1; }

.mg--ci[data-state="won"] .mg__msg { color:var(--ci-ink); font-weight:700; }

/* ==========================================================================
   Full size — the same engines on the game pages
   ========================================================================== */

.mg-host--full { position:relative; inset:auto; container-type:normal; }
.mg-host--full .mg { position:relative; inset:auto; padding:26px 28px 22px; gap:18px; }
.mg-host--full .mg__stage { gap:22px; }
.mg-host--full .mg__eyebrow { font-size:10px; }
.mg-host--full .mg__name { font-size:15px; }
.mg-host--full .mg__msg { font-size:13.5px; }
.mg-host--full .mg__score { font-size:10.5px; }
.mg-host--full .mg__reset { font-size:10.5px; padding:8px 13px; }

.mg-host--full .ws-board { width:min(100%,392px); gap:8px; }
.mg-host--full .ws-tile { font-size:25px; border-radius:7px; }
.mg-host--full .ws-clues { width:min(100%,420px); gap:5px; }
.mg-host--full .ws-clue { font-size:13px; }
.mg-host--full .ci-board { width:min(100%,440px); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
  .ws-tile, .ci-ring, .ci-arc, .ci-port { transition:none; }
  .ws-tile.is-selected { transform:none; }
  /* the banked state still lands, it just stops travelling to get there */
  .ws-clue__text, .ws-clue__mark { transition:none; }
  .ws-clue.is-done .ws-clue__word { animation:none; }
}