/* The hive layer: honeycomb, bees, honey. From Paul's Apiary design (his design library),
   adapted so the comb speaks the game's three round colours — amber, blue and purple
   honey — rather than amber alone.

   The rule this whole file lives under: the hive is AROUND the game, never inside the
   chart. Colour on a chart is data; nothing here may compete with it. So the comb and the
   bees belong to the start and results screens, and the chart panel stays plain paper. */

:root {
  --f-disp: 'Fredoka', 'Avenir Next Rounded', 'Arial Rounded MT Bold', sans-serif;
  --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'IBM Plex Mono', Menlo, Consolas, monospace;
  --wall: #E3BE6B;
  --wax-light: #F7DFA3;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --hexclip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
@media (prefers-color-scheme: dark) {
  :root { --wall: #4A3920; --wax-light: #5E4827; }
  /* Light wax on near-black was the loudest thing on the screen; smoked wax instead. */
  .cell--capped::before {
    background: radial-gradient(circle at 46% 38%, #5E4827 0%, #4C3A1F 62%, #3E2F19 100%) !important; }
  .comb--built .cell { opacity: .42; }
}

/* ---------- comb engine (Apiary) ---------- */
.comb { position: relative; }
.comb-field { position: absolute; inset: -40px; z-index: 0; overflow: hidden;
  --hexw: clamp(56px, 12vw, 92px); pointer-events: none; }
/* Faded under the content: the comb is a setting, not a thing to read. */
.comb-field::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, var(--bg) 35%, transparent 80%); }
.cell {
  --wt: clamp(3px, calc(var(--hexw, 96px) * 0.032), 9px);
  position: absolute;
  width: var(--hexw, 96px);
  height: calc(var(--hexw, 96px) * 1.1547);
  clip-path: var(--hexclip);
  background: var(--wall);
  opacity: 0;
  transform: scale(0.55);
  transition: transform 640ms var(--ease-pop), opacity 480ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.comb--built .cell { opacity: .55; transform: scale(1); }
.cell::before {
  content: ''; position: absolute; inset: var(--wt);
  clip-path: var(--hexclip);
  background: var(--bg);
  opacity: 0;
  transition: opacity 560ms var(--ease-out) calc(var(--d, 0ms) + 300ms);
}
.comb--built .cell::before { opacity: 1; }
.cell--capped::before {
  background: radial-gradient(circle at 46% 38%, var(--wax-light) 0%, #EDC873 62%, #DDB158 100%);
}
/* open cells: honey, in one of the three round colours */
.cell--open::before {
  background: radial-gradient(circle at 50% 41%,
    #5E3708 0%, #8A5514 34%, #C87F12 62%, #E89B16 80%, #F2BE45 97%);
}
.cell--open.blue::before {
  background: radial-gradient(circle at 50% 41%,
    #0A213E 0%, #164A80 34%, #2A7CB8 62%, #5DA1CE 80%, #9CC6E0 97%);
}
.cell--open.purple::before {
  background: radial-gradient(circle at 50% 41%,
    #26113A 0%, #522A76 34%, #8652AC 62%, #A775C8 80%, #C9A7DE 97%);
}
.cell--open::after {
  content: ''; position: absolute; inset: var(--wt); clip-path: var(--hexclip);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.38) 0%, rgba(255, 244, 214, 0) 34%);
  opacity: 0;
  transition: opacity 560ms var(--ease-out) calc(var(--d, 0ms) + 300ms);
}
.comb--built .cell--open::after { opacity: 1; }
.cell--empty { background: color-mix(in srgb, var(--wall) 62%, var(--bg)); }
.cell--ghost { background: color-mix(in srgb, var(--wall) 34%, var(--bg)); }

/* The bees fly BETWEEN the comb and the content: over the honeycomb, under every card,
   chart and button. Over the top, they crossed the showcase chart and the Play button
   in the first playthrough — decoration must never sit on something being read. */
#bees { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1;
  pointer-events: none; }
body[data-screen="game"] #bees { display: none; }

/* ---------- logo: a cluster with one empty cell that fills ---------- */
.hexlogo { display: block; margin: 0 auto; width: 76px; height: 76px; overflow: visible; }
.hexlogo .wall { fill: var(--wall); }
.hexlogo .wax { fill: #EDC873; }
.hexlogo .h-amber { fill: #DE8F0A; }
.hexlogo .h-blue { fill: #2A7CB8; }
.hexlogo .h-purple { fill: #8652AC; }
.hexlogo .hole { fill: var(--bg); }
.hexlogo .pour { fill: #16C172; transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0); animation: pour 1.1s var(--ease-out) 900ms forwards; }
.hexlogo g.c { transform-box: fill-box; transform-origin: center; opacity: 0;
  transform: scale(.5); animation: cellpop .6s var(--ease-pop) forwards;
  animation-delay: var(--d, 0ms); }
@keyframes cellpop { to { opacity: 1; transform: scale(1); } }
@keyframes pour { to { transform: scaleY(1); } }

/* ---------- pill buttons (Apiary) ---------- */
.btn-pill { font-family: var(--f-disp); font-weight: 600; font-size: 1.08rem;
  padding: 13px 34px; border-radius: 999px; border: 2.5px solid var(--ink); cursor: pointer;
  color: #38220D;
  background: linear-gradient(115deg, #F2BE45 0%, #DE8F0A 46%, #F2BE45 100%);
  background-size: 220% 100%; background-position: 0% 0;
  transition: transform 200ms var(--ease-pop), box-shadow 200ms var(--ease-out),
              background-position 340ms var(--ease-io); }
.btn-pill:hover { background-position: 96% 0; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138, 85, 20, 0.28); }

/* ---------- the chart builds itself in (after Jacquard's loom) ---------- */
/* Regions arrive in a quick sweep, so the eye takes the chart in as a whole and then
   lands on the one green cell still missing. Under half a second end to end. */
.plot.build path, .plot.build rect, .plot.build polygon {
  animation: regionin 360ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
@keyframes regionin { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.plot.build path, .plot.build rect { transform-box: fill-box; transform-origin: center; }

/* ---------- honey fill: the score reveal ---------- */
.honey { width: 64px; height: 74px; flex: none; overflow: visible; }
.honey .rim { fill: var(--wall); }
.honey .inside { fill: var(--bg); }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .cell, .comb--built .cell { opacity: .55; transform: none; transition: none; }
  .cell::before, .cell--open::after { opacity: 1; transition: none; }
  .hexlogo g.c { animation: none; opacity: 1; transform: none; }
  .hexlogo .pour { animation: none; transform: none; }
  .plot.build path, .plot.build rect, .plot.build polygon { animation: none; }
  #bees { display: none; }
}

/* ---------- type: Fredoka for the voice of the game, Archivo for reading ---------- */
body { font-family: var(--f-body); }
h1, h1.title, .metric, .score b, .res-total b, .res-title, .share-head, .brand,
details.how summary, button.primary, .jar, .react {
  font-family: var(--f-disp);
}
h1.title { font-weight: 600; letter-spacing: -.01em; font-size: 3rem; }
.metric { font-weight: 500; }
.react { font-style: normal; font-weight: 500; }
button.primary { font-weight: 600; border-radius: 999px; }

/* ---------- screens that carry the comb ---------- */
.hive-screen { position: relative; overflow: hidden; min-height: 100svh; }
.hive-screen > main { position: relative; z-index: 2; }
#start .hexlogo { margin-top: 6px; }

/* ---------- results: three cells of honey, one per round ---------- */
.res-jars { display: flex; justify-content: center; gap: 20px; margin: 18px 0 4px; }
.jar { display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 600; font-size: 1.15rem; }
.jar .honey { width: 60px; height: 70px; }
.verdict { align-items: center; }
.verdict .honey { width: 44px; height: 52px; }

.results .btn-pill { display: block; margin: 0 auto; }

/* ---------- practice round coaching ---------- */
.coach { margin-top: 8px; padding: 10px 14px; border-radius: 12px; font-size: .95rem;
  background: color-mix(in srgb, #16C172 12%, var(--card)); border: 1.5px solid #16C172;
  line-height: 1.45; }
.practice-btn { display: block; margin: 10px 0 2px; }