/* Create / Join Coinflip modal.
   Loaded last on purpose: the picker is styled across main.css and layout.css with !important on both sides,
   so the only way to land a coherent pass without unpicking that war is to win it from the end of the cascade.
   Everything here is scoped to #creator, so the giveaway composer and the jackpot join sheet are untouched. */

/* The card was a fixed 860px tall, so an empty inventory rendered a thousand pixels of nothing under two words
   of copy. It now grows to fit and only caps out once there are enough items to need the scroll. */
#creator .creator-card{
  height:auto!important;
  max-height:min(90dvh,880px)!important;
  padding:26px 26px 22px!important;
}
#creator .creator-card>p{margin:0 0 6px!important;color:#a98fd0!important;letter-spacing:.16em!important}
#creator .creator-card>h2{margin:0!important;font-size:31px!important}
#creator .creator-card .catalog-picker{
  flex:0 1 auto!important;
  min-height:0!important;
  max-height:min(58dvh,560px)!important;
  margin:18px 0 0!important;
  border:1px solid #2b2833!important;
  border-radius:10px!important;
  background:#0e0d13!important;
  /* One grid, so the search field and the two dropdowns share a single header band instead of stacking into
     two full-width strips that ate ~90px before a single item was visible. */
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-content:start!important;
}

/* ---- header band ---- */
#creator .catalog-search,
#creator .catalog-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:6!important;
  margin:0!important;
  padding:11px 12px!important;
  border:0!important;
  border-bottom:1px solid #26232f!important;
  background:#131118!important;
  box-shadow:none!important;
}
#creator .catalog-search{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  grid-column:1!important;
  padding-right:0!important;
}
#creator .catalog-search::before{display:none!important}
#creator .catalog-search input{
  flex:1 1 auto!important;
  min-width:0!important;
  height:38px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid #302c3a!important;
  border-radius:8px!important;
  background:#0a0910!important;
  color:#f4eff9!important;
  font:700 13px/1 'Space Grotesk',sans-serif!important;
  transition:border-color .14s ease,background .14s ease!important;
}
#creator .catalog-search input::placeholder{color:#6f6780!important;font-weight:700!important}
#creator .catalog-search input:hover{border-color:#3d3749!important}
#creator .catalog-search input:focus{
  border-color:#7b52c2!important;
  background:#0d0b14!important;
  /* a 3px purple halo on a 46px field dominated the whole modal */
  box-shadow:none!important;
  outline:0!important;
}
/* Result count reads as a quiet chip beside the field rather than a caption above it. */
#creator .catalog-search small{
  order:2!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  height:38px!important;
  margin:0!important;
  padding:0 9px!important;
  border:1px solid #26232f!important;
  border-radius:8px!important;
  background:#0a0910!important;
  color:#8d81a3!important;
  font:800 9px/1 'DM Mono',monospace!important;
  letter-spacing:.1em!important;
  white-space:nowrap!important;
}
#creator .catalog-search-controls{display:contents!important}

#creator .catalog-toolbar{
  grid-column:2!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding-left:0!important;
}
#creator .catalog-toolbar::before{display:none!important}
/* The SORT BY / SHOW captions were noise - each dropdown already says what it is doing. */
#creator .catalog-toolbar .catalog-control{display:block!important;min-width:0!important}
#creator .catalog-toolbar .catalog-control>small{display:none!important}
#creator .catalog-toolbar select{
  -webkit-appearance:none!important;
  appearance:none!important;
  height:38px!important;
  min-width:0!important;
  padding:0 30px 0 12px!important;
  border:1px solid #302c3a!important;
  border-radius:8px!important;
  background-color:#0a0910!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23978aad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 5 5.6 9 1.6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 11px center!important;
  color:#e6ddf3!important;
  font:800 11px/1 'Space Grotesk',sans-serif!important;
  cursor:pointer!important;
  transition:border-color .14s ease!important;
}
#creator .catalog-toolbar select:hover{border-color:#3d3749!important}
#creator .catalog-toolbar select:focus{border-color:#7b52c2!important;box-shadow:none!important;outline:0!important}
#creator .catalog-toolbar select option{background:#141119;color:#efe8f8}

/* ---- grid + empty state ---- */
#creator .catalog-grid{
  grid-column:1/-1!important;
  gap:9px!important;
  padding:12px!important;
  background:transparent!important;
}
#creator .catalog-grid[data-empty="true"]{
  display:grid!important;
  place-content:center!important;
  gap:7px!important;
  min-height:210px!important;
  padding:34px 20px!important;
  color:#cabdd9!important;
  font:800 14px/1.3 'Space Grotesk',sans-serif!important;
  letter-spacing:-.01em!important;
  text-align:center!important;
}
/* The grid's own text node is the headline; this is the line that says what to do about it. */
#creator .catalog-grid[data-empty="true"]::after{
  content:'Deposit items, or clear your search and filters.';
  color:#7d7391;
  font:700 11px/1.4 Manrope,'Segoe UI',sans-serif;
  letter-spacing:0;
}

/* ---- footer ---- */
#creator .creator-card .creator-total{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  min-height:0!important;
  margin:14px 0 0!important;
  padding:13px 2px!important;
  border-top:1px solid #26232f!important;
  border-bottom:0!important;
}
#creator .creator-total>span#selectionCount{
  justify-self:start!important;
  color:#8d81a3!important;
  font:800 10px/1 'DM Mono',monospace!important;
  letter-spacing:.11em!important;
}
#creator .creator-total .cf-side{
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
#creator .creator-total .cf-side-lbl{
  color:#7d7391!important;
  font:800 9px/1 'DM Mono',monospace!important;
  letter-spacing:.12em!important;
}
#creator .creator-total .cf-side-btn{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid #2b2833!important;
  border-radius:50%!important;
  background:#0a0910!important;
  opacity:.5!important;
  cursor:pointer!important;
  transition:opacity .14s ease,border-color .14s ease,transform .14s ease!important;
}
#creator .creator-total .cf-side-btn img{display:block!important;width:30px!important;height:30px!important}
#creator .creator-total .cf-side-btn:hover{opacity:.85!important;transform:translateY(-1px)!important}
#creator .creator-total .cf-side-btn.is-active{
  opacity:1!important;
  border-color:#8a5fd6!important;
  background:#150f1f!important;
}
/* The value sits on the right edge of the centre band and CLEAR is pinned to the card edge, so the coin
   picker keeps the true centre no matter how many digits the total grows to. */
#creator .creator-total>b{
  grid-column:3!important;
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-right:86px!important;
  font-size:24px!important;
}
#creator .creator-total button#clearOffer{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  min-height:36px!important;
}
#creator .creator-card .create-submit{
  min-height:50px!important;
  margin-top:14px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#9a54f0,#6a35c9)!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(112,54,204,.24)!important;
  transition:filter .14s ease,transform .14s ease!important;
}
#creator .creator-card .create-submit:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}
#creator .creator-card .create-submit:disabled{filter:grayscale(.6) brightness(.7)!important;transform:none!important}

/* Header band only. The FOOTER below 900px belongs to mobile-flip.css, which lays it out with named grid
   areas - overriding its columns here left those children pointing at areas that no longer existed. */
@media(max-width:900px){
  #creator .creator-card .catalog-picker{grid-template-columns:minmax(0,1fr)!important;max-height:56dvh!important}
  #creator .catalog-search{grid-column:1!important;padding-right:12px!important;border-bottom:0!important}
  #creator .catalog-toolbar{grid-column:1!important;top:60px!important;padding:0 12px 11px!important}
  #creator .catalog-toolbar .catalog-control{flex:1 1 0!important}
  #creator .catalog-toolbar select{width:100%!important}
}

/* ---- fixes on top of the base sheet ---- */
/* .cf-side is absolutely centred on .creator-total in layout.css, so grid placement was ignored and the two
   coins sat straight on top of the running total. Put it back in flow; the footer grid centres it properly. */
#creator .creator-total .cf-side{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  grid-column:2!important;
}
#creator .creator-total .cf-side-lbl{display:block!important}
#creator .creator-total>b{margin-right:0!important}
/* CLEAR leaves the flow so the coin picker keeps the true centre regardless of how wide the total gets. */
#creator .creator-total button#clearOffer{z-index:3!important}
#creator .creator-total>b{padding-right:96px!important}

/* The selected-items tray was one lone 60px circle floating in the gap under the grid. It is now a labelled
   strip of square thumbs that reads as part of the footer instead of a stray bubble. */
#creator .cf-tray{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:7px!important;
  margin-top:12px!important;
  padding:9px 10px!important;
  border:1px solid #26232f!important;
  border-radius:9px!important;
  background:#0e0d13!important;
}
#creator .cf-tray.is-empty{display:none!important}
#creator .cf-tray::before{
  content:'YOUR OFFER';
  margin-right:3px;
  color:#7d7391;
  font:800 9px/1 'DM Mono',monospace;
  letter-spacing:.12em;
}
#creator .cf-tray-item{
  width:46px!important;
  height:46px!important;
  border-radius:8px!important;
  border:1px solid #2f2a3a!important;
  background:#141119!important;
  transition:border-color .14s ease,transform .14s ease!important;
}
#creator .cf-tray-item:hover{border-color:#8a5fd6!important;transform:translateY(-1px)!important}
#creator .cf-tray-ph{border-radius:8px!important}
#creator .cf-tray-ph img{width:34px!important;height:34px!important}
#creator .cf-tray-q{
  top:-5px!important;
  right:-5px!important;
  border:2px solid #0e0d13!important;
  background:#7d5cff!important;
  font-size:9px!important;
}
#creator .cf-tray-x{border-radius:8px!important;font-size:20px!important}

/* ---- simplify pass ---- */
/* The side picker is self-explanatory: two coins, one lit. The caption and the rings around them were both
   framing that the coin art already provides. */
#creator .creator-total .cf-side-lbl{display:none!important}
#creator .creator-total .cf-side{gap:10px!important}
#creator .creator-total .cf-side-btn{
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  opacity:.34!important;
  filter:saturate(.55)!important;
}
#creator .creator-total .cf-side-btn img{width:32px!important;height:32px!important}
#creator .creator-total .cf-side-btn:hover{opacity:.7!important;filter:saturate(.85)!important;transform:none!important}
#creator .creator-total .cf-side-btn.is-active{
  opacity:1!important;
  filter:none!important;
  background:none!important;
  border:0!important;
}

/* Flat, one colour, no gradient or glow. */
#creator .creator-card .create-submit{
  min-height:46px!important;
  margin-top:11px!important;
  border-radius:8px!important;
  background:#6d3fd0!important;
  box-shadow:none!important;
}
#creator .creator-card .create-submit:hover{background:#7b49e4!important;filter:none!important;transform:none!important}

/* Tighter throughout: the card was spending more height on gaps than on items. */
#creator .creator-card{padding:22px 22px 18px!important}
#creator .creator-card>h2{font-size:27px!important}
#creator .creator-card .catalog-picker{margin-top:14px!important}
#creator .catalog-grid{gap:8px!important;padding:10px!important}
#creator .creator-card .creator-total{margin-top:10px!important;padding:10px 2px!important}
#creator .cf-tray{margin-top:9px!important;padding:7px 9px!important}
#creator .creator-card>*:last-child{margin-bottom:0!important}

/* ---- offer strip + coin size ---- */
/* One selected item in a full-width bordered panel read as a mostly-empty box. The strip now has no chrome of
   its own - just the thumbs, sitting directly under the grid. */
#creator .cf-tray{
  margin-top:10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  gap:6px!important;
}
#creator .cf-tray::before{display:none!important}
#creator .cf-tray-item{
  width:40px!important;
  height:40px!important;
  border-radius:7px!important;
  border:1px solid #2a2734!important;
  background:#131019!important;
}
#creator .cf-tray-ph img{width:30px!important;height:30px!important}

#creator .creator-total .cf-side{gap:12px!important}
#creator .creator-total .cf-side-btn img{width:44px!important;height:44px!important}

/* The offer tray is gone. It claimed a full row of the card to repeat what the grid already shows (each picked
   card is lit and carries its own quantity badge) and what the footer already totals. */
#creator .cf-tray{display:none!important}

/* ---- footer amount + card height ---- */
/* app.js swaps the legacy <b> total for <div class="creator-amount">, so every rule aimed at ">b" missed and
   the token slid under the absolutely-positioned CLEAR. */
#creator .creator-total>.creator-amount{
  grid-column:3!important;
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  padding-right:104px!important;
  font-size:23px!important;
  white-space:nowrap!important;
}
#creator .creator-total>.creator-amount strong{color:#e9dcff!important}

/* The card is a stretched item inside the modal, so once its height became auto it grew to fill the modal and
   left a slab of dead space under the button. Centring it makes auto mean auto. */
#creator .creator-card{align-self:center!important}

/* The dead slab under the button was layout.css's `html.gf-scale #creator .creator-card{height:84%}` - a
   higher-specificity rule than anything above, so every height:auto here was ignored and the card was pinned
   to 84% of the modal no matter how little was in it. */
html.gf-scale #creator .creator-card,
#creator .creator-card{
  height:auto!important;
  max-height:min(86dvh,880px)!important;
}

/* ---- header ---- */
/* It was three unrelated things floating in a wide empty band: a tiny mono kicker, an oversized title and a
   bare X pushed to the far corner. Now it is one header block with a rule under it, and the close is a real
   control instead of a loose glyph. */
#creator .creator-card>p{
  margin:0 0 5px!important;
  color:#9b86c4!important;
  font:800 9px/1 'DM Mono',monospace!important;
  letter-spacing:.18em!important;
}
#creator .creator-card>h2{
  margin:0 0 14px!important;
  padding:0 52px 13px 0!important;
  border-bottom:1px solid #24212c!important;
  font:800 24px/1.1 'Space Grotesk',sans-serif!important;
  letter-spacing:-.03em!important;
}
#creator .creator-card .catalog-picker{margin-top:0!important}
#creator .creator-card>.close{
  display:grid!important;
  place-items:center!important;
  top:22px!important;
  right:22px!important;
  width:32px!important;
  height:32px!important;
  border:1px solid #2a2734!important;
  border-radius:8px!important;
  background:#131019!important;
  color:#8d81a3!important;
  font-size:20px!important;
  line-height:1!important;
  transition:border-color .14s ease,color .14s ease,background .14s ease!important;
}
#creator .creator-card>.close:hover{border-color:#4a4159!important;background:#1a1622!important;color:#efe8f8!important}

/* Bare X again - the frame around it read as a button inside a button. */
#creator .creator-card>.close{
  border:0!important;
  border-radius:0!important;
  background:none!important;
}
#creator .creator-card>.close:hover{background:none!important;border:0!important;color:#efe8f8!important}
/* .modal section carries a 2px accent stripe along its top edge; on a card this wide it just looked like a
   stray highlight. */
#creator .creator-card{
  border-top:0!important;
  border-radius:12px!important;
  border:1px solid #23202c!important;
}

/* ---- palette + square corners ---- */
/* One ladder of surfaces instead of eight hand-picked hexes: the card is the lightest, the picker sits a step
   below it, and the fields sit a step below that, so depth is read from value alone and every border is the
   same hairline. Accent is used once - on the primary action and on whatever is selected. */
#creator{
  --cr-card:#16141c;
  --cr-band:#121017;
  --cr-well:#0d0c12;
  --cr-field:#08070c;
  --cr-line:#221f2b;
  --cr-line2:#2e2a39;
  --cr-text:#f3eefa;
  --cr-mut:#8b8199;
  --cr-dim:#6b6379;
  --cr-acc:#7c4ddb;
}
#creator .creator-card{
  border-radius:4px!important;
  border:1px solid var(--cr-line)!important;
  background:var(--cr-card)!important;
}
#creator .creator-card>h2{border-bottom-color:var(--cr-line)!important;color:var(--cr-text)!important}
#creator .creator-card>p{color:#9d8ac6!important}

#creator .creator-card>.close{
  top:20px!important;
  right:20px!important;
  width:34px!important;
  height:34px!important;
  color:var(--cr-mut)!important;
  font-size:30px!important;
}

#creator .creator-card .catalog-picker{
  border-radius:4px!important;
  border-color:var(--cr-line)!important;
  background:var(--cr-well)!important;
}
#creator .catalog-search,
#creator .catalog-toolbar{background:var(--cr-band)!important;border-bottom-color:var(--cr-line)!important}
#creator .catalog-search input,
#creator .catalog-toolbar select{
  border-radius:3px!important;
  border-color:var(--cr-line2)!important;
  background-color:var(--cr-field)!important;
  color:var(--cr-text)!important;
}
#creator .catalog-search input::placeholder{color:var(--cr-dim)!important}
#creator .catalog-search input:hover,
#creator .catalog-toolbar select:hover{border-color:#3b3547!important}
#creator .catalog-search input:focus,
#creator .catalog-toolbar select:focus{border-color:var(--cr-acc)!important;background-color:var(--cr-field)!important}
#creator .catalog-search small{
  border-radius:3px!important;
  border-color:var(--cr-line)!important;
  background:var(--cr-field)!important;
  color:var(--cr-mut)!important;
}
#creator .catalog-toolbar select option{background:#141119}

#creator .creator-total{border-top-color:var(--cr-line)!important}
#creator .creator-total>span#selectionCount{color:var(--cr-mut)!important}
#creator .creator-total>.creator-amount strong{color:var(--cr-text)!important}
#creator .creator-total button#clearOffer{
  border-radius:3px!important;
  border-color:var(--cr-line2)!important;
  background:var(--cr-field)!important;
  color:var(--cr-mut)!important;
}
#creator .creator-total button#clearOffer:hover{border-color:#3b3547!important;background:#141119!important;color:var(--cr-text)!important}
#creator .creator-card .create-submit{border-radius:4px!important;background:var(--cr-acc)!important}
#creator .creator-card .create-submit:hover{background:#8a5be9!important}

/* ---- palette: match the rest of the site ---- */
/* The custom ladder made the modal read as a different product. These are the exact surfaces and hairlines the
   lobby, chat and jackpot panels already use, so the only colour in the card is the accent on the button. */
#creator{
  --cr-card:#17151d;
  --cr-band:#18151f;
  --cr-well:#100f15;
  --cr-field:#0e0d12;
  --cr-line:#2a2632;
  --cr-line2:#3a3444;
  --cr-text:#f4eff9;
  --cr-mut:#9b8fae;
  --cr-dim:#777085;
  --cr-acc:#7444cc;
}
#creator .creator-card{
  background:#17151d!important;
  border:1px solid #33303c!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52)!important;
}
#creator .creator-card>h2{border-bottom-color:#2a2632!important}
#creator .creator-card .catalog-picker{border-color:#2a2632!important;background:#100f15!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:#18151f!important;border-bottom-color:#2a2632!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{border-color:#3a3444!important;background-color:#0e0d12!important}
#creator .catalog-search input:hover,
#creator .catalog-toolbar select:hover,
#creator .creator-total button#clearOffer:hover{border-color:#4d4659!important}
#creator .catalog-search input:focus,
#creator .catalog-toolbar select:focus{border-color:#8a55e9!important}
#creator .catalog-search small{border-color:#2a2632!important;background:#0e0d12!important;color:#9b8fae!important}
#creator .creator-total{border-top-color:#2a2632!important}
#creator .creator-card .create-submit{background:#7444cc!important}
#creator .creator-card .create-submit:hover{background:#8a55e9!important}

/* Darker. Same neutral hue as the rest of the site, just several steps down - the site's panel greys are tuned
   for a small card sitting on the page, and at modal size they read as a grey slab. */
#creator .creator-card{
  background:#100e14!important;
  border-color:#262230!important;
}
#creator .creator-card>h2{border-bottom-color:#232029!important}
#creator .creator-card .catalog-picker{background:#0a090d!important;border-color:#232029!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:#0e0d12!important;border-bottom-color:#232029!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{background-color:#08070b!important;border-color:#2d2937!important}
#creator .catalog-search small{background:#08070b!important;border-color:#232029!important}
#creator .creator-total{border-top-color:#232029!important}

/* Measured on the live page: card #100e14, band #0e0d12, well #0a090d, tiles #191720 - the tiles were the
   LIGHTEST surface and the card was lighter than the page behind it, so the surround read as a flat grey
   nothing. The frame now sits clearly below the tiles, and the card carries a faint violet fall from top to
   bottom so it has some depth instead of one dead value. */
#creator .creator-card{
  background:linear-gradient(180deg,#0e0b16 0%,#0a0810 46%,#08070c 100%)!important;
  border-color:#221e2b!important;
}
#creator .creator-card>h2{border-bottom-color:#211d29!important}
#creator .creator-card .catalog-picker{background:#060509!important;border-color:#1e1a26!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:#0b0912!important;border-bottom-color:#1e1a26!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{background-color:#050409!important;border-color:#292434!important}
#creator .catalog-search small{background:#050409!important;border-color:#1e1a26!important}
#creator .creator-total{border-top-color:#211d29!important}

/* ---- palette presets ----
   Every surface in the modal now comes from four variables, so a whole look is one line. Preset A is the
   default; the others are selected with data-pal on <html> (the staging build ships a switcher for it). */
#creator{
  --p-card:linear-gradient(180deg,#141019 0%,#0f0c14 100%);
  --p-well:#0a0810;
  --p-band:#100d17;
  --p-field:#070610;
  --p-line:#241f2e;
  --p-line2:#332c40;
}
html[data-pal="b"] #creator{
  --p-card:#0d0d0f;
  --p-well:#08080a;
  --p-band:#111113;
  --p-field:#060607;
  --p-line:#232326;
  --p-line2:#323236;
}
html[data-pal="c"] #creator{
  --p-card:#15131b;
  --p-well:#0e0d13;
  --p-band:#191621;
  --p-field:#0b0a10;
  --p-line:#2c2836;
  --p-line2:#3d3749;
}
html[data-pal="d"] #creator{
  --p-card:linear-gradient(180deg,#191231 0%,#0d0a18 62%);
  --p-well:#0b0818;
  --p-band:#150f2a;
  --p-field:#080614;
  --p-line:#2b2350;
  --p-line2:#3d3370;
}
#creator .creator-card{background:var(--p-card)!important;border-color:var(--p-line)!important}
#creator .creator-card>h2{border-bottom-color:var(--p-line)!important}
#creator .creator-card .catalog-picker{background:var(--p-well)!important;border-color:var(--p-line)!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:var(--p-band)!important;border-bottom-color:var(--p-line)!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{background-color:var(--p-field)!important;border-color:var(--p-line2)!important}
#creator .catalog-search small{background:var(--p-field)!important;border-color:var(--p-line)!important}
#creator .creator-total{border-top-color:var(--p-line)!important}

/* ---- preset A, premium pass ----
   Flat near-black was the problem: every surface sat within four values of every other one, so the card had no
   light in it and the item well swallowed the tiles. There is now one ambient source at the top of the card
   that falls away toward the footer, the well sits ABOVE the card in value so the tiles rest on something, and
   each panel gets a 1px top highlight - the cheap trick that makes a dark panel read as a lit surface rather
   than a hole. */
#creator{
  --p-well:#141119;
  --p-band:#1a1526;
  --p-field:#0d0b14;
  --p-line:rgba(163,127,255,.15);
  --p-line2:rgba(163,127,255,.24);
}
#creator .creator-card{
  background:radial-gradient(128% 86% at 50% -12%,#1e1636 0%,#130f1f 44%,#0b0911 100%)!important;
  border-color:rgba(163,127,255,.19)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 30px 80px rgba(0,0,0,.66),0 0 0 1px rgba(124,77,219,.09)!important;
}
#creator .creator-card .catalog-picker{
  background:linear-gradient(180deg,#151220 0%,#100e17 100%)!important;
  border-color:rgba(163,127,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
#creator .catalog-search,
#creator .catalog-toolbar{
  background:linear-gradient(180deg,#1c1729 0%,#171223 100%)!important;
  border-bottom-color:rgba(163,127,255,.16)!important;
}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{
  background-color:#0d0b14!important;
  border-color:rgba(163,127,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
#creator .catalog-search small{background:#0d0b14!important;border-color:rgba(163,127,255,.15)!important;color:#a596c2!important}
#creator .creator-card>h2{border-bottom-color:rgba(163,127,255,.17)!important}
#creator .creator-total{border-top-color:rgba(163,127,255,.17)!important}
#creator .creator-card .create-submit{
  background:linear-gradient(180deg,#8b57e8 0%,#6f3ccb 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(112,54,204,.3)!important;
}
#creator .creator-card .create-submit:hover{background:linear-gradient(180deg,#9964f5 0%,#7a45db 100%)!important}

/* ---- desaturate ----
   Keep the lighting (ambient fall, 1px top highlights) but take the colour out of it. The violet was in every
   surface AND every hairline, which is what made it read pink. Surfaces are neutral charcoal now and the only
   saturated thing left in the card is the button. */
#creator{
  --p-well:#15141a;
  --p-band:#1a191f;
  --p-field:#0e0d12;
  --p-line:rgba(255,255,255,.07);
  --p-line2:rgba(255,255,255,.12);
}
#creator .creator-card{
  background:radial-gradient(128% 86% at 50% -12%,#1b1a21 0%,#141319 46%,#0d0c11 100%)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.66)!important;
}
#creator .creator-card .catalog-picker{
  background:linear-gradient(180deg,#16151c 0%,#111016 100%)!important;
  border-color:rgba(255,255,255,.07)!important;
}
#creator .catalog-search,
#creator .catalog-toolbar{
  background:linear-gradient(180deg,#1c1b22 0%,#17161d 100%)!important;
  border-bottom-color:rgba(255,255,255,.07)!important;
}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{border-color:rgba(255,255,255,.12)!important;background-color:#0e0d12!important}
#creator .catalog-search input:hover,
#creator .catalog-toolbar select:hover,
#creator .creator-total button#clearOffer:hover{border-color:rgba(255,255,255,.2)!important}
#creator .catalog-search small{background:#0e0d12!important;border-color:rgba(255,255,255,.07)!important;color:#948ba3!important}
#creator .creator-card>h2{border-bottom-color:rgba(255,255,255,.08)!important}
#creator .creator-total{border-top-color:rgba(255,255,255,.08)!important}
#creator .creator-card .create-submit{
  background:linear-gradient(180deg,#7a4bd4 0%,#6337b6 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(80,40,150,.24)!important;
}
#creator .creator-card .create-submit:hover{background:linear-gradient(180deg,#8955e4 0%,#7040c9 100%)!important}

/* The primary action only earns its colour once the flip can actually be made. Until then it is a neutral
   panel button, so the eye goes to the inventory instead of to a control that will refuse the click.
   game.js sets an inline opacity for the disabled state; that gets replaced with a real one here. */
#creator .creator-card .create-submit:disabled,
#creator .creator-card .create-submit[disabled]{
  opacity:1!important;
  filter:none!important;
  background:#171620!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#6f6880!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}
#creator .creator-card .create-submit:disabled b,
#creator .creator-card .create-submit[disabled] b{color:#514b5f!important}

/* The empty state inherits the grid's auto-fill columns, so the headline text node and the ::after hint landed
   in two side-by-side cells instead of stacking. One column, centred. */
#creator .catalog-grid[data-empty="true"]{
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  justify-items:center!important;
  align-content:center!important;
}

/* ---- join mode ----
   game.js:527 already hides the heads/tails picker when the modal is reused to JOIN a flip (you take whatever
   side is left, so there is nothing to pick) - but it does it with an INLINE display:none, and the footer rule
   above sets display:flex!important, which an inline style cannot beat. So the coins stayed up and the
   MATCHED/OVERPAY hint, which game.js inserts into the same .creator-total row, printed straight over them. */
#creator.gf-join-mode .creator-total .cf-side,
#creator.gf-join-mode .creator-total #cfSide{display:none!important}
/* The hint takes the centre cell the coins vacate. */
#creator .creator-total .gfj-hint{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  margin:0!important;
  white-space:nowrap!important;
  font:800 12px/1 'Space Grotesk',sans-serif!important;
  letter-spacing:0!important;
}
#creator .creator-total .gfj-hint .g-coin{width:15px!important;height:15px!important}

/* Measured: the footer's middle track collapses to 0px (computed "581px 0px 581px" on an 860px row), so
   placing the hint in column 2 put it wherever the overflow landed - right of centre - not in the middle.
   Centre it against the ROW instead, the same way layout.css centres the coin picker. The row is already
   position:relative, and CLEAR is already absolute, so nothing else moves. */
#creator .creator-total .gfj-hint{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  grid-column:auto!important;
  justify-self:auto!important;
  font:800 15px/1 'Space Grotesk',sans-serif!important;
  gap:7px!important;
}
#creator .creator-total .gfj-hint .g-coin{width:19px!important;height:19px!important}
#creator .creator-total .gfj-hint em{width:19px!important;height:19px!important;vertical-align:middle!important}

/* ---- hand the phone footer back to mobile-flip.css ----
   Everything above is written for the desktop footer (absolutely centred hint, flex coin row, CLEAR pinned to
   the card edge). None of it carries a media query, so it was also winning at phone widths and fighting the
   purpose-built mobile layout. Re-assert that layout below 900px. */
@media(max-width:900px){
  #creator .creator-card .creator-total{
    position:relative!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    grid-template-areas:"count amount clear" "hint hint hint" "side side side"!important;
    row-gap:10px!important;
    column-gap:10px!important;
    padding:12px 0!important;
  }
  #creator .creator-total>span#selectionCount{grid-area:count!important;justify-self:start!important}
  #creator .creator-total>.creator-amount{
    grid-area:amount!important;
    justify-self:center!important;
    padding-right:0!important;
    margin-right:0!important;
  }
  #creator .creator-total button#clearOffer{
    position:static!important;
    transform:none!important;
    grid-area:clear!important;
    justify-self:end!important;
  }
  #creator .creator-total .gfj-hint{
    position:static!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    grid-area:hint!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:center!important;
  }
  #creator .creator-total .cf-side{
    position:static!important;
    grid-area:side!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:center!important;
  }
  #creator.gf-join-mode .creator-total{grid-template-areas:"count amount clear" "hint hint hint"!important}
}

/* ---- lobby column fills its height ----
   Measured on the live page: .game-list spans the full column (215->1286) but .gl-scroll ends at 633, because
   layout.css:5134/5136 (.cf-main>.game-list{display:block} / .gl-scroll{flex:none;height:auto}) overrides the
   earlier flex-column rules at 5058-5061. So the footer, which is the LAST child of .gl-scroll, stopped
   wherever the content did and left the rest of the column as bare background.
   Make the scroller fill the column and let the rows area take up the slack, so the footer sits at the bottom. */
@media(min-width:901px){
  html.gf-scale .cf-main>.game-list{display:flex!important;flex-direction:column!important}
  html.gf-scale .game-list>.gl-scroll{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
  }
  /* the rows area absorbs the free space; every other child keeps its natural height */
  html.gf-scale .game-list>.gl-scroll>#gfLobby{flex:0 0 auto!important;min-height:0!important}
  html.gf-scale .game-list>.gl-scroll>.gf-footer{margin-top:auto!important}
  html.gf-scale .game-list>.gl-scroll>.gf-footer{flex:0 0 auto!important;margin-top:0!important}
}

/* .game-list is a flex child of .cf-main, but layout.css:4748 gives it height:100% - the FULL column height -
   even though it starts below #gfAnnounce (81px lower). So the column always overhung the fold by exactly the
   announce bar's height; it was only invisible while the footer stopped early and left background behind it.
   Take the REMAINING space instead, so the column ends at the fold and the footer lands on it. */
@media(min-width:901px){
  html.gf-scale .cf-main>.game-list{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
  }
}

/* ---- dialogs must fit the canvas ----
   With the scale floor the canvas is no longer a fixed 2200: at a 912px window it is 1169. Cards sized in px
   (the creator is 1168) then fill or exceed it and hang off the right edge - measured 41px off at 912, while
   960+ was already inside. Cap every dialog to its container instead. No-op wherever the card is already
   narrower than the canvas (at 1024 the card is 1200 against a 1313 canvas), and it protects the jackpot,
   profile and settings dialogs too, not just this one. */
@media(min-width:901px){
  /* layout.css sets `html.gf-scale #creator .creator-card{width:1240px;max-width:calc(100% - 72px)}` at a higher
     specificity than a `.modal>section` rule, so the earlier cap never reached the creator card - and a fixed
     1240px cannot fit a 1169px canvas at a 912px window. Clamp against the canvas width the scaler publishes,
     matching that selector so this wins on document order. */
  html.gf-scale .modal>section{max-width:calc(var(--gf-canvas,100%) - 28px)!important}
  html.gf-scale #creator .creator-card{
    width:min(1240px,calc(var(--gf-canvas,100%) - 28px))!important;
    max-width:calc(var(--gf-canvas,100%) - 28px)!important;
  }
}

/* ---- narrow desktop (901-1150) ----
   main.css's 901-1150 band is a deliberate COMPRESSED design: it sets `.labels{display:none!important}` and
   `.lobby{display:flex!important}` - no labels strip, rows as a flex line. But layout.css then forces
   `html.gf-scale .labels{display:grid!important}` with NO media query, so the 5-column labels strip came back
   above a flex row. Two layouts that cannot agree, and that mismatch is the "pot not centred" - the pot drifted
   further the wider the window got (96px at 960, 112px at 1024, 139px at 1100, 1px at 1280+). Three attempts at
   re-imposing a grid template all failed because the row is flex here by design, so a template is inert on it.
   Honour the band's own design instead, and keep only the two genuine bugs fixed. */
@media(min-width:901px) and (max-width:1150px){
  /* layout.css has `html.gf-scale .labels{display:grid!important}` at specificity (0,2,1) with NO media
     query; a plain `.game-list .labels` is (0,2,0) and loses to it. The html.gf-scale prefix makes this
     (0,3,1) so the band's own intent actually takes effect. */
  html.gf-scale .game-list .labels,
  html.gf-scale .labels{display:none!important}
  .player img{width:43px!important;height:43px!important}
  /* must out-specify .player img - the heads/tails coin is an <img> inside .player, which is why
     `@media(max-width:1150px) .player img{width:32px!important}` was shrinking it to 32px */
  #gfLobby .lobby .gfl-side-coin,
  #pastGames .lobby .gfl-side-coin{width:56px!important;height:56px!important}
  /* the band stacks .list-head into a column whose tools row overlapped the strip below it (FILTER sitting on
     the labels); the wide layout's grid header does not */
  .game-list .list-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 246px!important;
    flex-direction:row!important;
    align-items:stretch!important;
    gap:0!important;
    height:82px!important;
    min-height:82px!important;
  }
  .list-head .lobby-tools{position:static!important;transform:none!important;margin-left:auto!important}
}

@media(max-width:900px){
  .columns>.chat,.chat{
    position:fixed!important;
    inset:auto 10px auto auto!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:min(340px,calc(100vw - 20px))!important;
    height:min(42dvh,340px)!important;
    min-height:0!important;
    max-height:42dvh!important;
    transform:none!important;
    transition:opacity .16s ease,visibility .16s ease!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:14px!important;
    box-shadow:0 18px 50px rgba(0,0,0,.62)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .columns>.chat .chat-head,.chat .chat-head{flex:0 0 auto!important;min-height:0!important;height:42px!important;padding:0 12px!important}
  .columns>.chat .messages,.chat .messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:auto!important}
  .columns>.chat form,.chat form{flex:0 0 auto!important;padding:8px!important}
}

@media(max-width:900px){
  body.gf-chat-open .columns>aside.chat,
  body.gf-chat-open aside.chat,
  body.gf-mobile-chat-open .columns>aside.chat{
    position:fixed!important;
    top:auto!important;
    left:auto!important;
    right:10px!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    inset:auto 10px auto auto!important;
    width:min(340px,calc(100vw - 20px))!important;
    height:min(42dvh,340px)!important;
    max-height:42dvh!important;
    min-height:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:14px!important;
    box-shadow:0 18px 50px rgba(0,0,0,.62)!important;
    overflow:hidden!important;
  }
  body.gf-chat-open .columns>aside.chat .chat-head,
  body.gf-chat-open aside.chat .chat-head{flex:0 0 auto!important;height:42px!important;min-height:0!important;padding:0 12px!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;overscroll-behavior:auto!important}
  body.gf-chat-open .columns>aside.chat form,
  body.gf-chat-open aside.chat form{flex:0 0 auto!important;padding:8px!important}
  body.gf-chat-open,body.gf-scroll-lock{overflow:auto!important;position:static!important}
}

@media(max-width:900px){
  #gfChatSheet{
    position:fixed!important;
    inset:auto 10px auto auto!important;
    top:auto!important;
    left:auto!important;
    right:10px!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:min(340px,calc(100vw - 20px))!important;
    height:min(42dvh,340px)!important;
    max-height:42dvh!important;
    min-height:0!important;
    padding:0!important;
    background:transparent!important;
    border-radius:14px!important;
    overflow:hidden!important;
    box-shadow:0 18px 50px rgba(0,0,0,.62)!important;
  }
  #gfChatSheet>aside.chat{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:14px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #gfChatSheet>aside.chat .chat-head{flex:0 0 auto!important;height:42px!important;min-height:0!important;padding:0 12px!important}
  #gfChatSheet>aside.chat .messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:auto!important}
  #gfChatSheet>aside.chat form{flex:0 0 auto!important;padding:8px!important}
}

@media(max-width:900px){
  #gfChatSheet{
    left:0!important;
    right:0!important;
    inset:auto 0 auto 0!important;
    bottom:calc(63px + env(safe-area-inset-bottom))!important;
    width:100%!important;
    max-width:100%!important;
    height:min(38dvh,300px)!important;
    max-height:38dvh!important;
    border-radius:14px 14px 0 0!important;
    box-shadow:0 -14px 40px rgba(0,0,0,.6)!important;
  }
  #gfChatSheet>aside.chat{
    border-radius:14px 14px 0 0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
  }
  #gfChatSheet>aside.chat form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:8px 10px!important;
  }
  #gfChatSheet>aside.chat form button{
    width:auto!important;
    min-width:0!important;
    height:34px!important;
    padding:0 13px!important;
    border-radius:8px!important;
    font:800 10px/1 'DM Mono',monospace!important;
    letter-spacing:.06em!important;
  }
  #gfChatSheet>aside.chat form input{height:34px!important}
}

*::-webkit-scrollbar-thumb{transition:background-color .28s ease!important}
html:not(.gf-scrolling)::-webkit-scrollbar-thumb,
html:not(.gf-scrolling) *::-webkit-scrollbar-thumb{background-color:transparent!important;box-shadow:none!important}
html:not(.gf-scrolling),
html:not(.gf-scrolling) *{scrollbar-color:transparent transparent!important}

@media(max-width:900px){
  #gfChatSheet{
    height:min(44dvh,350px)!important;
    max-height:44dvh!important;
  }
}

@media(max-width:900px){
  #gwModal .catalog-item{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;
    align-content:center!important;
    justify-items:center!important;
    gap:5px!important;
    min-height:152px!important;
    padding:10px!important;
  }
  #gwModal .catalog-item img{
    grid-row:1!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:82px!important;
    object-fit:contain!important;
  }
  #gwModal .catalog-item>span{
    grid-row:2!important;
    display:grid!important;
    justify-items:center!important;
    gap:2px!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #gwModal .catalog-item>span b{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:1.1!important;
  }
  #gwModal .catalog-item>span small{font-size:8px!important;line-height:1!important}
  #gwModal .catalog-item>strong{
    grid-row:3!important;
    font-size:12px!important;
    line-height:1!important;
    margin:0!important;
  }
}

.creator-total{position:relative}
#gwModal .creator-total{position:relative!important}
.gf-auto{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:4!important;
  height:36px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:3px!important;
  background:#0e0d12!important;
  color:#c3b7da!important;
  font:800 10px/1 'DM Mono',monospace!important;
  letter-spacing:.06em!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:border-color .14s ease,background .14s ease,color .14s ease!important;
}
.gf-auto:hover{border-color:rgba(165,107,255,.6)!important;background:#170f24!important;color:#efe6ff!important}
.gf-auto:active{transform:translateY(-50%) scale(.97)!important}

@media(max-width:900px){
  #gfChatSheet{
    height:min(52dvh,420px)!important;
    max-height:52dvh!important;
  }
  body.gf-chat-open{
    padding-bottom:calc(63px + min(52dvh,420px) + 18px + env(safe-area-inset-bottom))!important;
  }
  .gf-auto{height:32px!important;padding:0 10px!important;font-size:9px!important}
}

#creator .creator-total>.creator-amount{padding-right:var(--gf-foot-right,104px)!important}

.create-submit,.actions .join,.actions .view,.gw-join,.gf-auto,#clearOffer,#gwClear,.gf-tabbar button,.create-open{
  transition:transform .07s ease,filter .07s ease,background .14s ease,border-color .14s ease!important;
}
.create-submit:active,.actions .join:active,.actions .view:active,.gw-join:active,
#clearOffer:active,#gwClear:active,.gf-tabbar button:active,.create-open:active{
  transform:scale(.978)!important;
  filter:brightness(1.14)!important;
}
.create-submit:disabled:active,.gw-join:disabled:active{transform:none!important;filter:none!important}

@media(max-width:900px){
  body.gf-chat-open .gl-scroll,
  body.gf-chat-open .game-list,
  body.gf-chat-open .workspace{
    padding-bottom:calc(min(52dvh,420px) + 26px)!important;
  }
  .gw-note{display:none!important}
  .gw-pin .gw-amount,.gw-card .gw-amount{justify-self:end!important;margin-left:auto!important}
}

html body #creator.show>.creator-card,
html body #gwModal.show>section{animation:gfModalIn .24s cubic-bezier(.22,.68,.36,1) both!important}
html body #creator.show,
html body #gwModal.show{animation:gfBackdropIn .18s ease both!important}

@media(max-width:1150px){
  #gfLobby .lobby:not(.gfl-live)>.pot,
  #pastGames .lobby:not(.gfl-live)>.pot{
    align-self:center!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    height:auto!important;
    min-height:0!important;
    margin:0 12px 0 0!important;
    padding:0!important;
    white-space:nowrap!important;
  }
  #gfLobby .lobby:not(.gfl-live)>.pot em,
  #pastGames .lobby:not(.gfl-live)>.pot em{margin:0!important;vertical-align:middle!important}
}

@media(max-width:1150px){
  #pastGames .lobby .player.matched>.match-status,
  #pastGames .lobby .player.matched>.match-status.result,
  #gfLobby .lobby.gfl-live .player.matched>.match-status,
  #gfLobby .lobby.gfl-live .player.matched>.match-status.result{
    position:static!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    margin:0 0 0 10px!important;
    flex:0 0 auto!important;
  }
  #gfLobby .lobby:not(.gfl-live)>.player{min-width:0!important;flex:1 1 auto!important}
  #gfLobby .lobby:not(.gfl-live)>.pot{flex:0 0 auto!important;margin-left:16px!important}
  #gfLobby .lobby:not(.gfl-live) .player .gfl-open-slot{margin-right:16px!important}
}

#filterResult:empty{display:none!important}
#filterResult.gf-blank{display:none!important}

.game-list .list-head{justify-content:space-between!important}
.game-list .list-head .lobby-tools{margin-left:auto!important}

@media(min-width:901px) and (max-width:1150px){
  html body #pastGames .game-list .lobby.gfl-live>.player.matched>.match-status,
  html body #pastGames .game-list .lobby.gfl-live>.player.matched>.match-status.result,
  html body #pastGames .lobby.gfl-live>.player.matched>.match-status,
  html body #pastGames .lobby.gfl-live>.player.matched>.match-status.result,
  html body #gfLobby .game-list .lobby.gfl-live>.player.matched>.match-status,
  html body #gfLobby .game-list .lobby.gfl-live>.player.matched>.match-status.result,
  html body #gfLobby .lobby.gfl-live>.player.matched>.match-status,
  html body #gfLobby .lobby.gfl-live>.player.matched>.match-status.result{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    margin:0 0 0 12px!important;
    flex:0 0 auto!important;
  }
}

@media(max-width:900px){
  html body #gfLobby .lobby:not(.gfl-live) .player .gfl-open-slot{
    margin:0 16px 0 auto!important;
  }
  html body #gfLobby .lobby:not(.gfl-live)>.pot{
    margin-left:16px!important;
    flex:0 0 auto!important;
  }
  html body #gfLobby .lobby:not(.gfl-live)>.player{min-width:0!important}
}

@media(max-width:1150px){
  html body #gfLobby .lobby:not(.gfl-live) .player .gfl-name,
  html body #gfLobby .lobby:not(.gfl-live) .player>span{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  html body #gfLobby .lobby:not(.gfl-live) .player .gfl-name b,
  html body #gfLobby .lobby:not(.gfl-live) .player>span b{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    max-width:100%!important;
  }
  html body #gfLobby .lobby:not(.gfl-live)>.player{overflow:hidden!important}
}



body.gf-chat-open{
  padding-bottom:calc(63px + min(52dvh,420px) + 18px + env(safe-area-inset-bottom))!important;
  overflow:auto!important;
  position:static!important;
}
body.gf-chat-open .gl-scroll,
body.gf-chat-open .game-list,
body.gf-chat-open .workspace{padding-bottom:calc(min(52dvh,420px) + 26px)!important}

#gfChatSheet>aside.chat .messages{overscroll-behavior:auto!important}
#gfChatSheet{overscroll-behavior:auto!important}




html body #gfLobby .gfl-flip-row .match-status>.gfl-side-coin,
html body #pastGames .gfl-flip-row .match-status>.gfl-side-coin{
  display:block!important;
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  html body #gfLobby .gfl-flip-row .match-status>.gfl-side-coin{width:36px!important;height:36px!important}
}
html body #gfLobby .gfl-flip-row>.gfl-flip-actions .join,
html body #gfLobby .gfl-flip-row>.gfl-flip-actions .view{
  min-width:76px!important;
  margin:0!important;
}
html body #gfLobby .gfl-flip-row>.gfl-flip-actions{
  gap:8px!important;
  flex-wrap:nowrap!important;
}

@media(min-width:901px){
  html body #gfLobby .gfl-flip-row,
  html body #pastGames .gfl-flip-row{
    box-sizing:border-box!important;
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
  }
}

@media(max-width:900px){
  html body #gfLobby .lobby.gfl-flip-row>.offer,
  html body #pastGames .lobby.gfl-flip-row>.offer{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  html body #gfLobby .lobby.gfl-flip-row>.offer>img,
  html body #pastGames .lobby.gfl-flip-row>.offer>img{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    max-height:36px!important;
    margin:0 -10px 0 0!important;
  }
}

html body #gfLobby .lobby.gfl-flip-row>.pot,
html body #pastGames .lobby.gfl-flip-row>.pot{
  grid-area:pot!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:start!important;
  white-space:nowrap!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-center,
html body #pastGames .lobby.gfl-flip-row .gfl-match-center{
  grid-template-rows:auto!important;
  place-items:center!important;
  height:56px!important;
}
@media(min-width:901px){
  html body #gfLobby .lobby.gfl-flip-row,
  html body #pastGames .lobby.gfl-flip-row{
    grid-template-columns:minmax(0,1fr) 132px 96px minmax(130px,.25fr)!important;
    grid-template-areas:"match items pot actions"!important;
  }
}
@media(max-width:900px){
  html body #gfLobby .lobby.gfl-flip-row,
  html body #pastGames .lobby.gfl-flip-row{
    grid-template-columns:minmax(0,1fr) max-content!important;
    grid-template-areas:"match actions" "items pot"!important;
  }
  html body #gfLobby .lobby.gfl-flip-row>.pot,
  html body #pastGames .lobby.gfl-flip-row>.pot{
    justify-self:end!important;
  }
  html body #gfLobby .lobby.gfl-flip-row .gfl-match-center,
  html body #pastGames .lobby.gfl-flip-row .gfl-match-center{
    height:44px!important;
  }
}

@media(min-width:901px){
  html body .game-list .labels{
    display:grid!important;
    box-sizing:border-box!important;
    grid-template-columns:minmax(0,1fr) 132px 96px minmax(130px,.25fr)!important;
    column-gap:18px!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }
  html body .game-list .labels>span:nth-child(4),
  html body .game-list .labels>span:nth-child(5){
    display:none!important;
  }
}

html body #gfLobby .lobby.gfl-flip-open .gfl-match-vs{
  visibility:hidden!important;
}
@media(min-width:901px){
  html body #gfLobby .lobby.gfl-flip-row .gfl-flip-match,
  html body #pastGames .lobby.gfl-flip-row .gfl-flip-match{
    column-gap:10px!important;
  }
}
@media(max-width:900px){
  html body #gfLobby .lobby.gfl-flip-row .gfl-flip-match,
  html body #pastGames .lobby.gfl-flip-row .gfl-flip-match{
    column-gap:12px!important;
  }
}

html body #gfLobby .lobby.gfl-flip-row .gfl-flip-match,
html body #pastGames .lobby.gfl-flip-row .gfl-flip-match{
  grid-template-columns:minmax(0,max-content) max-content minmax(0,max-content) minmax(64px,1fr)!important;
  grid-template-areas:"host vs guest center"!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-player,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player{
  min-width:0!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-player>span,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player>span{
  min-width:0!important;
  overflow:hidden!important;
}
@media(min-width:901px) and (max-width:1060px){
  html body #gfLobby .lobby.gfl-flip-row .gfl-match-player>span,
  html body #pastGames .lobby.gfl-flip-row .gfl-match-player>span{
    display:none!important;
  }
  html body #gfLobby .lobby.gfl-flip-row .gfl-match-player,
  html body #pastGames .lobby.gfl-flip-row .gfl-match-player,
  html body #gfLobby .lobby.gfl-flip-row .gfl-match-player.opponent,
  html body #pastGames .lobby.gfl-flip-row .gfl-match-player.opponent{
    grid-template-columns:56px!important;
  }
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-player.opponent,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player.opponent{
  grid-template-columns:56px minmax(0,1fr)!important;
  text-align:left!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-player.opponent>img.pav,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player.opponent>img.pav{
  grid-column:1!important;
  grid-row:1!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-player.opponent>span,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player.opponent>span{
  grid-column:2!important;
  grid-row:1!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-center,
html body #pastGames .lobby.gfl-flip-row .gfl-match-center{
  justify-self:end!important;
}
html body #gfLobby .lobby.gfl-flip-open .gfl-match-player.gfl-await{
  min-width:56px!important;
}
@media(max-width:900px){
  html body #gfLobby .lobby.gfl-flip-row .gfl-match-player.opponent,
  html body #pastGames .lobby.gfl-flip-row .gfl-match-player.opponent{
    grid-template-columns:40px minmax(0,1fr)!important;
  }
}

html body #creator .creator-card .creator-total>span#selectionCount,
html body #gwModal .creator-total>span#selectionCount{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  min-width:0!important;
}
html body #creator .creator-card .creator-total>.creator-amount,
html body #gwModal .creator-total>.creator-amount{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  margin:0!important;
  padding-right:0!important;
  padding-left:0!important;
  white-space:nowrap!important;
}
html body #creator .creator-card .creator-total>.cf-side,
html body #gwModal .creator-total>.cf-side{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:center!important;
  align-self:center!important;
  margin:0!important;
}
html body #creator .creator-card .creator-total>.gf-foot-actions,
html body #gwModal .creator-total>.gf-foot-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}
html body #creator .creator-card .creator-total>.gf-foot-actions>.gf-auto,
html body #creator .creator-card .creator-total>.gf-foot-actions>button#clearOffer,
html body #gwModal .creator-total>.gf-foot-actions>.gf-auto,
html body #gwModal .creator-total>.gf-foot-actions>button#gwClear{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  margin:0!important;
  flex:0 0 auto!important;
}
@media(max-width:620px){
  html body #creator .creator-card .creator-total>span#selectionCount,
  html body #gwModal .creator-total>span#selectionCount{
    font-size:0!important;
  }
  html body #creator .creator-card .creator-total>.gf-foot-actions,
  html body #gwModal .creator-total>.gf-foot-actions{
    gap:6px!important;
  }
}

html body #gfLobby .lobby.gfl-flip-row .gfl-match-center,
html body #pastGames .lobby.gfl-flip-row .gfl-match-center{
  margin-right:26px!important;
}
@media(max-width:900px){
  html body #gfLobby .lobby.gfl-flip-row .gfl-match-center,
  html body #pastGames .lobby.gfl-flip-row .gfl-match-center{
    margin-right:0!important;
  }
}
html body #gfLobby .lobby.gfl-flip-row>.offer:not(:has(>img:nth-of-type(2))),
html body #pastGames .lobby.gfl-flip-row>.offer:not(:has(>img:nth-of-type(2))){
  justify-content:center!important;
}
html body #gfLobby .lobby.gfl-flip-row>.offer:not(:has(>img:nth-of-type(2)))>img,
html body #pastGames .lobby.gfl-flip-row>.offer:not(:has(>img:nth-of-type(2)))>img{
  margin-right:0!important;
}

@media(min-width:901px){
  html body .game-list .list-head{
    column-gap:16px!important;
  }
  html body .game-list .list-head .lobby-heading{
    column-gap:14px!important;
  }
  html body .game-list .list-head .lobby-heading .create-open{
    flex:0 0 auto!important;
    min-width:max-content!important;
    margin-right:0!important;
    padding-left:15px!important;
    padding-right:15px!important;
    white-space:nowrap!important;
  }
  html body .game-list .list-head .lobby-tools{
    column-gap:10px!important;
    margin-left:16px!important;
  }
}

@media(max-width:900px){
  html body #profile .profile-card #tipPlayer{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    justify-self:stretch!important;
    align-self:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:12px 0 0!important;
  }
}

@media(max-width:900px){
  html body .toast{
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
    left:50%!important;
    right:auto!important;
    box-sizing:border-box!important;
    width:max-content!important;
    max-width:92%!important;
    padding:14px 18px!important;
    border-radius:9px!important;
    font-size:13px!important;
    line-height:1.4!important;
    text-align:center!important;
    white-space:normal!important;
    box-shadow:0 14px 40px rgba(0,0,0,.55)!important;
  }
}

@media(max-width:900px){
  html body #accountMenu.account-menu{
    background:#101015!important;
    border-color:#2a2833!important;
    box-shadow:0 24px 66px rgba(0,0,0,.72)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body #accountMenu.account-menu .am-bal{
    background:#131218!important;
    border-color:#292730!important;
  }
  html body #accountMenu.account-menu .am-logout{
    color:#d8d3dd!important;
  }
}

@media(max-width:900px){
  html body #accountMenu.account-menu .am-links button,
  html body #accountMenu.account-menu .am-links svg,
  html body #accountMenu.account-menu .am-logout svg{
    color:#90889b!important;
    stroke:#90889b!important;
  }
  html body #accountMenu.account-menu .am-links button{
    color:#e9e6f2!important;
  }
}

#profile .profile-card .gfp-tabs{
  position:relative;
  display:flex;
  gap:4px;
  margin:14px 0 12px;
  padding:4px;
  border:1px solid #262330;
  border-radius:8px;
  background:#0d0d11;
}
#profile .profile-card .gfp-tab{
  position:relative;
  z-index:1;
  flex:1 1 0;
  min-width:0;
  padding:10px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#8a8397;
  font:800 9px/1 "DM Mono",monospace;
  letter-spacing:.13em;
  cursor:pointer;
  transition:color .22s ease;
}
#profile .profile-card .gfp-tab.is-on{color:#f4f0f8}
#profile .profile-card .gfp-tab:hover{color:#cfc7dd}
#profile .profile-card .gfp-ind{
  position:absolute;
  left:4px;
  top:4px;
  bottom:4px;
  width:0;
  border-radius:6px;
  background:linear-gradient(135deg,#2c2138,#1d1826);
  border:1px solid #3d3350;
  transition:transform .3s cubic-bezier(.22,.68,.36,1),width .3s cubic-bezier(.22,.68,.36,1);
  pointer-events:none;
}
#profile .profile-card .gfp-chart-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}
#profile .profile-card .gfp-chart-head small{
  display:block;
  margin-bottom:5px;
  color:#7d7689;
  font:800 8px/1 "DM Mono",monospace;
  letter-spacing:.13em;
}
#profile .profile-card .gfp-chart-head b{
  font:800 24px/1 "Space Grotesk",sans-serif;
  letter-spacing:-.02em;
}
#profile .profile-card .gfp-profit:before{content:attr(data-sign)}
#profile .profile-card .gfp-profit.is-up{color:#5fd39b}
#profile .profile-card .gfp-profit.is-down{color:#ff8f9a}
#profile .profile-card .gfp-chart-meta{text-align:right}
#profile .profile-card .gfp-chart-meta b{font-size:16px;color:#cdc5dc}
#profile .profile-card .gfp-chart{
  position:relative;
  height:190px;
  border:1px solid #232029;
  border-radius:8px;
  background:linear-gradient(180deg,#0e0d12,#0b0b0f);
  overflow:hidden;
}
#profile .profile-card .gfp-chart svg{display:block;width:100%;height:100%}
#profile .profile-card .gfp-grid{stroke:#1c1a23;stroke-width:1}
#profile .profile-card .gfp-zero{stroke:#3a3346;stroke-width:1;stroke-dasharray:3 4}
#profile .profile-card .gfp-empty{
  margin:0;
  padding:74px 18px;
  text-align:center;
  color:#6f687c;
  font:500 11px/1.5 Manrope,sans-serif;
}
#profile .profile-card .gfp-tip{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-140%);
  padding:6px 9px;
  border:1px solid #3a3446;
  border-radius:6px;
  background:#16141d;
  color:#f1edf7;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}
#profile .profile-card .gfp-tip b{font:800 12px/1 "Space Grotesk",sans-serif}
#profile .profile-card .gfp-tip span{
  display:block;
  margin-top:3px;
  color:#8b8399;
  font:600 8px/1 "DM Mono",monospace;
  letter-spacing:.08em;
}

@keyframes gfpRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gfpCardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gfpAvatarIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

#profile .profile-card.gfp-open{animation:gfpCardIn .34s cubic-bezier(.22,.68,.36,1) both}
#profile .profile-card.gfp-open .profile-avatar{animation:gfpAvatarIn .42s cubic-bezier(.22,.68,.36,1) .05s both}
#profile .profile-card.gfp-open .gfp-tabs{animation:gfpRise .36s cubic-bezier(.22,.68,.36,1) .10s both}
#profile .profile-card.gfp-open .profile-career-strip{animation:gfpRise .36s cubic-bezier(.22,.68,.36,1) .14s both}
#profile .profile-card.gfp-open .profile-performance>*{animation:gfpRise .36s cubic-bezier(.22,.68,.36,1) both}
#profile .profile-card.gfp-open .profile-performance>*:nth-child(1){animation-delay:.18s}
#profile .profile-card.gfp-open .profile-performance>*:nth-child(2){animation-delay:.23s}
#profile .profile-card.gfp-open .profile-performance>*:nth-child(3){animation-delay:.28s}
#profile .profile-card.gfp-open .profile-performance>*:nth-child(4){animation-delay:.33s}
#profile .profile-card .profile-career-strip.gfp-in,
#profile .profile-card .profile-performance.gfp-in,
#profile .profile-card .gfp-panel-chart.gfp-in{animation:gfpRise .3s cubic-bezier(.22,.68,.36,1) both}
#profile .profile-card #profileXpFill{transition:width .85s cubic-bezier(.22,.68,.36,1)}

@media(prefers-reduced-motion:reduce){
  #profile .profile-card.gfp-open,
  #profile .profile-card.gfp-open *,
  #profile .profile-card .gfp-in{animation:none!important}
  #profile .profile-card .gfp-ind,
  #profile .profile-card #profileXpFill{transition:none!important}
}

#profile .profile-card .gfp-hide{display:none!important}
#profile .profile-card .gfp-panel-chart{margin-top:2px}

#profile .profile-card .gfp-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
#profile .profile-card .gfp-seg{
  display:flex;
  gap:2px;
  padding:3px;
  border:1px solid #242130;
  border-radius:7px;
  background:#0d0d11;
}
#profile .profile-card .gfp-seg button{
  padding:7px 11px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#847d93;
  font:800 8px/1 "DM Mono",monospace;
  letter-spacing:.11em;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
#profile .profile-card .gfp-seg button:hover{color:#c8c0d8}
#profile .profile-card .gfp-seg button.is-on{
  background:#2a2136;
  color:#f2eef8;
  box-shadow:inset 0 0 0 1px #3d3350;
}
#profile .profile-card .gfp-headline.is-neutral{color:#cdb8ff}
#profile .profile-card .gfp-headline:before{content:attr(data-sign)}
#profile .profile-card .gfp-headline.is-up{color:#5fd39b}
#profile .profile-card .gfp-headline.is-down{color:#ff8f9a}
#profile .profile-card .gfp-headline{font:800 24px/1 "Space Grotesk",sans-serif;letter-spacing:-.02em}
#profile .profile-card .gfp-chart{height:200px}
#profile .profile-card .gfp-ax{
  fill:#6b6579;
  font:600 8px "DM Mono",monospace;
  letter-spacing:.04em;
}
#profile .profile-card .gfp-cross{
  stroke:#4a4259;
  stroke-width:1;
  stroke-dasharray:3 4;
}
@media(max-width:620px){
  #profile .profile-card .gfp-controls{gap:7px}
  #profile .profile-card .gfp-seg{flex:1 1 auto;justify-content:center}
  #profile .profile-card .gfp-seg button{padding:7px 8px;font-size:7.5px;letter-spacing:.07em}
}

#profile .profile-card .gfp-ax{
  fill:#9d95ad!important;
  font:700 10px "DM Mono",monospace!important;
  letter-spacing:.02em!important;
}
#profile .profile-card .gfp-seg button{
  color:#9a92ab!important;
  font-size:9.5px!important;
  letter-spacing:.09em!important;
  padding:8px 12px!important;
}
#profile .profile-card .gfp-seg button.is-on{color:#fff!important}
#profile .profile-card .gfp-tab{
  font-size:10px!important;
  color:#9a92ab!important;
}
#profile .profile-card .gfp-tab.is-on{color:#fff!important}
#profile .profile-card .gfp-chart-head small{
  color:#9d95ad!important;
  font-size:9.5px!important;
}
#profile .profile-card .gfp-chart-meta b{color:#e4dcf0!important}
#profile .profile-card .gfp-grid{stroke:#242130}
#profile .profile-card .gfp-zero{stroke:#4c4460}
#profile .profile-card .gfp-tip b{font-size:13px}
#profile .profile-card .gfp-tip span{color:#a49bb5;font-size:9px}

#profile .profile-card.gfp-wide .gfp-panel-chart{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #242130;
}

html body #openFilters,
html body .lobby-tools .open-filter{display:none!important}

.gf-fx-layer{
  position:fixed;
  inset:0;
  z-index:99998;
  pointer-events:none;
  overflow:hidden;
}
.gf-ripple{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(190,150,255,.55),rgba(190,150,255,0) 70%);
  animation:gfRipple .6s cubic-bezier(.22,.68,.36,1) forwards;
}
.gf-ripple.is-primary{
  background:radial-gradient(circle,rgba(150,110,255,.75),rgba(150,110,255,0) 70%);
}
@keyframes gfRipple{
  from{transform:scale(.4);opacity:.85}
  to{transform:scale(7);opacity:0}
}

button,a[role="button"],.catalog-item,.gfp-tab{
  transition:transform .16s cubic-bezier(.22,.68,.36,1),
             filter .18s ease,
             box-shadow .2s ease,
             background-color .2s ease,
             border-color .2s ease;
}
@media(any-hover:hover) and (any-pointer:fine){
  button:not(:disabled):hover,
  a[role="button"]:hover,
  .catalog-item:not(:disabled):hover{
    transform:translateY(-1px);
    filter:brightness(1.12);
  }
}
.gf-pressed{animation:gfPress .26s cubic-bezier(.22,.9,.3,1.2)}
@keyframes gfPress{
  0%{transform:scale(1)}
  32%{transform:scale(.945)}
  100%{transform:scale(1)}
}

#profile .profile-card .gfp-panel-chart.gfp-in,
#profile .profile-card .profile-career-strip.gfp-in,
#profile .profile-card .profile-performance.gfp-in{
  animation:gfpRise .34s cubic-bezier(.22,.68,.36,1) both;
}
.modal.show>section{animation:gfModalIn .3s cubic-bezier(.22,.68,.36,1) both}
@keyframes gfModalIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .gf-ripple{display:none!important}
  .gf-pressed{animation:none!important}
  .modal.show>section{animation:none!important}
  button,a[role="button"],.catalog-item,.gfp-tab{transition:none!important}
  button:hover,.catalog-item:hover{transform:none!important}
}

.gf-halo{
  position:absolute;
  box-sizing:border-box;
  border:1.5px solid rgba(178,140,255,.75);
  background:rgba(150,110,255,.14);
  animation:gfHalo .55s cubic-bezier(.22,.68,.36,1) forwards;
}
.gf-halo.is-primary{
  border-color:rgba(200,170,255,.95);
  background:rgba(170,130,255,.22);
}
@keyframes gfHalo{
  from{transform:scale(1);opacity:.95}
  to{transform:scale(1.22);opacity:0}
}
.gf-ripple{
  width:26px;
  height:26px;
  margin:-13px 0 0 -13px;
  background:radial-gradient(circle,rgba(205,175,255,.75),rgba(205,175,255,0) 70%);
}
.gf-ripple.is-primary{
  background:radial-gradient(circle,rgba(175,140,255,.9),rgba(175,140,255,0) 70%);
}
@keyframes gfRipple{
  from{transform:scale(.35);opacity:1}
  to{transform:scale(9);opacity:0}
}
.gf-pressed{
  animation:gfPress .3s cubic-bezier(.22,.9,.3,1.25);
  box-shadow:0 0 0 0 rgba(170,130,255,.55),0 0 22px rgba(150,110,255,.45)!important;
}
@keyframes gfPress{
  0%{transform:scale(1)}
  30%{transform:scale(.93)}
  60%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

.modal.show>section{
  animation:gfModalIn .26s cubic-bezier(.22,.68,.36,1) both;
}
@keyframes gfModalIn{
  from{opacity:0;transform:translateY(10px) scale(.975)}
  to{opacity:1;transform:none}
}
.modal.show{animation:gfBackdropIn .22s ease both}
@keyframes gfBackdropIn{from{opacity:0}to{opacity:1}}
#creator.show .creator-card>*{animation:gfStagger .24s cubic-bezier(.22,.68,.36,1) both}
#creator.show .creator-card>*:nth-child(1){animation-delay:.03s}
#creator.show .creator-card>*:nth-child(2){animation-delay:.05s}
#creator.show .creator-card>*:nth-child(3){animation-delay:.07s}
#creator.show .creator-card>*:nth-child(4){animation-delay:.09s}
#creator.show .creator-card>*:nth-child(n+5){animation-delay:.11s}
@keyframes gfStagger{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .gf-halo{display:none!important}
  .modal.show,.modal.show>section,#creator.show .creator-card>*{animation:none!important}
  .gf-pressed{box-shadow:none!important}
}



@keyframes gfViewerIn{
  from{opacity:0;transform:translateY(14px) scale(.965)}
  to{opacity:1;transform:none}
}
html body #viewer.show .replay-player,
html body #viewer.show .flip-stage,
html body #viewer.show .replay-foot{
  animation:gfStagger .28s cubic-bezier(.22,.68,.36,1) both;
}
html body #viewer.show .replay-player:nth-of-type(2){animation-delay:.06s}
html body #viewer.show .flip-stage{animation-delay:.1s}
html body #viewer.show .replay-foot{animation-delay:.14s}




@media(prefers-reduced-motion:reduce){
  html body #viewer.show,
  html body #viewer.show>section,
  html body #viewer.show .replay-player,
  html body #viewer.show .flip-stage,
  html body #viewer.show .replay-foot,
  html body #profile.show,
  
}

#profile .profile-card .gfp-seg button{
  font-size:11px!important;
  letter-spacing:.08em!important;
  padding:10px 16px!important;
}
#profile .profile-card .gfp-tab{
  font-size:11.5px!important;
  padding:12px 10px!important;
}
#profile .profile-card .gfp-ax{font:700 11px "DM Mono",monospace!important}
#profile .profile-card .gfp-chart-head small{font-size:10.5px!important}
#profile .profile-card .gfp-chart-head b{font-size:26px!important}
#profile .profile-card .gfp-chart-meta b{font-size:18px!important}
#profile .profile-card .gfp-tip b{font-size:14px!important}
#profile .profile-card .gfp-tip span{font-size:10px!important}
@media(max-width:620px){
  #profile .profile-card .gfp-seg button{font-size:10px!important;padding:9px 11px!important}
  #profile .profile-card .gfp-tab{font-size:10.5px!important}
}

@keyframes gfNumPulse{
  0%{transform:scale(1);text-shadow:none}
  35%{transform:scale(1.09);text-shadow:0 0 14px rgba(170,130,255,.65)}
  100%{transform:scale(1);text-shadow:none}
}
.gf-num-pulse{
  display:inline-block;
  animation:gfNumPulse .55s cubic-bezier(.22,.68,.36,1);
  will-change:transform;
}

@media(any-hover:hover) and (any-pointer:fine){
  button:not(:disabled):hover,
  a[role="button"]:hover{
    box-shadow:0 0 0 1px rgba(150,110,255,.25),0 6px 20px rgba(120,80,220,.22);
  }
  .catalog-item:not(:disabled):hover{
    box-shadow:0 0 0 1px rgba(150,110,255,.3),0 8px 24px rgba(120,80,220,.26);
  }
}

.create-open,.create-submit,#gfLobby .join,.gw-join,.gfp-tab.is-on{
  position:relative;
  overflow:hidden;
}
.create-open::after,.create-submit::after,#gfLobby .join::after,.gw-join::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width:26%;
  height:220%;
  transform:rotate(18deg) translateX(-160%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0));
  pointer-events:none;
  opacity:0;
}
@media(any-hover:hover) and (any-pointer:fine){
  .create-open:hover::after,.create-submit:hover::after,#gfLobby .join:hover::after,.gw-join:hover::after{
    animation:gfSheen .72s cubic-bezier(.22,.68,.36,1);
  }
}
@keyframes gfSheen{
  0%{opacity:0;transform:rotate(18deg) translateX(-160%)}
  18%{opacity:1}
  100%{opacity:0;transform:rotate(18deg) translateX(520%)}
}

@media(prefers-reduced-motion:reduce){
  .gf-num-pulse{animation:none!important}
  .create-open::after,.create-submit::after,#gfLobby .join::after,.gw-join::after{display:none!important}
  button:hover,a[role="button"]:hover,.catalog-item:hover{box-shadow:none!important}
}

html body .game-list .list-head .lobby-heading{
  flex:1 1 auto!important;
  min-width:0!important;
}
html body .game-list .list-head .lobby-heading .create-open{
  margin-left:auto!important;
}
html body .game-list .list-head .lobby-tools{
  flex:0 0 auto!important;
  margin-left:0!important;
}
html body .game-list .list-head .lobby-tools:empty{
  display:none!important;
}

html body #creator.gf-join-mode .creator-total>.creator-amount{
  display:none!important;
}
html body #creator.gf-join-mode .creator-total .gfj-hint{
  position:static!important;
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  margin:0!important;
  font:800 17px/1 'Space Grotesk',sans-serif!important;
  letter-spacing:.01em!important;
}
html body #creator.gf-join-mode .creator-total .gfj-hint .g-coin,
html body #creator.gf-join-mode .creator-total .gfj-hint em{
  width:20px!important;
  height:20px!important;
  vertical-align:middle!important;
}
@media(max-width:620px){
  html body #creator.gf-join-mode .creator-total .gfj-hint{font-size:14px!important}
  html body #creator.gf-join-mode .creator-total .gfj-hint .g-coin,
  html body #creator.gf-join-mode .creator-total .gfj-hint em{width:17px!important;height:17px!important}
}

#profile .profile-card .gfp-chart{overflow:visible!important}
#profile .profile-card .gfp-tip{
  transform:translate(-50%,-135%);
  z-index:4;
}
#profile .profile-card .gfp-tip.is-below{
  transform:translate(-50%,38%);
}

@media(min-width:901px){
  html body .game-list .list-head .lobby-heading{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    align-items:center!important;
    width:100%!important;
    column-gap:0!important;
  }
  html body .game-list .list-head .lobby-heading>*{
    justify-self:center!important;
    margin:0!important;
  }
  html body .game-list .list-head .lobby-heading>b:first-child{
    justify-self:start!important;
    padding-left:22px!important;
  }
  html body .game-list .list-head .lobby-heading .create-open{
    justify-self:center!important;
    margin-left:0!important;
  }
}

#creator.show .creator-card>*{animation:gfStagger .28s cubic-bezier(.22,.68,.36,1) both}
#creator.show .creator-card>*:nth-child(1){animation-delay:0s}
#creator.show .creator-card>*:nth-child(2){animation-delay:.06s}
#creator.show .creator-card>*:nth-child(3){animation-delay:.1s}
#creator.show .creator-card>*:nth-child(n+4){animation-delay:.14s}


@media(min-width:901px){
  html body .game-list .list-head .lobby-tools{
    display:none!important;
  }
  html body .game-list .list-head .lobby-heading{
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    width:100%!important;
    flex:1 1 100%!important;
  }
}



@media(prefers-reduced-motion:reduce){
  
}

@keyframes gfEnterBig{
  0%{opacity:0;transform:translateY(26px) scale(.90)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes gfBackdropBlur{
  from{opacity:0;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px)}
  to{opacity:1;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
}
html body #viewer.show>section,
html body #profile.show>section,

html body #viewer.show,


@media(prefers-reduced-motion:reduce){
  html body #viewer.show>section,
  html body #profile.show>section,
  html body #viewer.show,
  html body #profile.show,
  
}

/* ONE entrance for every dialog. The create/join modal is the reference the rest must match exactly, so all
   four share a single rule rather than parallel ones that kept drifting out of step. */
html body #creator.show>.creator-card,
html body #gwModal.show>section,
html body #viewer.show>section,
html body #profile.show>section{
  animation:gfModalIn .24s cubic-bezier(.22,.68,.36,1) both!important;
}
html body #creator.show,
html body #gwModal.show,
html body #viewer.show,
html body #profile.show{
  animation:gfBackdropIn .18s ease both!important;
}
html body #creator.show>.creator-card>*,
html body #viewer.show>section>*,
html body #profile.show>section>*{
  animation:gfStagger .24s cubic-bezier(.22,.68,.36,1) both;
}
html body #creator.show>.creator-card>*:nth-child(1),
html body #viewer.show>section>*:nth-child(1),
html body #profile.show>section>*:nth-child(1){animation-delay:.03s}
html body #creator.show>.creator-card>*:nth-child(2),
html body #viewer.show>section>*:nth-child(2),
html body #profile.show>section>*:nth-child(2){animation-delay:.05s}
html body #creator.show>.creator-card>*:nth-child(3),
html body #viewer.show>section>*:nth-child(3),
html body #profile.show>section>*:nth-child(3){animation-delay:.07s}
html body #creator.show>.creator-card>*:nth-child(n+4),
html body #viewer.show>section>*:nth-child(n+4),
html body #profile.show>section>*:nth-child(n+4){animation-delay:.09s}

@media(prefers-reduced-motion:reduce){
  html body #creator.show>.creator-card,
  html body #gwModal.show>section,
  html body #viewer.show>section,
  html body #profile.show>section,
  html body #creator.show,
  html body #gwModal.show,
  html body #viewer.show,
  html body #profile.show,
  html body #creator.show>.creator-card>*,
  html body #viewer.show>section>*,
  html body #profile.show>section>*{animation:none!important}
}

html body #profile .profile-card.gfp-open{
  animation:gfModalIn .24s cubic-bezier(.22,.68,.36,1) both!important;
}

html body .gf-legal-close{
  position:relative!important;
  z-index:6!important;
  pointer-events:auto!important;
}
html body .gf-legal-head{
  pointer-events:none!important;
}
html body .gf-legal-head a,
html body .gf-legal-head button,
html body .gf-legal-head input,
html body .gf-legal-head select{
  pointer-events:auto!important;
}

html body #creator .catalog-grid,
html body #gwModal .catalog-grid,
html body #creator .gf-item-tip-list{
  scrollbar-width:thin!important;
  scrollbar-color:#4a4358 transparent!important;
  overscroll-behavior:contain!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.25) 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.25) 100%)!important;
}
html body #creator .catalog-grid::-webkit-scrollbar,
html body #gwModal .catalog-grid::-webkit-scrollbar,
html body #creator .gf-item-tip-list::-webkit-scrollbar{
  width:9px!important;
}
html body #creator .catalog-grid::-webkit-scrollbar-thumb,
html body #gwModal .catalog-grid::-webkit-scrollbar-thumb,
html body #creator .gf-item-tip-list::-webkit-scrollbar-thumb{
  background-color:#4a4358!important;
  border-radius:5px!important;
  border:2px solid transparent!important;
  background-clip:content-box!important;
}
html body #creator .catalog-grid:hover::-webkit-scrollbar-thumb,
html body #gwModal .catalog-grid:hover::-webkit-scrollbar-thumb{
  background-color:#6b6182!important;
}
html body #creator .catalog-grid::-webkit-scrollbar-track,
html body #gwModal .catalog-grid::-webkit-scrollbar-track{
  background:transparent!important;
}

@media(max-width:900px){
  html body #viewer.show,
  html body #creator.show,
  html body #gwModal.show{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  /* Auto block margins centre the card when there is room and collapse to 0 when there is not, so a tall
     dialog still starts at the top and stays reachable instead of being clipped off-screen. */
  html body #viewer.show>section,
  html body #creator.show>.creator-card,
  html body #gwModal.show>section{
    margin-top:auto!important;
    margin-bottom:auto!important;
    align-self:center!important;
  }
}

@keyframes gfModalInSoft{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes gfStaggerSoft{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  html body #creator.show>.creator-card,
  html body #gwModal.show>section,
  html body #viewer.show>section,
  html body #profile.show>section,
  html body #profile .profile-card.gfp-open{
    animation:gfModalInSoft .24s cubic-bezier(.22,.68,.36,1) both!important;
  }
  html body #creator.show,
  html body #gwModal.show,
  html body #viewer.show,
  html body #profile.show{
    animation:gfBackdropIn .18s ease both!important;
  }
  html body #creator.show>.creator-card>*,
  html body #viewer.show>section>*,
  html body #profile.show>section>*{
    animation:gfStaggerSoft .24s ease both!important;
  }
  .gf-pressed{animation:gfPress .3s cubic-bezier(.22,.9,.3,1.25)!important}
  .gf-halo{display:block!important;animation:gfHalo .55s cubic-bezier(.22,.68,.36,1) forwards!important}
  .gf-ripple{display:block!important;animation:gfRipple .6s cubic-bezier(.22,.68,.36,1) forwards!important}
  .gf-num-pulse{animation:gfNumPulse .55s cubic-bezier(.22,.68,.36,1)!important}
  button,a[role="button"],.catalog-item,.gfp-tab{
    transition:transform .16s cubic-bezier(.22,.68,.36,1),filter .18s ease,box-shadow .2s ease!important;
  }
  #profile .profile-card #profileXpFill{transition:width .85s cubic-bezier(.22,.68,.36,1)!important}
  #profile .profile-card .gfp-ind{
    transition:transform .3s cubic-bezier(.22,.68,.36,1),width .3s cubic-bezier(.22,.68,.36,1)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body div#profile.modal.show>section.profile-card{
    animation:gfModalInSoft .24s cubic-bezier(.22,.68,.36,1) both!important;
  }
  html body div#profile.modal.show>section.profile-card>*{
    animation:gfStaggerSoft .24s ease both!important;
  }
}

.gf-ripple{
  width:14px!important;
  height:14px!important;
  margin:-7px 0 0 -7px!important;
}
@keyframes gfRipple{
  from{transform:scale(.4);opacity:.95}
  to{transform:scale(4.2);opacity:0}
}
@keyframes gfHalo{
  from{transform:scale(1);opacity:.9}
  to{transform:scale(1.09);opacity:0}
}
.gf-halo{border-width:1.5px!important}

@media(max-width:900px){
  html body #creator .creator-card .catalog-picker{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-color:#4a4358 transparent!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.25) 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.25) 100%)!important;
  }
  html body #creator .creator-card .catalog-picker::-webkit-scrollbar{width:9px!important}
  html body #creator .creator-card .catalog-picker::-webkit-scrollbar-thumb{
    background-color:#4a4358!important;
    border-radius:5px!important;
    border:2px solid transparent!important;
    background-clip:content-box!important;
  }
  html body #creator .creator-card .catalog-picker::-webkit-scrollbar-track{background:transparent!important}
  html body #creator .creator-card .catalog-grid{
    overflow:visible!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}

@media(max-width:900px){
  html body #gfLobby .lobby[data-gid]>.pot,
  html body #pastGames .lobby[data-gid]>.pot{
    flex:0 0 auto!important;
    width:clamp(84px,14vw,100px)!important;
    min-width:clamp(84px,14vw,100px)!important;
    max-width:clamp(84px,14vw,100px)!important;
    justify-content:flex-start!important;
    font-variant-numeric:tabular-nums!important;
  }
  html body #gfLobby .lobby[data-gid]>.actions,
  html body #pastGames .lobby[data-gid]>.actions{
    flex:0 0 auto!important;
    min-width:104px!important;
    justify-content:flex-end!important;
  }
}

@media(min-width:901px){
  html body .game-list>.list-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:center!important;
  }
  html body .game-list>.list-head>.lobby-heading{
    grid-column:1/-1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    justify-self:stretch!important;
  }
  html body .game-list>.list-head>.lobby-heading>*{
    justify-self:center!important;
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
  }
  html body .game-list>.list-head>.lobby-heading>b:first-child,
  html body .game-list>.list-head>.lobby-heading>span,
  html body .game-list>.list-head>.lobby-heading>span#lobbyCount,
  html body .game-list>.list-head>.lobby-heading>.live-total{
    justify-self:stretch!important;
    place-content:center!important;
    place-items:center!important;
    text-align:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body .game-list>.list-head>.lobby-heading>.live-total{
    grid-template-columns:auto auto!important;
    grid-auto-flow:column!important;
    column-gap:7px!important;
    width:100%!important;
  }
  html body .game-list>.list-head>.lobby-heading>.create-open{
    justify-self:center!important;
  }
}

@media(min-width:901px){
  html body.on-race .columns,
  html.gf-scale body.on-race .columns{
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
}
html body.on-race #racePage,
html.gf-scale body.on-race #racePage{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow:visible!important;
}
html body.on-race #racePage .race-champ-wrap,
html body.on-race #racePage .race-arena,
html body.on-race #racePage .race-podium-stage,
html body.on-race #racePage .race-chasing,
html.gf-scale body.on-race #racePage .race-champ-wrap,
html.gf-scale body.on-race #racePage .race-arena,
html.gf-scale body.on-race #racePage .race-podium-stage,
html.gf-scale body.on-race #racePage .race-chasing{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
html body.on-race #racePage .race-podium-grid,
html.gf-scale body.on-race #racePage .race-podium-grid{
  height:auto!important;
  min-height:0!important;
  padding-bottom:16px!important;
}

html body.on-race .columns,
html.gf-scale body.on-race .columns,
html body.on-race #racePage,
html.gf-scale body.on-race #racePage{
  background:transparent!important;
  background-image:none!important;
}

@media(min-width:901px) and (max-width:1050px){
  html body.on-inventory .columns{
    display:grid!important;
    flex-direction:row!important;
    grid-template-columns:minmax(0,1fr) 400px!important;
    grid-auto-flow:row!important;
    gap:16px!important;
    height:auto!important;
  }
  html body.on-inventory #inventoryPage{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
  }
  html body.on-inventory .chat{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    max-width:100%!important;
  }
}

html.gf-scale body.on-race .workspace,
html body.on-race .workspace{
  height:100%!important;
  min-height:0!important;
}

@media(min-width:901px) and (max-height:700px){
  html body.on-race #racePage .race-stage-header{min-height:clamp(58px,9vh,100px)!important;height:auto!important}
  html body.on-race #racePage .race-podium-grid{
    padding-top:clamp(10px,2.4vh,28px)!important;
    padding-bottom:clamp(8px,1.6vh,16px)!important;
  }
  html body.on-race #racePage .race-podium-racer{
    padding-top:clamp(14px,3vh,34px)!important;
    padding-bottom:clamp(12px,2.8vh,33px)!important;
  }
  html body.on-race #racePage .race-podium-avatar{margin-bottom:clamp(7px,1.5vh,17px)!important}
  html body.on-race #racePage .race-podium-racer .race-podium-avatar .pg-av,
  html body.on-race #racePage .race-podium-racer .race-podium-avatar .race-open-avatar{
    width:clamp(54px,8vh,79px)!important;
    height:clamp(54px,8vh,79px)!important;
  }
  html body.on-race #racePage .race-podium-racer-1 .race-podium-avatar .pg-av{
    width:clamp(66px,10.4vh,102px)!important;
    height:clamp(66px,10.4vh,102px)!important;
  }
}


html body #flipDetail .fd-item{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  background:none!important;
  transform:none!important;
}
html body #flipDetail .fd-item .fd-ithumb{
  cursor:default!important;
}
html body #flipDetail .fd-item .fd-ithumb img{
  width:62px!important;
  height:62px!important;
  transition:transform .2s cubic-bezier(.22,.74,.32,1)!important;
}
html body #flipDetail .fd-item .fd-ithumb:hover img{
  transform:scale(1.08)!important;
}
html body #flipDetail .fd-item .fd-iname{
  max-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:0!important;
  transform:translateX(-6px)!important;
  transition:max-width .26s cubic-bezier(.22,.68,.36,1),opacity .18s ease,transform .26s cubic-bezier(.22,.68,.36,1)!important;
}
html body #flipDetail .fd-item .fd-ithumb:hover+.fd-iname{
  max-width:220px!important;
  opacity:1!important;
  transform:none!important;
}
html body #flipDetail .fd-item .fd-ival{
  margin-left:auto!important;
  font-variant-numeric:tabular-nums!important;
  color:#c9a6ff!important;
}
html body #flipDetail .fd-items .fd-item:hover{
  background:none!important;
  transform:none!important;
}
html body #flipDetail .fd-wonitems{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
html body #flipDetail .fd-wonitems .fd-item{
  flex:0 0 auto!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.02)!important;
  padding:10px 14px!important;
}
html body #flipDetail .fd-wonitems .fd-item:hover{
  background:rgba(255,255,255,.02)!important;
  border-color:rgba(255,255,255,.08)!important;
  transform:none!important;
  box-shadow:none!important;
}
html body #flipDetail .fd-wonitems .fd-item .fd-iname{
  color:#efe8f8!important;
}
html body #flipDetail .fd-card{
  background:#0c0a13!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.6)!important;
}
html body #flipDetail .fd-side{
  border:1px solid rgba(255,255,255,.065)!important;
  background:#141221!important;
  box-shadow:none!important;
}
html body #flipDetail .fd-side.winner{
  background:#131a1c!important;
  border-color:rgba(78,211,147,.45)!important;
  box-shadow:0 0 0 1px rgba(78,211,147,.16)!important;
}
html body #flipDetail .fd-side.winner .fd-shead>div>b{
  color:#8cecbb!important;
}
html body #flipDetail .fd-shead>div>small{
  color:#9b91ae!important;
}
html body #flipDetail .fd-crown{
  background:rgba(78,211,147,.15)!important;
  border:1px solid rgba(78,211,147,.42)!important;
  color:#8cecbb!important;
  box-shadow:none!important;
}
html body #flipDetail .fd-items .fd-item{
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
html body #flipDetail .fd-item .fd-ival{
  color:#ece6f7!important;
}
html body #flipDetail .fd-wonitems .fd-item{
  background:#171426!important;
  border:1px solid rgba(255,255,255,.07)!important;
}
html body #flipDetail .fd-wonitems .fd-item:hover{
  background:#171426!important;
  border-color:rgba(255,255,255,.07)!important;
}
html body #flipDetail .fd-won>span{
  color:#948aa8!important;
  letter-spacing:.13em!important;
}
html body #flipDetail .fd-fair{
  border-top:1px solid rgba(255,255,255,.065)!important;
}
html body #flipDetail .fd-fair small{color:#8d839f!important}
html body #flipDetail .fd-mid{
  color:#948aa8!important;
}
html body #myFlips .mf-row{
  background:#17151f!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-left:1px solid rgba(255,255,255,.07)!important;
  transition:border-color .18s ease,background .18s ease,transform .18s ease!important;
}
html body #myFlips .mf-row.mf-won{
  background:linear-gradient(120deg,rgba(78,211,147,.07),rgba(78,211,147,0) 52%),#17151f!important;
}
html body #myFlips .mf-row.mf-lost{
  background:linear-gradient(120deg,rgba(228,105,125,.06),rgba(228,105,125,0) 52%),#17151f!important;
}
html body #myFlips .mf-row:hover{
  transform:none!important;
  border-color:rgba(255,255,255,.2)!important;
  background:#1c1a26!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
html body #myFlips .mf-row{
  min-height:150px!important;
  padding-bottom:18px!important;
}
html body #myFlips .mf-row .mf-l2{
  align-self:center!important;
  min-height:0!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}
html body #gfReceipt,html body #gfReceipt.modal{position:fixed!important;inset:0!important;z-index:7200!important;align-items:center!important;justify-content:center!important}
html body #gfReceipt.show{display:grid!important}
html body #myFlips .mf-row.mf-won:hover{
  border-color:rgba(78,211,147,.4)!important;
  background:linear-gradient(120deg,rgba(78,211,147,.12),rgba(78,211,147,0) 56%),#1c1a26!important;
}
html body #myFlips .mf-row.mf-lost:hover{
  border-color:rgba(228,105,125,.38)!important;
  background:linear-gradient(120deg,rgba(228,105,125,.1),rgba(228,105,125,0) 56%),#1c1a26!important;
}
html body #myFlips .mf-l2 .mf-hash{color:#8d85a1!important}
html body #myFlips .mf-l2 small{margin-left:auto!important}
html body #myFlips .mf-receipt{
  position:static!important;
  flex:none!important;
  display:grid!important;
  place-items:center!important;
  width:24px!important;
  height:24px!important;
  margin:0 0 0 8px!important;
  align-self:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.05)!important;
  color:#9d90b4!important;
  opacity:1!important;
  transform:none!important;
  transition:color .18s ease,border-color .18s ease,background .18s ease!important;
}
html body #myFlips .mf-receipt svg{width:14px!important;height:14px!important}
html body #myFlips .mf-receipt:hover{
  color:#f2ecfb!important;
  border-color:rgba(176,124,255,.55)!important;
  background:rgba(170,130,255,.18)!important;
}
html body #flipDetail .fd-card>.close,
html body #myFlips .myflips-card>.close{
  width:38px!important;
  height:38px!important;
  top:16px!important;
  right:16px!important;
  border-radius:10px!important;
  font-size:22px!important;
  line-height:1!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.05)!important;
  color:#cdc4dc!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease!important;
}
html body #flipDetail .fd-card>.close:hover,
html body #myFlips .myflips-card>.close:hover{
  background:rgba(170,130,255,.2)!important;
  border-color:rgba(176,124,255,.55)!important;
  color:#fff!important;
}
html body #gfReceipt .rc-card{
  position:relative!important;
  width:min(680px,calc(100vw - 36px))!important;
  max-width:none!important;
  max-height:min(92dvh,980px)!important;
  overflow-y:auto!important;
  padding:22px 22px 20px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-top:2px solid #a56bff!important;
  border-radius:16px!important;
  background:#131120!important;
  box-shadow:0 26px 64px rgba(0,0,0,.62)!important;
}
html body #gfReceipt .rc-card>p{margin:0!important;color:#b890f2!important;font:800 10px/1 "DM Mono",monospace!important;letter-spacing:.16em!important}
html body #gfReceipt .rc-card>h2{margin:7px 0 14px!important;color:#f8f5fb!important;font:800 24px/1 "Space Grotesk",Manrope,sans-serif!important;letter-spacing:-.035em!important}
html body #gfReceipt .rc-stage{
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;
  background:#0d0b14!important;
  overflow:hidden!important;
  line-height:0!important;
}
html body #gfReceipt .rc-canvas{display:block!important;width:100%!important;height:auto!important}
html body #gfReceipt .rc-bg{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important;margin-top:14px!important}
html body #gfReceipt .rc-bglabel{color:#8d839f!important;font:800 9px/1 "DM Mono",monospace!important;letter-spacing:.14em!important;margin-right:2px!important}
html body #gfReceipt .rc-chip{
  min-height:32px!important;
  padding:0 13px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
  color:#cdc4dc!important;
  font:800 10px/1 "DM Mono",monospace!important;
  letter-spacing:.1em!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease!important;
}
html body #gfReceipt .rc-chip:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
html body #gfReceipt .rc-chip.is-on{border-color:rgba(176,124,255,.6)!important;background:rgba(170,130,255,.18)!important;color:#f2ecfb!important}
html body #gfReceipt .rc-bgname{flex:1 1 100%!important;color:#7f7694!important;font:600 10px/1.3 Manrope,sans-serif!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #gfReceipt .rc-actions{display:flex!important;gap:10px!important;margin-top:14px!important}
html body #gfReceipt .rc-btn{
  flex:1 1 0!important;
  min-height:44px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.04)!important;
  color:#e9e2f4!important;
  font:800 11px/1 "DM Mono",monospace!important;
  letter-spacing:.1em!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease!important;
}
html body #gfReceipt .rc-btn:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.24)!important}
html body #gfReceipt .rc-btn:disabled{opacity:.4!important;cursor:not-allowed!important}
html body #gfReceipt .rc-btn.rc-primary{
  border-color:#8a55e9!important;
  background:linear-gradient(180deg,#8b57e8,#6f3ccb)!important;
  color:#fff!important;
}
html body #gfReceipt .rc-btn.rc-primary:hover{background:linear-gradient(180deg,#9964f5,#7a45db)!important}

html body #gfReceipt .rc-chip:disabled{opacity:.38!important;cursor:not-allowed!important}
html body #gfReceipt .rc-chip:disabled:hover:hover{border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.03)!important;color:#cfc6de!important}

html body .lobby .offer{
  gap:0!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
}
html body .labels span:nth-child(2){text-align:left!important}
html body .offer .item-more{
  position:relative!important;
  z-index:6!important;
  margin-left:2px!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#fff!important;
  cursor:default!important;
}
html body .offer .item-more:hover{border:0!important;background:none!important}
html body .lobby .offer img{margin:0 -22px 0 0!important}
html body .lobby .offer .coinflip-offer-item{margin:0 -22px 0 0!important}
html body .lobby .offer .coinflip-offer-item:last-of-type{margin-right:0!important}
html body .offer .item-more{
  position:relative!important;
  z-index:1!important;
  margin-left:14px!important;
  cursor:default!important;
}
html body .offer .item-more:hover{border-color:#665b76!important;background:#292533!important}
html body .offer.expanded .extra-item{display:none!important}

html body #gfLobby .lobby.gfl-flip-row .gfl-flip-match,
html body #pastGames .lobby.gfl-flip-row .gfl-flip-match{
  grid-template-columns:minmax(0,var(--gf-player-w,236px)) 44px minmax(0,var(--gf-player-w,236px)) minmax(64px,1fr)!important;
  grid-template-areas:"host vs guest center"!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-player,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player{
  justify-content:flex-start!important;
}
html body #gfLobby .lobby.gfl-flip-row .gfl-match-vs,
html body #pastGames .lobby.gfl-flip-row .gfl-match-vs{
  justify-self:center!important;
  text-align:center!important;
}

html body #gfLobby .lobby.gfl-flip-row .gfl-match-player b,
html body #pastGames .lobby.gfl-flip-row .gfl-match-player b{
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

html body img[src^="data:image/gif;base64,R0lGODlhAQAB"]{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
}