/* =============================================================
   Home page — sketchpad identity, layered on the shared dark palette.
   Layout: stacked sections with generous breathing room. Most visual
   personality comes from sketched frames + per-game chromatic tinting.
   ============================================================= */

.home {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

/* Skip-to-content — only visible when focused (keyboard). */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-md);
  font-weight: 600;
  z-index: 100;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--s-3); }

/* =============================================================
   Resume banner — sits above the hero when the visitor has a
   stored room code. Sketched indigo outline keeps it on-brand.
   ============================================================= */
.resume-banner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-lg);
  background: rgba(99, 102, 241, 0.08);
  position: relative;
  isolation: isolate;
}
/* The class above sets `display: flex`, which would otherwise outrank
   the user-agent `[hidden] { display: none }` rule and leak an empty
   indigo card while no rooms exist in localStorage. Force it back. */
.resume-banner[hidden] { display: none; }
.resume-banner__body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.resume-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(99, 102, 241, 0.18);
  color: var(--primary-hover);
  flex-shrink: 0;
}
.resume-banner code {
  font-family: var(--font-mono);
  background: rgba(255, 180, 84, 0.12);
  color: var(--accent);
  padding: 1px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
}
.resume-banner__cta { white-space: nowrap; padding: 8px 14px; font-size: var(--t-sm); }
.resume-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--dur-base) var(--ease-out);
}
.resume-banner__dismiss:hover { color: var(--text); }
@media (max-width: 640px) {
  .resume-banner { flex-wrap: wrap; }
  .resume-banner__body { width: 100%; }
}

/* =============================================================
   Hero — left meta column + right canvas stage.
   ============================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5) 0;
}
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}

.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.hero-meta .brand-row { gap: var(--s-4); }
.hero-meta .wordmark-underline {
  max-width: 220px;
  margin: 0;
  height: 12px;
}
.hero-meta .tagline {
  font-size: var(--t-lg);
  margin-top: var(--s-3);
  min-height: 1.6em;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hero-meta .tagline.fading { opacity: 0; }

/* Hero index card — three short copy lines, each "drawn in" with a
   handwritten font and an SVG rule that animates via stroke-dasharray. */
.hero-card {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 30px,
      rgba(255, 180, 84, 0.06) 30px 31px
    ),
    rgba(28, 31, 46, 0.35);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  max-width: 360px;
  transform: rotate(-0.6deg);
}
.hero-card__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.hero-card__line.is-visible { opacity: 1; transform: none; }
.hero-card__text {
  font-family: 'Caveat', var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--text);
}
.hero-card__rule {
  width: 70%;
  height: 8px;
  color: var(--accent);
  align-self: flex-start;
}
.hero-card__line[data-line="2"] .hero-card__rule { color: var(--primary-hover); width: 80%; }
.hero-card__line[data-line="3"] .hero-card__rule { color: var(--accent-2); width: 65%; }
.hero-card__line.is-visible .hero-card__rule path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: rule-draw 720ms var(--ease-out) 220ms forwards;
}
.hero-card__line .hero-card__rule path.rule-pulse {
  animation: rule-draw 720ms var(--ease-out) forwards;
}
@keyframes rule-draw {
  to { stroke-dashoffset: 0; }
}

/* Sketchpad stage holding the live canvas. The .frame--sketch::before
   pseudo from shared/style.css draws the wobble outline; we just need a
   ruled-paper background underneath. */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.04) 26px 27px
    ),
    var(--panel-elev);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-canvas--user {
  opacity: 0;
  pointer-events: none;
  /* Faint paper tint while idle — only visible in user mode. */
}
body.user-doodling .hero-canvas--user {
  opacity: 1;
  pointer-events: auto;
  cursor: crosshair;
}
body.user-doodling #hero-canvas { opacity: 0.18; }
body.user-doodling .hero-overlay__label::after {
  content: " (esc to stop)";
  color: var(--text-soft);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
}

.hero-overlay {
  position: absolute;
  bottom: var(--s-3);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.hero-overlay__label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-soft);
}
.hero-overlay__word {
  font-family: var(--font-mono);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--text);
  text-transform: uppercase;
  transition: color var(--dur-base) var(--ease-out);
}
.hero-overlay__word--done { color: var(--accent); }

/* Pen button in the hero corner — gives the visitor an obvious entry
   into "your turn" doodle mode. Hidden until the canvas has rendered. */
.hero-pen {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 2px solid var(--accent);
  background: rgba(28, 31, 46, 0.7);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  cursor: pointer;
  filter: url(#gh-wobble);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  z-index: 2;
}
.hero-pen:hover {
  transform: rotate(-1.5deg) translateY(-1px);
  background: rgba(255, 180, 84, 0.12);
}
.hero-pen:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 180, 84, 0.36);
}
.hero-pen__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.user-doodling .hero-pen { display: none; }

/* =============================================================
   Game grid + cards
   ============================================================= */
.game-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 700px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.game-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: rgba(22, 24, 36, 0.6);
  border-radius: var(--r-lg);
  color: var(--text);
  text-decoration: none;
  min-height: 132px;
  position: relative;
  overflow: hidden;
  transform: translateY(12px) rotate(0deg);
  opacity: 0;
  animation: card-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--stagger, 0) * 110ms);
  transition:
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@keyframes card-in {
  0%   { opacity: 0; transform: translateY(12px) rotate(-1.5deg); }
  60%  { opacity: 1; transform: translateY(-2px) rotate(0.4deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.game-card:hover {
  transform: translate(-1px, -3px) rotate(-0.4deg);
  background: rgba(28, 31, 46, 0.85);
  color: var(--text);
}
.game-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 180, 84, 0.36);
}
.game-card.frame--sketch:hover::before { filter: url(#gh-wobble-strong); }

.game-card__glyph {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.game-card__doodle {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 10px rgba(255, 180, 84, 0.28));
}
.game-card__emoji {
  font-size: 32px;
  line-height: 1;
}

.game-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.game-card__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
}
.game-card__desc {
  color: var(--text-muted);
  font-size: var(--t-sm);
}

.game-card__arrow {
  color: var(--text-soft);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.game-card:hover .game-card__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.game-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-1);
}

/* Pills — extra variants for live activity counts. Pulse dot subtly
   communicates "this is real-time data". */
.pill--muted {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
  padding: 0;
}
.pill--live {
  background: rgba(63, 185, 80, 0.12);
  color: var(--good);
  border-color: rgba(63, 185, 80, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5);
  animation: pulse-dot 1.6s var(--ease-out) infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); }
}

/* ----- Per-game preview pieces ----- */

/* Skribble: a tiny canvas. Sized to fit the glyph slot. */
.game-card__preview {
  width: 80px;
  height: 80px;
}

/* Codenames: 5x5 mini-grid that flashes on hover. */
.cn-grid {
  width: 80px;
  height: 80px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
  padding: 2px;
}
.cn-cell {
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--dur-base) var(--ease-out);
}
.cn-cell--r { --color: rgba(248, 81, 73, 0.85); }
.cn-cell--b { --color: rgba(99, 102, 241, 0.9); }
.cn-cell--n { --color: rgba(176, 168, 144, 0.6); }
.cn-cell--a { --color: rgba(15, 16, 22, 0.95); }
.cn-grid--sweep .cn-cell {
  animation: cn-flash 1100ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 30ms);
}
@keyframes cn-flash {
  0%   { background: rgba(255, 255, 255, 0.06); transform: scale(1); }
  35%  { background: var(--color); transform: scale(1.08); }
  100% { background: var(--color); transform: scale(1); }
}

/* Werewolf: night sky with rising moon + crouched wolf silhouette. */
.ww-stage {
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, #0d1326 0%, #1a1c3e 65%, #0a0e1a 100%);
}
.ww-moon {
  position: absolute;
  left: 50%;
  bottom: -50%;
  transform: translateX(-50%) translateY(0);
  color: #ffe9b0;
  filter: drop-shadow(0 0 8px rgba(255, 233, 176, 0.55));
  transition: bottom 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ww-wolf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #1a1c3e;
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}
.ww-stage--rising .ww-moon {
  bottom: 30%;
  transform: translateX(-50%) translateY(-4px);
}
.ww-stage--rising .ww-wolf { color: #050810; }

/* ----- Per-card chromatic body tint ----- */
/* Hovering a card sets body[data-tint]. body::before's two radial spotlights
   animate their tone toward that game's accent. Reverts on leave. */
body::before {
  transition: background 420ms var(--ease-out);
}
body[data-tint="amber"]::before {
  background:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(255, 180, 84, 0.28), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 110%, rgba(255, 138, 61, 0.22), transparent 60%);
}
body[data-tint="redblue"]::before {
  background:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(248, 81, 73, 0.22), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 110%, rgba(99, 102, 241, 0.22), transparent 60%);
}
body[data-tint="indigo"]::before {
  background:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(99, 102, 241, 0.32), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 110%, rgba(20, 24, 60, 0.5), transparent 60%);
}

/* =============================================================
   Coming-soon teaser + skeleton placeholders
   ============================================================= */
.game-card--soon {
  cursor: default;
  transform: rotate(-1.5deg);
  background: rgba(22, 24, 36, 0.35);
}
.game-card--soon:hover {
  transform: rotate(-1.5deg);
  background: rgba(22, 24, 36, 0.45);
}
.game-card--soon .game-card__doodle { opacity: 0.55; }
.game-card--soon .game-card__title { color: var(--text-muted); font-weight: 600; }
.game-card--soon .game-card__desc { color: var(--text-soft); }

.game-card--skeleton {
  pointer-events: none;
  opacity: 0.7;
}
.skeleton-bar {
  display: block;
  height: 12px;
  border-radius: var(--r-sm);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
.skeleton-bar--title { width: 50%; height: 18px; margin-bottom: 6px; }
.skeleton-bar--desc  { width: 92%; height: 12px; margin-bottom: 6px; }
.skeleton-bar--meta  { width: 35%; height: 10px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================
   Konami doodle storm
   ============================================================= */
.doodle-storm {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  overflow: hidden;
}
.doodle-storm__bit {
  position: absolute;
  top: -120px;
  display: block;
  filter: url(#gh-wobble);
  animation-name: doodle-fall;
  animation-timing-function: cubic-bezier(0.4, 0.05, 0.6, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes doodle-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(110vh) rotate(var(--rot, 30deg)); }
}

/* =============================================================
   Reduced motion overrides — the global block in shared/style.css
   sets durations to 0.01ms; we additionally hide ambient motion
   that shouldn't degrade gracefully into "still but missing".
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .game-card { opacity: 1; transform: none; animation: none; }
  .hero-card__line { opacity: 1; transform: none; }
  .doodle-storm { display: none; }
}