/* XGames on X's colours: black page, #E7E9EA text, #71767B secondary, #2F3336 dividers, #1D9BF0 blue,
   pill buttons. Loaded after site.css and clean.css; only colours, radii and type change here. */
:root{
  --paper:#000000; --paper-2:#202327; --card:#000000; --soft:#16181C;
  --ink:#E7E9EA; --ink-2:#71767B; --ink-3:#71767B;
  --line:#2F3336; --line-2:#3E4144;
  --cobalt:#1D9BF0; --cobalt-2:#1A8CD8; --cobalt-tint:rgba(29,155,240,.14); --sky:#1D9BF0;
  --go:#00BA7C; --go-tint:rgba(0,186,124,.14); --amber:#FFD400; --amber-tint:rgba(255,212,0,.12); --red:#F4212E; --red-tint:rgba(244,33,46,.14);
  --code-bg:#16181C;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:var(--body);
  color-scheme:dark;
}
html,body{background:#000;color:var(--ink)}
body{font-size:15px}
::selection{background:rgba(29,155,240,.4);color:#fff}
h1,h2,h3,h4,.pl-hero h1,.page-h h1,.launch-top h1,.coin-head h1,.sec-h h2,.step-h h2,.prose h2,.board-head h2,.modal h2{font-weight:800;font-stretch:100%;font-variation-settings:normal}
.big-num,.stat b,.splitrow b,.gthumb-title,html body .pl-float b{font-stretch:100%;font-variation-settings:normal}
.wm{color:#E7E9EA}
.logo .xg-mark,.xg-mark{width:auto;height:36px;object-fit:contain;border-radius:0}
.pl-lb-ico .xg-mark{height:36px;border-radius:8px}

/* nav: black bar, active tab = bold white with a short blue pill underneath */
.nav{background:#000;border-bottom-color:var(--line)}
.nav-links a{color:var(--ink-2);font-weight:500;position:relative;border-bottom:0}
.nav-links a:hover{color:var(--ink);background:rgba(231,233,234,.06)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:700}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:50%;bottom:0;width:36px;height:4px;margin-left:-18px;border-radius:999px;background:var(--cobalt)}
.icon-btn{color:var(--ink)}
.icon-btn:hover{background:rgba(231,233,234,.1)}

/* buttons: pills. Primary blue, outlined ghost, white "featured" on the hero */
.brick,.pl-hero .brick{border-radius:999px;font-weight:700;background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.brick:hover,.pl-hero .brick:hover{background:var(--cobalt-2);border-color:var(--cobalt-2);color:#fff}
.brick.ghost,.brick.blue,.brick.green,.pl-hero .brick.ghost,.code-bar .brick.ghost{background:transparent;color:var(--ink);border-color:#536471}
.brick.ghost:hover,.brick.blue:hover,.brick.green:hover,.pl-hero .brick.ghost:hover,.code-bar .brick.ghost:hover{background:rgba(231,233,234,.1);border-color:#536471;color:var(--ink)}
.brick.red{background:transparent;color:var(--red);border-color:rgba(244,33,46,.5)}
.brick.red:hover{background:var(--red-tint);border-color:var(--red)}
.pl-hero .hero-ctas .brick:not(.ghost){background:#E7E9EA;border-color:#E7E9EA;color:#0F1419}
.pl-hero .hero-ctas .brick:not(.ghost):hover{background:#D7DBDC;border-color:#D7DBDC;color:#0F1419}

/* hero */
.pl-hero h1,.pl-hero h1 .grad{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.pl-hero .lede{color:var(--ink-2)}
.pl-eyebrow{color:var(--ink-2)}
html body .pl-token{background:var(--soft);border:1px solid var(--line);border-radius:999px;color:var(--ink);padding:5px 12px 5px 5px}
html body .pl-tk-sym{border-radius:999px;background:var(--cobalt);padding:3px 10px}
html body .pl-tk-txt,html body .pl-tk-link{color:var(--ink)}
html body button.pl-tk-ca{background:transparent;border-color:var(--line-2);color:var(--ink-2);border-radius:999px}
html body button.pl-tk-ca:hover{border-color:var(--ink-2);color:var(--ink)}
.pl-window{background:var(--soft);border:1px solid var(--line);border-radius:16px}
html body .pl-bar a.mono,.pl-bar span{background:#000;color:var(--ink-2);border-radius:999px}
html body .pl-bar a.mono:hover{background:#000;color:var(--ink)}
.pl-bar i{background:var(--line-2)}
html body a.pl-float,.pl-float{background:#000;border:1px solid var(--line);color:var(--ink);border-radius:12px;box-shadow:0 0 15px rgba(255,255,255,.12),0 0 3px 1px rgba(255,255,255,.1)}
html body .pl-float b{color:var(--ink)}
.pl-float span{color:var(--ink-2)}
html body a.pl-float:hover{border:1px solid var(--line-2)}
.pl-styles{border-top-color:var(--line)}
.pl-chip{color:var(--ink)}
.pl-chip:hover{color:var(--cobalt)}
.pl-styles>span{color:var(--ink-2)}
.pl-steps .n{color:var(--cobalt)}
.pl-steps p,.sec-h p{color:var(--ink-2)}

/* surfaces: black with #2F3336 hairlines, 16px corners; raised bits use #16181C */
.glass,.panel,.card,.stat,.gcard,.tbl-wrap,.callout,.pv-token,.toggle,.mcard,.idea,details.adv,.splitrow>div,.live-row{background:#000;border-color:var(--line);border-radius:16px}
.card:hover,.live-row:hover,.idea:hover{background:rgba(231,233,234,.03);border-color:var(--line)}
.live-row,.live-row:hover{border-left-color:var(--line)}
.build-strip,.preview,.pl-linkbox{background:var(--soft);border:0;border-radius:16px}
.preview .pv-token,.preview .gcard{background:#000}
.gthumb{background:var(--paper-2)}
.gbadge,.gt-thumb .pill,.gt-mcap{background:rgba(0,0,0,.75);color:var(--ink)}
.gt-thumb .pill.st-ready{background:rgba(0,0,0,.75);color:var(--go)}
.gt-thumb .pill.st-building{background:rgba(0,0,0,.75);color:var(--amber)}
.gt-thumb{background:var(--soft);border-radius:16px}
.gtile:hover .gt-thumb{background:var(--paper-2)}
.gt-ico{box-shadow:0 8px 24px -10px rgba(0,0,0,.9)}
.gt-body>b{color:var(--ink)}
.gt-by{color:var(--ink-2)}
.gt-stats small{color:var(--ink-2)}
.progress{background:var(--line)}
.pill{border-radius:999px;background:var(--paper-2);color:var(--ink-2)}
.st-ready{color:var(--go);background:var(--go-tint)}
.st-building{color:var(--amber);background:var(--amber-tint)}
.st-failed{color:var(--red);background:var(--red-tint)}
.chip,.ca,.chip.genre{background:transparent;border-color:var(--line);color:var(--ink-2);border-radius:999px}
.ca:hover{border-color:var(--ink-2);color:var(--ink)}

/* segmented filters + choice chips: X-style pills */
.seg{background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border-radius:999px;color:var(--ink-2);font-weight:600}
.seg button:hover{color:var(--ink);background:rgba(231,233,234,.06)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#0F1419;box-shadow:none}
.chips button,.choice{border-radius:999px;border-color:#536471;background:transparent;color:var(--ink)}
.chips button:hover,.choice:hover{background:rgba(231,233,234,.08);border-color:#536471;color:var(--ink)}
.chips button[aria-pressed="true"],.choice[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#0F1419}
.tile{background:#000;border-color:var(--line);border-radius:16px}
.tile:hover{background:rgba(231,233,234,.03);border-color:var(--line-2)}
.tile[aria-pressed="true"],.mcard[aria-pressed="true"]{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt);background:rgba(29,155,240,.06)}

/* forms */
input[type=text],input[type=number],input[type=password],input[type=url],select,textarea,.glass-input,.ticker,html body .slug-box{background:#000;border-color:#333639;border-radius:6px;color:var(--ink)}
input:focus,select:focus,textarea:focus,.glass-input:focus,.ticker:focus-within,html body .slug-box:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt);background:#000}
input::placeholder,textarea::placeholder{color:var(--ink-2)}
select option{background:#000;color:var(--ink)}
.img-drop{background:#000;border-color:#333639}
.toggle input{background:#333639}
.field label,.field .lbl,.label-pill,.img-drop b,.tile-name,.mcard b{color:var(--ink)}
.step-n{color:var(--cobalt)}

/* stats, tabs */
.stats,.metrics{border-color:var(--line)}
.stat b,.metrics b,.big-num,.splitrow b,.bs-time{color:var(--ink)}
.tabs{border-bottom-color:var(--line);gap:0}
.tabs button{position:relative;border-bottom:0;padding:14px 18px;color:var(--ink-2);font-weight:500}
.tabs button:hover{background:rgba(231,233,234,.06);color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:700}
.tabs button[aria-selected="true"]::after{content:'';position:absolute;left:50%;bottom:0;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--cobalt)}
th{background:var(--soft)}
tbody tr:hover{background:rgba(231,233,234,.03)}

/* coin page media + chat */
.play-frame,html body .play-video{background:var(--soft)}
html body .play-video .pv-play{background:#E7E9EA;color:#0F1419;border-radius:999px}
.chat{background:#000}
html body .msg.sys{background:var(--soft);color:var(--ink-2);border-color:transparent;border-radius:12px}
html body .msg .bubble{background:var(--paper-2);border-color:transparent;color:var(--ink);border-radius:18px 18px 18px 4px}
html body .msg.user .bubble{background:var(--cobalt);border-color:var(--cobalt);color:#fff;border-radius:18px 18px 4px 18px}
.av{border-radius:999px}
.chat-input,.chat-lock,.chat-head{background:#000;border-color:var(--line)}

/* code stays dark, just X's greys instead of navy */
.term,.studio,.prose pre{background:var(--soft);border:1px solid var(--line);color:#E7E9EA}
.term-head,.code-bar,.tree,.code .gut{border-color:var(--line)}
.code .gut{background:var(--soft);color:#536471}
.tree{background:#000}
.tree button:hover{background:rgba(231,233,234,.06)}
.tree button[aria-current="true"]{background:rgba(29,155,240,.12)}
.term-head .dots i{background:var(--line-2)}
.prose code{background:var(--paper-2);color:var(--ink)}
.logbox{background:#000;border-color:var(--line)}
.docs-nav a:hover{background:rgba(231,233,234,.06)}

/* modal + toast: X's black dialog with the faint white glow */
.modal-back{background:rgba(91,112,131,.4)}
.modal{background:#000;border:0;border-radius:16px;box-shadow:0 0 15px rgba(255,255,255,.2),0 0 3px 1px rgba(255,255,255,.15)}
.toast{background:var(--cobalt);color:#fff;border-radius:6px;box-shadow:none}
.toast.warn,.toast.err{background:#000;border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--amber)}
.toast.err{box-shadow:inset 3px 0 0 var(--red)}

footer{background:#000;border-top-color:var(--line)}
.pl-foot b{color:var(--ink)}
.pl-foot a{color:var(--ink-2)}
.pl-foot a:hover{color:var(--ink);text-decoration:underline}
.empty{border-color:var(--line);color:var(--ink-2)}