/* veryimportantmeeting.com home page (2026-10-01), laid out like the jackboxgames.com/games catalog.
   Direction contract at the top of site/index.html. */
:root {
  --night: #161a21;
  --night-2: #1d222b;
  --panel: #262c37;
  --panel-2: #2f3642;
  --line: #3a4250;
  --text: #e8eaee;
  --muted: #a3a9b5;
  --coral: #f0554a;
  --coral-soft: rgba(240, 85, 74, .16);
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(1rem, 3.2vw, 2.5rem);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #4a5262 var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1f27 0, #161a21 38%, #11141a 72%, #000 100%) fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
::selection { background: var(--coral); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--coral); color: #fff; font-weight: 700; text-decoration: none; border-radius: 6px; }
.skip:focus { top: 1rem; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .8rem max(var(--gutter), env(safe-area-inset-right), calc((100% - 1340px) / 2 + var(--gutter))) .8rem max(var(--gutter), env(safe-area-inset-left), calc((100% - 1340px) / 2 + var(--gutter)));
  background: linear-gradient(180deg, rgba(14, 16, 21, .96), rgba(14, 16, 21, .82));
  backdrop-filter: blur(10px);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex: none;
  font-weight: 900; font-style: italic; font-stretch: 78%; text-transform: uppercase; font-size: .98rem; line-height: .92; letter-spacing: .01em;
}
.brand svg { width: 2rem; height: 2rem; }
.nav-links { display: flex; gap: clamp(.9rem, 2.4vw, 1.8rem); }
.nav-links a {
  position: relative; padding: .5rem 0; text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--text);
  transition: color .15s;
}
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--coral); border-radius: 2px;
}

main { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 4rem; }

/* ---------------------------------------------------------------- notice strip */
.notice {
  display: flex; align-items: center; gap: .9rem; margin: .9rem 0 0;
  padding: .7rem 1rem; border-radius: 8px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: .92rem;
  transition: border-color .2s, background-color .2s;
}
.notice b { font-weight: 800; }
.notice-icon { width: 1.8rem; height: 1.8rem; flex: none; }
.notice-arrow { width: 1.4rem; height: 1.4rem; margin-left: auto; flex: none; color: var(--muted); transition: translate .3s var(--ease), color .2s; }
.notice:hover { border-color: #566073; background: var(--panel-2); }
.notice:hover .notice-arrow { translate: 4px 0; color: var(--text); }

/* ---------------------------------------------------------------- title row + Twitch */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin: 1.8rem 0 1.1rem; }
h1 {
  margin: 0; font-weight: 900; font-style: italic; font-stretch: 72%; text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: .9; letter-spacing: -.005em;
}
.lede { margin: .75rem 0 0; max-width: 38rem; color: var(--muted); font-size: 1rem; line-height: 1.45; text-wrap: pretty; } /* the Learn page's one line under its title */
.streamers { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.streamers-label {
  margin: 0; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.streamers-label svg { width: 1.1rem; height: 1.1rem; color: #a970ff; }
.streamers-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .45rem; }
.streamers-list a {
  position: relative; display: block; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  border: 3px solid #fff; overflow: hidden; background: var(--panel);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
  transition: transform .3s var(--ease);
}
.streamers-list a:hover { transform: translateY(-3px) scale(1.06); }
.streamers-list img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- filters */
.filters { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; margin: 0 0 .5rem; }
.fmore { display: contents; }
.filters .fsearch { order: 2; }
.filters .fclear { order: 3; }
.ftoggle {
  display: none; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.ftoggle svg { width: 1.15rem; height: 1.15rem; }
.ftoggle[aria-expanded="true"] { border-color: #59637a; background: var(--panel-2); }
.fbadge { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--coral); color: #fff; font-size: .72rem; }
.fsel { position: relative; flex: 1 1 11rem; max-width: 15rem; display: flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; transition: border-color .15s; }
.fsel:hover, .fsel:focus-within { border-color: #59637a; }
.fsel label { padding-left: .85rem; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.fsel label::after { content: ":"; }
.fsel select {
  appearance: none; flex: 1; min-width: 0; height: 2.75rem; padding: 0 2.2rem 0 .35rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23e8eaee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .75rem center / 1rem no-repeat;
  border: 0; color: var(--text); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.fsel select:focus-visible { outline: none; }
.fsel:has(select:focus-visible) { outline: 2px solid var(--coral); outline-offset: 2px; }
.fsel select option { background: var(--panel); color: var(--text); }
.fsel.is-set { border-color: var(--coral); background: linear-gradient(var(--coral-soft), var(--coral-soft)), var(--panel); }
.fsearch {
  flex: 2 1 15rem; display: flex; align-items: center; gap: .5rem; padding: 0 .85rem;
  background: var(--panel); border: 1px solid var(--line); border-bottom: 2px solid #59637a; border-radius: 6px;
}
.fsearch svg { width: 1.1rem; height: 1.1rem; color: var(--muted); flex: none; }
.fsearch input { flex: 1; min-width: 0; height: 2.65rem; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .9rem; }
.fsearch input::placeholder { color: #8890a0; }
.fsearch input:focus { outline: none; }
.fsearch:focus-within { border-bottom-color: var(--coral); }
.fsearch input::-webkit-search-cancel-button { filter: invert(.8); }
.fclear {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: 0 1.1rem;
  background: transparent; color: var(--text); border: 1px solid #6a7386; border-radius: 6px;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.fclear svg { width: 1rem; height: 1rem; }
.fclear:hover { background: rgba(255, 255, 255, .06); border-color: #9aa2b2; }
.result-count { min-height: 1.3em; margin: 0 0 .9rem; font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------- tiles */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 15px; }
.tile { margin: 0; }
.tile-link {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 6px; background: var(--panel); text-decoration: none; color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 22px -14px rgba(0, 0, 0, .9);
  isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease), filter .4s; }
.tile-link::before { /* a vignette so the title always reads over busy art */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(75% 70% at 50% 52%, rgba(6, 8, 12, .62), rgba(6, 8, 12, .2) 70%, rgba(6, 8, 12, .05));
  transition: opacity .4s;
}
.tile-title {
  padding: 0 1rem; text-align: center; line-height: .95; text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 4px 18px rgba(0, 0, 0, .65);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  transition: transform .45s var(--ease);
}
.tile-link:hover, .tile-link:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 22px 36px -18px rgba(0, 0, 0, .95); }
.tile-link:hover img, .tile-link:focus-visible img { transform: scale(1.06); }
.tile-link:hover::before, .tile-link:focus-visible::before { opacity: .75; }
.tile-link:hover .tile-title, .tile-link:focus-visible .tile-title { transform: scale(1.05); }
.tile-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.tile-live { position: absolute !important; right: .5rem; top: .5rem; }
/* "New content" ribbon (2026-10-04): a sash across the top-left corner of a tile whose game changed in the
   last 7 days. Sized in em from its own font size so it scales with the tile; the tile's overflow clips its
   ends. The band's centre sits on the corner diagonal at 3.1em in from each edge (left = 3.1 - width/2,
   top = 3.1 - height/2), which leaves room for the words even before Archivo loads. */
.tile-ribbon {
  position: absolute; z-index: 1; top: 2.15em; left: -3.4em; width: 13em;
  padding: .48em 0 .42em; transform: rotate(-45deg);
  background: var(--coral); color: var(--night); text-align: center; white-space: nowrap; pointer-events: none;
  font-family: var(--sans); font-weight: 900; font-style: italic; font-stretch: 72%; text-transform: uppercase;
  font-size: clamp(.56rem, .78vw, .74rem); line-height: 1; letter-spacing: .03em;
  border-block: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .7);
}

/* each game's own lettering */
.t-rumor { font-family: var(--sans); font-weight: 900; font-style: italic; font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 3rem); color: #f6bccb; letter-spacing: -.005em; }
.t-hold { font-family: "Lilita One", var(--sans); color: #fff3cf; letter-spacing: .01em; -webkit-text-stroke: 1.5px #2b4a1f; paint-order: stroke fill; }
.t-ldef { font-family: "Lilita One", var(--sans); color: #f2b631; letter-spacing: .01em; -webkit-text-stroke: 2px #2a1d14; paint-order: stroke fill; text-shadow: 0 3px 0 #2a1d14; }
.t-coin { font-family: "Jacquard 24", serif; color: #f2c14e; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.t-snake { font-family: "Grenze Gotisch", var(--sans); font-weight: 900; color: #f0c868; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: .01em; text-shadow: 0 3px 0 #0d0b16, 0 0 18px rgba(123, 211, 137, .35); }
.t-war { font-family: "Cinzel", Georgia, serif; font-weight: 900; color: #e9c66c; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: .04em; text-shadow: 0 3px 0 #7c6127, 0 6px 0 #12100c, 0 0 20px rgba(0, 0, 0, .5); }
.t-pyre { font-family: "Silkscreen", var(--sans); font-weight: 700; text-transform: uppercase; color: #ffb35c; font-size: clamp(1.35rem, 2.3vw, 2.1rem); letter-spacing: .02em; -webkit-text-stroke: 1.5px #2a1206; paint-order: stroke fill; text-shadow: 0 0 18px rgba(255, 120, 40, .45); }
.t-homerow { font-family: "Jersey 10", var(--sans); color: #f2c14e; font-size: clamp(2.2rem, 3.8vw, 3.4rem); text-shadow: 0 3px 0 #3a2408; }
.t-query { font-family: "Silkscreen", var(--sans); font-weight: 700; text-transform: uppercase; color: #dcd7f4; font-size: clamp(1.35rem, 2.3vw, 2.1rem); letter-spacing: .02em; -webkit-text-stroke: 1.5px #1c1633; paint-order: stroke fill; }
.t-sealed { font-family: "IM Fell English SC", serif; color: #e8bf62; font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1; text-shadow: 0 3px 0 #2a1806, 0 0 20px rgba(232, 191, 98, .35); }
.t-king { font-family: "IM Fell English", serif; font-style: italic; color: #f1dfb0; }
.t-frenzy { font-family: "Jersey 10", var(--sans); color: #fff7e4; font-size: clamp(2rem, 3.5vw, 3.1rem); letter-spacing: .02em; }
.t-keep { font-family: "Pirata One", serif; color: #ffd766; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.t-hills { font-family: "Old Standard TT", Georgia, serif; font-weight: 700; text-transform: uppercase; color: #eaede4; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: .09em; line-height: 1; -webkit-text-stroke: 1px #1e2226; paint-order: stroke fill; text-shadow: 0 3px 0 #1e2226, 0 0 22px rgba(20, 24, 28, .8); }
.t-hills small { display: block; font-size: .5em; letter-spacing: .3em; margin-top: .25em; }
.t-realms { font-family: "IM Fell English SC", serif; color: #f6e2ae; -webkit-text-stroke: 1px #3a2a14; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 22px rgba(20, 12, 4, .9); }

.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.empty p { margin: 0 0 1rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------- footer */
.foot { width: 100%; max-width: 1340px; margin: 0 auto; padding: 2.5rem max(var(--gutter), env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom)); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.2rem 3rem; padding-bottom: 1.4rem; border-bottom: 1px solid #3c4352; }
.brand--foot { font-size: .9rem; }
.foot-about { margin: 0; max-width: 34rem; color: var(--muted); font-size: .88rem; }
.foot-about a { color: var(--text); text-underline-offset: .2em; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-top: 1.1rem; font-size: .8rem; color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.legal-links a { color: #8d94a2; text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .filters { flex-wrap: nowrap; }
  .filters .fsearch { order: 0; flex: 1 1 0; min-width: 0; }
  .ftoggle { display: inline-flex; flex: none; }
  .fmore { display: none; }
  .filters.is-open { flex-wrap: wrap; }
  .filters.is-open .fmore { display: flex; flex-direction: column; gap: .5rem; flex-basis: 100%; }
  .fsel { max-width: none; flex: none; }
  .fclear { flex: none; }
  .tile-title { font-size: clamp(1.05rem, 4.6vw, 1.6rem); padding: 0 .5rem; }
  .t-rumor, .t-coin, .t-frenzy { font-size: clamp(1.3rem, 6vw, 2rem); }
  .t-query, .t-pyre { font-size: clamp(1rem, 4.4vw, 1.5rem); }
  .t-keep { font-size: clamp(1.2rem, 5.4vw, 1.8rem); }
  .t-hills { font-size: clamp(1.15rem, 5vw, 1.7rem); }
  .streamers { align-items: flex-start; }
}
@media (max-width: 520px) {
  .nav { gap: .9rem; }
  .nav .brand span { display: none; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .9rem; }
  .notice { font-size: .85rem; }
  .ftoggle { padding: 0 .8rem; }
}
@media (max-width: 380px) { .nav-links { gap: .8rem; } .nav-links a { font-size: .86rem; } } /* four nav links on the narrowest phones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}