/* Entelechy Entertainment: the styles every page shares. Each page's own rules are in its own stylesheet (home.css,
   games.css, brands.css, careers.css, contact.css), loaded after this one so they build on these.
   Colours follow the visitor's device setting: the light set by default, the night set under prefers-color-scheme. */
/* the two type families, served from this site (assets/fonts/, SIL Open Font License: see the OFL files there): the
   files Google Fonts serves Chrome on Windows (hinted, which macOS and phones ignore), latin and latin-ext with
   Google's unicode ranges. Big Shoulders is one variable file for both weights. Text waits for its font
   (font-display:block) instead of showing a stand-in and swapping: every page starts the latin files early (preload
   and Early Hints), so the wait is short, and after about 3 s the stand-in shows anyway. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:block;src:url(/_v/122b24bc2a90/assets/fonts/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:block;src:url(/_v/b0a8ad37ac45/assets/fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:block;src:url(/_v/3facdf66b607/assets/fonts/barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:block;src:url(/_v/cd759df8ef9e/assets/fonts/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:block;src:url(/_v/b7f099c42196/assets/fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:block;src:url(/_v/4b52ddd4836b/assets/fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:800;font-display:block;src:url(/_v/3931e6f7a0fa/assets/fonts/big-shoulders-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:800;font-display:block;src:url(/_v/e1c44cb6f281/assets/fonts/big-shoulders-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:900;font-display:block;src:url(/_v/3931e6f7a0fa/assets/fonts/big-shoulders-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:900;font-display:block;src:url(/_v/e1c44cb6f281/assets/fonts/big-shoulders-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* if Big Shoulders takes more than about 3 s to load (or can't load), a local bold sans scaled down to about its narrow width, so
   the name and the numbers still fit */
@font-face{font-family:'Big Shoulders fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Neue Bold'),local('Roboto Bold'),local('Arial');font-weight:800 900;size-adjust:58%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#0E1016}
/* the scrollbar keeps its place on every page: Windows draws a 15 px bar that takes room, so pages too short to scroll
   (Careers, Brands or Contact on a tall window) were 15 px wider than the rest and everything centred on them sat
   7.5 px to the right. scrollbar-gutter keeps the bar's room even where there is nothing to scroll (an empty strip
   in the page's night ground there) */
html{scrollbar-gutter:stable}
/* colours of the light page as variables; the device setting swaps in the night set */
.mq{--g:#F4F6FA;--band:#FFFFFF;--card:#FFFFFF;--card2:#F4F6FA;--well:#F4F6FA;--ink:#0E1016;--ink2:#3B4252;--ink3:#5A6273;--inv:#FFFFFF;--line:rgba(14,16,22,.10);--rule:rgba(14,16,22,.12);--field:#7A8193;--fieldbg:#FFFFFF;--like:#15803D;--live:#1F9A52;--plays:#2A62D4;--comm:#7246D6;--fav:#F5B82E;--fav-s:#9C6B00;--thumb:#1E8449;--err:#B42318;--panel:#FFFFFF;--pbd:rgba(14,16,22,.10);--pbase:#0E1016;--scheme:light}
@media (prefers-color-scheme: dark){
.mq{--g:#0E1016;--band:#12151D;--card:#161A23;--card2:#1A1E28;--well:#1D2230;--ink:#F4F6FA;--ink2:#C9CED9;--ink3:#9AA3B2;--inv:#0E1016;--line:rgba(255,255,255,.08);--rule:rgba(255,255,255,.12);--field:#7A8292;--fieldbg:#1D2230;--like:#4ADE80;--live:#4ADE80;--plays:#60A5FA;--comm:#A78BFA;--fav:#FACC15;--fav-s:#A16207;--thumb:#4ADE80;--err:#FF8A80;--panel:#161A23;--pbd:rgba(255,255,255,.10);--pbase:#2E3546;--scheme:dark}
}
.mq{font-family:Barlow,sans-serif;font-size:17px;line-height:1.6;font-weight:400;color:#C9CED9;background:#0E1016;color-scheme:dark;-webkit-font-smoothing:antialiased}
.mq ::selection{background:rgba(255,138,31,.35);color:#F4F6FA}
:where(.mq) :where(h1,h2,h3,p,ul,ol,li,figure,figcaption,fieldset,legend){margin:0;padding:0}
:where(.mq) :where(ul,ol){list-style:none}
:where(.mq) :where(h1,h2,h3){color:#F4F6FA;font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-weight:900;text-transform:uppercase;text-wrap:balance}
:where(.mq) p{text-wrap:pretty}
:where(.mq) img{display:block;max-width:100%;height:auto}
:where(.mq) a{color:#FFB366}
:where(.mq) a:hover{color:#FFD3A3}
:where(.mq) svg{flex:none}
.mq a:focus-visible,.mq button:focus-visible,.mq input:focus-visible,.mq textarea:focus-visible{outline:2px solid #F4F6FA;outline-offset:2px}
/* a control that keyboard focus scrolls into view stops clear of the sticky header (72 px, 64 on phones), never under it */
main :is(a,button,input,textarea,select){scroll-margin-top:88px}
.mq-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mq-wrap{box-sizing:content-box;max-width:1200px;margin:0 auto;padding-left:clamp(24px,4vw,48px);padding-right:clamp(24px,4vw,48px)}

/* the page grounds (light by default, night when the device asks); straight seams */
.mq-day{background:var(--g)}
.mq-white{background:var(--band)}
.mq-lt{color:var(--ink2);color-scheme:var(--scheme);-webkit-font-smoothing:auto}
.mq-lt ::selection{background:rgba(255,138,31,.30);color:var(--ink)}
.mq-lt :where(h1,h2,h3){color:var(--ink)}
.mq-lt :where(a){color:var(--ink)}
.mq-lt :where(a):hover{color:var(--ink)}
.mq .mq-lt a:focus-visible,.mq .mq-lt button:focus-visible,.mq .mq-lt input:focus-visible,.mq .mq-lt textarea:focus-visible{outline-color:var(--ink)}

/* type: the poster face for heads, numbers, tags and caps; Barlow for every line of text */
.mq-h{font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-weight:900;line-height:.92;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.mq-xl{font-size:clamp(44px,7vw,94px)}
.mq-l{font-size:clamp(44px,6.2vw,88px)}
.mq-h2{font-size:clamp(40px,4.5vw,64px)}
.mq-h3{font-size:28px;font-weight:800;line-height:1;letter-spacing:.01em}
.mq-lead{font-size:20px;line-height:1.5;max-width:52ch}
.mq-caps{color:#FF8A1F;font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-size:16px;font-weight:800;line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
.mq-lt .mq-caps{color:var(--ink3)}
.mq-copy{max-width:60ch}
.mq-card-copy{max-width:45ch}
.mq-nb{white-space:nowrap}
.mq-br{display:inline}
.mq-br-m{display:none}

/* buttons: one family, rectangles on a 3 px base that press */
.mq-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border:1.5px solid transparent;border-radius:6px;font:inherit;font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out,transform 150ms ease-out,box-shadow 150ms ease-out}
.mq .mq-btn-fill{background:#FF8A1F;border-color:#FF8A1F;color:#0E1016;box-shadow:0 3px 0 #B85A0C}
.mq .mq-btn-fill:hover{background:#FF9D45;border-color:#FF9D45;color:#0E1016;transform:translateY(-1px);box-shadow:0 4px 0 #B85A0C}
.mq .mq-btn-fill:active{background:#F27A0C;border-color:#F27A0C;color:#0E1016;transform:translateY(2px);box-shadow:0 1px 0 #B85A0C}
.mq .mq-btn-day{background:transparent;border-color:var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.mq .mq-btn-day:hover{background:var(--ink);color:var(--inv);transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.mq .mq-btn-day:active{background:var(--ink2);border-color:var(--ink2);color:var(--inv);transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.mq-btn-sm{min-height:48px;padding:0 20px;font-size:15px;gap:8px}
.mq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.mq-center{justify-content:center}

/* header: transparent over the cover, filled with night after 120 px of scroll (solid where scroll timelines are missing) */
.mq-header{position:sticky;top:0;z-index:20;margin-bottom:-72px;background:#0E1016}
@supports (animation-timeline: scroll()){
.mq-header{background:transparent;animation:mq-hdr-fill linear both;animation-timeline:scroll(root);animation-range:0 120px}
}
@keyframes mq-hdr-fill{from{background-color:rgba(14,16,22,0)}to{background-color:#0E1016}}
.mq .mq-header.mq-hdr-open{animation:none;background:#0E1016}
.mq-bar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.mq .mq-brand{display:flex;align-items:center;gap:12px;min-height:44px;min-width:0;color:#F4F6FA;text-decoration:none}
.mq .mq-brand:hover{color:#F4F6FA}
.mq-brand img{width:40px;height:40px;border-radius:6px;flex:none}
.mq-word{font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-size:20px;font-weight:800;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.mq-nav{display:flex;align-items:center;gap:32px}
.mq .mq-nav a{display:inline-flex;align-items:center;min-height:44px;color:#DCE1EA;font-size:15px;font-weight:500;text-decoration:none;transition:color 150ms ease-out}
.mq .mq-nav a:hover{color:#FFFFFF}
.mq .mq-nav a[aria-current="page"]{color:#F4F6FA;font-weight:600;background:linear-gradient(#FF8A1F,#FF8A1F) left bottom 5px / 100% 3px no-repeat}
/* each link is always as wide as its bold current-page look (an invisible bold copy of its data-label under it), so
   marking the current page never nudges the links beside it */
.mq .mq-nav a:not(.mq-cta){flex-direction:column;justify-content:center}
.mq .mq-nav a:not(.mq-cta)::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none;user-select:none}
.mq .mq-nav a.mq-cta{padding:0 20px;border-radius:6px;background:#FF8A1F;color:#0E1016;font-weight:600;box-shadow:0 3px 0 #B85A0C;transition:background-color 150ms ease-out,transform 150ms ease-out,box-shadow 150ms ease-out}
.mq .mq-nav a.mq-cta:hover{background:#FF9D45;color:#0E1016;transform:translateY(-1px);box-shadow:0 4px 0 #B85A0C}
.mq .mq-nav a.mq-cta:active{background:#F27A0C;transform:translateY(2px);box-shadow:0 1px 0 #B85A0C}
/* the Contact button looks the same on Contact as everywhere else: no ring marks it (its aria-current still tells
   screen readers which page this is) */
.mq-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;border:1px solid rgba(255,255,255,.40);border-radius:6px;background:transparent;color:#F4F6FA;cursor:pointer;transition:background-color 150ms ease-out}
.mq-menu-btn:hover{background:#232838}
.mq-menu-btn .mq-ico-close{display:none}
.mq-menu-btn[aria-expanded="true"] .mq-ico-open{display:none}
.mq-menu-btn[aria-expanded="true"] .mq-ico-close{display:block}
.mq-menu-btn[aria-expanded="true"]{background:#232838}
.mq-menu{display:none;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:#0E1016}
.mq-menu-list{padding:8px 0 0}
.mq-menu-list li{border-bottom:1px solid rgba(255,255,255,.08)}
.mq .mq-menu-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 12px;color:#F4F6FA;font-size:17px;font-weight:600;text-decoration:none}
.mq .mq-menu-list a:hover{background:#161A23;color:#F4F6FA}
.mq .mq-menu-list a[aria-current="page"]{background:#232838;color:#F4F6FA;font-weight:600;box-shadow:inset 3px 0 0 #FF8A1F}
.mq-menu-cta{padding:16px 0 24px}
.mq-menu-cta .mq-btn{width:100%}

/* the cover: one still blurred image, centred words on it; dark in both colour modes. The browser blurs the 384 px copy
   of the picture at screen resolution (the blur leaves nothing finer to show) */
.mq-cover{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:#0E1016;padding-top:72px;min-height:420px;text-align:center}
.mq-bd{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0E1016;pointer-events:none}
.mq .mq-bd img{position:absolute;top:-48px;left:-48px;width:calc(100% + 96px);height:calc(100% + 96px);max-width:none;object-fit:cover;filter:blur(18px) saturate(1.15)}
/* an even scrim: a band at the top for the nav, the middle open enough for the street to read, a little stronger at the foot */
.mq-bd::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 58% 52% at 50% 50%,rgba(14,16,22,.50) 0%,rgba(14,16,22,.30) 55%,rgba(14,16,22,0) 100%),linear-gradient(180deg,rgba(14,16,22,.82) 0%,rgba(14,16,22,.62) 16%,rgba(14,16,22,.56) 60%,rgba(14,16,22,.74) 100%)}
.mq-cover-in{box-sizing:border-box;width:100%;max-width:calc(1200px + 2 * clamp(24px,4vw,48px));display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:56px;padding-bottom:72px}
.mq-cover .mq-lead{color:#DCE1EA;text-wrap:balance;margin:0 auto}
/* Home: the name across the width in one line, the line under it, the arrow at the foot */
.mq-cover-home{min-height:clamp(560px,100svh,860px)}
.mq-cover-home .mq-cover-in{gap:28px;padding-top:24px;padding-bottom:168px;container-type:inline-size}
.mq-name{color:#F4F6FA;font-size:min(118px,calc(100cqi / 10.2));line-height:.88;letter-spacing:-.005em;white-space:nowrap;text-wrap:nowrap}
.mq-line{color:#DCE1EA;font-size:22px;font-weight:500;line-height:1.45;text-wrap:balance;max-width:34em}
.mq-scroll{position:absolute;left:50%;bottom:124px;z-index:1;width:44px;height:44px;margin-left:-22px;display:flex;align-items:center;justify-content:center;color:#DCE1EA;animation:mq-bob 2.4s ease-in-out infinite}
@keyframes mq-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
/* the tall cover (Careers) */
.mq-cover-tall{min-height:700px}

/* stat panels that pop out of the cover's edge: half on the image, half on the page */
.mq-pop{position:relative;z-index:2;display:flow-root}
.mq-panels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:-100px}
.mq-panel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:22px 22px 20px;border:1px solid var(--pbd);border-radius:6px;background:var(--panel);box-shadow:0 5px 0 var(--pbase);container-type:inline-size}
.mq-stat-ico{height:20px;display:flex;align-items:center;gap:8px}
.mq-panel .mq-stat-ico{position:absolute;top:18px;right:18px}
.mq-panel .mq-lbl{max-width:9em}
.mq-live{color:var(--ink);font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-size:16px;font-weight:800;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.mq-live-dot{width:8px;height:8px;flex:none;border-radius:999px;background:var(--live);animation:mq-pulse 2s ease-out infinite}
@keyframes mq-pulse{0%{box-shadow:0 0 0 0 rgba(31,154,82,.35)}100%{box-shadow:0 0 0 10px rgba(31,154,82,0)}}
.mq-num{color:var(--ink);font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-size:64px;font-weight:900;line-height:.9;letter-spacing:-.005em}
/* the number shrinks with a narrow panel (64 px at most), so a live value stays clear of its icon and the LIVE tag */
.mq-panel .mq-num{font-size:min(64px,31cqi)}
.mq-num-like{color:var(--like)}
.mq-lbl{color:var(--ink3);font-size:15px;line-height:1.45;text-wrap:balance}
.mq-i-plays{stroke:var(--plays)}
.mq-i-comm{stroke:var(--comm)}
.mq-i-fav{fill:var(--fav);stroke:var(--fav-s)}
.mq-i-like{stroke:var(--thumb)}
.mq-intro{display:flex;flex-direction:column;align-items:center;gap:28px;padding:72px 0 112px;text-align:center}
.mq-intro .mq-lead{color:var(--ink);font-size:22px;font-weight:500;max-width:30em}

/* sections: big heads with lots of air */
.mq-sec{padding:128px 0}
.mq-stack{display:flex;flex-direction:column;align-items:flex-start}
.mq-g16{gap:16px}

/* cards: square-cut, tone only */
.mq-card{border-radius:6px;background:var(--card)}
.mq-white .mq-card{background:var(--card2)}
.mq-well{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-radius:6px;background:var(--well);min-width:0}
.mq-well-top{display:flex;align-items:center;gap:10px}
.mq-wnum{color:var(--ink);font-family:'Big Shoulders','Big Shoulders fallback',sans-serif;font-size:28px;font-weight:900;line-height:1}
.mq-wnum.mq-num-like{color:var(--like)}

/* a game feature: art, then the copy (the second game mirrored) */
.mq-game{position:relative;display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);padding:8px}
.mq-game-media{position:relative;grid-column:1;grid-row:1;min-width:0}
.mq-game-img{display:block;width:100%;border-radius:6px;object-fit:cover}
.mq-r21{aspect-ratio:21 / 10;object-position:50% 0%}
.mq-r169{aspect-ratio:16 / 9}
.mq-game-text{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:24px 40px;min-width:0}
.mq-game-id{display:flex;align-items:center;gap:16px}
.mq-game-id>div{min-width:0;display:flex;flex-direction:column;gap:6px}
.mq-gicon{width:64px;height:64px;border-radius:6px;flex:none}
.mq .mq-lt .mq-namelink{color:var(--ink);text-decoration:none}
.mq .mq-lt .mq-namelink:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.mq-meta-day{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--ink3);font-size:15px;line-height:1.5}
.mq-games{display:grid;gap:56px}
.mq-game-flip{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
.mq-game-flip>.mq-game-media{grid-column:2}
.mq-game-flip>.mq-game-text{grid-column:1}
.mq-mct-art{object-position:right center}
.mq-strip{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;margin-top:8px;padding:8px 0;border-top:1px solid var(--line)}
.mq-strip .mq-well{flex-direction:row;align-items:center;gap:10px;padding:12px 24px;background:none;border-radius:0}
.mq-strip .mq-well+.mq-well{border-left:2px solid var(--rule)}
.mq-rooms{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-top:8px}
.mq-rooms img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px}

/* the closing band, centred: the tagline, the line and the action under it */
.mq-close{background:#0E1016}
.mq-close-in{padding-top:128px;padding-bottom:128px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.mq-close-h{max-width:1100px}
.mq-close-copy{color:#C9CED9;max-width:45ch;font-size:20px;line-height:1.5}

/* footer: one night row and the copyright line */
.mq-footer{background:#0A0C11;border-top:1px solid rgba(255,255,255,.08)}
.mq-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px;padding:32px 0}
.mq-foot-copy{margin:0;color:#9AA3B2;font-size:15px;line-height:1.5}

/* page specifics */
.mq-community{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;column-gap:32px;padding:48px}
.mq-community .mq-gicon{align-self:start}
.mq-community-ico{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--ink);opacity:.12}
.mq-community-ico svg{position:absolute}
/* contact */
.mq-cover-c .mq-cover-in{padding-bottom:152px}
.mq-cbody{padding-bottom:128px}
.mq-formcard{margin-top:-96px;padding:48px;position:relative;z-index:1;display:flex;flex-direction:column;border:1px solid var(--pbd);box-shadow:0 5px 0 var(--pbase)}
.mq-formcard>.mq-form{flex:1}
.mq-form{display:flex;flex-direction:column;gap:24px;min-width:0}
.mq-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mq-fieldwrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.mq-form>.mq-msgwrap{flex:1}
.mq-msgwrap textarea.mq-field{flex:1}
.mq-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3}
.mq-req{color:var(--ink3);font-size:15px;font-weight:400}
.mq-field{width:100%;min-height:48px;padding:11px 15px;border:1px solid var(--field);border-radius:6px;background:var(--fieldbg);color:var(--ink);font:inherit;font-size:17px;line-height:1.5;transition:border-color 150ms ease-out}
.mq-field:hover{border-color:var(--ink2)}
.mq-field:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--fieldbg) inset;caret-color:var(--ink)}
.mq-field[aria-invalid="true"]{padding:10px 14px;border:2px solid var(--err)}
textarea.mq-field{min-height:160px;resize:none}
.mq-err{display:flex;align-items:center;gap:8px;color:var(--err);font-size:15px;font-weight:600;line-height:1.4}
.mq-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.mq-legend{margin-bottom:8px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3}
.mq-chip{min-height:48px;padding:0 16px;border:1px solid var(--field);border-radius:6px;background:var(--fieldbg);color:var(--ink);font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
.mq-chip:hover{border-color:var(--ink)}
.mq-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.mq-status{font-size:15px;font-weight:600;line-height:1.4}
.mq-status-ok{color:var(--ink)}
.mq-status-err{color:var(--err)}

/* stat panels: five in one row need about 1,300 px (each 64 px number beside its icon); below that, three over two */
@media (max-width:1299.98px){
.mq-panels{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.mq-panels>li{grid-column:span 2}
.mq-panels>li:nth-child(4){grid-column:2 / span 2}
}
/* tablet */
@media (max-width:1023.98px){
.mq-game,.mq-game-flip{grid-template-columns:minmax(0,1fr)}
.mq-game>*{grid-column:1 !important;grid-row:auto !important}
.mq-game-text{padding:24px 24px 16px}
.mq-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* phone: below 768 */
@media (max-width:767.98px){
.mq-br{display:none}
.mq-br-m{display:inline}
.mq-bar{height:64px;gap:12px}
.mq-header{margin-bottom:-64px}
main :is(a,button,input,textarea,select){scroll-margin-top:80px}
.mq-cover{padding-top:64px;min-height:340px}
.mq-cover-home{min-height:640px}
.mq-cover-tall{min-height:560px}
.mq-cover-in{padding-top:40px;padding-bottom:56px;gap:20px}
.mq-cover-home .mq-cover-in{gap:20px;padding-top:24px;padding-bottom:160px}
.mq-name{font-size:min(72px,calc(100cqi / 5.75));line-height:.9;white-space:normal;text-wrap:balance}
.mq-line{font-size:19px}
.mq-scroll{bottom:100px}
.mq-cover-c .mq-cover-in{padding-bottom:120px}
.mq-bd::after{background:radial-gradient(ellipse 80% 50% at 50% 45%,rgba(14,16,22,.40) 0%,rgba(14,16,22,0) 100%),linear-gradient(180deg,rgba(14,16,22,.78) 0%,rgba(14,16,22,.64) 30%,rgba(14,16,22,.64) 70%,rgba(14,16,22,.78) 100%)}
.mq .mq-brand{gap:10px}
.mq-brand img{width:36px;height:36px}
.mq-word{font-size:17px}
.mq-nav{display:none}
.mq-menu-btn{display:inline-flex}
.mq-menu:not([hidden]){display:block;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.mq-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:-72px}
.mq-panels>li,.mq-panels>li:nth-child(4){grid-column:span 1}
.mq-panels>li:nth-child(5){grid-column:1 / -1}
.mq-panel{padding:16px 16px 14px;gap:8px}
.mq-panel .mq-stat-ico{position:static}
.mq-panel .mq-num{font-size:44px}
.mq-intro{padding:48px 0 72px;gap:24px}
.mq-intro .mq-lead{font-size:19px}
.mq-sec{padding:64px 0}
.mq-game-text{padding:24px 16px 16px}
.mq-game-id{flex-direction:column;align-items:flex-start;gap:12px}
.mq-strip{flex-direction:column;align-items:stretch}
.mq-strip .mq-well{padding:12px 16px}
.mq-strip .mq-well+.mq-well{border-left:0;border-top:1px solid var(--line)}
.mq-close-in{padding-top:64px;padding-bottom:64px;gap:24px}
.mq-community{grid-template-columns:minmax(0,1fr);row-gap:24px;padding:32px 24px}
.mq-formcard{padding:32px 20px;margin-top:-72px}
.mq-pair{grid-template-columns:minmax(0,1fr)}
.mq-topics{grid-template-columns:minmax(0,1fr);gap:8px}
.mq-foot-row{flex-direction:column;align-items:flex-start;gap:8px;padding:28px 0}
}
@media (max-width:359.98px){
.mq-nb{white-space:normal}
.mq-btn{white-space:normal;text-align:center;padding-top:10px;padding-bottom:10px}
.mq-header .mq-word{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mq-panels{grid-template-columns:minmax(0,1fr)}
.mq-panels>li:nth-child(5){grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
.mq-live-dot,.mq-scroll{animation:none}
.mq .mq-btn,.mq .mq-nav a.mq-cta{transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
.mq .mq-btn.mq-btn:hover,.mq .mq-btn.mq-btn:active,.mq .mq-nav a.mq-cta.mq-cta:hover,.mq .mq-nav a.mq-cta.mq-cta:active{transform:none}
}
/* without JavaScript the Menu button can't open the menu: on phones the menu shows open under the bar instead */
@media (scripting:none) and (max-width:767.98px){
.mq .mq-menu-btn{display:none}
.mq .mq-menu[hidden]{display:block}
.mq-header{position:relative}
}