/* Who Chop Meat? — component styles. Reads the design-system tokens (tokens.css). */
.wcm-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:var(--space-3) var(--space-4);border:3px solid var(--enamel);border-radius:var(--radius-md);background:var(--danfo);color:var(--enamel);font:800 18px/1.1 var(--font-body);box-shadow:var(--press);cursor:pointer;transition:transform .06s,box-shadow .06s;-webkit-tap-highlight-color:transparent}
.wcm-btn:active{transform:translateY(3px);box-shadow:var(--press-down)}
.wcm-btn:focus-visible,.wcm-room:focus-visible,.wcm-vote:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wcm-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--press-down)}
.wcm-btn--block{display:flex;width:100%}
.wcm-btn--danger{background:var(--stew);color:var(--on-stew)}
.wcm-btn--invite{background:var(--palm);color:var(--on-palm)}
.wcm-btn--quiet{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.wcm-btn__icon{display:inline-flex;flex:none}
.wcm-btn--quiet .wcm-btn__icon,.wcm-plate{padding:3px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-btn__label{display:flex;flex-direction:column;align-items:center}
.wcm-btn__sub{font:500 12px/1.2 var(--font-body);opacity:.85}

.wcm-room{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-height:112px;padding:var(--space-3);border:2px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font-family:var(--font-body)}
.wcm-room.is-here{border:3px solid var(--danfo);background:var(--surface-raised);box-shadow:0 0 0 3px color-mix(in srgb,var(--danfo) 30%,transparent)}
.wcm-room--wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:72px;gap:var(--space-3)}
.wcm-room__art{display:flex;line-height:0;padding:4px;border-radius:var(--radius-md);background:var(--plate)}
.wcm-room__text{display:flex;flex-direction:column}
.wcm-room__name{font:800 16px/1.2 var(--font-body)}
.wcm-room__chore{font:500 12px/1.3 var(--font-body);color:var(--ink-muted)}
.wcm-room.is-locked{opacity:.75}
.wcm-room__lock{position:absolute;top:var(--space-2);left:50%;transform:translateX(-50%);display:flex;padding:2px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-room__count{position:absolute;top:var(--space-2);right:var(--space-2);min-width:28px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--ground);color:var(--ink);font:400 14px/1.4 var(--font-display);text-align:center;font-variant-numeric:tabular-nums}

.wcm-chip{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;padding:3px var(--space-3) 3px 3px;border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);font:700 14px/1.2 var(--font-body)}
.wcm-chip__face{display:flex;flex:none;border-radius:50%;overflow:hidden;background:var(--ground)}
.wcm-chip__name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcm-chip__name small{font-weight:500;color:var(--ink-muted)}
.wcm-chip__mark{display:flex;flex:none}
.wcm-chip__tag{flex:none;padding:1px 6px;border-radius:var(--radius-sm);background:var(--ground);color:var(--ink-muted);font:700 10px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.wcm-chip__tag--stew{background:var(--stew);color:var(--on-stew)}
.wcm-chip.is-punished{opacity:.5;filter:grayscale(1)}
.wcm-chip.is-offline{opacity:.5}

.wcm-role{display:inline-flex;align-items:center;gap:var(--space-2);padding:4px var(--space-3) 4px 4px;border:2px solid var(--enamel);border-radius:var(--radius-pill);font:400 14px/1.2 var(--font-display);text-transform:uppercase}
.wcm-role svg{flex:none}
.wcm-role--thief{background:var(--stew);color:var(--on-stew)}
.wcm-role--family{background:var(--palm);color:var(--on-palm)}
.wcm-role--neutral{background:var(--plate);color:var(--enamel)}
.wcm-role--punished{background:var(--surface-raised);color:var(--ink-muted);border-color:var(--line)}

.wcm-msg{display:flex;align-items:flex-start;gap:var(--space-2);max-width:100%}
.wcm-msg__face{display:flex;flex:none;border-radius:50%;overflow:hidden;background:var(--surface-raised)}
.wcm-msg__bubble{min-width:0;max-width:80%;padding:var(--space-2) var(--space-3);border-radius:4px var(--radius-md) var(--radius-md) var(--radius-md);background:var(--surface-raised);color:var(--ink);font:400 16px/1.35 var(--font-body);overflow-wrap:anywhere}
.wcm-msg__who{display:block;font:700 13px/1.3 var(--font-body);color:var(--ink-muted)}
.wcm-msg--mine{flex-direction:row-reverse}
.wcm-msg--mine .wcm-msg__bubble{border-radius:var(--radius-md) 4px var(--radius-md) var(--radius-md);background:var(--adire);color:var(--ground)}
.wcm-msg--mine .wcm-msg__who{color:inherit;opacity:.8}
.wcm-msg--mummy .wcm-msg__face{background:transparent;border-radius:0}
.wcm-msg--mummy .wcm-msg__bubble{max-width:100%;border:2px solid var(--enamel);border-radius:var(--radius-md);background:var(--danfo);color:var(--enamel)}

.wcm-vote{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:0;padding:var(--space-2) var(--space-1);border:2px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:700 13px/1.2 var(--font-body);cursor:pointer}
.wcm-vote__face{display:flex;border-radius:50%;overflow:hidden;background:var(--surface-raised)}
.wcm-vote__face--plate{border-radius:var(--radius-sm);background:var(--plate)}
.wcm-vote__name{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcm-vote__done{position:absolute;top:4px;right:4px;display:flex}
.wcm-vote__thumb{position:absolute;top:2px;left:4px;display:flex}
.wcm-vote.is-mine{border:3px solid var(--adire);background:var(--surface-raised)}
.wcm-vote:disabled{cursor:default}
.wcm-vote:disabled:not(.is-mine){opacity:.55}

.wcm-pot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border:2px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--ink)}
.wcm-pot.is-drop{border-color:var(--stew)}
.wcm-pot__art{display:flex}
.wcm-pot__body{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.wcm-pot__label{font:700 12px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.wcm-pot__pieces{display:flex;flex-wrap:wrap;gap:2px}
.wcm-pot__piece{display:flex}
.wcm-pot__piece.is-gone{opacity:.2;filter:grayscale(1)}
.wcm-pot__num{font:400 32px/1 var(--font-display);color:var(--danfo-ink);font-variant-numeric:tabular-nums}
.wcm-pot__num small{font-size:14px;color:var(--ink-muted)}
.wcm-pot__alarm{grid-column:1/-1;padding:4px var(--space-2);border-radius:var(--radius-sm);background:var(--stew);color:var(--on-stew);font:400 13px/1.3 var(--font-display);text-transform:uppercase;text-align:center}

.wcm-toast{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);border:2px solid var(--enamel);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:800 15px/1.2 var(--font-body);box-shadow:var(--press)}
.wcm-toast svg{flex:none}
.wcm-toast--dark svg,.wcm-toast--info svg{padding:2px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-toast--meeting{background:var(--stew);color:var(--on-stew);font:400 16px/1.2 var(--font-display);text-transform:uppercase}
.wcm-toast--dark{background:#050410;color:#f6efe1;border-color:#050410}
.wcm-toast--light{background:var(--danfo);color:var(--enamel)}
.wcm-toast--alarm{background:var(--stew);color:var(--on-stew);animation:wcm-shake .4s 2}
.wcm-toast--gang{background:#3a0f0a;color:#ffd4c7;border-color:var(--stew)}
.wcm-toast--alarm svg,.wcm-toast--gang svg{padding:2px;border-radius:var(--radius-sm);background:var(--plate)}
@keyframes wcm-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.wcm-sign{display:flex;justify-content:center;line-height:0}
.wcm-sign svg{max-width:100%;height:auto;filter:drop-shadow(0 4px 0 var(--enamel))}

.wcm-vn{display:flex;align-items:center;gap:var(--space-2);min-width:180px;padding:2px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.wcm-vn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
.wcm-vn__btn{display:flex;flex:none}
.wcm-vn__wave{display:flex;align-items:center;gap:2px;flex:1;height:22px}
.wcm-vn__wave i{display:block;width:3px;border-radius:2px;background:currentColor;opacity:.55}
.wcm-vn.is-playing .wcm-vn__wave i{opacity:1;animation:wcm-vn 0.9s ease-in-out infinite alternate}
.wcm-vn.is-playing .wcm-vn__wave i:nth-child(2n){animation-delay:.2s}
.wcm-vn.is-playing .wcm-vn__wave i:nth-child(3n){animation-delay:.4s}
@keyframes wcm-vn{to{transform:scaleY(.4)}}
.wcm-vn__len{flex:none;font:700 12px/1 var(--font-body);font-variant-numeric:tabular-nums;opacity:.8}

.wcm-notes{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border:2px dashed var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.wcm-notes__title{font:700 12px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.wcm-note{display:flex;align-items:center;gap:var(--space-2);color:var(--ink);font:600 14px/1.3 var(--font-body)}
.wcm-note__icon{display:flex;flex:none;padding:2px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-note--guilty{color:var(--stew)}

@media (prefers-reduced-motion:reduce){.wcm-btn{transition:none}.wcm-vn.is-playing .wcm-vn__wave i{animation:none}}

/* Day 3: coins, wardrobe, rewards, ads, live talk */
.wcm-coins{display:inline-flex;align-items:center;gap:6px;padding:4px var(--space-3) 4px 4px;border:2px solid var(--enamel);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--danfo-ink);font:400 16px/1 var(--font-display);font-variant-numeric:tabular-nums;cursor:pointer}
span.wcm-coins{cursor:default}
.wcm-coins:focus-visible,.wcm-swatch:focus-visible,.wcm-item:focus-visible,.wcm-board:focus-visible,.wcm-live__btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wcm-swatch{width:40px;height:40px;border:3px solid var(--enamel);border-radius:50%;cursor:pointer;padding:0}
.wcm-swatch.is-on{box-shadow:0 0 0 3px var(--ground),0 0 0 6px var(--ink)}
.wcm-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-2) var(--space-3);border:2px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);cursor:pointer;text-align:center}
.wcm-item--on{border:3px solid var(--palm);background:var(--surface-raised)}
.wcm-item__art{display:flex;line-height:0;padding:4px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-item__name{font:700 13px/1.2 var(--font-body);min-height:2.4em;display:flex;align-items:center}
.wcm-item__price{display:inline-flex;align-items:center;gap:4px;font:400 14px/1 var(--font-display);color:var(--danfo-ink)}
.wcm-item__state{display:inline-flex;align-items:center;gap:4px;font:700 12px/1 var(--font-body);color:var(--palm)}
.wcm-item--owned .wcm-item__state{color:var(--ink-muted)}
.wcm-item__state svg{padding:1px;border-radius:4px;background:var(--plate)}
.wcm-reward{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);border:3px solid var(--enamel);border-radius:var(--radius-lg);background:var(--surface-raised);text-align:left;box-shadow:var(--press);animation:wcm-pop .3s ease-out}
.wcm-reward>svg{flex:none}
.wcm-reward__body{flex:1;min-width:0}
.wcm-reward__n{font:400 24px/1 var(--font-display);color:var(--danfo-ink)}
.wcm-reward__parts{display:flex;flex-wrap:wrap;gap:2px var(--space-3);margin-top:var(--space-1);font:500 13px/1.3 var(--font-body);color:var(--ink-muted)}
.wcm-reward__parts b{color:var(--ink)}
.wcm-reward__bal{display:flex;flex-direction:column;align-items:flex-end;font:400 20px/1 var(--font-display);color:var(--ink)}
.wcm-reward__bal small{font:600 11px/1.4 var(--font-body);color:var(--ink-muted)}
.wcm-reward.is-capped{box-shadow:none;border-color:var(--line)}
.wcm-board{position:relative;display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);border:3px solid var(--enamel);border-radius:var(--radius-md);background:var(--danfo);color:var(--enamel);text-align:left;text-decoration:none;box-shadow:var(--press);cursor:pointer;font:inherit}
.wcm-board--palm{background:var(--palm);color:var(--on-palm)}
.wcm-board--stew{background:var(--stew);color:var(--on-stew)}
.wcm-board--adire{background:var(--adire);color:var(--enamel)}
.wcm-board__art{flex:none;display:flex;line-height:0;padding:4px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-board__img{display:block;width:48px;height:48px;object-fit:contain}
.wcm-board__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.wcm-board__head{font:400 17px/1.15 var(--font-display);text-transform:uppercase}
.wcm-board__sub{font:600 13px/1.3 var(--font-body)}
.wcm-board__cta{align-self:flex-start;margin-top:var(--space-1);padding:3px var(--space-2);border:2px solid currentColor;border-radius:var(--radius-pill);font:800 12px/1.2 var(--font-body)}
.wcm-board__tag{position:absolute;top:-11px;right:12px;padding:1px 8px;border:2px solid var(--enamel);border-radius:var(--radius-pill);background:var(--plate);color:var(--enamel);font:700 10px/1.4 var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.wcm-board--tall{flex-direction:column;text-align:center;gap:var(--space-4);padding:var(--space-8) var(--space-6)}
.wcm-board--tall .wcm-board__text{align-items:center;gap:var(--space-2)}
.wcm-board--tall .wcm-board__head{font-size:28px;line-height:1.05}
.wcm-board--tall .wcm-board__sub{font-size:16px}
.wcm-board--tall .wcm-board__cta{align-self:center;font-size:15px;padding:6px var(--space-4)}
.wcm-board--tall .wcm-board__img{width:96px;height:96px}
.wcm-potline{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font:500 12px/1.3 var(--font-body);color:var(--ink-muted);text-decoration:none}
.wcm-potline svg,.wcm-potline img{flex:none;padding:1px;border-radius:4px;background:var(--plate)}
.wcm-potline b{color:var(--ink)}
.wcm-live{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border:2px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);font:600 14px/1.2 var(--font-body)}
.wcm-live>svg{flex:none;padding:2px;border-radius:var(--radius-sm);background:var(--plate)}
.wcm-live.is-on{border-color:var(--palm)}
.wcm-live__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--palm);animation:wcm-flicker 1.6s infinite}
.wcm-live__txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcm-live__note{font:500 12px/1.2 var(--font-body);color:var(--ink-muted)}
.wcm-live__btn{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px var(--space-3);border:2px solid var(--enamel);border-radius:var(--radius-pill);background:var(--palm);color:var(--on-palm);font:800 13px/1 var(--font-body);cursor:pointer}
.wcm-live__btn svg{padding:1px;border-radius:4px;background:var(--plate)}
#liveMic{background:var(--surface-raised);color:var(--ink);border-color:var(--line)}
#liveMic.is-on{background:var(--palm);color:var(--on-palm);border-color:var(--enamel)}
#liveLeave{background:var(--surface-raised);color:var(--ink);border-color:var(--line);padding:4px 8px}
@keyframes wcm-pop{from{transform:scale(.8);opacity:0}}
@keyframes wcm-flicker{40%{opacity:.6}60%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wcm-reward,.wcm-live__dot{animation:none}}