/* annona.co.uk - Beetle Game exhibit (Task 12) */
.beetle{display:grid;gap:1rem}
.beetle-intro h3,.beetle-end h3{margin:0 0 .25rem;font:900 1.4rem/1.1 var(--font-display);color:var(--green-900)}
.beetle-intro p,.beetle-end p{margin:.35rem 0;max-width:70ch}
.beetle-fact{font-size:.95em;color:var(--green-900)}

.beetle-hud{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.beetle-hud>*{min-height:48px;display:flex;align-items:center;gap:.5rem;padding:0 .9rem;background:#f1f6ec;border-radius:999px;font-weight:700;color:var(--green-900)}
.pollen-dot{width:14px;height:14px;border-radius:50%;background:#f7d13d;opacity:.25;box-shadow:0 0 0 2px #e0c76b inset;transition:opacity .2s}
.is-carrying .pollen-dot{opacity:1;box-shadow:0 0 0 2px #c9a400 inset,0 0 10px #f7d13d}
.beetle-score-hint{font-weight:600}
.beetle-dawn{flex:1 1 12rem}
.dawn-bar{flex:1 1 6rem;height:12px;border-radius:999px;background:var(--night);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.dawn-fill{height:100%;width:0;background:linear-gradient(90deg,#f6a35c,#ffd98a);transition:width .2s linear}

.beetle-canvas{width:100%;aspect-ratio:16/10;border-radius:var(--radius);background:var(--night);touch-action:pan-y;display:block;cursor:crosshair;max-width:100%}
.beetle[data-state="playing"] .beetle-canvas{touch-action:none} /* a finger steers only during a round; otherwise it scrolls the page */
.beetle-canvas:focus-visible{outline:3px solid var(--seed);outline-offset:3px}

/* Above the garden: the one-line how-to and a legend for the two flower phases (a white glow, a yellow pollen puff) */
.beetle-guide{display:grid;gap:.25rem}
.beetle-howto{margin:0;font-weight:700;color:var(--green-900);max-width:70ch}
.beetle-legend{margin:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;font-weight:700;color:var(--green-900)}
.beetle-legend span{display:inline-flex;align-items:center;gap:.4rem}
.beetle-legend .legend-girl::before,.beetle-legend .legend-boy::before{content:"";width:.9em;height:.9em;border-radius:50%;flex:none}
.beetle-legend .legend-girl::before{background:#fbf7e6;box-shadow:0 0 0 2px #d9d0a4,0 0 8px 3px rgba(255,255,240,.9)}
.beetle-legend .legend-boy::before{background:#f7d13d;box-shadow:0 0 0 2px #c9a400}
/* Below the garden: what the beetle should do next; a fixed line height so the Start button never jumps */
.beetle-status{margin:0;min-height:1.6em;font-weight:700;color:var(--green-900)}
.beetle[data-status="carrying"] .beetle-status{color:#8a6d00}

.beetle-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.beetle-hint{margin:0;font-weight:600;color:var(--green-900)}

.beetle-end{padding:1rem 1.25rem;background:#fff1cf;border-left:6px solid var(--accent);border-radius:8px}
.beetle:not([data-state="over"]) .beetle-end{padding:0;border:0} /* the live wrapper stays in the tree; the card takes no room until dawn */
.beetle-end-verdict{font-weight:800}

@media (prefers-reduced-motion:reduce){.pollen-dot,.dawn-fill{transition:none}}

/* Narrow screens: the garden bleeds to the exhibit's edges (the .exhibit padding is 1.1rem there) so the canvas is
   as wide as the phone allows. */
@media (max-width:479.98px){.beetle-canvas{width:calc(100% + 2.2rem);max-width:none;margin-inline:-1.1rem;border-radius:0}}