@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --green:#16a34a; --green-dark:#116b34; --ink:#14251b; --muted:#68736c; --line:#e5e8e5; --paper:#f6f7f3; --white:#fff; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font-family:'Manrope',sans-serif; color:var(--ink); background:var(--paper); }
body { background-image: radial-gradient(circle at 4% 0%, rgba(34,197,94,.08), transparent 27%), radial-gradient(circle at 95% 90%, rgba(253,224,71,.1), transparent 28%); }
a { color:inherit; } button, input, textarea, select { font:inherit; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.05; letter-spacing:-.055em; font-weight:800; } h2 { letter-spacing:-.035em; font-weight:800; }
.eyebrow { display:block; margin-bottom:10px; color:var(--green); text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; }
.page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:34px; }.page-heading p { color:var(--muted); margin:10px 0 0; }.compact-heading h1 { margin-bottom:0; }
.text-link { color:var(--green-dark); font-weight:800; text-decoration:none; white-space:nowrap; }
.surface-card,.ranking-card { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:0 16px 45px rgba(20,37,27,.055); }
.section-space { margin-top:34px; }.section-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }.section-title h2 { margin:0; }
.btn-brand,.btn-secondary-brand,.btn-ghost { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:13px 20px; font-weight:800; text-decoration:none; cursor:pointer; transition:.2s; }
.btn-brand { border:1px solid var(--green); background:var(--green); color:white; box-shadow:0 8px 18px rgba(22,163,74,.18); }.btn-brand:hover { background:#138a40; transform:translateY(-1px); }.btn-brand.full { width:100%; }
.btn-secondary-brand,.btn-ghost { border:1px solid #dce2dd; background:white; color:var(--ink); }.btn-ghost { padding:13px 22px; }.btn-secondary-brand:hover,.btn-ghost:hover { border-color:var(--green); color:var(--green-dark); }
.login-layout { min-height:calc(100vh - 200px); display:grid; grid-template-columns:1.15fr .85fr; gap:8vw; align-items:center; }.login-copy h1 { font-size:clamp(3rem,6vw,5.7rem); }.login-copy h1 em { color:var(--green); font-style:normal; }.login-copy>p { max-width:590px; color:var(--muted); font-size:1.08rem; line-height:1.8; }.rule-pills { display:flex; gap:10px; flex-wrap:wrap; }.rule-pills span { background:#e8f8ed; color:#137238; border-radius:99px; padding:9px 13px; font-weight:700; font-size:.8rem; }
.login-card { background:white; border:1px solid var(--line); border-radius:28px; padding:44px; text-align:center; box-shadow:0 30px 80px rgba(20,37,27,.09); }.login-card h2 { font-size:1.7rem; margin:16px 0 8px; }.login-card p { color:var(--muted); line-height:1.6; }.login-card small { display:block; margin-top:24px; color:#9aa19c; line-height:1.5; }.login-icon { font-size:2.4rem; }.local-login-form { display:flex; flex-direction:column; gap:14px; text-align:left; margin-top:22px; }.local-login-form label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:.78rem; font-weight:800; }.local-login-form input { width:100%; border:1px solid #dce2dd; border-radius:11px; padding:12px; color:var(--ink); background:white; }.local-login-form input:focus { outline:2px solid #bbf7d0; border-color:var(--green); }.local-login-form button:disabled { opacity:.65; cursor:wait; }
.admin-login-page { min-height:calc(100vh - 210px); display:grid; place-items:center; }.admin-login-page .login-card { width:min(100%,480px); }.admin-login-page h1 { margin:8px 0 10px; font-size:2rem; }.back-link { display:inline-block; margin-top:24px; color:var(--muted); font-size:.82rem; font-weight:700; text-decoration:none; }.back-link:hover { color:var(--green-dark); }
.welcome-hero { overflow:hidden; min-height:460px; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; padding:58px; border-radius:32px; color:white; background:linear-gradient(125deg,#123d26,#168544); box-shadow:0 28px 80px rgba(17,107,52,.2); }.welcome-hero p { color:#d6f4df; max-width:600px; font-size:1.05rem; }.welcome-hero .eyebrow { color:#86efac; }.hero-actions { display:flex; gap:12px; margin-top:28px; }.welcome-hero .btn-brand { background:#facc15; color:#22331f; border-color:#facc15; }.welcome-hero .btn-ghost { background:transparent; color:white; border-color:rgba(255,255,255,.3); }.hero-visual { position:relative; display:grid; place-items:center; height:300px; }.ball { font-size:8rem; filter:drop-shadow(0 20px 18px rgba(0,0,0,.22)); transform:rotate(-12deg); }.floating-score { position:absolute; display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:white; color:var(--ink); font-size:1.8rem; font-weight:800; box-shadow:0 16px 30px rgba(0,0,0,.18); }.floating-score.one { top:20px; left:20px; transform:rotate(-7deg); }.floating-score.two { bottom:20px; right:20px; transform:rotate(7deg); }
.stats-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:30px; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:20px; }.stats-strip div { display:flex; flex-direction:column; padding:22px 26px; background:white; }.stats-strip span { color:var(--muted); font-size:.78rem; font-weight:700; }.stats-strip strong { font-size:1.8rem; letter-spacing:-.05em; }
.match-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.match-card { background:white; border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:0 10px 30px rgba(20,37,27,.04); }.match-card.finished { background:#fafbf9; }.match-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.teams-score { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin:24px 0; }.team { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:.82rem; }.team-badge { width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#dcfce7;color:#15803d;font-weight:800; }.team-badge.alt { background:#fef3c7;color:#a16207; }.score-inputs { display:flex; align-items:center; gap:8px; }.score-inputs input,.result-editor input { width:54px;height:54px;border:1px solid #dce2dd;border-radius:12px;text-align:center;font-weight:800;font-size:1.2rem;background:#fff; }.score-inputs input:focus { outline:2px solid #86efac;border-color:var(--green); }.score-inputs input:disabled { background:#eef0ed;color:#778079; }.result-line,.locked-line { display:flex; justify-content:space-between; padding:12px 14px; border-radius:12px; background:#ecfdf3; color:#137238; font-size:.85rem; font-weight:700; }.locked-line { display:block;text-align:center;background:#f0f1ef;color:#777f79; }
.ranking-card { padding:0; overflow:hidden; }.ranking-head,.ranking-row { display:grid; grid-template-columns:100px 1fr 100px 100px; align-items:center; padding:15px 24px; }.ranking-head { background:#f0f4f0;color:var(--muted);text-transform:uppercase;font-size:.68rem;font-weight:800;letter-spacing:.08em; }.ranking-row { min-height:76px;border-top:1px solid var(--line); }.ranking-row.current-player { background:#ecfdf3; }.position { font-weight:800;color:var(--muted); }.position.podium { color:#ca8a04;font-size:1.12rem; }.player { display:flex;align-items:center;gap:12px; }.avatar { width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#dcfce7;color:#15803d;font-size:.75rem;font-weight:800; }.player div { display:flex;flex-direction:column; }.player small { color:var(--green);font-weight:700; }.points { font-size:1.15rem; }
.admin-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }.form-stack { display:flex;flex-direction:column;gap:15px; }.form-stack label { display:flex;flex-direction:column;gap:6px;color:#59635d;font-size:.78rem;font-weight:800; }.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.form-control,.form-select { border:1px solid #dce2dd;border-radius:11px;padding:11px 12px;background:white;color:var(--ink); }.form-control:focus,.form-select:focus { border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.12);outline:none; }.admin-match-list { display:flex;flex-direction:column; }.admin-match-row { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-top:1px solid var(--line); }.match-description { display:flex;flex-direction:column;gap:5px; }.match-description strong span { color:var(--muted);padding:0 7px; }.match-description small { color:var(--muted); }.tag { color:var(--green-dark);font-size:.68rem;font-weight:800;text-transform:uppercase; }.result-editor { display:flex;align-items:center;gap:8px; }.result-editor input { height:42px;width:46px; }.result-editor .btn-secondary-brand { padding:10px 14px; }
.empty-state { min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);text-align:center; }.muted { color:var(--muted); }.alert { border-radius:14px; }
#blazor-error-ui { background:#fff3cd;bottom:0;box-shadow:0 -1px 4px rgba(0,0,0,.2);display:none;left:0;padding:.8rem 1.25rem;position:fixed;width:100%;z-index:1000; } #blazor-error-ui .dismiss { cursor:pointer;position:absolute;right:.75rem;top:.5rem; }
@media(max-width:850px){.login-layout,.welcome-hero,.admin-grid{grid-template-columns:1fr}.login-layout{gap:36px}.login-copy h1{font-size:3.2rem}.hero-visual{display:none}.welcome-hero{padding:36px}.match-grid{grid-template-columns:1fr}.admin-match-row{align-items:flex-start;flex-direction:column}.result-editor{width:100%;flex-wrap:wrap}.page-heading{align-items:flex-start;gap:18px;flex-direction:column}}
@media(max-width:560px){.login-card{padding:28px 20px}.stats-strip div{padding:16px 12px}.stats-strip strong{font-size:1.4rem}.ranking-head,.ranking-row{grid-template-columns:58px 1fr 58px}.ranking-head span:last-child,.ranking-row>span:last-child{display:none}.ranking-head,.ranking-row{padding:13px 12px}.form-row{grid-template-columns:1fr}.teams-score{gap:7px}.score-inputs input{width:45px;height:48px}.team-badge{width:42px;height:42px}}