/* the site pages (home, decks, leaderboard, stats) share the table's look */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap");
:root { --disp: "Orbitron", "Rajdhani", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --ui: "Rajdhani", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --bg:#07080c; --felt:#0d1017; --line:#232a38; --fg:#e8ebf2; --dim:#8d97a8; --acc:#f5e01a; --cyan:#19e6ff; --mag:#ff2bd6; --red:#ff4d3d; --green:#43d98a; --blue:#4d8dff; --yellow:#f5e01a; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
html { background:var(--bg); color-scheme:dark; }      /* the page past its edges (an overscroll, a short page) is the table's black, never the browser's white */
body { margin:0; background: radial-gradient(1200px 700px at 50% 30%, #141a26 0%, var(--bg) 70%) fixed; color:var(--fg); font: 14px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color:var(--cyan); text-decoration:none; } a:hover { text-decoration:underline; }
button { background:#1a2030; color:var(--fg); border:1px solid #324056; border-radius:6px; padding:7px 11px; cursor:pointer; font-size:13px; }
button:hover { border-color:var(--cyan); box-shadow:0 0 10px rgba(25,230,255,.25); }
button.primary { border-color:var(--acc); color:var(--acc); } button.danger { border-color:var(--red); }
button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
select, input, textarea { background:#141a26; color:var(--fg); border:1px solid #324056; border-radius:6px; padding:7px; font: 13px -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
/* the app bar: the same on every page — its fonts are set here, not inherited from the page's body */
nav.top { display:flex; align-items:center; gap:18px; padding:0 18px; height:48px; background:rgba(0,0,0,.4); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter: blur(10px); font-family:var(--ui); font-size:14px; font-weight:600; }
nav.top .brand { margin-right:10px; text-decoration:none; display:inline-flex; align-items:center; }
nav.top .brand img { height:26px; width:auto; display:block; }
nav.top .brand:hover { opacity:.85; }
nav.top a.nl { font-family:var(--ui); color:var(--dim); letter-spacing:1.5px; text-transform:uppercase; font-size:12px; font-weight:700; padding:6px 2px; border-bottom:2px solid transparent; text-decoration:none; }
nav.top a.nl:hover { color:var(--fg); text-decoration:none; } nav.top a.nl.on { color:var(--acc); border-color:var(--acc); }
nav.top .sp { flex:1; }
nav.top #acct, nav.top .acct { font-family:var(--ui); font-size:14px; font-weight:600; color:var(--dim); } nav.top #acct b, nav.top .acct b { color:#fff; }
nav.top #acct a, nav.top .acct a { color:var(--acc); cursor:pointer; margin-left:8px; text-decoration:none; } nav.top #acct a:hover, nav.top .acct a:hover { color:#fff; }
/* a phone: the logo and the account on the first row, the page links on a second (the ::after breaks the row) */
@media (max-width: 640px) {
  nav.top { flex-wrap:wrap; height:auto; padding:6px 12px 0; gap:0 14px; }
  nav.top::after { content:''; order:1; flex-basis:100%; height:6px; }
  nav.top a.nl { order:2; letter-spacing:1px; font-size:11px; padding:8px 0 6px; }
  nav.top .brand img { height:22px; }
  nav.top #acct .acMe b, nav.top .acct .acMe b { max-width:96px; }
  table.data { display:block; overflow-x:auto; }       /* a wide table scrolls in its own box, not the page */
}
main { max-width:1180px; margin:0 auto; padding:22px 18px 60px; }
h1 { font-family:var(--disp); font-size:26px; letter-spacing:3px; margin:0 0 6px; color:var(--acc); text-shadow:0 0 18px rgba(245,224,26,.35); }
h2 { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin:28px 0 10px; }
p.lead { color:var(--dim); margin:0 0 18px; max-width:720px; }
.panel { border:1px solid rgba(245,224,26,.22); border-radius:10px; background:rgba(8,10,16,.75); padding:14px 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.tile { display:block; color:var(--fg); border:1px solid rgba(245,224,26,.25); border-radius:10px; background:rgba(8,10,16,.75); padding:18px 18px 16px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tile:hover { text-decoration:none; border-color:var(--acc); box-shadow:0 0 22px rgba(245,224,26,.18); transform: translateY(-2px); }
.tile .t { font-size:16px; font-weight:700; letter-spacing:1px; color:var(--acc); margin-bottom:6px; }
.tile .d { color:var(--dim); font-size:13px; }
.tile .n { margin-top:12px; font-size:22px; font-weight:800; } .tile .n small { font-size:11px; color:var(--dim); font-weight:400; margin-left:6px; }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th { text-align:left; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); padding:6px 8px; border-bottom:1px solid var(--line); }
table.data td { padding:7px 8px; border-bottom:1px solid rgba(35,42,56,.6); white-space:nowrap; }
table.data td.num, table.data th.num { text-align:right; font-variant-numeric: tabular-nums; }
table.data tr:hover td { background:rgba(255,255,255,.03); }
.bar { height:8px; border-radius:4px; background:#1a2030; overflow:hidden; min-width:80px; } .bar i { display:block; height:100%; background:var(--acc); }
.kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.kpi { border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:rgba(8,10,16,.6); }
.kpi b { display:block; font-size:24px; font-weight:800; } .kpi span { font-size:11px; color:var(--dim); letter-spacing:1px; text-transform:uppercase; }
.dim { color:var(--dim); } .small { font-size:12px; }
.col-Red { color:var(--red); } .col-Green { color:var(--green); } .col-Blue { color:var(--blue); } .col-Yellow { color:var(--yellow); }
.empty { color:var(--dim); padding:24px; text-align:center; border:1px dashed var(--line); border-radius:8px; }

/* ---- the game-menu look shared by the pages: cut corners, section rules, big numbers ---- */
h2.sec { font-family:var(--disp); font-size:12px; letter-spacing:4px; color:var(--acc); margin:34px 0 12px; display:flex; align-items:center; gap:12px; text-transform:uppercase; }
h2.sec::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(245,224,26,.5), transparent); }
.cut { --cut:14px; position:relative; background:rgba(245,224,26,.35); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cut::before { content:""; position:absolute; inset:1px; background:#0b0e15; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cut > * { position:relative; }
.cut.cyan { background:rgba(25,230,255,.35); }
.panel.cut { border:0; border-radius:0; box-shadow:none; padding:16px 18px; }
.kpi.cut { border:0; border-radius:0; padding:14px 16px; }
.kpi b { font-family:var(--ui); font-size:32px; font-weight:700; line-height:1.1; color:#fff; }
.kpi span { font-family:var(--disp); font-size:9px; letter-spacing:2px; }
.kpi.hot b { color:var(--green); text-shadow:0 0 12px rgba(67,217,138,.7); }
p.lead { font-family:var(--ui); font-size:16px; }
table.data { font-family:var(--ui); font-size:15px; }
table.data th { font-family:var(--disp); font-size:9px; letter-spacing:2px; }
table.data td.rk { font-family:var(--ui); font-weight:700; font-size:14px; color:var(--dim); width:34px; }
table.data td.nm { font-weight:700; color:#fff; }
.bar { background:#161b27; } .bar i { background:linear-gradient(90deg, var(--mag), var(--acc)); box-shadow:0 0 8px rgba(245,224,26,.5); }
.empty { font-family:var(--ui); font-size:15px; }
/* the podium: the first three of a leaderboard */
.podium { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-bottom:14px; }
.pod { --cut:16px; padding:18px 18px 16px; }
.pod .r { font-family:var(--ui); font-size:38px; font-weight:700; line-height:1; color:var(--k); text-shadow:0 0 16px var(--k); }
.pod .n { font-family:var(--disp); font-size:15px; font-weight:700; letter-spacing:1px; color:#fff; margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod .w { font-family:var(--ui); font-size:15px; color:var(--dim); margin-top:4px; } .pod .w b { color:#fff; font-size:18px; }
.pod .pc { font-family:var(--ui); font-size:28px; font-weight:700; color:var(--k); margin-top:6px; line-height:1; }
.pod .d { font-family:var(--ui); font-size:13px; color:var(--dim); margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod.p1 { --k:var(--acc); background:rgba(245,224,26,.55); } .pod.p2 { --k:var(--cyan); background:rgba(25,230,255,.45); } .pod.p3 { --k:var(--mag); background:rgba(255,43,214,.45); }

/* ---- scrollbars: thin, dark, the site's yellow on hover (the log, the lists, the dialogs) ---- */
* { scrollbar-width: thin; scrollbar-color: #2a3344 transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:#2a3344; border-radius:4px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(245,224,26,.55); background-clip:padding-box; }
*::-webkit-scrollbar-corner { background:transparent; }

/* the fan-work disclaimer, on every page (CD PROJEKT RED fan content guidelines) */
footer.fanwork { margin:28px auto 18px; padding:12px 0 0; border-top:1px solid var(--line); color:var(--dim); font-size:11px; line-height:1.5; text-align:center; max-width:820px; }