/* look.css: the Pomlings look for UI, shared by every page. See docs/art-direction.md.
   Everything is prefixed (--look-*, .look-*) so it never collides with a game's own styles;
   installation.js loads this file on every page, so it must stay free of global element rules. */
@import url("fonts/fonts.css");   /* Fraunces and Figtree, self-hosted (SIL OFL), so the walls work offline */

:root {
  /* neutrals */
  --look-ink: #2b2420; --look-ink-soft: #5b4e45; --look-bark: #4a3b32;
  --look-linen: #f3ece0; --look-cream: #fbf8f2; --look-paper: #e6dccb; --look-thread: #c9a15a;
  --look-night: #1d1916; --look-night-2: #2a2420; --look-night-line: #3d352f;
  /* the six elements, deep and light */
  --look-ember: #c0573a; --look-ember-l: #e8946a;
  --look-drip: #3d7393; --look-drip-l: #8fb9cc;
  --look-sprout: #6f8f45; --look-sprout-l: #a9bf7e;
  --look-rumble: #6f6a72; --look-rumble-l: #aaa49c;
  --look-twig: #86603f; --look-twig-l: #c39a6b;
  --look-puff: #9d95c4; --look-puff-l: #d9d4ea;
  /* type */
  --look-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --look-ui: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --look-soft: "SOFT" 100, "WONK" 0, "opsz" 72;
  /* sizes for a 4 m wall at 1920 px (1 px ≈ 2 mm): read from 3 to 6 m away */
  --look-t-hero: clamp(56px, 4.6vw, 120px);   /* wordmark, big moments */
  --look-t-title: clamp(40px, 3.1vw, 80px);   /* a game's title, results */
  --look-t-label: clamp(28px, 2.1vw, 54px);   /* place signs, buttons */
  --look-t-body: clamp(22px, 1.6vw, 40px);    /* hints, invitations */
  --look-t-small: clamp(16px, 1.05vw, 26px);  /* tags, captions; never smaller */
  --look-target: clamp(88px, 6.2vw, 160px);   /* smallest touch target (≈ 13 cm) */
  /* surfaces */
  --look-radius: 0.55em; --look-radius-lg: 28px;
  --look-shadow: 0 1px 2px rgba(43, 28, 18, 0.18), 0 6px 14px -4px rgba(43, 28, 18, 0.22), 0 18px 40px -12px rgba(43, 28, 18, 0.28);
  --look-shadow-lift: 0 2px 4px rgba(43, 28, 18, 0.16), 0 14px 26px -6px rgba(43, 28, 18, 0.26), 0 30px 60px -18px rgba(43, 28, 18, 0.32);
  /* motion */
  --look-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* out: things arriving, settling */
  --look-ease-io: cubic-bezier(0.65, 0, 0.35, 1);     /* in-out: things travelling */
  --look-ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);   /* in: things leaving */
  --look-spring: cubic-bezier(0.34, 1.45, 0.64, 1);   /* a small overshoot, for touch feedback only */
  --look-fast: 160ms; --look-mid: 320ms; --look-slow: 640ms; --look-calm: 1100ms;
}

/* ---------- type ---------- */
.look-title { font: 600 var(--look-t-title)/1.02 var(--look-display); font-variation-settings: var(--look-soft); letter-spacing: -0.012em; color: var(--look-ink); margin: 0; }
.look-label { font: 650 var(--look-t-label)/1.05 var(--look-ui); letter-spacing: 0.005em; color: var(--look-ink); }
.look-kicker { font: 700 var(--look-t-small)/1.2 var(--look-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--look-ink-soft); }
.look-on-dark { color: var(--look-cream); }

/* ---------- linen card (hints, results) ---------- */
.look-card { position: relative; padding: 0.9em 1.15em; border-radius: var(--look-radius-lg); color: var(--look-ink);
  font: 500 var(--look-t-body)/1.3 var(--look-ui);
  background: linear-gradient(180deg, #fbf8f2, #f1e9dc); box-shadow: var(--look-shadow); }
.look-card::before { content: ""; position: absolute; inset: 7px; border-radius: calc(var(--look-radius-lg) - 7px); pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--look-thread) 70%, transparent); }   /* one fine embroidered line */
.look-card .look-title { font-size: 1.5em; margin-bottom: 0.15em; }

/* ---------- buttons: round, big, quiet until touched ---------- */
.look-btn { position: relative; display: inline-grid; place-items: center; gap: 0.2em; min-width: var(--look-target); min-height: var(--look-target);
  padding: 0 0.9em; border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font: 650 var(--look-t-label)/1 var(--look-ui); color: var(--look-ink);
  background: radial-gradient(120% 90% at 35% 25%, #fffdf8, #efe6d8 70%); box-shadow: var(--look-shadow);
  transition: transform var(--look-mid) var(--look-spring), box-shadow var(--look-mid) var(--look-ease), opacity var(--look-mid) var(--look-ease); }
.look-btn svg { width: 0.95em; height: 0.95em; }
.look-btn:hover { box-shadow: var(--look-shadow-lift); }
.look-btn:active { transform: scale(0.94); transition-duration: var(--look-fast); }
.look-btn:focus-visible { outline: 3px solid var(--look-thread); outline-offset: 4px; }
.look-btn--round { padding: 0; width: var(--look-target); height: var(--look-target); }
.look-btn--accent { color: var(--look-cream); background: radial-gradient(120% 90% at 35% 25%, color-mix(in srgb, var(--look-c, var(--look-ember)) 80%, #fff), var(--look-c, var(--look-ember)) 70%); }
.look-btn--ghost { background: rgba(251, 248, 242, 0.14); color: var(--look-cream); box-shadow: inset 0 0 0 1.5px rgba(251, 248, 242, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- toast: a quiet line that arrives, says one thing, and leaves ---------- */
.look-toast { position: fixed; left: 50%; top: 5vh; z-index: 70; translate: -50% 0; padding: 0.55em 1.1em; border-radius: 999px; pointer-events: none;
  font: 600 var(--look-t-body)/1 var(--look-ui); color: var(--look-cream); background: rgba(29, 25, 22, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-10px); transition: opacity var(--look-mid) var(--look-ease), transform var(--look-slow) var(--look-ease); }
.look-toast.show { opacity: 1; transform: none; }

/* ---------- countdown bubble (idle return) ---------- */
.look-countdown { display: flex; align-items: center; gap: 0.55em; padding: 0.35em 1.1em 0.35em 0.35em; border-radius: 999px; color: var(--look-ink);
  font: 600 var(--look-t-body)/1 var(--look-ui); background: linear-gradient(180deg, #fbf8f2, #f0e8da); box-shadow: var(--look-shadow-lift); }
.look-countdown .ring { position: relative; width: 2.3em; height: 2.3em; flex: none; }
.look-countdown .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.look-countdown .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.05em/1 var(--look-display); font-variation-settings: var(--look-soft); font-variant-numeric: tabular-nums; }

/* ---------- small things ---------- */
.look-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.8em; border-radius: 999px; font: 650 var(--look-t-small)/1 var(--look-ui);
  color: var(--look-ink); background: var(--look-linen); box-shadow: 0 1px 0 rgba(43, 28, 18, 0.08); }
.look-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--look-c, var(--look-thread)); }

@media (prefers-reduced-motion: reduce) {
  .look-btn, .look-toast { transition-duration: 1ms; }
}