:root { --bg:#16101f; --card:#241a33; --ink:#f4ecdf; --muted:#a99bbd; --orange:#ff8a1f; --green:#7bd36b; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); background:var(--bg); color:var(--ink); font:16px/1.4 system-ui,sans-serif; padding-bottom:max(40px,env(safe-area-inset-bottom)); }
header { text-align:center; padding:32px 0 16px; }
h1 { margin:0; font-size:clamp(28px,6vw,48px); color:var(--orange); }
header p { color:var(--muted); margin:6px 0 16px; }
button { font:inherit; min-height:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; border:0; border-radius:10px; padding:10px 16px; background:#3a2d50; color:var(--ink); cursor:pointer; }
button.primary, #add-btn { background:var(--orange); color:#1b1000; font-weight:700; }
button:disabled { opacity:.5; cursor:default; }
#banner { margin:16px auto 0; max-width:520px; padding:10px 14px; border-radius:10px; background:#3a2d50; }
#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:16px; max-width:1100px; margin:0 auto; }
.card { background:var(--card); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.card.winner { outline:3px solid var(--green); }
.card img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; cursor:zoom-in; }
.info { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.info h3 { margin:0; } .info small { color:var(--muted); }
.vote-row { gap:8px; display:flex; justify-content:space-between; align-items:center; }
.count { font-weight:700; color:var(--orange); }
.voted { background:var(--green); color:#0c2a08; font-weight:700; }
#empty { text-align:center; color:var(--muted); }
dialog { max-height:90dvh; overflow:auto; border:0; border-radius:14px; background:var(--card); color:var(--ink); width:min(92vw,420px); padding:20px; }
dialog::backdrop { background:rgba(0,0,0,.7); }
form h2 { margin-top:0; }
label { display:block; margin:12px 0; color:var(--muted); }
input { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid #4a3b66; background:#16101f; color:var(--ink); font:inherit; }
.row { display:flex; justify-content:flex-end; gap:8px; }
.error { color:#ff7a7a; min-height:1.2em; }
footer { text-align:center; margin-top:40px; } footer a { color:var(--muted); font-size:13px; }
.lightbox { background:transparent; padding:0; width:96vw; }
.lightbox::backdrop { background:rgba(0,0,0,.9); }
.lightbox img { max-width:100%; max-height:80vh; display:block; margin:auto; border-radius:8px; }

@media (max-width:480px) { #add-btn { width:100%; } .card img { aspect-ratio:1/1; } .row button { flex:1; } }
.panel { max-width:420px; margin:0 auto; background:var(--card); border-radius:14px; padding:20px; }
.panel[hidden] { display:none; }
.panel .primary { width:100%; }
#preview { width:100%; max-height:50vh; object-fit:contain; border-radius:10px; }
#preview[hidden] { display:none; }
#results { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.result { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:12px; padding:10px; }
.result.winner { outline:3px solid var(--green); }
.result img { width:64px; height:64px; object-fit:cover; border-radius:8px; flex:none; }
.result .meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.result small { color:var(--muted); }
.bar { height:8px; background:#16101f; border-radius:4px; overflow:hidden; margin-top:4px; }
.bar i { display:block; height:100%; background:var(--orange); }
.rank { width:1.5em; text-align:center; color:var(--muted); font-weight:700; }
.result .count { font-size:24px; font-weight:700; color:var(--orange); min-width:1.5em; text-align:right; }

select { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid #4a3b66; background:#16101f; color:var(--ink); font:inherit; }
.wide { max-width:640px; margin:0 auto; }
.inline { display:flex; gap:8px; } .inline input { margin:0; flex:1; min-width:0; } .inline button { flex:none; }
.team { background:var(--card); border-radius:12px; padding:12px; margin-top:10px; }
.team-head { display:flex; align-items:center; gap:10px; }
.team-head h3 { margin:0; flex:1; min-width:0; overflow-wrap:anywhere; }
.pts { font-size:24px; font-weight:700; color:var(--orange); }
.team .inline { margin-top:10px; } .team input[name=delta] { flex:0 0 5.5em; } 
.log { margin:10px 0 0; padding:0; list-style:none; color:var(--muted); font-size:14px; }
.log li { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-top:1px solid #3a2d50; }
.log button { min-height:28px; padding:0 8px; background:none; color:var(--muted); }
.nav { display:flex; justify-content:center; gap:16px; margin-top:8px; } .nav a { color:var(--muted); }
.final { flex-wrap:wrap; }
.final .big { font-size:28px; font-weight:700; color:var(--orange); min-width:2.5em; text-align:right; }
.final .split { display:flex; gap:14px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.final.winner .big { color:var(--green); }