/* ===== Schultz's Drukspil – natklub-tema v2 ===== */
:root {
  --bg:#07040C; --bg2:#0E0716; --card:rgba(255,255,255,.045); --card-solid:#15101F; --ink:#F7F1FB; --muted:#A99CC0;
  --pink:#FF2E93; --purple:#8B2BFF; --blue:#2E6BFF; --lime:#B6FF3B; --orange:#FF8A1F; --red:#FF3B3B; --teal:#2EE6C5;
  --line:rgba(255,255,255,.1); --line-hot:rgba(255,46,147,.55);
  --glow:0 0 0 1px rgba(255,46,147,.35), 0 8px 40px -8px rgba(255,46,147,.5);
  --f-hero:'Unbounded','Arial Black',Impact,sans-serif;
  --f-a:'Anton','Impact','Arial Narrow Bold',sans-serif;
  --f-b:'Bebas Neue','Impact',sans-serif;
  --f-c:'Syne','Arial Black',sans-serif;
  --body:'Barlow','Segoe UI',system-ui,sans-serif;
}
/* Sæsontemaer */
body[data-theme="jul"] { --pink:#FF2E4D; --purple:#0F8A4F; --blue:#E8B923; --line-hot:rgba(255,46,77,.55); --glow:0 0 0 1px rgba(255,46,77,.35), 0 8px 40px -8px rgba(255,46,77,.5); }
body[data-theme="nytaar"] { --pink:#FFC93B; --purple:#B07A1A; --blue:#EDEDED; --line-hot:rgba(255,201,59,.55); --glow:0 0 0 1px rgba(255,201,59,.35), 0 8px 40px -8px rgba(255,201,59,.45); }
body[data-theme="fastelavn"] { --pink:#FF4FB4; --purple:#FF8A1F; --blue:#2EE6C5; --line-hot:rgba(255,79,180,.55); }
body[data-theme="studiestart"] { --pink:#2E6BFF; --purple:#2EE6C5; --blue:#B6FF3B; --line-hot:rgba(46,107,255,.55); --glow:0 0 0 1px rgba(46,107,255,.35), 0 8px 40px -8px rgba(46,107,255,.5); }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; overflow-x:hidden; min-height:100vh; padding-bottom:env(safe-area-inset-bottom,0); }
h1,h2,h3,h4 { font-family:var(--f-c); font-weight:800; line-height:1.08; margin:0 0 .4em; letter-spacing:-.01em; }
a { color:inherit; } img { max-width:100%; display:block; } button,input,select,textarea { font:inherit; color:inherit; } button { cursor:pointer; }
:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; } .narrow { max-width:760px; } .center { text-align:center; } .muted { color:var(--muted); } .small { font-size:14px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } [hidden] { display:none !important; } main { position:relative; z-index:1; }
.f-a { font-family:var(--f-a); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(34px,6vw,60px); }
.f-b { font-family:var(--f-b); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(40px,7vw,72px); }
.f-c { font-family:var(--f-c); font-weight:800; font-size:clamp(30px,5vw,50px); letter-spacing:-.02em; }
.f-d { font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(24px,4.4vw,42px); letter-spacing:-.01em; }
.page-title { margin:0; }
.lead2 { font-size:clamp(18px,2.4vw,22px); font-weight:600; max-width:48ch; }

/* Baggrund */
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob { position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(110px); opacity:.28; will-change:transform; animation:drift 30s ease-in-out infinite alternate; }
.b1 { background:var(--pink); top:-25vmax; left:-20vmax; } .b2 { background:var(--purple); bottom:-30vmax; right:-20vmax; animation-delay:-10s; } .b3 { background:var(--blue); top:40%; left:50%; opacity:.12; animation-delay:-18s; }
@keyframes drift { to { transform:translate(8vmax,6vmax) scale(1.12); } }
.grain { position:absolute; inset:0; opacity:.07; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }

#loader { position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; text-align:center; font-family:var(--f-a); font-size:22px; letter-spacing:.1em; transition:opacity .35s; }
#loader.hide { opacity:0; pointer-events:none; }
#loader .spin { display:block; width:54px; height:54px; margin:0 auto 14px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:var(--pink); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Navigation */
.nav { position:sticky; top:0; z-index:60; background:rgba(7,4,12,.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0); }
.nav-in { display:flex; align-items:center; gap:14px; min-height:64px; }
.logo { font-family:var(--f-hero); font-weight:900; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.02em; }
.logo-mark { width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 0 14px var(--pink); flex:none; }
.logo-text { color:#fff; }
.menu { margin-left:auto; display:flex; align-items:center; gap:2px; }
.menu > a:not(.btn), #navAuth > a:not(.btn) { text-decoration:none; font-weight:600; padding:10px 13px; border-radius:10px; font-size:15px; color:var(--muted); }
.menu > a:not(.btn):hover { color:#fff; background:rgba(255,255,255,.06); }
.m-admin { color:var(--lime) !important; }
.lvl-chip { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; margin-left:6px; }
.iconbtn { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:17px; padding:0; position:relative; }
.iconbtn:hover { border-color:var(--pink); }
.iconbtn .off { display:none; } .iconbtn.muted .on { display:none; } .iconbtn.muted .off { display:inline; } .iconbtn.muted { opacity:.6; }
.bell { position:relative; background:none; border:0; font-size:19px; padding:10px 12px; }
.bell b { position:absolute; top:2px; right:2px; background:var(--pink); color:#fff; font-size:11px; min-width:18px; height:18px; border-radius:99px; display:grid; place-items:center; font-family:var(--body); }
.bell-wrap { position:relative; }
.bell-pop { position:absolute; right:0; top:52px; width:min(340px,90vw); background:var(--card-solid); border:1px solid var(--line-hot); border-radius:16px; box-shadow:var(--glow); padding:14px; display:flex; flex-direction:column; gap:10px; }
.bell-item { display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding-bottom:8px; } .bell-item span { color:var(--muted); font-size:15px; }
.link { color:var(--pink); font-weight:700; }
.burger { display:none; margin-left:auto; width:46px; height:46px; background:none; border:1px solid var(--line); border-radius:12px; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.burger span { width:22px; height:2px; background:#fff; border-radius:3px; }
@media (max-width:900px) {
  .burger { display:flex; }
  .menu { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(7,4,12,.97); flex-direction:column; align-items:stretch; padding:12px 20px 20px; border-bottom:1px solid var(--line); gap:6px; }
  .menu.open { display:flex; } #navAuth { display:contents; }
  .menu > a:not(.btn), #navAuth > a:not(.btn), .bell { padding:14px; font-size:17px; text-align:left; }
  .bell-pop { position:static; width:100%; margin-top:6px; } .iconbtn { align-self:flex-start; }
}

/* Knapper */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border:1px solid var(--line); background:rgba(255,255,255,.07); color:#fff; font-family:var(--body); font-weight:700; font-size:16px; letter-spacing:.02em; border-radius:12px; text-decoration:none; transition:transform .12s, box-shadow .15s, background .15s; }
.btn:hover { transform:translateY(-2px); background:rgba(255,255,255,.12); }
.btn:active { transform:translateY(1px) scale(.98); }
.btn.pink { background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; box-shadow:0 8px 28px -8px var(--pink); }
.btn.pink:hover { box-shadow:0 10px 36px -6px var(--pink); background:linear-gradient(135deg,var(--pink),var(--purple)); }
.btn.blue { background:linear-gradient(135deg,var(--blue),var(--purple)); border-color:transparent; }
.btn.lime { background:var(--lime); color:#0A0412; border-color:transparent; }
.btn.ghost { background:transparent; border-color:rgba(255,255,255,.28); } .btn.ghost:hover { background:rgba(255,255,255,.08); border-color:#fff; }
.btn.danger { background:var(--red); border-color:var(--red); color:#fff; }
.btn.small { min-height:40px; padding:8px 16px; font-size:14px; } .btn.big { min-height:56px; padding:14px 30px; font-size:17px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; } .btn-row.center { justify-content:center; }
.linkbtn { background:none; border:0; color:var(--pink); font-weight:700; text-decoration:underline; padding:0; }

/* Hero */
.hero { position:relative; min-height:min(92vh,800px); display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(ellipse 80% 70% at 50% 120%, color-mix(in srgb, var(--pink) 55%, transparent), transparent 70%), linear-gradient(#07040C,#0F0620); }
.hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; }
.lights { position:absolute; inset:0; width:100%; height:100%; z-index:1; mix-blend-mode:screen; }
.hero-shade { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(7,4,12,.55),rgba(7,4,12,.15) 40%,rgba(7,4,12,.85)); pointer-events:none; }
.hero-in { position:relative; z-index:3; padding-top:90px; padding-bottom:90px; }
.hero-title { font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(34px,8.4vw,104px); line-height:.98; letter-spacing:-.03em; margin:0 0 .3em; max-width:14ch; background:linear-gradient(180deg,#fff 20%,color-mix(in srgb, var(--pink) 60%, #fff)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 28px color-mix(in srgb, var(--pink) 60%, transparent)); }
.hero .lead { font-size:clamp(18px,2.3vw,24px); font-weight:600; max-width:34ch; margin:0 0 10px; text-shadow:0 2px 14px #000; }
.theme-tag { display:inline-block; border:1px solid var(--line-hot); border-radius:99px; padding:4px 14px; font-weight:700; font-size:14px; margin-bottom:16px; background:rgba(0,0,0,.4); }

.newsbar { background:rgba(255,255,255,.04); border-bottom:1px solid var(--line); }
.newsbar-in { display:flex; gap:12px 28px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.nb { display:flex; align-items:center; gap:10px; font-size:15px; } .nb b { font-weight:700; } .nb-body { color:var(--muted); }
.nb-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:6px; background:var(--pink); color:#fff; }
.nb.t-fejl .nb-tag { background:var(--orange); } .nb.t-info .nb-tag { background:var(--blue); }
@media (max-width:700px){ .nb-body { display:none; } }

.section { padding:72px 0 4px; }
.sec-head { margin-bottom:22px; } .sec-head h2 { margin:0 0 4px; }
.sec-trend .f-a { color:#fff; } .sec-top .f-b { color:#fff; text-shadow:0 0 30px var(--pink); }

/* Badges */
.badge { display:inline-block; font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:.08em; padding:3px 9px; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; backdrop-filter:blur(6px); }
.b-hot { background:var(--orange); color:#1B0A00; } .b-new { background:var(--lime); color:#0A0412; } .b-lock { background:#fff; color:#0A0412; } .b-key { background:var(--blue); color:#fff; }

/* Nyheder (profil) */
.news { display:grid; gap:12px; }
.news-item { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--pink); border-radius:14px; padding:16px 18px; }
.news-item.t-fejl { border-left-color:var(--orange); } .news-item.t-info { border-left-color:var(--blue); } .news-item.unread { box-shadow:var(--glow); }
.news-item h3 { font-family:var(--body); font-weight:700; font-size:19px; margin:8px 0 2px; } .news-item p { margin:0 0 6px; color:var(--muted); } .news-item time { font-size:13px; color:var(--pink); font-weight:700; }

/* Faner */
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tab { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 18px; border-radius:99px; font-weight:700; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.tab.on { background:#fff; color:#0A0412; border-color:#fff; } .tab:hover { border-color:var(--pink); color:#fff; } .tab.on:hover { color:#0A0412; }

/* Top 5 */
.rank-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rank { display:grid; grid-template-columns:56px 60px 1fr auto; gap:16px; align-items:center; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 20px 12px 14px; transition:transform .15s, border-color .15s, box-shadow .15s; }
.rank:hover { transform:translateX(6px); border-color:var(--c1,var(--pink)); box-shadow:0 8px 30px -10px var(--c1,var(--pink)); }
.rank.r0 { background:linear-gradient(90deg,color-mix(in srgb, var(--c1,var(--pink)) 28%, transparent),var(--card)); border-color:var(--c1,var(--pink)); }
.rank-no { font-family:var(--f-b); font-size:52px; line-height:1; text-align:center; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.55); }
.rank.r0 .rank-no { color:#fff; -webkit-text-stroke:0; text-shadow:0 0 22px var(--c1,var(--pink)); }
.rank-art { width:60px; height:60px; border-radius:14px; display:grid; place-items:center; font-size:28px; overflow:hidden; background:linear-gradient(135deg,var(--c1,var(--pink)),var(--c2,var(--purple))); }
.rank-art img { width:100%; height:100%; object-fit:cover; }
.rank-body b { font-family:var(--f-c); font-weight:800; font-size:20px; display:block; line-height:1.1; } .rank-body small, .rank-count small { color:var(--muted); font-weight:600; }
.rank-count { text-align:right; } .rank-count b { font-family:var(--f-b); font-size:32px; font-weight:400; display:block; line-height:1; }
@media (max-width:560px){ .rank { grid-template-columns:36px 50px 1fr; padding:10px 12px; gap:12px; } .rank-art { width:50px; height:50px; } .rank-count { display:none; } .rank-no { font-size:38px; } .rank-body b { font-size:17px; } }

/* Spilkort / plakater */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
@media (max-width:560px){ .grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
.card { position:relative; background:var(--card-solid); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.card:hover { transform:translateY(-6px); border-color:var(--pink); box-shadow:var(--glow); }
.card-link { display:block; text-decoration:none; }
.art { position:relative; height:170px; overflow:hidden; background:#120a1c; } .art img { width:100%; height:100%; object-fit:cover; }
.art.big { height:auto; min-height:300px; border-radius:22px; border:1px solid var(--line); box-shadow:var(--glow); } .art.big .poster { min-height:300px; }
.poster { position:relative; width:100%; height:100%; overflow:hidden; background:radial-gradient(120% 90% at 20% 0%,var(--c1),transparent 60%), radial-gradient(100% 90% at 100% 100%,var(--c2),transparent 62%), #12091d; }
.poster::before { content:""; position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay; }
.poster.p0::before { background:repeating-linear-gradient(115deg,rgba(255,255,255,.7) 0 1px,transparent 1px 14px); }
.poster.p1::before { background:radial-gradient(rgba(255,255,255,.8) 1px,transparent 1.5px) 0 0/16px 16px; }
.poster.p2::before { background:repeating-radial-gradient(circle at 80% 110%,rgba(255,255,255,.7) 0 1px,transparent 1px 18px); }
.poster.p3::before { background:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px) 0 0/22px 22px, linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px) 0 0/22px 22px; }
.poster-n { position:absolute; right:6%; bottom:-14%; font-family:var(--f-hero); font-weight:900; font-size:clamp(90px,14vw,150px); line-height:1; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.55); }
.art.big .poster-n { font-size:220px; }
.poster-e { position:absolute; left:14px; bottom:12px; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:24px; background:rgba(0,0,0,.4); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); }
.badges { position:absolute; top:10px; left:10px; right:54px; display:flex; flex-wrap:wrap; gap:6px; z-index:2; }
.card-body { padding:14px 16px 16px; } .card h3 { font-size:19px; margin:0 0 2px; }
.card .meta { margin:0; color:var(--pink); font-weight:700; font-size:14px; }
.card .facts { margin:8px 0 0; display:flex; gap:14px; color:var(--muted); font-weight:600; font-size:14px; flex-wrap:wrap; } .card .facts span { display:inline-flex; align-items:center; gap:5px; }
.ic { width:15px; height:15px; fill:currentColor; flex:none; }
.card .plays { margin:6px 0 0; color:var(--orange); font-weight:700; font-size:14px; }
.heart { position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.55); backdrop-filter:blur(6px); font-size:18px; display:grid; place-items:center; z-index:3; padding:0; transition:transform .15s; }
.heart:hover { transform:scale(1.15); } .heart.on { background:rgba(255,46,147,.4); border-color:var(--pink); } .heart.pop { animation:pop .4s; } @keyframes pop { 40%{ transform:scale(1.5);} }
@media (max-width:560px){ .art { height:120px; } .card h3 { font-size:16px; } .poster-n { font-size:80px; } .poster-e { width:36px; height:36px; font-size:18px; } }

/* Om siden */
.about { display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; }
@media (max-width:820px){ .about { grid-template-columns:1fr; } }
.about-feats { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.about-feats li { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 18px; display:grid; gap:2px; } .about-feats b { font-family:var(--f-c); font-size:17px; } .about-feats span { color:var(--muted); font-size:15px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px; }
.about-stats div { text-align:center; padding:18px 8px; border-top:1px solid var(--line); } .about-stats b { display:block; font-family:var(--f-b); font-size:clamp(34px,6vw,56px); line-height:1; color:#fff; } .about-stats span { color:var(--muted); font-weight:600; }

.sponsor { margin:56px auto 0; max-width:728px; position:relative; } .sponsor img { width:100%; border-radius:14px; border:1px solid var(--line); }
.sp-label { position:absolute; top:6px; left:8px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.7); padding:2px 8px; border-radius:6px; color:var(--muted); z-index:1; }
.cta-box { text-align:center; padding:48px 22px; border-radius:26px; background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 30%,transparent),color-mix(in srgb,var(--purple) 30%,transparent)); border:1px solid var(--line-hot); }
.perks { list-style:none; padding:0; margin:18px 0 26px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-weight:600; color:var(--muted); }

/* Sidehoved + filtre */
.pagehead { padding:44px 0 18px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.filters { display:grid; gap:14px; margin-bottom:24px; }
.search input, .field input, .field select, .field textarea, .add-row input, .inline-search input, .row-filters select { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:14px 16px; min-height:50px; }
.field select option, .row-filters select option { background:#15101F; color:#fff; }
.search input:focus, .field input:focus, .field select:focus, .field textarea:focus, .add-row input:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,46,147,.2); }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { border:1px solid var(--line); background:transparent; border-radius:99px; padding:9px 16px; font-weight:700; min-height:44px; color:var(--muted); }
.chip.on { background:#fff; color:#0A0412; border-color:#fff; } .chip:hover { border-color:var(--pink); color:#fff; } .chip.on:hover { color:#0A0412; }
.row-filters { display:flex; gap:14px; flex-wrap:wrap; } .row-filters label { flex:1 1 200px; font-weight:700; color:var(--muted); display:grid; gap:6px; }
.empty-note { text-align:center; font-size:20px; padding:40px 0; }

/* Spilside */
.back { display:inline-block; margin:22px 0 4px; text-decoration:none; font-weight:700; color:var(--muted); } .back:hover { color:#fff; }
.game-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:34px; align-items:center; margin:12px 0 30px; }
@media (max-width:820px){ .game-hero { grid-template-columns:1fr; } .art.big, .art.big .poster { min-height:210px; } .art.big .poster-n { font-size:140px; } }
.game-info h1 { font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(28px,5vw,52px); letter-spacing:-.02em; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } .pill { border:1px solid var(--line); border-radius:99px; padding:4px 14px; font-weight:600; font-size:14px; background:var(--card); display:inline-flex; gap:6px; align-items:center; } .pill.hot { background:var(--orange); color:#1B0A00; border-color:transparent; }
.popularity { color:var(--muted); } .popularity b { color:#fff; }
.lockbox { background:#fff; color:#0A0412; border-radius:14px; padding:14px 18px; font-weight:600; margin:12px 0; }
.heart-btn.on { border-color:var(--pink); background:rgba(255,46,147,.2); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:760px){ .two-col { grid-template-columns:1fr; } }
.box { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; } .box h2 { font-size:22px; } .box h3 { font-size:19px; } .prose { font-size:18px; }
.share { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; } .share-label { font-weight:700; color:var(--muted); margin-right:4px; }

/* Spillet */
.play { padding-bottom:70px; }
.play-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .play-tools { display:flex; gap:8px; align-items:center; margin-top:18px; }
.stage { max-width:680px; margin:0 auto; padding-top:10px; text-align:center; }
.stage-kicker { color:var(--pink); font-weight:700; margin:0 0 6px; } .stage-title { font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(26px,5vw,44px); letter-spacing:-.02em; }
.players { list-style:none; padding:0; margin:20px 0 14px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.players li { background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:99px; padding:8px 8px 8px 18px; font-weight:700; display:flex; gap:8px; align-items:center; font-size:17px; }
.players li button { background:rgba(255,255,255,.12); border:0; width:30px; height:30px; border-radius:50%; }
.add-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .add-row input { flex:1 1 200px; width:auto; } .warn { color:var(--orange); font-weight:700; } #pstart { margin-top:14px; }
.room { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; margin-top:14px; } @media (max-width:860px){ .room { grid-template-columns:1fr; } }
.room-main { text-align:center; } .tool-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.round { font-family:var(--f-b); font-size:30px; letter-spacing:.06em; color:var(--c1,var(--pink)); margin:0; }
.prompt-card { margin:14px 0 22px; padding:40px 24px; min-height:220px; display:grid; place-items:center; border-radius:26px; background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--c1,var(--pink)) 55%,transparent),transparent 60%), radial-gradient(120% 120% at 100% 100%,color-mix(in srgb,var(--c2,var(--purple)) 55%,transparent),transparent 60%), #130a1e; border:1px solid color-mix(in srgb,var(--c1,var(--pink)) 60%,transparent); box-shadow:0 20px 60px -20px var(--c1,var(--pink)); }
.prompt-card p { font-family:var(--f-c); font-weight:800; font-size:clamp(24px,5vw,38px); line-height:1.2; margin:0; }
.prompt-card.flip { animation:flipIn .35s ease; } @keyframes flipIn { from{ transform:rotateX(70deg) scale(.92); opacity:0; } }
.score { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; } .score h2 { font-size:18px; }
.score ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .score li { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; }
.score .sn { font-weight:700; overflow:hidden; text-overflow:ellipsis; } .score .sv { font-family:var(--f-b); font-size:28px; min-width:30px; text-align:right; }
.sb { display:flex; gap:4px; } .sb button { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.06); font-weight:800; }
.wheel-wrap { position:relative; width:min(78vw,420px); margin:8px auto 14px; } .wheel-wrap canvas { width:100%; height:auto; border-radius:50%; box-shadow:0 0 60px -10px var(--c1,var(--pink)); }
.wheel-pin { position:absolute; top:-12px; left:50%; width:0; height:0; margin-left:-14px; border-left:14px solid transparent; border-right:14px solid transparent; border-top:30px solid #fff; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.result { font-family:var(--f-c); font-weight:800; font-size:clamp(22px,4vw,32px); min-height:1.3em; margin:6px 0 0; }
.dice-row { display:flex; gap:34px; justify-content:center; padding:30px 0 20px; perspective:700px; }
.die { width:92px; height:92px; } .cube { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.face { position:absolute; inset:0; background:#fff; border-radius:16px; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:12px; backface-visibility:hidden; box-shadow:inset 0 0 14px rgba(0,0,0,.18); }
.face i { display:grid; place-items:center; } .face i.pip::after { content:""; width:15px; height:15px; border-radius:50%; background:#12091d; }
.f-front { transform:translateZ(46px); } .f-back { transform:rotateY(180deg) translateZ(46px); } .f-right { transform:rotateY(90deg) translateZ(46px); } .f-left { transform:rotateY(-90deg) translateZ(46px); } .f-top { transform:rotateX(90deg) translateZ(46px); } .f-bottom { transform:rotateX(-90deg) translateZ(46px); }
.podium { list-style:none; padding:0; margin:14px 0; display:grid; gap:8px; text-align:left; } .podium li { display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 16px; font-weight:700; } .podium li span { margin-left:auto; font-family:var(--f-b); font-size:24px; } .podium b { font-family:var(--f-b); font-size:26px; color:var(--pink); }
.winner { font-family:var(--f-hero); font-weight:900; font-size:clamp(22px,5vw,34px); margin:6px 0 12px; }
.strobe { position:fixed; inset:0; z-index:140; pointer-events:none; opacity:.28; animation:strobeCols 1.6s steps(1,end) infinite; }
@keyframes strobeCols { 0%{ background:var(--pink);} 25%{ background:var(--blue);} 50%{ background:var(--purple);} 75%{ background:var(--teal);} }
.strobe-stop { position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0)); left:0; right:0; margin:0 auto; width:max-content; max-width:92vw; z-index:160; }
.strobe-stop:hover, .strobe-stop:active { transform:none; }
.btn.on-air { background:var(--pink); border-color:var(--pink); }

/* Festkode */
.lobby-cards { margin-top:20px; } .code-input { text-transform:uppercase; letter-spacing:.35em; font-family:var(--f-b); font-size:30px !important; text-align:center; } .code-inline { font-family:var(--f-b); letter-spacing:.2em; font-size:22px; }
.lobby-head { display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap; margin:18px 0 8px; }
.code { font-family:var(--f-hero); font-weight:900; font-size:clamp(40px,10vw,76px); letter-spacing:.14em; line-height:1; background:linear-gradient(135deg,var(--pink),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.qr { width:170px; height:170px; border-radius:16px; background:#fff; border:6px solid #fff; }
.lobby-players li { position:relative; padding-left:34px; } .lobby-players .dot { position:absolute; left:14px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--muted); } .lobby-players li.on .dot { background:var(--lime); box-shadow:0 0 8px var(--lime); } .lobby-players li.me { border-color:var(--pink); }
.lobby-players small { color:var(--muted); font-weight:600; } .lobby-players .pt { font-family:var(--f-b); font-size:22px; color:var(--pink); }
.vote-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0; } .vote-btn { padding:14px 22px; border-radius:14px; border:1px solid var(--line); background:var(--card); font-weight:700; font-size:18px; } .vote-btn.sel { background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; } .vote-btn[disabled] { opacity:.6; } .vc { margin-left:8px; font-family:var(--f-b); font-size:22px; }
.host-ctl { position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:14px 0 calc(14px + env(safe-area-inset-bottom,0)); margin-top:24px; background:linear-gradient(transparent,var(--bg) 40%); z-index:30; }

/* Formularer */
.form { display:grid; gap:14px; } .field { display:grid; gap:6px; font-weight:700; color:var(--muted); } .field small { font-weight:400; } .field textarea { resize:vertical; }
.check { display:flex; gap:10px; align-items:flex-start; font-weight:600; } .check input { width:22px; height:22px; margin-top:3px; accent-color:var(--pink); flex:none; }
.errbox { background:rgba(255,59,59,.12); border:1px solid var(--red); border-radius:14px; padding:14px 18px; margin:14px 0; } .errbox ul { margin:6px 0 0; padding-left:20px; }
.auth { padding:40px 0; } .auth-box { max-width:480px; margin:0 auto; background:var(--card-solid); border:1px solid var(--line-hot); border-radius:24px; padding:26px; box-shadow:var(--glow); } .auth-tabs .tab { flex:1; justify-content:center; } .auth h1 { font-size:clamp(24px,5vw,32px); }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .cols.four { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.switches { border:1px solid var(--line); border-radius:14px; padding:14px 18px; display:grid; gap:12px; } .switches legend { font-weight:800; padding:0 8px; }
.wide { max-width:900px; } .thumb-prev { width:90px; height:90px; object-fit:cover; border-radius:12px; display:inline-block; vertical-align:middle; margin-right:12px; }

/* Profil */
.avatar-big { width:96px; height:96px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--pink),var(--purple)); display:grid; place-items:center; font-family:var(--f-hero); font-weight:900; font-size:40px; box-shadow:var(--glow); } .avatar-big img { width:100%; height:100%; object-fit:cover; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; } .stat { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; }
.stat b { display:block; font-family:var(--f-b); font-weight:400; font-size:clamp(30px,4vw,44px); color:#fff; line-height:1.05; overflow-wrap:anywhere; } .stat span { color:var(--muted); font-weight:600; }
.level-card { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; background:var(--card); border:1px solid var(--line-hot); border-radius:20px; padding:20px 24px; }
.level-badge { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--pink) calc(var(--p)*1%), rgba(255,255,255,.1) 0); position:relative; }
.level-badge::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--card-solid); } .level-badge b { position:relative; font-family:var(--f-b); font-size:34px; font-weight:400; }
.level-card h3 { margin:0; } .xp-bar { height:10px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; margin-top:8px; } .xp-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--purple),var(--pink)); }
.err404 { padding:90px 20px; } .err404 .lead { margin:20px 0 30px; }

/* Footer */
.footer { position:relative; z-index:1; margin-top:90px; background:rgba(0,0,0,.6); border-top:1px solid var(--line); padding:40px 0 26px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-top:20px; } @media (max-width:700px){ .foot-grid { grid-template-columns:1fr; } }
.footer h4 { font-size:14px; color:var(--pink); } .footer a { display:block; text-decoration:none; padding:4px 0; color:var(--muted); font-weight:600; } .footer a:hover { color:#fff; } .footer .sponsor a { padding:0; }
.copy { text-align:center; color:var(--muted); font-size:14px; margin:26px 20px 0; }

/* Modaler */
.modal-bg { position:fixed; inset:0; z-index:150; background:rgba(4,0,10,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:grid; place-items:center; padding:20px; }
.modal { position:relative; background:linear-gradient(160deg,#1d1030,#0f0719); border:1px solid var(--line-hot); border-radius:24px; box-shadow:var(--glow); padding:30px 26px; max-width:460px; width:100%; text-align:center; animation:modalIn .22s ease; }
@keyframes modalIn { from{ transform:scale(.92); opacity:0; } } .modal h2 { font-size:clamp(24px,5vw,30px); } .modal .btn-row { justify-content:center; }
.modal-emoji { font-size:52px; font-family:var(--f-hero); font-weight:900; margin-bottom:6px; }
.x { position:absolute; top:10px; right:12px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); border:0; font-size:18px; }
.roulette { min-height:150px; display:grid; place-items:center; } #rdEmoji { font-size:60px; display:block; } #rdName.final { color:#fff; text-shadow:0 0 24px var(--pink); }
.cookie { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0)); z-index:120; max-width:560px; margin:0 auto; background:var(--card-solid); border:1px solid var(--line-hot); border-radius:16px; padding:12px 16px; display:flex; align-items:center; gap:14px; font-size:15px; } .cookie p { margin:0; } .cookie a { color:var(--pink); }
.toasts { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom,0)); z-index:300; display:grid; gap:10px; width:min(440px,92vw); pointer-events:none; }
.toast { background:var(--card-solid); border:1px solid var(--line-hot); border-radius:14px; padding:13px 18px; font-weight:700; box-shadow:var(--glow); animation:toastIn .3s ease; } .toast.ok { border-color:var(--teal); } .toast.err { border-color:var(--orange); }
@keyframes toastIn { from{ transform:translateY(30px); opacity:0; } }
.confetti-bit { position:fixed; z-index:400; pointer-events:none; border-radius:2px; will-change:transform,opacity; }

/* Admin */
.admin-body { background:#0B0614; }
.adm { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.adm-side { background:#06030B; border-right:1px solid var(--line); padding:20px 14px; position:sticky; top:0; height:100vh; overflow:auto; } .adm-side nav { display:grid; gap:4px; margin-top:20px; }
.adm-side nav a, .adm-side .linkbtn { display:block; padding:12px 14px; border-radius:10px; text-decoration:none; font-weight:600; color:var(--ink); text-align:left; width:100%; } .adm-side nav a:hover, .adm-side .linkbtn:hover { background:rgba(255,255,255,.07); } .adm-side nav a.on { background:linear-gradient(135deg,var(--pink),var(--purple)); }
.adm-main { padding:28px clamp(16px,3vw,40px) 60px; min-width:0; } .adm-h { font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(22px,3.4vw,34px); letter-spacing:-.02em; }
.adm-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .adm-head .adm-h { margin:0; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--card); } .table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:middle; } .table th { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--pink); white-space:nowrap; } .table.mini td:last-child { text-align:right; font-weight:700; }
.tag { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px; border-radius:99px; margin-right:4px; } .tag.ok { background:rgba(182,255,59,.18); color:var(--lime); } .tag.off { background:rgba(255,255,255,.12); color:var(--muted); } .tag.lock { background:#fff; color:#0A0412; } .tag.key { background:rgba(46,107,255,.28); color:#9DB8FF; } .tag.plan { background:rgba(255,138,31,.2); color:var(--orange); }
.acts { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .acts form { margin:0; }
.bars { display:grid; gap:10px; } .bar-row { display:grid; grid-template-columns:110px 1fr 60px; gap:12px; align-items:center; } .bar-row .bar { height:14px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; } .bar-row .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--purple),var(--pink)); border-radius:99px; } .bar-row b { text-align:right; }
.heat { display:grid; grid-template-columns:70px repeat(24,minmax(14px,1fr)); gap:3px; font-size:11px; align-items:center; overflow-x:auto; min-width:640px; } .heat .hl { color:var(--muted); font-weight:700; } .heat .hc { height:22px; border-radius:4px; background:rgba(255,46,147,calc(.06 + var(--v)*.94)); } .heat .hh { text-align:center; color:var(--muted); }
.inline-search { display:flex; gap:8px; } .inline-search input { min-width:240px; } .install-body .wrap { padding-bottom:60px; } code { background:var(--card-solid); padding:2px 8px; border-radius:6px; }
@media (max-width:900px){ .adm { grid-template-columns:1fr; } .adm-side { position:static; height:auto; } .adm-side nav { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .bar-row { grid-template-columns:90px 1fr 50px; } }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ===== Nye spil: Hvem er mest tilbøjelig til, Sandhed eller konsekvens, Jeg har aldrig, Jeopardy ===== */
.likely-q { font-family:var(--f-c); font-weight:800; font-size:clamp(26px,5.6vw,46px); line-height:1.15; margin:8px 0 22px; letter-spacing:-.01em; }
.likely-q span { display:block; color:var(--c1,var(--pink)); font-size:.52em; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.never-pre { display:block; color:var(--c1,var(--pink)); font-size:.6em; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.result-big span { color:var(--c1,var(--pink)); }
.stage .chips, .cat-chips { justify-content:center; margin:14px 0; }
.tally-list { display:grid; gap:8px; max-width:440px; margin:14px auto; }
.tally-row { display:grid; grid-template-columns:1fr 44px 48px 58px; gap:8px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 12px; text-align:left; }
.tally-row span { font-weight:700; overflow:hidden; text-overflow:ellipsis; } .tally-row b { font-family:var(--f-b); font-size:28px; text-align:center; font-weight:400; }
.tally-row button { height:44px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.07); font-weight:800; }
.milestone { margin:16px auto; max-width:540px; padding:14px 18px; border-radius:14px; border:1px solid var(--line-hot); background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 28%,transparent),color-mix(in srgb,var(--purple) 28%,transparent)); font-weight:600; text-align:center; }
.board { max-width:640px; margin:30px auto 0; text-align:left; }
.board h3 { font-family:var(--f-b); font-weight:400; font-size:30px; letter-spacing:.06em; text-transform:uppercase; }
.board ol { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.board li { display:grid; grid-template-columns:28px minmax(0,1fr) 90px 130px; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.board .b-no { font-family:var(--f-b); font-size:26px; color:var(--pink); } .board .b-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; } .board .b-name small { display:block; color:var(--muted); font-weight:600; font-size:12px; }
.board .b-bar { height:8px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; } .board .b-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--purple),var(--pink)); }
.board .b-cnt { text-align:right; line-height:1.1; } .board .b-cnt b { font-family:var(--f-b); font-size:28px; font-weight:400; display:block; } .board .b-cnt small { color:var(--muted); font-size:12px; }
@media (max-width:560px){ .board li { grid-template-columns:26px minmax(0,1fr) 110px; } .board .b-bar { display:none; } }
.choose-cards { max-width:900px; margin:20px auto 0; } .choose-cards .box { align-content:start; }
.link-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.link-card { display:flex; flex-direction:column; gap:2px; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 20px; transition:transform .15s, border-color .15s; }
.link-card:hover { transform:translateX(6px); border-color:var(--pink); } .link-card span { font-family:var(--f-c); font-weight:800; font-size:20px; } .link-card small { color:var(--muted); }
#sChips, #preChips { margin-bottom:6px; }

.link-card.locked { opacity:.55; border-style:dashed; cursor:not-allowed; } .link-card.locked:hover { transform:none; border-color:var(--line); }

/* XP og ranks */
.role-badge { display:inline-block; font-weight:700; font-size:13px; padding:3px 12px; border-radius:99px; border:1px solid var(--line); background:var(--card); margin:0 6px 4px 0; }
.role-badge.r-admin { background:var(--lime); color:#0A0412; border-color:transparent; } .role-badge.r-partydaddy { background:linear-gradient(135deg,var(--orange),var(--pink)); border-color:transparent; } .role-badge.r-vip { background:linear-gradient(135deg,#FFD84D,#FF9A1F); color:#1B0A00; border-color:transparent; } .role-badge.r-boost { border-color:var(--line-hot); color:var(--pink-soft,#FF9BD0); }
.ptabs { margin-top:8px; } .sec-h { font-size:clamp(24px,3.6vw,34px); margin:34px 0 14px; }
.xp-hint { margin-bottom:10px; border-color:var(--line-hot); }
.rank-table { display:grid; gap:8px; }
.rt { display:grid; grid-template-columns:44px minmax(0,1fr) 90px 150px; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.rt.done { opacity:.7; } .rt.now { border-color:var(--pink); box-shadow:var(--glow); } .rt-ic { font-size:28px; text-align:center; } .rt-n b { display:block; font-family:var(--f-c); } .rt-n small, .rt-st { color:var(--muted); font-weight:600; font-size:14px; } .rt-xp { font-family:var(--f-b); font-size:24px; } .rt-st { text-align:right; }
@media (max-width:560px){ .rt { grid-template-columns:36px minmax(0,1fr) auto; } .rt-st { grid-column:2 / 4; text-align:left; } }
.role-info { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 6px; } .role-info div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; } .role-info b { display:block; } .role-info span { font-family:var(--f-b); font-size:28px; color:var(--pink); }

/* Advarselsbanner + nav-prikker */
.site-alert { position:relative; z-index:70; padding:10px 0; font-weight:600; font-size:15px; border-bottom:1px solid rgba(0,0,0,.3); }
.site-alert .wrap { padding-right:50px; position:relative; } .site-alert a { text-decoration:underline; font-weight:700; }
.site-alert.a-warning { background:#FFC93B; color:#1B1200; } .site-alert.a-error { background:var(--red); color:#fff; } .site-alert.a-info { background:var(--blue); color:#fff; }
.alert-x { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.2); color:inherit; font-size:15px; }
.dot-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--pink); color:#fff; font-size:11px; margin-left:4px; }
.hero-eyebrow { font-family:var(--f-b); letter-spacing:.18em; font-size:clamp(22px,4vw,36px); text-transform:uppercase; color:var(--pink-soft,#FF9BD0); margin:0 0 6px; text-shadow:0 0 18px var(--pink); }
.hero-title.big { font-size:clamp(40px,10.5vw,128px); max-width:11ch; }
.how { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; } @media (max-width:760px){ .how { grid-template-columns:1fr; } }
.how > div { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; } .how b { display:block; font-family:var(--f-c); font-size:20px; margin:6px 0 4px; } .how span.n { font-family:var(--f-b); font-size:44px; color:var(--pink); line-height:1; } .how p { margin:0; color:var(--muted); }
.maker { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 24px; }
.social { display:flex; gap:10px; flex-wrap:wrap; }
.legal h2 { font-size:22px; margin:30px 0 8px; } .legal h3 { font-size:17px; margin:20px 0 6px; } .legal p, .legal li { color:#E4D8EE; } .legal ul { padding-left:22px; } .legal .upd { color:var(--muted); font-size:14px; }
.msg-row { display:grid; gap:4px; } .msg-row.unread { border-left:4px solid var(--pink); }

/* Venner + invitation */
.f-list { display:grid; gap:10px; } .f-row { display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.av { width:48px; height:48px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--pink),var(--purple)); display:grid; place-items:center; font-family:var(--f-hero); font-weight:900; flex:none; } .av img { width:100%; height:100%; object-fit:cover; }
.f-info { flex:1; min-width:0; } .f-info b, .f-info small { display:block; overflow:hidden; text-overflow:ellipsis; } .f-info small { color:var(--muted); }
.f-act { display:flex; gap:8px; } .f-act form { margin:0; } .on-dot { width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); }
.invite-pop { position:fixed; inset:0; z-index:500; background:rgba(4,0,10,.88); backdrop-filter:blur(10px); display:grid; place-items:center; padding:20px; }
.invite-card { position:relative; max-width:460px; width:100%; max-height:90vh; overflow:auto; text-align:center; background:linear-gradient(160deg,#241038,#12061F); border:2px solid var(--pink); border-radius:26px; box-shadow:var(--glow), 0 0 80px -10px var(--pink); padding:30px 24px; animation:modalIn .25s ease; }
.invite-card .f-list { text-align:left; margin-top:14px; } .invite-av { width:92px; height:92px; margin:0 auto 10px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-family:var(--f-hero); font-size:40px; background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 0 30px var(--pink); animation:ring 1.2s ease-in-out infinite; } .invite-av img { width:100%; height:100%; object-fit:cover; }
@keyframes ring { 50% { transform:scale(1.08); } }
.ge-tabs { margin-bottom:14px; } .cat-box { border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px; background:rgba(255,255,255,.03); } .cat-box.new { border-style:dashed; border-color:var(--pink); }
.cat-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; } .cat-head input[type=text], .cat-head input:not([type]) { flex:1 1 220px; font-weight:700; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:44px; }
.ge textarea { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:12px 14px; }
.crop-wrap canvas { width:100%; max-width:720px; border-radius:14px; border:1px solid var(--line); touch-action:none; cursor:grab; display:block; margin:10px 0; }
.save-bar { position:sticky; bottom:0; z-index:20; display:flex; gap:14px; align-items:center; padding:14px 0; margin-top:16px; background:linear-gradient(transparent,#0B0614 35%); }

/* ===== Admin: nyt look ===== */
.admin-body { background:radial-gradient(80% 50% at 10% 0%, rgba(255,46,147,.12), transparent), #0A0612; }
.adm { grid-template-columns:270px 1fr; }
.adm-side { background:rgba(8,4,14,.9); border-right:1px solid var(--line); padding:18px 14px 30px; }
.adm-brand { display:flex; gap:12px; align-items:center; text-decoration:none; padding:8px 10px 18px; border-bottom:1px solid var(--line); margin-bottom:6px; } .adm-brand b { display:block; font-family:var(--f-hero); font-size:16px; letter-spacing:.04em; } .adm-brand small { color:var(--muted); font-size:12px; }
.adm-grp { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:18px 12px 6px; }
.adm-side nav { margin-top:0; gap:2px; }
.adm-side nav a, .adm-side .linkbtn { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; font-weight:600; color:var(--ink); text-decoration:none; position:relative; }
.adm-side .ni { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.07); font-size:17px; flex:none; }
.adm-side nav a:hover, .adm-side .linkbtn:hover { background:rgba(255,255,255,.06); }
.adm-side nav a.on { background:linear-gradient(135deg, rgba(255,46,147,.28), rgba(139,43,255,.22)); box-shadow:inset 0 0 0 1px rgba(255,46,147,.5); } .adm-side nav a.on .ni { background:linear-gradient(135deg,var(--pink),var(--purple)); }
.adm-side .dot-badge { margin-left:auto; }
.adm-main { padding:30px clamp(16px,3vw,44px) 70px; max-width:1180px; }
.adm-h { font-size:clamp(22px,3vw,32px); margin-bottom:18px; }
.quick { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:24px; }
.quick a { display:flex; gap:12px; align-items:center; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; transition:transform .15s, border-color .15s; position:relative; }
.quick a:hover { transform:translateY(-3px); border-color:var(--pink); } .quick .qi { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; background:linear-gradient(135deg,rgba(255,46,147,.35),rgba(139,43,255,.3)); flex:none; } .quick b { display:block; } .quick small { color:var(--muted); }
.gl { display:flex; gap:12px; align-items:center; } .gl-img { width:54px; height:36px; border-radius:8px; overflow:hidden; background:var(--card-solid); display:grid; place-items:center; flex:none; } .gl-img img { width:100%; height:100%; object-fit:cover; }
.u-card { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:18px; } .u-card .av { width:72px; height:72px; font-size:28px; }
.u-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:6px; } .u-facts div { background:rgba(255,255,255,.04); border-radius:10px; padding:8px 12px; } .u-facts small { display:block; color:var(--muted); font-size:12px; } .u-facts b { font-size:15px; }
@media (max-width:900px){
  .adm { grid-template-columns:1fr; } .adm-side { position:sticky; top:0; z-index:40; height:auto; padding:8px 10px; border-right:0; border-bottom:1px solid var(--line); }
  .adm-brand { display:none; } .adm-grp { display:none; } .adm-side nav { display:flex; overflow-x:auto; gap:6px; padding-bottom:4px; scrollbar-width:thin; }
  .adm-side nav a, .adm-side .linkbtn { flex:none; padding:8px 12px; background:rgba(255,255,255,.05); } .adm-side .ni { width:26px; height:26px; font-size:14px; background:none; } .adm-side nav form { flex:none; }
}

/* Live, venner, chat, frames */
.live-card { background:linear-gradient(135deg,rgba(255,46,147,.2),rgba(139,43,255,.18)); border:1px solid var(--line-hot); border-radius:20px; padding:20px 24px; margin-bottom:22px; display:grid; gap:14px; }
.live-main { display:flex; align-items:center; gap:16px; } .live-main small { display:block; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--muted); } .live-main b { font-family:var(--f-b); font-size:68px; line-height:1; }
.live-dot { width:16px; height:16px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(182,255,59,.7); animation:livePulse 1.6s infinite; } @keyframes livePulse { 70% { box-shadow:0 0 0 14px rgba(182,255,59,0); } 100% { box-shadow:0 0 0 0 rgba(182,255,59,0); } }
.live-sub { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; } .live-sub div { background:rgba(0,0,0,.25); border-radius:12px; padding:10px 14px; } .live-sub b { font-family:var(--f-b); font-size:32px; display:block; line-height:1; } .live-sub small { color:var(--muted); }
.live-pages { display:flex; flex-wrap:wrap; gap:8px; } .live-pages span { background:rgba(0,0,0,.3); border-radius:99px; padding:3px 12px; font-size:13px; } .live-pages b { color:var(--lime); margin-left:4px; }
.f-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } .f-badges .role-badge { font-size:11px; padding:1px 8px; margin:0; }
.lb { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .lb li { display:grid; grid-template-columns:34px 48px 1fr auto; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
.lb li.me { border-color:var(--pink); box-shadow:var(--glow); } .lb li.ph { opacity:.5; } .lb-n { font-family:var(--f-b); font-size:30px; color:var(--pink); text-align:center; } .lb li:nth-child(-n+3) .lb-n { color:var(--lime); }
.lb-i b, .lb-i small { display:block; } .lb-i small { color:var(--muted); } .lb-xp { text-align:right; } .lb-xp b { font-family:var(--f-b); font-size:26px; display:block; line-height:1; } .lb-xp small { color:var(--muted); }
.av[data-r], .avatar-big[data-r] { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--rc,#666); }
.av[data-r="1"],.avatar-big[data-r="1"]{--rc:#7a7a8c}.av[data-r="2"],.avatar-big[data-r="2"]{--rc:#c98b4a}.av[data-r="3"],.avatar-big[data-r="3"]{--rc:#d9d9e6}.av[data-r="4"],.avatar-big[data-r="4"]{--rc:#FFD84D}.av[data-r="5"],.avatar-big[data-r="5"]{--rc:#2EE6C5}
.av[data-r="6"],.avatar-big[data-r="6"]{--rc:#8B2BFF}.av[data-r="7"],.avatar-big[data-r="7"]{--rc:#FF2E93}.av[data-r="8"],.avatar-big[data-r="8"]{--rc:#2E6BFF}.av[data-r="9"],.avatar-big[data-r="9"]{--rc:#FF7A1A}
.av[data-r="10"],.avatar-big[data-r="10"]{ box-shadow:0 0 0 3px var(--bg), 0 0 0 6px #FFD84D, 0 0 22px #FFD84D; }
.chat-head { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.chat-log { height:min(58vh,520px); overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:16px 4px; } .chat-log.admin-chat { height:auto; max-height:70vh; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.cm { max-width:78%; padding:9px 13px; border-radius:16px; background:var(--card-solid); border:1px solid var(--line); } .cm.me { align-self:flex-end; background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; border-bottom-right-radius:4px; } .cm.them { align-self:flex-start; border-bottom-left-radius:4px; }
.cm p { margin:0; overflow-wrap:anywhere; } .cm small { display:block; opacity:.7; font-size:11px; margin-top:3px; } .cm img { max-width:100%; max-height:280px; border-radius:12px; display:block; margin-bottom:4px; }
.chat-row { display:flex; gap:8px; align-items:flex-end; } .chat-row textarea { flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:12px 14px; resize:none; min-height:48px; max-height:120px; } .chat-attach { cursor:pointer; flex:none; }
.react-bar { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:10px 0; } .react-bar button { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--card); font-size:22px; padding:0; transition:transform .12s; } .react-bar button:hover { transform:scale(1.2); }
.react-bit { position:fixed; z-index:450; pointer-events:none; font-size:38px; text-align:center; line-height:1; } .react-bit small { display:block; font-size:12px; font-weight:700; background:rgba(0,0,0,.6); border-radius:99px; padding:1px 8px; }
.pl-act { font-size:12px !important; width:auto !important; height:auto !important; padding:2px 8px !important; border-radius:99px !important; }
body.night { --pink:#D9578F; --purple:#6F3FB8; --blue:#3F69C8; --ink:#E9E1F0; --glow:0 0 0 1px rgba(217,87,143,.3), 0 8px 30px -10px rgba(217,87,143,.35); } body.night .blob { opacity:.16; } body.night .hero-title { filter:none; } body.night .lights { opacity:.55; }
.care { max-width:420px; } .care h2 { margin-bottom:6px; }

/* v8: kapitler, pause, vilde valg, aftenens tavle, overgange, tilskuer, lys tilstand */
.chapter { text-align:center; font-weight:700; color:var(--pink); letter-spacing:.1em; text-transform:uppercase; font-size:13px; margin:0 0 6px; }
.stage-in > * { animation:stageIn .35s ease both; } @keyframes stageIn { from { opacity:0; transform:translateY(14px) scale(.98); } }
.wyr-grid { display:grid; gap:12px; margin:18px 0; align-items:center; } .wyr-or { text-align:center; font-family:var(--f-b); letter-spacing:.2em; color:var(--muted); }
.wyr-btn { padding:26px 18px; border-radius:20px; border:1px solid var(--line); background:var(--card); font-family:var(--f-c); font-weight:800; font-size:clamp(20px,4.5vw,30px); transition:transform .12s, border-color .12s; } .wyr-btn:hover { transform:scale(1.02); border-color:var(--pink); } .wyr-btn.sel { background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; }
.tally-row.wide { grid-template-columns:1fr 44px 48px 58px; }
.evening { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:18px 0; } .evening h3 { grid-column:1/-1; margin:0; } .evening div { background:var(--card); border:1px solid var(--line-hot); border-radius:14px; padding:12px; text-align:center; } .evening small { display:block; color:var(--muted); font-size:12px; } .evening b { display:block; font-family:var(--f-c); } .evening span { font-family:var(--f-b); font-size:30px; color:var(--pink); }
.rep-btn { background:none; border:0; color:var(--muted); text-decoration:underline; }
body.watching .play-bar, body.watching .react-bar, body.watching .site-alert, body.watching header.nav, body.watching footer { display:none !important; }
body.watching .prompt-card p, body.watching .likely-q, body.watching .stage-title { font-size:clamp(34px,6vw,76px) !important; } body.watching .lobby-head .code { font-size:clamp(60px,12vw,150px); } body.watching .stage { max-width:1100px; } body.watching .players li { font-size:24px; }
body.light { --bg:#F7F3FB; --card:rgba(20,10,40,.05); --card-solid:#FFFFFF; --ink:#1B1030; --muted:#5E4F78; --line:rgba(30,10,60,.16); --glow:0 0 0 1px rgba(255,46,147,.35), 0 8px 30px -10px rgba(255,46,147,.4); }
body.light, html:has(body.light) { background:#F7F3FB; } body.light .nav { background:rgba(247,243,251,.85); } body.light .logo-text, body.light .adm-brand b { color:#1B1030; } body.light .footer { background:rgba(255,255,255,.7); } body.light .blob { opacity:.12; } body.light .btn { color:#1B1030; } body.light .btn.pink, body.light .btn.blue { color:#fff; } body.light .hero { color:#fff; } body.light .hero .lead, body.light .hero .theme-tag { color:#fff; } body.light .modal, body.light .invite-card { background:#fff; color:#1B1030; } body.light .modal-bg { background:rgba(247,243,251,.8); } body.light .menu > a:not(.btn) { color:#4a3a66; } body.light .field input, body.light .field select, body.light .field textarea, body.light .search input, body.light .add-row input { background:#fff; color:#1B1030; } body.light .poster-n { -webkit-text-stroke-color:rgba(255,255,255,.7); }

/* Imposter */
.imp-timer { text-align:center; margin:6px 0 14px; } .imp-timer small { display:block; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:12px; } .imp-timer b { font-family:var(--f-b); font-size:64px; line-height:1; }
.imp-card { margin:10px auto 16px; max-width:480px; padding:30px 22px; border-radius:24px; border:1px solid var(--line); background:var(--card); text-align:center; } .imp-card h1 { font-family:var(--f-hero); font-size:clamp(34px,8vw,56px); margin:6px 0 10px; text-transform:uppercase; } .imp-card small { letter-spacing:.2em; font-weight:700; }
.imp-card.is-imp { background:linear-gradient(135deg,rgba(255,59,59,.45),rgba(139,43,255,.4)); border-color:var(--red); box-shadow:0 0 50px -10px var(--red); } .imp-card.is-crew { background:linear-gradient(135deg,rgba(46,230,197,.3),rgba(46,107,255,.3)); border-color:var(--teal); }

/* v11: ugens spil, jeopardy, admin polish */
.weekly { display:flex; align-items:center; gap:16px; text-decoration:none; padding:18px 20px; border-radius:20px; background:linear-gradient(135deg,rgba(255,216,77,.22),rgba(255,46,147,.22)); border:1px solid #FFD84D; box-shadow:0 0 40px -14px #FFD84D; } .weekly-e { font-size:46px; } .weekly small { display:block; color:#FFD84D; letter-spacing:.14em; font-weight:700; } .weekly b { display:block; font-family:var(--f-c); font-size:26px; } .weekly i { color:var(--muted); font-style:normal; } .weekly > span:nth-child(2) { flex:1; }
.weekly-pill { display:inline-block; background:linear-gradient(135deg,#FFD84D,#FF7A1A); color:#1B1030; font-weight:700; border-radius:99px; padding:6px 16px; margin:0 0 10px; }
.jeo-prog { margin:0 0 16px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:16px; } .jeo-prog .xp-bar { margin:8px 0; }
.link-list li { position:relative; } .link-list li.is-played .link-card { border-color:var(--lime); background:linear-gradient(135deg,rgba(182,255,59,.12),transparent); } .link-list li.is-played::after { content:"SPILLET"; position:absolute; top:10px; right:12px; font-family:var(--f-b); letter-spacing:.14em; color:var(--lime); border:2px solid var(--lime); border-radius:8px; padding:0 8px; transform:rotate(-8deg); font-size:14px; pointer-events:none; }
.played-btn { margin:8px 0 4px; background:none; border:1px solid var(--line); color:var(--muted); border-radius:99px; padding:6px 14px; cursor:pointer; } .played-btn.on { border-color:var(--lime); color:var(--lime); }
/* admin: roligere og pænere */
.adm-side { background:#0C0716; } .adm-side nav a, .adm-side .linkbtn { padding:8px 10px; font-weight:500; font-size:15px; } .adm-side nav a.on { background:rgba(255,46,147,.16); box-shadow:inset 3px 0 0 var(--pink); border-radius:10px; } .adm-side nav a.on .ni { background:rgba(255,46,147,.35); }
.adm-grp { margin:22px 12px 6px; font-size:10.5px; opacity:.7; } .adm-side .ni { width:30px; height:30px; font-size:15px; background:rgba(255,255,255,.05); }
.adm-main { max-width:1100px; } .adm-main .box, .adm-main .form.box { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:20px 22px; } .adm-main h3 { font-size:17px; margin:0 0 12px; }
.adm-main .table-wrap { border-radius:16px; border:1px solid rgba(255,255,255,.07); overflow:hidden; } .adm-main .table th { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; } .adm-main .table td, .adm-main .table th { padding:12px 14px; } .adm-main .table tr:hover td { background:rgba(255,255,255,.025); }
.adm-main .live-card { border:1px solid rgba(255,255,255,.08); } .quick a { border-radius:16px; background:rgba(255,255,255,.04); } .quick .qi { background:rgba(255,46,147,.18); }

.rule-grid { display:grid; gap:12px; margin:16px 0; } .rule-card { text-align:left; padding:18px 20px; border-radius:18px; border:1px solid var(--line); background:var(--card); font-size:clamp(17px,3.6vw,22px); font-weight:600; transition:transform .12s, border-color .12s; } .rule-card small { display:block; color:var(--pink); letter-spacing:.14em; text-transform:uppercase; font-size:11px; margin-bottom:4px; } .rule-card:not([disabled]):hover { transform:scale(1.015); border-color:var(--pink); } .rule-card[disabled] { opacity:.8; }
.rule-sum { display:grid; gap:8px; margin:14px 0; } .rule-row { display:grid; grid-template-columns:130px 1fr; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-align:left; } .rule-row b { color:var(--pink); }

/* Regelspillet v2 */
.rule-card.c0 { border-color:#FF2E93; } .rule-card.c1 { border-color:#8B2BFF; } .rule-card.c2 { border-color:#2EE6C5; } .rule-card:active { animation:pickPop .35s; } @keyframes pickPop { 50% { transform:scale(1.07) rotate(-1.5deg); } }
.rule-flash { text-align:center; font-family:var(--f-hero); font-size:clamp(26px,7vw,48px); color:var(--lime); animation:flashOut 2.4s forwards; pointer-events:none; } .rule-flash small { display:block; font-size:16px; color:var(--ink); } @keyframes flashOut { 0% { transform:scale(.6); opacity:0; } 15% { transform:scale(1.15); opacity:1; } 70% { opacity:1; } 100% { opacity:0; height:0; margin:0; } }
.rule-set { position:fixed; inset:0; z-index:300; display:grid; place-items:center; background:radial-gradient(circle,#FF2E93,#2a0a40); animation:setOut 2.8s forwards; pointer-events:none; } .rule-set h1 { font-family:var(--f-hero); font-size:clamp(36px,11vw,110px); text-align:center; animation:setPop 1s ease; } @keyframes setPop { from { transform:scale(.2) rotate(-8deg); } } @keyframes setOut { 0%,70% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
.rule-pop { position:fixed; inset:0; z-index:310; display:grid; place-items:center; background:rgba(10,4,18,.94); text-align:center; padding:20px; } .rule-pop h1 { font-family:var(--f-hero); font-size:clamp(30px,8vw,70px); color:var(--lime); animation:ring 1s infinite; } .rule-pop p { font-size:22px; } .rule-pop small { letter-spacing:.3em; color:var(--pink); }
.rule-row em { font-style:normal; color:var(--lime); font-size:12px; margin-left:6px; } .rule-row { grid-template-columns:150px 1fr; } .rule-act { grid-column:1/-1; display:flex; gap:6px; }
.lb-mini { list-style:none; padding:0; margin:8px auto; max-width:320px; } .lb-mini li { display:flex; justify-content:space-between; padding:6px 12px; border-bottom:1px solid var(--line); } .lb-mini b { color:var(--pink); } .rl-add { background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:inherit; margin-right:6px; }

.prompt-card p { line-height:1.35; } .tag-pill { display:inline-block; margin:0 10px 6px 0; padding:3px 12px; border-radius:99px; background:linear-gradient(135deg,var(--pink),var(--purple)); font-size:.55em; font-weight:800; letter-spacing:.12em; text-transform:uppercase; vertical-align:middle; }
details.ans { margin-top:16px; } details.ans summary { display:inline-block; cursor:pointer; list-style:none; background:var(--lime); color:#1B1030; font-size:.6em; font-weight:800; padding:10px 22px; border-radius:99px; } details.ans summary::-webkit-details-marker { display:none; } details.ans[open] summary { display:none; } details.ans b { display:block; font-size:1.3em; color:var(--lime); animation:stageIn .3s both; }
@media (max-width:600px) { .prompt-card { padding:22px 18px; } .prompt-card p { font-size:clamp(20px,5.6vw,28px); } .btn.big { width:100%; } }

/* ===== v14: spil-design løft (alle spil) ===== */
.stage, #lstage, #sStage { text-align:center; }
.stage-title { font-family:var(--f-hero); font-size:clamp(28px,7.5vw,54px); line-height:1.05; margin:10px 0 14px; text-wrap:balance; }
.stage-title span { background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stage-kicker { display:inline-block; margin:0 0 6px; padding:5px 16px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid var(--line); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.prompt-card { margin:16px auto; max-width:640px; padding:34px 26px; border-radius:28px; background:linear-gradient(145deg,rgba(255,46,147,.22),rgba(139,43,255,.2) 55%,rgba(46,107,255,.18)); border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 50px -18px rgba(139,43,255,.7); font-family:var(--f-c); font-weight:800; font-size:clamp(22px,5.8vw,36px); line-height:1.25; }
.chips.cat-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0; }
.chip { padding:10px 18px; border-radius:99px; border:1px solid var(--line); background:rgba(255,255,255,.06); font-weight:700; font-size:15px; min-height:44px; transition:transform .12s, background .12s; } .chip:active { transform:scale(.95); }
.chip.on { background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; box-shadow:0 8px 22px -8px var(--pink); }
.btn.big { padding:18px 30px; font-size:20px; border-radius:20px; min-height:60px; box-shadow:0 14px 34px -12px rgba(255,46,147,.8); }
.host-ctl { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:16px 10px calc(16px + env(safe-area-inset-bottom,0px)); position:sticky; bottom:0; background:linear-gradient(transparent,rgba(7,4,12,.96) 30%); z-index:30; }
.host-ctl .btn { min-height:50px; }
.lobby-players, .players { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; list-style:none; padding:0; margin:12px 0; }
.lobby-players li, .players li { padding:8px 16px; border-radius:99px; background:rgba(255,255,255,.07); border:1px solid var(--line); font-weight:700; }
.rule-card { min-height:104px; display:flex; flex-direction:column; justify-content:center; text-align:center; font-family:var(--f-c); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border-width:2px; box-shadow:0 14px 34px -18px #000; }
.rule-card.c0 { background:linear-gradient(145deg,rgba(255,46,147,.3),rgba(255,46,147,.08)); } .rule-card.c1 { background:linear-gradient(145deg,rgba(139,43,255,.32),rgba(139,43,255,.08)); } .rule-card.c2 { background:linear-gradient(145deg,rgba(46,230,197,.28),rgba(46,230,197,.06)); }
.rule-card:not([disabled]):active { transform:scale(.97) rotate(-1deg); }
.rule-row { align-items:start; border-left:5px solid var(--pink); background:linear-gradient(90deg,rgba(255,46,147,.1),transparent); } .rule-row:nth-child(3n+2) { border-left-color:var(--purple); } .rule-row:nth-child(3n) { border-left-color:var(--teal); }
.rule-row span { font-size:clamp(16px,4.2vw,20px); font-weight:600; line-height:1.3; }
.vote-btn { padding:16px 20px; border-radius:18px; font-size:19px; font-weight:800; }
@media (max-width:600px) { .rule-row { grid-template-columns:1fr; gap:4px; } .stage-title { margin-top:6px; } }

/* når spillet kører: lille top, så spillet fylder skærmen */
.in-game #lhead { display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 0; }
.in-game #lhead .share, .in-game #lhead .qr, .in-game #lhead .muted.small { display:none; }
.in-game #lhead .stage-kicker { margin:0; } .in-game #lhead .code { font-size:20px; letter-spacing:.2em; margin:0; opacity:.8; }
.in-game .lobby-players, .in-game .players { margin:6px 0 10px; } .in-game .lobby-players li, .in-game .players li { padding:5px 12px; font-size:14px; }
.in-game #lstage { padding-bottom:110px; }
.in-game .host-ctl { gap:6px; padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px)); } .in-game .host-ctl .btn { min-height:40px; padding:8px 14px; font-size:14px; border-radius:14px; }
.in-game .react-bar { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin:4px 0; scrollbar-width:none; } .in-game .react-bar button { flex:none; width:40px; height:40px; font-size:19px; }
.in-game #lstage { padding-bottom:96px; }
.rule-act .pl-act, .pl-act { background:rgba(255,255,255,.1) !important; color:var(--ink) !important; border:1px solid var(--line) !important; font-weight:700; min-height:34px; padding:6px 14px !important; }
.rule-act .pl-act:first-child { background:linear-gradient(135deg,var(--pink),var(--purple)) !important; border-color:transparent !important; }
.rule-act { margin-top:6px; }

/* ===== v15: spilbannere, temaer og ny forside ===== */
.gicon { width:100%; height:100%; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); } .poster-svg { width:62%; height:62%; display:block; } .poster-svg .gicon { transition:transform .3s; } .game-card:hover .poster-svg .gicon { transform:scale(1.12) rotate(-5deg); }
.game-banner { --b1:var(--pink); --b2:var(--purple); display:flex; align-items:center; gap:18px; margin:6px 0 14px; padding:18px 20px; border-radius:26px; position:relative; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--b1) 38%,#0A0412),color-mix(in srgb,var(--b2) 34%,#0A0412)); border:1px solid color-mix(in srgb,var(--b1) 60%,transparent); box-shadow:0 20px 50px -22px var(--b1); }
.game-banner::before { content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--b1) 45%,transparent),transparent 45%), radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--b2) 45%,transparent),transparent 45%); animation:gbMove 9s ease-in-out infinite alternate; } @keyframes gbMove { to { transform:translate(6%,4%) rotate(8deg); } }
.gb-icon { position:relative; width:84px; height:84px; flex:none; animation:gbBob 3.2s ease-in-out infinite; } @keyframes gbBob { 50% { transform:translateY(-7px) rotate(-4deg); } }
.gb-text { position:relative; } .gb-text h2 { font-family:var(--f-hero); font-size:clamp(22px,6vw,38px); line-height:1; margin:0 0 6px; } .gb-text p { margin:0; color:rgba(255,255,255,.82); font-weight:600; font-size:clamp(14px,3.6vw,17px); }
[data-gt="hot-seat"] .game-banner, .game-banner[data-gt="hot-seat"] { --b1:#FF7A1A; --b2:#FF2E93; } .game-banner[data-gt="hot-seat"] .gb-icon { animation:flame 1.1s ease-in-out infinite alternate; transform-origin:50% 100%; } @keyframes flame { to { transform:scale(1.08,1.14) skewX(3deg); } }
.game-banner[data-gt="udfordringer"] { --b1:#8B2BFF; --b2:#FF2E93; } .game-banner[data-gt="udfordringer"] .gb-icon { animation:zap 2.4s infinite; } @keyframes zap { 0%,88%,100% { transform:none; filter:none; } 92% { transform:scale(1.15) rotate(-6deg); } 96% { transform:scale(1.05) rotate(4deg); } }
.game-banner[data-gt="regelspillet"] { --b1:#FFB020; --b2:#FF2E93; } .game-banner[data-gt="regelspillet"] .gb-icon { animation:gbBob 4s ease-in-out infinite; }
.game-banner[data-gt="lykkehjulet"] { --b1:#2EE6C5; --b2:#8B2BFF; } .game-banner[data-gt="lykkehjulet"] .gb-icon { animation:spinSlow 8s linear infinite; } @keyframes spinSlow { to { transform:rotate(360deg); } }
.game-banner[data-gt="filmquiz"] { --b1:#2E6BFF; --b2:#2EE6C5; border-style:dashed; border-width:2px; } .game-banner[data-gt="filmquiz"]::after { content:""; position:absolute; left:0; right:0; top:0; height:8px; background:repeating-linear-gradient(90deg,#fff 0 12px,transparent 12px 24px); opacity:.35; }
.game-banner[data-gt="5-sekunder"] { --b1:#B6FF3B; --b2:#2EE6C5; } .game-banner[data-gt="5-sekunder"] .gb-icon { animation:tick 1s steps(2) infinite; } @keyframes tick { 50% { transform:rotate(6deg); } } .game-banner[data-gt="5-sekunder"] .gb-text h2 { color:#B6FF3B; }
.game-banner[data-gt="imposter"] { --b1:#FF3B3B; --b2:#8B2BFF; } .game-banner[data-gt="vilde-valg"] { --b1:#2EE6C5; --b2:#FF2E93; }
@media (max-width:520px) { .gb-icon { width:64px; height:64px; } .game-banner { padding:14px; gap:12px; border-radius:22px; } }
.in-game .game-banner { padding:8px 14px; margin:0 0 6px; } .in-game .gb-icon { width:38px; height:38px; } .in-game .gb-text p { display:none; } .in-game .gb-text h2 { font-size:18px; margin:0; }
/* Forside */
.hero { position:relative; overflow:hidden; } .hero::after { content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none; background:radial-gradient(circle at 15% 25%,rgba(255,46,147,.45),transparent 40%),radial-gradient(circle at 85% 20%,rgba(46,107,255,.42),transparent 42%),radial-gradient(circle at 60% 90%,rgba(139,43,255,.5),transparent 45%); animation:meshMove 14s ease-in-out infinite alternate; mix-blend-mode:screen; }
@keyframes meshMove { to { transform:translate(5%,-4%) scale(1.08) rotate(6deg); } }
.hero-in { position:relative; z-index:3; } .hero-title.big { background:linear-gradient(100deg,#fff 10%,#FFB3DD 35%,#B6FF3B 55%,#2EE6C5 75%,#fff 95%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 6s linear infinite; text-shadow:none; filter:drop-shadow(0 0 28px rgba(255,46,147,.55)); } @keyframes shimmer { to { background-position:-220% 0; } }
.hero-floaters { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hf { position:absolute; width:clamp(54px,9vw,110px); opacity:.9; animation:floaty 7s ease-in-out infinite; } .hf0 { left:6%; top:14%; animation-delay:-1s; } .hf1 { right:7%; top:10%; animation-delay:-3s; width:clamp(64px,11vw,130px); } .hf2 { left:12%; bottom:12%; animation-delay:-2s; } .hf3 { right:14%; bottom:14%; animation-delay:-4s; } .hf4 { left:42%; top:6%; animation-delay:-5s; width:clamp(40px,6vw,70px); } .hf5 { right:30%; bottom:6%; animation-delay:-6s; width:clamp(44px,7vw,80px); } .hf6 { left:28%; bottom:4%; animation-delay:-2.5s; width:clamp(40px,6vw,70px); }
@keyframes floaty { 50% { transform:translateY(-18px) rotate(7deg); } }
@media (max-width:700px) { .hf4, .hf5, .hf6 { display:none; } .hf0 { top:6%; left:3%; } .hf1 { top:5%; right:3%; } .hf2 { bottom:4%; left:3%; } .hf3 { bottom:4%; right:3%; } }
.marquee { overflow:hidden; background:linear-gradient(90deg,#FF2E93,#8B2BFF,#2E6BFF); padding:10px 0; transform:rotate(-1deg) scale(1.02); margin:-6px 0 10px; box-shadow:0 14px 40px -16px #8B2BFF; position:relative; z-index:5; }
.marquee-track { display:flex; gap:38px; width:max-content; animation:marq 28s linear infinite; } @keyframes marq { to { transform:translateX(-50%); } } .mq-i { display:flex; align-items:center; gap:10px; } .mq-i .gicon { width:34px; height:34px; } .mq-i b { font-family:var(--f-b); font-size:24px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.game-card { transition:transform .2s, box-shadow .2s; } .game-card:hover { transform:translateY(-8px) rotate(-.6deg); box-shadow:0 30px 60px -24px var(--pink); }
.section .sec-h, .sec-h { position:relative; } .sec-h::after { content:""; display:block; width:70px; height:5px; border-radius:99px; background:linear-gradient(90deg,var(--pink),var(--blue)); margin-top:8px; }

/* ===== v16: mørk klub i stedet for kulørt ===== */
.hero::after { background:radial-gradient(circle at 20% 30%,rgba(255,30,70,.38),transparent 38%),radial-gradient(circle at 82% 25%,rgba(255,170,30,.22),transparent 36%),radial-gradient(circle at 55% 95%,rgba(150,10,90,.5),transparent 45%); }
.hero-floaters { display:none; }
.hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35; background:repeating-conic-gradient(from 200deg at 50% -10%,transparent 0 7deg,rgba(255,40,90,.35) 7.5deg 8deg,transparent 8.5deg 15deg); animation:lasers 9s ease-in-out infinite alternate; mix-blend-mode:screen; } @keyframes lasers { from { transform:rotate(-4deg); } to { transform:rotate(4deg); } }
.hero-title.big { background:none; -webkit-background-clip:initial; background-clip:initial; color:#fff; letter-spacing:.04em; animation:neon 3.5s infinite; filter:none; text-shadow:0 0 6px #fff,0 0 18px #ff2a6d,0 0 42px #ff2a6d,0 0 90px #c4006a; } @keyframes neon { 0%,18%,22%,62%,64%,100% { opacity:1; } 20%,63% { opacity:.72; } }
.age-badge { display:inline-block; padding:2px 10px; margin-right:8px; border:2px solid #ff2a6d; border-radius:8px; color:#ff2a6d; font-weight:800; box-shadow:0 0 14px rgba(255,42,109,.55), inset 0 0 10px rgba(255,42,109,.3); }
.hero-eyebrow { letter-spacing:.28em; text-transform:uppercase; } .hero-eyebrow.tagline { color:#FFC24B; text-shadow:0 0 18px rgba(255,170,30,.6); }
.hero-sub { max-width:540px; margin:12px auto 0; color:rgba(255,255,255,.72); font-size:clamp(14px,3.6vw,18px); }
.marquee { background:#0B0306; border-top:2px solid #ff2a6d; border-bottom:2px solid #ff2a6d; box-shadow:0 0 30px rgba(255,42,109,.45); transform:none; margin:0 0 10px; padding:12px 0; }
.mq-i b { color:#FFC24B; text-shadow:0 0 14px rgba(255,170,30,.5); } .mq-i .gicon { filter:grayscale(.55) brightness(1.1); width:30px; height:30px; } .marquee-track { gap:46px; }
.game-banner { background:linear-gradient(135deg,color-mix(in srgb,var(--b1) 20%,#0A0306),color-mix(in srgb,var(--b2) 18%,#0A0306)); border:1px solid color-mix(in srgb,var(--b1) 70%,transparent); box-shadow:0 0 34px -12px var(--b1), inset 0 0 40px -22px var(--b1); }
.game-banner::before { opacity:.55; }
.game-card:hover { box-shadow:0 0 40px -10px #ff2a6d, 0 26px 50px -26px #000; }
.btn.pink { background:linear-gradient(135deg,#ff2a6d,#c4006a); box-shadow:0 0 24px -4px rgba(255,42,109,.7); }

/* ===== v17: forside, scroll, lys tilstand, venner, admin ===== */
:root { --sy:0; }
body::before, body::after { content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.55; }
body::before { width:60vw; height:60vw; left:-20vw; top:10vh; background:#7a0a3a; transform:translateY(calc(var(--sy) * -.18px)); }
body::after { width:55vw; height:55vw; right:-18vw; top:55vh; background:#3a0a7a; transform:translateY(calc(var(--sy) * -.1px)); }
.section { position:relative; padding-top:56px; padding-bottom:56px; } .section + .section { border-top:1px solid rgba(255,255,255,.05); }
.section:nth-of-type(even) { background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.js-reveal .section, .js-reveal .game-card, .js-reveal .pd, .js-reveal .weekly { opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s ease; } .js-reveal .in { opacity:1; transform:none; }
.hero-in { display:flex; flex-direction:column; align-items:center; text-align:center; } .hero-eyebrow { text-wrap:balance; max-width:92vw; } .hero-title.big { text-wrap:balance; text-align:center; line-height:1; }
@media (max-width:600px) { .hero-eyebrow { letter-spacing:.14em; font-size:13px; } }
.sec-champs .sec-h { text-align:center; } .sec-champs .sec-h::after { margin-left:auto; margin-right:auto; }
.podium3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end; max-width:640px; margin:20px auto; }
.pd { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:18px 8px; border-radius:20px; background:var(--card); border:1px solid var(--line); } .pd b { font-family:var(--f-c); font-size:15px; overflow-wrap:anywhere; } .pd small { color:var(--muted); font-size:12px; }
.pd-medal { font-size:34px; } .pd-av { width:64px; height:64px; } .pd-xp { font-family:var(--f-b); font-size:28px; color:var(--pink); } .pd-xp i { font-style:normal; font-size:13px; color:var(--muted); }
.pd1 { padding-top:34px; padding-bottom:30px; border-color:#FFC24B; background:linear-gradient(180deg,rgba(255,194,75,.2),var(--card)); box-shadow:0 0 40px -12px #FFC24B; } .pd1 .pd-av { width:84px; height:84px; } .pd1 .pd-xp { color:#FFC24B; } .pd2 { border-color:#c9cdd8; } .pd3 { border-color:#c98b4a; }
/* Venner */
.fr-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:6px 0 18px; } .fr-hero div { padding:14px 12px; border-radius:18px; background:linear-gradient(135deg,rgba(255,42,109,.2),rgba(139,43,255,.14)); border:1px solid rgba(255,42,109,.35); text-align:center; } .fr-hero b { display:block; font-family:var(--f-b); font-size:24px; line-height:1.1; } .fr-hero span { color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.page-friends .tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; } .page-friends .tab { flex:none; padding:11px 18px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-weight:700; text-decoration:none; } .page-friends .tab.on { background:linear-gradient(135deg,#ff2a6d,#8B2BFF); border-color:transparent; box-shadow:0 8px 26px -10px #ff2a6d; }
.f-row { padding:14px 16px; border-radius:20px; transition:transform .15s, border-color .15s, box-shadow .15s; } .f-row:hover { transform:translateY(-2px); border-color:#ff2a6d; box-shadow:0 14px 34px -18px #ff2a6d; } .f-row .av { width:58px; height:58px; } .f-info b { font-size:17px; }
.lb li:nth-child(1) { border-color:#FFC24B; background:linear-gradient(90deg,rgba(255,194,75,.16),var(--card)); } .lb li:nth-child(2) { border-color:#c9cdd8; } .lb li:nth-child(3) { border-color:#c98b4a; } .lb li { border-radius:18px; padding:12px 16px; }
/* Admin */
.adm-search { padding:10px 6px 4px; } .adm-search input { width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:inherit; min-height:44px; }
.adm-side nav a { padding:10px 12px; font-size:15.5px; } .adm-side .ni { width:36px; height:36px; font-size:18px; } .adm-main { max-width:1180px; } .adm-h { font-size:clamp(26px,3.4vw,38px); }
.quick { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .quick a { padding:18px 18px; } .quick .qi { width:50px; height:50px; font-size:25px; border-radius:14px; } .quick b { font-size:17px; }
/* Lys tilstand, pænere */
body.light { --bg:#F6F2FB; --ink:#1B1030; --muted:#5E4F78; --card:#FFFFFF; --card-solid:#FFFFFF; --line:rgba(40,20,80,.14); background:#F6F2FB; color:#1B1030; }
body.light::before { background:#ffc2de; opacity:.6; } body.light::after { background:#d4c2ff; opacity:.6; }
body.light .game-card, body.light .box, body.light .f-row, body.light .lb li, body.light .pd, body.light .jeo-prog, body.light .fr-hero div { background:#fff; box-shadow:0 10px 30px -18px rgba(60,20,100,.4); } body.light .pd1 { background:linear-gradient(180deg,#FFF3D1,#fff); }
body.light .nav, body.light header.nav { background:rgba(246,242,251,.9); border-bottom:1px solid var(--line); } body.light .menu a:not(.btn) { color:#2b1d4a; }
body.light .footer { background:#fff; color:#1B1030; } body.light .footer a { color:#2b1d4a; } body.light h1, body.light h2, body.light h3, body.light .f-c, body.light .f-a { color:#1B1030; }
body.light .chip, body.light .tab { background:#fff; color:#1B1030; } body.light .section:nth-of-type(even) { background:linear-gradient(180deg,rgba(120,60,200,.05),transparent); }
body.light .prompt-card, body.light .rule-card { color:#1B1030; } body.light .game-banner { color:#fff; } body.light .modal, body.light .invite-card { background:#fff; color:#1B1030; }
body.light .hero, body.light .marquee, body.light .game-banner, body.light .btn.pink, body.light .btn.blue { color:#fff; }

.pd-medal { font-family:var(--f-b); font-size:30px; line-height:1; color:#fff; background:linear-gradient(135deg,#ff2a6d,#8B2BFF); border-radius:10px; padding:4px 14px; } .pd1 .pd-medal { background:linear-gradient(135deg,#FFC24B,#FF7A1A); color:#1B1030; }

/* Lykkehjulet */
.lw { max-width:640px; } .lw-stage { position:relative; width:min(94vw,560px); margin:10px auto 6px; touch-action:manipulation; } .lw-stage canvas { width:100%; aspect-ratio:1; display:block; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; filter:drop-shadow(0 20px 40px rgba(255,42,109,.35)); }
.lw-stage.hot canvas { filter:drop-shadow(0 0 50px rgba(255,194,75,.7)); }
.lw-ptr { position:absolute; left:50%; top:-6px; width:0; height:0; margin-left:-20px; border-left:20px solid transparent; border-right:20px solid transparent; border-top:44px solid #fff; z-index:3; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); transform-origin:50% 0; } .lw-ptr.wig { animation:ptrWig .12s; } @keyframes ptrWig { 40% { transform:rotate(-14deg); } }
.lw-out { text-align:center; min-height:84px; margin:8px 0 14px; } .lw-out small { display:block; letter-spacing:.3em; color:#FFC24B; font-weight:800; } .lw-out b { display:block; font-family:var(--f-hero); font-size:clamp(34px,10vw,64px); line-height:1.05; text-shadow:0 0 30px rgba(255,42,109,.7); animation:stageIn .4s both; overflow-wrap:anywhere; }
.lw-cols { display:grid; gap:14px; } @media (min-width:760px) { .lw-cols { grid-template-columns:1.2fr 1fr; } .lw { max-width:900px; } }
.lw-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; } .lw-row i { width:14px; height:34px; border-radius:6px; flex:none; } .lw-row input { flex:1; min-height:46px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:inherit; font-size:16px; } .lw-row button { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:inherit; }
.lw-actions, .lw-save { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .lw-save input, .lw-save select { flex:1; min-height:44px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:inherit; }
.lw-hist { margin:0 0 10px; padding:0; list-style:none; max-height:260px; overflow:auto; } .lw-hist li { padding:8px 4px; border-bottom:1px solid var(--line); font-weight:700; } .lw-hist span { color:var(--pink); margin-right:6px; }

/* Festkode-side */
form[action$="/fest/join"] { position:relative; overflow:hidden; border:1px solid rgba(255,42,109,.5); background:linear-gradient(160deg,rgba(255,42,109,.16),rgba(139,43,255,.12),rgba(10,3,6,.8)); box-shadow:0 0 60px -20px #ff2a6d; padding:28px 22px; } form[action$="/fest/join"]::before { content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg,transparent,rgba(255,42,109,.25),transparent 30%); animation:spinSlow 9s linear infinite; pointer-events:none; }
form[action$="/fest/join"] > * { position:relative; } form[action$="/fest/join"] input[name="code"], #jcode { font-family:var(--f-b); font-size:clamp(34px,11vw,64px); letter-spacing:.35em; text-align:center; text-transform:uppercase; padding:14px 8px; border-radius:18px; border:2px solid #ff2a6d; background:rgba(0,0,0,.45); color:#fff; text-shadow:0 0 18px #ff2a6d; box-shadow:0 0 30px -8px #ff2a6d; }
.host-hint { margin-top:16px; text-align:center; border:1px dashed rgba(255,255,255,.2); }
.cm.gone { align-self:center; max-width:92%; background:transparent; border:1px dashed rgba(255,80,110,.6); color:#ff8aa0; font-style:italic; font-family:Georgia,serif; text-align:center; font-size:14px; padding:8px 14px; }

.lf-box { margin:10px 0; padding:14px 16px; border-radius:18px; background:var(--card); border:1px solid var(--line); } .lf-box h4 { margin:0 0 8px; } .lf-list { display:grid; gap:8px; max-height:260px; overflow:auto; } .lf-row { display:flex; align-items:center; gap:10px; } .lf-row b { flex:1; } .lf-row small { color:var(--muted); } .off-dot { width:10px; height:10px; border-radius:50%; background:#555; }
.chat-typing { color:var(--muted); font-style:italic; font-size:14px; padding:2px 6px; } .chat-typing span { animation:blinkDot 1.2s infinite; } .chat-typing span:nth-child(2) { animation-delay:.2s; } .chat-typing span:nth-child(3) { animation-delay:.4s; } @keyframes blinkDot { 50% { opacity:.2; } }
.lw-share { text-align:center; margin:4px 0 8px; }

/* ===== v20: venteskærm, forside-sektioner ===== */
html, body { overflow-x:hidden; }
/* Venteside før spillet starter */
#lobby:not(.in-game) #lhead { text-align:center; padding:26px 18px; margin:8px 0 14px; border-radius:28px; position:relative; overflow:hidden; background:linear-gradient(160deg,rgba(255,42,109,.22),rgba(139,43,255,.16) 55%,rgba(10,3,6,.85)); border:1px solid rgba(255,42,109,.55); box-shadow:0 0 70px -22px #ff2a6d, inset 0 0 50px -30px #ff2a6d; }
#lobby:not(.in-game) #lhead::before { content:""; position:absolute; inset:-60%; background:conic-gradient(from 0deg,transparent,rgba(255,42,109,.22),transparent 28%); animation:spinSlow 11s linear infinite; pointer-events:none; }
#lobby:not(.in-game) #lhead > * { position:relative; }
#lobby:not(.in-game) #lhead .code { display:block; font-family:var(--f-b); font-size:clamp(60px,19vw,120px); line-height:1; letter-spacing:.18em; margin:6px 0 10px; color:#fff; text-shadow:0 0 8px #fff,0 0 26px #ff2a6d,0 0 60px #c4006a; padding-left:.18em; }
#lobby:not(.in-game) #lhead .qr, #lobby:not(.in-game) #lhead img { background:#fff; padding:12px; border-radius:20px; box-shadow:0 0 40px -6px #ff2a6d; margin:10px auto; display:block; max-width:210px; }
#lobby:not(.in-game) .lobby-players li { animation:popIn .5s both; border-color:rgba(255,42,109,.5); box-shadow:0 0 22px -10px #ff2a6d; font-size:17px; padding:10px 18px; } @keyframes popIn { from { transform:scale(.6); opacity:0; } }
#lobby:not(.in-game) #lstage { padding:22px 10px; } #lobby:not(.in-game) #lstage .stage-title { font-size:clamp(30px,9vw,56px); }
#lobby:not(.in-game) #lstage::after { content:"Venter på, at værten starter spillet…"; display:block; margin-top:18px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-size:13px; animation:waitPulse 1.8s ease-in-out infinite; } @keyframes waitPulse { 50% { opacity:.35; } }
/* Forsiden: sektioner der ikke bliver skåret af */
.section { overflow:visible !important; padding-left:0; padding-right:0; } .section .wrap, .wrap { max-width:1180px; padding-left:clamp(14px,4vw,28px); padding-right:clamp(14px,4vw,28px); }
.section .grid, .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:clamp(12px,3vw,22px); }
.game-card { min-width:0; } .game-card .art { aspect-ratio:16/10; height:auto; }
.sec-head { padding:0 2px; margin-bottom:18px; } .sec-head h2 { font-size:clamp(26px,6.5vw,44px); line-height:1.05; overflow-wrap:anywhere; }
.sec-top .tabs, .sec-champs, .sec-about { max-width:100%; } .podium3 { padding:0 4px; } .pd { min-width:0; }
@media (max-width:600px) { .section { padding-top:38px; padding-bottom:38px; } .grid { grid-template-columns:1fr 1fr; gap:12px; } }
@media (max-width:380px) { .grid { grid-template-columns:1fr; } }

.gif-panel { margin:8px 0; padding:10px; border-radius:16px; background:var(--card); border:1px solid var(--line); } .gif-panel input { width:100%; min-height:44px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:inherit; margin-bottom:8px; }
.gif-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-height:230px; overflow:auto; } .gif-grid button { padding:0; border:0; border-radius:10px; overflow:hidden; background:#000; aspect-ratio:1; cursor:pointer; } .gif-grid img { width:100%; height:100%; object-fit:cover; display:block; }

/* GIF-vælger: nyt layout */
.gif-panel { position:fixed; left:0; right:0; bottom:0; z-index:200; max-height:78vh; margin:0; padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px)); border-radius:24px 24px 0 0; background:#120818; border:1px solid rgba(255,42,109,.5); border-bottom:0; box-shadow:0 -20px 60px -10px rgba(0,0,0,.8); display:flex; flex-direction:column; }
.gif-panel[hidden] { display:none; } @media (min-width:700px) { .gif-panel { left:50%; right:auto; width:560px; transform:translateX(-50%); } }
.gif-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-family:var(--f-c); font-size:20px; } .gif-x { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.08); color:inherit; font-size:18px; }
.gif-panel input { min-height:50px; font-size:16px; border-radius:16px; margin-bottom:10px; }
.gif-grid { grid-template-columns:repeat(2,1fr); gap:8px; max-height:none; flex:1; overflow-y:auto; } .gif-grid button { aspect-ratio:auto; border-radius:14px; border:2px solid transparent; } .gif-grid button:active, .gif-grid button:hover { border-color:#ff2a6d; } .gif-grid img { height:auto; min-height:90px; object-fit:cover; }
/* v21: GIF-vælger rettet. GIF'er vises i fuld form, ikke som skårne striber */
.gif-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:min-content; align-content:start; align-items:start; gap:10px; min-height:0; flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.gif-grid button { display:block; width:100%; height:auto; aspect-ratio:auto; padding:0; border:2px solid transparent; border-radius:14px; overflow:hidden; background:#000; line-height:0; }
.gif-grid img { display:block; width:100%; height:auto; min-height:0; max-height:none; object-fit:contain; background:#000; }
@media (min-width:700px) { .gif-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.lw-party { text-align:center; padding:22px 16px; margin:8px 0 14px; border-radius:28px; background:linear-gradient(160deg,rgba(255,42,109,.22),rgba(139,43,255,.16) 55%,rgba(10,3,6,.85)); border:1px solid rgba(255,42,109,.55); box-shadow:0 0 70px -22px #ff2a6d; } .lw-party small { letter-spacing:.3em; color:#FFC24B; font-weight:800; }
.lw-code { font-family:var(--f-b); font-size:clamp(56px,18vw,110px); line-height:1; letter-spacing:.18em; padding-left:.18em; color:#fff; text-shadow:0 0 8px #fff,0 0 26px #ff2a6d,0 0 60px #c4006a; } .lw-qr { background:#fff; padding:10px; border-radius:18px; margin:8px auto; display:block; width:190px; height:190px; box-shadow:0 0 36px -6px #ff2a6d; }

/* Gruppechats */
.gc-av { font-size:22px; } .cm-who { display:block; font-size:12px; color:var(--pink); margin-bottom:2px; overflow-wrap:anywhere; }
.gc-panel { margin:10px 0 0; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:0 14px; } .gc-panel[open] { padding-bottom:14px; }
.gc-panel summary { min-height:48px; display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:700; list-style:none; } .gc-panel summary::-webkit-details-marker { display:none; } .gc-panel summary::after { content:"▾"; margin-left:auto; color:var(--muted); } .gc-panel[open] summary::after { content:"▴"; }
.gc-panel .f-list { margin-bottom:12px; } .gc-panel .f-row .av { width:44px; height:44px; } .gc-add { margin-bottom:10px; flex-wrap:wrap; } .gc-add select { flex:1 1 180px; min-height:44px; border-radius:12px; border:1px solid var(--line); background:var(--card-solid); color:inherit; padding:8px 12px; }
.gc-pick { display:grid; gap:8px; max-height:340px; overflow-y:auto; padding:2px; } .gc-opt { display:flex; align-items:center; gap:12px; min-height:60px; padding:8px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card); cursor:pointer; color:var(--ink); font-weight:400; }
.gc-opt input { width:24px; height:24px; min-height:0; flex:none; accent-color:var(--pink); padding:0; } .gc-opt .av { width:40px; height:40px; } .gc-opt:has(input:checked) { border-color:var(--pink); box-shadow:var(--glow); }
body.light .gc-opt, body.light .gc-panel { background:#fff; } body.light .cm-who { color:#C2187A; }

/* Vilde valg: reglen og afstemningen "Gjorde de det?" */
.wyr-rule { max-width:560px; margin:14px auto; padding:14px 18px; border-radius:16px; border:1px solid var(--line-hot,var(--line)); background:var(--card); text-align:left; } .wyr-rule b { font-family:var(--f-c); } .wyr-rule ol { margin:8px 0 0; padding-left:22px; display:grid; gap:4px; } .wyr-rule li { color:var(--muted); } .wyr-rule li b { color:var(--ink); font-family:inherit; }
.chk-q { text-align:center; font-family:var(--f-c); font-size:clamp(24px,6vw,36px); margin:18px 0 10px; }
.chk-list { display:grid; gap:10px; max-width:560px; margin:0 auto 12px; } .chk-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:16px; border:1px solid var(--line); background:var(--card); text-align:left; }
.chk-name { font-size:20px; overflow-wrap:anywhere; flex:1 1 120px; } .chk-btns { display:flex; gap:8px; flex:1 1 220px; } .chk-btns .btn { flex:1; min-height:56px; padding:10px 8px; } .chk-self { flex:1 1 220px; font-size:14px; }
.chk-row.ok { border-color:var(--lime); } .chk-row.bad { border-color:var(--pink); box-shadow:var(--glow); } .chk-verdict { font-weight:700; text-align:right; } .chk-verdict small { display:block; font-weight:400; color:var(--muted); } .chk-rule { margin-top:4px; }
body.light .wyr-rule, body.light .chk-row { background:#fff; } body.light .chk-row.ok { border-color:#5c9b00; }

/* ===== Achievements: kategorier, sjældenheder, samlet fremskridt og "Achievement unlocked" ===== */
.ach { --rc:#C9CDD8; } .r-common { --rc:#C9CDD8; } .r-rare { --rc:#4DA8FF; } .r-epic { --rc:#B66BFF; } .r-legendary { --rc:#FFD84D; } .r-secret { --rc:#2EE6C5; }
.ach-total { margin:0 0 18px; padding:18px; border-radius:20px; border:1px solid var(--line-hot); background:linear-gradient(135deg,rgba(255,46,147,.16),rgba(139,43,255,.12)); }
.ach-total-t { margin:0 0 10px; font-size:18px; } .ach-total-t b { font-family:var(--f-b); font-weight:400; font-size:30px; letter-spacing:.03em; color:#fff; }
.ach-total-bar { height:18px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; } .ach-total-bar i { display:block; height:100%; min-width:6px; border-radius:99px; background:linear-gradient(90deg,var(--purple),var(--pink),#FFD84D); box-shadow:0 0 18px var(--pink); }
.ach-legend { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.ach-r { display:inline-block; padding:2px 9px; border-radius:6px; border:1px solid var(--rc); color:var(--rc); font-family:var(--f-b); font-size:14px; letter-spacing:.1em; line-height:1.3; background:rgba(0,0,0,.25); }
.ach-tabs { margin-bottom:8px; } .ach-tabs .tab { gap:6px; cursor:pointer; font-family:inherit; font-size:15px; } .ach-n { opacity:.65; font-weight:700; font-size:13px; }
.ach-group[hidden] { display:none; } .ach-group-h { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:22px 2px 12px; font-family:var(--f-c); font-weight:800; font-size:22px; } .ach-group-h small { font-family:var(--body); font-weight:400; font-size:14px; color:var(--muted); }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.ach-card { position:relative; display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:start; padding:16px 14px 14px; border-radius:18px; border:1px solid var(--line); border-left:5px solid var(--rc); background:var(--card); overflow:hidden; }
.ach-card .ach-r { position:absolute; top:10px; right:10px; font-size:12px; padding:1px 7px; }
.ach-ic { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-size:30px; line-height:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); filter:grayscale(.85); opacity:.7; }
.ach-b { min-width:0; } .ach-t { display:block; padding-right:88px; font-size:17px; line-height:1.25; overflow-wrap:anywhere; } .ach-d { display:block; margin-top:2px; color:var(--muted); font-size:14px; line-height:1.35; }
.ach-bar { height:8px; margin-top:10px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; } .ach-bar i { display:block; height:100%; border-radius:99px; background:var(--rc); }
.ach-f { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px; } .ach-p { font-family:var(--f-b); font-size:20px; letter-spacing:.04em; color:var(--ink); } .ach-xp { font-family:var(--f-b); font-size:22px; letter-spacing:.03em; color:var(--lime); white-space:nowrap; }
.ach-card.done { border-color:var(--rc); background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 20%,transparent),var(--card)); box-shadow:0 0 34px -18px var(--rc); } .ach-card.done .ach-ic { filter:none; opacity:1; background:color-mix(in srgb,var(--rc) 26%,transparent); border-color:var(--rc); } .ach-card.done .ach-p { font-family:var(--body); font-size:15px; font-weight:700; letter-spacing:0; color:var(--rc); }
.ach-card.r-legendary { border-top-color:rgba(255,216,77,.45); border-right-color:rgba(255,216,77,.45); border-bottom-color:rgba(255,216,77,.45); } .ach-card.hid { border-style:dashed; border-left-style:solid; } .ach-card.hid .ach-t { font-family:var(--f-b); font-weight:400; font-size:26px; letter-spacing:.2em; } .ach-card.hid .ach-ic { filter:none; opacity:1; }
body.light .ach-total { background:linear-gradient(135deg,rgba(255,46,147,.12),rgba(139,43,255,.08)), #fff; } body.light .ach-total-t b { color:#1B1030; } body.light .ach-total-bar, body.light .ach-bar { background:rgba(30,10,60,.1); } body.light .ach-card { background:#fff; box-shadow:0 10px 30px -18px rgba(60,20,100,.4); } body.light .ach-ic { background:rgba(30,10,60,.05); border-color:rgba(30,10,60,.12); }
body.light .ach-r { background:#1B1030; } body.light .ach-xp { color:#3d6b00; } body.light .ach-card.done { background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 22%,#fff),#fff); } body.light .ach-card.done .ach-p { color:#1B1030; }
/* Animationen */
.ach-pop { position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:20px; cursor:pointer; background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rc) 34%,transparent),rgba(5,2,10,.95) 62%); animation:achBg .25s ease both; } .ach-pop.out { opacity:0; transition:opacity .25s; }
.ach-pop-card { width:min(440px,100%); padding:26px 22px 20px; border-radius:26px; text-align:center; color:#F7F1FB; border:2px solid var(--rc); background:linear-gradient(180deg,#1C1030,#0E0716); box-shadow:0 0 0 6px rgba(255,255,255,.04), 0 0 90px -10px var(--rc); animation:achCard .55s cubic-bezier(.2,.9,.3,1.35) both; }
.ach-pop-k { margin:0 0 10px; font-family:var(--f-b); font-size:22px; letter-spacing:.14em; color:var(--rc); } .ach-pop-i { font-size:76px; line-height:1.1; animation:achIcon .9s .2s cubic-bezier(.2,.9,.3,1.5) both; }
.ach-pop-card h2 { margin:6px 0 8px; font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(26px,7.5vw,40px); line-height:1.05; letter-spacing:-.02em; overflow-wrap:anywhere; }
.ach-pop-r { display:inline-block; margin:0 0 10px; padding:2px 12px; border-radius:6px; border:1px solid var(--rc); color:var(--rc); font-family:var(--f-b); font-size:16px; letter-spacing:.14em; } .ach-pop-d { margin:0 0 8px; font-size:18px; color:#D9CDEB; } .ach-pop-xp { margin:0 0 10px; font-family:var(--f-b); font-size:44px; line-height:1; color:#B6FF3B; text-shadow:0 0 22px rgba(182,255,59,.5); } .ach-pop-card small { color:#A99CC0; }
@keyframes achBg { from { opacity:0; } } @keyframes achCard { from { opacity:0; transform:scale(.6) translateY(30px); } } @keyframes achIcon { from { transform:scale(0) rotate(-30deg); } }
@media (prefers-reduced-motion:reduce) { .ach-pop, .ach-pop-card, .ach-pop-i { animation:none; } }

/* ===== Venner: "Nyt til dig" øverst, 5 faner med tal, og en roligere venneliste ===== */
.fr-page .pagehead { padding-bottom:10px; }
.fr-news { margin:0 0 18px; padding:14px; border-radius:20px; border:1px solid var(--line); background:var(--card); } .fr-news.has { border-color:var(--line-hot); background:linear-gradient(160deg,rgba(255,46,147,.14),rgba(139,43,255,.1)); box-shadow:0 0 50px -24px var(--pink); }
.fr-news-h { display:flex; align-items:center; gap:8px; margin:2px 4px 12px; font-family:var(--f-c); font-weight:800; font-size:22px; } .fr-news-h .dot-badge { min-width:24px; height:24px; font-size:13px; margin:0; }
.fr-new { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:16px; background:var(--card-solid); border:1px solid var(--line); border-left:5px solid var(--pink); } .fr-new + .fr-new { margin-top:8px; } .fr-new.is-group { border-left-color:var(--purple); } .fr-new.is-request { border-left-color:var(--lime); }
.fr-new-i { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:rgba(255,255,255,.07); } .fr-new-t { flex:1 1 180px; min-width:0; } .fr-new-t b { display:block; font-size:17px; overflow-wrap:anywhere; } .fr-new-t small { display:block; color:var(--muted); font-size:14px; }
.fr-quote { display:block; margin-top:2px; color:var(--ink); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fr-new > .btn { flex:none; } .fr-new-act { display:flex; gap:8px; } .fr-new-act form { margin:0; }
.fr-quiet { margin:0; padding:2px 4px; color:var(--muted); }
.page-friends .fr-tabs { margin-bottom:22px; } .fr-tabs .tab { gap:6px; } .fr-n { font-weight:700; opacity:.7; } .fr-tabs .dot-badge { min-width:22px; height:22px; font-size:12px; margin:0; } .fr-tabs .tab.on .dot-badge { background:#0A0412; color:#fff; }
.fr-search { margin:0 0 22px; } .fr-search label { display:block; margin:0 0 6px 2px; font-weight:700; } .fr-search .inline-search input { min-width:0; flex:1; }
.fr-sec { margin-bottom:26px; } .fr-sec-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 2px 12px; } .fr-sec h2 { margin:0; font-family:var(--f-c); font-weight:800; font-size:22px; line-height:1.2; } .fr-intro { max-width:64ch; }
.f-av { position:relative; flex:none; display:block; } .f-av .on-dot { position:absolute; right:1px; bottom:1px; width:14px; height:14px; border:2px solid var(--bg2); }
.f-row.has-new { border-color:var(--line-hot); background:linear-gradient(90deg,rgba(255,46,147,.14),var(--card)); } .fr-chat .dot-badge { background:#fff; color:#B3136D; margin-left:6px; } .btn.fr-rm { border-color:transparent; color:var(--muted); padding-left:10px; padding-right:10px; } .btn.fr-rm:hover, .btn.fr-rm:focus-visible { color:var(--red); border-color:var(--red); }
.fr-empty { text-align:center; padding:28px 18px; } .fr-empty-i { display:block; font-size:40px; line-height:1; margin-bottom:8px; } .fr-empty b { display:block; font-size:18px; margin-bottom:4px; } .fr-empty p { margin:0 auto; max-width:46ch; }
.fr-pills { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; } .fr-pills a { padding:8px 14px; min-height:40px; display:inline-flex; align-items:center; border-radius:12px; border:1px solid var(--line); color:var(--muted); font-weight:700; font-size:14px; text-decoration:none; } .fr-pills a.on { border-color:var(--pink); color:var(--ink); background:rgba(255,46,147,.14); } .fr-pills a:hover { border-color:var(--pink); }
@media (max-width:560px) { .page-friends .f-row { flex-wrap:wrap; row-gap:10px; } .page-friends .f-row .f-info { flex:1 1 140px; } .page-friends .f-row .f-act { flex:1 1 100%; justify-content:flex-end; } .fr-new > .btn, .fr-new-act { flex:1 1 100%; } .fr-new > .btn { justify-content:center; text-align:center; } .fr-new-act form { flex:1; } .fr-new-act .btn { width:100%; justify-content:center; } }
/* Notifikation, der fortæller hvad der er nyt (kan trykkes) + tal på menu-knappen på mobil */
.toast.news { display:flex; align-items:center; gap:12px; pointer-events:auto; text-decoration:none; color:var(--ink); cursor:pointer; } .tn-i { font-size:24px; line-height:1; } .tn-t b { display:block; } .tn-t small { display:block; font-weight:400; color:var(--muted); font-size:13px; }
.burger { position:relative; } .burger[data-n]::after { content:attr(data-n); position:absolute; top:-7px; right:-7px; min-width:22px; height:22px; padding:0 5px; border-radius:99px; display:grid; place-items:center; background:var(--pink); color:#fff; font-size:12px; font-weight:700; box-shadow:0 0 0 2px var(--bg); }
body.light .fr-news { background:#fff; } body.light .fr-news.has { background:linear-gradient(160deg,rgba(255,46,147,.12),rgba(139,43,255,.08)), #fff; } body.light .fr-new { background:#fff; } body.light .fr-new-i { background:rgba(30,10,60,.06); } body.light .f-av .on-dot { border-color:#fff; } body.light .f-row.has-new { background:linear-gradient(90deg,rgba(255,46,147,.12),#fff); } body.light .fr-pills a { background:#fff; } body.light .fr-pills a.on { background:rgba(255,46,147,.14); } body.light .fr-tabs .tab.on .dot-badge { background:#fff; color:#B3136D; } body.light .toast.news { color:#1B1030; }

/* ===== Galleri: en væg af festbilleder som instant-fotos under neonlys ===== */
.page-gallery { --paper:#F6F1E7; --paper-ink:#1B1030; --gold:#FFD84D; }
.gal-page { padding-bottom:50px; }
.gal-hero { padding:40px 0 6px; }
.gal-title { margin:0; font-family:var(--f-hero); font-weight:900; text-transform:uppercase; font-size:clamp(50px,15vw,128px); line-height:.9; letter-spacing:-.035em; color:#fff; text-shadow:0 0 5px #fff, 0 0 20px var(--pink), 0 0 54px var(--pink), 0 0 110px var(--purple); animation:galOn 1.1s steps(1,end) 1; }
@keyframes galOn { 0% { opacity:.15; } 10% { opacity:1; } 16% { opacity:.3; } 24% { opacity:1; } 30% { opacity:.55; } 38%,100% { opacity:1; } }
.gal-lead { max-width:60ch; margin:18px 0 0; font-size:18px; line-height:1.5; color:var(--muted); } .gal-count { color:var(--ink); font-weight:600; }

/* Tilbuddet: en gylden drinksbon */
.gal-bon { display:grid; grid-template-columns:auto 1fr; align-items:stretch; margin:26px 0 34px; border-radius:18px; overflow:hidden; background:linear-gradient(115deg,#241208,#1B0B26 70%); border:1px solid rgba(255,216,77,.5); box-shadow:0 0 60px -26px var(--gold); }
.gal-bon-xp { display:grid; place-content:center; padding:14px 18px; text-align:center; font-family:var(--f-b); line-height:.82; color:#2A1408; background:linear-gradient(160deg,#FFE98A,#FFB52E); border-right:2px dashed rgba(42,20,8,.5); }
.gal-bon-xp b { display:block; font-weight:400; font-size:clamp(50px,14vw,86px); letter-spacing:.01em; } .gal-bon-xp span { font-size:clamp(20px,5vw,28px); letter-spacing:.14em; }
.gal-cta-t { margin:0; padding:16px 18px; align-self:center; font-size:17px; line-height:1.45; color:#F7F1FB; } .gal-cta-t strong { display:block; margin-bottom:4px; font-family:var(--f-c); font-weight:800; font-size:clamp(22px,5.6vw,32px); line-height:1.1; color:var(--gold); }
.gal-bon .gal-bon-btn { grid-column:1 / -1; width:auto; min-width:0; margin:0 14px 14px; text-align:center; justify-content:center; }
@media (min-width:860px) { .gal-bon { grid-template-columns:auto 1fr auto; } .gal-bon .gal-bon-btn { grid-column:auto; align-self:center; margin:0 22px 0 6px; } .gal-cta-t { padding:20px 24px; font-size:18px; } }

/* Væggen */
.gal-wall { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; padding:6px 4px 8px; }
@media (min-width:760px) { .gal-wall { grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 26px; } }
.gal-photo { --tilt:0deg; position:relative; display:block; margin:0; padding:8px 8px 0; border-radius:3px; background:var(--paper); color:var(--paper-ink); text-decoration:none; transform:rotate(var(--tilt)); transition:transform .22s cubic-bezier(.2,.8,.3,1.2), box-shadow .22s;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 20px 34px -16px #000, 0 0 44px -20px var(--pink); animation:galDrop .45s cubic-bezier(.2,.8,.3,1.15) backwards; animation-delay:calc(var(--i,0) * 35ms + 120ms); }
@keyframes galDrop { from { opacity:0; transform:translateY(-22px) rotate(calc(var(--tilt) * 4)) scale(1.07); } }
.gal-photo:nth-child(6n+1) { --tilt:-1.7deg; } .gal-photo:nth-child(6n+2) { --tilt:1.2deg; } .gal-photo:nth-child(6n+3) { --tilt:-.7deg; } .gal-photo:nth-child(6n+4) { --tilt:1.8deg; } .gal-photo:nth-child(6n+5) { --tilt:-1.2deg; } .gal-photo:nth-child(6n) { --tilt:.8deg; }
.gal-photo:nth-child(1) { --i:0; } .gal-photo:nth-child(2) { --i:1; } .gal-photo:nth-child(3) { --i:2; } .gal-photo:nth-child(4) { --i:3; } .gal-photo:nth-child(5) { --i:4; } .gal-photo:nth-child(6) { --i:5; } .gal-photo:nth-child(7) { --i:6; } .gal-photo:nth-child(8) { --i:7; } .gal-photo:nth-child(9) { --i:8; } .gal-photo:nth-child(10) { --i:9; } .gal-photo:nth-child(11) { --i:10; } .gal-photo:nth-child(12) { --i:11; }
.gal-photo:hover, .gal-photo:focus-within { transform:rotate(0deg) translateY(-5px) scale(1.025); z-index:2; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 28px 40px -16px #000, 0 0 60px -14px var(--pink); }
.gal-shot { position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:2px; background:#120A1C; } .gal-shot img { display:block; width:100%; height:100%; object-fit:cover; } a.gal-shot { cursor:zoom-in; } a.gal-shot:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }
.gal-stamp { position:absolute; right:7px; bottom:4px; font-family:var(--f-b); font-size:16px; letter-spacing:.07em; color:#FFA23A; text-shadow:0 0 7px rgba(255,120,0,.95), 0 1px 2px #000; pointer-events:none; }
.gal-cap { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:52px; padding:6px 2px 8px; }
.gal-who { display:flex; align-items:center; gap:6px; min-width:0; font-family:var(--f-c); font-weight:800; font-size:14px; } .gal-who > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gal-ini { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--body); font-weight:700; font-size:12px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--purple)); }
.gal-like { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:52px; min-height:40px; padding:4px 10px; border-radius:99px; border:1.5px solid rgba(27,16,48,.2); background:#fff; color:var(--paper-ink); font-family:var(--body); font-weight:700; font-size:15px; line-height:1; text-decoration:none; cursor:pointer; transition:border-color .15s, background .15s; }
.gal-like:hover, .gal-like:focus-visible { border-color:var(--pink); outline:none; } .gal-like.on { background:#FFE1EE; border-color:var(--pink); color:#B3136D; } .gal-like b { font-weight:700; } .gal-heart { display:inline-block; font-size:17px; line-height:1; }
.gal-like.pop .gal-heart { animation:galPop .45s cubic-bezier(.2,.8,.3,1.6); } @keyframes galPop { 0% { transform:scale(.4); } 60% { transform:scale(1.5); } 100% { transform:scale(1); } }
/* Tom plads: et billede, der ikke er fremkaldt endnu */
.gal-photo.is-empty { background:transparent; color:var(--muted); border:1.5px dashed rgba(255,255,255,.3); box-shadow:none; } .gal-photo.is-empty:hover, .gal-photo.is-empty:focus-visible { border-color:var(--pink); box-shadow:0 0 40px -14px var(--pink); outline:none; }
.is-empty .gal-shot { display:grid; place-items:center; background:radial-gradient(circle at 28% 22%,rgba(255,46,147,.26),transparent 56%), radial-gradient(circle at 82% 88%,rgba(139,43,255,.3),transparent 58%), #0D0715; }
.gal-q { font-family:var(--f-hero); font-weight:900; font-size:clamp(46px,13vw,78px); line-height:1; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.42); }
.is-empty .gal-cap { flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; } .is-empty .gal-cap b { color:var(--ink); font-family:var(--f-c); font-size:14px; } .is-empty .gal-cap small { font-size:12px; line-height:1.25; }
/* Kun admin: fjern billedet direkte fra væggen */
.gal-rm { position:absolute; top:-12px; right:-10px; z-index:3; margin:0; } .gal-rm button { width:40px; height:40px; padding:0; border-radius:50%; border:2px solid #fff; background:var(--red); color:#fff; font-size:17px; line-height:1; cursor:pointer; box-shadow:0 6px 16px -4px #000; } .gal-rm button:hover, .gal-rm button:focus-visible { transform:scale(1.1); outline:none; }
.gal-pager { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:26px 0 0; }

/* Send et billede ind */
.gal-send { display:grid; gap:22px; margin-top:44px; padding:22px 18px; border-radius:24px; border:1px solid var(--line); background:var(--card); scroll-margin-top:90px; } .gal-send h2, .gal-mine h2, .gal-rules h2 { margin:0 0 14px; font-family:var(--f-c); font-weight:800; font-size:clamp(22px,5vw,30px); line-height:1.15; }
@media (min-width:860px) { .gal-send { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:36px; padding:30px; align-items:start; } .gal-send.gal-login { grid-template-columns:1fr; } }
.gal-drop { position:relative; display:grid; place-items:center; min-height:190px; padding:18px; border-radius:18px; border:2px dashed rgba(255,255,255,.3); background:rgba(255,255,255,.03); text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.gal-drop:hover, .gal-drop:focus-within { border-color:var(--pink); background:rgba(255,46,147,.08); } .gal-drop input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.gal-drop-t { display:grid; gap:4px; justify-items:center; pointer-events:none; } .gal-drop-t[hidden], .gal-prev[hidden] { display:none; } .gal-drop-t b { font-size:18px; } .gal-drop-t small { color:var(--muted); font-size:14px; } .gal-emo { font-size:38px; line-height:1; }
.gal-prev { display:grid; gap:8px; justify-items:center; pointer-events:none; } .gal-prev img { max-width:100%; max-height:260px; padding:6px 6px 22px; border-radius:3px; background:var(--paper); box-shadow:0 14px 26px -12px #000; transform:rotate(-1.2deg); } .gal-prev small { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.gal-send .btn.big { width:100%; justify-content:center; text-align:center; } .gal-login .btn.big { width:auto; }
.gal-steps { list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:gs; } .gal-steps li { counter-increment:gs; display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:start; } .gal-steps li::before { content:counter(gs); grid-row:1 / span 2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-b); font-size:26px; line-height:1; color:#2A1408; background:linear-gradient(160deg,#FFE98A,#FFB52E); }
.gal-steps b { font-size:17px; } .gal-steps span { grid-column:2; color:var(--muted); font-size:15px; line-height:1.4; }
/* Dine indsendte billeder */
.gal-mine { margin-top:40px; } .gal-mine-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:12px; } .gal-mine-item { display:grid; gap:6px; justify-items:start; padding:8px 8px 10px; border-radius:3px; background:var(--paper); color:var(--paper-ink); box-shadow:0 14px 26px -14px #000; }
.gal-mine-item img, .gal-mine-item > .gal-emo { width:100%; aspect-ratio:1; object-fit:cover; border-radius:2px; display:grid; place-items:center; background:#E4DCCB; } .gal-mine-item .tag { margin:0; white-space:normal; background:#1B1030; color:#fff; } .gal-mine-item .tag.ok { background:#1F6B00; color:#fff; } .gal-mine-item small.muted { color:#5E4F78; }
/* Regler i bunden */
.gal-rules { margin-top:44px; padding:24px 20px; border-radius:24px; border:1px solid var(--line-hot); background:linear-gradient(160deg,rgba(255,46,147,.12),rgba(139,43,255,.1)); } .gal-rules ul { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:12px; } .gal-rules li { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; }
.gal-rules li > span { font-size:24px; line-height:1.2; } .gal-rules li p { margin:0; font-size:17px; line-height:1.45; max-width:68ch; } .gal-rules > p { margin:0; }
/* Stor visning */
.gal-lb { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:68px 10px 20px; background:rgba(5,2,10,.93); } .gal-lb[hidden] { display:none; } html.gal-lb-open { overflow:hidden; }
.gal-lb-card { margin:0; padding:10px 10px 0; max-width:min(100%,880px); max-height:100%; border-radius:4px; background:var(--paper,#F6F1E7); color:var(--paper-ink,#1B1030); box-shadow:0 30px 80px -20px #000, 0 0 90px -30px var(--pink); } .gal-lb-card img { display:block; max-width:100%; max-height:calc(100vh - 190px); margin:0 auto; border-radius:2px; background:#120A1C; }
.gal-lb-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; padding:8px 4px 10px; } .gal-lb-by { font-family:var(--f-c); font-weight:800; font-size:16px; overflow-wrap:anywhere; }
.gal-lb-x, .gal-lb-nav { position:absolute; z-index:2; width:48px; height:48px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(20,10,30,.72); color:#fff; font-size:24px; line-height:1; cursor:pointer; } .gal-lb-x:hover, .gal-lb-nav:hover, .gal-lb-x:focus-visible, .gal-lb-nav:focus-visible { border-color:var(--pink); background:rgba(255,46,147,.55); outline:none; }
.gal-lb-x { top:12px; right:12px; } .gal-lb-nav { top:50%; margin-top:-24px; } .gal-lb-nav.prev { left:8px; } .gal-lb-nav.next { right:8px; } .gal-lb-nav[hidden] { display:none; } @media (min-width:1000px) { .gal-lb { padding:40px 90px; } .gal-lb-nav.prev { left:24px; } .gal-lb-nav.next { right:24px; } }
/* Lys tilstand */
body.light .gal-title { color:#1B1030; text-shadow:0 0 18px rgba(255,46,147,.5), 0 0 46px rgba(139,43,255,.35); } body.light .gal-photo { box-shadow:0 0 0 1px rgba(30,10,60,.08), 0 18px 30px -16px rgba(60,20,100,.6); } body.light .gal-photo:hover, body.light .gal-photo:focus-within { box-shadow:0 0 0 1px rgba(30,10,60,.08), 0 26px 40px -16px rgba(60,20,100,.7), 0 0 50px -16px var(--pink); }
body.light .gal-photo.is-empty { border-color:rgba(30,10,60,.34); box-shadow:none; } body.light .is-empty .gal-shot { background:radial-gradient(circle at 28% 22%,rgba(255,46,147,.2),transparent 56%), radial-gradient(circle at 82% 88%,rgba(139,43,255,.22),transparent 58%), #ECE4F6; } body.light .gal-q { -webkit-text-stroke-color:rgba(30,10,60,.4); }
body.light .gal-send { background:#fff; box-shadow:0 10px 30px -18px rgba(60,20,100,.4); } body.light .gal-drop { border-color:rgba(30,10,60,.3); background:rgba(30,10,60,.03); } body.light .gal-rules { background:linear-gradient(160deg,rgba(255,46,147,.1),rgba(139,43,255,.08)), #fff; } body.light .gal-mine-item, body.light .gal-prev img { box-shadow:0 0 0 1px rgba(30,10,60,.08), 0 14px 26px -14px rgba(60,20,100,.55); }
@media (prefers-reduced-motion:reduce) { .gal-title, .gal-photo, .gal-like.pop .gal-heart { animation:none; } .gal-photo { transition:none; } }

/* Admin > Galleri */
.gal-stats { margin-bottom:18px; } .gal-stats .stat.hot { border-color:var(--pink); box-shadow:var(--glow); }
.gal-none { text-align:center; padding:34px 20px; } .gal-none b { display:block; font-size:19px; margin:8px 0 4px; } .gal-none p { margin:0; } .gal-help { margin-bottom:16px; }
.gal-adm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; } .gal-card { display:flex; flex-direction:column; border-radius:18px; border:1px solid var(--line); background:var(--card); overflow:hidden; } .gal-card.is-hidden .gal-card-img img { opacity:.35; filter:grayscale(1); }
.gal-card-img { display:block; aspect-ratio:4/3; background:#000; } .gal-card-img img { width:100%; height:100%; object-fit:contain; display:block; } .gal-card-meta { padding:12px 14px 4px; display:grid; gap:4px; justify-items:start; } .gal-card-meta b a { color:inherit; } .gal-card-meta .tag { margin:0; }
.gal-card-act { display:flex; gap:8px; padding:10px 14px 14px; margin-top:auto; } .gal-card-act form { flex:1; margin:0; } .gal-card-act .btn { width:100%; min-height:46px; padding:8px 10px; font-size:14px; }
.gal-slot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } @media (min-width:1000px) { .gal-slot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.gal-slot { display:grid; gap:8px; align-content:start; padding:12px; border-radius:18px; border:1px solid var(--line); background:var(--card); } .gal-slot-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .gal-slot-top .tag { margin:0; } .gal-slot-note { margin:0; }
.gal-tile { position:relative; display:block; aspect-ratio:1; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--card-solid); text-decoration:none; color:inherit; } .gal-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-tile.gal-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:10px; border-style:dashed; border-color:rgba(255,255,255,.22); background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,rgba(255,255,255,.06) 12px 24px); color:var(--muted); } .gal-tile.gal-empty b { color:var(--ink); font-size:15px; }
.gal-by { position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); padding:3px 10px; border-radius:99px; background:rgba(10,4,18,.78); color:#fff; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gal-slot form { margin:0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .gal-file { flex:1 1 120px; position:relative; display:flex; align-items:center; min-height:40px; padding:6px 12px; border-radius:12px; border:1px dashed var(--line); cursor:pointer; font-size:14px; overflow:hidden; } .gal-file input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; } .gal-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gal-file:focus-within { border-color:var(--pink); } .gal-slot form .warn { flex-basis:100%; margin:0; }