/* Grow the Mycelium: anything the kit's styles (../kit.css) don't already cover. Colours come from the Library's tokens. */
.fidget[data-fidget="mycelium"] { position: relative; }
.fidget[data-fidget="mycelium"] .fidget-stage { background: #1a120c; cursor: crosshair; }
.fidget.myc-theme-paper .fidget-stage { background: #f3eee2; }
.fidget.myc-theme-glow .fidget-stage { background: #020405; }
.fidget.myc-theme-rainbow .fidget-stage { background: #0d0b12; }
.myc-fresh { opacity: 0; }

/* the tools row: Plant spores / Leaf litter, speed, look, Hall, hum, save */
.myc-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-height: 44px; max-width: 100%; min-width: 0; }
.myc-field label { font: 700 .85rem/1.2 var(--mono); text-transform: uppercase; }
.myc-field select { max-width: min(17rem, 100%); min-width: 0; text-overflow: ellipsis; }
.fidget-tools .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* mushrooms are real buttons laid over the drawing: invisible, 44 px, with a clear focus ring */
.myc-mush { position: absolute; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.myc-mush:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; background: rgba(255, 255, 255, .08); }
.myc-mush:hover { background: rgba(255, 255, 255, .06); }

/* the card a mushroom opens: the Library's own card look */
.myc-card { position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: calc(100% - 24px); overflow: auto; z-index: 2; background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); padding: 1rem 1.1rem; max-width: 34rem; touch-action: auto; }
.myc-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.myc-card-k { margin: 0 0 .4rem; font: 400 1.1rem/1.2 var(--pixel); letter-spacing: .04em; color: var(--pink); }
.myc-card h3 { margin: 0 0 .5rem; font: 700 1.25rem/1.2 var(--head); }
.myc-card-why { margin: 0 0 .5rem; font-weight: 600; }
.myc-card-sum { margin: 0 0 .5rem; color: var(--muted); }
.myc-card-meta { margin: 0 0 .8rem; font: 400 .85rem/1.4 var(--mono); color: var(--muted); }
.myc-card-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.myc-card-row .btn { min-height: 44px; }
.myc-card-row .btn-ghost { color: var(--ink); }

/* the full-patch note: just a note, never a failure */
.myc-note { margin: .8rem 0 0; padding: .6rem .8rem; border: 2px dashed var(--line); color: var(--ink); background: var(--soft); }

/* Glow: a very slow breathing glow (one breath every 9 seconds), never in Calm mode and still when paused */
@keyframes myc-breathe { from { opacity: .82; } to { opacity: 1; } }
.fidget.myc-theme-glow:not(.is-calm) .myc-net { animation: myc-breathe 9s ease-in-out infinite alternate; }
.fidget.myc-theme-glow.myc-paused .myc-net { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fidget.myc-theme-glow .myc-net { animation: none; } }

/* More options: speed, look, Hall, hum and save, folded away so the soil stays near the top */
.myc-more { flex-basis: 100%; }
.myc-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 700 .85rem/1.2 var(--mono); text-transform: uppercase; color: var(--ink); }
.myc-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.myc-more-in { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .4rem 0 .2rem; }