/* PSG888 official floor. Near-black ground, olive and mustard-gold chrome over oxblood
   panels, gold kept for money. Static stylesheet: the build does NOT regenerate this file.

   Conventions in here:
     - The gaps and insets, the type sizes, the shadows and the line heights used more than
       once are named once in :root as --u-* and called by name everywhere else;
     - box properties keep their physical names, one edge per declaration;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - an animation names all eight of its parts. */

:root {
  --bg: #070b16;
  --panel: #0e1529;
  --panel2: #141c33;
  --raise: #1b2540;
  --line: #1d2944;
  --tx: #eef2fb;
  --mut: #93a1c0;
  --gold: #f05151;
  --gold-d: #b01f1f;
  --gold-l: #ff7a7a;
  --wine: #2f58d6;
  --wine-d: #1f3c96;
  --wine-l: #5b7ee6;
  --red: #d92b2b;
  --ok: #27c08a;
  --metal: linear-gradient(180deg, #ff7a7a 0%, #f05151 55%, #b01f1f 100%);
  --r: 10px;
  --r-s: 6px;
  --bar: 60px;
  --w: 1240px;

  /* named values used more than once */
  --u-sp1: .4em;
  --u-sp2: 2px;
  --u-sp3: 3px;
  --u-sp4: 4px;
  --u-sp5: 5px;
  --u-sp6: 6px;
  --u-sp7: 7px;
  --u-sp8: 8px;
  --u-sp9: 9px;
  --u-sp10: 10px;
  --u-sp11: 11px;
  --u-sp12: 12px;
  --u-sp13: 13px;
  --u-sp14: 14px;
  --u-sp15: 15px;
  --u-sp16: 16px;
  --u-sp17: 18px;
  --u-sp18: 20px;
  --u-sp19: 22px;
  --u-sp20: 24px;
  --u-sp21: 26px;
  --u-sp22: 28px;
  --u-sp23: 30px;
  --u-sp24: 34px;
  --u-sp25: 44px;
  --u-fs1: 10.5px;
  --u-fs2: 11px;
  --u-fs3: 11.5px;
  --u-fs4: 12px;
  --u-fs5: 12.5px;
  --u-fs6: 13px;
  --u-fs7: 13.5px;
  --u-fs8: 14px;
  --u-fs9: 14.5px;
  --u-fs10: 15px;
  --u-fs11: 16px;
  --u-fs12: 17px;
  --u-fs13: 20px;
  --u-lh1: 1;
}

* {box-sizing: border-box;}

html {
  /* body-only overflow-x: hidden fools Chromium but not iOS;
  clip on html is the one that holds. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  background: var(--bg);
  color: var(--tx);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: var(--u-fs11);
  line-height: 1.66;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  padding-bottom: 0px;
}

img {max-width: 100%; height: auto; display: block; min-width: 0px;}
a {color: var(--gold-l); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
a:hover {text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
h1, h2, h3, h4 {line-height: 1.22; margin-top: 0px; margin-right: 0px; margin-bottom: .5em; margin-left: 0px; font-weight: 800; letter-spacing: -.012em;}
h1 {font-size: clamp(25px, 4.3vw, 40px);}
h2 {font-size: clamp(20px, 2.8vw, 29px);}
h3 {font-size: clamp(16.5px, 2vw, 20px);}
p {margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 0px;}
ul, ol {margin-top: 0px; margin-right: 0px; margin-bottom: 1.05em; margin-left: 0px; padding-left: 1.2em;}
li {margin-top: 0px; margin-right: 0px; margin-bottom: .42em; margin-left: 0px;}
:focus-visible {outline: 3px solid var(--gold-l); outline-offset: 2px; border-radius: 4px;}
table {border-collapse: collapse;}

/* ---------------------------------------------------------------- buttons */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--u-sp1);
  column-gap: var(--u-sp1);
  min-width: 0px;
  min-height: 44px;
  padding-top: var(--u-sp10);
  padding-right: var(--u-sp17);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp17);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--u-fs9);
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
}
.pg-btn:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; filter: brightness(1.07);}
.pg-btn.p {background: var(--metal); color: #15150a; box-shadow: 0 2px 0 var(--gold-d);}
.pg-btn.o {background: transparent; border-color: var(--gold-d); color: var(--gold-l);}
.pg-btn.g {background: var(--wine); color: #ffeca6; border-color: var(--wine-l);}
.pg-btn.lg {min-height: 50px; padding-top: var(--u-sp13); padding-right: var(--u-sp21); padding-bottom: var(--u-sp13); padding-left: var(--u-sp21); font-size: 15.5px;}

/* ---------------------------------------------------------------- header */
.pg-head {position: relative; z-index: 30; background: linear-gradient(180deg, #23220f, #16150b); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--gold-d);}
.pg-head .bar {
  display: flex;
  align-items: center;
  row-gap: var(--u-sp14);
  column-gap: var(--u-sp14);
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--u-sp10);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp16);
}
.pg-burger {
  display: none;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--gold-l);
  border-radius: var(--r-s);
  min-width: 44px;
  min-height: 44px;
  font-size: 19px;
  cursor: pointer;
}
.pg-logo {display: flex; align-items: center; row-gap: var(--u-sp10); column-gap: var(--u-sp10); min-width: 0px; color: var(--tx);}
.pg-logo:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.pg-logo svg {width: 38px; height: 38px; flex-grow: 0; flex-shrink: 1; flex-basis: auto; min-width: 0px;}
/* at 320px the bar runs out of room and a fixed 38px mark is drawn 3px outside its own
   anchor. Shrink the mark rather than let it overflow. */
@media (max-width: 360px) { .pg-logo svg {width: 30px; height: 30px;} }
.pg-logo .wm {display: flex; flex-direction: column; line-height: 1.06; min-width: 0px;}
.pg-logo .wm b {
  font-size: var(--u-fs13);
  font-weight: 900;
  letter-spacing: .035em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.pg-logo .wm small {font-size: 9.5px; letter-spacing: .17em; color: var(--mut); white-space: nowrap;}
.pg-acct {display: flex; align-items: center; row-gap: var(--u-sp9); column-gap: var(--u-sp9); margin-left: auto; min-width: 0px;}
.pg-lang {display: flex; row-gap: var(--u-sp2); column-gap: var(--u-sp2); background: #11110a; border-width: 1px; border-style: solid; border-color: var(--line); border-radius: 999px; padding-top: var(--u-sp3); padding-right: var(--u-sp3); padding-bottom: var(--u-sp3); padding-left: var(--u-sp3);}
.pg-lang a {padding-top: var(--u-sp6); padding-right: var(--u-sp10); padding-bottom: var(--u-sp6); padding-left: var(--u-sp10); border-radius: 999px; font-size: var(--u-fs4); font-weight: 700; color: var(--mut); white-space: nowrap;}
.pg-lang a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; color: var(--tx);}
.pg-lang a.on {background: var(--wine); color: #ffeca6;}

.pg-menu {
  display: flex;
  row-gap: var(--u-sp6);
  column-gap: var(--u-sp6);
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp10);
  padding-left: var(--u-sp16);
  overflow-x: auto;
  scrollbar-width: none;
}
.pg-menu::-webkit-scrollbar {display: none;}
.pg-menu a {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp15);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp15);
  border-radius: 999px;
  background: #11110a;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--tx);
  font-size: var(--u-fs7);
  font-weight: 700;
  white-space: nowrap;
}
.pg-menu a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; border-color: var(--gold-d); color: var(--gold-l);}

.pg-tick {background: var(--wine-d); border-top-width: 1px; border-top-style: solid; border-top-color: var(--wine-l); overflow-x: hidden; overflow-y: hidden;}
.pg-tick p {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: var(--u-sp8);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp8);
  padding-left: var(--u-sp16);
  font-size: var(--u-fs6);
  color: #ffdcc4;
  white-space: nowrap;
  animation-name: pg-run;
  animation-duration: 36s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes pg-run { from {transform: translateX(8%);} to {transform: translateX(-100%);} }

/* ---------------------------------------------------------------- hero */
.pg-hero, .pg-ph {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  row-gap: var(--u-sp22);
  column-gap: var(--u-sp22);
  align-items: center;
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--u-sp23);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp21);
  padding-left: var(--u-sp16);
}
.pg-ph {grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);}
.pg-hero > img, .pg-ph > img {border-radius: var(--r); border-width: 1px; border-style: solid; border-color: var(--line); width: 100%;}
.pg-hero .tx, .pg-ph .tx {min-width: 0px;}
.eb {
  display: inline-block;
  margin-bottom: var(--u-sp11);
  padding-top: var(--u-sp5);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp5);
  padding-left: var(--u-sp12);
  border-radius: 999px;
  background: var(--wine);
  color: #ffeca6;
  font-size: var(--u-fs3);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.lead {font-size: 16.5px; color: #ded8c6;}
.act {display: flex; flex-wrap: wrap; row-gap: var(--u-sp11); column-gap: var(--u-sp11); margin-top: var(--u-sp17); margin-right: 0px; margin-bottom: var(--u-sp4); margin-left: 0px;}
.act.utl {margin-top: var(--u-sp14);}

.pg-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--u-sp8);
  column-gap: var(--u-sp8);
  margin-top: var(--u-sp19);
  padding-top: var(--u-sp17);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
}
.pg-trust span {display: flex; flex-direction: column; row-gap: var(--u-sp5); column-gap: var(--u-sp5); font-size: var(--u-fs4); color: var(--mut); min-width: 0px;}
.pg-trust i {font-style: normal; font-size: var(--u-fs12); color: var(--gold);}

/* ---------------------------------------------------------------- six product tiles */
.pg-cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--u-sp14);
  column-gap: var(--u-sp14);
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: var(--u-sp24);
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--u-sp16);
  padding-bottom: 0px;
  padding-left: var(--u-sp16);
}
.pg-cats .tile {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: var(--panel);
  min-width: 0px;
}
.pg-cats .tile:hover {border-color: var(--gold-d); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.pg-cats .tile img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.pg-cats .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding-top: var(--u-sp24);
  padding-right: var(--u-sp14);
  padding-bottom: var(--u-sp13);
  padding-left: var(--u-sp14);
  background: linear-gradient(180deg, rgba(11, 11, 9, 0), rgba(11, 11, 9, .93) 58%);
}
.pg-cats .cap b {display: block; font-size: var(--u-fs12); font-weight: 800; color: var(--gold-l);}
.pg-cats .cap em {display: block; margin-top: var(--u-sp3); font-style: normal; font-size: var(--u-fs5); color: #d9d3c0;}

/* ---------------------------------------------------------------- bands */
.pg-checkin, .pg-boards, .pg-pool, .pg-h5, .pg-wall, .pg-match, .pg-draw, .pg-comm, .pg-apk {
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: var(--u-sp24);
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--u-sp16);
  padding-bottom: 0px;
  padding-left: var(--u-sp16);
}
.pg-checkin, .pg-pool, .pg-h5, .pg-wall, .pg-match, .pg-draw {
  padding-top: var(--u-sp20);
  padding-bottom: var(--u-sp20);
  background: var(--panel);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--r);
  max-width: calc(var(--w) - 32px);
}
.hd {margin-bottom: var(--u-sp16);}
.hd h2 {margin-bottom: .3em;}
.hd p {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: var(--mut); font-size: var(--u-fs9); max-width: 72ch;}

/* check-in */
.pg-checkin .days {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--u-sp8);
  column-gap: var(--u-sp8);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: var(--u-sp17);
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}
.pg-checkin .days li {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: var(--u-sp12);
  padding-right: var(--u-sp6);
  padding-bottom: var(--u-sp12);
  padding-left: var(--u-sp6);
  text-align: center;
  border-radius: var(--r-s);
  background: #11110a;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  min-width: 0px;
}
.pg-checkin .days li span {display: block; font-size: var(--u-fs2); color: var(--mut);}
.pg-checkin .days li b {display: block; margin-top: var(--u-sp5); font-size: var(--u-fs10); color: var(--tx);}
.pg-checkin .days li.on {border-color: var(--gold-d);}
.pg-checkin .days li.on b {color: var(--gold-l);}
.pg-checkin .days li.top {background: var(--wine-d); border-color: var(--wine-l);}
.pg-checkin .days li.top b {color: #ffeca6;}

/* paired cashier boards */
.pg-boards {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--u-sp14); column-gap: var(--u-sp14);}
.pg-boards .bd {background: var(--panel); border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--r); padding-top: var(--u-sp16); padding-right: var(--u-sp16); padding-bottom: var(--u-sp16); padding-left: var(--u-sp16); min-width: 0px;}
.pg-boards .bh {display: flex; align-items: center; row-gap: var(--u-sp9); column-gap: var(--u-sp9); margin-bottom: var(--u-sp10);}
.pg-boards .bh h3 {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs11);}
.pg-boards .live {
  padding-top: var(--u-sp3);
  padding-right: var(--u-sp9);
  padding-bottom: var(--u-sp3);
  padding-left: var(--u-sp9);
  border-radius: 999px;
  background: rgba(237, 26, 45, .16);
  border-width: 1px;
  border-style: solid;
  border-color: var(--red);
  color: #ff8d8d;
  font-size: var(--u-fs1);
  font-weight: 800;
  letter-spacing: .08em;
}
.pg-boards table {width: 100%; font-size: var(--u-fs7);}
.pg-boards th {
  text-align: left;
  padding-top: var(--u-sp7);
  padding-right: var(--u-sp8);
  padding-bottom: var(--u-sp7);
  padding-left: var(--u-sp8);
  color: var(--mut);
  font-size: var(--u-fs3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.pg-boards td {padding-top: var(--u-sp8); padding-right: var(--u-sp8); padding-bottom: var(--u-sp8); padding-left: var(--u-sp8); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(47, 46, 28, .6);}
.pg-boards .amt {color: var(--gold-l); font-weight: 800; font-variant-numeric: tabular-nums;}

/* counting pool */
.pg-pool {text-align: center;}
.pg-pool .jp {
  display: inline-flex;
  align-items: baseline;
  row-gap: var(--u-sp10);
  column-gap: var(--u-sp10);
  padding-top: var(--u-sp14);
  padding-right: var(--u-sp21);
  padding-bottom: var(--u-sp14);
  padding-left: var(--u-sp21);
  border-radius: var(--r);
  background: #11110a;
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold-d);
}
.pg-pool .jp span {font-size: var(--u-fs10); color: var(--mut); font-weight: 700;}
.pg-pool .jp b {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pg-pool p {margin-top: var(--u-sp15); margin-right: auto; margin-bottom: 17px; margin-left: auto; max-width: 64ch; color: var(--mut); font-size: var(--u-fs9);}

/* no-install chips */
.pg-h5 > p {color: var(--mut); font-size: var(--u-fs9); max-width: 74ch;}
.pg-h5 .chips {display: flex; flex-wrap: wrap; row-gap: var(--u-sp9); column-gap: var(--u-sp9); margin-top: var(--u-sp16);}
.pg-h5 .chip {
  display: flex;
  flex-direction: column;
  row-gap: var(--u-sp2);
  column-gap: var(--u-sp2);
  min-width: 0px;
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp14);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp14);
  border-radius: var(--r-s);
  background: #11110a;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.pg-h5 .chip b {font-size: var(--u-fs8); color: var(--tx);}
.pg-h5 .chip em {font-style: normal; font-size: var(--u-fs1); color: var(--ok); letter-spacing: .05em;}

/* provider wall: ONE chip treatment for every vendor mark sitewide */
.pg-wall .logos {display: flex; flex-wrap: wrap; row-gap: var(--u-sp10); column-gap: var(--u-sp10);}
.pg-wall .logos span,
.pg-foot .pay span,
.pg-foot .trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp13);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp13);
  border-radius: var(--r-s);
  background: #efece2;
  border-width: 1px;
  border-style: solid;
  border-color: #d6d1c2;
}
.pg-wall .logos img {max-height: 26px; width: auto; min-width: 0px;}
.pg-foot .pay img, .pg-foot .trust img {max-height: 22px; width: auto; min-width: 0px;}

/* game grids */
.pg-games {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--u-sp12);
  column-gap: var(--u-sp12);
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: var(--u-sp24);
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--u-sp16);
  padding-bottom: 0px;
  padding-left: var(--u-sp16);
}
.pg-content .pg-games {padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: var(--u-sp19); margin-right: 0px; margin-bottom: var(--u-sp22); margin-left: 0px;}
.pg-games .gc {
  position: relative;
  display: block;
  border-radius: var(--r-s);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: var(--panel);
  min-width: 0px;
}
.pg-games .gc:hover {border-color: var(--gold-d); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.pg-games .gc img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
.pg-games .bd {
  position: absolute;
  top: 7px;
  left: 7px;
  padding-top: var(--u-sp3);
  padding-right: var(--u-sp8);
  padding-bottom: var(--u-sp3);
  padding-left: var(--u-sp8);
  border-radius: 999px;
  background: var(--wine);
  color: #ffeca6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.pg-games .mt {display: block; padding-top: var(--u-sp9); padding-right: var(--u-sp10); padding-bottom: var(--u-sp11); padding-left: var(--u-sp10); min-width: 0px;}
.pg-games .mt b {display: block; font-size: var(--u-fs5); color: var(--tx); overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pg-games .mt em {display: block; margin-top: var(--u-sp2); font-style: normal; font-size: var(--u-fs2); color: var(--mut);}

/* hot matches */
.pg-match .ms {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--u-sp12); column-gap: var(--u-sp12); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: outside; list-style-image: none;}
.pg-match .ms li {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: var(--u-sp14); padding-right: var(--u-sp14); padding-bottom: var(--u-sp14); padding-left: var(--u-sp14); border-radius: var(--r-s); background: #11110a; border-width: 1px; border-style: solid; border-color: var(--line); min-width: 0px;}
.pg-match .mh {display: flex; align-items: center; justify-content: space-between; row-gap: var(--u-sp8); column-gap: var(--u-sp8); font-size: var(--u-fs3); color: var(--mut);}
.pg-match .lg {font-weight: 700; letter-spacing: .05em; text-transform: uppercase;}
.pg-match .mh .live {color: #ff8d8d; font-weight: 800;}
.pg-match .mh .live::before {content: "\25CF"; margin-right: var(--u-sp5); animation-name: pg-pulse; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;}
@keyframes pg-pulse { 50% {opacity: .25;} }
.pg-match .tm {display: flex; align-items: center; row-gap: var(--u-sp8); column-gap: var(--u-sp8); margin-top: var(--u-sp10); margin-right: 0px; margin-bottom: var(--u-sp12); margin-left: 0px; min-width: 0px;}
.pg-match .tm b {font-size: var(--u-fs9); min-width: 0px; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pg-match .tm em {font-style: normal; font-size: var(--u-fs2); color: var(--mut);}
.pg-match .od {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--u-sp7); column-gap: var(--u-sp7);}
.pg-match .od a {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--u-sp2);
  column-gap: var(--u-sp2);
  min-height: 44px;
  justify-content: center;
  border-radius: var(--r-s);
  background: var(--raise);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--gold-l);
  font-weight: 800;
  font-size: var(--u-fs7);
  font-variant-numeric: tabular-nums;
}
.pg-match .od a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; border-color: var(--gold-d);}
.pg-match .od span {font-size: var(--u-fs1); color: var(--mut); font-weight: 700;}

/* 4D draw counter */
.pg-draw {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); row-gap: var(--u-sp20); column-gap: var(--u-sp20); align-items: center;}
.pg-draw .tx {min-width: 0px;}
.pg-draw .tx p {color: var(--mut); font-size: var(--u-fs9);}
.pg-draw .dws {display: grid; row-gap: var(--u-sp10); column-gap: var(--u-sp10); min-width: 0px;}
.pg-draw .dw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--u-sp10);
  column-gap: var(--u-sp10);
  min-width: 0px;
  padding-top: var(--u-sp13);
  padding-right: var(--u-sp15);
  padding-bottom: var(--u-sp13);
  padding-left: var(--u-sp15);
  border-radius: var(--r-s);
  background: #11110a;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--gold-d);
}
.pg-draw .dw b {font-size: var(--u-fs10); color: var(--tx); min-width: 0px;}
.pg-draw .dw span {font-size: var(--u-fs5); color: var(--mut); text-align: right; min-width: 0px;}

/* commission */
.pg-comm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--u-sp20);
  column-gap: var(--u-sp20);
  align-items: center;
  padding-top: var(--u-sp21);
  padding-bottom: var(--u-sp21);
  background: linear-gradient(135deg, var(--wine-d), #2a1416);
  border-width: 1px;
  border-style: solid;
  border-color: var(--wine-l);
  border-radius: var(--r);
  max-width: calc(var(--w) - 32px);
}
.pg-comm .tx {min-width: 0px;}
.pg-comm .tx p {color: #e9d3cf; font-size: var(--u-fs9);}
.pg-comm .tiers {display: grid; row-gap: var(--u-sp12); column-gap: var(--u-sp12); min-width: 0px;}
.pg-comm .tier {padding-top: var(--u-sp15); padding-right: var(--u-sp15); padding-bottom: var(--u-sp15); padding-left: var(--u-sp15); border-radius: var(--r-s); background: rgba(11, 11, 9, .5); border-width: 1px; border-style: solid; border-color: var(--wine-l); min-width: 0px;}
.pg-comm .tier b {display: block; font-size: var(--u-fs8); color: #ffeca6;}
.pg-comm .tier .pc {display: block; margin-top: var(--u-sp4); margin-right: 0px; margin-bottom: var(--u-sp6); margin-left: 0px; font-size: 30px; font-weight: 900; color: var(--gold-l); font-variant-numeric: tabular-nums;}
.pg-comm .tier p {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs6); color: #e2cdc9;}

/* apk */
.pg-apk {display: grid; grid-template-columns: 250px minmax(0, 1fr); row-gap: var(--u-sp21); column-gap: var(--u-sp21); align-items: center;}
.pg-apk img {border-radius: var(--r); border-width: 1px; border-style: solid; border-color: var(--line); width: 100%;}
.pg-apk .tx {min-width: 0px;}
.pg-apk .tx p {color: var(--mut); font-size: var(--u-fs9);}
.pg-apk .meta {display: flex; flex-wrap: wrap; row-gap: var(--u-sp8); column-gap: var(--u-sp8); margin-bottom: var(--u-sp16);}
.pg-apk .meta span {
  padding-top: var(--u-sp6);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp6);
  padding-left: var(--u-sp12);
  border-radius: 999px;
  background: #11110a;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  font-size: var(--u-fs4);
  color: var(--mut);
  font-weight: 700;
}

/* ---------------------------------------------------------------- content */
.pg-content {
  max-width: 920px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: var(--u-sp10);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp25);
  padding-left: var(--u-sp16);
}
.pg-content.utl {padding-top: var(--u-sp24);}
.pg-content h2 {margin-top: 1.5em;}
.pg-content h2:first-child {margin-top: 0px;}

.pg-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--u-sp12);
  column-gap: var(--u-sp12);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: var(--u-sp22);
  margin-left: 0px;
}
.pg-kpis div {padding-top: var(--u-sp15); padding-right: var(--u-sp15); padding-bottom: var(--u-sp15); padding-left: var(--u-sp15); border-radius: var(--r-s); background: var(--panel); border-width: 1px; border-style: solid; border-color: var(--line); min-width: 0px;}
.pg-kpis b {display: block; font-size: 23px; font-weight: 900; color: var(--gold-l); font-variant-numeric: tabular-nums;}
.pg-kpis span {display: block; margin-top: var(--u-sp4); font-size: var(--u-fs5); color: var(--mut);}

.pg-steps {counter-reset: s; list-style-type: none; list-style-position: outside; list-style-image: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: var(--u-sp22); margin-left: 0px;}
.pg-steps li {
  counter-increment: s;
  position: relative;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: var(--u-sp10);
  margin-left: 0px;
  padding-top: var(--u-sp14);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp14);
  padding-left: 56px;
  border-radius: var(--r-s);
  background: var(--panel);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.pg-steps li::before {
  content: counter(s);
  position: absolute;
  left: 15px;
  top: 13px;
  width: 28px;
  height: 28px;
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 50%;
  background: var(--wine);
  color: #ffeca6;
  font-weight: 900;
  font-size: var(--u-fs6);
}

.pg-tw {overflow-x: auto; margin-top: var(--u-sp17); margin-right: 0px; margin-bottom: var(--u-sp22); margin-left: 0px; border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--r-s);}
.pg-tbl {width: 100%; font-size: var(--u-fs8);}
.pg-tbl th {
  text-align: left;
  padding-top: var(--u-sp11);
  padding-right: var(--u-sp13);
  padding-bottom: var(--u-sp11);
  padding-left: var(--u-sp13);
  background: var(--raise);
  color: var(--gold-l);
  font-size: var(--u-fs4);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.pg-tbl td {padding-top: var(--u-sp11); padding-right: var(--u-sp13); padding-bottom: var(--u-sp11); padding-left: var(--u-sp13); border-top-width: 1px; border-top-style: solid; border-top-color: var(--line);}
.pg-tbl tbody tr:nth-child(even) {background: rgba(27, 27, 17, .55);}

.pg-faq {margin-top: var(--u-sp4); margin-right: 0px; margin-bottom: var(--u-sp22); margin-left: 0px;}
.pg-faq details {border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--r-s); background: var(--panel); margin-bottom: var(--u-sp9);}
.pg-faq summary {padding-top: var(--u-sp14); padding-right: var(--u-sp16); padding-bottom: var(--u-sp14); padding-left: var(--u-sp16); cursor: pointer; font-weight: 700; min-height: 44px;}
.pg-faq summary::-webkit-details-marker {display: none;}
.pg-faq summary::after {content: "+"; float: right; color: var(--gold); font-weight: 900;}
.pg-faq details[open] summary::after {content: "\2212";}
.pg-faq p {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: var(--u-sp16); padding-bottom: var(--u-sp15); padding-left: var(--u-sp16); color: #ddd7c5;}

.pg-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--u-sp16);
  column-gap: var(--u-sp16);
  margin-top: var(--u-sp10);
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: var(--u-sp18);
  padding-right: var(--u-sp19);
  padding-bottom: var(--u-sp18);
  padding-left: var(--u-sp19);
  border-radius: var(--r);
  background: linear-gradient(135deg, #23220f, var(--wine-d));
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold-d);
}
.pg-band b {font-size: var(--u-fs12); min-width: 0px;}

/* ---------------------------------------------------------------- footer */
.pg-foot {background: #0a0a07; border-top-width: 2px; border-top-style: solid; border-top-color: var(--gold-d); margin-top: var(--u-sp18);}
.pg-foot .w {max-width: var(--w); margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: var(--u-sp24); padding-right: var(--u-sp16); padding-bottom: var(--u-sp23); padding-left: var(--u-sp16);}
.pg-foot .cols {display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; row-gap: var(--u-sp21); column-gap: var(--u-sp21);}
.pg-foot .ab {min-width: 0px;}
.pg-foot .ab p {margin-top: var(--u-sp13); margin-right: 0px; margin-bottom: var(--u-sp14); margin-left: 0px; font-size: var(--u-fs7); color: var(--mut);}
.pg-foot h4 {font-size: var(--u-fs4); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: var(--u-sp12);}
.pg-foot .cols div a {display: block; margin-bottom: var(--u-sp9); font-size: var(--u-fs7); color: var(--tx);}
.pg-foot .cols div a.cta {display: inline-flex; margin-bottom: var(--u-sp11); padding-top: var(--u-sp8); padding-right: var(--u-sp15); padding-bottom: var(--u-sp8); padding-left: var(--u-sp15); border-radius: 999px; background: var(--metal); color: #15150a; font-weight: 800; min-height: 40px; align-items: center;}
.pg-foot .soc {display: flex; row-gap: var(--u-sp9); column-gap: var(--u-sp9);}
.pg-foot .soc a {display: grid; align-items: center; justify-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--raise); border-width: 1px; border-style: solid; border-color: var(--line);}
.pg-foot .soc svg {width: 17px; height: 17px; fill: var(--gold-l);}
.pg-foot .pay, .pg-foot .trust {display: flex; flex-wrap: wrap; row-gap: var(--u-sp9); column-gap: var(--u-sp9); margin-top: var(--u-sp20);}
.pg-foot .rg {margin-top: var(--u-sp19); margin-right: 0px; margin-bottom: var(--u-sp6); margin-left: 0px; font-size: var(--u-fs5); color: var(--mut);}
.pg-foot .cr {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: var(--u-fs5); color: #7d775f;}

/* ---------------------------------------------------------------- fixed chrome */
.pg-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  background: #15150b;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--gold-d);
  padding-top: var(--u-sp12);
}
.pg-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--u-sp2);
  column-gap: var(--u-sp2);
  min-height: 44px;
  padding-top: var(--u-sp4);
  padding-right: var(--u-sp2);
  padding-bottom: var(--u-sp8);
  padding-left: var(--u-sp2);
  font-size: var(--u-fs1);
  color: var(--mut);
  min-width: 0px;
}
.pg-bar a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.pg-bar .i {font-size: var(--u-fs11); line-height: var(--u-lh1); color: var(--gold);}
.pg-bar .coin {position: relative;}
.pg-bar .coin .i {
  position: absolute;
  top: -22px;
  width: 46px;
  height: 46px;
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 50%;
  background: var(--metal);
  border-width: 3px;
  border-style: solid;
  border-color: #15150b;
  color: #15150a;
  font-size: var(--u-fs10);
}
.pg-bar .coin {padding-top: var(--u-sp21); color: var(--gold-l);}

.pg-scta {
  display: none;
  position: fixed;
  inset: auto 0 var(--bar) 0;
  z-index: 39;
  padding-top: var(--u-sp9);
  padding-right: var(--u-sp12);
  padding-bottom: var(--u-sp9);
  padding-left: var(--u-sp12);
  background: rgba(11, 11, 9, .95);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--line);
}
.pg-scta .pg-btn {width: 100%;}

/* ---------------------------------------------------------------- entry modal */
.pg-pop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-items: center;
  padding-top: var(--u-sp17);
  padding-right: var(--u-sp17);
  padding-bottom: var(--u-sp17);
  padding-left: var(--u-sp17);
  background: rgba(5, 5, 4, .78);
}
.pg-pop.on {display: grid;}
.pg-pop .bx {
  position: relative;
  width: min(430px, 100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--r);
  background: var(--panel2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--gold-d);
  padding-top: var(--u-sp16);
  padding-right: var(--u-sp16);
  padding-bottom: var(--u-sp16);
  padding-left: var(--u-sp16);
}
.pg-pop .x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--raise);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--tx);
  font-size: var(--u-fs13);
  line-height: var(--u-lh1);
  cursor: pointer;
}
.pg-pop .hd {margin-top: var(--u-sp2); margin-right: var(--u-sp25); margin-bottom: var(--u-sp14); margin-left: var(--u-sp2); font-size: var(--u-fs6); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold);}
.pg-pop .pane {display: block; text-align: center;}
/* a hide utility has to beat every rule it switches off */
.pg-pop .pane.pg-off {display: none !important;}
.pg-pop .pane .big {
  display: block;
  margin-top: var(--u-sp8);
  margin-right: 0px;
  margin-bottom: var(--u-sp10);
  margin-left: 0px;
  font-size: clamp(38px, 11vw, 54px);
  font-weight: 900;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pg-pop .pane p {color: #ddd7c5; font-size: var(--u-fs8);}
.pg-pop .pane .pg-btn {width: 100%;}
.pg-pop .pg {display: flex; align-items: center; justify-content: center; row-gap: var(--u-sp10); column-gap: var(--u-sp10); margin-top: var(--u-sp14);}
.pg-pop .pv, .pg-pop .nx {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--raise);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--gold-l);
  font-size: var(--u-fs12);
  cursor: pointer;
}
.pg-pop .pv[disabled], .pg-pop .nx[disabled] {opacity: .35; cursor: default;}
.pg-pop .dots {display: flex; row-gap: var(--u-sp6); column-gap: var(--u-sp6);}
.pg-pop .dot {width: 22px; height: 22px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-width: 0px; border-style: none; border-color: currentcolor; background: transparent; cursor: pointer;}
.pg-pop .dot::after {content: ""; display: block; width: 8px; height: 8px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border-radius: 50%; background: var(--line);}
.pg-pop .dot.on::after {background: var(--gold);}
.pg-pop .ct {font-size: var(--u-fs4); color: var(--mut); font-variant-numeric: tabular-nums;}

@media (prefers-reduced-motion: reduce) {
  .pg-tick p, .pg-match .mh .live::before {animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .pg-cats {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .pg-games {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .pg-foot .cols {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .pg-match .ms {grid-template-columns: minmax(0, 1fr);}
}

@media (max-width: 880px) {
  body {padding-bottom: calc(var(--bar) + 64px);}
  .pg-burger {display: block;}
  .pg-head .bar {row-gap: var(--u-sp9); column-gap: var(--u-sp9);}
  .pg-menu {
    display: none;
    flex-direction: column;
    row-gap: var(--u-sp4);
    column-gap: var(--u-sp4);
    padding-top: var(--u-sp4);
    padding-right: var(--u-sp16);
    padding-bottom: var(--u-sp12);
    padding-left: var(--u-sp16);
    overflow-x: visible;
    overflow-y: visible;
  }
  .pg-open .pg-menu {display: flex;}
  .pg-menu a {width: 100%;}
  .pg-hero, .pg-ph, .pg-comm, .pg-apk, .pg-draw {grid-template-columns: minmax(0, 1fr);}
  .pg-hero > img, .pg-ph > img {order: -1;}
  .pg-apk img {max-width: 230px;}
  .pg-boards {grid-template-columns: minmax(0, 1fr);}
  .pg-bar {display: grid;}
  .pg-scta {display: block;}
}

@media (max-width: 620px) {
  body {padding-bottom: calc(var(--bar) + 70px);}
  /* burger, mark, wordmark, three language chips and two buttons do not fit a 375px bar, and the
     overflow pushes Register off the right edge. Drop the wordmark text and the Login button. */
  .pg-logo .wm {display: none;}
  .pg-acct {row-gap: var(--u-sp6); column-gap: var(--u-sp6);}
  .pg-acct .pg-btn.o {display: none;}
  .pg-acct .pg-btn {padding-top: var(--u-sp8); padding-right: var(--u-sp13); padding-bottom: var(--u-sp8); padding-left: var(--u-sp13);}
  .pg-lang {padding-top: var(--u-sp2); padding-right: var(--u-sp2); padding-bottom: var(--u-sp2); padding-left: var(--u-sp2);}
  .pg-lang a {padding-top: var(--u-sp5); padding-right: var(--u-sp7); padding-bottom: var(--u-sp5); padding-left: var(--u-sp7); font-size: var(--u-fs3);}
  .pg-games {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .pg-kpis {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .pg-trust {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .pg-checkin .days {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--u-sp4);
  }
  .pg-checkin .days::-webkit-scrollbar {display: none;}
  .pg-band {flex-direction: column; align-items: flex-start;}
  .pg-band .pg-btn {width: 100%;}
}

@media (max-width: 430px) {
  .pg-cats {grid-template-columns: minmax(0, 1fr);}
  .pg-games {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .pg-foot .cols {grid-template-columns: minmax(0, 1fr);}
  .act .pg-btn {width: 100%;}
  .pg-h5 .chip {flex-grow: 1; flex-shrink: 1; flex-basis: 100%;}
}

.pg-pop .panes {min-width: 0px;}

/* ------------------------------------------------------------------ the desk
   Three fixed columns on a wide screen. This is the one layout primitive that
   distinguishes this layout from a single
   scrolling column at every width, so keep the rails. */
.pg-desk {
  max-width: var(--w);
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: var(--u-sp24);
  margin-left: auto;
  padding-top: 0px;
  padding-right: var(--u-sp16);
  padding-bottom: 0px;
  padding-left: var(--u-sp16);
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr) 300px;
  align-items: start;
  row-gap: var(--u-sp17);
  column-gap: var(--u-sp17);
}
.pg-desk > * {min-width: 0px;}
.pg-rail {display: grid; row-gap: var(--u-sp16); column-gap: var(--u-sp16); align-content: start;}
.pg-floor {display: grid; row-gap: var(--u-sp17); column-gap: var(--u-sp17); min-width: 0px;}

/* inside a rail the blocks are already panels, so drop their own page margins and
   let the rail own the rhythm */
.pg-desk .pg-checkin, .pg-desk .pg-boards, .pg-desk .pg-pool, .pg-desk .pg-h5,
.pg-desk .pg-wall, .pg-desk .pg-match, .pg-desk .pg-draw, .pg-desk .pg-comm,
.pg-desk .pg-cats {
  max-width: none;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: var(--u-sp14);
  padding-right: var(--u-sp14);
}
.pg-rail .pg-comm, .pg-rail .pg-boards, .pg-rail .pg-h5,
.pg-rail .pg-checkin, .pg-rail .pg-match, .pg-rail .pg-draw {
  background: var(--panel);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--r);
  padding-top: var(--u-sp16);
  padding-bottom: var(--u-sp16);
}
/* a rail is narrow: anything that was a row on the page stacks inside one */
.pg-rail .pg-boards {grid-template-columns: minmax(0, 1fr);}
.pg-rail .pg-comm {grid-template-columns: minmax(0, 1fr);}
.pg-rail img, .pg-floor img {min-width: 0px; max-width: 100%; height: auto;}

@media (max-width: 1180px) {
  .pg-desk {grid-template-columns: 250px minmax(0, 1fr);}
  /* the account rail drops under the floor rather than squeezing the centre */
  .pg-rail.r {grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}
@media (max-width: 1040px) {
  /* reading order on a phone: the floor first, then the account, then the furniture */
  .pg-desk {grid-template-columns: minmax(0, 1fr); row-gap: var(--u-sp16); column-gap: var(--u-sp16);}
  .pg-floor {order: 1;}
  .pg-rail.r {order: 2; grid-column: auto; grid-template-columns: minmax(0, 1fr);}
  .pg-rail.l {order: 3;}
}