:root{
--bg:#050505;
--surface:#11100e;
--panel:#171512;
--panel-2:#201d17;
--line:rgba(255,255,255,.12);
--gold:#d6b25e;
--gold-strong:#e8c875;
--white:#f7f4ee;
--muted:rgba(247,244,238,.68);
--blue:#1c4d9f;
--red:#b72035;
--green:#6bd6a0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@keyframes memberFadeUp{
from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes memberGlowLine{
0%,100%{opacity:.18;transform:translateX(-18%)}
50%{opacity:.62;transform:translateX(18%)}
}
@keyframes scorePulse{
0%,100%{box-shadow:0 0 0 rgba(214,178,94,0)}
50%{box-shadow:0 0 28px rgba(214,178,94,.16)}
}
body{
font-family:Arial,Helvetica,sans-serif;
background:var(--bg);
color:var(--white);
min-height:100vh;
line-height:1.55;
}
body:before{
content:"";
position:fixed;
inset:0;
z-index:-2;
background:
radial-gradient(circle at 86% 12%,rgba(214,178,94,.18),transparent 28%),
radial-gradient(circle at 6% 58%,rgba(28,77,159,.14),transparent 24%),
linear-gradient(to bottom,#050505,#0a0907 48%,#050505);
}
a{color:inherit}
.topbar{
position:sticky;
top:0;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px clamp(18px,4vw,48px);
background:linear-gradient(to bottom,rgba(5,5,5,.94),rgba(5,5,5,.78));
border-bottom:1px solid var(--line);
backdrop-filter:blur(18px);
}
.brand{
display:flex;
align-items:center;
gap:12px;
font-size:.75rem;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
text-decoration:none;
white-space:nowrap;
}
.brand img{width:44px;height:44px;object-fit:contain}
.brand picture{display:grid;place-items:center;line-height:0}
.nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.nav a{
padding:10px 12px;
border:1px solid transparent;
border-radius:999px;
font-size:.68rem;
font-weight:900;
letter-spacing:.11em;
text-transform:uppercase;
text-decoration:none;
color:var(--muted);
}
.nav a:hover,
.nav a:focus-visible,
.nav a.is-active{
color:var(--gold);
border-color:rgba(214,178,94,.32);
background:rgba(214,178,94,.08);
}
.shell{
width:min(1180px,calc(100% - 32px));
margin:0 auto;
padding:60px 0 82px;
}
.hero{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
gap:24px;
align-items:stretch;
margin-bottom:26px;
}
.card,
.panel{
position:relative;
border:1px solid var(--line);
border-radius:8px;
background:
radial-gradient(circle at top right,rgba(214,178,94,.14),transparent 36%),
linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
box-shadow:0 36px 120px rgba(0,0,0,.38);
overflow:hidden;
}
.card:after,
.panel:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.035),transparent 58%);
}
.card:before,
.panel:before{
content:"";
position:absolute;
left:18px;
right:18px;
top:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(214,178,94,.72),transparent);
opacity:.2;
animation:memberGlowLine 5.5s ease-in-out infinite;
pointer-events:none;
}
.card > *,
.panel > *{position:relative}
.card,
.panel,
.stat,
.mini-feed article,
.leaderboard-row,
.wall-post,
.hall-card,
.member-admin-card{
min-width:0;
}
.card{padding:clamp(26px,4vw,46px)}
.panel{padding:24px}
.compact-card{max-width:760px;margin-inline:auto}
.eyebrow{
display:block;
margin-bottom:14px;
font-size:.7rem;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--gold);
}
h1,h2,h3{
font-weight:900;
line-height:1.02;
letter-spacing:0;
text-transform:uppercase;
overflow-wrap:break-word;
word-break:normal;
hyphens:auto;
}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:1.45rem}
h1 span,h2 span,h3 span{color:var(--gold)}
p{color:var(--muted)}
.lead{max-width:720px;margin-top:20px;font-size:1.1rem;line-height:1.75}
.grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.single{grid-template-columns:1fr}
.stat{
border:1px solid var(--line);
border-radius:8px;
padding:20px;
background:rgba(255,255,255,.025);
}
.stat strong{
display:block;
font-size:2rem;
line-height:1;
color:var(--gold);
}
.stat span{
display:block;
margin-top:8px;
font-size:.68rem;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--muted);
}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-top:24px}
.btn,
button.btn{
position:relative;
isolation:isolate;
overflow:hidden;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:13px 18px;
border-radius:8px;
border:1px solid transparent;
text-decoration:none;
font-size:.72rem;
font-weight:900;
letter-spacing:.08em;
line-height:1.15;
text-align:center;
text-transform:uppercase;
white-space:normal;
cursor:pointer;
box-shadow:0 14px 34px rgba(0,0,0,.22);
transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.2),transparent);
transform:translateX(-120%);
transition:transform .55s ease;
}
.btn:hover,
.btn:focus-visible{
transform:translateY(-2px);
box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.btn:hover:before,
.btn:focus-visible:before{transform:translateX(120%)}
.btn:focus-visible{outline:2px solid rgba(214,178,94,.65);outline-offset:3px}
.gold{
background:linear-gradient(135deg,var(--gold),var(--gold-strong));
color:#111;
border-color:rgba(214,178,94,.55);
box-shadow:0 16px 38px rgba(214,178,94,.15),0 14px 34px rgba(0,0,0,.22);
}
.gold:hover,.gold:focus-visible{
background:linear-gradient(135deg,#f1d584,var(--gold));
box-shadow:0 20px 48px rgba(214,178,94,.22),0 18px 44px rgba(0,0,0,.3);
}
.outline{
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
color:var(--white);
border-color:var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.18);
}
.outline:hover,.outline:focus-visible{
border-color:rgba(214,178,94,.5);
color:var(--gold);
background:linear-gradient(145deg,rgba(214,178,94,.09),rgba(255,255,255,.02));
}
.danger{background:rgba(183,32,53,.14);color:#ffd8de;border-color:rgba(183,32,53,.36)}
.mini-btn{
min-height:34px;
padding:8px 12px;
font-size:.62rem;
box-shadow:none;
}
.flash{
margin-bottom:18px;
padding:14px 16px;
border-radius:8px;
border:1px solid var(--line);
background:rgba(255,255,255,.05);
color:var(--white);
}
.flash.success{border-color:rgba(107,214,160,.35);background:rgba(107,214,160,.1)}
.flash.error{border-color:rgba(183,32,53,.45);background:rgba(183,32,53,.14)}
.flash.info{border-color:rgba(214,178,94,.35);background:rgba(214,178,94,.1)}
.card,
.panel,
.flash{
animation:memberFadeUp .58s cubic-bezier(.2,.75,.25,1) both;
}
.hero .panel{animation-delay:.08s}
.shell > .card:nth-of-type(2){animation-delay:.12s}
form{display:grid;gap:14px}
.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
label{
display:grid;
gap:7px;
font-size:.72rem;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--gold);
}
input,
select,
textarea{
width:100%;
min-height:48px;
border:1px solid var(--line);
border-radius:8px;
padding:12px 14px;
background:rgba(0,0,0,.28);
color:var(--white);
outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,
select:focus,
textarea:focus{border-color:rgba(214,178,94,.58);box-shadow:0 0 0 3px rgba(214,178,94,.12)}
.small{font-size:.88rem;color:var(--muted)}
label.small{
display:flex;
align-items:flex-start;
gap:10px;
font-weight:700;
letter-spacing:0;
line-height:1.5;
text-transform:none;
}
label.small a{color:var(--gold);font-weight:900}
.small input[type="checkbox"]{width:auto;min-height:auto;margin-right:8px}
p strong{color:var(--white)}
.badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:6px 10px;
border-radius:999px;
border:1px solid var(--line);
font-size:.65rem;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--muted);
overflow-wrap:anywhere;
text-align:center;
}
.badge.gold{background:rgba(214,178,94,.14);color:var(--gold);border-color:rgba(214,178,94,.32)}
.badge.green{background:rgba(107,214,160,.12);color:var(--green);border-color:rgba(107,214,160,.35)}
.badge.red{background:rgba(183,32,53,.14);color:#ffb3c0;border-color:rgba(183,32,53,.35)}
.badge.rank{
border-color:rgba(214,178,94,.38);
background:linear-gradient(145deg,rgba(214,178,94,.16),rgba(255,255,255,.035));
color:var(--gold-strong);
}
.badge.rank-gold{border-color:rgba(232,200,117,.5);color:#f1d584}
.badge.rank-blue{border-color:rgba(78,130,230,.44);background:rgba(28,77,159,.18);color:#9dbfff}
.badge.rank-green{border-color:rgba(107,214,160,.4);background:rgba(107,214,160,.12);color:var(--green)}
.badge.rank-red{border-color:rgba(183,32,53,.45);background:rgba(183,32,53,.14);color:#ffb3c0}
.badge.rank-neutral{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.055);color:var(--white)}
.profile-card{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:18px;
align-items:center;
}
.profile-card > div{min-width:0;width:100%}
.profile-card h1{
font-size:clamp(2.05rem,4.5vw,4.35rem);
line-height:1;
overflow-wrap:anywhere;
text-wrap:balance;
text-transform:none;
}
.profile-card .lead{overflow-wrap:anywhere}
.member-rank-row,
.hall-rank-row{
margin-top:12px;
}
.avatar{
width:78px;
height:78px;
display:grid;
place-items:center;
border-radius:50%;
background:linear-gradient(145deg,var(--gold),#8f6f22);
color:#111;
font-size:1.5rem;
font-weight:900;
overflow:hidden;
border:1px solid rgba(214,178,94,.32);
}
img.avatar{
display:block;
object-fit:cover;
padding:0;
background:#111;
color:transparent;
}
.avatar-upload-panel{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:18px;
align-items:start;
padding:18px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
margin-bottom:18px;
}
.avatar-upload-panel .avatar{width:92px;height:92px}
.avatar-upload-copy{
display:grid;
gap:12px;
min-width:0;
}
.avatar-upload-copy p{margin:0}
.member-pass{
display:grid;
gap:18px;
min-height:280px;
background:
url("../../logo-640.webp") right 24px bottom 24px/160px auto no-repeat,
linear-gradient(135deg,rgba(214,178,94,.26),transparent 46%),
linear-gradient(145deg,#191712,#0b0b0b);
}
.member-pass .pass-top{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
}
.member-pass .pass-logo{width:72px;height:72px;object-fit:contain}
.member-number{font-size:1.8rem;font-weight:900;color:var(--gold)}
.member-number,
.member-pass h2,
.leaderboard-row strong,
.mini-feed strong,
.mini-feed p,
.member-admin-card p,
.hall-card h3,
.member-admin-card h3{
overflow-wrap:anywhere;
}
.bank-details{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:18px 0;
}
.bank-details div{
position:relative;
overflow:hidden;
padding:14px;
border:1px solid var(--line);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
rgba(0,0,0,.14);
transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.bank-details div:hover{
border-color:rgba(214,178,94,.35);
background:
linear-gradient(145deg,rgba(214,178,94,.1),rgba(255,255,255,.02)),
rgba(0,0,0,.14);
transform:translateY(-1px);
}
.bank-details span{
display:block;
margin-bottom:5px;
font-size:.62rem;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--gold);
}
.bank-details strong{
display:block;
overflow-wrap:anywhere;
color:var(--white);
}
.compact-bank{margin-top:14px}
.copy-toast{
position:fixed;
right:22px;
bottom:22px;
z-index:50;
max-width:min(320px,calc(100% - 44px));
padding:14px 16px;
border:1px solid rgba(214,178,94,.34);
border-radius:8px;
background:rgba(12,11,9,.96);
box-shadow:0 24px 70px rgba(0,0,0,.38);
color:var(--white);
font-size:.78rem;
font-weight:900;
letter-spacing:.08em;
line-height:1.35;
text-transform:uppercase;
opacity:0;
transform:translateY(12px);
pointer-events:none;
transition:opacity .2s ease,transform .2s ease;
}
.copy-toast.show{
opacity:1;
transform:translateY(0);
}
.dashboard-actions{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:10px;
align-items:center;
margin-top:24px;
}
.dashboard-actions .btn{width:100%}
.dashboard-grid .panel{min-height:260px}
.dash-score{
width:max-content;
margin:18px 0 8px;
padding:14px 18px;
border-radius:8px;
background:var(--gold);
color:#111;
font-size:2rem;
font-weight:900;
line-height:1;
}
.mini-feed,
.leaderboard-list{
display:grid;
gap:10px;
margin-top:16px;
}
.mini-feed article,
.leaderboard-row,
.consent-box{
padding:14px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.025);
}
.mini-feed strong,
.leaderboard-row strong{display:block;color:var(--white)}
.mini-feed span,
.leaderboard-row span{
display:block;
margin-top:4px;
font-size:.82rem;
color:var(--muted);
}
.leaderboard-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;min-width:760px;background:rgba(255,255,255,.025)}
th,td{padding:14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
td{color:var(--muted)}
td strong{color:var(--white)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form select{width:auto;min-width:150px}
.inline-form .btn,
.inline-form button.btn{
min-height:40px;
padding:10px 12px;
font-size:.62rem;
box-shadow:none;
}
.inline-form select{min-height:40px}
.wall-post{
display:grid;
gap:8px;
padding:18px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.025);
}
.wall-post header{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.85rem}
.footer{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
padding:26px;
border-top:1px solid var(--line);
color:var(--muted);
font-size:.86rem;
}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--gold)}
.matchday-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.matchday-tools,
.matchday-community{align-items:start}
.score-predictor-panel .small,
.prediction-trend p,
.matchday-chat .small{margin:10px 0 18px}
.score-inputs{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
gap:12px;
align-items:end;
}
.score-input{
min-width:0;
padding:16px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.028);
}
.score-input input{
height:68px;
margin-top:8px;
padding:10px;
font-size:2.2rem;
font-weight:900;
text-align:center;
color:var(--gold);
}
.score-separator{
display:grid;
place-items:center;
height:68px;
padding-bottom:3px;
font-size:2rem;
font-weight:900;
color:var(--gold);
}
.score-chip-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.score-chip{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:15px;
border:1px solid rgba(214,178,94,.24);
border-radius:8px;
background:linear-gradient(145deg,rgba(214,178,94,.15),rgba(255,255,255,.025));
animation:scorePulse 4.8s ease-in-out infinite;
}
.score-chip strong{
font-size:1.55rem;
line-height:1;
color:var(--gold);
}
.score-chip span{
font-size:.7rem;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--muted);
}
.vote-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:18px;
}
.vote-option{
display:grid;
gap:7px;
min-height:92px;
padding:16px;
border:1px solid var(--line);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
color:var(--white);
text-align:left;
cursor:pointer;
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.vote-option:hover,
.vote-option:focus-visible,
.vote-option.is-selected{
transform:translateY(-2px);
border-color:rgba(214,178,94,.42);
background:linear-gradient(145deg,rgba(214,178,94,.16),rgba(255,255,255,.024));
}
.vote-option strong{
font-size:1rem;
line-height:1.1;
color:var(--white);
}
.vote-option span{
font-size:.66rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--gold);
}
.mood-list,
.motm-list{
display:grid;
gap:10px;
margin-top:18px;
}
.mood-row,
.motm-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:13px 14px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
}
.mood-row span,
.motm-row span{
font-size:.82rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
}
.mood-row strong,
.motm-row strong{color:var(--gold)}
.prediction-list{
display:grid;
gap:10px;
margin-top:16px;
}
.prediction-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:14px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.025);
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.prediction-item:hover{
transform:translateY(-2px);
border-color:rgba(214,178,94,.3);
background:rgba(214,178,94,.055);
}
.prediction-item strong,
.chat-meta strong{display:block;color:var(--white)}
.prediction-item span,
.chat-meta span{
display:block;
font-size:.78rem;
color:var(--muted);
}
.prediction-item p{
grid-column:1/-1;
font-size:.95rem;
}
.admin-inline-action{
grid-column:1/-1;
margin-top:2px;
}
.prediction-score{
min-width:72px;
padding:10px 12px;
border-radius:8px;
background:var(--gold);
color:#111;
font-size:1.4rem;
font-weight:900;
line-height:1;
text-align:center;
}
.chat-list{
display:grid;
gap:10px;
max-height:360px;
overflow:auto;
padding-right:4px;
margin:16px 0;
}
.chat-message{
padding:14px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
}
.chat-message .admin-inline-action{margin-top:10px}
.chat-message:nth-child(even){background:rgba(214,178,94,.045)}
.chat-meta{
display:flex;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}
.chat-form{margin-top:14px}
.event-list{
display:grid;
gap:16px;
}
.event-card{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);
gap:20px;
align-items:start;
}
.event-rsvp{
padding:18px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(0,0,0,.18);
}
.hall-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.hall-card{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:16px;
align-items:start;
}
.hall-card > div{min-width:0}
.hall-moment{
margin-top:10px;
padding-top:10px;
border-top:1px solid var(--line);
}
.connect-hero .connect-stats{
align-self:stretch;
}
.connect-note{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:16px;
}
.connect-note > div{min-width:0}
.connect-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.connect-card{
display:grid;
align-content:start;
gap:16px;
min-height:100%;
}
.connect-card-head{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:15px;
align-items:center;
min-width:0;
}
.connect-card-head > div{min-width:0}
.connect-card h3{
font-size:clamp(1.35rem,2.15vw,1.9rem);
line-height:1.05;
overflow-wrap:anywhere;
text-transform:none;
}
.connect-avatar{
width:70px;
height:70px;
font-size:1.3rem;
}
.rank-badges{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.rank-manager-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:18px;
}
.rank-option{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:flex-start;
gap:12px;
min-width:0;
padding:15px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
color:var(--white);
letter-spacing:0;
text-transform:none;
transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.rank-option:hover,
.rank-option:focus-within{
transform:translateY(-1px);
border-color:rgba(214,178,94,.38);
background:rgba(214,178,94,.06);
}
.rank-option input{
width:auto;
min-height:auto;
margin-top:4px;
}
.rank-option span,
.rank-option strong,
.rank-option small{
display:block;
min-width:0;
overflow-wrap:anywhere;
}
.rank-option strong{
color:var(--white);
font-size:.95rem;
line-height:1.2;
}
.rank-option small{
margin-top:5px;
color:var(--muted);
font-size:.82rem;
line-height:1.45;
}
.connect-facts{
display:grid;
gap:8px;
min-width:0;
}
.connect-facts p,
.connect-facts strong{
overflow-wrap:anywhere;
}
.connect-actions{
margin-top:auto;
display:grid;
gap:10px;
}
.connect-request{
display:grid;
gap:10px;
}
.connect-request summary{
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:12px 14px;
border:1px solid var(--line);
border-radius:8px;
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
color:var(--white);
font-size:.72rem;
font-weight:900;
letter-spacing:.08em;
line-height:1.15;
text-align:center;
text-transform:uppercase;
cursor:pointer;
list-style:none;
transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}
.connect-request summary::-webkit-details-marker{display:none}
.connect-request summary:hover,
.connect-request summary:focus-visible{
transform:translateY(-2px);
border-color:rgba(214,178,94,.5);
color:var(--gold);
background:linear-gradient(145deg,rgba(214,178,94,.09),rgba(255,255,255,.02));
outline:none;
}
.connect-request form{
margin-top:10px;
padding:14px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(0,0,0,.18);
}
.connect-request textarea{
min-height:92px;
}
.connect-roadmap{
margin-top:16px;
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.gallery-item{
overflow:hidden;
border:1px solid var(--line);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
box-shadow:0 24px 80px rgba(0,0,0,.28);
animation:memberFadeUp .58s cubic-bezier(.2,.75,.25,1) both;
}
.gallery-item img{
display:block;
width:100%;
aspect-ratio:4/3;
object-fit:cover;
background:#090909;
}
.gallery-item div{
padding:16px;
}
.gallery-item h3{
font-size:1.1rem;
line-height:1.1;
}
.gallery-item span{
display:block;
margin-top:10px;
font-size:.82rem;
color:var(--muted);
}
.consent-box{
display:grid;
gap:12px;
margin-top:4px;
}
.hero + .grid .panel p,
.hero + .grid .panel .small{
margin-top:10px;
}
.footer a[href*="regeln"]{
color:var(--gold);
}
.section-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}
.section-title-row h2{font-size:clamp(1.9rem,3vw,3rem)}
.admin-command-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:12px;
margin-top:18px;
}
.admin-command{
position:relative;
overflow:hidden;
display:grid;
align-content:start;
gap:8px;
min-height:168px;
padding:18px;
border:1px solid var(--line);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
text-decoration:none;
transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.admin-command:hover,
.admin-command:focus-visible{
transform:translateY(-2px);
border-color:rgba(214,178,94,.42);
background:
linear-gradient(145deg,rgba(214,178,94,.14),rgba(255,255,255,.024));
box-shadow:0 18px 50px rgba(0,0,0,.26);
}
.admin-command span,
.admin-filterbar a,
.status-pill,
.ticker-event span{
font-size:.66rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
}
.admin-command span{color:var(--gold)}
.admin-command strong{
font-size:1.05rem;
line-height:1.15;
color:var(--white);
}
.admin-command p{font-size:.86rem;line-height:1.55}
.admin-mini-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:14px;
}
.admin-mini-stats div{
padding:15px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(0,0,0,.16);
}
.admin-mini-stats strong{
display:block;
font-size:1.8rem;
line-height:1;
color:var(--gold);
}
.admin-mini-stats span{
display:block;
margin-top:7px;
font-size:.72rem;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--muted);
}
.admin-filterbar{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:18px 0;
}
.admin-filterbar a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:9px 12px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(255,255,255,.026);
color:var(--muted);
text-decoration:none;
}
.admin-filterbar a:hover,
.admin-filterbar a:focus-visible,
.admin-filterbar a.is-active{
border-color:rgba(214,178,94,.45);
background:rgba(214,178,94,.11);
color:var(--gold);
}
.admin-db-banner{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;
gap:12px;
align-items:center;
margin:18px 0;
padding:14px;
border:1px solid rgba(214,178,94,.26);
border-radius:8px;
background:linear-gradient(145deg,rgba(214,178,94,.1),rgba(255,255,255,.022));
}
.admin-db-banner div,
.admin-db-banner p{min-width:0}
.admin-db-banner span{
display:block;
margin-bottom:4px;
font-size:.62rem;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--gold);
}
.admin-db-banner strong,
.admin-db-banner p{
overflow-wrap:anywhere;
}
.danger-zone{
border-color:rgba(183,32,53,.45);
background:
radial-gradient(circle at top right,rgba(183,32,53,.16),transparent 34%),
linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.member-admin-list{
display:grid;
gap:12px;
}
.member-admin-card{
display:grid;
grid-template-columns:minmax(240px,1fr) minmax(210px,.72fr) minmax(260px,.95fr);
gap:16px;
align-items:start;
padding:16px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.member-admin-card:hover{
transform:translateY(-2px);
border-color:rgba(214,178,94,.3);
background:rgba(214,178,94,.045);
}
.member-admin-card h3{
margin-bottom:6px;
font-size:1.25rem;
line-height:1.1;
}
.member-status-stack{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:flex-start;
}
.status-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:8px 10px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
background:rgba(255,255,255,.025);
}
.status-active,
.support-paid,
.support-sponsored,
.support-waived{
border-color:rgba(107,214,160,.35);
background:rgba(107,214,160,.1);
color:var(--green);
}
.status-pending,
.status-paused,
.support-open{
border-color:rgba(214,178,94,.35);
background:rgba(214,178,94,.1);
color:var(--gold);
}
.status-blocked{
border-color:rgba(183,32,53,.42);
background:rgba(183,32,53,.14);
color:#ffb3c0;
}
.admin-member-actions{
justify-content:flex-end;
}
.connect-admin-list{
display:grid;
gap:12px;
margin-top:18px;
}
.connect-admin-card{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:center;
min-width:0;
padding:16px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
}
.connect-admin-card > div{min-width:0}
.connect-admin-card h3{
font-size:1.18rem;
line-height:1.2;
text-transform:none;
overflow-wrap:anywhere;
}
.connect-admin-card p{overflow-wrap:anywhere}
.export-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.export-card{
display:grid;
align-content:space-between;
gap:18px;
min-height:230px;
}
.export-card h3,
.export-card p{
overflow-wrap:anywhere;
}
.export-card .btn{
width:100%;
}
.system-facts,
.system-table-checks{
display:grid;
gap:10px;
margin-top:16px;
}
.system-facts div,
.system-table-checks div{
min-width:0;
padding:14px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.025);
}
.system-facts span{
display:block;
margin-bottom:5px;
font-size:.62rem;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--gold);
}
.system-facts strong,
.system-table-checks strong{
display:block;
overflow-wrap:anywhere;
}
.system-table-checks div{
display:flex;
align-items:center;
gap:10px;
}
.ticker-compose form{margin-top:14px}
.matchday-live-card{
margin-bottom:16px;
}
.ticker-admin-list,
.ticker-list{
display:grid;
gap:12px;
}
.ticker-event{
display:grid;
grid-template-columns:74px minmax(0,1fr) auto;
gap:14px;
align-items:start;
padding:15px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.026);
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.ticker-event:hover{
transform:translateY(-2px);
border-color:rgba(214,178,94,.3);
background:rgba(214,178,94,.045);
}
.ticker-minute{
display:grid;
place-items:center;
min-width:58px;
min-height:50px;
padding:8px;
border-radius:8px;
background:linear-gradient(135deg,var(--gold),var(--gold-strong));
color:#111;
font-weight:900;
line-height:1;
text-align:center;
}
.ticker-event span{
display:block;
margin-bottom:6px;
color:var(--gold);
}
.ticker-event strong{
display:block;
font-size:1rem;
line-height:1.35;
color:var(--white);
}
.ticker-event p{
margin-top:7px;
font-size:.82rem;
color:var(--muted);
}
.ticker-goal{
border-color:rgba(107,214,160,.34);
background:linear-gradient(145deg,rgba(107,214,160,.1),rgba(255,255,255,.024));
}
.ticker-card{
border-color:rgba(232,200,117,.34);
background:linear-gradient(145deg,rgba(232,200,117,.11),rgba(255,255,255,.022));
}
.ticker-fulltime{
border-color:rgba(28,77,159,.34);
background:linear-gradient(145deg,rgba(28,77,159,.12),rgba(255,255,255,.022));
}
.ticker-empty{
padding:18px;
border:1px dashed rgba(214,178,94,.28);
border-radius:8px;
background:rgba(214,178,94,.055);
}
.ticker-empty strong{
display:block;
margin-bottom:6px;
color:var(--white);
}
@media(max-width:820px){
.topbar{align-items:flex-start;flex-direction:column}
.brand{white-space:normal}
.nav{justify-content:flex-start}
.hero,
.grid,
.grid.two,
.grid.three,
.form-grid{grid-template-columns:1fr}
.bank-details{grid-template-columns:1fr}
.actions .btn{width:100%}
.dashboard-actions{grid-template-columns:1fr}
.dashboard-actions .btn{width:100%}
.section-title-row,
.member-admin-card,
.connect-admin-card,
.admin-db-banner,
.ticker-event{grid-template-columns:1fr}
.section-title-row .btn{width:100%}
.admin-command-grid,
.admin-mini-stats{grid-template-columns:1fr}
.admin-member-actions{justify-content:stretch}
.inline-form,
.inline-form select,
.inline-form .btn,
.inline-form button.btn{width:100%}
.profile-card{grid-template-columns:1fr;text-align:center;justify-items:center}
.avatar-upload-panel{grid-template-columns:1fr;justify-items:center;text-align:center}
.member-pass .pass-top{display:grid}
.score-inputs{grid-template-columns:1fr}
.score-separator{height:auto;padding:0}
.score-chip-list,
.vote-grid{grid-template-columns:1fr}
.prediction-item{grid-template-columns:1fr}
.prediction-score{width:max-content}
.chat-meta{display:grid}
.leaderboard-row{display:grid}
.event-card{grid-template-columns:1fr}
.connect-note{display:grid}
.connect-note .btn{width:100%}
.connect-grid{grid-template-columns:1fr}
.export-grid{grid-template-columns:1fr}
.connect-card-head{grid-template-columns:1fr;justify-items:center;text-align:center}
.rank-badges{justify-content:center}
.rank-manager-grid{grid-template-columns:1fr}
.hall-grid,
.gallery-grid{grid-template-columns:1fr}
.hall-card{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}
}