/* games.fun multiplayer kit: player.css v1.29.0, the one player button and its sheet (signin.js) and the event parts
   of that sheet (giveaway-admin.js: Your prizes, Run an event). Kit-owned (never edit a copy). MIT.
   Every colour, font and radius is a --gw-* custom property, as on the giveaway page (giveaway.css): the defaults are the
   friends page's own look (party.css --mp-*); a game with a giveaway block passes its own (multiplayer.json
   giveaway.theme, set on #gf-player-root by gfGiveaway.theme). 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 sheet, readable. */
html.gf-player-on {
  --gf-player-fs: clamp(15px, min(1.15vw, 1.9vh), 34px);
  --gf-player-h: max(44px, calc(var(--gf-player-fs) * 2.55));
  /* the room every lobby screen keeps at its top for the button (party.css, giveaway.css, vendor/gf.js read it) */
  --gf-top: calc(var(--gf-player-h) + 12px + env(safe-area-inset-top, 0px));
}
/* a short, wide screen (a phone held sideways): the room is beside the button, not over the lobby's rows */
@media (max-height: 520px) and (min-width: 560px) {
  html.gf-player-on { --gf-top: 0px; --gf-right: calc(var(--gf-player-w, 96px) + 16px); }
}
.gfpl {
  --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-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);
  /* the box that lays the button and the sheet out covers the screen and takes no press: only its parts do */
  position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  font-size: var(--gf-player-fs, 15px); line-height: 1.35; font-family: var(--gw-font); color: var(--gw-fg);
}
.gfpl[hidden] { display: none; }
.gfpl *, .gfpl *::before, .gfpl *::after { box-sizing: border-box; }
.gfpl :focus-visible { outline: 2px solid var(--gw-you); outline-offset: 2px; }

/* ---- the button: one size, one spot (top right unless that covers a control of the game's) ---- */
.gfpl .pl-btn { position: absolute; z-index: 2; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; height: var(--gf-player-h, 44px); min-width: 44px;
  max-width: min(13em, calc(100vw - 16px)); padding: 0 1.05em; border-radius: 999px; border: 1px solid var(--gw-action); background: var(--gw-action); color: var(--gw-action-fg);
  font: 750 .95em/1 var(--gw-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 .25em 1em rgba(0, 0, 0, .35); }
.gfpl .pl-btn.in { background: color-mix(in srgb, var(--gw-panel) 94%, transparent); border-color: color-mix(in srgb, var(--gw-fg) 22%, var(--gw-line)); color: var(--gw-fg); }
.gfpl .pl-btn.wait { opacity: .9; }
/* 1.25.0: a participation NFT to claim that the sheet has not shown yet: a small dot on the button, inside its edge */
.gfpl .pl-btn.pl-claim-dot { padding-right: 1.55em; }
.gfpl .pl-btn.pl-claim-dot::after { content: ""; position: absolute; top: 50%; right: .7em; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%;
  background: var(--gw-ok); box-shadow: 0 0 0 .14em color-mix(in srgb, var(--gw-ok) 30%, transparent); }
.gfpl .pl-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--gw-you), 0 .25em 1em rgba(0, 0, 0, .35); }
.gfpl.top-right .pl-btn, .gfpl.top-left .pl-btn, .gfpl.top .pl-btn { top: max(8px, env(safe-area-inset-top, 0px)); }
.gfpl.bottom-right .pl-btn, .gfpl.bottom-left .pl-btn, .gfpl.bottom .pl-btn { bottom: calc(8px + var(--gf-bubble, 0px)); }
.gfpl.top-right .pl-btn, .gfpl.bottom-right .pl-btn { right: max(8px, env(safe-area-inset-right, 0px)); }
.gfpl.top-left .pl-btn, .gfpl.bottom-left .pl-btn { left: max(8px, env(safe-area-inset-left, 0px)); }
.gfpl.top .pl-btn, .gfpl.bottom .pl-btn { left: 50%; transform: translateX(-50%); }

/* ---- the sheet: under the button (over it when the button is at the bottom), one column, scrolls inside itself ---- */
.gfpl .pl-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: auto; }
.gfpl .pl-back { position: absolute; inset: 0; background: rgba(4, 5, 10, .55); }
.gfpl .pl-sheet { position: absolute; top: calc(var(--gf-player-h, 44px) + 14px + env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px));
  width: min(25em, calc(100vw - 16px)); max-height: calc(100dvh - var(--gf-player-h, 44px) - 22px - var(--gf-bubble, 0px)); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: .7em; align-content: start; padding: .85em 1em 1.1em; border-radius: calc(var(--gw-radius) + 6px);
  background: var(--gw-panel); border: 1px solid var(--gw-line); box-shadow: 0 1.2em 3em rgba(0, 0, 0, .5); }
.gfpl .pl-sheet.wide { width: min(36em, calc(100vw - 16px)); }
.gfpl.top-left .pl-sheet, .gfpl.bottom-left .pl-sheet { right: auto; left: max(8px, env(safe-area-inset-left, 0px)); }
.gfpl.top .pl-sheet, .gfpl.bottom .pl-sheet { right: auto; left: 50%; transform: translateX(-50%); }
.gfpl.bottom-right .pl-sheet, .gfpl.bottom-left .pl-sheet, .gfpl.bottom .pl-sheet { top: auto; bottom: calc(var(--gf-player-h, 44px) + 14px + var(--gf-bubble, 0px)); }
@media (max-width: 560px) { .gfpl[class] .pl-sheet, .gfpl[class] .pl-sheet.wide { left: 8px; right: 8px; width: auto; transform: none; } }
.gfpl .pl-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 2.6em; }
.gfpl .pl-head h2 { margin: 0; font: var(--gw-display-weight) 1.2em/1.2 var(--gw-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gfpl .pl-x { flex: none; width: max(44px, 2.6em); height: max(44px, 2.6em); border-radius: 50%; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-fg); font: 700 1.3em/1 var(--gw-font); cursor: pointer; }
.gfpl .pl-backbtn { min-height: max(44px, 2.6em); padding: 0 .9em; border-radius: 999px; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-fg); font: 650 .95em/1 var(--gw-font); cursor: pointer; }
.gfpl .pl-who, .gfpl .pl-card { display: grid; gap: .55em; padding: .8em .9em; border-radius: var(--gw-radius); background: color-mix(in srgb, var(--gw-raised) 70%, var(--gw-panel)); border: 1px solid var(--gw-line); min-width: 0; }
.gfpl .pl-card h3 { margin: 0; font: var(--gw-display-weight) .78em/1.2 var(--gw-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gw-dim); }
.gfpl p { margin: 0; overflow-wrap: anywhere; }
.gfpl .pl-level { color: var(--gw-dim); font-size: .92em; }
.gfpl .pl-small { color: var(--gw-faint); font-size: .85em; }
.gfpl .pl-err { color: var(--gw-bad); font-size: .9em; font-weight: 600; }
.gfpl .pl-warn { color: var(--gw-you); font-size: .92em; font-weight: 650; }
.gfpl .pl-warn::before { content: "\26A0\FE0E  "; }
.gfpl .pl-warn[hidden] { display: none; }
.gfpl .pl-ok { color: var(--gw-ok); font-weight: 650; }
.gfpl .pl-code { font: 800 1.45em/1.2 var(--gw-mono); letter-spacing: .06em; word-break: break-all; }
.gfpl .pl-acts { display: flex; flex-wrap: wrap; gap: .45em; }
.gfpl .pl-acts > * { flex: 1 1 7em; }
.gfpl .pl-go, .gfpl .pl-quiet, .gfpl .pl-row { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: max(44px, 2.9em); padding: .55em 1em;
  border-radius: calc(var(--gw-radius) + 2px); font: 700 1em/1.2 var(--gw-font); text-decoration: none; cursor: pointer; text-align: center; touch-action: manipulation; }
.gfpl .pl-go { background: var(--gw-action); border: 1px solid var(--gw-action); color: var(--gw-action-fg); box-shadow: 0 .2em 0 var(--gw-action-edge); }
.gfpl .pl-quiet { background: var(--gw-raised); border: 1px solid var(--gw-line); color: var(--gw-fg); font-weight: 650; }
.gfpl .pl-go:disabled, .gfpl .pl-quiet:disabled, .gfpl .pl-row:disabled { opacity: .55; cursor: default; box-shadow: none; }
.gfpl .pl-row { display: grid; justify-items: start; justify-content: stretch; align-content: center; gap: .1em; text-align: left; background: var(--gw-raised); border: 1px solid var(--gw-line); color: var(--gw-fg); }
.gfpl .pl-row small { color: var(--gw-faint); font-size: .8em; font-weight: 500; }
.gfpl .pl-row.live .pl-label::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: #ff4d5e; vertical-align: .08em; }
.gfpl .pl-row.quiet { background: transparent; }
.gfpl .pl-make { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: .2em .6em; color: var(--gw-faint); font-size: .85em; text-decoration: none; }
.gfpl .pl-make b { color: var(--gw-dim); margin-right: .25em; }
.gfpl .pl-make:hover { color: var(--gw-fg); }

/* ---- the giveaway parts (giveaway-admin.js): Your prizes, your giveaways, the setup form ---- */
.gfpl .pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.gfpl .pl-list li { display: grid; gap: .4em; padding: .6em .7em; border-radius: calc(var(--gw-radius) - 2px); background: var(--gw-panel); border: 1px solid var(--gw-line); }
.gfpl .pl-list li b { font-weight: 750; }
.gfpl .pl-list .pl-meta { color: var(--gw-faint); font-size: .85em; }
.gfpl .pl-state { justify-self: start; padding: .2em .65em; border-radius: 999px; font-size: .78em; font-weight: 700; background: var(--gw-raised); color: var(--gw-dim); }
.gfpl .pl-state.open, .gfpl .pl-state.upcoming { color: var(--gw-ok); }
.gfpl .pl-state.drawing { color: var(--gw-you); }
.gfpl .pl-progress { display: flex; align-items: center; gap: .55em; color: var(--gw-you); font-weight: 650; font-size: .92em; }
.gfpl .pl-progress i { flex: none; width: 1em; height: 1em; border-radius: 50%; border: .15em solid currentColor; border-right-color: transparent; animation: pl-spin .8s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
.gfpl .gwa-form { display: grid; gap: .7em; }
.gfpl .gwa-form h2 { margin: 0; font: var(--gw-display-weight) 1.35em/1.15 var(--gw-display); }
.gfpl .gwa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: .6em .7em; }
.gfpl .gwa-grid .wide { grid-column: 1 / -1; }
.gfpl label.gwa-f { display: grid; gap: .3em; min-width: 0; color: var(--gw-dim); font-size: .88em; font-weight: 650; }
.gfpl .gwa-f input, .gfpl .gwa-f select, .gfpl .gwa-opt select, .gfpl .gwa-opt input { width: 100%; min-width: 0; min-height: max(44px, 2.8em); padding: .5em .7em; border-radius: calc(var(--gw-radius) - 2px);
  border: 1px solid var(--gw-line); background: var(--gw-bg); color: var(--gw-fg); font: 600 1.05em/1.2 var(--gw-font); color-scheme: dark; }
.gfpl .gwa-f input:focus, .gfpl .gwa-f select:focus, .gfpl .gwa-opt input:focus { outline: none; border-color: var(--gw-you); }
.gfpl .gwa-f input:disabled, .gfpl .gwa-f select:disabled { opacity: .5; }
.gfpl .gwa-kinds { display: flex; flex-wrap: wrap; gap: .4em; }
/* 1.38.0: secret codes, folded under the draw's and the NFT's parts */
.gfpl .gwa-codes { border: 1px solid var(--gw-line); border-radius: var(--gw-radius); padding: 0 .8em; }
.gfpl .gwa-codes[open] { display: grid; gap: .6em; padding-bottom: .8em; }
.gfpl .gwa-codes > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--gw-fg); }
.gfpl .gwa-codes-list { width: 100%; min-width: 0; padding: .5em .7em; 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.35 ui-monospace, monospace; resize: vertical; color-scheme: dark; }
.gfpl .pl-coderow { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; grid-column: 1 / -1; }
.gfpl .pl-hostlist { display: grid; gap: .3em; grid-column: 1 / -1; }
.gfpl .gw-code, .gfpl .pl-code { font: 800 1.15em/1.2 ui-monospace, monospace; letter-spacing: .04em; word-break: break-all; }
.gfpl .gwa-kinds button { flex: 1 1 auto; min-height: max(44px, 2.6em); padding: .4em .85em; border-radius: 999px; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-dim); font: 650 .92em/1.2 var(--gw-font); cursor: pointer; }
.gfpl .gwa-kinds button[aria-checked="true"] { color: var(--gw-fg); border-color: var(--gw-you); background: color-mix(in srgb, var(--gw-you) 14%, var(--gw-raised)); }
.gfpl .gwa-nfts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4em, 1fr)); gap: .45em; }
.gfpl .gwa-nfts button { position: relative; display: grid; gap: .2em; width: 100%; padding: .35em; border-radius: calc(var(--gw-radius) - 2px); border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-fg); text-align: left; cursor: pointer; font: 600 .78em/1.2 var(--gw-font); }
.gfpl .gwa-nfts button[aria-pressed="true"] { border-color: var(--gw-you); box-shadow: inset 0 0 0 1px var(--gw-you); }
.gfpl .gwa-nfts img, .gfpl .gwa-nfts .blank { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--gw-radius) - 5px); background: var(--gw-panel); display: block; }
.gfpl .gwa-nfts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfpl .gwa-nfts small { color: var(--gw-faint); }
.gfpl .gwa-nfts b { position: absolute; top: .3em; right: .3em; display: grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 999px; background: var(--gw-you); color: #1a1400; font-size: .9em; }
.gfpl .gwa-opt { display: grid; gap: .45em; padding: .6em; border: 1px solid var(--gw-line); border-radius: calc(var(--gw-radius) - 2px); background: var(--gw-panel); }
.gfpl .gwa-opt-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .45em; align-items: end; }
.gfpl .gwa-chance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em .45em; align-items: center; color: var(--gw-dim); font-size: .85em; font-weight: 650; }
.gfpl .gwa-chance > span:first-child { grid-column: 1 / -1; }
.gfpl .gwa-sum { color: var(--gw-dim); font-size: .9em; padding: .55em .7em; border-radius: calc(var(--gw-radius) - 2px); border: 1px dashed var(--gw-line); }
.gfpl .gwa-link { display: flex; flex-wrap: wrap; gap: .45em; align-items: flex-start; }
.gfpl .gwa-link code { flex: 1 1 14em; min-width: 0; padding: .6em .7em; border-radius: calc(var(--gw-radius) - 2px); background: var(--gw-bg); border: 1px solid var(--gw-line); font: 600 .85em/1.35 var(--gw-mono); overflow-wrap: anywhere; color: var(--gw-fg); }
.gfpl .gwa-link .pl-go { flex: 0 0 auto; min-width: 6em; }
.gfpl .gwa-done { border-color: var(--gw-ok); background: color-mix(in srgb, var(--gw-ok) 9%, var(--gw-panel)); }
.gfpl .gwa-done h2 { color: var(--gw-ok); }

/* ---- 1.25.0: participation NFTs (Your prizes' rows, the event form's sections, the picture, traits, supply) ---- */
.gfpl .pl-in { display: flex; align-items: center; gap: .5em; padding: .55em .7em; border-radius: calc(var(--gw-radius) - 2px); font-weight: 750; color: var(--gw-ok);
  background: color-mix(in srgb, var(--gw-ok) 12%, var(--gw-panel)); border: 1px solid color-mix(in srgb, var(--gw-ok) 45%, var(--gw-line)); }
.gfpl .pl-in::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--gw-ok); }
.gfpl .pl-list li.pl-nftrow { grid-template-columns: 3.4em minmax(0, 1fr); align-items: center; column-gap: .7em; }
.gfpl .pl-thumb { width: 3.4em; height: 3.4em; border-radius: calc(var(--gw-radius) - 4px); object-fit: cover; background: var(--gw-raised); display: block; }
.gfpl .pl-thumb.blank { background: linear-gradient(135deg, var(--gw-raised), color-mix(in srgb, var(--gw-accent) 25%, var(--gw-raised))); }
.gfpl .pl-what { display: grid; gap: .15em; min-width: 0; }
.gfpl .pl-what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfpl .pl-rowact { grid-column: 1 / -1; display: grid; gap: .4em; }
.gfpl .gwa-sec { display: grid; gap: .65em; padding: .7em; border-radius: var(--gw-radius); border: 1px solid var(--gw-line); background: color-mix(in srgb, var(--gw-raised) 45%, var(--gw-panel)); min-width: 0; }
.gfpl .gwa-sec.on { border-color: color-mix(in srgb, var(--gw-you) 55%, var(--gw-line)); }
.gfpl .gwa-switch { display: flex; align-items: center; gap: .75em; width: 100%; min-height: max(44px, 2.8em); padding: .2em .1em; border: 0; background: none; color: var(--gw-fg); text-align: left; cursor: pointer; font: inherit; }
.gfpl .gwa-switch:disabled { opacity: .6; cursor: default; }
.gfpl .gwa-sw { position: relative; flex: none; width: 2.6em; height: 1.5em; border-radius: 999px; background: var(--gw-bg); border: 1px solid var(--gw-line); transition: background .15s; }
.gfpl .gwa-sw::after { content: ""; position: absolute; top: .16em; left: .18em; width: 1.08em; height: 1.08em; border-radius: 50%; background: var(--gw-dim); transition: transform .15s, background .15s; }
.gfpl .gwa-switch[aria-checked="true"] .gwa-sw { background: var(--gw-action); border-color: var(--gw-action); }
.gfpl .gwa-switch[aria-checked="true"] .gwa-sw::after { transform: translateX(1.1em); background: var(--gw-action-fg); }
.gfpl .gwa-swtext { display: grid; gap: .1em; min-width: 0; }
.gfpl .gwa-swtext b { font-weight: 800; font-size: 1.02em; }
.gfpl .gwa-swtext small { color: var(--gw-faint); font-size: .82em; font-weight: 500; }
.gfpl .gwa-types button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em; }
.gfpl .gwa-types button:disabled { opacity: .55; cursor: default; border-style: dashed; }
.gfpl .gwa-soon { font-size: .74em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gw-faint); }
.gfpl .gwa-nft { display: grid; grid-template-columns: minmax(7.5em, 10em) minmax(0, 1fr); gap: .8em; align-items: start; }
@media (max-width: 420px) { .gfpl .gwa-nft { grid-template-columns: minmax(0, 1fr); } .gfpl .gwa-artcol { max-width: 12em; } }
.gfpl .gwa-artcol { display: grid; gap: .4em; min-width: 0; }
.gfpl .gwa-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: var(--gw-radius); overflow: hidden; cursor: pointer;
  border: 2px dashed var(--gw-line); background: var(--gw-bg); color: var(--gw-dim); }
.gfpl .gwa-art.has { border-style: solid; border-color: var(--gw-line); }
.gfpl .gwa-art:hover, .gfpl .gwa-artcol:focus-within .gwa-art { border-color: var(--gw-you); }
.gfpl .gwa-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gfpl .gwa-art-empty { display: grid; justify-items: center; gap: .15em; font-weight: 650; font-size: .9em; text-align: center; padding: .4em; }
.gfpl .gwa-art-empty b { font-size: 2em; line-height: 1; font-weight: 400; }
.gfpl .gwa-art-busy { position: absolute; left: .4em; right: .4em; bottom: .4em; justify-content: center; padding: .35em .5em; border-radius: 999px; background: rgba(0, 0, 0, .65); font-size: .8em; }
.gfpl .gwa-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.gfpl .gwa-art-ok { font-size: .82em; overflow-wrap: anywhere; }
.gfpl .gwa-art-change { min-height: max(44px, 2.6em); font-size: .88em; }
.gfpl .gwa-nft-fields { grid-template-columns: minmax(0, 1fr); align-content: start; }
.gfpl div.gwa-f { display: grid; gap: .3em; min-width: 0; color: var(--gw-dim); font-size: .88em; font-weight: 650; }
.gfpl div.gwa-f > .gwa-traits, .gfpl div.gwa-f > .gwa-supply { font-size: calc(1em / .88); font-weight: 600; }
.gfpl .gwa-traits { display: grid; gap: .4em; }
.gfpl .gwa-trait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: .4em; align-items: center; }
.gfpl .gwa-trait input, .gfpl .gwa-supply input { width: 100%; min-width: 0; min-height: max(44px, 2.8em); padding: .5em .7em; 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; }
.gfpl .gwa-trait input:focus, .gfpl .gwa-supply input:focus { outline: none; border-color: var(--gw-you); }
.gfpl .gwa-trait-x { width: max(44px, 2.8em); padding: 0; font-size: 1.2em; }
.gfpl .gwa-add { justify-self: start; min-height: max(44px, 2.6em); font-size: .92em; }
.gfpl .gwa-supply { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.gfpl .gwa-supply button { flex: 0 0 auto; min-height: max(44px, 2.6em); padding: .4em .95em; border-radius: 999px; border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-dim); font: 650 .92em/1.2 var(--gw-font); cursor: pointer; }
.gfpl .gwa-supply button[aria-checked="true"] { color: var(--gw-fg); border-color: var(--gw-you); background: color-mix(in srgb, var(--gw-you) 14%, var(--gw-raised)); }
.gfpl .gwa-supply input { flex: 1 1 6em; max-width: 9em; }
.gfpl .gwa-supply input:disabled { opacity: .5; }

/* ---- gf-multiplayer 1.26.0: the button docked in a screen's header row (signin.js dockOf) ----
   Part of the screen, not over it: it sits at the right end of the eyebrow's line, in the screen's own colours (the
   giveaway theme's --gw-*, else the friends page's --mp-*), and scrolls with the page. A guest sees a quiet "Sign in"
   (link-style: the screen's main action stays the one big button); signed in, a small chip with who you are. Its press
   target stays at least 44 px tall. */
html.gf-player-docked { --gf-player-fs: clamp(15px, min(1.15vw, 1.9vh), 34px); --gf-player-h: max(44px, calc(var(--gf-player-fs) * 2.55)); --gf-top: 0px; --gf-right: 0px; }
.pl-btn.pl-docked { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; min-width: 44px;
  max-width: min(14em, 52vw); margin: 0 -6px 0 0; padding: 0 .75em; border: 0; border-radius: 999px; background: transparent;
  color: var(--gw-dim, var(--mp-muted, #b8bfd2)); font: 650 13px/1 var(--gw-font, var(--mp-font, system-ui, -apple-system, "Segoe UI", sans-serif));
  letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; touch-action: manipulation;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); box-shadow: none; }
.pl-btn.pl-docked:hover { color: var(--gw-fg, var(--mp-fg, #eef0f6)); }
.pl-btn.pl-docked:focus-visible { outline: 2px solid var(--gw-you, var(--mp-code, #ffd166)); outline-offset: 2px; }
.pl-btn.pl-docked.in { text-decoration: none; color: var(--gw-fg, var(--mp-fg, #eef0f6)); padding: 0 .85em; margin-right: 0;
  background: color-mix(in srgb, var(--gw-raised, var(--mp-row, #232735)) 85%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gw-fg, var(--mp-fg, #eef0f6)) 16%, transparent); }
.pl-btn.pl-docked[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--gw-you, var(--mp-code, #ffd166)); }
.pl-btn.pl-docked.pl-claim-dot { padding-right: 1.5em; }
.pl-btn.pl-docked.pl-claim-dot::after { content: ""; position: absolute; top: 50%; right: .6em; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--gw-ok, var(--mp-ok, #3ddc84)); }
@media (min-width: 900px) { .pl-btn.pl-docked { font-size: clamp(13px, .82vw, 26px); } }
/* the sheet opens under the docked button, or over it in the screen's bottom half (signin.js sheetAt sets where), or at
   the top right when the game opened it from its own HUD */
/* the sheet's box takes no press itself while docked: the backdrop leaves a hole over the button (signin.js sheetAt) */
.gfpl.docked .pl-wrap { pointer-events: none; }
.gfpl.docked .pl-back, .gfpl.docked .pl-sheet { pointer-events: auto; }
.gfpl.docked .pl-sheet { top: calc(8px + env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px));
  max-height: calc(100dvh - 16px - var(--gf-bubble, 0px)); }
/* 1.27.0: X first. Signed out: Sign in with X (the main button), "Use a wallet instead" smaller under it; signed in with
   X only: "No wallet yet" and Add a wallet; Who can enter (Run an event's four modes); Add a wallet in Your prizes. */
.gfpl .pl-alt { min-height: 44px; padding: .4em .9em; background: transparent; border-color: transparent; color: var(--gw-dim); font-weight: 600; font-size: .9em; text-decoration: underline; text-underline-offset: .2em; }
.gfpl .pl-alt:hover:not(:disabled) { color: var(--gw-fg); }
.gfpl .pl-nowallet { font-weight: 700; color: var(--gw-fg); }
.gfpl .pl-needwallet { display: grid; gap: .45em; justify-items: stretch; }
.gfpl .pl-walletapps { display: flex; flex-wrap: wrap; gap: .45em; }
.gfpl .pl-walletapps > * { flex: 1 1 10em; }
.gfpl .pl-backapp { display: grid; gap: .3em; padding: .8em 1em; border-radius: 14px; background: var(--gw-raised, rgba(255,255,255,.08)); border: 1px solid var(--gw-line, rgba(255,255,255,.15)); }
.gfpl .pl-row.hot { border-color: var(--gw-action, #ffcb3d); }
.gfpl .pl-row.hot small { color: var(--gw-action, #ffcb3d); font-weight: 700; }
.gfpl .pl-head .pl-subback { min-height: 2.4em; padding: 0 .8em; margin-right: .2em; }
.gfpl .pl-in-wallet { color: var(--gw-dim); font-size: .85em; }
.gfpl .gwa-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); gap: .45em; }
.gfpl .gwa-who button { display: grid; gap: .15em; text-align: left; min-height: max(44px, 3.4em); padding: .55em .8em; border-radius: calc(var(--gw-radius) - 2px); border: 1px solid var(--gw-line);
  background: var(--gw-raised); color: var(--gw-fg); font: inherit; font-weight: 650; cursor: pointer; }
.gfpl .gwa-who button small { color: var(--gw-faint); font-weight: 500; font-size: .82em; }
.gfpl .gwa-who button[aria-checked="true"] { border-color: var(--gw-you); box-shadow: inset 0 0 0 1px var(--gw-you); background: color-mix(in srgb, var(--gw-you) 14%, var(--gw-raised)); }
.gfpl .gwa-who button:disabled { opacity: .55; cursor: default; }
/* 1.28.0: the Collection step in Run an event (giveaway-admin.js): the admin's collections as choices, the room for
   compressed NFTs, and Make / Import / Add room with their sizes; one column on a phone */
.gfpl .gwa-coll { display: grid; gap: .6em; }
.gfpl .gwa-coll-head { display: grid; gap: .1em; }
.gfpl .gwa-coll-head b { font-size: 1.02em; }
.gfpl .gwa-colls button span, .gfpl .gwa-sizes button span { overflow-wrap: anywhere; }
.gfpl .gwa-room { margin: 0; font-weight: 700; color: var(--gw-ok); }
.gfpl .gwa-room.short { color: var(--gw-you); }
.gfpl .gwa-coll-acts { display: flex; flex-wrap: wrap; gap: .45em; }
.gfpl .gwa-coll-acts > * { flex: 1 1 10em; }
.gfpl .gwa-coll-form { display: grid; gap: .6em; padding: .75em; border-radius: calc(var(--gw-radius) - 2px); border: 1px dashed var(--gw-line); min-width: 0; }
.gfpl .gwa-coll-form h4 { margin: 0; font-size: .95em; }
.gfpl .gwa-coll-art { max-width: 9em; }
/* 1.28.1: Run an event starts with "What are you running?": three big choices side by side (Giveaway draw, Participation
   NFT, Both); the parts it turns on follow with a plain heading, no switch */
.gfpl .gwa-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.gfpl .gwa-what button { display: grid; align-content: start; gap: .2em; min-height: max(44px, 4.2em); padding: .6em .65em; text-align: left; border-radius: calc(var(--gw-radius) - 2px);
  border: 1px solid var(--gw-line); background: var(--gw-raised); color: var(--gw-fg); font: inherit; cursor: pointer; min-width: 0; }
.gfpl .gwa-what button b { font-size: 1em; line-height: 1.2; overflow-wrap: anywhere; }
.gfpl .gwa-what button small { color: var(--gw-faint); font-size: .78em; line-height: 1.25; }
.gfpl .gwa-what button[aria-checked="true"] { border-color: var(--gw-you); box-shadow: inset 0 0 0 2px var(--gw-you); background: color-mix(in srgb, var(--gw-you) 16%, var(--gw-raised)); }
.gfpl .gwa-what button:disabled { opacity: .55; cursor: default; }
.gfpl .gwa-part-head { display: grid; gap: .1em; }
.gfpl .gwa-part-head b { font-size: 1.05em; }
.gfpl .gwa-part-head small { color: var(--gw-faint); font-size: .85em; }
/* 1.29.0: Run an event full screen: a page of its own over the friends page (opaque), its column centred and larger on a
   computer (about 46em wide at a type size that follows the screen), the whole width on a phone; a Back arrow on top */
.gfpl[class] .pl-wrap.full .pl-back { background: var(--gw-bg); }
.gfpl[class] .pl-wrap.full .pl-sheet.full { position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: 100dvh; max-height: none; transform: none;
  border: 0; border-radius: 0; box-shadow: none; background: var(--gw-bg); font-size: clamp(15px, min(1.25vw, 2.1vh), 34px); gap: .9em;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, calc((100% - 46em) / 2)) max(28px, env(safe-area-inset-bottom, 0px)); }
.gfpl .pl-fullhead { position: sticky; top: calc(-1 * max(10px, env(safe-area-inset-top, 0px))); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .6em;
  padding: .55em 0; background: var(--gw-bg); border-bottom: 1px solid var(--gw-line); }
.gfpl .pl-fullwho { color: var(--gw-dim); font-weight: 700; font-size: .92em; overflow-wrap: anywhere; }
.gfpl .pl-fulltitle { margin: .3em 0 0; font: var(--gw-display-weight, 800) 1.6em/1.15 var(--gw-display); color: var(--gw-fg); }
/* 1.39.0: the room's event line in the main sheet */
.gfpl .pl-room-event { color: var(--gw-fg); border-left: 3px solid var(--gw-action); padding: 6px 10px; margin: 8px 0; background: var(--gw-raised); border-radius: 8px; }
.gfpl .pl-room-event[data-you="in"] { border-left-color: var(--gw-ok); }
/* 1.40.0: the room's event card in the main sheet (rules, lottery, what stands in the way, the host's counts) */
.gfpl .pl-room-card { display: grid; gap: .45em; margin: 8px 0; }
.gfpl .pl-room-card .pl-room-event { margin: 0; }
.gfpl .pl-room-card > p { margin: 0; }
.gfpl .pl-room-card .pl-gate { margin: 0; }
.gfpl .pl-room-results { display: grid; gap: .3em; padding: .6em .8em; border-radius: 8px; background: var(--gw-raised); }
.gfpl .pl-room-results ol { margin: 0; }
.gfpl .pl-room-results li.mine { color: var(--gw-ok); font-weight: 750; }
/* 1.41.0: a paid lottery's next step (Draw the winners, Pay the winners) and the oracle's wait */
.gfpl .pl-lotstep { display: grid; gap: .4em; margin: 0; }
.gfpl .pl-lotstep .pl-small { margin: 0; }
.gfpl .pl-wait { display: flex; align-items: center; gap: .5em; color: var(--gw-fg); }
.gfpl .pl-spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--gw-line); border-top-color: var(--gw-action); animation: gfpl-spin .8s linear infinite; }
@keyframes gfpl-spin { to { transform: rotate(360deg); } }
.gfpl .pl-step-small { justify-self: start; }
/* 1.42.0: the organizer's Draw now and its confirm */
.gfpl .pl-drawnowbox { display: grid; gap: .4em; margin: 0; }
.gfpl .pl-confirm .pl-acts { display: flex; gap: .5em; flex-wrap: wrap; }