/* Sawubona (public game). Ubuntu Freedom sigil colors: sky #17b3e4, red #ee2327, black #070707, gold #b5882d.
   Bright sky and gold fill shapes; their deeper "-text" shades carry small text so it stays readable.
   Everything is scoped to .wya so the site's theme stays untouched, and the
   game keeps its own light panel whatever the theme's background is. */
.wya {
  --wya-bg: #f1f9fc; --wya-surface: #ffffff; --wya-ink: #070707; --wya-muted: #4a5560; --wya-line: #d3e3ea;
  --wya-red: #ee2327; --wya-red-deep: #c8161b; --wya-on-red: #ffffff;
  --wya-sky: #17b3e4; --wya-sky-text: #0a6f91; --wya-sky-soft: #dcf3fb;
  --wya-gold: #b5882d; --wya-gold-text: #7f5d17; --wya-gold-soft: #f5ecd6;
  --wya-warn: #8a4b00; --wya-warn-soft: #fff1dc;
  --wya-type: #c8161b; --wya-red-soft: #fdeeee;
  --wya-display: "Gloock", Georgia, "Times New Roman", serif;
  --wya-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--wya-bg); color: var(--wya-ink); font-family: var(--wya-body); font-size: 16px; line-height: 1.5;
  border-radius: 16px; padding: 28px clamp(16px, 3vw, 32px) 36px; text-align: left; margin: 0 auto; max-width: 1240px;
}
/* When the theme's column is centered, use more of the screen, up to 1240px. */
.wya.wya--wide { width: min(1240px, calc(100vw - 32px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); margin: 0; }
.wya, .wya *, .wya *::before, .wya *::after { box-sizing: border-box; }
.wya [hidden] { display: none !important; }
.wya .wya-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wya input[type="email"], .wya input[type="date"] { font: 400 1rem/1.4 var(--wya-body); color: var(--wya-ink); background: var(--wya-surface); border: 1px solid #b9c4d1; border-radius: 10px; padding: 10px 12px; width: 100%; max-width: 360px; min-height: 44px; box-shadow: none; margin: 0; }
.wya a { color: var(--wya-sky-text); }
.wya a.wya-btn { text-decoration: none; }
.wya h2, .wya h3, .wya p, .wya dl, .wya dd, .wya ul, .wya ol, .wya figure { margin: 0; }
.wya h2 { font-family: var(--wya-display); font-weight: 400; text-transform: none; margin: 0; padding: 0; border: 0; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.05; color: var(--wya-ink); text-wrap: balance; letter-spacing: 0; }
.wya h3 { margin: 0; padding: 0; border: 0; font-family: var(--wya-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wya-muted); }
.wya p { color: inherit; }
.wya img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.wya .wya-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wya .wya-lead { color: var(--wya-muted); max-width: 62ch; }
.wya .wya-loading { color: var(--wya-muted); }

/* Buttons and fields: set explicitly so theme styles don't leak in */
.wya button, .wya .wya-btn {
  font: 600 0.95rem/1.2 var(--wya-body); cursor: pointer; border-radius: 999px; padding: 10px 18px; min-height: 42px;
  border: 1px solid var(--wya-line); background: var(--wya-surface); color: var(--wya-ink); text-transform: none; letter-spacing: 0;
  box-shadow: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
}
.wya button:hover { border-color: var(--wya-sky); background: var(--wya-surface); color: var(--wya-ink); }
.wya button.wya-primary { background: var(--wya-red); color: var(--wya-on-red); border-color: var(--wya-red); }
.wya button.wya-primary:hover { background: var(--wya-red-deep); border-color: var(--wya-red-deep); color: var(--wya-on-red); }
.wya button:disabled { opacity: 0.5; cursor: not-allowed; }
.wya button:focus-visible, .wya input:focus-visible, .wya select:focus-visible, .wya textarea:focus-visible, .wya label.wya-chip:focus-within { outline: 3px solid var(--wya-sky); outline-offset: 2px; }
.wya button.wya-small { min-height: 34px; padding: 6px 12px; font-size: 0.85rem; }
.wya button.wya-link-btn { border: 0; background: none; color: var(--wya-sky-text); padding: 4px 2px; min-height: 0; text-decoration: underline; }
.wya input[type="text"], .wya textarea, .wya select {
  font: 400 1rem/1.4 var(--wya-body); color: var(--wya-ink); background: var(--wya-surface); border: 1px solid #b9c4d1;
  border-radius: 10px; padding: 10px 12px; width: 100%; max-width: 100%; min-height: 44px; box-shadow: none; margin: 0;
}
.wya textarea { min-height: 88px; resize: vertical; }
/* Typed text: dark gold, in every state. !important keeps theme focus styles (like white text) out. */
#wya-app input[type="text"], #wya-app input[type="email"], #wya-app input[type="date"], #wya-app textarea, #wya-app select {
  color: var(--wya-type) !important; -webkit-text-fill-color: var(--wya-type); background-color: var(--wya-surface) !important; caret-color: var(--wya-type);
}
#wya-app input[type="text"]:focus, #wya-app input[type="email"]:focus, #wya-app input[type="date"]:focus, #wya-app textarea:focus, #wya-app select:focus {
  color: var(--wya-type) !important; -webkit-text-fill-color: var(--wya-type); background-color: var(--wya-sky-soft) !important; border-color: var(--wya-sky) !important; box-shadow: none !important;
}
#wya-app input::placeholder, #wya-app textarea::placeholder { color: #6b7680 !important; -webkit-text-fill-color: #6b7680; opacity: 1; }
.wya input:-webkit-autofill, .wya input:-webkit-autofill:focus { -webkit-text-fill-color: var(--wya-type); box-shadow: 0 0 0 1000px var(--wya-surface) inset !important; }
.wya select option { color: var(--wya-ink); background: var(--wya-surface); }
.wya select { appearance: auto; }

/* Header */
.wya .wya-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 28px; margin-bottom: 24px; }
.wya .wya-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wya-sky-text); background: var(--wya-sky-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; justify-self: start; width: max-content; max-width: 100%; }
.wya .wya-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 12px 0 0; }
.wya .wya-steps li { font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--wya-surface); border: 1px solid var(--wya-line); color: var(--wya-muted); margin: 0; }
.wya .wya-steps li.is-now { background: var(--wya-ink); border-color: var(--wya-ink); color: #fff; }
.wya .wya-steps li.is-past { color: var(--wya-ink); }
.wya .wya-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Host panel */
.wya .wya-panel { background: var(--wya-surface); border: 1px solid var(--wya-line); border-radius: 14px; padding: 18px 20px; display: grid; gap: 14px; }
.wya .wya-panel-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.wya .wya-status { font-weight: 600; }
.wya .wya-copyrow { display: flex; gap: 8px; align-items: center; min-width: 0; flex: 1 1 320px; }
.wya .wya-copyrow input { font-size: 0.85rem; min-height: 38px; }
.wya .wya-names { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.wya .wya-names li { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--wya-bg); border: 1px solid var(--wya-line); margin: 0; }
.wya .wya-names li.is-plain { padding-right: 12px; }
.wya .wya-names li.is-done { background: var(--wya-gold-soft); border-color: var(--wya-gold); }
.wya .wya-names button { min-height: 0; padding: 0 6px; border: 0; background: none; color: var(--wya-muted); font-size: 1rem; line-height: 1.4; }
.wya .wya-names button:hover { color: var(--wya-red); }
.wya .wya-note { font-size: 0.88rem; color: var(--wya-muted); }
.wya .wya-error { color: var(--wya-red); font-weight: 600; }
.wya .wya-ok { color: var(--wya-sky-text); font-weight: 600; }
.wya .wya-warn { background: var(--wya-warn-soft); color: var(--wya-warn); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; }

/* Join form */
.wya .wya-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 720px; }
.wya .wya-q { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.wya .wya-q > legend, .wya .wya-q > label.wya-qlabel { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-weight: 600; font-size: 1.02rem; padding: 0; margin: 0 0 2px; color: var(--wya-ink); }
.wya .wya-q .wya-hint { font-size: 0.86rem; color: var(--wya-muted); }
.wya .wya-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wya .wya-chips.is-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wya label.wya-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid #b9c4d1; background: var(--wya-surface); font-weight: 500; margin: 0; }
.wya .wya-chips.is-list label.wya-chip { border-radius: 12px; }
.wya .wya-chips.is-list label.wya-chip img { width: 28px; height: 28px; flex: none; }
.wya label.wya-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wya label.wya-chip:has(input:checked) { background: var(--wya-sky-soft); border-color: var(--wya-sky); box-shadow: inset 0 0 0 1px var(--wya-sky); }
.wya label.wya-chip.is-checked { background: var(--wya-sky-soft); border-color: var(--wya-sky); box-shadow: inset 0 0 0 1px var(--wya-sky); }
.wya .wya-photo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wya .wya-photo img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.wya .wya-photo input[type="file"] { font: inherit; max-width: 100%; min-width: 0; }
.wya .wya-form > * { min-width: 0; }
.wya .wya-submit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* You're in */
.wya .wya-joined { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
.wya .wya-joined img.wya-preview { width: 100%; aspect-ratio: 1; border-radius: 14px; border-bottom: 3px solid var(--wya-gold); }
@media (max-width: 640px) { .wya .wya-joined { grid-template-columns: 1fr; } .wya .wya-joined img.wya-preview { max-width: 260px; } }

/* Board */
.wya .wya-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.wya .wya-card { background: var(--wya-surface); border: 1px solid var(--wya-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.wya .wya-stage { position: relative; aspect-ratio: 1 / 1; max-width: 100%; background: var(--wya-sky-soft); border-bottom: 3px solid var(--wya-gold); overflow: hidden; }
.wya .wya-stage > img.wya-avatar, .wya .wya-stage > .wya-photoface { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.6s ease, transform 0.6s ease; }
.wya .wya-stage > .wya-photoface { opacity: 0; transform: scale(1.04); display: grid; place-items: center; background: var(--wya-sky-soft); }
.wya .wya-stage > .wya-photoface img { width: 100%; height: 100%; object-fit: cover; object-position: center 4%; }
.wya .wya-initials { width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--wya-display); font-size: 3rem; color: var(--wya-gold); background: var(--wya-ink); }
.wya .wya-num { position: absolute; top: 12px; left: 12px; font-family: var(--wya-display); font-size: 1.6rem; line-height: 1; background: rgba(255, 255, 255, 0.9); color: #1b2038; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; transition: opacity 0.4s ease; }
.wya .wya-disc { position: absolute; top: 12px; right: 12px; width: 17%; max-width: 58px; aspect-ratio: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25)); }
.wya .wya-card.is-revealed .wya-stage > img.wya-avatar { opacity: 0; transform: scale(0.96); }
.wya .wya-card.is-revealed .wya-stage > .wya-photoface { opacity: 1; transform: none; }
.wya .wya-card.is-revealed .wya-num { opacity: 0; }
.wya .wya-plate { font-family: var(--wya-display); font-size: 1.6rem; line-height: 1.1; padding: 16px 18px 0; min-height: 1.6em; }
.wya .wya-plate .wya-unknown { color: var(--wya-muted); font-family: var(--wya-body); font-size: 0.95rem; font-weight: 500; }
.wya .wya-portrait { margin: 0; padding: 12px 18px 4px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.wya .wya-portrait dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wya-muted); padding-top: 3px; margin: 0; }
.wya .wya-portrait dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wya .wya-portrait dd.wya-pline { display: flex; align-items: center; gap: 8px; }
.wya .wya-portrait dd.wya-pline img { width: 26px; height: 26px; flex: none; }
.wya .wya-quote { margin: 8px 18px 0; padding: 10px 0 0; border-top: 1px solid var(--wya-line); font-style: italic; }
.wya .wya-tally-wrap { margin: 14px 18px 0; padding-top: 12px; border-top: 1px solid var(--wya-line); display: grid; gap: 8px; }
.wya .wya-tally { display: grid; gap: 6px; }
.wya .wya-tally-row { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr auto; gap: 10px; align-items: center; font-size: 0.9rem; }
.wya .wya-tally-row .wya-bar { height: 8px; border-radius: 4px; background: var(--wya-line); overflow: hidden; }
.wya .wya-tally-row .wya-bar span { display: block; height: 100%; background: var(--wya-sky); border-radius: 4px; }
.wya .wya-tally-row .wya-count { font-variant-numeric: tabular-nums; color: var(--wya-muted); }
.wya .wya-card.is-revealed .wya-tally-row.is-owner { color: var(--wya-gold-text); font-weight: 700; }
.wya .wya-card.is-revealed .wya-tally-row.is-owner .wya-bar span { background: var(--wya-gold); }
.wya .wya-right { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wya .wya-right .wya-lbl { font-size: 0.8rem; color: var(--wya-muted); }
.wya .wya-chip-right { font-size: 0.85rem; padding: 3px 10px; border-radius: 999px; background: var(--wya-gold-soft); border: 1px solid var(--wya-gold); }
.wya .wya-card-foot { margin-top: auto; padding: 16px 18px 18px; }
.wya .wya-card-foot { display: grid; gap: 8px; }
.wya .wya-card-foot button { width: 100%; }
.wya .wya-modal { position: fixed; inset: 0; z-index: 100001; background: rgba(7,7,7,0.6); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.wya .wya-modal-box { background: var(--wya-bg); border-radius: 16px; width: min(1100px, 100%); max-height: 100%; overflow: auto; padding: 20px; display: grid; gap: 12px; }
.wya .wya-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wya button.wya-tpl { display: grid; gap: 8px; padding: 8px; border-radius: 12px; border: 2px solid var(--wya-line); background: var(--wya-surface); min-height: 0; justify-items: center; }
.wya button.wya-tpl canvas { width: 100%; height: auto; border-radius: 6px; display: block; }
.wya button.wya-tpl.wya-tpl-profile canvas { width: 62%; border-radius: 50%; }
.wya button.wya-tpl span { font-weight: 600; }
.wya button.wya-tpl.is-chosen { border-color: var(--wya-gold); box-shadow: 0 0 0 2px var(--wya-gold-soft); }
.wya button.wya-tpl:hover { border-color: var(--wya-sky); }
.wya .wya-card-foot button.wya-save { border-color: var(--wya-gold); color: var(--wya-gold-text); }

/* Guessing */
.wya .wya-guess-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 22px; align-items: start; }
.wya .wya-guess-form { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
@media (max-width: 900px) { .wya .wya-guess-layout { grid-template-columns: 1fr; } .wya .wya-guess-form { position: static; max-height: none; } }
.wya .wya-guess-rows { display: grid; gap: 8px; }
.wya .wya-guess-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: center; }
.wya .wya-guess-row label { font-weight: 600; overflow-wrap: anywhere; margin: 0; }
.wya .wya-guess-row select { min-height: 40px; padding: 6px 8px; }
.wya .wya-guess-row.is-dup select { border-color: var(--wya-warn); background: var(--wya-warn-soft); }
.wya blockquote.wya-tb { margin: 0; padding: 10px 14px; border-left: 3px solid var(--wya-gold); background: var(--wya-gold-soft); border-radius: 0 10px 10px 0; font-style: italic; }

/* Scoreboard */
.wya .wya-scores { width: 100%; border-collapse: collapse; background: var(--wya-surface); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; margin: 0; }
.wya .wya-scores th, .wya .wya-scores td { text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--wya-line); background: none; color: var(--wya-ink); }
.wya .wya-scores th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wya-muted); }
.wya .wya-scores tr.is-winner td { background: var(--wya-gold-soft); font-weight: 700; }
.wya .wya-scores-wrap { overflow-x: auto; border: 1px solid var(--wya-line); border-radius: 14px; }
@media (max-width: 520px) { .wya .wya-scores th, .wya .wya-scores td { padding: 8px 8px; font-size: 0.9rem; } .wya { border-radius: 12px; } }

/* Full screen for screen sharing */
.wya.wya--full { position: fixed; inset: 0; left: 0; transform: none; width: auto; z-index: 100000; overflow: auto; border-radius: 0; max-width: none; padding: 24px max(16px, 3vw) 40px; }
body.wya-noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wya .wya-stage > img.wya-avatar, .wya .wya-stage > .wya-photoface, .wya .wya-num { transition: none; }
}

.wya .wya-ideas { margin: 14px 0 0; }

/* An empty date field shows its "mm/dd/yyyy" hint in the sample-text gray. */
#wya-app input[type="date"].wya-empty, #wya-app input[type="date"].wya-empty:focus { color: #7b8794 !important; -webkit-text-fill-color: #7b8794; }


/* The Light look, as in Sawubona: a red border and red accents, red typed text, the first word of each heading in sky blue. */
.wya.wya--light { border: 2px solid var(--wya-red); }
.wya--light h2 .wya-t1 { color: var(--wya-sky-text); }
.wya--light h2::after { content: ""; display: block; width: 64px; height: 3px; background: var(--wya-red); margin-top: 12px; border-radius: 2px; }
.wya--light .wya-steps li.is-now, .wya--light .wya-modes button[aria-pressed="true"] { background: var(--wya-red); border-color: var(--wya-red); color: #fff; }
.wya.wya--light label.wya-chip:has(input:checked), .wya--light label.wya-chip.is-checked { background: var(--wya-red-soft); border-color: var(--wya-red); box-shadow: inset 0 0 0 1px var(--wya-red); }
.wya--light h3 { color: var(--wya-red-deep); }

/* Stay in touch */
.wya .wya-checkline { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; line-height: 1.4; }
.wya .wya-checkline input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--wya-red); }
.wya .wya-su-checks { display: grid; gap: 10px; margin: 6px 0 4px; }
.wya .wya-su-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wya .wya-su-texts { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--wya-red-soft); }
.wya .wya-su-consent { font-size: 0.9rem; font-weight: 400; color: var(--wya-ink); }
.wya input[type="tel"] { font: 400 1rem/1.4 var(--wya-body); color: var(--wya-type); background: var(--wya-surface); border: 1px solid #b9c4d1; border-radius: 10px; padding: 10px 12px; width: 100%; max-width: 360px; min-height: 44px; margin: 0; }
.wya .wya-signup { display: grid; gap: 12px; }

/* Color question: the color the game understood, shown as you type. */
.wya .wya-colorrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wya .wya-colorrow input { flex: 1 1 200px; min-width: 0; }
.wya .wya-swatch { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 3px rgba(0,0,0,.25); }
.wya .wya-swatch.is-empty { background: transparent; box-shadow: inset 0 0 0 2px rgba(127,127,127,.45); }
.wya .wya-swatch.is-unknown { background: conic-gradient(#e58fb0, #efc54a, #5fa86a, #4a83c4, #8a64c2, #e58fb0) !important; opacity: .55; }
.wya .wya-swatch-note { font-size: 14px; opacity: .75; }
.wya .wya-tip-box { width: min(440px, 100%); }
.wya .wya-tip-box h3 { margin: 0; }
.wya .wya-tip-box p { margin: 0; }

/* Game codes */
.wya .wya-joinrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wya .wya-joinrow input { flex: 1 1 180px; min-width: 0; max-width: 280px; text-transform: uppercase; letter-spacing: .12em; font-size: 20px; }
.wya .wya-joinform { display: grid; gap: 8px; }
.wya .wya-codeline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0; }
.wya .wya-code { font: 600 24px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; color: var(--wya-red); }
.wya .wya-colorwrap { display: grid; gap: 8px; min-width: 0; }
.wya .wya-colorwrap .wya-swatch-note { font-size: 0.9rem; line-height: 1.4; opacity: .85; }
.wya .wya-colorwrap .wya-swatch-note[hidden] { display: none; }

/* Each person's own link: the host's Link button by a name, and the player's "Keep your place" box. */
.wya .wya-names button.wya-namelink { font-size: 0.74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wya-sky-text); padding: 1px 7px; border-radius: 999px; }
.wya .wya-names button.wya-namelink.is-open, .wya .wya-names button.wya-namelink:hover { background: var(--wya-sky-text); color: #fff; }
.wya .wya-names li.is-plain:has(.wya-namelink) { padding-right: 6px; }
.wya .wya-linkpanel { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--wya-line); display: grid; gap: 6px; }
.wya .wya-mylink { border: 1px solid var(--wya-line); border-radius: 12px; padding: 10px 14px; background: var(--wya-surface); }
.wya .wya-mylink summary { cursor: pointer; font-weight: 600; }
.wya .wya-mylink[open] { display: grid; gap: 8px; }
.wya .wya-mylink .wya-copyrow input[type="email"] { flex: 1 1 180px; min-width: 0; }
.wya .wya-mailall { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wya .wya-mailall p { margin: 0; flex: 1 1 220px; }