@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Sans:wght@400;500;700&display=swap');
:root{
  --bg:#0d0a0b; --panel:#17110f; --panel2:#211815; --line:#3a2a22;
  --gold:#e8b84a; --gold2:#f6d98a; --red:#d6312b; --cream:#f5ead6; --muted:#b39f86;
  --venue:#e8b84a; --home:#5fb8c9; --ok:#6bc28a;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--cream);font:16px/1.45 'DM Sans',system-ui,sans-serif}
body{background:radial-gradient(1200px 500px at 50% -10%,#3a1410 0%,transparent 60%),var(--bg);min-height:100vh}
h1,h2,h3{font-family:'Abril Fatface',Georgia,serif;font-weight:400;letter-spacing:.3px;margin:0 0 .4em;color:var(--gold2)}
h1{font-size:clamp(28px,6vw,52px);line-height:1.05}
h2{font-size:clamp(22px,4vw,34px)}
a{color:var(--gold)}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 60px}
.wide{max-width:1200px}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.marquee{display:flex;justify-content:center;gap:10px;margin-bottom:6px}
.marquee i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:blink 1.6s infinite}
.marquee i:nth-child(2n){animation-delay:.8s}
@keyframes blink{50%{opacity:.25;box-shadow:none}}
input,select,textarea{width:100%;font:inherit;color:var(--cream);background:#0f0b0a;border:1px solid var(--line);border-radius:10px;padding:12px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:transparent}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:999px;padding:12px 20px;background:var(--gold);color:#1a1006;transition:transform .08s}
button:active{transform:scale(.97)}
button.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
button.red{background:var(--red);color:#fff}
button.sm{padding:7px 12px;font-size:13px}
button:disabled{opacity:.45;cursor:default}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;border:1px solid var(--line)}
.pill.venue{color:var(--venue);border-color:var(--venue)}
.pill.home{color:var(--home);border-color:var(--home)}
.pill.open{color:var(--ok);border-color:var(--ok)}
.pill.closed{color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--gold);color:#1a1006;padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;z-index:9}
.toast.show{opacity:1}
.toast.err{background:var(--red);color:#fff}

/* picture options */
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pic{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--line);background:#000;cursor:pointer;aspect-ratio:3/4;padding:0;color:inherit;text-align:left}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Abril Fatface',serif;font-size:42px;color:rgba(246,217,138,.85)}
.pic .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-weight:700;font-size:14px}
.pic.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,74,.35)}
.pic.sel::after{content:'✓';position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#1a1006;display:flex;align-items:center;justify-content:center;font-weight:900}

/* bars */
.bar{margin:8px 0}
.bar .lbl{display:flex;justify-content:space-between;gap:8px;font-weight:500}
.bar .track{height:12px;border-radius:6px;background:#2a1f1a;overflow:hidden;display:flex;margin-top:4px}
.bar .v{background:var(--venue);transition:width .5s}
.bar .h{background:var(--home);transition:width .5s}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted)}
.legend span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;background:var(--venue)}
.legend span.h::before{background:var(--home)}

/* top 50 */
table.t50{width:100%;border-collapse:collapse}
.t50 th,.t50 td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.t50 th{font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.t50 td.num{text-align:right;font-variant-numeric:tabular-nums}
.t50 .pos{font-family:'Abril Fatface',serif;color:var(--gold);font-size:20px;width:44px}
.t50 details summary{cursor:pointer;list-style:none}
.t50 details summary::-webkit-details-marker{display:none}
.t50 details .who{font-size:13px;color:var(--muted);margin-top:4px}

.top10 .slot{display:flex;gap:8px;align-items:center;margin:6px 0}
.top10 .n{width:30px;text-align:right;font-family:'Abril Fatface',serif;color:var(--gold);font-size:20px}
.top10 .mv{display:flex;flex-direction:column;gap:2px}
.top10 .mv button{padding:0 8px;font-size:11px;line-height:16px;background:#2a1f1a;color:var(--muted)}