:root{
  --bg:#070b16; --panel:#10172a; --panel2:#151f38; --line:#263456;
  --text:#f4f7ff; --muted:#9eabc4; --accent:#52f28b; --accent2:#6fd3ff;
  --danger:#ff667d; --shadow:0 12px 35px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
radial-gradient(circle at 20% -10%,rgba(82,242,139,.12),transparent 30%),
radial-gradient(circle at 100% 10%,rgba(111,211,255,.10),transparent 26%),var(--bg);color:var(--text)}
button{font:inherit}
.app-shell{max-width:760px;margin:0 auto;min-height:100vh;padding:0 16px 96px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 2px 16px;position:sticky;top:0;z-index:10;
background:linear-gradient(180deg,var(--bg) 76%,rgba(7,11,22,0));backdrop-filter:blur(10px)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--muted);font-weight:700}
h1{font-size:1.45rem;letter-spacing:.05em;margin:4px 0 0} h1 span{color:var(--accent)}
h2{margin:.25rem 0 1rem;font-size:1.7rem} h3{margin:.1rem 0 .6rem}
p{color:#d3daea;line-height:1.55}
.card{background:linear-gradient(180deg,rgba(21,31,56,.95),rgba(13,20,37,.96));border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.hero{padding:22px;overflow:hidden;position:relative}
.hero:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-65px;top:-60px;background:rgba(82,242,139,.08);filter:blur(2px)}
.badge{display:inline-block;background:rgba(82,242,139,.12);color:var(--accent);border:1px solid rgba(82,242,139,.35);padding:7px 10px;border-radius:999px;font-size:.78rem;font-weight:800}
.hero h2{font-size:2rem;line-height:1.05;margin:.8rem 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.stats div{padding:10px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.stats strong,.stats span{display:block}.stats strong{font-size:1.05rem}.stats span{font-size:.68rem;color:var(--muted);margin-top:3px}
.countdown-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.countdown-label{color:var(--muted);font-size:.78rem}.countdown-box #countdown{font-weight:900;font-size:1.3rem;margin-top:4px;color:var(--accent2)}
.grid{display:grid;gap:12px}.grid.two{grid-template-columns:repeat(2,1fr);margin-top:12px}
.quick{color:var(--text);border:1px solid var(--line);padding:16px;text-align:left;display:flex;gap:12px;align-items:center;cursor:pointer}
.quick:hover{transform:translateY(-1px);border-color:#3d527d}.quick-icon{font-size:1.5rem}
.quick strong,.quick small{display:block}.quick small{color:var(--muted);margin-top:3px}
.notice{padding:16px;margin-top:12px}.notice h3{color:var(--accent)}
.page{display:none}.page.active{display:block}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:12px 0 14px}
.timeline{display:flex;flex-direction:column;gap:10px}
.timeline-item{display:grid;grid-template-columns:68px 1fr;gap:12px;align-items:start}
.time{font-weight:900;color:var(--accent2);padding-top:14px}
.timeline-card{padding:14px 16px}.timeline-card strong{display:block}.timeline-card span{display:block;color:var(--muted);font-size:.82rem;margin-top:4px}
.tournament{padding:17px}.tournament .game{font-size:1.5rem}.tournament p{margin-bottom:0}
.checklist{display:flex;flex-direction:column;gap:10px}
.check-row{display:flex;align-items:center;gap:12px;padding:14px 16px}
.check-row input{width:22px;height:22px;accent-color:var(--accent)}
.check-row.done label{text-decoration:line-through;color:var(--muted)}
.tip{margin-top:12px;padding:16px;color:#dce7ff}
.stack{display:flex;flex-direction:column;gap:10px}.info-card{padding:16px}
.ghost-btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:8px 11px;border-radius:11px;font-weight:700;cursor:pointer}
.ghost-btn{font-size:.8rem}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:10px;transform:translateX(-50%);width:min(calc(100% - 20px),740px);display:grid;grid-template-columns:repeat(5,1fr);
background:rgba(12,18,32,.92);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.45);backdrop-filter:blur(16px);border-radius:20px;padding:7px}
.nav-btn{border:0;background:transparent;color:var(--muted);padding:7px 3px;border-radius:14px;cursor:pointer}
.nav-btn span,.nav-btn small{display:block}.nav-btn span{font-size:1.15rem}.nav-btn small{font-size:.64rem;margin-top:2px}
.nav-btn.active{background:rgba(82,242,139,.1);color:var(--accent)}
@media (max-width:480px){
  .app-shell{padding-left:11px;padding-right:11px}
  .grid.two{grid-template-columns:1fr 1fr}
  .quick{padding:13px;gap:9px}.quick small{font-size:.72rem}
  .hero h2{font-size:1.75rem}.stats strong{font-size:.95rem}
}

.signup-cta{width:100%;margin-top:12px;border:0;border-radius:17px;padding:16px;background:linear-gradient(135deg,var(--accent),#74ff49);color:#06110b;font-weight:900;font-size:1.08rem;cursor:pointer;box-shadow:0 10px 28px rgba(82,242,139,.18)}
.signup-card{text-align:center;padding:24px}
.signup-icon{font-size:2.7rem}
.signup-price{font-size:2rem;font-weight:900;color:var(--accent);margin:.25rem 0 .65rem}
.signup-link{display:block;text-decoration:none;background:var(--accent);color:#06110b;padding:15px;border-radius:14px;font-weight:900;margin-top:16px}


.brand-wrap{display:flex;align-items:center;gap:12px}
.aif-logo{width:58px;height:58px;object-fit:contain;border-radius:50%;background:#ffffff;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
@media (max-width:480px){
  .aif-logo{width:48px;height:48px}
}


/* Chat */
.chat-head{align-items:center}
.chat-status{font-size:.68rem;font-weight:900;letter-spacing:.06em;padding:7px 9px;border-radius:999px;border:1px solid #465273;color:#c6cede;background:rgba(255,255,255,.04)}
.chat-status.live{color:var(--accent);border-color:rgba(82,242,139,.4);background:rgba(82,242,139,.10)}
.chat-setup{padding:22px;text-align:center}
.chat-setup-icon{font-size:2.6rem}
.chat-setup form{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:16px}
.chat-setup label{font-size:.78rem;color:var(--muted);font-weight:700}
.chat-setup input,.chat-composer input{width:100%;border:1px solid var(--line);background:#080e1c;color:var(--text);border-radius:13px;padding:13px 14px;outline:none}
.chat-setup input:focus,.chat-composer input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(111,211,255,.08)}
.primary-btn{border:0;background:var(--accent);color:#06110b;border-radius:13px;padding:13px 14px;font-weight:900;cursor:pointer}
.chat-room{display:flex;flex-direction:column;gap:10px}
.chat-tools{padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.chat-tools small,.chat-tools strong{display:block}.chat-tools small{color:var(--muted);font-size:.7rem}.chat-tools strong{margin-top:2px}
.chat-notice{border:1px solid rgba(111,211,255,.22);background:rgba(111,211,255,.07);border-radius:14px;padding:11px 13px;color:#cbd9ef;font-size:.78rem;line-height:1.45}
.chat-messages{height:48vh;min-height:320px;max-height:570px;overflow:auto;padding:8px 2px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth}
.chat-message{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.chat-message.own{align-self:flex-end;flex-direction:row-reverse}
.chat-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;font-size:.7rem;font-weight:900;background:#1d2945;color:var(--accent2);border:1px solid #34486f}
.chat-message.crew .chat-avatar{color:#06110b;background:var(--accent);border-color:var(--accent)}
.chat-bubble{background:#111a2e;border:1px solid var(--line);border-radius:15px 15px 15px 4px;padding:9px 11px;min-width:100px;box-shadow:0 7px 18px rgba(0,0,0,.16)}
.chat-message.own .chat-bubble{background:#173524;border-color:#285d3c;border-radius:15px 15px 4px 15px}
.chat-message.crew .chat-bubble{border-color:rgba(82,242,139,.38)}
.chat-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.chat-meta strong{font-size:.78rem}.chat-meta time{font-size:.64rem;color:var(--muted);margin-left:auto}
.crew-badge{font-size:.58rem;font-weight:950;letter-spacing:.06em;color:#06110b;background:var(--accent);border-radius:999px;padding:3px 6px}
.chat-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;line-height:1.42;color:#edf2fb}
.report-btn{border:0;background:transparent;color:#77849e;padding:5px 0 0;font-size:.62rem;cursor:pointer}
.empty-chat{color:var(--muted);text-align:center;padding:40px 15px}
.chat-composer{position:sticky;bottom:86px;display:grid;grid-template-columns:1fr 48px;gap:8px;padding-top:4px}
.chat-composer button{border:0;border-radius:13px;background:var(--accent);color:#06110b;font-size:1.25rem;font-weight:900;cursor:pointer}

/* Turneringstilmelding */
.tournament-intro{padding:15px 16px;margin-bottom:12px}.tournament-intro p{margin:.35rem 0 0}
.tournament-list{display:flex;flex-direction:column;gap:11px}
.tournament-card{padding:16px}.tournament-top{display:flex;align-items:center;gap:12px}.tournament-top .game{font-size:1.8rem}
.tournament-title{flex:1}.tournament-title h3{margin:0}.tournament-title span{font-size:.76rem;color:var(--muted)}
.registration-count{font-size:.72rem;color:var(--accent2);font-weight:800;text-align:right}
.tournament-signup-btn{width:100%;border:0;border-radius:13px;padding:12px;background:var(--accent);color:#06110b;font-weight:900;cursor:pointer}
.tournament-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.tournament-form[hidden]{display:none}.tournament-form label{font-size:.74rem;color:var(--muted);font-weight:800}
.tournament-form input,.tournament-form textarea{width:100%;background:#080e1c;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:11px 12px;font:inherit}
.tournament-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}.signup-feedback{font-size:.8rem;color:#ffcc78;min-height:1.2em}.signup-feedback.ok{color:var(--accent)}


/* V9: offentlig turneringsvisning viser kun antal tilmeldte */
.registration-count{
  display:flex;
  align-items:baseline;
  justify-content:center;
  min-width:92px;
  padding:9px 11px;
  border-radius:14px;
  background:rgba(82,242,139,.10);
  border:1px solid rgba(82,242,139,.28);
  color:var(--accent);
  white-space:nowrap;
}
.registration-count .count-number{
  font-size:1.35rem;
  line-height:1;
  font-weight:950;
}
.registration-count .count-label{
  margin-left:4px;
  font-size:.72rem;
  font-weight:800;
  color:#baf6cf;
}


/* V11: rigtigt navn ved turneringstilmelding */
.tournament-form .form-help{
  margin:-2px 0 3px;
  font-size:.69rem;
  line-height:1.35;
  color:var(--muted);
}
.tournament-form .optional{
  font-weight:500;
  opacity:.8;
}


/* V13 – Farvetema inspireret af alhedelan.dk / AlhedeLAN-logoet */
:root{
  --bg:#070816;
  --panel:#11152a;
  --panel2:#191833;
  --line:#352a63;
  --text:#ffffff;
  --muted:#b9b3d0;
  --accent:#7a2cf3;
  --accent2:#ff8a2b;
  --cyan:#25d8ff;
  --danger:#ff5f76;
  --shadow:0 12px 35px rgba(0,0,0,.34);
}

html,body{
  background:
    radial-gradient(circle at 12% -8%,rgba(122,44,243,.22),transparent 32%),
    radial-gradient(circle at 100% 5%,rgba(255,138,43,.13),transparent 28%),
    radial-gradient(circle at 50% 100%,rgba(37,216,255,.06),transparent 34%),
    var(--bg);
}

.topbar{
  background:linear-gradient(180deg,var(--bg) 76%,rgba(7,8,22,0));
}

h1 span{color:var(--accent2)}
.card{
  background:linear-gradient(180deg,rgba(25,24,51,.97),rgba(13,15,34,.98));
  border-color:var(--line);
}

.hero:after{
  background:rgba(122,44,243,.16);
}

.badge{
  background:rgba(255,138,43,.12);
  color:var(--accent2);
  border-color:rgba(255,138,43,.38);
}

.countdown-box #countdown,
.time{
  color:var(--accent2);
}

.quick:hover{
  border-color:#704bb6;
}

.notice h3,
.signup-price{
  color:var(--accent2);
}

.signup-cta{
  background:linear-gradient(135deg,var(--accent),#a44cff);
  color:#fff;
  box-shadow:0 10px 28px rgba(122,44,243,.30);
}

.signup-link,
.primary-btn,
.tournament-signup-btn,
.chat-composer button{
  background:linear-gradient(135deg,var(--accent),#9b3cff);
  color:#fff;
}

.bottom-nav{
  background:rgba(9,10,25,.94);
  border-color:#32275d;
}

.nav-btn.active{
  background:rgba(122,44,243,.18);
  color:#d8c3ff;
}

.chat-status.live{
  color:var(--cyan);
  border-color:rgba(37,216,255,.40);
  background:rgba(37,216,255,.10);
}

.chat-setup input:focus,
.chat-composer input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(122,44,243,.13);
}

.chat-avatar{
  background:#1b1840;
  color:var(--cyan);
  border-color:#453a78;
}

.chat-message.crew .chat-avatar,
.crew-badge{
  background:var(--accent2);
  border-color:var(--accent2);
  color:#160b02;
}

.chat-message.own .chat-bubble{
  background:#28184a;
  border-color:#6037a4;
}

.chat-message.crew .chat-bubble{
  border-color:rgba(255,138,43,.42);
}

.chat-notice{
  border-color:rgba(37,216,255,.26);
  background:rgba(37,216,255,.06);
}

.registration-count{
  background:rgba(255,138,43,.10);
  border-color:rgba(255,138,43,.34);
  color:var(--accent2);
}

.registration-count .count-label{
  color:#ffd0a5;
}

.check-row input{
  accent-color:var(--accent);
}

.tournament-form input:focus,
.tournament-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(122,44,243,.12);
}

.signup-feedback.ok{
  color:var(--cyan);
}

.aif-logo{
  box-shadow:
    0 0 0 2px rgba(122,44,243,.28),
    0 0 18px rgba(122,44,243,.16);
}


/* V14 – AlhedeLAN maskot + gamer/pixel typografi */
html,body,
button,input,textarea{
  font-family:"Oxanium","Trebuchet MS",system-ui,sans-serif;
}

h1,h2,
.section-head h2,
.hero h2,
.signup-card h3,
.tournament-title h3{
  font-family:"Press Start 2P","Arial Black",sans-serif;
  text-transform:uppercase;
  letter-spacing:.015em;
}

h1{
  font-size:1.15rem;
  line-height:1.45;
}

h2,
.section-head h2{
  font-size:1.25rem;
  line-height:1.45;
}

.hero{
  min-height:315px;
  padding-right:145px;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.hero-mascot{
  position:absolute;
  right:-4px;
  bottom:4px;
  width:155px;
  max-height:255px;
  object-fit:contain;
  object-position:right bottom;
  z-index:1;
  filter:drop-shadow(0 13px 20px rgba(0,0,0,.38));
  pointer-events:none;
}

.hero h2{
  font-size:1.28rem;
  line-height:1.55;
  max-width:430px;
}

.hero p{
  font-weight:500;
}

.quick strong,
.signup-cta,
.signup-link,
.primary-btn,
.tournament-signup-btn,
.nav-btn small,
.badge,
.eyebrow,
.registration-count{
  font-family:"Oxanium","Trebuchet MS",sans-serif;
  font-weight:800;
}

.card h3:not(.tournament-title h3){
  font-family:"Oxanium","Trebuchet MS",sans-serif;
  font-weight:800;
}

@media (max-width:600px){
  .hero{
    min-height:370px;
    padding-right:18px;
    padding-bottom:138px;
  }

  .hero-mascot{
    width:128px;
    right:8px;
    bottom:4px;
  }

  .hero h2{
    font-size:1.05rem;
    line-height:1.55;
    max-width:100%;
  }

  h2,
  .section-head h2{
    font-size:1.05rem;
  }

  h1{
    font-size:.95rem;
  }
}

@media (max-width:390px){
  .hero{
    padding-bottom:128px;
  }
  .hero-mascot{
    width:112px;
  }
  .hero h2{
    font-size:.92rem;
  }
}

.bottom-nav{grid-template-columns:repeat(6,minmax(0,1fr))}.live-intro{color:#a4b5d5;font-size:.88rem;margin-bottom:14px}.section-head a{text-decoration:none}.live-card{padding:20px}.live-card h3{margin-top:0}.live-empty{color:#a4b5d5;font-size:.88rem}.live-result{border-top:1px solid #263149;padding:16px 0;overflow-wrap:anywhere}.live-result p{font-size:.9rem;white-space:pre-line}.live-result small{color:#a4b5d5}.live-score{display:block;color:var(--accent);font-size:1.4rem}

.chat-connection{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}.chat-connection p{flex:1;min-width:200px;margin:0;padding:12px;border-radius:10px;background:#25162d;color:#f5d3e6;font:14px/1.6 system-ui,sans-serif}.chat-connection [hidden]{display:none!important}.chat-composer button{min-width:74px;font:700 15px system-ui,sans-serif}.chat-composer button:disabled{opacity:.6}.chat-body{white-space:pre-wrap;overflow-wrap:anywhere}.chat-meta strong{overflow-wrap:anywhere}

[hidden]{display:none!important}

.tournament-form fieldset{margin:0;padding:0;border:0;min-width:0;display:grid;gap:8px}

.schedule-day{margin:12px 0 4px;color:#d3daea;font-size:1rem;text-transform:capitalize}
.timeline-card span{white-space:pre-line}