/* games.fun multiplayer kit: the giveaway page (giveaway.js) on the friends page, and the owner's settings page
   (giveaway-settings.js). Kit-owned (never edit a copy). Every colour, font and radius is a --gw-* custom property:
   the defaults are the friends page's own look (party.css --mp-*); a game passes its own through multiplayer.json
   giveaway.theme (giveaway.js theme()). One action per screen wears --gw-action; a --gw-you ring always means "you".
   Sizes are in em off one font size that follows the screen: 15 px on a phone, about 20 px at 1920 x 1080, 34 px at
   3840 x 2160, so a 4K screen gets the same page, not a postage stamp. */
.gw, .gws {
  --gw-bg: var(--mp-bg, #0d0f15); --gw-panel: var(--mp-panel, #1b1e27); --gw-raised: var(--mp-row, #232735); --gw-line: var(--mp-line, #333a4d);
  --gw-fg: var(--mp-fg, #eef0f6); --gw-dim: var(--mp-muted, #b8bfd2); --gw-faint: var(--mp-faint, #8a90a2);
  --gw-action: var(--mp-accent, #4f7cff); --gw-action-fg: var(--mp-accent-fg, #fff); --gw-action-edge: rgba(0, 0, 0, .3);
  --gw-you: var(--mp-code, #ffd166); --gw-ok: var(--mp-ok, #3ddc84); --gw-bad: #ff647a; --gw-accent: var(--mp-accent, #4f7cff);
  --gw-title: var(--gw-fg); --gw-display-weight: 800;
  --gw-font: var(--mp-font, system-ui, -apple-system, "Segoe UI", sans-serif); --gw-display: var(--gw-font); --gw-mono: ui-monospace, Menlo, Consolas, monospace;
  --gw-radius: var(--mp-radius, 12px);
  color: var(--gw-fg); font-family: var(--gw-font); line-height: 1.4;
  font-size: clamp(15px, min(1.15vw, 1.9vh), 34px);
}
#party[data-phase="giveaway"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#party[data-phase="giveaway"] #stage { grid-row: 1; grid-column: 1; }
#party[data-giveaway="page"] #game { display: none; }
.gw { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; background: var(--gw-bg); -webkit-overflow-scrolling: touch; }
.gw[hidden] { display: none; }
.gw *, .gws * { box-sizing: border-box; }

/* ---- the page: one column on a phone; the details beside it on a wide screen ---- */
.gw-page { display: grid; gap: .9em; max-width: 30em; margin: 0 auto; padding: .75em 16px 4em; }
.gw-main, .gw-side { display: grid; gap: .8em; align-content: start; min-width: 0; }
/* gf-multiplayer 1.24.0: the top --gf-top px are the player button's (signin.js, player.css) */
html.gf-player-on .gw:not(.gw-preview) .gw-page { padding-top: max(.75em, var(--gf-top, 0px)); }
html.gf-player-on .gw:not(.gw-preview) { padding-right: var(--gf-right, 0px); }
@media (min-width: 1100px) {
  .gw:not(.gw-preview) .gw-page { max-width: 58em; grid-template-columns: minmax(0, 30em) minmax(0, 26em); justify-content: center; column-gap: 2em; padding-top: 2.4em; }
  html.gf-player-on .gw:not(.gw-preview) .gw-page { padding-top: max(2.4em, var(--gf-top, 0px)); }
  .gw:not(.gw-preview) .gw-side { padding-top: 3.2em; }
  .gw:not(.gw-preview) .gw-page.gw-one { max-width: 30em; grid-template-columns: minmax(0, 30em); }
}
.gw-bar { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 2.2em; }
.gw-game { color: var(--gw-faint); font-size: .85em; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pill { display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em; border-radius: 999px; background: color-mix(in srgb, var(--gw-raised) 85%, transparent); color: var(--gw-dim);
  font: var(--gw-display-weight) .72em/1.2 var(--gw-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.gw-pill i { width: .55em; height: .55em; border-radius: 50%; background: var(--gw-faint); }
.gw-pill-doors { color: var(--gw-ok); background: color-mix(in srgb, var(--gw-ok) 14%, var(--gw-panel)); }
.gw-pill-doors i { background: var(--gw-ok); animation: gw-pulse 1.4s ease-in-out infinite; }
.gw-pill-live { color: var(--gw-bad); background: color-mix(in srgb, var(--gw-bad) 14%, var(--gw-panel)); }
.gw-pill-live i { background: var(--gw-bad); animation: gw-pulse 1s ease-in-out infinite; }
.gw-pill-scheduled i { background: var(--gw-you); }
@keyframes gw-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.gw-host { display: flex; align-items: center; gap: .55em; margin: 0; color: var(--gw-dim); font-size: .93em; }
.gw-host b { color: var(--gw-fg); }
.gw-av { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .45em; background: var(--gw-raised); color: var(--gw-you); font: 800 .8em/1 var(--gw-display); }
.gw-title { margin: 0; font: var(--gw-display-weight) 2.15em/1.02 var(--gw-display); letter-spacing: -.01em; color: var(--gw-title); overflow-wrap: anywhere; }
.gw-title-sm { font-size: 1.55em; }
.gw-lede { margin: 0; color: var(--gw-dim); font-size: 1.02em; }
.gw-num { font-variant-numeric: tabular-nums; }

/* the facts strip: the same facts as the link card (the start in the viewer's zone, the prize, the seats) */
.gw-facts { display: grid; grid-template-columns: 1.35fr 1fr .8fr; border: 1px solid var(--gw-line); border-radius: var(--gw-radius); background: var(--gw-panel); overflow: hidden; }
.gw-facts > div { display: grid; gap: .1em; padding: .7em .85em; min-width: 0; }
.gw-facts > div + div { border-left: 1px solid var(--gw-line); }
.gw-facts b { font: var(--gw-display-weight) 1em/1.2 var(--gw-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-facts span { color: var(--gw-faint); font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gw-action { display: grid; gap: .65em; }
.gw-seats { display: grid; gap: .35em; color: var(--gw-dim); font-size: .92em; }
.gw-meter { display: block; height: .45em; border-radius: 999px; background: var(--gw-raised); overflow: hidden; }
.gw-meter i { display: block; height: 100%; background: var(--gw-you); border-radius: inherit; }
.gw-seats b { color: var(--gw-fg); }

/* buttons: one gold (action) per screen; quiet ones beside it */
.gw-btn { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; width: 100%; min-height: 3.1em; padding: .7em 1em; border-radius: calc(var(--gw-radius) + 2px);
  font: var(--gw-display-weight) 1.05em/1.2 var(--gw-display); text-decoration: none; cursor: pointer; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-fg); touch-action: manipulation; }
.gw-btn-gold { background: var(--gw-action); border-color: var(--gw-action); color: var(--gw-action-fg); box-shadow: 0 .22em 0 var(--gw-action-edge); margin-bottom: .22em; }
.gw-btn-gold:active { transform: translateY(.12em); box-shadow: 0 .1em 0 var(--gw-action-edge); }
.gw-btn-2 { font-family: var(--gw-font); font-size: .98em; min-height: 2.9em; }
.gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; }
.gw-btn > span { position: relative; }
.gw-btn .gw-fill { position: absolute; inset: 0; background: color-mix(in srgb, #000 28%, var(--gw-action)); transform: scaleX(0); transform-origin: left; }
.gw-link { justify-self: center; background: none; border: 0; color: var(--gw-dim); font: 600 .9em/1.3 var(--gw-font); text-decoration: underline; text-underline-offset: 3px; padding: .5em; min-height: 2.9em; cursor: pointer; }
.gw-link:hover { color: var(--gw-fg); }
.gw :focus-visible, .gws :focus-visible { outline: 2px solid var(--gw-you); outline-offset: 2px; }

.gw-state, .gw-inbox, .gw-card, .gw-result { border: 1px solid var(--gw-line); border-radius: var(--gw-radius); background: var(--gw-panel); padding: .85em 1em; }
.gw-state h2, .gw-inbox h2, .gw-result h2 { margin: 0 0 .25em; font: var(--gw-display-weight) 1.15em/1.25 var(--gw-display); }
.gw-state p, .gw-inbox p { margin: 0; color: var(--gw-dim); font-size: .95em; }
.gw-inbox { display: grid; gap: .6em; border-color: color-mix(in srgb, var(--gw-you) 55%, var(--gw-line)); }
.gw-inbox p b { color: var(--gw-fg); }
.gw-card h2 { margin: 0 0 .6em; font: var(--gw-display-weight) .78em/1.2 var(--gw-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gw-dim); }
.gw-small { margin: 0; color: var(--gw-faint); font-size: .85em; }
.gw-eyebrow { margin: 0; color: var(--gw-faint); font: 750 .72em/1.2 var(--gw-display); letter-spacing: .1em; text-transform: uppercase; }

/* the prize */
.gw-prize-top { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .6em; }
.gw-prize-amt { font: var(--gw-display-weight) 2.05em/1 var(--gw-display); color: var(--gw-you); }
.gw-prize-amt small { margin-left: .3em; font-size: .45em; letter-spacing: .04em; }
.gw-fund { display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em; border-radius: 999px; font-size: .8em; font-weight: 650; white-space: nowrap; color: var(--gw-dim); border: 1px dashed var(--gw-line); }
.gw-fund i { width: .55em; height: .55em; border-radius: 50%; background: var(--gw-faint); }
.gw-fund-grant { border-style: solid; }
/* a prize in words (the loot store: an NFT, a box, an amount its giver wrote), its picture, the drawing state */
.gw-prize-amt.gw-words { font-size: 1.5em; line-height: 1.1; overflow-wrap: anywhere; flex: 1 1 8em; min-width: 0; }
.gw-prize-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--gw-raised); }
.gw-drawing h2 { color: var(--gw-you); }
.gw-seed { overflow-wrap: anywhere; }
.gw-fund-locked, .gw-fund-paid { color: var(--gw-ok); border-style: solid; background: color-mix(in srgb, var(--gw-ok) 12%, var(--gw-panel)); }
.gw-fund-locked i, .gw-fund-paid i { background: var(--gw-ok); }
.gw-places { list-style: none; margin: 0 0 .55em; padding: 0; display: grid; gap: .3em; }
.gw-places li { display: flex; justify-content: space-between; gap: .6em; padding: .4em .65em; border-radius: calc(var(--gw-radius) - 4px); background: var(--gw-raised); font-size: .93em; }
.gw-places li b { color: var(--gw-fg); }
.gw-places li.gw-gold { box-shadow: inset 0 0 0 1.5px var(--gw-you); }
.gw-places li.gw-gold b { color: var(--gw-you); }

.gw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.gw-steps li { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); gap: .65em; align-items: start; }
.gw-steps i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .45em; background: var(--gw-raised); color: var(--gw-you); font: 800 .9em/1 var(--gw-display); font-style: normal; }
.gw-steps b { display: block; font-size: .98em; }
.gw-steps span { display: block; color: var(--gw-dim); font-size: .9em; }
.gw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.gw-checks li { position: relative; padding-left: 1.5em; color: var(--gw-dim); font-size: .93em; }
.gw-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--gw-ok); font-weight: 800; }
.gw-fine { margin: 0; color: var(--gw-faint); font-size: .8em; }
.gw-mock { color: var(--gw-dim); }
.gw-fine .gw-mock { display: block; margin-top: .4em; padding: .5em .7em; border: 1px dashed var(--gw-line); border-radius: calc(var(--gw-radius) - 4px); }

/* the lobby: the count, your seat and a few faces (never thousands of rows) */
.gw-lobby-top { display: flex; align-items: flex-end; justify-content: space-between; gap: .8em; }
.gw-lockin { display: grid; justify-items: end; color: var(--gw-dim); font-size: .85em; white-space: nowrap; }
.gw-lockin b { font: var(--gw-display-weight) 2.1em/1 var(--gw-display); color: var(--gw-you); }
.gw-faces { display: flex; flex-wrap: wrap; gap: .45em; padding: .8em; border: 1px solid var(--gw-line); border-radius: var(--gw-radius); background: var(--gw-panel); }
.gw-face { position: relative; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--c); color: #11131a; font: 800 .82em/1 var(--gw-display); box-shadow: inset 0 -.2em 0 rgba(0, 0, 0, .18); }
.gw-face.gw-away { opacity: .3; }
.gw-face.gw-you { box-shadow: 0 0 0 .18em var(--gw-bg), 0 0 0 .32em var(--gw-you); }
.gw-face em { position: absolute; bottom: -.85em; left: 50%; transform: translateX(-50%); padding: .05em .35em; border-radius: .3em; background: var(--gw-you); color: #1a1400; font: 800 .55em/1.3 var(--gw-display); font-style: normal; letter-spacing: .06em; }
.gw-more { display: grid; place-items: center; min-width: 2.5em; height: 2.5em; padding: 0 .7em; border-radius: 999px; background: var(--gw-raised); color: var(--gw-dim); font-weight: 750; font-size: .82em; }
.gw-cap { display: flex; justify-content: space-between; gap: .6em; margin: 0; color: var(--gw-dim); font-size: .92em; }
.gw-cap b { color: var(--gw-fg); }

/* ended: your result, the places */
.gw-ended { display: grid; gap: .7em; }
.gw-result.gw-won { border-color: var(--gw-you); background: color-mix(in srgb, var(--gw-you) 12%, var(--gw-panel)); }
.gw-result h2 { margin: .15em 0 .2em; }
.gw-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; }
.gw-standings li { display: flex; align-items: center; gap: .65em; min-height: 2.5em; padding: .35em .7em; border-radius: calc(var(--gw-radius) - 4px); background: var(--gw-raised); }
.gw-standings .gw-place { min-width: 2.2em; flex: none; white-space: nowrap; color: var(--gw-faint); font-weight: 750; }
.gw-standings .gw-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.gw-standings li.gw-paid .gw-place, .gw-standings li.gw-paid b { color: var(--gw-you); }
.gw-standings li.gw-gap { margin-top: .5em; }
.gw-standings li.gw-me { box-shadow: inset 0 0 0 1.5px var(--gw-you); }

/* sheets (sign in, add to calendar) and the toast: inside the page, clear of the very bottom (X's post bar) */
.gw-sheet-wrap { position: fixed; inset: 0; z-index: 30; display: grid; align-items: end; justify-items: center; }
.gw-sheet-back { position: absolute; inset: 0; background: rgba(4, 5, 10, .62); }
.gw-sheet { position: relative; display: grid; gap: .7em; width: min(30em, 100%); max-height: 88%; overflow: auto; padding: .6em 16px calc(2.4em + env(safe-area-inset-bottom)); border-radius: 1.1em 1.1em 0 0;
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-bottom: 0; box-shadow: 0 -1em 3em rgba(0, 0, 0, .45); }
@media (min-width: 700px) { .gw-sheet-wrap { align-items: center; } .gw-sheet { border-radius: 1.1em; border-bottom: 1px solid var(--gw-line); padding-bottom: 1.3em; } }
.gw-sheet h2 { margin: .2em 0 0; font: var(--gw-display-weight) 1.25em/1.2 var(--gw-display); }
.gw-sheet p { margin: 0; color: var(--gw-dim); }
.gw-grab { justify-self: center; width: 2.6em; height: .3em; border-radius: 999px; background: var(--gw-line); }
.gw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.gw-cal-list { display: grid; gap: .4em; }
.gw-cal-row { display: grid; gap: .1em; padding: .75em .9em; border-radius: var(--gw-radius); background: var(--gw-raised); border: 1px solid var(--gw-line); color: var(--gw-fg); text-decoration: none; font-weight: 700; }
.gw-cal-row small { color: var(--gw-faint); font-weight: 500; }
.gw-toast { position: fixed; left: 50%; bottom: calc(5.5em + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; max-width: min(26em, calc(100% - 32px)); padding: .7em 1em; border-radius: 999px;
  background: var(--gw-fg); color: var(--gw-bg); font-weight: 650; font-size: .92em; text-align: center; box-shadow: 0 .5em 1.6em rgba(0, 0, 0, .4); }

/* ---- the owner's settings (giveaway-settings.js): the form, and the live preview beside it on a wide screen ---- */
.gws { min-height: 100%; background: var(--gw-bg); }
.gws-grid { display: grid; gap: 1.2em; max-width: 31em; margin: 0 auto; padding: 1em 16px 4em; }
@media (min-width: 1100px) {
  .gws-grid { max-width: 64em; grid-template-columns: minmax(0, 34em) minmax(0, 26em); column-gap: 2.4em; align-items: start; padding-top: 2em; }
  .gws-pv { position: sticky; top: 1em; }
}
.gws-form { display: grid; gap: .9em; min-width: 0; }
.gws-head { display: grid; gap: .3em; }
.gws-field { display: grid; gap: .3em; min-width: 0; margin-top: .6em; }
.gws-field:first-of-type { margin-top: 0; }
.gws-field > label { color: var(--gw-dim); font-size: .85em; font-weight: 650; }
.gws input { width: 100%; min-width: 0; min-height: 2.8em; padding: .55em .75em; border-radius: calc(var(--gw-radius) - 2px); border: 1px solid var(--gw-line); background: var(--gw-bg); color: var(--gw-fg); font: 600 1em/1.2 var(--gw-font); color-scheme: dark; }
.gws input:focus { outline: none; border-color: var(--gw-you); }
.gws input:disabled { opacity: .45; }
.gws input[readonly] { color: var(--gw-dim); background: transparent; }
.gws-bad input { border-color: var(--gw-bad); }
.gws-err { margin: 0; color: var(--gw-bad); font-size: .85em; font-weight: 600; }
.gws-err[hidden] { display: none; }
.gws-note { margin: 0; color: var(--gw-faint); font-size: .82em; }
.gws-two { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.gws-two .gws-field { margin-top: .6em; }
.gws-time { display: grid; gap: .25em; }
.gws-ny { color: var(--gw-faint); font-size: .8em; }
.gws-seg { display: flex; flex-wrap: wrap; gap: .35em; }
.gws-seg button { flex: 1 1 auto; min-height: 2.6em; padding: .45em .8em; border-radius: 999px; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-dim); font: 650 .9em/1.2 var(--gw-font); cursor: pointer; }
.gws-seg button[aria-pressed="true"] { color: var(--gw-fg); border-color: var(--gw-you); background: color-mix(in srgb, var(--gw-you) 10%, var(--gw-raised)); }
.gws-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .65em 0; border-top: 1px solid var(--gw-line); margin-top: .6em; }
.gws-toggle > span { display: grid; font-weight: 650; font-size: .95em; }
.gws-toggle small { color: var(--gw-faint); font-weight: 500; font-size: .85em; }
.gws-switch { flex: none; position: relative; width: 3em; height: 1.75em; border-radius: 999px; border: 1px solid var(--gw-line); background: var(--gw-raised); cursor: pointer; padding: 0; }
.gws-switch::after { content: ""; position: absolute; top: .18em; left: .2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--gw-faint); transition: transform .15s; }
.gws-switch[aria-checked="true"] { background: color-mix(in srgb, var(--gw-ok) 35%, var(--gw-raised)); border-color: var(--gw-ok); }
.gws-switch[aria-checked="true"]::after { transform: translateX(1.2em); background: var(--gw-ok); }
.gws-places { display: grid; gap: .3em; margin-top: .7em; }
.gws-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .35em .65em; border-radius: calc(var(--gw-radius) - 4px); background: var(--gw-raised); font-size: .93em; }
.gws-prow:has(input) { grid-template-columns: 5.5em minmax(0, 1fr) 3em; }
.gws-prow b { color: var(--gw-you); }
.gws-prow input { min-height: 2.3em; }
.gws-unit { color: var(--gw-faint); font-size: .85em; }
.gws-total { background: transparent; border-top: 1px solid var(--gw-line); border-radius: 0; }
.gws-total b { color: var(--gw-fg); }
.gws-funding { display: grid; gap: .45em; justify-items: start; margin-top: .8em; }
.gws-acts { display: grid; gap: .6em; }
.gws-problems { padding: .75em 1em; border-radius: var(--gw-radius); border: 1px solid var(--gw-bad); background: color-mix(in srgb, var(--gw-bad) 10%, var(--gw-panel)); color: var(--gw-fg); font-size: .92em; }
.gws-problems[hidden], .gws-done[hidden] { display: none; }
.gws-problems ul { margin: .35em 0 0; padding-left: 1.2em; color: var(--gw-dim); }
.gws-done { display: grid; gap: .45em; padding: .85em 1em; border-radius: var(--gw-radius); border: 1px solid var(--gw-ok); background: color-mix(in srgb, var(--gw-ok) 10%, var(--gw-panel)); }
.gws-done > span { color: var(--gw-dim); font-size: .92em; }
.gws-linkbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5em; align-items: center; }
.gws-linkbox code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .6em .75em; border-radius: calc(var(--gw-radius) - 2px); background: var(--gw-bg); border: 1px solid var(--gw-line); font: .85em var(--gw-mono); }
.gws-linkbox .gw-btn { width: auto; min-height: 2.6em; }
.gws-cancel { color: var(--gw-bad); }
.gws-cancel .gw-fill { background: color-mix(in srgb, var(--gw-bad) 35%, var(--gw-raised)); }
.gws-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.gws-chip { display: inline-flex; align-items: baseline; gap: .45em; min-height: 2.5em; padding: .4em .8em; border-radius: 999px; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-fg); font: 650 .88em/1.2 var(--gw-font); cursor: pointer; }
.gws-chip small { color: var(--gw-faint); font-weight: 500; }
.gws-chip[aria-pressed="true"] { border-color: var(--gw-you); }
.gws-pv { display: grid; gap: .6em; min-width: 0; }
.gws-pv-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; }
.gws-pv-head h2 { margin: 0; font: 750 .78em/1.2 var(--gw-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gw-dim); }
.gws-pv-head .gws-seg button { flex: none; }
.gws-frame { border: 1px solid var(--gw-line); border-radius: 1.2em; overflow: hidden; background: var(--gw-bg); }
.gw.gw-preview { position: relative; inset: auto; font-size: .78em; max-height: min(78vh, 60em); overflow: auto; }
.gw.gw-preview .gw-page { padding-bottom: 1.4em; }
.gws-pv-empty { padding: 2em 1.2em; text-align: center; }
.gws-toast { position: fixed; left: 50%; bottom: 2.5em; transform: translateX(-50%); z-index: 40; padding: .7em 1.1em; border-radius: 999px; background: var(--gw-fg); color: var(--gw-bg); font-weight: 650; font-size: .92em; box-shadow: 0 .5em 1.6em rgba(0, 0, 0, .4); }
.gws-toast-bad { background: var(--gw-bad); color: #fff; }

/* the game's own lobby panel (gfGiveaway.lobby mount) and faces the game draws (drawFace) */
.gw-slot { display: grid; gap: .6em; }
.gw-slot:empty { display: none; }
.gw-face.gw-drawn { background: var(--gw-raised); overflow: visible; }
.gw-face.gw-drawn > :not(em) { max-width: 100%; max-height: 100%; }
.gw-lockin-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: .2em; }
.gw-lockin-row b { font-size: 1.6em; }
.gws-round { display: grid; gap: .45em; margin-top: .3em; padding: .65em .75em; border-radius: calc(var(--gw-radius) - 2px); border: 1px dashed var(--gw-you); }
.gws-round-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.gws-round-btns .gw-btn { min-height: 2.6em; font-size: .92em; }

/* gf-multiplayer 1.26.0: the account in the page's flow, right under the main action (the giveaway page has no floating
   or header button): a guest's Enter is grayed out, its words unchanged, with a full-width Sign in under it; signed in,
   one quiet line "Signed in as @handle · Switch" */
.gw-btn-gold.gw-needs-signin, .gw-btn-gold.gw-needs-signin:disabled { opacity: .42; filter: grayscale(1); cursor: not-allowed; box-shadow: none; transform: none; }
.gw-signin-under { min-height: 3.1em; }
.gw-who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .35em; color: var(--gw-dim); font-size: .92em; }
.gw-who b { color: var(--gw-fg); font-weight: 650; overflow-wrap: anywhere; }
.gw-who .gw-switch { min-height: 44px; padding: 0 .4em; }
/* Run your own giveaway: a quiet action under the main one, never one that competes with it */
.gw-own { display: grid; }
.gw-btn-own { background: transparent; border: 1px dashed color-mix(in srgb, var(--gw-fg) 26%, var(--gw-line)); color: var(--gw-dim); font: 650 .92em/1.2 var(--gw-font);
  min-height: 2.9em; text-decoration: none; box-shadow: none; }
.gw-btn-own:hover { color: var(--gw-fg); border-color: color-mix(in srgb, var(--gw-fg) 45%, var(--gw-line)); }
.gw-again { display: grid; gap: .55em; }
@media (min-width: 560px) { .gw-again:has(> .gw-btn-own) { grid-template-columns: 1fr 1fr; align-items: start; } }
/* 1.27.0: the one step a player still needs for the giveaway's mode, right under the grayed-out Enter (Sign in with X,
   Add a wallet, Link X), why in one line, then who is signed in; "Use a wallet instead" for a giveaway anyone can enter */
.gw-steps-under { display: grid; gap: .45em; justify-items: stretch; text-align: center; }
.gw-steps-under .gw-small { text-align: center; }
.gw-alt { min-height: 44px; justify-self: center; color: var(--gw-dim); font-size: .92em; }
/* 1.36.0: the prize, How it works, Who can enter and the fine print, folded under Details (one column) */
.gw-details { border: 1px solid var(--gw-line); border-radius: var(--gw-radius); background: var(--gw-panel); }
.gw-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .2em 1em; font-weight: 700; color: var(--gw-fg); }
.gw-details > summary::-webkit-details-marker { display: none; }
.gw-details > summary::after { content: '+'; font-size: 1.3em; color: var(--gw-dim); }
.gw-details[open] > summary::after { content: '\2212'; }
.gw-details[open] { display: grid; gap: .8em; padding-bottom: 1em; }
.gw-details > :not(summary) { margin: 0 1em; }
.gw-claimed { margin: .4em 0 0; font-weight: 800; color: var(--gw-ok, #4fe3a6); }
/* 1.38.0: the winner's secret code */
.gw-codebox { display: grid; gap: .4em; padding: .8em 1em; border: 2px dashed var(--gw-action); border-radius: var(--gw-radius); background: var(--gw-panel); }
.gw-coderow { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.gw-code { font: 800 1.35em/1.2 ui-monospace, monospace; letter-spacing: .04em; word-break: break-all; color: var(--gw-fg); }
.gw-copy { min-height: 44px; }
/* 1.42.0: the organizer's Draw now (under the main action while entries are open) */
.gw-drawnow { display: grid; gap: .5em; }
.gw-drawnow .gw-small { margin: 0; color: var(--gw-dim); font-size: .9em; }
.gw-drawnow .gw-err { color: var(--gw-bad); }