/* Bearcrab — neutral graphite clubhouse, mobile-first */

:root {
  --bg: #101214;
  --surface: #16191c;
  --surface-2: #1b1f23;
  --line: #262c31;
  --line-strong: #39424a;
  --text: #eceef0;
  --sub: #97a2ac;         /* muted blue-gray */
  --faint: #66707a;
  --red: #d4553f;         /* restrained vermilion */
  --red-dim: #a04435;
  --green: #7fae62;       /* restrained fresh lime */
  --green-dim: #5d8549;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100svh;
}

::selection { background: var(--line-strong); }

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 40;
  background: var(--text); color: var(--bg);
  padding: .55rem 1.1rem; border-radius: .4rem; font-weight: 600;
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

#field {
  position: fixed; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
}

.frame {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column;
  max-width: 1080px; margin: 0 auto;
  padding: 1.5rem 1.4rem;
}

/* ---- Header ---- */
.top { text-align: center; padding: clamp(2rem, 6vh, 4.5rem) 0 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.9rem); letter-spacing: -.01em;
}
.emoji-mark {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1.4vw, 2.2rem);
  line-height: 1;
}
.tagline {
  margin-top: .55rem;
  color: var(--sub); font-size: clamp(.95rem, .88rem + .35vw, 1.12rem); font-weight: 400;
}

/* ---- Doors ---- */
.doors {
  flex: 1;
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 3rem 0;
  width: 100%;
}

.door {
  position: relative;
  display: flex; align-items: center; gap: 1.15rem;
  width: 100%; max-width: 480px;
  padding: 1.5rem 1.5rem 1.5rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition:
    transform .18s cubic-bezier(.3,.7,.3,1),
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .2s ease;
}
.door-glyph { line-height: 0; flex-shrink: 0; }
.g-dim { fill: var(--line-strong); }
.g-accent-red   { fill: var(--red-dim);  stroke: var(--red-dim);  transition: fill .18s ease, stroke .18s ease; }
.g-accent-green { fill: var(--green-dim); stroke: var(--green-dim); transition: fill .18s ease, stroke .18s ease; }

.door-body { display: grid; gap: .3rem; min-width: 0; }
.door-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -.01em;
}
.door-copy { color: var(--sub); font-size: .95rem; }
.door-open {
  margin-top: .55rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 500; color: var(--faint);
  transition: color .18s ease;
}
.door-open svg { transition: transform .18s ease; }

/* per-door accents */
.door-watchlog:hover .g-accent-red,
.door-watchlog:focus-visible .g-accent-red { fill: var(--red); stroke: var(--red); }
.door-watchlog:hover .door-open,
.door-watchlog:focus-visible .door-open { color: var(--red); }
.door-pantry:hover .g-accent-green,
.door-pantry:focus-visible .g-accent-green { fill: var(--green); stroke: var(--green); }
.door-pantry:hover .door-open,
.door-pantry:focus-visible .door-open { color: var(--green); }

@media (hover: hover) {
  .door:hover {
    transform: translateY(-2px);
    background: var(--surface-2);
    border-color: var(--line-strong);
    box-shadow: 0 14px 34px -18px rgba(0,0,0,.8);
  }
  .door-watchlog:hover { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); }
  .door-pantry:hover   { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); }
  .door:hover .door-open svg { transform: translateX(.2rem); }
}
.door:active { transform: translateY(0) scale(.99); }
.door:focus-visible { outline-offset: 4px; }

/* ---- Footer ---- */
.foot {
  padding: 1.5rem 0 .75rem;
  text-align: center;
  color: var(--faint); font-size: .85rem;
}

/* ---- Desktop composition: side-by-side doorways, full-screen feel ---- */
@media (min-width: 720px) and (min-height: 560px) {
  .doors {
    grid-template-columns: repeat(2, minmax(300px, 420px));
    gap: 1.5rem;
    align-content: center;
  }
  .top { padding-top: clamp(2.5rem, 8vh, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .door:hover { transform: none; }
}