:root { --display:"Anton", Impact, "Arial Narrow", sans-serif; --head-font:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-family:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme:dark; --h:220; --s:10%; --accent-s:12%; --on-accent:#fff; --ok:#58b583;
  --bg:hsl(var(--h) var(--s) 7%); --panel:hsl(var(--h) var(--s) 11%); --panel2:hsl(var(--h) var(--s) 17%); --line:hsl(var(--h) var(--s) 25%); --ink:hsl(var(--h) 15% 95%); --muted:hsl(var(--h) 10% 70%); --head:hsl(var(--h) var(--s) 4%); --field:hsl(var(--h) var(--s) 6%); --card2:hsl(var(--h) var(--s) 9%);
  --accent:hsl(var(--h) var(--accent-s) 42%); --accent2:hsl(var(--h) var(--accent-s) 50%); --link:hsl(var(--h) calc(var(--accent-s) + 20%) 78%); --tint:hsl(var(--h) calc(var(--s) + 8%) 20%); --vamp-row:hsl(var(--h) calc(var(--s) + 10%) 15%); --self:#000;
  --alert-bg:#3d1a24; --alert-line:#7a3243; --alert-ink:#ffb9c6; --good-bg:#183626; --good-ink:#8ad8ad; }
:root[data-mode="light"] { color-scheme:light;
  --bg:hsl(var(--h) calc(var(--s) + 10%) 96%); --panel:#fff; --panel2:hsl(var(--h) calc(var(--s) + 8%) 91%); --line:hsl(var(--h) var(--s) 83%); --ink:hsl(var(--h) 25% 12%); --muted:hsl(var(--h) 10% 36%); --head:#fff; --field:#fff; --card2:hsl(var(--h) calc(var(--s) + 10%) 98%);
  --accent:hsl(var(--h) var(--accent-s) 38%); --accent2:hsl(var(--h) var(--accent-s) 30%); --link:hsl(var(--h) calc(var(--accent-s) + 10%) 30%); --tint:hsl(var(--h) calc(var(--s) + 25%) 90%); --vamp-row:hsl(var(--h) calc(var(--s) + 25%) 94%); --self:hsl(var(--h) 15% 25%);
  --alert-bg:#fde8ec; --alert-line:#e5a3b0; --alert-ink:#8f1d36; --good-bg:#def3e7; --good-ink:#17643c; }
[data-color="graphite"] { --h:220; --s:8%; --accent-s:14%; }
[data-color="ocean"] { --h:212; --s:30%; --accent-s:70%; }
[data-color="teal"] { --h:180; --s:26%; --accent-s:62%; }
[data-color="forest"] { --h:145; --s:20%; --accent-s:50%; }
[data-color="crimson"] { --h:352; --s:22%; --accent-s:68%; }
[data-color="royal"] { --h:262; --s:28%; --accent-s:62%; }
[data-color="rose"] { --h:325; --s:22%; --accent-s:58%; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; } .swatch { display:flex; align-items:center; gap:8px; } .swatch.on { outline:2px solid var(--link); outline-offset:1px; } .swatch .dot { width:18px; height:18px; border-radius:50%; background:hsl(var(--h) var(--accent-s) 45%); border:1px solid var(--line); }
a.btn { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.4; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
header { position:sticky; top:0; z-index:5; background:var(--head); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:12px; padding:10px 16px; max-width:1180px; margin:auto; }
.brand { font-weight:800; letter-spacing:.2px; color:var(--ink); } .grow { flex:1; min-width:0; }
nav { display:flex; gap:4px; overflow-x:auto; padding:0 12px 8px; max-width:1180px; margin:auto; scrollbar-width:none; }
nav a { padding:6px 11px; border-radius:7px; color:var(--muted); white-space:nowrap; font-weight:600; font-size:14px; } nav a.on { background:var(--panel2); color:var(--ink); } nav a:hover { text-decoration:none; color:var(--ink); }
main { max-width:1180px; margin:auto; padding:16px; }
h1 { font-size:24px; margin:0 0 4px; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:14px; margin-bottom:14px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); align-items:start; }
.muted { color:var(--muted); } .small { font-size:13px; } .right { text-align:right; } .num { font-variant-numeric:tabular-nums; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tw { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { text-align:left; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; } th,td { padding:7px 6px; border-bottom:1px solid var(--line); } tr:last-child td { border-bottom:0; }
button,.btn { font:inherit; font-weight:600; background:var(--panel2); color:var(--ink); border:1px solid var(--line); padding:6px 11px; border-radius:7px; cursor:pointer; min-height:34px; } button:hover { border-color:var(--muted); } button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } button.primary:hover { background:var(--accent2); } button:disabled { opacity:.45; cursor:not-allowed; } button.sm { padding:3px 8px; min-height:28px; font-size:13px; }
input,select,textarea { font:inherit; background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:6px 9px; min-height:34px; max-width:100%; } textarea { width:100%; min-height:90px; } input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
label.f { display:block; margin-bottom:9px; font-size:13px; color:var(--muted); } label.f input,label.f select { display:block; margin-top:3px; width:100%; color:var(--ink); }
.pill { display:inline-block; padding:1px 7px; border-radius:99px; font-size:12px; font-weight:700; background:var(--panel2); color:var(--muted); white-space:nowrap; } .pill.red { background:var(--alert-bg); color:var(--alert-ink); } .pill.gold { background:var(--tint); color:var(--link); } .pill.green { background:var(--good-bg); color:var(--good-ink); } .pill.warn { background:var(--alert-bg); color:var(--alert-ink); }
.game { border:1px solid var(--line); border-radius:9px; padding:9px 10px; margin-bottom:8px; background:var(--card2); } .game .side { display:flex; justify-content:space-between; gap:8px; padding:2px 0; } .game .win { font-weight:800; } details summary { cursor:pointer; color:var(--muted); font-size:13px; padding-top:4px; }
.banner { background:var(--tint); border:1px solid var(--accent); padding:10px 13px; border-radius:9px; margin-bottom:14px; } .banner.warn { background:var(--alert-bg); border-color:var(--alert-line); } .banner.quiet { background:var(--panel2); border-color:var(--line); }
.list .it { display:flex; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap; } .list .it:last-child { border-bottom:0; }
#toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line); padding:9px 15px; border-radius:9px; opacity:0; pointer-events:none; transition:opacity .2s; max-width:90vw; z-index:20; } #toast.show { opacity:1; } #toast.bad { background:var(--alert-bg); border-color:var(--alert-line); }
 .pos { font-weight:700; width:34px; display:inline-block; color:var(--muted); font-size:12px; }
.feature { padding:10px 0; border-bottom:1px solid var(--line); } .feature:last-child { border:0; } .feature .fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 12px; margin-top:8px; } .switch { display:flex; gap:8px; align-items:flex-start; } .switch input { min-height:0; margin-top:3px; }
@media (max-width:560px){ main { padding:12px; } h1 { font-size:21px; } .grid { grid-template-columns:minmax(0,1fr); } }
th { white-space:nowrap; } td.num { white-space:nowrap; }

.matrix table { width:auto; border-collapse:collapse; } .matrix th,.matrix td { padding:0; border:1px solid var(--line); } .matrix .vert { height:128px; vertical-align:bottom; font-size:11px; text-transform:none; letter-spacing:0; min-width:20px; } .matrix .vert span { writing-mode:vertical-rl; transform:rotate(180deg); padding:4px 2px; white-space:nowrap; display:inline-block; }
.matrix .rowh { font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink); white-space:nowrap; padding:2px 8px 2px 2px; position:sticky; left:0; background:var(--panel); font-weight:500; } .matrix td.c { width:20px; height:20px; text-align:center; font-weight:800; font-size:13px; color:var(--alert-ink); } .matrix td.c[data-a] { cursor:pointer; } .matrix td.c[data-a]:hover { background:var(--panel2); } .matrix td.self { background:var(--self); } .matrix tr.vamp .rowh { color:var(--link); } .matrix tr.vamp td.c:not(.x) { background:var(--vamp-row); }

.wl { display:inline-block; min-width:26px; text-align:center; padding:2px 7px; border-radius:6px; font-weight:800; font-size:13px; } .wl.win { background:var(--good-bg); color:var(--good-ink); } .wl.loss { background:var(--alert-bg); color:var(--alert-ink); }
.tradegrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:10px; } .tradeside { min-width:0; border:1px solid var(--line); border-radius:9px; padding:10px; background:var(--card2); } .tradeside h3 { margin-top:0; text-transform:none; letter-spacing:0; color:var(--ink); font-size:15px; } .tradeside h3:not(:first-child) { margin-top:12px; }
.tick { display:flex; gap:8px; align-items:flex-start; padding:5px 2px; cursor:pointer; } .tick input { min-height:0; margin-top:3px; } .tick:hover { background:var(--panel2); border-radius:5px; }

h1 { font-family:var(--display); font-weight:400; font-size:34px; letter-spacing:.4px; text-transform:uppercase; line-height:1.1; margin-bottom:6px; } h2 { font-family:var(--head-font); font-weight:700; font-size:18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } nav a,.brand { font-family:var(--head-font); }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:17px; } .brand:hover { text-decoration:none; } .logo { width:26px; height:26px; flex:none; }
.ico { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:9px; background:var(--tint); color:var(--link); flex:none; } .ico svg { width:19px; height:19px; }
button.wide { width:100%; min-height:44px; font-size:16px; margin-top:4px; }
/* Sign-in: the scene and wordmark beside the form */
body.auth main { max-width:none; padding:0; } body.auth #top { display:none; }
.authwrap { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(360px, 1fr); min-height:100vh; min-height:100dvh; }
.authart { position:relative; overflow:hidden; background:hsl(var(--h) 55% 7%); color:#fff; } .scene { position:absolute; inset:0; width:100%; height:100%; display:block; }
.authcopy { position:relative; padding:44px 48px; }
.wordmark { font-family:var(--display); font-weight:400; font-size:clamp(58px, 8.5vw, 128px); line-height:.98; text-transform:uppercase; margin:0; letter-spacing:1px; color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.45); } .wordmark span { display:block; }
.weird { color:hsl(var(--h) 90% 80%); } .weird i { display:inline-block; font-style:normal; transform-origin:50% 70%; } .weird i:nth-child(1) { transform:rotate(-7deg) translateY(3px); } .weird i:nth-child(2) { transform:rotate(5deg) translateY(-6px) scale(1.06); } .weird i:nth-child(3) { transform:rotate(-4deg) translateY(5px) scaleY(1.14); } .weird i:nth-child(4) { transform:rotate(9deg) translateY(-3px); } .weird i:nth-child(5) { transform:rotate(-10deg) translateY(4px) scale(1.1); }
.tag { font-family:var(--head-font); font-size:clamp(16px, 1.6vw, 21px); margin:20px 0 0; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.authcard { display:flex; align-items:center; justify-content:center; padding:32px 24px; background:var(--bg); } .authinner { width:100%; max-width:370px; } .authinner h2 { font-size:28px; margin:12px 0 4px; } .authlogo .logo { width:50px; height:50px; } .authinner form { margin-top:18px; } .authlink { margin-top:14px; text-align:center; } .showpw { margin:-2px 0 12px; color:var(--muted); } input[readonly] { opacity:.75; }
/* Home: a shorter view of the same scene */
.hero { position:relative; overflow:hidden; border-radius:14px; min-height:238px; margin-bottom:14px; color:#fff; background:hsl(var(--h) 55% 7%); display:flex; align-items:flex-end; } .hero .scene { opacity:.97; } .hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,3,9,.82) 0%, rgba(4,3,9,.48) 48%, rgba(4,3,9,0) 72%); }
.herocopy { position:relative; z-index:1; padding:26px 28px; max-width:640px; } .hero h1 { font-size:clamp(38px, 5.2vw, 62px); margin:0 0 8px; color:#fff; } .eyebrow { font-family:var(--head-font); font-weight:700; letter-spacing:1.4px; text-transform:uppercase; font-size:13px; margin:0 0 6px; color:hsl(var(--h) 90% 86%); } .herostatus { margin:0; font-size:16px; color:#fff; }
.homecards .card { border-top:3px solid var(--accent2); } .homecards .card a { font-weight:700; }
@media (max-width:820px){ .authwrap { grid-template-columns:minmax(0,1fr); } .authart { min-height:330px; } .authcopy { padding:28px 22px; } .wordmark { font-size:clamp(48px, 15vw, 82px); } .authcard { padding:28px 18px 44px; } }
@media (max-width:560px){ .hero { min-height:208px; } .hero::after { background:linear-gradient(180deg, rgba(4,3,9,.25) 0%, rgba(4,3,9,.8) 80%); } .herocopy { padding:18px; } .brand { font-size:15px; } }

.authart .scene.wide { display:none; } .hero .scene { opacity:1; }
.banner.quiet { background:var(--panel2); border-color:var(--line); }
@media (max-width:820px){ .authart .scene.tall { display:none; } .authart .scene.wide { display:block; } .authart::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,3,9,.62), rgba(4,3,9,.1) 80%); } .authcopy { z-index:1; } }
@media (max-width:640px){ .bar { gap:8px; padding:8px 12px; } .brand span { display:none; } #lpick { flex:1; min-width:0; } .bar .grow { display:none; } }

.authmsg { margin-top:12px; } .authmsg.bad { background:var(--alert-bg); color:var(--alert-ink); border:1px solid var(--alert-line); padding:9px 11px; border-radius:8px; }

.gameline { font-size:12.5px; color:var(--muted); margin:2px 0 0 38px; } .gameline b { color:var(--alert-ink); font-weight:700; } .gameline .sep { opacity:.6; }

.teamcard { padding:0; } .teamcard > summary { padding:12px 14px; cursor:pointer; color:var(--ink); font-size:15px; } .teamcard > summary a { margin-left:8px; } .teamcard h3 { margin:6px 14px 2px; } .teamcard table { margin:0 14px 8px; width:calc(100% - 28px); }
.widecard { grid-column:1 / -1; } .protect { border:1px solid var(--accent2); } .ticks { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0 10px; }
.tradeside .ticks { grid-template-columns:minmax(0, 1fr); } .homecards .card p { margin:6px 0; }

.homecards .alertcard { border-color:var(--alert-line); border-top-color:var(--alert-ink); } .alertcard .ico { background:var(--alert-bg); color:var(--alert-ink); }

.immune { margin-top:5px; font-weight:400; }