/* auction200 · the top bar on every page, the stats and the games alike: the wordmark, search, Play (the games menu),
   the account, and every stats section as a row of tabs, the one you are on a lit pill. Under it on the games' own
   pages, the games' banner: which game (Auction, Draft, Fantasy soon), then that game's pages. Its own colours and fonts
   throughout, so neither site.css nor play.css reaches inside. */
.gh { --gh-bg: #5C0F24; --gh-gold: #F5C451; --gh-gold-deep: #C99A2E; --gh-ink: #101828; --gh-muted: #667085; --gh-line: #E6E9EF;
  position: relative; z-index: 30; background: var(--gh-bg); color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  font: 500 15px/1.4 "Public Sans", "Segoe UI", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.gh.sticky { position: sticky; top: 0; }
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }
.gh a, .gh a:hover { color: inherit; text-decoration: none; }
.gh button { font: inherit; color: inherit; cursor: pointer; }
.gh :focus-visible { outline: 2px solid var(--gh-gold); outline-offset: 2px; }
.gh [hidden] { display: none !important; }
.gh-in { position: relative; max-width: var(--gh-w, 1120px); margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.gh-top { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.gh-mark { flex: none; font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.gh .gh-mark, .gh .gh-mark:hover { color: #fff; }
.gh-mark b { color: var(--gh-gold); font-weight: 900; }
.gh-tag { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); white-space: nowrap; }

/* search: one box on a desktop; on a phone it opens under the bar from the magnifier */
.gh-search { position: relative; margin-left: auto; flex: 1 1 240px; max-width: 340px; }
.gh-search input { width: 100%; height: 38px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 14.5px; -webkit-appearance: none; appearance: none; }
.gh-search input::placeholder { color: rgba(255, 255, 255, .62); }
.gh-search input:focus { background: #fff; border-color: #fff; color: var(--gh-ink); outline: none; }
.gh-search input:focus::placeholder { color: var(--gh-muted); }
.gh-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 4; margin: 0; padding: 6px; list-style: none; background: #fff; color: var(--gh-ink); border-radius: 12px; box-shadow: 0 18px 40px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .06); }
.gh .gh-results a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.gh .gh-results a:hover, .gh .gh-results a.on { background: #F2F4F7; }
.gh-results span { color: var(--gh-muted); font-weight: 500; font-size: 13px; }
.gh .gh-sbtn { display: none; flex: none; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.gh-sbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gh .gh-sbtn[aria-expanded="true"] { background: #fff; color: var(--gh-bg); }

/* Play: the games menu */
.gh-games { position: relative; flex: none; }
.gh .gh-play { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px 0 17px; border: 0; border-radius: 999px; background: var(--gh-gold); color: #1A1405 !important; font-family: "Big Shoulders Display", "Arial Narrow", sans-serif !important; font-weight: 900; font-size: 19px; letter-spacing: .02em; box-shadow: 0 3px 0 var(--gh-gold-deep); }
.gh .gh-play svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.gh .gh-play[aria-expanded="true"] svg { transform: rotate(180deg); }
.gh .gh-play:hover { filter: brightness(1.05); }
.gh .gh-play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gh-gold-deep); }
.gh-menu, .gh-am { position: absolute; right: 0; top: calc(100% + 10px); z-index: 4; background: #fff; color: var(--gh-ink); border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 24, 40, .28), 0 0 0 1px rgba(16, 24, 40, .06); }
.gh-menu { width: 348px; padding: 8px; }
.gh-mh { margin: 6px 10px 4px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-muted); }
.gh .gh-game { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: var(--gh-ink) !important; }
.gh a.gh-game:hover, .gh a.gh-game:focus-visible { background: #F7F2F3; outline: none; }
.gh .gh-game[aria-current] { background: #FBF1F3; }
.gh-gi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #8A1B33, #5C0F24); color: var(--gh-gold); }
.gh-gi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gh-gt { display: flex; flex-direction: column; min-width: 0; }
.gh-gt b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 750; }
.gh-gt em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: #FFF1C2; color: #7A5600; }
.gh-gt small { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--gh-muted); }
.gh-game.soon { cursor: default; }
.gh-game.soon .gh-gi { background: #EEF0F3; color: #98A2B3; }
.gh-game.soon b { color: #667085; }
.gh-game.soon em { background: #EEF0F3; color: #667085; }
.gh .gh-my { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px 10px 8px; border-top: 1px solid var(--gh-line); font-weight: 700; font-size: 14px; color: #8A1B33 !important; }
.gh-my svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the account: Sign in, or who is signed in, with a menu */
.gh-acct { position: relative; flex: none; }
.gh .gh-signin { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; font-weight: 750; font-size: 14px; }
.gh .gh-signin, .gh .gh-signin:hover { color: var(--gh-bg); }
.gh .gh-who { display: inline-flex; align-items: center; gap: 8px; height: 38px; max-width: 170px; padding: 0 12px 0 4px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 650; font-size: 14px; }
.gh .gh-who:hover, .gh .gh-who[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
.gh-who img, .gh-who .ini { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.gh-who .ini { display: grid; place-items: center; background: var(--gh-gold); color: #1A1405; font-size: 11px; font-weight: 800; }
.gh-who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-am { min-width: 250px; max-width: calc(100vw - 24px); padding: 8px; display: flex; flex-direction: column; }
.gh-am-h { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--gh-line); }
.gh-am-h > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gh-am-h b, .gh-am-h small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-am-h small { color: var(--gh-muted); font-size: 12px; }
.gh-am-h img, .gh-am-h .ini { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.gh-am-h .ini { display: grid; place-items: center; background: var(--gh-gold); color: #1A1405; font-size: 12px; font-weight: 800; }
.gh .gh-am a, .gh .gh-am button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: 14px; font-weight: 600; color: var(--gh-ink) !important; }
.gh .gh-am a:hover, .gh .gh-am button:hover { background: #F2F4F7; }

/* every stats section in one row; wider than the screen, it scrolls, and a fade at the edge says there is more */
.gh-tabs { margin: 0 -12px; }
.gh-tabs-in { position: relative; display: flex; gap: 2px; padding: 2px 12px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gh-tabs-in::-webkit-scrollbar { display: none; }
.gh .gh-tabs a { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color .15s, color .15s; }
.gh .gh-tabs a { color: rgba(255, 255, 255, .76); }
.gh .gh-tabs a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.gh .gh-tabs a[aria-current="page"] { background: #fff; color: var(--gh-bg); font-weight: 750; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.gh-tabs.fr .gh-tabs-in { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.gh-tabs.fl .gh-tabs-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.gh-tabs.fl.fr .gh-tabs-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* the games' banner: the game you are in, big, then its pages */
.gb { position: relative; overflow: hidden; color: #fff; font: 500 15px/1.4 "Public Sans", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(90% 160% at 88% -10%, rgba(245, 196, 81, .26) 0%, rgba(245, 196, 81, 0) 52%), linear-gradient(115deg, #45091A 0%, #6E1029 48%, #962240 100%); }
.gb::after { content: "200"; position: absolute; right: max(-20px, calc(50% - 640px)); bottom: -78px; font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 900; font-size: 260px; line-height: 1; color: rgba(255, 255, 255, .045); pointer-events: none; }
.gb a, .gb a:hover { text-decoration: none; }
.gb .gb-games { overflow-x: auto; scrollbar-width: none; }
.gb .gb-games::-webkit-scrollbar { display: none; }
.gb-in { position: relative; z-index: 1; max-width: var(--gh-w, 1120px); margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.gb-games { display: flex; align-items: flex-end; gap: 26px; }
.gb .gb-games a, .gb .gb-games span { flex: none; position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 0 0 12px; font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 900; font-size: 38px; line-height: 1; letter-spacing: .01em; }
.gb .gb-games a { color: rgba(255, 255, 255, .5); }
.gb .gb-games a:hover { color: rgba(255, 255, 255, .86); }
.gb .gb-games a[aria-current] { color: #fff; }
.gb-games a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: #F5C451; }
.gb-games em { align-self: flex-start; margin-top: 2px; padding: 4px 7px; border-radius: 999px; font: 800 10px/1 "Public Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; background: rgba(245, 196, 81, .18); color: #F5C451; }
.gb .gb-games .soon { color: rgba(255, 255, 255, .3); cursor: default; }
.gb-games .soon em { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }
.gb-tabs { display: flex; gap: 8px; padding: 16px 0 18px; overflow-x: auto; scrollbar-width: none; }
.gb-tabs::-webkit-scrollbar { display: none; }
.gb .gb-tabs a { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); font-weight: 650; font-size: 14px; white-space: nowrap; transition: background-color .15s; }
.gb .gb-tabs a { color: rgba(255, 255, 255, .88); }
.gb .gb-tabs a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.gb .gb-tabs a[aria-current="page"] { border-color: #fff; background: #fff; color: #5C0F24; font-weight: 750; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }

@media (max-width: 900px) { .gh-tag { display: none; } }
@media (max-width: 680px) {
  .gh-top { flex-wrap: wrap; gap: 8px; min-height: 56px; padding: 9px 0; }
  .gh-mark { font-size: 27px; }
  .gh-search { display: none; order: 3; flex-basis: 100%; max-width: none; margin: 2px 0 0; }
  .gh.s-open .gh-search { display: block; }
  .gh .gh-sbtn { display: inline-grid; margin-left: auto; }
  .gh-games { position: static; }
  .gh-menu { left: 12px; right: 12px; top: 58px; width: auto; }
  .gh .gh-play { padding: 0 11px 0 14px; font-size: 18px; }
  .gh .gh-who { padding: 0 4px; }
  .gh-who .nm { display: none; }
  .gh-tabs-in { padding-bottom: 10px; }
  .gh .gh-tabs a { height: 32px; padding: 0 12px; font-size: 13.5px; }
  .gb-in { padding-top: 14px; }
  .gb-games { gap: 18px; }
  .gb .gb-games a, .gb .gb-games span { font-size: 27px; padding-bottom: 10px; }
  .gb-games em { font-size: 9px; padding: 3px 6px; }
  .gb-tabs { gap: 6px; padding: 12px 0 14px; }
  .gb .gb-tabs a { height: 34px; padding: 0 13px; font-size: 13.5px; }
  .gb::after { font-size: 180px; bottom: -54px; }
}
@media (max-width: 360px) {
  .gh-mark { font-size: 24px; }
  .gh-top { gap: 6px; }
  .gh .gh-sbtn { width: 34px; }
  .gh .gh-play { font-size: 17px; padding: 0 9px 0 12px; }
  .gh .gh-signin { padding: 0 11px; font-size: 13px; }
  .gb .gb-games a, .gb .gb-games span { font-size: 24px; }
}