/* emoji.css — The Emoji Game site chrome + board.
 * Builds on gamekit.css design tokens (mobile-first, auto dark mode via
 * prefers-color-scheme, reduced motion honored by gamekit). Overrides the
 * gamekit accent to a warm amber for the emoji brand.
 */

:root {
  --gk-accent: #e0912f;
  --gk-accent-strong: #b9701c;
  --gk-accent-contrast: #ffffff;
  --gk-accent-soft: #fbecd2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gk-accent: #f4b942;
    --gk-accent-strong: #ffcf6b;
    --gk-accent-contrast: #2a1c05;
    --gk-accent-soft: #3a2d10;
  }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gk-bg);
  color: var(--gk-ink);
  font-family: var(--gk-font-sans);
  font-size: var(--gk-fs-md);
  line-height: 1.55;
  min-height: 100dvh;
}

.wrap {
  width: 100%;
  max-width: var(--gk-maxw);
  margin: 0 auto;
  padding: 0 var(--gk-space-4);
}

a { color: var(--gk-accent-strong); }
h1, h2, h3 { font-family: var(--gk-font-display); line-height: 1.2; }
h1 { font-size: var(--gk-fs-2xl); margin: 0 0 var(--gk-space-3); }
h2 { font-size: var(--gk-fs-xl); margin: var(--gk-space-6) 0 var(--gk-space-3); }
.muted { color: var(--gk-ink-soft); }
.small { font-size: var(--gk-fs-sm); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gk-accent);
  color: var(--gk-accent-contrast);
  padding: var(--gk-space-2) var(--gk-space-3);
  border-radius: var(--gk-radius-sm);
  z-index: 2000;
}
.skip-link:focus { left: var(--gk-space-3); top: var(--gk-space-3); }

/* ----- buttons (site variants layered on gk tokens) ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gk-space-2);
  min-height: var(--gk-tap);
  padding: 10px 18px;
  border: 1px solid var(--gk-line-strong);
  border-radius: var(--gk-radius);
  font: inherit;
  font-weight: 600;
  color: var(--gk-ink);
  background: var(--gk-surface);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--gk-transition-fast), border-color var(--gk-transition-fast), transform var(--gk-transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--gk-accent); outline-offset: 2px; }
.btn-primary { background: var(--gk-accent); color: var(--gk-accent-contrast); border-color: var(--gk-accent); }
.btn-primary:hover { background: var(--gk-accent-strong); border-color: var(--gk-accent-strong); }
.btn-ghost { color: var(--gk-accent-strong); }
.btn-ghost:hover { background: var(--gk-accent-soft); }

/* ----- header / nav ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--gk-surface) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--gk-line);
  padding-top: env(safe-area-inset-top);
}
.header-inner { display: flex; align-items: center; gap: var(--gk-space-3); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: var(--gk-space-2); font-weight: 800; text-decoration: none; color: var(--gk-ink); }
.brand-mark { font-size: 1.4rem; }
.brand-name { font-family: var(--gk-font-display); font-size: var(--gk-fs-lg); }
.site-nav { display: none; margin-left: auto; gap: var(--gk-space-1); }
.site-nav a { padding: 8px 10px; border-radius: var(--gk-radius-sm); text-decoration: none; color: var(--gk-ink-soft); font-weight: 600; font-size: var(--gk-fs-sm); }
.site-nav a:hover { background: var(--gk-surface-2); color: var(--gk-ink); }
.site-nav a.active { color: var(--gk-accent-strong); }
.header-account { margin-left: var(--gk-space-2); }
.nav-toggle { margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: var(--gk-tap); height: var(--gk-tap); background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 22px; margin: 0 auto; background: var(--gk-ink); border-radius: 2px; }
.site-header.nav-open .site-nav {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--gk-surface);
  border-bottom: 1px solid var(--gk-line);
  padding: var(--gk-space-2) var(--gk-space-4) var(--gk-space-4);
}

@media (min-width: 800px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; }
}

/* ----- sections ----- */
main { display: block; padding-bottom: var(--gk-space-7); }
.hero { padding: var(--gk-space-6) var(--gk-space-4) var(--gk-space-3); text-align: center; }
.hero-sub { font-size: var(--gk-fs-lg); color: var(--gk-ink-soft); max-width: 640px; margin: 0 auto; }
.play-section { padding-top: var(--gk-space-4); }
.play-head { text-align: center; margin-bottom: var(--gk-space-4); }
.play-links { text-align: center; color: var(--gk-ink-soft); margin-top: var(--gk-space-4); }
.copy-section { max-width: 760px; margin: var(--gk-space-5) auto 0; }
.copy-section.slim { margin-top: var(--gk-space-6); }
.section-lead { color: var(--gk-ink-soft); }
.cta-section { text-align: center; margin-top: var(--gk-space-6); }
.cta-line { display: flex; flex-wrap: wrap; gap: var(--gk-space-3); justify-content: center; margin-top: var(--gk-space-4); }
.feature-list, .how-steps, .tier-list { padding-left: var(--gk-space-5); }
.feature-list li, .how-steps li, .tier-list li { margin-bottom: var(--gk-space-2); }
.tier-list { list-style: none; padding-left: 0; }
.tier-list .tier-emoji { font-size: 1.3rem; margin-right: var(--gk-space-2); }

/* ----- FAQ ----- */
.faq-section { max-width: 760px; margin: var(--gk-space-6) auto 0; }
.faq-item { border: 1px solid var(--gk-line); border-radius: var(--gk-radius); padding: var(--gk-space-3) var(--gk-space-4); margin-bottom: var(--gk-space-3); background: var(--gk-surface); }
.faq-item summary { font-weight: 700; cursor: pointer; }
.faq-answer { color: var(--gk-ink-soft); margin-top: var(--gk-space-2); }

/* ----- comparison table ----- */
.table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; margin: var(--gk-space-3) 0; }
.compare-table th, .compare-table td { border: 1px solid var(--gk-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--gk-surface-2); }
.disclaimer { font-size: var(--gk-fs-sm); color: var(--gk-ink-soft); background: var(--gk-surface-2); border-radius: var(--gk-radius); padding: var(--gk-space-3); }

/* ----- archive + library lists ----- */
.archive-list, .library-grid { list-style: none; padding: 0; display: grid; gap: var(--gk-space-2); grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.archive-list a, .library-num { display: block; text-align: center; padding: 10px; border: 1px solid var(--gk-line); border-radius: var(--gk-radius-sm); background: var(--gk-surface); text-decoration: none; font-weight: 600; color: var(--gk-ink); }
.archive-list a:hover, .library-num:hover { background: var(--gk-accent-soft); }
.archive-nav { display: flex; flex-wrap: wrap; gap: var(--gk-space-3); justify-content: center; margin-top: var(--gk-space-4); }

/* ----- the board ----- */
.emoji-game {
  max-width: 640px;
  margin: 0 auto;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius-lg);
  box-shadow: var(--gk-shadow);
  padding: var(--gk-space-4);
}
.eg-toolbar { display: flex; justify-content: space-around; gap: var(--gk-space-3); padding-bottom: var(--gk-space-3); border-bottom: 1px solid var(--gk-line); }
.eg-stat { display: flex; flex-direction: column; align-items: center; }
.eg-stat-label { font-size: var(--gk-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gk-ink-soft); }
.eg-stat-val { font-size: var(--gk-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }

.eg-phrases { display: flex; flex-direction: column; gap: var(--gk-space-4); padding: var(--gk-space-4) 0; }
.eg-phrase { text-align: center; }
.eg-phrase-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 3px; }
.eg-word { display: inline-flex; align-items: flex-end; gap: 4px 3px; }
.eg-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.9em;
  padding: 0 2px;
  font-size: clamp(1.1rem, 5.5vw, 1.7rem);
  font-weight: 700;
  font-family: var(--gk-font-display);
  text-transform: uppercase;
  border: 0;
  background: none;
  color: var(--gk-ink);
}
.eg-tile--fixed { color: var(--gk-ink); }
.eg-tile--blank {
  position: relative;
  border-bottom: 3px solid var(--gk-line-strong);
  border-radius: 3px;
  cursor: pointer;
  color: transparent;
  -webkit-tap-highlight-color: transparent;
}
/* Extend each blank's tap/drop target across the inter-tile flex gaps. Adjacent
 * tiles of one slot map to the same slot, so overlapping hit areas are harmless. */
.eg-tile--blank::after { content: ""; position: absolute; inset: -8px -4px; }
.eg-tile--blank:hover { border-bottom-color: var(--gk-accent); }
.eg-tile--blank:focus-visible { outline: 3px solid var(--gk-accent); outline-offset: 2px; }
/* Soft whole-slot affordance shown on open slots while a chip is selected;
 * weaker than .target (active drag hover) so hover still reads as stronger. */
.eg-tile.candidate { background: var(--gk-accent-soft); border-bottom-color: var(--gk-accent); }
.eg-tile.target { background: var(--gk-accent-soft); border-bottom-color: var(--gk-accent-strong); }
.eg-tile--filled { color: var(--gk-accent-contrast); background: var(--gk-accent); border-radius: 6px; border-bottom: 3px solid var(--gk-accent-strong); }
.eg-space { width: 0.6em; }

.eg-clue-btn { margin-top: var(--gk-space-2); border: 1px dashed var(--gk-line-strong); background: none; color: var(--gk-ink-soft); border-radius: var(--gk-radius-pill); padding: 4px 12px; font: inherit; font-size: var(--gk-fs-sm); cursor: pointer; min-height: 34px; }
.eg-clue-btn:hover { background: var(--gk-surface-2); }
.eg-clue-btn.used { opacity: 0.6; cursor: default; }
.eg-clue-text { margin: var(--gk-space-2) auto 0; max-width: 40ch; color: var(--gk-ink-soft); font-style: italic; }

.eg-traywrap { border-top: 1px solid var(--gk-line); padding-top: var(--gk-space-3); }
.eg-tray-label { text-align: center; font-size: var(--gk-fs-sm); color: var(--gk-ink-soft); margin: 0 0 var(--gk-space-3); }
.eg-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gk-space-2); }
.eg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  padding: 0 10px;
  font-size: 1.8rem;
  line-height: 1;
  border: 2px solid var(--gk-line-strong);
  border-radius: var(--gk-radius);
  background: var(--gk-surface-2);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--gk-transition-fast), border-color var(--gk-transition-fast), box-shadow var(--gk-transition-fast);
}
.eg-chip:hover { border-color: var(--gk-accent); }
.eg-chip:focus-visible { outline: 3px solid var(--gk-accent); outline-offset: 2px; }
.eg-chip.selected { border-color: var(--gk-accent-strong); box-shadow: 0 0 0 3px var(--gk-accent-soft); transform: translateY(-2px); }
.eg-chip.dragging { opacity: 0.35; }
.eg-chip.placed { display: none; }

.eg-drag-ghost {
  position: fixed;
  z-index: 1500;
  transform: translate(-50%, -50%) scale(1.15);
  font-size: 2rem;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}

.eg-actions { display: flex; justify-content: center; margin-top: var(--gk-space-4); }
.eg-announce { text-align: center; min-height: 1.3em; margin: var(--gk-space-2) 0 0; color: var(--gk-ink-soft); font-size: var(--gk-fs-sm); }
.eg-noscript { text-align: center; color: var(--gk-ink-soft); }

/* pop + shake feedback */
@keyframes eg-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.eg-tile.pop { animation: eg-pop 0.32s ease; }
@keyframes eg-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.eg-chip.shake, .eg-tile.shake { animation: eg-shake 0.36s ease; }

/* ----- win overlay ----- */
.eg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gk-space-4);
  padding-bottom: calc(var(--gk-space-4) + env(safe-area-inset-bottom));
  background: rgba(8, 20, 19, 0.55);
}
.eg-overlay[hidden] { display: none; }
.eg-overlay-card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 2 * var(--gk-space-4));
  overflow-y: auto;
  background: var(--gk-surface);
  border-radius: var(--gk-radius-lg);
  box-shadow: var(--gk-shadow-lg);
  padding: var(--gk-space-5);
  text-align: center;
}
.eg-overlay-close {
  position: sticky; top: -16px; float: right;
  margin: -16px -14px 0 0;
  border: 0; background: none;
  font-size: 1.5rem; line-height: 1;
  color: var(--gk-ink-soft); cursor: pointer;
  min-width: var(--gk-tap); min-height: var(--gk-tap);
  z-index: 1;
}
.eg-tier-emoji { font-size: 3.4rem; }
.eg-overlay-sub { color: var(--gk-ink-soft); margin-top: 0; }
.eg-overlay-stats { display: flex; justify-content: center; gap: var(--gk-space-5); margin: var(--gk-space-4) 0; }
.eg-overlay-stats dt { font-size: var(--gk-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gk-ink-soft); }
.eg-overlay-stats dd { margin: 4px 0 0; font-size: var(--gk-fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.eg-overlay-actions { display: flex; flex-wrap: wrap; gap: var(--gk-space-3); justify-content: center; margin-top: var(--gk-space-4); }
/* .btn's inline-flex would override the UA [hidden] rule; keep the next-link
 * truly invisible until the overlay wiring assigns it a destination. */
.eg-overlay-actions [data-role="next-link"][hidden] { display: none; }
.eg-lb-panel { margin-top: var(--gk-space-4); text-align: left; border-top: 1px solid var(--gk-line); padding-top: var(--gk-space-3); }
.eg-lb-title { margin: 0 0 var(--gk-space-2); font-size: var(--gk-fs-lg); }
.eg-lb-signin { display: flex; align-items: center; gap: var(--gk-space-2); flex-wrap: wrap; font-size: var(--gk-fs-sm); color: var(--gk-ink-soft); margin: 0 0 var(--gk-space-3); }
.eg-share-status { min-height: 1.2em; margin: var(--gk-space-3) 0 0; color: var(--gk-ok); font-size: var(--gk-fs-sm); }

/* ----- leaderboard page ----- */
.lb-page { max-width: 560px; margin: var(--gk-space-4) 0; }
.lb-controls { margin-bottom: var(--gk-space-4); }
.lb-date-field { font-weight: 600; color: var(--gk-ink-soft); display: inline-flex; flex-direction: column; gap: 4px; font-size: var(--gk-fs-sm); }
.lb-date { min-height: var(--gk-tap); padding: 8px 12px; border: 1px solid var(--gk-line-strong); border-radius: var(--gk-radius-sm); background: var(--gk-surface); color: var(--gk-ink); font: inherit; }
.lb-list { border: 1px solid var(--gk-line); border-radius: var(--gk-radius); padding: var(--gk-space-3); background: var(--gk-surface); }

/* ----- footer ----- */
.site-footer { border-top: 1px solid var(--gk-line); background: var(--gk-surface); margin-top: var(--gk-space-7); padding: var(--gk-space-6) 0 calc(var(--gk-space-6) + env(safe-area-inset-bottom)); }
.footer-cols { display: grid; gap: var(--gk-space-5); grid-template-columns: repeat(2, 1fr); }
.footer-col h2 { font-size: var(--gk-fs-md); margin: 0 0 var(--gk-space-2); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--gk-space-1); }
.footer-col a { color: var(--gk-ink-soft); text-decoration: none; font-size: var(--gk-fs-sm); }
.footer-col a:hover { color: var(--gk-accent-strong); }
.footer-note { color: var(--gk-ink-soft); font-size: var(--gk-fs-xs); margin-top: var(--gk-space-5); }

@media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }

/* ----- desktop side rail ----- */
@media (min-width: 1024px) {
  .play-section {
    display: grid;
    grid-template-columns: 1fr minmax(0, 640px) 1fr;
    align-items: start;
    gap: var(--gk-space-4);
  }
  .play-section > .play-head { grid-column: 1 / -1; }
  .play-section > .emoji-game { grid-column: 2; }
  .play-section > .play-links,
  .play-section > .game-controls-extra,
  .play-section > .archive-nav { grid-column: 2; }
}

.game-controls-extra { display: flex; flex-wrap: wrap; gap: var(--gk-space-3); justify-content: center; margin-top: var(--gk-space-4); }

/* ----- mobile: compact the game page into one viewport, tray sticky-bottom ----- */
@media (max-width: 699px) {
  /* Render the board first visually (heading drops below it) without changing
   * DOM order or SEO — the h1/intro stay in the source before the board. */
  .play-section { display: flex; flex-direction: column; order: -1; }
  .play-section > .play-head { order: 2; margin-top: var(--gk-space-4); }
  /* The home page also has a marketing .hero section above .play-section; on
   * mobile it would push the board's lower phrases below the fold, so float the
   * play section to the top of <main> (order:-1 above) and let the hero/copy
   * follow. DOM order is unchanged (SEO intact) — this is a visual reorder. */
  main { display: flex; flex-direction: column; }

  .eg-phrases { gap: var(--gk-space-3); padding: var(--gk-space-3) 0; }
  .eg-clue-btn { min-height: 28px; padding: 2px 10px; }
  .eg-chip { min-width: 48px; height: 48px; font-size: 1.5rem; }
  .eg-tray-label { display: none; }
  .eg-toolbar { padding-bottom: var(--gk-space-2); }

  /* Sticky-bottom inside the .emoji-game card pins the tray to the viewport
   * bottom while the card extends below the fold; negative margins span the
   * card's full width (card has padding var(--gk-space-4)). It settles into its
   * natural position, above the Reveal button, once scrolled to the bottom. */
  .eg-traywrap {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: var(--gk-surface);
    margin: 0 calc(-1 * var(--gk-space-4));
    padding: var(--gk-space-2) var(--gk-space-4) calc(var(--gk-space-2) + env(safe-area-inset-bottom));
  }

  /* ----- fullscreen: mobile-only tight sizing -----
   * gamekit-fullscreen.js adds html.gk-fs-tight when the board overflows its
   * fullscreen height; these chip/tile sizes only make sense on phones, so they
   * stay inside the mobile media query. The tight-tier LAYOUT rules live in the
   * media-independent block below so desktop fullscreen can compact too. */
  html.gk-fullscreen.gk-fs-tight .eg-chip { min-width: 40px; height: 40px; font-size: 1.3rem; }
  html.gk-fullscreen.gk-fs-tight .eg-tile { font-size: clamp(0.95rem, 4.5vw, 1.4rem); }
  html.gk-fullscreen.gk-fs-tight .eg-clue-btn { min-height: 24px; padding: 0 8px; font-size: var(--gk-fs-xs); }
}

/* ----- fullscreen board layout (emoji-specific, media-independent) -----
 * The generic fullscreen shell (scroll lock, chrome hide outside .play-section,
 * main height above the Ezoic anchor) lives in gamekit.css. These rules lay out
 * the emoji board inside .play-section and apply at every viewport so desktop
 * fullscreen works too. Keyed off html.gk-fullscreen, so exiting restores the
 * normal page with no per-element cleanup. .emoji-game and .eg-phrases both
 * carry data-gk-fs-fit; gamekit-fullscreen.js measures every such element and
 * goes tight if any of them overflows, so a deep phrase list that fits inside
 * .emoji-game's own box (a blind zone for a single-element check) still
 * engages the tight tier. */
html.gk-fullscreen .emoji-game { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.gk-fullscreen .eg-phrases { flex: 1; min-height: 0; justify-content: space-evenly; overflow-y: auto; }
/* Sticky is pointless once scrolling is locked; static keeps the tray in the
 * card's fixed-height flex flow, with the Reveal action visible below it. */
html.gk-fullscreen .eg-traywrap { position: static; }
html.gk-fullscreen .eg-actions { margin-top: var(--gk-space-2); }
html.gk-fullscreen .eg-announce { min-height: 0; margin-top: 0; }
/* Hide the non-board children of .play-section (play-head, copy, links, etc.);
 * the generic gamekit rule already hides everything in <main> outside
 * .play-section. .ezoicad is emoji's in-flow ad slot. */
html.gk-fullscreen .play-section > *:not(.emoji-game) { display: none; }
html.gk-fullscreen .ezoicad { display: none; }
/* Tight tier LAYOUT: compact spacing so the board fits short screens.
 * .eg-phrases also carries data-gk-fs-fit (see parts.html) and needs the
 * roomy rule's overflow-y:auto above to be a real scroll container — a flex
 * item with overflow:visible reports scrollHeight === clientHeight in most
 * engines (nothing to scroll), which would hide overflow from
 * gamekit-fullscreen.js's fit check even on very short/narrow screens. The
 * safety scroll here only engages if even the tight layout still overflows,
 * so no blank is ever unreachable. flex-start (not space-evenly) keeps an
 * overflowing list's top reachable. */
html.gk-fullscreen.gk-fs-tight .eg-phrases { gap: var(--gk-space-2); padding: var(--gk-space-2) 0; justify-content: flex-start; overflow-y: auto; }
html.gk-fullscreen.gk-fs-tight .eg-toolbar { padding-bottom: 4px; }
html.gk-fullscreen.gk-fs-tight .eg-stat-val { font-size: var(--gk-fs-md); }
html.gk-fullscreen.gk-fs-tight .eg-actions { margin-top: 4px; }
html.gk-fullscreen.gk-fs-tight .eg-actions .btn { min-height: 34px; padding: 4px 14px; font-size: var(--gk-fs-sm); }
html.gk-fullscreen.gk-fs-tight .eg-traywrap { padding-top: var(--gk-space-2); }