:root{color-scheme:light;--ink:#172033;--muted:#667085;--line:#e5e9f0;--surface:#fff;--soft:#f5f7fb;--blue:#2563eb;--blue-dark:#1d4ed8;--green:#15803d;--shadow:0 10px 30px rgba(18,32,60,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}a{color:inherit}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(16px,calc((100vw - 1120px)/2));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:.04em}.brand img{width:40px;height:40px;object-fit:contain}.brand b{color:var(--blue)}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:23px;cursor:pointer}.menu{position:absolute;right:16px;top:62px;width:min(300px,calc(100vw - 32px));padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.menu[hidden]{display:none}.menu a,.menu button{display:block;width:100%;padding:12px;border:0;border-radius:9px;background:transparent;text-align:left;text-decoration:none;font:inherit;cursor:pointer}.menu a:hover,.menu button:hover{background:var(--soft)}.page{width:min(1120px,100% - 32px);margin:0 auto}.hero{padding:clamp(30px,7vw,76px) 0 32px}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:.75rem;font-weight:850;letter-spacing:.13em}.hero h1{margin:0;font-size:clamp(2.4rem,7vw,4.7rem);line-height:1.05;letter-spacing:-.05em}.hero>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:clamp(1rem,2vw,1.18rem)}.hero-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-stats div{display:grid;gap:2px;min-width:100px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.hero-stats strong{font-size:1.25rem}.hero-stats span{color:var(--muted);font-size:.8rem}.section{padding:28px 0 36px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.section-heading h2,.about h2{margin:0;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.03em}.search input{width:min(290px,44vw);padding:11px 13px;border:1px solid var(--line);border-radius:11px;font:inherit;outline-color:var(--blue)}.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.game-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 4px 18px rgba(18,32,60,.035);min-width:0}.game-head{display:flex;align-items:center;gap:12px;min-width:0}.game-logo{width:58px;height:58px;flex:0 0 58px;border-radius:14px;object-fit:contain;background:var(--soft);border:1px solid var(--line)}.game-name{margin:0;font-size:1.08rem;overflow-wrap:anywhere}.game-developer{margin:2px 0 0;color:var(--muted);font-size:.84rem}.game-about{margin:0;color:#475467;font-size:.92rem;flex:1}.game-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.8rem}.tag{padding:3px 8px;background:var(--soft);border-radius:999px}.game-actions{display:flex;align-items:center;gap:8px;margin-top:2px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;font:inherit;font-weight:750;text-decoration:none;cursor:pointer}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:var(--blue-dark)}.secondary{background:white;color:var(--ink)}.vote-button{flex:1}.vote-button:disabled{opacity:.65;cursor:default}.status{color:var(--muted);font-size:.9rem}.rankings-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ranking-item{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px}.rank-number{font-weight:900;color:var(--blue);font-size:1.1rem}.ranking-item strong{display:block}.ranking-item small{color:var(--muted)}.about{margin:10px 0 38px;padding:24px;border-radius:20px;background:var(--soft)}.about p:last-child{max-width:680px;color:var(--muted);margin-bottom:0}.footer{display:flex;justify-content:space-between;gap:12px;padding:22px max(16px,calc((100vw - 1120px)/2));border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}.footer a{font-weight:800;color:var(--blue);text-decoration:none}.login-dialog,.vote-dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 90px rgba(15,23,42,.24)}dialog::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(3px)}.login-form,.vote-form{position:relative;padding:24px}.login-form h2,.vote-form h2{margin:0 0 8px;letter-spacing:-.025em}.login-form .muted,.vote-form p{color:var(--muted);font-size:.9rem}.login-form label{display:block;margin:14px 0 6px;font-weight:750;font-size:.9rem}.login-form input,.login-form select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cfd6e2;border-radius:10px;background:#fff;color:var(--ink);font:inherit}.login-form small{display:block;margin-top:6px;color:var(--muted)}.login-form #postingKeyFields[hidden]{display:none}.login-form #postingKeyFields:not([hidden]){display:block}.login-form .button{width:100%;margin-top:18px}.dialog-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:10px;background:var(--soft);font-size:23px;cursor:pointer}.signup{display:block;margin-top:14px;text-align:center;font-size:.84rem;color:var(--blue)}.dialog-actions{display:flex;gap:10px;margin-top:18px}.dialog-actions>*{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{color:var(--muted)}@media(max-width:900px){.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rankings-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.topbar{padding:8px 14px}.page{width:calc(100% - 28px)}.hero{padding-top:38px}.section-heading{align-items:stretch;flex-direction:column}.search input{width:100%}.games-grid,.rankings-list{grid-template-columns:1fr}.game-card{padding:14px}.footer{padding:18px 14px}.login-form,.vote-form{padding:20px}.hero-stats{gap:8px}.hero-stats div{flex:1;min-width:0;padding:10px 12px}}
