/* ---- 种蘑菇 (the mushroom on the dealer button): icon-first, pill-short.
   The rules are three pictogram tiles (.msteps) on the vote card and the tutorial card; toasts are
   pills with the number as a red chip; the cap sticker, the pot suffix and the banner vote line are
   icon + number. (Moved here from the end of style.css.) */

/* the sticker riding the cap: cream paper, ink edge, tilted like a price tag; tap = the rules.
   main.js places it with the `translate` property, which composes outside rotate / scale / transform */
.mushlbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); will-change: translate; z-index: 2; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 3px; white-space: nowrap;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 11px 11px 11px 4px; box-shadow: 0 3px 0 var(--ink);
  font: 900 14px/1.2 var(--font); color: var(--red); rotate: -4deg; font-variant-numeric: tabular-nums; }
.mushlbl:not([hidden]) { animation: mushin .35s cubic-bezier(.3,1.7,.6,1); }
.mushlbl:active { top: 2px; box-shadow: 0 1px 0 var(--ink); }
.mushlbl .mi { display: inline-flex; } .mushlbl .mi .ic { width: 20px; height: 20px; }
@keyframes mushin { from { scale: .3; opacity: 0; } }
/* the little '?' in the settings row: opens the rules card */
.mq { pointer-events: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink);
  font: 900 13px/1 var(--font); padding: 0; display: inline-grid; place-items: center; box-shadow: 0 2px 0 var(--ink); }
.mq:active { transform: translateY(2px); box-shadow: none; }
/* phones: the amount also rides the pot readout, as a small cap + number chip */
.potlbl .mushpot { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px; padding: 0 6px 0 2px; vertical-align: 1px;
  background: var(--paper); color: var(--red); border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; line-height: 18px; }
.potlbl .mushpot .ic { width: 16px; height: 16px; }
/* the dealer planting this hand: a tiny mushroom pinned to the name tag's corner */
.plate .mushmark { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
  display: grid; place-items: center; box-shadow: 0 2px 0 var(--ink); animation: mushbob 1.6s ease-in-out infinite; }
.plate .mushmark .ic { width: 16px; height: 16px; }
@keyframes mushbob { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-2px); } }
/* host settings: label + '?' on the left, the vote button (or the switch once it is on) on the right */
.mushset .tg-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mushset .tg-l > .ic { width: 22px; height: 22px; flex: none; }
.mushset .mushgo { flex: none; max-width: 55%; }

/* the rules as three tiles, left to right with an ink chevron between them:
   pictogram, a caption of a word or two, the amount as a red chip */
.msteps { display: flex; gap: 12px; margin: 2px 0 0; }
.mstep { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 3px 8px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 14px 12px 15px 11px; box-shadow: 0 3px 0 var(--ink); }
.mstep:last-child { background: #fff1c2; }
.mstep + .mstep::before { content: ''; position: absolute; left: -10px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); border-radius: 1px; transform: rotate(45deg); }
.mstep .ic { width: 40px; height: 40px; }
.mstep span { font: 800 12px/1.15 var(--font); color: var(--ink2); text-align: center; overflow-wrap: anywhere; }
.mstep b { font: 900 13px/1 var(--font); color: #fff; background: var(--red); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 8px 2px; white-space: nowrap; }

/* the vote card: in the felt's free band between the top bar and the dock; on phones clear of the
   #fxbar sticker column on the right */
#center.mush { top: calc(64px + var(--safe-t)); bottom: calc(var(--dock-h, 190px) + 12px); transform: translateX(-50%); max-height: none; overflow: visible;
  display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
#center.mush > .card { pointer-events: auto; max-height: 100%; overflow-y: auto; }
@media (max-width: 440px) { #center.mush { left: 10px; right: 72px; width: auto; transform: none; } }
.mushcard { display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 14px; width: min(340px, 100%); margin: 0 auto; }
.mushcard h3 { margin: 0; font-size: 19px; }
.mushcard .grid2 .btn { min-height: 46px; gap: 4px; }
.mushcard .grid2 .ic { width: 18px; height: 18px; }
/* the time left: a bar that drains (teal → yellow → red) + the seconds frame() writes */
.mtime { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mbar { flex: 1; height: 12px; background: var(--tint); border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--teal); transform-origin: left center; transform: scaleX(var(--f, 1)); animation: mushtime linear forwards; }
@keyframes mushtime { 75% { background: var(--yellow); } to { transform: scaleX(0); background: var(--red); } }
.mtime b { min-width: 34px; font: 900 15px/1 var(--font); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 440px) { .mushcard { padding: 12px 10px; gap: 8px; } .mushcard h3 { font-size: 17px; } .mushcard h3 .ic { width: 26px; height: 26px; vertical-align: -6px; }
  .msteps { gap: 10px; } .mstep + .mstep::before { left: -9px; } .mstep .ic { width: 34px; height: 34px; } }
/* landscape phones: the band between the top bar and the dock is short, so the card goes wider
   and each tile lays its pictogram beside the caption and the chip */
@media (max-height: 500px) and (orientation: landscape) {
  .mushcard { width: 100%; gap: 6px; padding: 8px 12px 10px; } .mushcard h3 { font-size: 16px; } .mushcard h3 .ic { width: 24px; height: 24px; vertical-align: -6px; }
  .mushcard .mstep { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: start; align-items: center; gap: 2px 5px; padding: 4px 6px 5px; }
  .mushcard .mstep .ic { grid-row: span 2; width: 30px; height: 30px; } .mushcard .mstep span { text-align: left; }
  .mushcard .grid2 .btn { min-height: 38px; font-size: 15px; } }
/* everyone else: one pill under the top bar (cap, ✓ n/m, seconds) */
#banner .mushvote { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: 2px 10px 2px 4px; font-weight: 900; font-size: 14px; box-shadow: 0 3px 0 var(--ink); font-variant-numeric: tabular-nums; }
#banner .mushvote .ic { width: 22px; height: 22px; flex: none; }
#banner .mushvote .ic.ok { width: 16px; height: 16px; margin-left: 2px; }
#banner .mushvote small { margin-left: 4px; padding-left: 7px; border-left: 2px solid rgba(var(--ink-rgb), .25); color: var(--ink2); font-size: 13px; }

/* the tutorial: one card, the same three tiles; tap anywhere closes it */
.mushtut .tut-card { gap: 12px; width: min(340px, 100%); }
.mushtut .mt-h { display: inline-flex; align-items: center; gap: 6px; font: 900 20px/1.2 var(--display); }
.mushtut .mt-h .ic { width: 36px; height: 36px; animation: bounce 1s infinite; }
.mushtut .msteps { align-self: stretch; }

/* toast pills: cap + words + the number as a red chip (+ a small tail) */
.toast.mtoast { gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; white-space: nowrap; }
.toast.mtoast > b { color: #fff; background: var(--red); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 15px; line-height: 18px; font-variant-numeric: tabular-nums; }
.toast.mtoast > small { color: var(--ink2); font-size: 12px; }

/* hand history: the cap, then one chip per beat; the harvest one in gold */
.hl.hmush b { display: inline-flex; align-items: center; }
.hl.hmush b .ic { width: 18px; height: 18px; }
.hl .ha.mw { background: var(--yellow); }

html.rm .mushlbl, html.rm .plate .mushmark, html.rm .mushtut .mt-h .ic { animation: none; }
html.rm .mbar { display: none; }
@media (prefers-reduced-motion: reduce) { .mushlbl, .plate .mushmark, .mushtut .mt-h .ic { animation: none; } .mbar { display: none; } }