/* The Common Room — cozy.css
 * Only the bits Tailwind can't express cleanly: the golden-hour palette as CSS vars,
 * the paper grain, font wiring, group colours, and a few gentle keyframes.
 * Aesthetic target (§16.2A): cute · comforting · cozy · warm. Slice-of-life, golden hour. */

:root {
  /* base world */
  --paper:        #FAF4E9;   /* cream page */
  --paper-deep:   #F0E6D2;   /* shadowed cream */
  --ink:          #4A3B2A;   /* warm text */
  --ink-soft:     #8A765C;   /* muted text */
  --honey:        #E8A23D;   /* lamplight accent */
  --honey-deep:   #C9821F;
  --walnut:       #6B4A2B;
  --dusk:         #3E4A6B;   /* evening accent */

  /* the four group colours — muted, drawn from the warm world (not garish) */
  --g-sage:       #8FA67E;
  --g-terracotta: #C97B5A;
  --g-dusk:       #6E7BA6;
  --g-honey:      #D9A53C;

  --lamp-glow:    0 10px 30px -8px rgba(201, 130, 31, 0.35);
}

html, body { background: #130b05; color: var(--ink); }

/* the ROOM: a warm, dark café at night — candle/lamp glow blooming from the middle,
   deep shadow at the edges. The inviting "magical evening" atmosphere (§16). */
body {
  font-family: "Nunito", system-ui, sans-serif;
  background-image:
    radial-gradient(110% 90% at 50% 44%, rgba(255,198,112,.22), transparent 55%),
    radial-gradient(150% 130% at 50% 30%, #5a3d22 0%, #36240f 46%, #1d1108 78%, #130b05 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-attachment: fixed;
  min-height: 100vh;
}

.serif { font-family: "Fraunces", Georgia, serif; }

/* the atmospheric scene layer: hanging-lantern glow + drifting fireflies behind the panel */
.scene { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.lantern {
  position: absolute; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,201,120,.30) 0%, rgba(255,178,86,.12) 42%, transparent 70%);
  filter: blur(10px);
}
.firefly {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,228,158,.98) 0%, rgba(255,190,92,.5) 45%, transparent 72%);
  animation: twinkle var(--d,4s) ease-in-out infinite, drift var(--df,9s) ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes drift  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(7px,-12px); } }

/* the PANEL: a softly glowing, lightly translucent surface the puzzle floats on
   (replaces the opaque card — fireflies bloom through it, lit from within). */
.mat {
  border-radius: 1.6rem;
  background-color: rgba(249,242,228,.76);
  background-image:
    radial-gradient(90% 55% at 50% -6%, rgba(255,212,138,.55), transparent 72%),
    radial-gradient(120% 85% at 50% -8%, rgba(255,251,240,.92) 0%, rgba(248,238,221,.6) 52%, rgba(240,228,205,.5) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,237,201,.6);
  box-shadow:
    0 0 90px rgba(255,196,112,.34),
    0 28px 70px -18px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -40px 80px -30px rgba(120,70,20,.25) inset;
}
.mat::after {  /* a thin inner frame line, echoing the cards */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(107,74,43,.16); border-radius: 1.25rem;
}

/* decorative café-table props resting near the panel */
.prop { position: absolute; z-index: 20; pointer-events: none; filter: drop-shadow(0 5px 9px rgba(0,0,0,.55)); }

/* the host's voice — handwritten, personal, never UI copy (§16.1) */
.voice {
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--walnut);
}
.voice-lg { font-size: 1.7rem; }

/* board sizing: bound the square by the *height* left over after the fixed UI rows,
 * so the whole game fits one viewport with zero scrolling on any phone (§1: no friction). */
/* the board fits the largest square inside its flex-1 container (both width AND height),
 * so it auto-adapts to the coach line / solved rows / banner and never overlaps them.
 * 4 fixed row tracks keep tiles correctly sized as families leave the board. */
.board {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;   /* grid items default to min-height:auto; this lets max-height actually clamp on short screens */
  grid-template-rows: repeat(4, 1fr);
}

/* group colour helpers (applied by data attr) */
.grp-sage       { background: var(--g-sage); }
.grp-terracotta { background: var(--g-terracotta); }
.grp-dusk       { background: var(--g-dusk); }
.grp-honey      { background: var(--g-honey); }

/* small capstone link-chips: faint tinted fill + coloured text + ✓ (lighter than the solved bars) */
.cap-label      { border: 1px solid; background: #FFFDF8; }
.chip-sage       { color: #5f7a4e; border-color: var(--g-sage);       background: rgba(143,166,126,.14); }
.chip-terracotta { color: #a85638; border-color: var(--g-terracotta); background: rgba(201,123,90,.14); }
.chip-dusk       { color: #4a578a; border-color: var(--g-dusk);       background: rgba(110,123,166,.16); }
.chip-honey      { color: #9a7012; border-color: var(--g-honey);      background: rgba(217,165,60,.18); }

/* the playing-view candidate-link chips — same chip family as the capstone, warm-neutral
   (uncoloured, since the player hasn't found which group each belongs to yet) */
.link-chip       { color: var(--walnut); border-color: rgba(107,74,43,.22); background: rgba(232,162,61,.10); }
.link-chip:hover { background: rgba(232,162,61,.20); }
.link-chip.armed { color: var(--honey-deep); border-color: var(--honey); background: #FFF1D6; box-shadow: var(--lamp-glow); }
.link-chip.armed:hover { color: #fff; background: var(--honey); }

/* tiles */
.tile {
  background: #FFFDF8;
  border-radius: .7rem;
  box-shadow: 0 4px 9px -3px rgba(58,40,23,.40), 0 1px 0 rgba(255,255,255,.7) inset;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  user-select: none;
  position: relative;
}
/* long single words (MOZZARELLA, GORGONZOLA, multi-word capstone candidates)
 * wrap and break instead of clipping past the tile edge */
.tile, .cap-cell {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.tile::after {  /* thin inner frame — the "card" look */
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid rgba(107,74,43,.15); border-radius: .45rem;
}
.tile:hover  { transform: translateY(-2px); }
.tile.sel    { background: #FBE9CC; box-shadow: 0 11px 22px -7px rgba(201,130,31,.7); transform: translateY(-4px) scale(1.02); }
.tile.flash  { animation: flashTile 1.2s ease; }

@keyframes flashTile {
  0%, 100% { box-shadow: 0 2px 0 rgba(107,74,43,.10); }
  30%, 70% { box-shadow: 0 0 0 3px var(--flash-c, var(--honey)); transform: translateY(-2px); }
}

/* steam wisp for the arrival cup */
@keyframes steam {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  40%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-22px) scaleX(1.6); }
}
.steam span {
  display: block; width: 5px; height: 18px; margin: 0 3px;
  background: linear-gradient(to top, transparent, rgba(255,255,255,.9));
  border-radius: 50%;
  animation: steam 2.6s ease-in-out infinite;
}
.steam span:nth-child(2) { animation-delay: .6s; }
.steam span:nth-child(3) { animation-delay: 1.2s; }

/* capstone candidate cells start hidden; GSAP reveals them */
.cap-cell { transition: background .2s ease, color .2s ease, opacity .2s ease; }
.cap-cell.greyed { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.cap-cell.win    { background: var(--honey); color: #fff; }
.cap-cell.real   { box-shadow: 0 0 0 3px var(--honey), 0 0 22px 2px rgba(232,162,61,.6); }
.cap-cell.dimmed { opacity: .3; }

/* gentle screen entrance */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise-in { animation: riseIn .5s ease both; }

/* first-visit threshold: a warm lamplight blooming up as the door opens (§17) */
.threshold-glow {
  position: absolute; z-index: -1; border-radius: 50%;
  width: 64vw; height: 64vw; max-width: 320px; max-height: 320px;
  background: radial-gradient(circle, rgba(255,201,120,.55) 0%, rgba(255,178,86,.2) 42%, transparent 70%);
  filter: blur(18px);
  animation: glowUp 2.6s ease both;
}
@keyframes glowUp { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }