/* GIVEAWAYS — full-width panel under the race banner, plus the pinned card at the top of chat.
   When nothing is running the panel is removed from the DOM entirely — no placeholder. */

.gw-strip {
  margin: 0 0 14px;
  padding: 14px 16px 15px;
  border: 1px solid #322a46;
  border-radius: 11px;
  background:
    radial-gradient(90% 200% at 100% 0%, rgba(140, 87, 238, .14), rgba(140, 87, 238, 0) 60%),
    linear-gradient(180deg, #1b1528, #141119);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.gw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.gw-head b {
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid rgba(165, 107, 255, .38); background: rgba(165, 107, 255, .14);
  color: #d9c4ff; font: 700 9px "DM Mono", monospace; letter-spacing: .19em;
}

.gw-list { display: flex; flex-direction: column; gap: 8px; }

/* SPREAD, not one greedy track. With `auto 1fr 106px 88px 74px auto` the host column absorbed every spare
   pixel, so on a wide screen the art sat alone on the left and everything else clumped on the right with a
   ~900px hole between them. Flexible tracks share the slack instead, so the row stays filled at any width. */
.gw-card {
  display: grid;
  grid-template-columns: auto minmax(140px, 1.6fr) minmax(96px, 1fr) minmax(84px, 1fr) minmax(72px, .9fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 15px;
  border: 1px solid #332c46;
  border-radius: 9px;
  background: linear-gradient(180deg, #1d1729, #17131f);
  transition: border-color .15s ease, background .15s ease;
}
.gw-card:hover { border-color: #4a3d68; background: linear-gradient(180deg, #221a31, #191424); }

.gw-items { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.gw-items img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.gw-more { flex: 0 0 auto; color: #b6a8d4; font: 700 12px "DM Mono", monospace; margin-left: 3px; }

.gw-who { min-width: 0; }
.gw-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f6f1ff; font: 700 14px Manrope, Inter, sans-serif; }
.gw-who small { display: block; margin-top: 3px; color: #8b8399; font: 500 9.5px "DM Mono", monospace; }

.gw-val { display: inline-flex; align-items: center; gap: 7px; color: #e9dcff; font: 700 18px "Space Grotesk", sans-serif; white-space: nowrap; }
.gw-val .g-coin { display: inline-block; width: 21px; height: 21px; background: url("assets/godlyflip-token.png") center/150% no-repeat; flex: 0 0 auto; }
.gw-ent { color: #9d94ad; font: 500 10.5px "DM Mono", monospace; white-space: nowrap; }
.gw-time { color: #c9b0ff; font: 700 13px "DM Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

.gw-join {
  justify-self: end;
  min-width: 96px;
  border: 1px solid rgba(178, 128, 255, .7); border-radius: 6px;
  background: linear-gradient(180deg, #8f5bf0, #6c3cc4);
  color: #fff; padding: 11px 17px; font: 700 10px "DM Mono", monospace; letter-spacing: .11em; cursor: pointer;
  box-shadow: 0 2px 12px rgba(140, 87, 238, .3);
}
.gw-join:hover { border-color: #c39cff; background: linear-gradient(180deg, #a271ff, #7a48db); }
.gw-join:disabled { opacity: .5; cursor: default; box-shadow: none; }
.gw-note { justify-self: end; min-width: 96px; text-align: right; color: #7b7389; font: 700 9px "DM Mono", monospace; letter-spacing: .11em; }
.gw-note.gw-in { color: #b98cff; }

/* ---- chat header ------------------------------------------------------------------------------------
   Not giveaway markup, but it sits directly above the pinned card and the two have to read as one panel.
   It was a 43px bar with the title and the online count stacked on two lines; collapsing them onto one line
   made it skinny instead. Taller bar, title at a real size, count as a pill beside it. */
aside.chat .chat-head {
  min-height: 54px !important; padding: 0 13px !important;
  border-bottom: 1px solid #262231 !important;
  background: linear-gradient(180deg, #191426, #141119) !important;
}
aside.chat .chat-head > div {
  display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important;
}
aside.chat .chat-head > div > b {
  font: 700 13px "Space Grotesk", sans-serif !important; letter-spacing: .07em !important; color: #f2ecff !important;
}
aside.chat .chat-head > div > span {
  display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-top: 0 !important;
  padding: 4px 8px !important; border-radius: 999px !important;
  border: 1px solid #2f2a3d !important; background: #16121f !important;
  color: #9d94ad !important; font: 500 9px "DM Mono", monospace !important; white-space: nowrap !important;
}

/* ---- pinned giveaway card (top of chat) -------------------------------------------------------------
   Pinned above #messages rather than appended into it, so the running giveaway never scrolls out of view.
   TWO ROWS ONLY: who + clock, then prizes + worth + action. Earlier versions stacked a badge row, a name row,
   an art row and a totals row and came out ~190px tall in a narrow sidebar — mostly padding. The person is
   the headline (44px avatar, 15px name), everything else is supporting detail. */
.gw-pin {
  flex: 0 0 auto;
  position: relative; overflow: hidden;
  margin: 8px 10px 6px;
  padding: 10px 11px;
  border: 1px solid #3a3150;
  border-radius: 9px;
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(140, 87, 238, .2), rgba(140, 87, 238, 0) 62%),
    linear-gradient(180deg, #1d1729, #161220);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.gw-pin.gw-fresh { animation: gwIn .34s ease-out; }
@keyframes gwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.gw-pin.gw-fresh::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(200, 170, 255, .16) 50%, transparent 60%);
  transform: translateX(-100%); animation: gwSweep 1.15s ease-out .2s 1;
}
@keyframes gwSweep { to { transform: translateX(100%); } }

/* Row 1 — the person, then the clock hard right. */
.gw-pin-who { display: flex; align-items: center; gap: 9px; }
.gw-pin-who .gw-people { align-self: center; margin: 0; }
/* 1:1 and never distorted: square box + aspect-ratio, so a non-square source is cropped, not squashed. */
.gw-pin-av {
  width: 44px; height: 44px; aspect-ratio: 1 / 1; flex: 0 0 44px;
  object-fit: cover; object-position: center top;
  border: 1px solid #4a3f66; border-radius: 50%; background: #201a2b;
}
.gw-pin-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; min-width: 0; flex: 1 1 auto; }
.gw-pin-name > b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #f6f1ff; font: 700 15px Manrope, Inter, sans-serif;
}
.gw-pin-name img { width: 15px; height: 15px; flex: 0 0 auto; object-fit: contain; }
.gw-pin-name small { flex: 1 1 100%; margin-top: 1px; color: #8b8399; font: 500 9.5px "DM Mono", monospace; letter-spacing: .04em; }
.gw-pin .gw-time {
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  color: #c9b0ff; font: 700 10.5px "DM Mono", monospace; font-variant-numeric: tabular-nums;
  align-self: center; margin: 0;
}

/* Row 2 — prizes take the slack, worth and action keep their size. */
.gw-pin-bot { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.gw-pin-art { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* The art used to bob forever. A perpetual loop next to live chat reads cheap and never settles;
   the prizes now deal in once, staggered, and then hold still. */
/* 46 CSS px. It measures ~30 on screen at desktop and that is CORRECT: html.gf-scale puts
   transform: matrix(0.6545..) on <body>, so the whole page renders at 65% and getBoundingClientRect returns
   RENDERED px while getComputedStyle returns the CSS value. Do not "fix" a size by chasing the rect. */
#gwPin .gw-pin-art img, .gw-pin-art img {
  width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto;
}
.gw-pin.gw-fresh .gw-pin-art img {
  animation: gwDeal .42s cubic-bezier(.18, .72, .3, 1) both;
  animation-delay: calc(.06s + var(--i, 0) * .07s);
}
@keyframes gwDeal {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.gw-pin .gw-more { flex: 0 0 auto; color: #a99cc4; font: 700 11px "DM Mono", monospace; margin-left: 2px; }

/* A bare number with a coin next to it looked like a stray label. Framing it as a chip gives the
   prize value the weight it should have on this card. */
/* No chip. The pill read as a button sitting next to a real one; plain purple type carries the value. */
.gw-pin-worth {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none;
  color: #b98cff; font: 700 17px "Space Grotesk", sans-serif; letter-spacing: -.01em;
}
.gw-pin-worth .g-coin {
  display: inline-block; width: 19px; height: 19px; flex: 0 0 auto;
  background: url("assets/godlyflip-token.png") center/150% no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.gw-pin-worth em { font-style: normal; color: #7d7688; font: 500 9px "DM Mono", monospace; }
.gw-pin .gw-join { flex: 0 0 auto; justify-self: auto; min-width: 0; padding: 8px 12px; font-size: 9px; box-shadow: none; }
.gw-pin .gw-note { flex: 0 0 auto; justify-self: auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .gw-pin.gw-fresh, .gw-pin.gw-fresh::after, .gw-pin.gw-fresh .gw-pin-art img { animation: none; }
}

/* ---- slash command palette ------------------------------------------------------------------------
   Same shell as the @mention picker in experience-polish.css (fixed, above the composer) so the two feel
   like one system. Those rules are all !important, so these are too. */
.gf-chat-commands {
  position: fixed !important; z-index: 17000 !important;
  max-height: 208px !important; overflow: auto !important; padding: 5px !important;
  border: 1px solid #30283d !important; border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(140, 87, 238, .1), rgba(140, 87, 238, 0) 70px), #111016 !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55) !important;
}
.gf-chat-commands[hidden] { display: none !important; }
.gf-chat-commands button {
  display: flex !important; align-items: baseline !important; gap: 8px !important;
  width: 100% !important; min-height: 38px !important; padding: 7px 9px !important;
  border: 0 !important; border-radius: 6px !important; background: transparent !important;
  color: #f2edf6 !important; text-align: left !important; cursor: pointer !important;
}
/* .on is the keyboard cursor; hover matches it so mouse and keyboard read the same */
.gf-chat-commands button.on, .gf-chat-commands button:hover { background: #21172f !important; }
.gf-chat-commands b { flex: 0 0 auto !important; color: #c9b0ff !important; font: 700 12px "DM Mono", monospace !important; }
.gf-chat-commands small {
  min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  color: #8b8399 !important; font: 500 10px Manrope, Inter, sans-serif !important;
}

/* ---- composer: CREATE COINFLIP shell ---------------------------------------------------------------
   The markup reuses .creator-card / .catalog-search / .catalog-grid / .catalog-item / .creator-total /
   .create-submit, so most of the look comes from the existing stylesheets for free. What does NOT come free
   is every rule written against #creator specifically (57 of the 198 .catalog-item rules, 27 of the 68
   .creator-total ones). Those are re-pointed at #gwModal here — the same approach app.js takes for
   #gfItemTipModal. !important throughout because the rules being matched are. */
#gwModal { z-index: 10050 !important; background: rgba(8, 8, 12, .6) !important; }
/* SIZING COPIED VERBATIM from #creator (experience-polish.css:8761 and its html.gf-scale variant). Leaving
   it to the base .creator-card rule is NOT the same thing — the base is 1160/1380px, the creator overrides
   itself down to 1240px with 24/26px padding. Measured proof of the difference: base gave 205px columns,
   #creator gives 182.7px. Both the plain and the gf-scale rule are needed; the desktop shell adds .gf-scale
   to <html> and that variant is what actually applies there. */
#gwModal .creator-card {
  width: min(1240px, calc(100vw - 44px)) !important;
  height: min(84dvh, 820px) !important;
  max-height: 84dvh !important;
  padding: 24px 26px !important;
  background: #101015 !important;
  border-color: #2a2833 !important;
  overflow: hidden !important;
}
html.gf-scale #gwModal .creator-card {
  width: 1240px !important;
  max-width: calc(100% - 72px) !important;
  height: 84% !important;
  max-height: 84% !important;
}
/* The creator wraps its grid in .catalog-picker; without it the scroll container and background differ. */
#gwModal .catalog-picker {
  position: relative !important;
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; min-height: 0 !important;
  overflow-y: auto !important; overscroll-behavior: contain !important;
  background: #0d0c11 !important; border-color: #2a2833 !important;
}
#gwModal .creator-card > p { color: #c9b0ff !important; }
/* NO grid-template-columns / grid-auto-rows / gap / padding here on purpose. The base .catalog-grid rules
   are responsive and already !important (6 columns at 198px rows, then 4/236, then 2/320) and they are
   exactly what #creator renders. Overriding them here is what made these cards a different size from Create
   Coinflip's. Only the scroll behaviour, which the flex card needs, is set. */
#gwModal .catalog-grid {
  flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; width: 100% !important;
}
#gwModal .catalog-item { position: relative !important; overflow: hidden !important; cursor: pointer !important; }
#gwModal .catalog-item .g-coin {
  display: inline-block !important; width: 16px !important; height: 16px !important;
  background: url("assets/godlyflip-token.png") center/150% no-repeat !important; vertical-align: middle !important;
}
#gwModal .catalog-item > strong { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; }
#gwModal .creator-total { flex: 0 0 auto !important; }
#gwModal .creator-total > b { color: #a56bff !important; font-size: 24px !important; }
#gwModal .creator-total > b em { width: 24px !important; height: 24px !important; vertical-align: middle !important; }
#gwModal .gw-empty { grid-column: 1 / -1 !important; margin: 0 !important; padding: 24px 4px !important; color: #77717f !important; font-size: 12px !important; line-height: 1.6 !important; }

/* Duration row: centred, no panel behind it. The boxed "catalog-search" surface made it read as a separate
   widget, and the rules paragraph beside it was a wall of text nobody read — those rules now surface as an
   error line under the grid, only when one is actually broken. */
#gwModal .gw-bar {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 9px !important; margin: 0 0 12px !important; padding: 0 !important;
  background: none !important; border: 0 !important;
}
#gwModal .gw-clock { display: inline-flex; color: #8b8399; }
#gwModal .gw-clock svg { width: 15px; height: 15px; display: block; }
#gwModal .gw-dur { display: flex !important; gap: 6px !important; }
/* Squared, not pills, and at a size you can actually read — 10.5px mono was unreadable at a glance. */
#gwModal .gw-d {
  border: 1px solid #3a3448; border-radius: 5px; background: #17141f; color: #d7d0e4;
  min-width: 58px; padding: 9px 15px;
  font: 700 12.5px "Space Grotesk", Manrope, sans-serif; letter-spacing: .02em; cursor: pointer;
}
#gwModal .gw-d:hover { border-color: #5c4d7d; background: #1e1929; color: #fff; }
#gwModal .gw-d.on { border-color: #a56bff; background: rgba(165, 107, 255, .2); color: #fff; }
/* Long slot before the pot is big enough: visibly unavailable, but still hoverable so the title can explain
   why. `cursor: not-allowed` rather than pointer-events:none, or the tooltip would never appear. */
#gwModal .gw-d.gw-locked {
  border-color: #2c2836; background: #131018; color: #5f5872;
  cursor: not-allowed;
}
#gwModal .gw-d.gw-locked:hover { border-color: #3a3448; background: #17141f; color: #6f6786; }

/* Only visible while a rule is being broken. */
#gwModal .gw-err {
  display: flex; align-items: center; gap: 9px;
  margin: 6px 0 2px; padding: 11px 14px;
  border: 1px solid rgba(255, 110, 132, .5); border-left: 3px solid #ff6e84; border-radius: 6px;
  background: rgba(255, 90, 115, .12);
  color: #ffc2cc; font: 700 12.5px Manrope, Inter, sans-serif; line-height: 1.4;
}
#gwModal .gw-err::before {
  content: '!'; flex: 0 0 18px;
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: #ff6e84; color: #2a0d13; font: 800 12px Manrope, Inter, sans-serif;
}
#gwModal .gw-err[hidden] { display: none; }
/* When the host requirement is not met there is nothing to pick, so the footer is dead weight. */
#gwModal.gw-gated .creator-total, #gwModal.gw-gated .create-submit { display: none !important; }

/* ---- mobile --------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .gw-strip { margin-bottom: 11px; padding: 11px 12px 12px; border-radius: 8px; }
  .gw-head { flex-wrap: wrap; }
  /* Six tracks will not fit a phone. Two rows: art / host / clock, then worth / entries / action. Three rows
     pushed the card to 137px for the same information. */
  .gw-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "items who time" "val ent action";
    gap: 7px 10px; padding: 9px 11px;
  }
  .gw-items { grid-area: items; }
  .gw-items img { width: 34px; height: 34px; }
  .gw-who { grid-area: who; }
  .gw-time { grid-area: time; justify-self: end; }
  .gw-val { grid-area: val; font-size: 15px; }
  .gw-ent { grid-area: ent; align-self: center; }
  .gw-join, .gw-note { grid-area: action; min-height: 38px; min-width: 80px; align-self: center; }
  .gw-pin { margin: 8px 12px 6px; }
  #gwPin .gw-pin-art img { width: 50px; height: 50px; }
  .gw-pin .gw-join { min-height: 38px; }
  /* ---- composer on a phone ----------------------------------------------------------------------
     Full-screen sheet. The desktop card is 1240x84dvh with 26px padding; at 390-430px that leaves almost no
     room for the grid, and the base .catalog-grid mobile rule uses 320px rows, which fits ONE AND A HALF
     cards on screen. Explicit sizing here instead. */
  #gwModal { padding: 0 !important; }
  #gwModal .creator-card {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    padding: 14px 12px 12px !important;
    border-radius: 0 !important; border: 0 !important;
  }
  #gwModal .creator-card > p { font-size: 9px !important; }
  #gwModal .creator-card > h2 { font-size: 19px !important; margin-bottom: 2px !important; }
  #gwModal .creator-card > .close { top: 8px !important; right: 8px !important; width: 40px !important; height: 40px !important; }

  #gwModal .gw-bar { flex-wrap: wrap !important; margin-bottom: 10px !important; }
  /* 4-5 buttons sharing one row came out 37px wide. Let them wrap and keep a readable minimum. */
  #gwModal .gw-d { min-height: 42px; min-width: 52px; flex: 1 1 auto; padding: 9px 8px; font-size: 12px; }

  #gwModal .catalog-picker { border-radius: 8px !important; }
  /* Two columns, rows sized by content — 320px rows show one and a half cards on a phone. */
  #gwModal .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important; padding: 8px !important;
  }
  #gwModal .catalog-item { min-height: 0 !important; padding: 10px !important; }
  #gwModal .catalog-item img { max-height: 96px !important; }

  #gwModal .gw-err { margin: 8px 0 0 !important; font-size: 12px !important; }
  #gwModal .creator-total {
    grid-template-columns: auto 1fr auto !important; gap: 10px !important;
    padding: 10px 2px !important; margin-top: 0 !important;
  }
  #gwModal .creator-total > span { font-size: 11px !important; }
  #gwModal .creator-total > b { font-size: 19px !important; }
  #gwModal .create-submit { min-height: 50px !important; font-size: 11px !important; }
}

/* ---- creator steppers on this modal ----------------------------------------------------------------
   THE WHITE LINE UNDER SOME ITEMS: the -/+ halves are real <b> elements with "−"/"+" text, and the rules
   that turn them into invisible full-height hover overlays are scoped
   `#creator .catalog-item .cf-half, #jpJoinModal .catalog-item .cf-half`. Unaliased they rendered as bare
   text under the card. Same treatment here so the interaction is 1:1 with Create Coinflip: red half on the
   left removes one, green half on the right adds one, both invisible until hovered. */
#gwModal .catalog-item .cf-half {
  position: absolute !important; top: 0 !important; bottom: 0 !important;
  height: 100% !important; width: 50% !important; z-index: 4 !important;
  display: flex !important; align-items: center !important;
  font: 600 40px/1 "Space Grotesk", sans-serif !important;
  opacity: 0 !important; transition: opacity .14s ease !important; cursor: pointer !important;
}
#gwModal .catalog-item .cf-half.l {
  left: 0 !important; right: auto !important; justify-content: flex-start !important; padding-left: 15px !important;
  color: #ffe0e0 !important;
  background: linear-gradient(to left, rgba(244, 63, 63, 0) 6%, rgba(244, 63, 63, .14) 44%, rgba(255, 72, 72, .5) 100%) !important;
}
#gwModal .catalog-item .cf-half.r {
  right: 0 !important; left: auto !important; justify-content: flex-end !important; padding-right: 15px !important;
  color: #dcffe9 !important;
  background: linear-gradient(to right, rgba(52, 211, 153, 0) 6%, rgba(52, 211, 153, .14) 44%, rgba(48, 222, 132, .5) 100%) !important;
}
#gwModal .catalog-item .cf-half:hover { opacity: 1 !important; }

/* Footer row: it was cramped against the value. Give the three parts real breathing room. */
/* THREE EQUAL-ISH TRACKS, not flex + margin-left:auto: the value has to sit on the row's true centre, and
   with flex it was only "after the label", which drifts with the label's length. */
#gwModal .creator-total {
  display: grid !important; grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important; gap: 20px !important;
  padding: 14px 4px 12px !important; margin-top: 4px !important;
  border-top: 1px solid #262231 !important;
}
#gwModal .creator-total > span { color: #d7d0e4 !important; font: 700 12px "Space Grotesk", Manrope, sans-serif !important; letter-spacing: .06em !important; }
#gwModal .creator-total > span.gw-warn { color: #ff9baa !important; }
#gwModal .creator-total > b { justify-self: center !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
#gwModal .creator-total > button { justify-self: end !important; color: #b6aec6 !important; font: 700 11px "Space Grotesk", Manrope, sans-serif !important; letter-spacing: .06em !important; padding: 9px 13px !important; }

/* ---- stack steppers on touch ------------------------------------------------------------------------
   The -/+ halves reveal on :hover, which never fires on a touch screen — on a phone the only way to add a
   second copy was invisible. Show them faintly at all times where hover is unavailable, and give them a real
   tap target. Applies to the giveaway composer only; Create Coinflip's own mobile behaviour is untouched. */
/* `hover: none` alone is not enough: some environments still advertise hover on a narrow screen, and then
   the steppers stay invisible with no way to reach them. Either condition is sufficient. */
@media (hover: none), (max-width: 900px) {
  /* .5 washed the whole card red/green and read as a selection state. .28 is a hint you can still hit. */
  #gwModal .catalog-item .cf-half { opacity: .28 !important; font-size: 30px !important; }
  #gwModal .catalog-item .cf-half.l { padding-left: 10px !important; }
  #gwModal .catalog-item .cf-half.r { padding-right: 10px !important; }
  #gwModal .catalog-item .cf-half:active { opacity: 1 !important; }
}

/* ---- mobile chat sheet -------------------------------------------------------------------------------
   Chat is `visibility: hidden` on a phone and its floating toggle is painted under the bottom tab bar
   (z 2150 vs 3500), so it could not be opened at all — and giveaways now live only in chat. The Chat tab
   sets body.gf-chat-open and this turns the aside into a sheet that fills the space between the header and
   the tab bar. Explicit and high-specificity on purpose: the legacy `.columns > .chat` rules in mobile.css
   are overridden by later stylesheets, which is why the old toggle did nothing even when it was tappable. */
@media (max-width: 900px) {
  body.gf-chat-open .columns > aside.chat,
  body.gf-chat-open aside.chat {
    position: fixed !important;
    inset: 56px 0 64px !important;
    z-index: 3400 !important;
    width: auto !important; height: auto !important; max-height: none !important; min-height: 0 !important;
    margin: 0 !important; border-radius: 0 !important;
    visibility: visible !important; opacity: 1 !important; transform: none !important;
    display: flex !important; flex-direction: column !important;
  }
  body.gf-chat-open .columns > aside.chat .messages,
  body.gf-chat-open aside.chat .messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
  /* The old floating button would otherwise sit on top of the sheet it no longer controls. */
  #gfMobileChatToggle { display: none !important; }
  /* Nothing behind the sheet should scroll under it. */
  body.gf-chat-open { overflow: hidden !important; }
}

/* The overlay the chat aside is MOVED into on mobile (see the Chat tab handler in index.html). Styling the
   aside in place does not work — it computes visibility:hidden there even against inline !important. */
#gfChatSheet {
  position: fixed; inset: 56px 0 64px; z-index: 3400;
  display: flex; flex-direction: column;
  background: #0e0d12; border-top: 1px solid #262231;
}
/* position:static is doing real work here. mobile.css pins aside.chat with position:fixed for the old
   drawer, and a fixed element measures itself against the VIEWPORT, not against this sheet - so when the
   keyboard shrank the sheet the chat stayed exactly where it was and the composer stayed behind the
   keyboard. It also meant the aside painted over anything the sheet drew, at the same z-index and later in
   the DOM. Laying it out as a normal flex child fixes both at once. */
#gfChatSheet > aside.chat {
  position: static !important; inset: auto !important; z-index: auto !important;
  flex: 1 1 auto; min-height: 0; width: auto !important; height: auto !important;
  max-height: none !important; margin: 0 !important; border-radius: 0 !important;
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  display: flex !important; flex-direction: column !important;
}
#gfChatSheet .messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }

/* ---- pin dots ----------------------------------------------------------------------------------------
   Switch between giveaways when more than one is running. Plain equal circles read as a stray control; the
   ACTIVE one stretches into a pill instead, which is the standard page-indicator language and makes it
   obvious the row is a position rather than three buttons. */
.gw-dots {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 1px;
}
.gw-dot {
  /* 20px hit area around a small indicator: !important + min-* because a global button rule clamps these. */
  width: 20px !important; height: 20px !important; min-width: 20px; min-height: 20px;
  padding: 0 !important; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.gw-dot::after {
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 999px;
  background: #4a4360;
  transition: width .24s cubic-bezier(.22, .68, .36, 1), background .2s ease, box-shadow .2s ease;
}
.gw-dot:hover::after { background: #7a6da0; }
.gw-dot.on::after {
  width: 18px;
  background: linear-gradient(90deg, #a56bff, #7b47d4);
  box-shadow: 0 0 8px rgba(165, 107, 255, .45);
}
.gw-dot.on { width: 26px !important; min-width: 26px; }
@media (prefers-reduced-motion: reduce) { .gw-dot::after { transition: none; } }

/* ---- participants ------------------------------------------------------------------------------------
   Replaces the old "ENTERED" label: the count is always shown, and it marks itself when it includes you, so
   the button can just disappear once you are in. */
/* Sits next to the countdown on the top row, so it matches it EXACTLY — same family, size, weight and
   baseline. Anything else and the two read as unrelated bits of text that happen to be adjacent. */
.gw-people {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none;
  color: #8b8399; font: 700 10.5px "DM Mono", monospace; font-variant-numeric: tabular-nums;
}
.gw-people svg { width: 12px; height: 12px; flex: 0 0 auto; }
.gw-people.gw-me { color: #c9a3ff; }
.gw-people i { font-style: normal; color: #a56bff; font-size: 11px; margin-left: 1px; }

/* The whole pinned card is a tap target for entering, so say so. */
#gwPin { cursor: default; }
#gwPin.gw-enterable { cursor: pointer; }
#gwPin.gw-enterable:hover { border-color: #4b3f6b; }

/* ---- prize tiles -------------------------------------------------------------------------------------
   One tile per DISTINCT item with a count badge, rather than the same artwork repeated. items[] carries one
   entry per prize (the server expands quantities for the draw), so 2x Harvester used to render as two
   identical pictures and read as two different prizes. */
.gw-tile { position: relative; display: inline-flex; flex: 0 0 auto; }
.gw-tile img { display: block; }
/* Same treatment as .cat-x on the Create Coinflip cards: plain white at the TOP-RIGHT with a hard shadow,
   no chip behind it. A purple pill made the count look like a control rather than a quantity. */
.gw-x {
  position: absolute; top: -1px; right: -1px;
  color: #fff; font: 800 12px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.gw-x::before { content: '\00D7'; opacity: .85; margin-right: .5px; }

/* ---- finished giveaway (stays pinned ~5 min) ----------------------------------------------------------
   The result is the whole point of running one, so the card holds for five minutes after it draws with the
   winners in place of the value and the ENTER button. */
.gw-pin.gw-done { border-color: #2f2a3d; background: linear-gradient(180deg, #191622, #141119); }
.gw-ended {
  flex: 0 0 auto; align-self: center;
  color: #6f6784; font: 700 10.5px "DM Mono", monospace; letter-spacing: .1em;
}
.gw-winner {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  color: #4ed393; font: 700 12.5px "Space Grotesk", Manrope, sans-serif;
}
.gw-winner svg { width: 14px; height: 14px; flex: 0 0 auto; }
.gw-winner b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.gw-winner.gw-none { color: #6f6784; font-weight: 500; font-size: 11px; }
.gw-winner.gw-won-me { color: #7dffc0; }
.gw-pin.gw-done .gw-pin-art img { opacity: .55; }

/* Dismiss. Sits at the end of the top row; small, quiet, and only obvious on hover — it should never compete
   with the countdown next to it. */
.gw-x-close {
  flex: 0 0 auto; align-self: center; margin-left: 2px;
  width: 20px; height: 20px; padding: 0; border: 0; background: none;
  color: #5f5872; font: 400 17px/1 Manrope, Inter, sans-serif; cursor: pointer;
  display: grid; place-items: center; border-radius: 5px;
  transition: color .14s ease, background .14s ease;
}
.gw-x-close:hover { color: #e6dff2; background: rgba(255, 255, 255, .07); }
@media (max-width: 900px) { .gw-x-close { width: 30px; height: 30px; font-size: 19px; } }

/* ---- restore hidden giveaways ------------------------------------------------------------------------
   The dismiss X used to be a one-way door: the card was gone for the session with nothing on screen saying
   it had ever been there. This lives in the top-right of the chat header - the same corner the card was
   dismissed from - and only exists while something is actually hidden. Bare glyph, no chip: the header
   already has a button in it and a second boxed control beside it reads as a toolbar. */
aside.chat .chat-head .gw-restore {
  position: relative;
  display: grid !important; place-items: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  margin-left: auto !important; margin-right: 4px;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: #9a8fb3 !important; cursor: pointer; padding: 0;
  transition: color .14s ease, transform .14s ease;
  animation: gwNudge 2.4s ease-in-out 3;
}
aside.chat .chat-head .gw-restore:hover { color: #dcc7ff !important; transform: translateY(1px); }
aside.chat .chat-head .gw-restore:active { transform: translateY(2px); }
aside.chat .chat-head .gw-restore svg { width: 19px; height: 19px; display: block; overflow: visible; }
/* count only when there is more than one to come back to - a lone "1" is noise */
aside.chat .chat-head .gw-restore b {
  position: absolute; top: -1px; right: -4px;
  min-width: 13px; height: 13px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: 999px; background: #8f5bf0; color: #fff;
  font: 700 8.5px "DM Mono", monospace; line-height: 1;
  box-shadow: 0 0 0 2px #171326;
}
/* a couple of small hops when it first appears, then it holds still - it is a hint, not a beacon */
@keyframes gwNudge {
  0%, 82%, 100% { transform: none; }
  88% { transform: translateY(2px); }
  94% { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) { aside.chat .chat-head .gw-restore { animation: none; } }
@media (max-width: 900px) { aside.chat .chat-head .gw-restore { width: 32px; height: 32px; } }

/* ---- "YOU WON" ---------------------------------------------------------------------------------------
   A win used to be silent unless you happened to be looking at the pinned card in the five minutes after it
   drew. This is what the winner actually sees, and it waits for them: the server holds the win as unseen
   until the client has shown it, so being offline when it drew costs nothing.
   Centred and modal-weight on purpose - a corner toast is the wrong size for "you have been given a real
   item", and it is rare enough that it can afford to interrupt. */
.gw-win {
  position: fixed; inset: 0; z-index: 6400;
  display: grid; place-items: center;
  background: rgba(6, 4, 11, .7);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.gw-win.show { opacity: 1; pointer-events: auto; }

.gw-win-in {
  position: relative;
  width: min(340px, calc(100vw - 34px));
  padding: 24px 22px 20px;
  text-align: center;
  border: 1px solid #4c3d74; border-radius: 13px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(150, 96, 250, .28), rgba(150, 96, 250, 0) 62%),
    linear-gradient(180deg, #1d1729, #141119);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translateY(10px) scale(.97);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.gw-win.show .gw-win-in { transform: none; }

.gw-win-x {
  position: absolute; top: 8px; right: 9px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent;
  color: #8a8098; font-size: 19px; line-height: 1; cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.gw-win-x:hover { color: #efe6ff; background: rgba(255, 255, 255, .06); }

.gw-win-tag {
  display: inline-block; margin-bottom: 15px;
  padding: 5px 11px; border-radius: 5px;
  border: 1px solid rgba(180, 130, 255, .42); background: rgba(165, 107, 255, .16);
  color: #e0ccff; font: 700 9px "DM Mono", monospace; letter-spacing: .22em;
}
/* Prizes lead. They are the whole message, so they get the biggest thing on the card. */
.gw-win-art { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 13px; }
.gw-win-art img { width: 74px; height: 74px; object-fit: contain; }
.gw-win-in b { display: block; color: #fbf7ff; font: 700 20px "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.gw-win-in small { display: block; margin-top: 5px; color: #9a91ab; font: 500 10.5px "DM Mono", monospace; }
.gw-win-worth {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  padding: 7px 13px; border-radius: 7px;
  border: 1px solid #3a3150; background: #17131f;
  color: #e9dcff; font: 700 17px "Space Grotesk", sans-serif;
}
.gw-win-worth .g-coin {
  display: inline-block; width: 19px; height: 19px; flex: 0 0 auto;
  background: url("assets/godlyflip-token.png") center/150% no-repeat;
}
.gw-win-in p { margin: 13px 0 0; color: #7f7791; font: 500 10px "DM Mono", monospace; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) {
  .gw-win, .gw-win-in { transition: none; }
}

/* ---- giveaway result rows in chat --------------------------------------------------------------------
   Not a chat message: no avatar column, no name gradient, no reply affordance. It shares the message list
   because that is where people are already looking when a giveaway they entered ends. */
#messages article.gf-gw-result {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important; align-items: start !important;
  padding: 9px 0 !important; min-height: 0 !important;
}
.gf-gwr-in {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #3a3150; border-radius: 8px;
  background:
    radial-gradient(120% 180% at 100% 0%, rgba(140, 87, 238, .17), rgba(140, 87, 238, 0) 62%),
    linear-gradient(180deg, #1c1628, #16121e);
}
.gf-gwr-tag {
  display: inline-block; margin-bottom: 7px;
  padding: 3px 7px; border-radius: 4px;
  border: 1px solid rgba(165, 107, 255, .34); background: rgba(165, 107, 255, .13);
  color: #d5bfff; font: 700 8px "DM Mono", monospace; letter-spacing: .18em;
}
.gf-gwr-art { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.gf-gwr-art img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
#messages article.gf-gw-result p {
  margin: 0 !important; color: #a79dba !important;
  font: 500 12px Manrope, Inter, sans-serif !important; line-height: 1.35 !important;
}
#messages article.gf-gw-result p b { color: #e8dcff; font-weight: 700; }
#messages article.gf-gw-result p i { font-style: normal; color: #9d8fc0; }

/* ---- mobile chat sheet ------------------------------------------------------------------------------
   No close button of its own: mobile.js already puts #gfMobileChatClose inside the chat panel, and that one
   is the one that is actually tappable (aside.chat is position:fixed at this same z-index and later in the
   DOM, so it covers anything the sheet draws). chatSheet() adopts it instead. */
/* THE PAGE MUST NOT MOVE BEHIND THE SHEET. professional.css sets `body { overflow: auto }` below 900px, so
   the lobby was still scrollable under the overlay - drag anywhere and the page slid around behind it.
   position:fixed is the part that actually holds on mobile Safari; the inline `top` the script sets is the
   current scroll offset, so freezing it does not look like a jump. */
body.gf-scroll-lock {
  position: fixed !important;
  left: 0; right: 0; width: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* Inside the sheet, only the message list scrolls, and it does not hand the gesture on to anything else. */
#gfChatSheet { overscroll-behavior: contain; touch-action: pan-y; }
#gfChatSheet .messages { overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; }

/* ---- no zoom-on-focus, and a composer you can actually see -------------------------------------------
   iOS Safari zooms the whole page in whenever a focused input is under 16px, and it never zooms back out.
   refine.css sizes this input at 13px (10-12px in its narrower breakpoints), so tapping the chat box threw
   the layout off the screen. 16px is not a style choice here, it is the threshold - below it the zoom is
   unconditional. The id selector is to beat refine.css's `!important` on .chat input. */
@media (max-width: 900px) {
  aside.chat input#chatInput {
    font-size: 16px !important;
    height: 46px !important;
    padding: 0 13px !important;
  }
  /* Give the send button a real target next to the taller input. */
  aside.chat #chatForm {
    grid-template-columns: minmax(0, 1fr) 62px !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  aside.chat #chatForm button {
    height: 46px !important; border-radius: 7px !important; font-size: 19px !important;
  }
}