/* Dominos — app-specific overrides on top of motif.
 *
 * Load order (already wired in HTML):
 *   tokens → components → utilities → plex → app.css → families/pi
 *
 * Motif gives us the colour tokens, the .btn family, the Plex font
 * stack, the reset. This file owns:
 *   - landing page layout (level picker grid)
 *   - play page geometry (board area + side controls)
 *   - the legacy 2015 player needs $board.parent().width() / .height()
 *     to be non-zero rectangles, so .board-area is the load-bearing
 *     container; the SVG inside fills 100%/100% of it.
 */

/* ===========================================================
 * Shared shell
 * =========================================================== */

.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.muted { color: var(--color-neutral-500); }
.small { font-size: var(--text-sm); }

/* ===========================================================
 * Landing (/)
 * =========================================================== */

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}
.topnav .brand {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-primary-800);
  text-decoration: none;
}
.topnav-links a {
  color: var(--color-neutral-700);
  text-decoration: none;
  font-size: var(--text-sm);
}
.topnav-links a:hover { color: var(--color-primary-700); }

.landing {
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-6);
}
.landing h1 {
  font-family: var(--font-serif, var(--font-sans));
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-primary-800);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}

/* Visually hide but keep accessible for screen readers + crawlers. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-logo {
  display: block;
  /* Trimmed further — the wordmark is graphically heavy; lighter
   * presence lets the level grid below breathe. */
  max-width: min(22rem, 65vw);
  height: auto;
  margin: 0 auto var(--space-4);
}
.landing .lead {
  color: var(--color-neutral-600);
  font-size: 1.1rem;
  margin: 0 auto var(--space-6);
  max-width: 32rem;
}

.level-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-4);
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.level-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--color-primary-800);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem;
  border-radius: var(--radius-md, 0.5rem);
  transition: transform 150ms, box-shadow 150ms;
}
.level-tile svg {
  width: 4.5rem;
  height: 4.5rem;
  /* No drop-shadow: it offsets 2px down + 4px blur, which renders as
   * a gray fringe outside the tile's dark-green stroke — eye reads
   * that as "border is heavier on the bottom-right." Let the tile's
   * own stroke speak. Hover lift gives feedback instead. */
  transition: transform 150ms;
}
.level-tile:hover {
  transform: translateY(-2px);
}
.level-num {
  color: var(--color-primary-700);
}

.how {
  max-width: 38rem;
  margin: var(--space-8) auto 0;
  text-align: left;
}
.how h2 {
  font-size: 1.2rem;
  color: var(--color-primary-800);
  margin: 0 0 var(--space-2);
}
.how p {
  color: var(--color-neutral-700);
  margin: 0;
}

.site-foot {
  margin-top: var(--space-10);
  padding: var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
  text-align: center;
  color: var(--color-neutral-500);
  font-size: var(--text-sm);
}
.site-foot a {
  color: var(--color-primary-700);
  text-decoration: none;
}
.site-foot a:hover { text-decoration: underline; }

/* ===========================================================
 * Play page (/play.html)
 * ===========================================================
 *
 * Layout shape:
 *
 *   portrait                        landscape
 *   ------------                    -------------------------------
 *   [   play-top   ]                [          play-top           ]
 *   [ play-wrap     ]               [ play-wrap                   ]
 *   [   board-area  ]               [   board-area  |   side      ]
 *   [   side        ]               [               |             ]
 *   ------------                    -------------------------------
 *
 * The legacy player reads $board.parent().width()/.height() at init
 * and on resize → .board-area MUST have non-zero rectangular size
 * before initBoard runs, or tile geometry comes out NaN.
 */

html, body.play-body {
  height: 100%;
  margin: 0;
  background: var(--color-neutral-50);
}
body.play-body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* board owns its own scrolling, we don't want page-level */
}

.play-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  background: #fff;
}
.play-top .brand {
  color: var(--color-primary-800);
  text-decoration: none;
  font-weight: 600;
}
.play-top .brand:hover { color: var(--color-primary-600); }

.timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary-700);
  padding: 0.15rem 0.7rem;
  background: var(--color-primary-50);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-primary-100);
}

.solved-msg {
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  border: 1px solid var(--color-primary-300);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.2rem 0.7rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.play-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: var(--space-3);
  min-height: 0; /* allow flex children to actually shrink */
}

.board-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board {
  /* The player paints into the SVG inside #board and reads parent
   * dimensions at compute-time. width/height 100% lets it use the
   * full .board-area rectangle. */
  width: 100%;
  height: 100%;
}

.side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.controls, .mode-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* Override motif .btn defaults a touch so the row of game controls
 * stays compact on small viewports. Keep tokens. */
.controls .btn, .mode-group .btn {
  padding: 0.45rem 0.9rem;
}
.mode-group .btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: var(--text-sm);
}

/* ===========================================================
 * Landscape: board on left, controls in a side column
 * =========================================================== */

@media (orientation: landscape) {
  .play-wrap {
    flex-direction: row;
    align-items: stretch;
  }
  .board-area {
    /* Stretches to fill the rest of the row; .side takes a fixed
     * column width so the board gets the remainder. */
    min-width: 0;
  }
  .side {
    width: 10rem;
    justify-content: center;
  }
  .controls, .mode-group {
    flex-direction: column;
  }
}

/* ===========================================================
 * Tight mobile landscape: shrink the chrome so the board gets the
 * room. Targets phones held sideways (height < 600px).
 * =========================================================== */

@media (orientation: landscape) and (max-height: 600px) {
  .play-top {
    padding: 0.25rem 0.7rem;
    font-size: 0.9rem;
  }
  .timer {
    font-size: 1.05rem;
    padding: 0.1rem 0.5rem;
  }
  .play-wrap {
    padding: 0.3rem;
    gap: 0.5rem;
  }
  .side {
    width: 7.5rem;
  }
  .controls .btn, .mode-group .btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
  }
}

/* ===========================================================
 * Very small portrait phones: thinner padding too.
 * =========================================================== */

@media (orientation: portrait) and (max-width: 480px) {
  .play-top { padding: 0.4rem 0.6rem; }
  .play-wrap { padding: 0.5rem; gap: 0.5rem; }
  .controls .btn { padding: 0.4rem 0.6rem; font-size: 0.9rem; }
}

/* ===========================================================
 * Language toggle (nav, both pages)
 * =========================================================== */

.topnav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lang-toggle {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.4rem;
}
.lang-pick {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.15rem 0.55rem;
  color: var(--color-neutral-600);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.lang-pick:hover {
  border-color: var(--color-primary-500);
  color: var(--color-primary-700);
}
.lang-pick.active {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
}

/* ===========================================================
 * Solved banner — replaces the simpler .solved-msg span. Shows
 * the time + Replay + Different level buttons inline in the
 * top bar so the board stays visible underneath.
 * =========================================================== */

.solved-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  border: 1px solid var(--color-primary-300);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.2rem 0.6rem;
  font-weight: 600;
}
.solved-banner[hidden] { display: none; }
.solved-banner .solved-text {
  font-size: 0.95rem;
}
.solved-banner .btn-sm {
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
}

/* ===========================================================
 * Mode buttons (Tile / Bar / HL) are mobile-only — they only
 * change behaviour on touch input. Hide them on devices with
 * fine pointer + hover capability (typical desktop). Users
 * still see the underlying click-to-toggle behaviour normally.
 * =========================================================== */

@media (hover: hover) and (pointer: fine) {
  .mode-group { display: none; }
}

/* ===========================================================
 * Help page prose
 * =========================================================== */

.help {
  max-width: 42rem;
  padding: var(--space-6) var(--space-4) var(--space-8);
}
.help h1 {
  font-family: var(--font-serif, var(--font-sans));
  color: var(--color-primary-800);
  margin: 0 0 var(--space-4);
}
.help h2 {
  font-family: var(--font-serif, var(--font-sans));
  color: var(--color-primary-800);
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.3rem;
}
.help p, .help li {
  color: var(--color-neutral-700);
  line-height: 1.6;
}
.help .lead {
  font-size: 1.1rem;
}
.help .strategies, .help .ctl-list {
  padding-left: 1.2rem;
}
.help .strategies li, .help .ctl-list li {
  margin: var(--space-2) 0;
}
.help .cta-row {
  margin-top: var(--space-6);
}