/* the extras on trial (extras.js) */
.x-head{ display:flex; justify-content:space-between; align-items:end; gap:20px 24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px); }
.x-asof{ margin:0; color:var(--muted); font:500 14px/1 var(--head); }
.x-tabs{ display:inline-flex; padding:4px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); }
.x-tabs button{ border:0; background:none; color:inherit; padding:9px 14px; border-radius:999px; font:600 13px/1 var(--head); cursor:pointer; opacity:.65; }
.x-tabs button[aria-selected="true"]{ background:var(--ink); color:#fff; opacity:1; }
.x-wins .x-tabs button[aria-selected="true"]{ background:#fff; color:var(--ink); }
.x-sub{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:18px; }
.x-sub h3{ margin:0 auto 0 0; font:800 22px/1 var(--head); letter-spacing:-.02em; }
.x-hint{ color:var(--muted); font:500 13px/1 var(--head); }

/* the numbers */
.x-numbers{ padding-block:clamp(72px,9vw,128px); background:#fff; }
.x-totals{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:2px solid var(--ink); }
.x-totals div{ padding:22px 18px 26px 0; border-bottom:1px solid var(--line); }
.x-totals b{ display:block; font:800 clamp(38px, 3.4vw + 12px, 76px)/1 var(--head); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.x-totals span{ display:block; margin-top:10px; color:var(--muted); font:500 14px/1.3 var(--head); }
.x-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,72px); margin-top:clamp(48px,6vw,80px); }
.x-split:has(.x-map[hidden]){ grid-template-columns:minmax(0,1fr); }
#x-rank{ margin:0; padding:0; list-style:none; }
#x-rank a{ display:grid; grid-template-columns:22px 44px minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:6px 14px; padding:12px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
#x-rank .n{ grid-row:span 2; font:700 14px/1 var(--head); color:var(--muted); }
#x-rank .im{ grid-row:span 2; width:44px; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#1c1c22; }
#x-rank .im img{ width:100%; height:100%; object-fit:cover; display:block; }
#x-rank .t{ grid-area:1 / 3; font:700 16px/1.1 var(--head); }
#x-rank .v{ grid-area:1 / 4; font:800 18px/1 var(--head); font-variant-numeric:tabular-nums; }
#x-rank .bar{ grid-row:2; grid-column:3 / 5; height:6px; border-radius:6px; background:var(--grey); overflow:hidden; }
#x-rank .bar i{ display:block; width:var(--w); height:100%; border-radius:6px; background:var(--c); transition:width .6s cubic-bezier(.2,.8,.2,1); }
#x-rank a:hover .t{ text-decoration:underline; }
.x-mapbox{ position:relative; aspect-ratio:960 / 470; } /* its space is kept from the start, so nothing jumps */
.x-mapbox svg{ display:block; width:100%; height:auto; }
.x-mapbox path{ fill:#e9e9e5; stroke:#fff; stroke-width:.6; transition:fill .3s; }
.x-mapbox path.on{ fill:color-mix(in srgb, var(--juice-now, #ffd23f) var(--k), #e9e9e5); cursor:pointer; }
.x-mapbox path.on:hover{ fill:var(--ink); }
.x-tip{ position:absolute; z-index:2; translate:-50% calc(-100% - 12px); padding:8px 11px; border-radius:10px; background:var(--ink); color:#fff; font:500 13px/1 var(--head); white-space:nowrap; pointer-events:none; }

/* big wins */
.x-wins{ padding-block:clamp(72px,9vw,128px); background:var(--ink); color:#fff; --line:rgba(255,255,255,.12); --muted:#9a9aa3; }
.x-wall{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.x-wall li{ display:grid; grid-template-columns:52px minmax(120px,auto) minmax(0,1fr) auto auto; align-items:center; gap:10px 22px; padding:14px 0; border-bottom:1px solid var(--line); }
.x-wall .im{ display:block; width:52px; aspect-ratio:3/4; border-radius:9px; overflow:hidden; background:#1c1c22; box-shadow:0 10px 24px -10px var(--c); }
.x-wall .im img{ width:100%; height:100%; object-fit:cover; display:block; }
.x-wall .x{ font:800 clamp(28px, 2vw + 14px, 44px)/1 var(--head); letter-spacing:-.04em; color:var(--c); font-variant-numeric:tabular-nums; }
.x-wall .g b{ display:block; font:700 16px/1.2 var(--head); } .x-wall .g span{ color:var(--muted); font:500 13px/1.4 var(--head); }
.x-wall .pay{ font:500 14px/1 var(--head); color:var(--muted); white-space:nowrap; } .x-wall .pay b{ color:#fff; }
.x-wall .rep{ color:#fff; font:600 14px/1 var(--head); text-decoration:none; padding:10px 14px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; }
.x-wall .bid{ color:var(--muted); font:500 12.5px/1 var(--head); font-variant-numeric:tabular-nums; white-space:nowrap; }
.x-wall .rep:hover{ background:rgba(255,255,255,.08); }
.x-wfoot{ display:flex; align-items:start; flex-wrap:wrap; gap:18px 28px; margin-top:28px; }
.x-wfoot .btn.light{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.x-send summary{ list-style:none; cursor:pointer; margin-top:14px; color:#fff; display:inline-block; } .x-send summary::-webkit-details-marker{ display:none; }
.x-send form{ display:grid; gap:12px; margin-top:18px; width:min(420px, 100%); }
.x-send label{ display:grid; gap:6px; font:600 13px/1 var(--head); color:#d4d4da; } .x-send label i{ font-style:normal; color:var(--muted); font-weight:500; }
.x-send input{ padding:12px 14px; border-radius:12px; border:0; background:rgba(255,255,255,.08); color:#fff; font:500 15px/1.2 var(--body); box-shadow:inset 0 0 0 1px var(--line); }
.x-send input:focus{ outline:2px solid var(--pine); outline-offset:1px; }
.x-send input::placeholder{ color:#6f6f78; }
.x-send .btn{ justify-self:start; margin-top:4px; } .x-send p{ margin:0; color:var(--muted); font-size:13px; }

/* news */
.x-news{ padding-block:clamp(72px,9vw,128px); background:#fff; }
.x-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); margin:0; padding:0; list-style:none; }
.x-cards a, .x-cards div{ display:grid; align-content:start; gap:10px; height:100%; box-sizing:border-box; padding:24px; border-radius:20px; background:var(--grey); color:inherit; text-decoration:none; transition:translate .25s; }
.x-cards a:hover{ translate:0 -4px; }
.x-cards .d{ font:600 12px/1 var(--head); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.x-cards b{ font:800 24px/1.1 var(--head); letter-spacing:-.02em; } .x-cards span:last-child{ color:#4a4a50; }

/* two doors under Work with us */
.x-doors{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:34px; max-width:860px; }
.x-doors a{ display:grid; gap:8px; padding:26px; border-radius:20px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:#fff; text-decoration:none; transition:background .2s, translate .2s; }
.x-doors a:hover{ background:rgba(255,255,255,.1); translate:0 -3px; }
.x-doors b{ font:800 24px/1.1 var(--head); letter-spacing:-.02em; } .x-doors span{ color:#b9b9bf; }
.x-doors .go{ margin-top:8px; color:var(--pine); font:600 15px/1 var(--head); }
html.has-doors:not(.x-off-doors) .wanted{ display:none; }

/* on a game */
.x-gstats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 14px; margin-top:22px; padding:16px 18px; border-radius:16px; background:color-mix(in srgb, var(--acc) 14%, rgba(255,255,255,.04)); }
.x-gstats b{ display:block; font:800 26px/1 var(--head); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.x-gstats span{ color:#9a9aa3; font:500 12.5px/1.4 var(--head); }
.x-gstats p{ grid-column:1 / -1; margin:12px 0 0; color:#9a9aa3; font:500 12px/1 var(--head); }

/* the trial panel */
.x-panel{ position:fixed; left:14px; bottom:14px; z-index:90; padding:12px 14px; border-radius:14px; background:rgba(18,18,20,.92); color:#fff; font:500 13px/1.2 var(--head); box-shadow:0 10px 30px rgba(0,0,0,.3); backdrop-filter:blur(6px); max-width:210px; }
.x-panel summary{ cursor:pointer; font-weight:700; }
.x-panel label{ display:flex; gap:8px; align-items:center; margin-top:8px; cursor:pointer; -webkit-user-select:none; user-select:none; }
.x-panel p{ margin:10px 0 0; color:#9a9aa3; font-size:11.5px; }
html.gv-open .x-panel{ display:none; }

/* off in the trial panel */
.x-off-numbers [data-x="numbers"], .x-off-ranking [data-x="ranking"], .x-off-map [data-x="map"],
.x-off-wins [data-x="wins"], .x-off-news [data-x="news"], .x-off-doors [data-x="doors"], .x-off-demo [data-x="demo"]{ display:none !important; }
.x-off-ranking .x-split, .x-off-map .x-split{ grid-template-columns:minmax(0,1fr); }

@media (max-width:900px){
  .x-totals{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .x-split{ grid-template-columns:minmax(0,1fr); }
  .x-cards{ grid-template-columns:minmax(0,1fr); }
  .x-wall li{ grid-template-columns:44px minmax(0,1fr) auto; gap:6px 14px; }
  .x-wall .im{ width:44px; grid-row:span 2; }
  .x-wall .g{ grid-column:2; grid-row:2; } .x-wall .x{ grid-column:2; grid-row:1; }
  .x-wall .pay{ grid-column:3; grid-row:1; justify-self:end; } .x-wall :is(.rep, .bid){ grid-column:3; grid-row:2; justify-self:end; } .x-wall .rep{ padding:8px 12px; font-size:13px; }
}
@media (max-width:600px){ .x-doors{ grid-template-columns:1fr; } .x-gstats b{ font-size:21px; } }

/* the live "night" look (one dark room, numbered sections split by hairlines): the extras join it */
:root[data-look="night"] :is(.x-numbers, .x-wins, .x-news){ background:transparent; color:#fff; padding-top:0; --line:rgba(255,255,255,.12); --muted:#9a9aa3; }
:root[data-look="night"] :is(.x-numbers, .x-wins, .x-news) > .wrap{ border-top:1px solid rgba(255,255,255,.12); padding-top:clamp(40px,5vw,72px); }
:root[data-look="night"] :is(.x-numbers, .x-wins, .x-news) .eyebrow{ counter-increment:sec; color:#9a9aa3; }
:root[data-look="night"] :is(.x-numbers, .x-wins, .x-news) .eyebrow::before{ content:"0" counter(sec); margin-right:14px; color:var(--juice-now, var(--pine)); transition:color .6s; }
:root[data-look="night"] .x-totals{ border-top-color:#fff; }
:root[data-look="night"] .x-tabs button[aria-selected="true"]{ background:#fff; color:var(--ink); }
:root[data-look="night"] #x-rank .im{ box-shadow:0 0 0 1px rgba(255,255,255,.08); }
:root[data-look="night"] #x-rank .bar{ background:rgba(255,255,255,.08); }
:root[data-look="night"] .x-mapbox path{ fill:#24242a; stroke:#0f0f13; }
:root[data-look="night"] .x-mapbox path.on{ fill:color-mix(in srgb, var(--juice-now, #ffd23f) var(--k), #24242a); }
:root[data-look="night"] .x-mapbox path.on:hover{ fill:#fff; }
:root[data-look="night"] .x-tip{ background:#fff; color:var(--ink); }
:root[data-look="night"] .x-cards :is(a, div){ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
:root[data-look="night"] .x-cards span:last-child{ color:#b9b9bf; }
.x-hr{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; }
.x-gstats.two{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:420px; }
footer .soc{ display:flex; align-items:center; gap:16px; } footer .soc[hidden]{ display:none; }
footer .soc a{ display:grid; } footer .soc svg{ width:17px; height:17px; fill:currentColor; }