/* Party games for two (engine-u16-deck-party.js). Tokens only, so dark mode works. Selectors start with .tool. */
.tool.party { gap: 14px; --party-t: 123 47 230; --party-d: 232 54 120; }
.tool .party-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.tool .party-head .party-who { flex: 1; min-width: 0; }

/* Players */
.tool .party-players { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tool .party-vs { font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ink) / .4); flex: none; }
.tool .party-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 46%; padding: 0 6px 0 14px; border-radius: 20px;
  background: var(--surface); color: rgb(var(--ink) / .75); font-size: 15px; font-weight: 800; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
}
.tool .party-pill:active { transform: scale(.96); }
.tool .party-pill:not(:has(.party-pts)) { padding-right: 14px; }
.tool .party-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tool .party-pts { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; display: grid; place-items: center; background: rgb(var(--ink) / .07); font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tool .party-pts.is-bump { animation: party-bump .5s var(--ease-out); }
@keyframes party-bump { 30% { transform: scale(1.35); } 100% { transform: none; } }
.tool .party-pill[aria-current="true"] { background: rgb(var(--ink)); color: var(--bg); box-shadow: none; }
.tool .party-pill[aria-current="true"] .party-pts { background: rgb(255 255 255 / .18); }
.tool .party-names { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: center; }
.tool .party-names input { min-height: 44px; padding: 8px 12px; min-width: 0; }
.tool .party-ok { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: rgb(var(--ink)); color: var(--bg); }

/* Segmented switch */
.tool .party-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 16px; background: rgb(var(--ink) / .06); }
.tool .party-seg button {
  min-height: 38px; padding: 0 8px; border-radius: 13px; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .62); background: transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tool .party-seg button[aria-checked="true"] { background: var(--surface); color: rgb(var(--ink)); box-shadow: 0 1px 4px rgb(var(--ink) / .12); }
.tool .party-seg button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; }
.tool .party-settings { display: grid; gap: 8px; }
.tool .party-settings .party-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; }
.tool .party-settings .party-row > span { font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .55); }
@media (max-width: 599px) {
  .tool .party-settings .party-row { grid-template-columns: 1fr; }
  .tool .party-settings .party-row > span { display: none; }
  .tool .party-seg button { font-size: 13px; padding: 0 4px; min-height: 36px; }
}

/* Ring */
.tool .party-ring { position: relative; display: grid; place-items: center; flex: none; }
.tool .party-ring svg { position: absolute; inset: 0; }
.tool .party-ring-bg { stroke: rgb(var(--ink) / .1); }
.tool .party-ring-fg { stroke: rgb(var(--accent)); transition: stroke-dashoffset .1s linear, stroke .2s ease; }
.tool .party-ring.is-low .party-ring-fg { stroke: rgb(var(--party-d)); }
.tool .party-ring-t { position: relative; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }

/* Toast */
.tool { position: relative; }
.tool .party-toast {
  position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; z-index: 5;
  padding: 10px 16px; border-radius: 20px; background: rgb(var(--ink)); color: var(--bg); font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: opacity .2s ease, transform .3s var(--ease-out);
}
.tool .party-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Custom list */
.tool .party-custom-list { display: grid; gap: 6px; }
.tool .party-custom-list li { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--surface-2); font-size: 15px; }
.tool .party-custom-list li > span:nth-last-child(2) { flex: 1; }
.tool .party-tag { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.tool .party-count { color: rgb(var(--ink) / .5); }

/* Shared bits */
.tool .party-kicker { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--link); margin: 0; }
.tool .party-line { text-align: center; font-size: 17px; line-height: 24px; font-weight: 850; color: rgb(var(--ink)); min-height: 24px; }
.tool .party-row-btns { display: flex; gap: 10px; }
.tool .party-row-btns .btn { flex: 1; }
.tool .party-row-btns .btn-secondary { flex: 0 0 auto; padding: 0 20px; }
.tool .party-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.tool .party-link { min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 800; color: var(--link); background: none; display: inline-flex; align-items: center; gap: 6px; }
.tool .party-link .tool-icon { width: 18px; height: 18px; }
.tool .btn:focus-visible, .tool .party-pill:focus-visible, .tool .party-link:focus-visible, .tool .party-icon:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tool .party-link:hover { text-decoration: underline; } }
@media (max-width: 599px) {
  .tool .party-row-btns { flex-direction: row; }
  .tool .party-row-btns .btn { width: auto; }
  .tool .party-pill { font-size: 14px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .party-pts.is-bump { animation: none; }
  .tool .party-toast { transition: opacity .2s ease; }
}

/* Icon buttons, progress, fold-outs (same look as the shared deck engine, which these tools do not load) */
.tool .party-tools { display: flex; gap: 2px; }
.tool .party-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; background: transparent; flex: none;
  color: rgb(var(--ink) / .6); transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .tool .party-icon:hover { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); } }
.tool .party-icon:active { transform: scale(.9); }
.tool .party-icon.tool-fav[aria-pressed="true"] { color: rgb(var(--party-d)); }
.tool .party-icon.tool-fav[aria-pressed="true"] .tool-icon path { fill: currentColor; }
.tool .party-icon .tool-icon { width: 22px; height: 22px; }
.tool .party-progress { font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .5); font-variant-numeric: tabular-nums; }
.tool .party-more { border-radius: 18px; background: var(--surface); }
.tool .party-more summary { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 12px 16px; font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; color: rgb(var(--ink)); }
.tool .party-more summary::-webkit-details-marker { display: none; }
.tool .party-more summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .5; transition: transform .2s var(--ease-out); }
.tool .party-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.tool .party-more > div, .tool .party-more > ol { padding: 4px 16px 16px; }
.tool .party-more[hidden] { display: none; }
.tool .party-favs li, .tool .party-more .tool-list li { background: var(--surface-2); }

/* Folded settings row */
.tool .party-set { border-radius: 18px; background: rgb(var(--ink) / .05); }
.tool .party-set summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .75); }
.tool .party-set summary::-webkit-details-marker { display: none; }
.tool .party-set summary .tool-icon { width: 18px; height: 18px; flex: none; color: rgb(var(--ink) / .5); }
.tool .party-set-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .party-set-edit { flex: none; color: var(--link); font-weight: 850; }
.tool .party-set[open] .party-set-edit { visibility: hidden; }
.tool .party-set .party-settings { padding: 4px 10px 12px; }
.tool .party-set .tool-chips { flex-wrap: wrap; gap: 6px; }
.tool .party-set .tool-chips button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.tool .party-set .party-row { align-items: start; }
.tool .party-set .party-row > span { padding-top: 10px; }
@media (max-width: 599px) {
  .tool .party-set .party-row { grid-template-columns: 1fr; gap: 4px; }
  .tool .party-set .party-row > span { display: block; padding: 6px 2px 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
}

/* Buttons inside party games: press feedback only (no sticky hover zoom), and visible edges in dark mode. */
.tool.party .btn:hover { transform: none; }
.tool.party .btn:active { transform: scale(.96); }
@media (prefers-color-scheme: dark) {
  .tool.party .btn-secondary { background: rgb(var(--ink) / .1); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .22); }
  .tool .party-pill { background: rgb(var(--ink) / .08); box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .22); color: rgb(var(--ink) / .85); }
  .tool .party-set { background: rgb(var(--ink) / .08); }
}
.tool .party-names-lead { font-size: 13px; font-weight: 850; color: rgb(var(--ink) / .6); grid-column: 1 / -1; margin: 0; }

/* Host for full-screen layers appended to <body> (keeps the tool's selectors working). */
.tool.party-host { display: contents; }