:root { --blue: #00a9e2; --blue-deep: #0077b1; --ink: #10171d; --panel: #19242c; --panel-soft: #202d36; --line: #31414c; --text: #f3f7f8; --muted: #9baab2; --gold: #ffd166; }
* { box-sizing: border-box; }
.icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 80% -10%, #07577b 0, transparent 30rem), var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; } main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto 4rem; } h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); letter-spacing: -.06em; margin-bottom: .5rem; } h1 em { color: var(--blue); font-style: normal; } h2 { font-size: 1.6rem; margin-bottom: 0; } h3 { font-size: 1.2rem; margin: .8rem 0; } .site-header { width: min(1120px, calc(100% - 2rem)); margin: auto; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { font-weight: 800; letter-spacing: .04em; } .brand span { color: var(--blue); } nav { display: flex; align-items: center; gap: 1rem; } nav form { margin: 0; } .signed-in, .muted { color: var(--muted); } .avatar, .profile-avatar { display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #05202c; font-weight: 900; letter-spacing: .03em; } .avatar { width: 2.25rem; height: 2.25rem; font-size: .76rem; transition: transform .15s, background .15s; } .avatar:hover { transform: scale(1.08); background: #57cdf5; } .account-menu { position: relative; } .account-menu summary { list-style: none; cursor: pointer; } .account-menu summary::-webkit-details-marker { display: none; } .account-menu-popup { position: absolute; z-index: 5; top: calc(100% + .65rem); right: 0; display: grid; min-width: 8.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #132029; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); } .account-menu-popup form { display: block; } .account-menu-popup a, .account-menu-popup .link-button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .7rem .85rem; text-align: left; } .account-menu-popup a:hover, .account-menu-popup .link-button:hover { background: #203540; } .link-button { border: 0; padding: 0; background: none; color: var(--text); cursor: pointer; font: inherit; }
.hero { padding: 4.5rem 0 0; } .eyebrow { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .13em; margin-bottom: .65rem; } .dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } .dashboard-stat { min-height: 145px; padding: 1.4rem; border: 1px solid #1584ae; border-radius: 16px; background: linear-gradient(135deg, #0a3c56, #15242d); } .dashboard-stat span, .dashboard-stat strong, .dashboard-stat b { display: block; } .dashboard-stat span { color: #b9dce9; font-size: .8rem; } .dashboard-stat strong { font-size: 1.25rem; margin: .6rem 0; } .dashboard-stat b { color: var(--gold); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 2.8rem 0 1rem; color: var(--muted); } .section-heading h2 { color: var(--text); } .panel { background: color-mix(in srgb, var(--panel) 94%, white); border: 1px solid var(--line); border-radius: 14px; } .standings { overflow: hidden; } .standing { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; min-height: 58px; padding: .7rem 1.15rem; border-bottom: 1px solid var(--line); } .standing:last-child { border-bottom: 0; } .standing.first { background: linear-gradient(90deg, #263844, transparent); } .rank { color: var(--blue); font-weight: 800; } .empty { padding: 1.3rem; color: var(--muted); }
.game-grid, .challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .game-card { min-height: 175px; padding: 1.35rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; transition: transform .16s, border-color .16s; } .game-card:hover { transform: translateY(-3px); border-color: var(--blue); } .game-card p { color: var(--blue); font-size: .78rem; font-weight: 700; text-transform: uppercase; } .game-card strong { display: block; } .game-card strong span { color: var(--gold); font-weight: 600; } .arrow { display: block; color: var(--muted); font-size: .85rem; margin-top: 2rem; }
.game-hero { padding: 4rem 0 1rem; } .back { display: inline-block; color: var(--blue); font-weight: 700; margin-bottom: 1.8rem; } .two-column { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: end; } .points { padding: 1.4rem; } .points h3 { margin-bottom: .6rem; } .challenge-card { padding: 1.2rem; } .challenge-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .tag { color: var(--blue); font-size: .72rem; font-weight: 800; text-transform: uppercase; } .mini-standings { list-style: none; padding: 0; margin: 1rem 0 0; } .mini-standings li { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .9rem; } .mini-standings b { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.detail-link { display: inline-block; margin-top: 1rem; color: var(--blue); font-size: .85rem; font-weight: 700; } .profile-link, .profile-table .detail-link { margin-top: 0; } .profile-link { margin-left: .65rem; } .icon-button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 7px; transition: border-color .15s, background .15s; } .icon-button:hover { border-color: var(--blue); background: #07364a; } .result-history { overflow: hidden; } .table-scroll { overflow-x: auto; } .results-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; } .results-table th { padding: .85rem 1.15rem; color: var(--blue); background: #13232c; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; } .results-table td { padding: 1rem 1.15rem; border-top: 1px solid var(--line); vertical-align: top; } .results-table tbody tr:hover { background: rgba(0, 169, 226, .05); } .results-table time, .note-cell { color: var(--muted); font-size: .86rem; white-space: nowrap; } .score-cell { color: var(--gold); font-size: 1.05rem; font-weight: 800; } .placement { color: var(--blue); font-weight: 800; }
.score-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .fifa-table { min-width: 680px; } .fifa-table td:last-child .profile-link { margin-left: auto; } .rated, .unrated { display: inline-block; border-radius: 999px; padding: .28rem .55rem; font-size: .72rem; font-weight: 800; } .rated { color: #bff5d3; background: #164b31; } .unrated { color: #f5d6a8; background: #51391b; } .elo-changes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; } .elo-change { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .25rem .5rem; font-size: .72rem; font-weight: 700; } .elo-change b { font-weight: 800; } .elo-change.up { color: #bff5d3; background: #164b31; } .elo-change.down { color: #ffc3c3; background: #54282d; } .elo-change.flat { color: #c9d3d8; background: #36434b; }
.fifa-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .button.secondary { background: transparent; border: 1px solid var(--blue); color: var(--blue); } .button.secondary:hover { background: #07364a; }
.profile-hero { display: flex; align-items: center; gap: 1.35rem; padding: 4.5rem 0 1rem; } .profile-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); } .profile-avatar { width: clamp(4.5rem, 12vw, 6rem); height: clamp(4.5rem, 12vw, 6rem); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.native-player-select { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } .player-picker { display: grid; gap: .9rem; } .picker-search { position: relative; } .picker-search input { padding-right: 2.5rem; } .search-icon { position: absolute; top: 50%; right: .8rem; color: var(--muted); pointer-events: none; transform: translateY(-50%); } .picker-search:focus-within .search-icon { color: var(--blue); } .picker-results { position: absolute; z-index: 2; top: calc(100% + .35rem); width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #132029; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); } .picker-results:empty { display: none; } .picker-result { display: flex; justify-content: space-between; align-items: center; padding: .65rem .75rem; border-bottom: 1px solid var(--line); } .picker-result:last-child { border-bottom: 0; } .picker-result button, .player-chip button { border: 0; cursor: pointer; font: inherit; font-weight: 800; } .picker-result button { width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--blue); color: #04202d; font-size: 1.1rem; } .picker-selected { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 0; } .player-chip { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .35rem .45rem .35rem .7rem; background: #16445a; color: #d7f4ff; font-size: .86rem; } .player-chip.empty-chip { background: #26343d; color: var(--muted); } .player-chip button { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: transparent; color: #d7f4ff; font-size: 1.15rem; line-height: 1; } .picker-empty { margin: 0; padding: .7rem .75rem; color: var(--muted); font-size: .85rem; } .player-picker .muted { margin: .15rem 0 .25rem; } .survival-toggle { display: flex; grid-template-columns: none; align-items: center; gap: .6rem; }
.survival-picker { display: grid; gap: .65rem; } .survival-label { margin: 0; font-size: .9rem; font-weight: 800; } .survival-options { display: grid; gap: .5rem; } .survival-option { display: flex; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; } .survival-option input { position: absolute; opacity: 0; } .toggle-track { position: relative; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: #34434d; transition: background .15s; } .toggle-track::after { position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: white; content: ''; transition: transform .15s; } .survival-option input:checked + .toggle-track { background: var(--blue); } .survival-option input:checked + .toggle-track::after { transform: translateX(1.1rem); }
.button { display: inline-block; border: 0; border-radius: 8px; padding: .75rem 1rem; background: var(--blue); color: #041a24; font: inherit; font-weight: 800; cursor: pointer; } .button:hover { background: #42c4f4; } .compact { padding: .45rem .7rem; font-size: .78rem; } .form-page { width: min(560px, 100%); margin: 5rem auto; padding: clamp(1.3rem, 4vw, 2.3rem); } .form-page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } .form-stack { display: grid; gap: 1rem; margin-top: 2rem; } label, legend { display: grid; gap: .45rem; font-size: .88rem; font-weight: 700; } fieldset { border: 1px solid var(--line); border-radius: 9px; padding: 1rem; } input, select { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: .72rem; color: var(--text); background: #10191f; font: inherit; } input:focus, select:focus { outline: 2px solid var(--blue); border-color: var(--blue); } input[type="checkbox"] { width: auto; accent-color: var(--blue); } #id_participants, #id_players { display: grid; gap: .65rem; margin-top: .7rem; } #id_participants label, #id_players label { grid-template-columns: auto 1fr; align-items: center; font-weight: 500; } .selected-order { padding-left: 1.4rem; color: var(--blue); } .errorlist { margin: 0; padding-left: 1rem; color: #ff9d9d; } .messages { margin-top: 1rem; } .message { padding: .8rem 1rem; border-radius: 8px; background: #173744; color: #d4f4ff; }
@media (max-width: 720px) { .site-header { min-height: 66px; } nav > a:not(.button), .signed-in { display: none; } .hero { padding: 4rem 0 0; } .dashboard-stats, .game-grid, .challenge-grid, .two-column { grid-template-columns: 1fr; } .section-heading { margin-top: 2rem; } .standing { grid-template-columns: 2.4rem 1fr auto auto; padding-inline: .85rem; } }