:root { color-scheme: dark; --bg:#07080a; --surface:#111318; --surface-2:#191c22; --text:#f6f7f8; --muted:#a9adb7; --red:#d71920; --red-bright:#ff3239; --line:rgba(255,255,255,.1); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--text); }
a { color:inherit; font:inherit; }
.hidden { display:none !important; }

.site-header { min-height:76px; padding:10px clamp(18px,4vw,64px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; border-bottom:1px solid var(--line); background:rgba(7,8,10,.94); backdrop-filter:blur(18px); position:sticky; top:0; z-index:20; }
.brand { justify-self:start; display:flex; align-items:center; text-decoration:none; }
.brand img { display:block; width:auto; height:58px; object-fit:contain; transition:opacity .2s ease,transform .2s ease; }
.brand:hover img { opacity:.86; transform:scale(1.02); }
.main-nav { display:flex; align-items:center; justify-content:center; height:56px; gap:5px; }
.nav-link { position:relative; display:grid; place-items:center; min-height:44px; padding:0 17px; color:#b9bdc6; text-decoration:none; border-radius:9px; font-size:.92rem; font-weight:750; transition:.2s ease; }
.nav-link:hover { color:white; background:rgba(255,255,255,.055); }
.nav-link.active { color:white; }
.nav-link.active::after { content:""; position:absolute; left:16px; right:16px; bottom:1px; height:3px; border-radius:4px; background:var(--red-bright); }
.admin-button { justify-self:end; display:flex; align-items:center; justify-content:center; min-height:42px; padding:0 17px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.055); color:#e7e9ed; font-size:.86rem; font-weight:800; text-decoration:none; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.admin-button:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); transform:translateY(-1px); }

main { width:min(1500px,100%); margin:0 auto; padding:clamp(26px,4vw,54px) clamp(14px,3vw,42px) 36px; }
.home-view { display:grid; gap:clamp(20px,3vw,34px); }
.hero { min-height:440px; display:grid; grid-template-columns:1.4fr .6fr; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 83% 45%,rgba(215,25,32,.3),transparent 25rem),linear-gradient(125deg,#15171d,#090a0d 68%); padding:clamp(34px,7vw,100px); position:relative; }
.hero::before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,black); }
.hero-copy,.hero-logo { position:relative; z-index:1; }
.eyebrow { margin:0 0 10px; color:var(--red-bright); text-transform:uppercase; font-size:.76rem; font-weight:850; letter-spacing:.18em; }
h1,h2,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(2.55rem,5.7vw,6.3rem); line-height:.94; letter-spacing:-.065em; }
h1 span { color:var(--red-bright); }
.lead { max-width:700px; margin:28px 0 0; color:#c3c6cd; font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.65; }
.hero-logo { justify-self:end; width:clamp(210px,24vw,360px); filter:drop-shadow(0 30px 55px rgba(0,0,0,.5)); }
.hero-logo img { display:block; width:100%; height:auto; object-fit:contain; }

.home-section { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:clamp(28px,5vw,64px); }
.home-section h2,.season-panel h2 { margin:0; font-size:clamp(1.75rem,3.2vw,3.3rem); letter-spacing:-.045em; }
.about { display:grid; grid-template-columns:.25fr 1fr; gap:30px; }
.about>div { max-width:800px; }
.about p:last-child { color:var(--muted); font-size:1.03rem; line-height:1.75; }
.section-number { margin:0; color:#4b4e57; font-size:1rem; font-weight:900; }
.platforms { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:30px; }
.platform-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.platform { display:grid; place-items:center; min-height:78px; border-radius:13px; color:white; font-size:clamp(.92rem,1.4vw,1.12rem); font-weight:850; }
.dartcounter { background:linear-gradient(135deg,#ef7d00,#aa4300); }
.scolia { background:linear-gradient(135deg,#19a84a,#08752d); }
.autodarts { background:linear-gradient(135deg,#187fe5,#084d9c); }
.season-panel { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:clamp(28px,5vw,80px); border-radius:20px; padding:clamp(28px,5vw,58px); background:linear-gradient(115deg,#bd1117,#e12a30); box-shadow:0 22px 70px rgba(215,25,32,.19); }
.season-panel .eyebrow { color:rgba(255,255,255,.7); }
.season-stat { display:flex; flex-direction:column; min-width:130px; }
.season-stat strong { font-size:clamp(1.45rem,2.8vw,2.7rem); line-height:1; }
.season-stat span { margin-top:8px; color:rgba(255,255,255,.72); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }

.join-view { display:grid; gap:clamp(20px,3vw,34px); }
.join-hero { min-height:360px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; border:1px solid var(--line); border-radius:24px; padding:clamp(34px,7vw,92px); background:radial-gradient(circle at 84% 50%,rgba(215,25,32,.32),transparent 24rem),linear-gradient(125deg,#15171d,#090a0d 68%); position:relative; }
.join-hero::after { content:"KDA"; position:absolute; right:clamp(24px,7vw,100px); color:rgba(255,255,255,.035); font-size:clamp(7rem,19vw,18rem); font-weight:950; font-style:italic; letter-spacing:-.1em; pointer-events:none; }
.join-hero>* { position:relative; z-index:1; }
.join-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); }
.join-card { display:grid; grid-template-columns:auto 1fr; gap:22px; border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:clamp(26px,4vw,52px); }
.join-card h2,.fee-section h2,.discord-panel h2 { margin:0; font-size:clamp(1.7rem,3vw,3rem); letter-spacing:-.045em; }
.join-number { color:#4b4e57; font-size:.82rem; font-weight:900; padding-top:5px; }
.feature-list { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:15px; color:#c5c8d0; line-height:1.55; }
.feature-list li { position:relative; padding-left:27px; }
.feature-list li::before { content:""; position:absolute; left:0; top:.52em; width:9px; height:9px; border:2px solid var(--red-bright); border-radius:50%; }
.fee-section { border:1px solid var(--line); border-radius:20px; padding:clamp(28px,5vw,64px); background:linear-gradient(145deg,#111318,#0b0c0f); }
.fee-copy { max-width:760px; }
.fee-copy>p:last-child,.discord-panel p:last-child { color:var(--muted); font-size:1rem; line-height:1.7; }
.price-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.price-card { min-height:190px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:16px; padding:25px; background:var(--surface-2); text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.price-card:hover { transform:translateY(-4px); border-color:rgba(255,50,57,.65); background:#20232a; }
.price-card.featured { border-color:rgba(255,50,57,.55); background:linear-gradient(145deg,rgba(215,25,32,.24),#191c22); }
.price-card span { color:#c9ccd3; font-weight:750; }
.price-card strong { font-size:clamp(2.3rem,4vw,4rem); letter-spacing:-.06em; }
.price-card small { color:var(--red-bright); font-size:.76rem; font-weight:850; text-transform:uppercase; letter-spacing:.11em; }
.payment-note { margin:20px 0 0; color:#8f939d; font-size:.88rem; }
.discord-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; border-radius:20px; padding:clamp(28px,5vw,58px); background:linear-gradient(115deg,#bd1117,#e12a30); }
.discord-panel .eyebrow { color:rgba(255,255,255,.7); }
.discord-panel p:last-child { max-width:720px; margin-bottom:0; color:rgba(255,255,255,.78); }
.discord-button { display:flex; align-items:center; justify-content:center; gap:16px; min-height:58px; padding:0 25px; border-radius:11px; background:white; color:#a60e14; font-weight:900; text-decoration:none; white-space:nowrap; transition:transform .2s ease,box-shadow .2s ease; }
.discord-button:hover { transform:translateY(-2px); box-shadow:0 14px 35px rgba(0,0,0,.24); }
.discord-button span { font-size:1.45rem; }

.system-active main { width:100%; max-width:none; padding:0; }
.system-active footer { display:none; }
.system-view { width:100%; background:white; }
.frame-wrap { position:relative; width:100%; height:calc(100vh - 76px); min-height:700px; overflow:hidden; background:white; }
iframe { display:block; width:100%; height:calc(100% + var(--crop-top, 0px)); margin-top:calc(var(--crop-top, 0px) * -1); border:0; background:white; }
.loader { position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center; gap:12px; background:#0e1014; transition:opacity .25s ease,visibility .25s ease; }
.loader.hidden { opacity:0; visibility:hidden; }
.loader span { width:42px; height:42px; border:4px solid rgba(255,255,255,.14); border-top-color:var(--red-bright); border-radius:50%; animation:spin .85s linear infinite; }
.loader p { margin:0; color:var(--muted); }
@keyframes spin { to { transform:rotate(360deg); } }
footer { width:min(1500px,100%); margin:0 auto; padding:0 clamp(18px,4vw,64px) 34px; display:flex; justify-content:space-between; gap:20px; color:#777c87; font-size:.78rem; }

@media (max-width:960px) {
  .site-header { grid-template-columns:1fr auto; gap:10px; }
  .main-nav { grid-column:1/-1; grid-row:2; height:auto; border-top:1px solid var(--line); padding-top:8px; }
  .admin-button { grid-column:2; grid-row:1; }
  .hero { grid-template-columns:1fr; min-height:400px; }
  .hero-logo { justify-self:start; width:min(240px,62vw); margin-top:30px; }
  .platforms { grid-template-columns:1fr; align-items:start; }
  .join-grid { grid-template-columns:1fr; }
  .price-grid { grid-template-columns:repeat(2,1fr); }
  .discord-panel { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .site-header { padding:9px 12px 8px; }
  .brand img { height:48px; }
  .main-nav { justify-content:stretch; gap:0; overflow-x:auto; }
  .nav-link { flex:1; min-width:76px; padding:0 9px; font-size:.82rem; }
  main { padding-top:20px; }
  .hero { min-height:370px; padding:30px 22px; }
  .about { grid-template-columns:1fr; }
  .section-number { display:none; }
  .platform-row { grid-template-columns:1fr; }
  .platform { min-height:58px; }
  .season-panel { grid-template-columns:1fr 1fr; }
  .season-panel>div:first-child { grid-column:1/-1; }
  .season-stat { min-width:0; }
  .join-hero { min-height:320px; padding:32px 22px; }
  .join-card { grid-template-columns:1fr; }
  .join-number { display:none; }
  .price-grid { grid-template-columns:1fr; }
  .price-card { min-height:155px; }
  .discord-button { width:100%; }
  .frame-wrap { height:calc(100vh - 111px); min-height:600px; }
  footer { flex-direction:column; }
}