*{box-sizing:border-box}html,body{height:100%}html{overflow:hidden}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f7f9fc;color:#1f2937}.sidebar{width:240px;background:#111827;color:#e5e7eb;padding:20px 12px;display:flex;flex-direction:column;gap:6px;position:fixed;inset:0 auto 0 0;z-index:10}.sidebar-logo{text-align:center;font-size:1.25rem;font-weight:700;margin:4px 0 14px;color:#fff}.navlink{appearance:none;border:0;background:transparent;color:#cbd5e1;text-align:left;padding:12px 14px;border-radius:10px;font-size:.98rem;cursor:pointer;transition:background .15s ease,color .15s ease,transform .05s ease}.navlink:hover{background:#1f2937;color:#fff}.navlink.active{background:#2563eb;color:#fff}.content{margin-left:240px;height:100vh;position:relative;overflow:hidden;padding:0;background:#f7f9fc}.view{position:absolute;inset:0;display:none;opacity:0;transition:opacity .18s ease}.view.active{display:block;opacity:1}.section-inner{height:100%;padding:48px clamp(20px,6vw,64px);display:grid;align-content:center;gap:12px}.section-inner h1{font-size:clamp(1.8rem,2.2vw + 1rem,2.5rem);margin:0 0 8px}.section-inner p{max-width:60ch;line-height:1.65;color:#374151}.login-box{justify-self:start;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px 20px;box-shadow:0 2px 8px #1118270f;width:100%;max-width:460px}.login-box h2{margin:0 0 12px;font-size:clamp(1.2rem,1.2vw + 1rem,1.5rem);font-weight:700;color:#111827}.btn{appearance:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-bottom:5px;font-size:.98rem;font-weight:600;padding:12px 16px;border-radius:10px;transition:transform .05s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:#2563eb;color:#fff;box-shadow:0 1px #00000008,0 6px 14px #2563eb2e}.btn-primary:hover{background:#1d4ed8}.btn-primary:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eba6}.btn[disabled],.btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}@media (max-width: 420px){.btn{width:100%}}@media (prefers-reduced-motion: reduce){.btn,.view{transition:none}}.loading-box{display:grid;place-items:center;gap:12px;padding:40px 20px;text-align:center;color:#374151}.loading-box p{margin:0;font-size:1rem}.spinner{width:36px;height:36px;border:4px solid #d1d5db;border-top-color:#2563eb;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#upload .section-inner{align-content:start;overflow:auto;gap:18px}.upload-title{margin:0;font-size:clamp(1.25rem,.9rem + 1.2vw,1.6rem);color:#111827}.upload-helper{margin:2px 0 10px;color:#4b5563}.upload-form{display:grid;gap:14px;width:100%;max-width:520px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px;box-shadow:0 2px 8px #1118270f}.upload-field{display:grid;gap:8px}.upload-preview{margin-top:8px;display:grid;gap:10px;width:100%;max-width:520px}.upload-preview[hidden]{display:none}.upload-preview-frame{width:100%;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;background:#0f172a;position:relative}.upload-preview-frame img{display:block;max-width:100%;max-height:100%}.upload-preview-hint{margin:0;font-size:.9rem;color:#4b5563}.upload-label{font-weight:600;color:#1f2937}.upload-form input[type=file],.upload-form input[type=text]{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#111827;font:inherit;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.upload-form input[type=file]{padding:10px 12px;background:#f9fafb}.upload-form input[type=file]:focus-visible,.upload-form input[type=text]:focus-visible{outline:0;border-color:#2563eb;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb59}.upload-form input[type=text]:hover{background:#f9fafb}.upload-button{appearance:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.98rem;font-weight:600;padding:12px 16px;border-radius:10px;background:#2563eb;color:#fff;box-shadow:0 1px #00000008,0 6px 14px #2563eb2e;transition:transform .05s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}.upload-button:hover{background:#1d4ed8}.upload-button:active{transform:translateY(1px)}.upload-button:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eba6}.upload-button[disabled]{opacity:.65;cursor:not-allowed;box-shadow:none}.upload-status{margin:6px 2px 0;min-height:1.2em;color:#374151;font-size:.95rem;transition:color .15s ease,opacity .15s ease}.upload-status.is-error{color:#b91c1c}.upload-status.is-success{color:#065f46}.upload-progress{width:100%;height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:6px;display:none}.upload-progress>span{display:block;height:100%;width:0%;background:#2563eb;border-radius:999px;transition:width .25s ease}.upload-status a{color:#2563eb;text-decoration:none;border-bottom:1px dashed rgba(37,99,235,.5)}.upload-status a:hover{color:#1d4ed8;border-bottom-color:#1d4ed8b3}@media (max-width: 480px){.upload-form{padding:14px;border-radius:12px}.upload-button{width:100%}}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}#hero .section-inner{align-content:start;overflow:auto;gap:18px}.hero-vote h2{margin:0 0 6px;font-size:clamp(1.2rem,.9rem + 1.2vw,1.6rem);color:#111827}.hero-vote .hint{margin:8px 0 0;color:#4b5563;font-size:.95rem}.versus-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2vw,24px);align-items:center;width:100%;max-width:980px}.vs-sep{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:#111827;color:#fff;font-weight:800;letter-spacing:1px;-webkit-user-select:none;user-select:none;box-shadow:0 2px 8px #1118272e}.player-card{display:grid;grid-template-rows:auto auto auto auto;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;box-shadow:0 2px 8px #1118270f;transition:transform .08s ease,box-shadow .15s ease,border-color .15s ease;min-width:0;cursor:pointer}.player-card:hover{transform:translateY(-2px);border-color:#dbe1ea;box-shadow:0 3px 16px #11182714}.player-figure{margin:0;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;aspect-ratio:4 / 3}.player-figure>img{width:100%;height:100%;object-fit:cover;display:block}.player-title{margin:6px 2px 0;font-size:1rem;font-weight:700;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-meta{margin:0 2px 4px;color:#4b5563;font-size:.92rem}.player-card .vote-btn{justify-self:start}@media (max-width: 780px){.versus-grid{grid-template-columns:1fr;grid-auto-rows:auto}.vs-sep{width:auto;height:auto;padding:6px 10px;border-radius:999px;justify-self:center}}@media (prefers-reduced-motion: reduce){.player-card{transition:none}}.player-card.anim-win{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px #2563eb29}.player-card.anim-lose{opacity:.4;transform:translateY(3px) scale(.98)}.player-card.anim-win,.player-card.anim-lose{transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}