:root{
  --bg:#0b0d10; --panel:#12161b; --text:#f3f5f7; --muted:#a7b0ba; --brand:#6ee7ff; --accent:#9b87f5;
  --card:#0f1318; --border:#1f2937; --pick-size:clamp(180px, 26vw, 320px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;background:rgba(10,13,16,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);z-index:50}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;gap:.75rem}
.brand{display:flex;align-items:center;gap:.75rem}
.logo-placeholder{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--brand));display:grid;place-items:center;font-size:20px}
.brand-name{font-weight:800;color:#fff}.tagline{display:block;font-size:.75rem;color:var(--muted)}
.nav{display:flex;gap:.75rem;align-items:center}
.nav-link{padding:.4rem .6rem;border-radius:10px;border:1px solid transparent}.nav-link:hover{background:var(--panel);border-color:var(--border)}
.site-footer{border-top:1px solid var(--border);margin-top:2rem}
.footer-inner{max-width:1100px;margin:0 auto;padding:1rem;color:var(--muted);display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
#app{max-width:1100px;margin:0 auto;padding:1rem}

.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card-header{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-body{padding:12px}
.card-title{font-weight:700}
.small{font-size:.85rem;color:var(--muted)}
.btn{appearance:none;border:1px solid var(--border);background:var(--panel);color:#fff;border-radius:12px;padding:.6rem .9rem;cursor:pointer;display:inline-flex;align-items:center;line-height:1.1;text-decoration:none !important}
.btn:hover{background:#0d1217;text-decoration:none !important}
.btn:active{transform:translateY(1px);filter:brightness(.98)}
.btn-primary,.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:linear-gradient(135deg,var(--accent),var(--brand)) !important;color:#0a0c0f !important;border:none !important;text-decoration:none !important;filter:none}
.btn:focus{outline:2px solid rgba(110,231,255,.35);outline-offset:2px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-block;background:#0e141a;border:1px solid var(--border);padding:.2rem .5rem;border-radius:999px;font-size:.75rem;color:var(--muted)}

.match-wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.pick{width:var(--pick-size); height:var(--pick-size); flex:0 0 var(--pick-size); display:flex; flex-direction:column; background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer}
.pick:hover{outline:2px solid rgba(110,231,255,.2)}
.thumb{flex:1;position:relative;background:#10151b;overflow:hidden}
.thumb img,.thumb canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.meta{padding:.5rem .6rem;display:flex;justify-content:space-between;gap:.5rem}
.title{font-weight:700}.year{color:var(--muted)}

.top3{display:grid;gap:12px}
@media(min-width:900px){
  .top3{grid-template-columns: 2fr 1fr; grid-template-areas: 'one two' 'one three'; align-items:stretch}
  .top-1{grid-area:one} .top-2{grid-area:two} .top-3{grid-area:three}
}
.top-item{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.top-item .thumb{aspect-ratio:16/9; position:relative; background:#10151b; overflow:hidden}
.top-item .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.top-item .rank{font-weight:800;margin:.25rem 0;text-align:center}
.thumb .shade{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0))}
.thumb .cap{position:absolute;left:0;right:0;bottom:0;padding:.6rem .75rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.thumb .cap-title{font-weight:800}.thumb .cap-year{font-size:.8rem;opacity:.9}

.thumb.noimg{background:linear-gradient(135deg, #0ea5e9, #8b5cf6)}
.thumb.noimg .cap{display:none}
.thumb.noimg img{display:none}

.hr{height:1px;background:var(--border);margin:16px 0}
.list{display:grid;grid-template-columns:1fr;gap:6px}
.list-item{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.5rem .75rem}
.notice{background:#0e141a;border:1px dashed var(--border);padding:.75rem;border-radius:12px;color:var(--muted)}
.center{text-align:center}