:root{--bg:#0a0c0f;--panel:#111419;--line:#22272f;--text:#ece7df;--muted:#8d939c;--crimson:#d4372e;--heatstrike:#ff8a3d;--pillarfall:#d9b15a;--lastbridge:#37d3e8;--chainhold:#ff4b3a;--wowaddons:#e3bf6a;--display:"Anton", Impact, "Arial Narrow", sans-serif;--label:"Barlow Condensed", "Arial Narrow", sans-serif;--body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;--bar:64px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px)}html,body{background:var(--bg);color:var(--text);font:16px/1.5 var(--body);margin:0}a{color:inherit}.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}@media (width<=640px){.wrap{padding:0 16px}}.topbar{z-index:20;height:var(--bar);backdrop-filter:blur(14px);background:#0a0c0fd1;border-bottom:1px solid #ffffff0f;align-items:center;gap:36px;padding:0 28px;display:flex;position:fixed;inset:0 0 auto}.topbar .brand{line-height:0;display:flex}.topbar .brand img{width:auto;height:26px}.topbar .brand .mark{height:30px;display:none}.topbar nav{gap:28px;height:100%;display:flex}.topbar nav a{font:600 15px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);align-items:center;text-decoration:none;transition:color .14s;display:flex;position:relative}.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--text)}.topbar nav a[aria-current]:after{content:"";background:var(--crimson);height:3px;position:absolute;bottom:0;left:0;right:0}.account{align-items:center;margin-left:auto;display:flex}.signin-button,.me summary{background:var(--crimson);color:#fff;height:38px;font:700 14px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:0;border-radius:6px;align-items:center;gap:8px;padding:0 20px;transition:filter .14s;display:inline-flex}.signin-button:hover{filter:brightness(1.12)}.me{position:relative}.me summary{border:1px solid var(--line);color:var(--text);text-transform:none;letter-spacing:.04em;background:0 0;max-width:180px;font-size:16px;list-style:none}.me summary::-webkit-details-marker{display:none}.me summary:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);width:7px;height:7px;transform:translateY(-2px)rotate(45deg)}.me[open] summary{border-color:var(--muted)}.me .menu{border:1px solid var(--line);background:var(--panel);border-radius:8px;flex-direction:column;min-width:190px;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 18px 40px -12px #000000b3}.me .menu a,.me .menu button{color:var(--text);font:600 14px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:10px 12px;text-decoration:none}.me .menu a:hover,.me .menu button:hover{background:#ffffff0f}@media (width<=640px){.topbar{gap:16px;padding:0 16px}.topbar .brand .logo{display:none}.topbar .brand .mark{display:block}.topbar nav{gap:16px}.topbar nav a{letter-spacing:.1em;font-size:14px}.signin-button,.me summary{padding:0 14px;font-size:13px}.me summary{text-overflow:ellipsis;white-space:nowrap;max-width:120px;line-height:36px;display:block;overflow:hidden}.me summary:after{display:none}}.button{height:48px;color:var(--text);font:700 16px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:#0a0c0f59;border:1px solid #ece7df59;border-radius:6px;justify-content:center;align-items:center;padding:0 28px;text-decoration:none;transition:filter .14s,border-color .14s,transform .14s;display:inline-flex}.button:hover{border-color:var(--text)}.button.primary{background:var(--crimson);color:#fff;border:0}.button.primary:hover{filter:brightness(1.12)}.button.play{background:var(--accent);color:#111;border:0;height:42px}.button.play:hover{filter:brightness(1.1)}button.link{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}button.link:hover{color:var(--text)}.chip{background:var(--crimson);color:#fff;height:22px;font:700 12px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;border-radius:4px;align-items:center;margin-left:10px;padding:0 8px;display:inline-flex}.hero{isolation:isolate;min-height:min(86vh,760px);padding:calc(var(--bar) + 40px) 0 72px;align-items:center;display:flex;position:relative;overflow:hidden}.hero .backdrop{object-fit:cover;object-position:75% 30%;z-index:-2;width:100%;height:100%;position:absolute;inset:0}.hero:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(90deg, var(--bg) 0%, #0a0c0fbf 30%, transparent 60%), linear-gradient(0deg, var(--bg) 0%, transparent 30%);position:absolute;inset:0}.hero h1{max-width:11ch;font:400 clamp(52px, 7.6vw, 112px)/.94 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0}.hero p{color:#c9c4bc;max-width:34ch;margin:22px 0 0;font-size:clamp(17px,1.45vw,20px)}.hero .actions{flex-wrap:wrap;gap:14px;margin-top:34px;display:flex}.page-hero{min-height:min(58vh,520px);padding-bottom:48px}.page-hero h1{max-width:none;font-size:clamp(56px,9vw,128px)}@media (width<=760px){.hero{align-items:flex-end;min-height:88vh}.hero .backdrop{object-position:72% 40%;height:66%}.hero:before{background:linear-gradient(0deg, var(--bg) 36%, #0a0c0f99 48%, transparent 64%)}.page-hero{min-height:62vh}}.section{padding-top:72px}.section:last-child{padding-bottom:24px}.kicker{color:var(--crimson);font:700 14px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px}.section>h2{font:400 clamp(40px, 5vw, 64px)/1 var(--display);text-transform:uppercase;margin:0 0 32px}.games{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;display:grid}@media (width<=1100px){.games{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto}}@media (width<=640px){.games{grid-template-columns:1fr;max-width:440px}}.game{flex-direction:column;gap:10px;display:flex}.cover{aspect-ratio:2/3;background:var(--panel);outline:1px solid var(--line);border-radius:8px;transition:transform .18s,box-shadow .18s,outline-color .18s;display:block;overflow:hidden}.cover img{object-fit:cover;width:100%;height:100%;transition:transform .4s;display:block}.cover:hover,.cover:focus-visible{box-shadow:0 24px 60px -18px var(--accent);outline-color:var(--accent);transform:translateY(-6px)}.cover:hover img{transform:scale(1.03)}.game h3{color:var(--accent);font:700 22px/1 var(--label);letter-spacing:.14em;margin:10px 0 0}.genre{color:var(--muted);margin:0}.modes{border-top:1px solid var(--line);margin:4px 0 6px;padding:0;list-style:none}.modes li{border-bottom:1px solid var(--line);font:600 16px/1.3 var(--label);letter-spacing:.04em;justify-content:space-between;gap:12px;padding:9px 0;display:flex}.modes .standing{color:var(--muted);text-align:right;font-weight:500}.modes .standing.ranked{color:var(--accent);font-weight:700}.modes li.open{padding:0}.modes li.open a{width:100%;color:var(--text);justify-content:space-between;gap:12px;padding:9px 0;text-decoration:none;transition:color .14s;display:flex}.modes li.open a:hover{color:var(--accent)}.modes li.open a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.modes .note{color:var(--muted);text-align:right;font-weight:500;transition:color .14s}.game .play{align-self:flex-start}.boards{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;display:grid}@media (width<=1100px){.boards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto}}@media (width<=640px){.boards{grid-template-columns:1fr;max-width:440px}}.board{border:1px solid var(--line);border-top:3px solid var(--accent);background:var(--panel);border-radius:8px;padding:20px}.board-head{justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;display:flex}.board h3{color:var(--accent);font:700 17px/1 var(--label);letter-spacing:.14em;margin:0}.tabs,.mode-tabs{flex-wrap:wrap;gap:6px;display:flex}.tabs button,.mode-tabs button{color:var(--muted);font:600 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;padding:6px 10px}.tabs button.on,.mode-tabs button.on{border-color:var(--line);color:var(--text);background:#ffffff0d}.board ol{margin:0;padding:0;list-style:none}.board li{border-top:1px solid var(--line);grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:8px 0;display:grid}.board .pos{color:var(--muted);font:700 15px/1 var(--label)}.board .who{align-items:center;gap:8px;min-width:0;display:flex}.board .who a{text-overflow:ellipsis;white-space:nowrap;text-decoration:none;overflow:hidden}.board .who a:hover{text-decoration:underline}.board .score{color:var(--muted);font:600 15px/1 var(--label)}.board li.me .who a,.board li.me .score{color:var(--accent);font-weight:700}.board .empty{color:var(--muted);margin:12px 0 0;font-size:14px}.board .more{color:var(--text);font:700 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;margin-top:14px;text-decoration:none;display:inline-block}.board .more:after{content:" →";color:var(--accent)}.emblem{object-fit:contain;filter:drop-shadow(0 2px 6px #0009);flex:none}.emblem.none{width:24px;display:inline-block}.picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-120px;display:grid;position:relative}.game-tile{border:2px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;height:128px;padding:0;transition:border-color .16s,transform .16s;position:relative;overflow:hidden}.game-tile img{object-fit:cover;object-position:70% 40%;opacity:.55;width:100%;height:100%;transition:opacity .16s;position:absolute;inset:0}.game-tile span{color:#fff;font:400 30px/1 var(--display);letter-spacing:.02em;text-shadow:0 2px 12px #000c;position:absolute;bottom:14px;left:18px}.game-tile:hover{transform:translateY(-2px)}.game-tile:hover img,.game-tile.on img{opacity:1}.game-tile.on{border-color:var(--accent);box-shadow:0 16px 40px -16px var(--accent)}@media (width<=760px){.picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:-40px}.game-tile{height:64px}.game-tile span{font-size:15px;bottom:8px;left:8px}}.mode-tabs{margin:28px 0 0}.mode-tabs button{padding:10px 16px;font-size:15px}.count{color:var(--muted);font:600 14px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 10px}table.ladder{border-collapse:collapse;width:100%;font:600 17px/1.2 var(--label);letter-spacing:.03em}.ladder th{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--line);padding:12px 14px;font-size:13px}.ladder td{border-bottom:1px solid var(--line);vertical-align:middle;padding:10px 14px}.ladder th:nth-child(n+4),.ladder td:nth-child(n+4){text-align:right}.ladder td:first-child{width:56px;color:var(--muted);font-size:18px}.ladder td:nth-child(2) a{text-decoration:none}.ladder td:nth-child(2) a:hover{text-decoration:underline}.ladder td:nth-child(3){color:#c9c4bc;align-items:center;gap:10px;display:flex}.ladder.timed td:nth-child(3){display:table-cell}.ladder tr.podium td:first-child{color:var(--accent);font:400 24px/1 var(--display)}.ladder tbody tr:hover{background:#ffffff08}.ladder tr.me{background:color-mix(in srgb, var(--accent) 12%, transparent)}.ladder tr.me td:nth-child(2) a{color:var(--accent)}.ladder tr.gap td{color:var(--muted);text-align:center}@media (width<=640px){table.ladder{font-size:15px}.ladder th:nth-child(5),.ladder td:nth-child(5),.ladder th:nth-child(6),.ladder td:nth-child(6){display:none}.ladder td,.ladder th{padding:10px 8px}.ladder td:nth-child(3){font-size:0}.ladder.timed td:nth-child(3){font-size:inherit}}.empty-state{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.empty-state p{color:#c9c4bc;flex-basis:100%;margin:24px 0 4px;font-size:18px}.player-hero .wrap{align-items:center;gap:28px;display:flex}.player-hero .best{filter:drop-shadow(0 10px 30px #000000b3);width:clamp(110px,14vw,170px);height:auto}.player-hero h1{overflow-wrap:anywhere;font-size:clamp(56px,9vw,120px)}.player-hero .actions{align-items:center;margin-top:22px}@media (width<=640px){.player-hero .wrap{flex-direction:column;align-items:flex-start;gap:8px}}.profile{flex-direction:column;gap:40px;display:flex}.profile>p{color:#c9c4bc;font-size:18px}.game-block .strip{border:1px solid var(--line);border-bottom:3px solid var(--accent);border-radius:8px 8px 0 0;height:120px;text-decoration:none;display:block;position:relative;overflow:hidden}.game-block .strip img{object-fit:cover;object-position:70% 40%;width:100%;height:100%;position:absolute;inset:0}.game-block .strip:before{content:"";z-index:1;background:linear-gradient(90deg,#0a0c0fd9,#0000 60%);position:absolute;inset:0}.game-block .strip span{z-index:2;font:400 40px/1 var(--display);color:#fff;position:absolute;bottom:16px;left:22px}.mode-cards{border:1px solid var(--line);background:var(--line);border-top:0;border-radius:0 0 8px 8px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.mode-card{background:var(--panel);align-items:center;gap:16px;padding:20px;display:flex}@media (width<=640px){.mode-cards{grid-auto-flow:row}}.mode-card p{margin:0}.mode-card .mode{color:var(--muted);font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase}.mode-card .rank{font:700 22px/1.1 var(--label);letter-spacing:.03em;color:var(--accent);margin-top:6px}.mode-card .place{color:#c9c4bc;margin-top:6px;font-size:14px}.mode-card .place a{color:var(--text);font-weight:600}.mode-card .emblem.none{border:2px dashed var(--line);border-radius:50%;width:72px;height:72px}.mode-card.never{flex-direction:column;align-items:flex-start;gap:6px}.mode-card.never .rank{color:var(--muted)}.mode-card.never .button{margin-top:8px}.site-footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;align-items:center;gap:18px 36px;margin-top:96px;padding:40px 28px 48px;font-size:14px;display:flex}.site-footer .brand img{opacity:.85;width:auto;height:22px;display:block}.site-footer nav{gap:24px;display:flex}.site-footer nav a{color:var(--muted);font:600 14px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}.site-footer nav a:hover{color:var(--text)}.site-footer p{margin:0 0 0 auto}.site-footer .games-version{letter-spacing:.02em;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}@media (width<=640px){.site-footer{padding:32px 16px 40px}.site-footer p{margin:0}}.privacy{max-width:680px;margin:0 auto;padding:40px 16px 64px}.privacy h1{font-size:22px}.privacy h2{margin-top:28px;font-size:16px}.privacy p,.privacy li{color:#c9c6c1}.privacy a{color:var(--text)}dialog.signin{border:1px solid var(--line);background:var(--panel);width:min(420px,100vw - 32px);color:var(--text);border-radius:10px;padding:0}dialog.signin::backdrop{backdrop-filter:blur(4px);background:#000000a6}dialog.signin form{flex-direction:column;gap:14px;padding:26px;display:flex;position:relative}dialog.signin h2{font:400 30px/1 var(--display);text-transform:uppercase;margin:0}dialog.signin p{color:#c9c6c1;margin:0}dialog.signin label{color:var(--muted);font:600 13px/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;flex-direction:column;gap:6px;display:flex}dialog.signin input{border:1px solid var(--line);background:var(--bg);color:var(--text);font:16px var(--body);letter-spacing:normal;text-transform:none;border-radius:6px;padding:12px}dialog.signin input:focus{outline:2px solid var(--crimson);outline-offset:1px}dialog.signin button[type=submit]{background:var(--crimson);color:#fff;height:44px;font:700 15px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:0;border-radius:6px;align-self:flex-start;padding:0 24px}dialog.signin button[type=submit]:disabled{opacity:.6}dialog.signin .hint{color:var(--muted);font-size:13px}dialog.signin .error:empty{display:none}dialog.signin .error{color:#ff8a7a}dialog.signin .close{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:22px;position:absolute;top:12px;right:14px}.tool{--accent:var(--wowaddons);grid-template-columns:minmax(0,560px) minmax(0,1fr);align-items:center;gap:36px;display:grid}@media (width<=860px){.tool{grid-template-columns:1fr;gap:18px;max-width:560px;margin:0 auto}}.tool .shot{line-height:0;transition:transform .18s;display:block}.tool .shot img{filter:drop-shadow(0 18px 40px #0009);width:100%;height:auto}.tool .shot:hover,.tool .shot:focus-visible{transform:translateY(-6px)}.tool h3{color:var(--accent);font:700 22px/1 var(--label);letter-spacing:.14em;margin:0 0 10px}.tool .genre{max-width:480px;margin-bottom:18px}
