:root{--nacht:#11151c;--nacht2:#1a2230;--perk:#f3eadb;--perk2:#ebdfc9;--rook:#d9d2c5;
--w:#2e9be0;--v:#e8432a;--a:#8a5230;--l:#f5b81c;--d:#8693a0;--koper:#c98a3d;--staal:#2f5f73;
--serif:"Fraunces",Georgia,serif;--sans:"Space Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
--bg:var(--perk);--bg2:var(--perk2);--card:#fffaf0;--line:#0000001f;--tx:#11151c;--mut:#6b5f4d;--acc:#a82a17}
.dk{--bg:var(--nacht);--bg2:var(--nacht2);--card:#1a2230;--line:#ffffff1c;--tx:var(--perk);--mut:#9aa6b6;--acc:var(--l);background:var(--bg);color:var(--tx)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--perk);color:var(--tx);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--acc)}
img{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--koper);margin:0 0 10px}
.top{position:sticky;top:0;z-index:10;background:#11151cee;backdrop-filter:blur(8px);border-bottom:1px solid #ffffff14;color:var(--perk)}
.bar{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--perk);text-decoration:none;font:400 1.6rem var(--serif);letter-spacing:-.04em}
.brand b{font-weight:400;color:var(--l)}
nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav a{color:var(--rook);text-decoration:none;padding:6px 12px;border-radius:99px;font-size:.92rem}
nav a:hover,nav a.on{color:var(--perk);background:#ffffff18}
.burger{display:none;margin-left:auto;font-size:1.5rem;cursor:pointer;padding:4px 10px}
@media(max-width:860px){.burger{display:block}nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--nacht);border-bottom:1px solid #ffffff18;padding:10px 22px}#mt:checked~nav{display:flex}}
.hero{position:relative;overflow:hidden;padding:48px 0 44px;background:radial-gradient(800px 500px at 78% 30%,#2f5f7380,transparent 70%),radial-gradient(600px 400px at 5% 100%,#a82a1740,transparent 70%),var(--nacht);color:var(--perk)}
.hero svg.ring{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:min(380px,60vw);opacity:.45;color:var(--koper)}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem);margin:0 0 14px;font-weight:400;letter-spacing:-.04em}
.hero h1 em{font-style:italic;color:var(--l)}
.hero p.lead{max-width:520px;margin:0 0 20px;color:var(--rook);font-size:1.08rem;line-height:1.55}
.hero.small{padding:30px 0 26px}
.hero.small h1{font-size:clamp(1.9rem,5vw,2.8rem);margin:0 0 6px}
.hero.small p{color:var(--rook);margin:0;max-width:560px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 24px;border-radius:99px;background:var(--l);color:#11151c;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;color:var(--perk);border:1px solid #ffffff40}
.btn:hover{filter:brightness(1.08)}
section{padding:48px 0}
section.alt{background:var(--nacht);color:var(--perk);--bg:var(--nacht);--bg2:var(--nacht2);--card:#1a2230;--line:#ffffff1c;--tx:var(--perk);--mut:#9aa6b6;--acc:var(--l)}
h2{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 12px}
h3{margin:0 0 6px;font-size:1.35rem}
.sub{color:var(--mut);margin:0 0 30px;max-width:640px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card p{margin:6px 0 0;color:var(--mut);font-size:.96rem}
a.card{text-decoration:none;color:inherit;display:block;transition:transform .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);border-color:var(--koper)}
.el{border-top:5px solid var(--c)}
.W{--c:var(--w)}.V{--c:var(--v)}.A{--c:var(--a)}.L{--c:var(--l)}.D{--c:var(--d)}
.page-h{padding:0}
.prose{max-width:720px}
.prose p,.prose li{font-size:1.05rem}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%}
.matrix th,.matrix td{padding:10px 8px;text-align:center;border:1px solid var(--line)}
.matrix th{background:var(--bg2);font-weight:600}
.win{background:#2e9be033}.draw{background:#86939033}.lose{background:#e8432a2e}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 62px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--nacht);color:var(--l);display:grid;place-items:center;font:500 .95rem var(--mono)}
.lv td,.lv th{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}
.lv td:nth-child(3){font-family:var(--mono)}
.chip{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid #8886;vertical-align:-3px}
.filter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
input[type=search],select{padding:11px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--tx);font:inherit}
.tl{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.tl li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.tl .d{color:var(--mut);font:400 .85rem var(--mono);min-width:70px}
.tl .n{font:500 1.15rem var(--serif);min-width:220px}
.tl .r{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.tl .r a{padding:2px 10px;border:1px solid var(--line);border-radius:99px;font:400 .8rem var(--mono);text-decoration:none;color:var(--tx)}
.tl .r a:hover{border-color:var(--koper);background:var(--bg2)}
.dl{display:flex;justify-content:space-between;align-items:center;gap:14px}
.dl small{color:var(--koper);font-family:var(--mono)}
footer{background:var(--nacht);color:#9aa6b6;padding:44px 0;font:400 .85rem/1.7 var(--mono)}
footer a{color:var(--l)}footer p{margin:4px 0}
.kaart{width:100%;max-width:210px;aspect-ratio:493/753;object-fit:cover;border-radius:12px;display:block;margin:0 auto 16px;box-shadow:0 14px 30px #0006}
.lvl{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 8px}
.lvl summary{display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none;flex-wrap:wrap}
.lvl summary::-webkit-details-marker{display:none}
.lvl summary::before{content:'▸';color:var(--mut)}.lvl[open] summary::before{content:'▾'}
.lvl b{font-family:var(--serif);font-weight:500;font-size:1.1rem}
.nm{font:500 .8rem var(--mono);letter-spacing:.08em;color:var(--koper)}
.m{color:var(--mut);font:400 .82rem var(--mono)}.r{margin-left:auto}
.lvl .tw{border:0;border-top:1px solid var(--line);border-radius:0;overflow:visible}
.lvl td{padding:6px 14px}.lvl td:first-child{color:var(--mut);width:48px}
.lvl td:nth-child(3){white-space:nowrap;width:190px;min-width:150px}
.btn.dark{background:var(--nacht);color:var(--perk);border:0;cursor:pointer;font:700 1rem var(--sans)}
.btn.alt-d{background:transparent;color:var(--tx);border:1px solid var(--line);cursor:pointer;font:700 1rem var(--sans)}
.card.narrow{max-width:460px;margin:0 auto}
label{display:block;margin:0 0 14px;font-size:.9rem;color:var(--mut)}
label input,label select{display:block;width:100%;margin-top:4px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--tx);font:inherit}
.err{color:#a82a17;min-height:1.2em;margin:0 0 10px}.hint{color:var(--mut);margin:0 0 14px;min-height:1.4em}
.ok{color:#1b6e3a;font-weight:700}.bad{color:#a82a17;font-weight:700}
button.link{background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.who{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.who-r{margin-left:auto;display:flex;gap:14px}
.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-bottom:10px}
.big{font:500 3rem/1 var(--serif)}
.table{background:var(--nacht);color:var(--perk);border-radius:18px;padding:18px 16px 22px;--mut:#9aa6b6;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 90px #0008}
.table .score{margin-bottom:14px}.table .m{color:var(--mut)}
.strip{display:grid;grid-template-columns:minmax(3.2ch,auto) repeat(13,1fr);gap:clamp(2px,.6vw,8px);margin:6px 0 4px}
.strip .col{background:none!important;display:flex;flex-direction:column;align-items:center;gap:4px}
.strip .pc{width:100%;aspect-ratio:493/753;border-radius:clamp(2px,.5vw,6px);border:1px dashed #ffffff22;overflow:hidden}
.strip .pc img{width:100%;height:100%;object-fit:cover;display:block}
.strip .col i{width:100%;height:7px;border-radius:3px;background:#ffffff1a}
.strip .win i{background:#19ff5c;box-shadow:0 0 8px #19ff5c}.strip .loss i{background:#ff1f1f;box-shadow:0 0 8px #ff1f1f}.strip .draw i{background:#8693a0}
.strip .win .pc:last-child,.strip .loss .pc:first-child{box-shadow:0 0 0 2px #19ff5c}.strip .loss .pc:last-child,.strip .win .pc:first-child{opacity:.55}
.strip .loss .pc:first-child{box-shadow:0 0 0 2px #ff1f1f;opacity:1}.strip .loss .pc:last-child{box-shadow:none;opacity:.55}
.strip .win .pc:first-child{box-shadow:none}
.strip .col.sc .pc{aspect-ratio:auto;flex:1;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;padding-right:4px}
.strip .col.sc b{font:500 clamp(1.8rem,5vw,3rem)/1 var(--serif)}.strip .col.sc small{font:500 .6rem var(--mono);color:var(--mut);white-space:nowrap}
.strip .col.sc i{visibility:hidden}
.strip .col.next .pc:last-child{border-color:var(--l)}
.lbl{display:flex;justify-content:space-between;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.fan{--cw:clamp(46px,9.5vw,112px);display:flex;justify-content:center;align-items:flex-end;padding:60px 0 10px;min-height:calc(var(--cw)*1.53 + 50px);margin-top:6px;border-top:1px solid #ffffff14}
.fan .hcard{width:var(--cw);flex:none;margin-left:calc(var(--cw)*var(--ov)*-1);rotate:var(--rot);translate:0 var(--ty);transform-origin:50% 140%;transition:translate .15s}
.fan .hcard:first-child{margin-left:0}
.fan .hcard:hover:not(:disabled),.fan .hcard:focus-visible{translate:0 calc(var(--ty) - 22px);transform:none;z-index:50}
.fanrow{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:8px;border-top:1px solid #ffffff14;margin-top:6px}
.fanrow .fan{border-top:0;margin-top:0}.fanrow .sc{padding-bottom:14px;min-width:2.2ch}.fanrow .sc.r{text-align:right}.fanrow .sc .m{font-size:.68rem;max-width:11ch}.fanrow .sc.r .m{margin-left:auto}
.fan .hcard.sel,.fan .hcard.sel:hover:not(:disabled){rotate:0deg;scale:1.35;translate:0 -70px;z-index:100!important;filter:drop-shadow(0 0 14px #c98a3dcc)}
@media (orientation:landscape) and (max-height:520px){
.top{position:static}.hero.small{display:none}section{padding:12px 0}
.who{gap:10px}.who h2{font-size:1.2rem}.who .eyebrow{display:none}
.table{margin-top:8px!important;padding:8px 10px 10px}.table .score{margin-bottom:2px}
.strip{--sh:15vh;width:min(100%,calc(var(--sh)*.655*13 + 3.2ch + 120px));margin:2px auto}
.strip .pc{aspect-ratio:auto;height:var(--sh)}.strip .col.sc .pc{height:var(--sh)}
.fanrow,.fan{--cw:13vh}.fan{padding:10px 0 4px;min-height:calc(var(--cw)*1.53 + 6px);margin-top:0}
.fan .hcard.sel,.fan .hcard.sel:hover:not(:disabled){scale:1.5;translate:0 -50px}
.last{margin-top:0;font-size:.8rem}.last img{width:20px}.jijl{display:none}.fan{padding-top:0!important}.table p.m,.table p:has(#resign){display:none}
.who-r{margin-left:auto}}
.fan.busy{pointer-events:none;opacity:.7}
.last{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;font-size:.95rem}
.last img{width:34px;aspect-ratio:493/753;object-fit:cover;border-radius:5px;display:block}
.last .res{background:none;font:500 1rem var(--serif)}.last .res.win{color:#19ff5c}.last .res.loss{color:#ff4a3d}.last .res.draw{color:#b6c0cc}
.hcard{position:relative;border:0;padding:0;background:none;cursor:pointer;border-radius:10px}
.hcard:disabled{opacity:.28;cursor:default}
.hcard img{width:100%;aspect-ratio:493/753;object-fit:cover;border-radius:10px;display:block;box-shadow:0 8px 18px #0007}
.el-b{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:3px;border-radius:50%;font:500 .72rem var(--mono);color:#fff}
.el-b.W{background:var(--w)}.el-b.V{background:var(--v)}.el-b.A{background:var(--a)}.el-b.L{background:var(--l);color:#11151c}.el-b.D{background:var(--d);color:#11151c}
.moves{white-space:nowrap}
.onl{font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--koper);border:1px solid var(--koper);border-radius:99px;padding:0 7px;margin-left:4px}
.grid-f{display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.grid-f .btn{margin-bottom:14px}
.af{display:grid;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nm{font:500 .8rem var(--mono);letter-spacing:.08em;color:var(--koper)}
input.sm{width:100px}.lv td input{padding:6px 10px;border-radius:8px;border:1px solid var(--line);font:inherit;width:100%;min-width:90px}.nw{white-space:nowrap}
.msg{color:var(--mut)}

.quote{font:italic 400 clamp(1.5rem,3.4vw,2.3rem)/1.25 var(--serif);max-width:760px}
.ringbadge{width:56px;color:var(--koper);margin-bottom:10px}