/* What should we play? (assets/tools/what-game-should-we-play.js). Tokens only, so dark mode works. */
.tool .wg-filters { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: 0 2px 12px rgb(var(--ink) / .06); }
.tool .wg-group { display: flex; flex-direction: column; gap: 8px; }
.tool .wg-banner { padding: 12px 14px; border-radius: 16px; background: rgb(var(--accent) / .12); font-size: 15px; line-height: 22px; font-weight: 750; color: rgb(var(--ink)); }
.tool .wg-filters .tool-chips button { background: rgb(var(--ink) / .05); box-shadow: none; }
.tool .wg-filters .tool-chips button[aria-pressed="true"] { background: rgb(var(--ink)); }

.tool .wg-summary {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 20px; text-align: left;
  background: var(--surface); box-shadow: 0 2px 12px rgb(var(--ink) / .06); font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .75);
  -webkit-tap-highlight-color: transparent;
}
.tool .wg-summary-text { flex: 1; min-width: 0; }
.tool .wg-summary-edit { flex: none; font-weight: 850; color: var(--link); }
.tool .wg-summary:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

/* Pick card */
.tool .wg-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; min-height: 232px; border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow); color: rgb(var(--ink));
}
.tool .wg-card.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .wg-card.is-cupie { box-shadow: var(--shadow), inset 0 0 0 2px rgb(var(--accent) / .55); }
.tool .wg-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.tool .wg-kicker { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.tool .wg-name { font-size: 30px; line-height: 36px; font-weight: 950; letter-spacing: -.02em; color: rgb(var(--ink)); text-wrap: balance; overflow-wrap: anywhere; }
.tool .wg-card.is-spinning .wg-name { color: rgb(var(--ink) / .45); }
.tool .wg-name.is-rolling { filter: blur(.4px); }
.tool .wg-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tool .wg-meta li { margin: 0; padding: 4px 10px; border-radius: 12px; background: rgb(var(--accent) / .1); font-size: 13px; line-height: 20px; font-weight: 750; color: rgb(var(--ink) / .8); }
.tool .wg-how { font-size: 16px; line-height: 24px; font-weight: 650; color: rgb(var(--ink) / .85); }
.tool .wg-note { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .55); }
.tool .wg-note:empty, .tool .wg-how:empty, .tool .wg-extra:empty, .tool .wg-meta:empty, .tool .wg-count:empty { display: none; }
.tool .wg-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; }
.tool .wg-extra .wg-cupie { flex: 1 1 100%; height: 48px; }
.tool .wg-src { font-size: 13px; font-weight: 650; color: rgb(var(--ink) / .5); }
.tool .wg-src a { font-weight: 750; }
.tool .wg-count { font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .55); text-align: center; margin-top: -6px; }

.tool .wg-actions { display: flex; flex-direction: column; gap: 10px; }
.tool .wg-spin { width: 100%; flex: none; }
.tool .wg-spin:disabled { opacity: .5; }
.tool .wg-veto-row { display: flex; gap: 10px; }
.tool .wg-veto { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 12px; font-size: 14px; }
.tool .wg-veto:disabled { opacity: .45; }
.tool .wg-share { width: 100%; height: 48px; flex: none; }
.tool .wg-veto, .tool .wg-share { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Full list */
.tool .wg-all { border-radius: 24px; background: var(--surface); box-shadow: 0 2px 12px rgb(var(--ink) / .06); }
.tool .wg-all summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 56px;
  font-size: 16px; font-weight: 850; color: rgb(var(--ink)); -webkit-tap-highlight-color: transparent; border-radius: 24px;
}
.tool .wg-all summary::-webkit-details-marker { display: none; }
.tool .wg-all summary:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .wg-all-n { min-width: 32px; height: 28px; padding: 0 10px; border-radius: 14px; display: inline-grid; place-items: center; background: rgb(var(--ink)); color: var(--surface); font-size: 14px; font-variant-numeric: tabular-nums; }
.tool .wg-all-body { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 16px; }
.tool .wg-list { display: grid; gap: 6px; }
.tool .wg-list li { margin: 0; }
.tool .wg-row {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; text-align: left;
  background: rgb(var(--ink) / .04); transition: background-color .15s ease, transform .16s var(--ease-out); -webkit-tap-highlight-color: transparent;
}
.tool .wg-row:active { transform: scale(.98); }
.tool .wg-row[aria-current="true"] { background: rgb(var(--accent) / .14); }
.tool .wg-row:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .wg-row-name { font-size: 16px; line-height: 22px; font-weight: 850; color: rgb(var(--ink)); }
.tool .wg-row-tags { font-size: 12px; line-height: 18px; font-weight: 800; color: var(--link); }
.tool .wg-row-how { font-size: 14px; line-height: 20px; font-weight: 600; color: rgb(var(--ink) / .65); }
@media (hover: hover) { .tool .wg-row:hover { background: rgb(var(--accent) / .08); } }

.tool .wg-ask { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; border: 1.5px dashed rgb(var(--ink) / .15); }
.tool .wg-ask .btn { width: 100%; flex: none; height: 48px; }

@media (min-width: 600px) {
  .tool .wg-name { font-size: 36px; line-height: 42px; }
  .tool .wg-actions { flex-direction: row; }
  .tool .wg-spin { flex: 1 1 0; }
  .tool .wg-veto-row { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .tool .wg-card.is-new { animation: none; } .tool .wg-row { transition: none; } }
/* Compact chips for the device and mood rows: two lines on a phone instead of three. */
.tool .wg-filters .tool-chips { gap: 6px; }
.tool .wg-filters .tool-chips button { min-height: 38px; padding: 0 13px; font-size: 14px; }
.tool .wg-filters .u23-seg button { padding: 0 4px; white-space: nowrap; font-size: 14px; }
.tool .wg-veto-row[hidden] { display: none; }

/* Round 2: sticky spin before the first spin, list type filter, open button, names */
@media (max-width: 719px) { .tool.wg-pre.wg-ready .wg-actions { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; } }
.tool.wg-pre .wg-spin { box-shadow: 0 10px 30px rgb(var(--accent) / .35); }
.tool .wg-toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tool .wg-names-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .wg-names-row input { min-height: 44px; font-size: 16px; }
.tool .wg-types { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.tool .wg-types::-webkit-scrollbar { display: none; }
.tool .wg-types button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .75); background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); -webkit-tap-highlight-color: transparent; }
.tool .wg-types button[aria-pressed="true"] { color: var(--surface); background: rgb(var(--ink)); box-shadow: none; }
.tool .wg-types-n { font-size: 12px; opacity: .6; }
.tool .wg-types button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .wg-row-pair { font-size: 13px; line-height: 18px; font-weight: 750; color: rgb(var(--ink) / .8); }
.tool .wg-open { min-height: 44px; }
.tool .wg-name.is-tick { animation: wg-tick .09s linear; }
@keyframes wg-tick { from { transform: translateY(-14px); opacity: .3; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) { .tool.wg-pre .wg-actions { position: static; } .tool.wg-pre .wg-spin { box-shadow: none; } }
.tool .wg-types { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.tool .wg-names summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 14px; font-weight: 850; color: var(--link); list-style: none; }
.tool .wg-names summary::-webkit-details-marker { display: none; }
.tool .wg-names summary::before { content: '+'; width: 18px; font-weight: 900; }
.tool .wg-names[open] summary::before { content: '\2212'; }
.tool .wg-reel { position: relative; display: flex; flex-direction: column; }
.tool .wg-ghost { display: none; font-size: 18px; line-height: 24px; font-weight: 850; color: rgb(var(--ink) / .28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .wg-reel.is-rolling .wg-ghost { display: block; }
.tool .wg-reel.is-rolling .wg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(var(--ink) / .7); }
.tool .wg-reel.is-tick > * { animation: wg-tick .1s linear; }
.tool .wg-undo-row { display: flex; justify-content: center; }
.tool .wg-undo-row:has(> [hidden]) { display: none; }
.tool .wg-undo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; font-size: 14px; font-weight: 800; color: var(--link); }
.tool .wg-undo .tool-icon { width: 16px; height: 16px; }
.tool .wg-own { display: flex; gap: 8px; margin-top: 4px; }
.tool .wg-own input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; }
.tool .wg-own .btn { flex: none; min-height: 44px; width: auto; padding: 0 16px; }

/* Round 4: badges, spin row, kind filter */
.tool .wg-kick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tool .wg-badge { flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 16px; font-weight: 950; color: #fff; background: rgb(var(--accent)); }
.tool .wg-badge[hidden] { display: none; }
.tool .wg-badge[data-k="web"] { background: #2F7DD1; } .tool .wg-badge[data-k="discord"] { background: #5865F2; }
.tool .wg-badge[data-k="app"] { background: #E2407F; } .tool .wg-badge[data-k="console"], .tool .wg-badge[data-k="host"] { background: #1F8A5B; }
.tool .wg-badge[data-k="talk"], .tool .wg-badge[data-k="cards"], .tool .wg-badge[data-k="board"] { background: #C0731A; } .tool .wg-badge[data-k="own"] { background: #5A5F6B; }
.tool .wg-row-name { display: flex; align-items: center; gap: 10px; }
.tool .wg-row-name .wg-badge { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.tool .wg-spin-row { display: flex; gap: 10px; }
.tool .wg-spin-row .wg-spin { flex: 1 1 auto; }
.tool .wg-spin-row .wg-share { flex: none; width: auto; padding: 0 16px; }
.tool .wg-spin-row .wg-share[hidden] { display: none; }
.tool .wg-veto { font-size: 14px; }
.tool .wg-spin-row .wg-share { height: auto; align-self: stretch; }
/* Round 5 */
.tool.wg-pre.wg-ready .wg-filters { padding-bottom: 76px; }
@media (min-width: 720px) { .tool.wg-pre.wg-ready .wg-filters { padding-bottom: 0; } .tool .wg-types { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; } }
.tool .wg-lab-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool .wg-ask-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; font-weight: 850; color: var(--link); background: rgb(var(--accent) / .1); }
.tool .wg-ask-mini .tool-icon { width: 15px; height: 15px; }
.tool .wg-reel.is-rolling { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.tool .wg-reel.is-landed .wg-name { animation: wg-land .35s var(--ease-out); }
@keyframes wg-land { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool .wg-reel.is-landed .wg-name { animation: none; } }
.tool .wg-spin-row { flex: 1 1 0; min-width: 0; }
/* Round 7: card and Spin first, fit line, veto dots, list links, reel and landing polish */
.tool.wg-pre.wg-ready .wg-actions { position: static; }
.tool.wg-pre.wg-ready .wg-filters { padding-bottom: 16px; }
.tool .wg-banner { display: flex; flex-direction: column; gap: 10px; }
.tool .wg-banner[hidden] { display: none; }
.tool .wg-banner .btn { width: 100%; flex: none; }
.tool .wg-fit { display: flex; align-items: center; justify-content: center; gap: 4px 10px; flex-wrap: wrap; margin-top: -4px; font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .6); text-align: center; }
.tool .wg-fit[hidden] { display: none; }
.tool .wg-fit-edit { min-height: 32px; padding: 0 10px; border-radius: 16px; font-size: 14px; font-weight: 850; color: var(--link); background: rgb(var(--accent) / .1); }
.tool .wg-fit-edit:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .wg-veto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; }
.tool .wg-veto > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tool .wg-dots { display: inline-flex; gap: 3px; flex: none; }
.tool .wg-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgb(var(--ink) / .18); }
.tool .wg-dots i.is-on { background: rgb(var(--accent)); }
.tool .wg-extra .wg-open { min-height: 44px; height: 44px; padding: 0 18px; width: auto; flex: none; }
.tool .wg-cupie-line { flex: 1 1 100%; padding-top: 8px; border-top: 1px solid rgb(var(--ink) / .08); font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .7); }
.tool .wg-cupie-line a { font-weight: 850; }
.tool .wg-list li { border-radius: 16px; background: rgb(var(--ink) / .04); }
.tool .wg-list .wg-row { background: none; }
.tool .wg-list li:has(.wg-row[aria-current="true"]) { background: rgb(var(--accent) / .14); }
.tool .wg-row-links { display: flex; align-items: center; gap: 12px; padding: 0 14px 12px; margin-top: -2px; font-size: 13px; font-weight: 650; color: rgb(var(--ink) / .5); }
.tool .wg-row-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 16px; font-weight: 850; color: var(--link); background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); }
.tool .wg-types { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
.tool .wg-ghost { color: rgb(var(--ink) / .42); }
.tool .wg-reel.is-rolling .wg-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 72px; }
.tool .wg-card.is-landed { animation: wg-ring .6s var(--ease-out); }
@keyframes wg-ring { 0% { box-shadow: var(--shadow), 0 0 0 0 rgb(var(--accent) / .45); } 100% { box-shadow: var(--shadow), 0 0 0 14px rgb(var(--accent) / 0); } }
.tool .wg-card.is-landed .wg-badge { animation: wg-badge .45s var(--ease-out); }
@keyframes wg-badge { 0% { transform: scale(.4) rotate(-12deg); } 70% { transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool .wg-card.is-landed, .tool .wg-card.is-landed .wg-badge { animation: none; } }