:root{
  --night:#0b1a24;
  --fjord:#10293a;
  --slate:#183a4f;
  --frost:#e6f1f3;
  --mist:#9db6c0;
  --aurora:#5fe3c0;
  --gold:#d2a85a;
  --ember:#e0834a;
  --radius:10px;
  --display:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--night);color:var(--frost);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0}
p{margin:0 0 1em}
a{color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:rgba(230,241,243,.1);padding:.1em .45em;border-radius:5px;color:var(--aurora)}
em{font-style:normal;color:var(--gold)}
:focus-visible{outline:3px solid var(--aurora);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--aurora);color:var(--night);padding:.6em 1em;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.muted{color:var(--mist)}
.small{font-size:.9rem}

/* topbar */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem clamp(16px,4vw,48px);background:linear-gradient(to bottom,rgba(11,26,36,.85),rgba(11,26,36,0));backdrop-filter:blur(2px)}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:1.2rem;text-decoration:none;color:var(--frost)}
.brand img{display:block}
.top nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}
.top nav a{text-decoration:none;color:var(--frost);opacity:.85}
.top nav a:hover{opacity:1;color:var(--aurora)}
.top .pill{background:var(--frost);color:var(--night);padding:.35em 1em;border-radius:999px;font-weight:700;opacity:1}
.top .pill:hover{background:var(--aurora);color:var(--night)}
@media (max-width:640px){.top nav a:not(.pill){display:none}}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:7rem clamp(16px,6vw,96px) 14rem;background:linear-gradient(to bottom,#06111a 0%,var(--night) 45%,var(--fjord) 100%)}
.sky{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7}
.stars i.tw{animation:twinkle 4s ease-in-out infinite}
.aurora{position:absolute;left:-20%;width:140%;height:46%;filter:blur(42px);mix-blend-mode:screen;opacity:.55;will-change:transform,opacity}
.a1{top:6%;background:linear-gradient(90deg,transparent 0%,#2fd6a3 25%,#5fe3c0 45%,#3a9bd9 70%,transparent 100%);transform:skewY(-6deg);animation:drift1 22s ease-in-out infinite alternate}
.a2{top:14%;height:34%;background:linear-gradient(90deg,transparent 5%,#6a7cff 35%,#5fe3c0 60%,transparent 95%);transform:skewY(5deg);opacity:.35;animation:drift2 30s ease-in-out infinite alternate}
.a3{top:2%;height:26%;background:linear-gradient(90deg,transparent 10%,#a4ffdf 50%,transparent 90%);opacity:.25;transform:skewY(-3deg);animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{0%{transform:translateX(-6%) skewY(-6deg);opacity:.4}100%{transform:translateX(6%) skewY(-2deg);opacity:.65}}
@keyframes drift2{0%{transform:translateX(5%) skewY(5deg)}100%{transform:translateX(-7%) skewY(1deg)}}
@keyframes twinkle{50%{opacity:.15}}

.hero-copy{position:relative;z-index:2;max-width:46rem}

.lead{font-size:clamp(1.15rem,2.4vw,1.45rem);max-width:34rem;margin:1.2rem 0 1.8rem;color:#cfe1e6}
.live{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1rem .45rem .8rem;border-radius:999px;background:rgba(11,26,36,.6);border:1px solid rgba(230,241,243,.18);margin-bottom:1.4rem;font-weight:500}
.dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--mist)}
.dot.on{background:var(--aurora);box-shadow:0 0 0 0 rgba(95,227,192,.7);animation:pulse 2.4s infinite}
.dot.off{background:var(--ember)}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(95,227,192,0)}100%{box-shadow:0 0 0 0 rgba(95,227,192,0)}}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-flex;align-items:center;gap:.9rem;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;color:var(--frost);background:rgba(230,241,243,.08);border:1px solid rgba(230,241,243,.3);padding:.8rem 1.3rem;border-radius:var(--radius);transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:rgba(230,241,243,.16);border-color:var(--frost)}
.btn.primary{background:var(--aurora);border-color:var(--aurora);color:var(--night)}
.btn.primary:hover{background:#8af0d4;border-color:#8af0d4}
.btn .hint{font-weight:500;font-size:.9rem;opacity:.75;padding-left:.9rem;border-left:1px solid rgba(11,26,36,.35)}
.btn .ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1rem}

.mountains{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(180px,34vw,420px);z-index:1}
.m3{fill:#18394d}.m2{fill:#12303f}.m1{fill:var(--fjord)}

/* sections */
.block{padding:clamp(3.5rem,8vw,6.5rem) clamp(16px,6vw,96px);background:var(--fjord)}
.block.alt{background:var(--night)}
.wrap{max-width:68rem;margin:0 auto}
.wrap.narrow{max-width:44rem}
.wrap.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:820px){.wrap.two{grid-template-columns:1fr}}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-bottom:1.2rem}
h3{font-size:1.25rem;margin-bottom:.4rem}
.intro{font-size:1.15rem;color:#cfe1e6;max-width:38rem;margin-bottom:2rem}

.steps{list-style:none;counter-reset:s;padding:0;margin:2rem 0 0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.8rem 3.4rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--aurora);color:var(--aurora);font-family:var(--display)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:1.15rem;top:2.6rem;bottom:.3rem;width:1px;background:rgba(95,227,192,.35)}
.steps p{margin:0;color:#cfe1e6}

.status{background:var(--night);border:1px solid rgba(230,241,243,.14);border-radius:14px;padding:1.6rem}
.status h2{font-size:1.5rem;margin-bottom:1rem}
.facts{margin:0 0 1.2rem}
.facts div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(230,241,243,.1)}
.facts dt{color:var(--mist)}
.facts dd{margin:0;font-weight:700;text-align:right}
.heads{display:flex;flex-wrap:wrap;gap:.45rem}
.heads figure{margin:0;text-align:center;width:46px}
.heads img{width:40px;height:40px;border-radius:6px;display:block;margin:0 auto;image-rendering:pixelated;background:var(--slate)}
.heads figcaption{font-size:.7rem;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heads:empty{display:none}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.grid article{background:var(--fjord);border-radius:14px;padding:1.5rem}
.grid ul{margin:.6rem 0 0;padding-left:1.1rem;color:#cfe1e6}
.grid li{margin-bottom:.45rem}
.grid .rare{background:linear-gradient(160deg,#2a2210,var(--fjord) 70%);border:1px solid rgba(210,168,90,.5)}
.grid .rare h3{color:var(--gold)}

.rules{list-style:none;counter-reset:r;padding:0;margin:0 0 1.5rem}
.rules li{counter-increment:r;position:relative;padding:.9rem 0 .9rem 3rem;border-bottom:1px solid rgba(230,241,243,.12)}
.rules li::before{content:counter(r);position:absolute;left:0;top:.85rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font-family:var(--display)}
.rules strong{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:.15rem}
.rules span{color:#cfe1e6}

.tickets{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.tickets li{background:var(--fjord);border-left:3px solid var(--aurora);border-radius:0 12px 12px 0;padding:1rem 1.2rem}
.tickets strong{display:block}
.tickets span{color:var(--mist)}

footer{padding:2rem clamp(16px,6vw,96px);background:#071219}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline}
.foot span:first-child{font-family:var(--display);font-size:1.15rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aurora,.stars i.tw,.dot.on{animation:none}
}

/* ---------- fælles: logo, menu, konto ---------- */
.brand img{display:block}
.top nav{flex-wrap:wrap;justify-content:flex-end}
.top nav .me{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;opacity:1}
.top nav .me img{border-radius:4px;image-rendering:pixelated}
.linkbtn{font:inherit;background:none;border:0;color:var(--frost);opacity:.85;cursor:pointer;padding:0}
.linkbtn:hover{opacity:1;color:var(--aurora)}
@media (max-width:640px){.top nav a:not(.pill):not(.me){display:none}.top nav .me{display:inline-flex}}
[hidden]{display:none!important}
.hero h1{margin:0;line-height:0}
.logo{width:clamp(250px,36vw,480px);height:auto;filter:drop-shadow(0 0 40px rgba(95,227,192,.3))}

.topplayer{position:relative;display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;margin:0 0 1.2rem;background:linear-gradient(160deg,#2a2210,var(--fjord));border:1px solid rgba(210,168,90,.5);border-radius:12px}
.topplayer img{border-radius:8px;image-rendering:pixelated;background:var(--slate)}
.topplayer strong{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem}
.topplayer .crown{margin-left:auto;font-size:.8rem;color:var(--gold);text-align:right;max-width:6rem;line-height:1.2}

/* ---------- undersider (forum, admin, login) ---------- */
body.sub .top{background:rgba(11,26,36,.94);backdrop-filter:blur(6px);border-bottom:1px solid rgba(230,241,243,.08)}
.page{min-height:100vh;padding:6.5rem clamp(16px,5vw,64px) 4rem;background:linear-gradient(to bottom,var(--night),var(--fjord) 70%)}
.page .wrap{max-width:60rem}
.crumbs{margin:0 0 1.2rem;color:var(--mist);font-size:.95rem}
.crumbs a{color:var(--mist)}
.crumbs a:hover{color:var(--aurora)}
.page h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:0 0 .4rem}
.page .sub{color:var(--mist);margin:0 0 1.6rem}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.4rem}

.list{display:grid;gap:.7rem}
.row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1rem 1.2rem;background:var(--night);border:1px solid rgba(230,241,243,.1);border-radius:12px;text-decoration:none;transition:border-color .2s}
a.row:hover{border-color:var(--aurora)}
.row h2,.row h3{font-size:1.2rem;margin:0 0 .15rem}
.row .meta{color:var(--mist);font-size:.9rem}
.row .count{color:var(--mist);font-size:.9rem;text-align:right;white-space:nowrap}
.row.pinned{border-color:rgba(210,168,90,.5)}
@media (max-width:560px){.row{grid-template-columns:1fr}.row .count{text-align:left}}

.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.1em .55em;border-radius:999px;vertical-align:middle;margin-left:.4rem;font-family:var(--body)}
.badge-owner{background:var(--gold);color:#1e1608}
.badge-admin{background:var(--ember);color:#26130a}
.badge-mod{background:var(--aurora);color:var(--night)}
.badge-helper{background:#7fb4ff;color:#0c1b2e}
.tag{font-size:.75rem;padding:.1em .55em;border-radius:6px;background:rgba(230,241,243,.12);margin-right:.4rem;color:var(--frost);font-family:var(--body)}

.post{display:grid;grid-template-columns:9rem 1fr;gap:1.2rem;padding:1.2rem;background:var(--night);border:1px solid rgba(230,241,243,.1);border-radius:12px;margin-bottom:.8rem}
.post .who{text-align:center;font-size:.9rem;color:var(--mist);overflow-wrap:anywhere}
.post .who img{border-radius:8px;image-rendering:pixelated;background:var(--slate);display:block;margin:0 auto .4rem}
.post .who a{color:var(--frost);font-weight:700;text-decoration:none}
.post .who a:hover{color:var(--aurora)}
.post .body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.post .foot2{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.9rem;font-size:.85rem;color:var(--mist)}
.post .foot2 button{font:inherit;font-size:.85rem;background:none;border:0;color:var(--mist);cursor:pointer;padding:0;text-decoration:underline}
.post .foot2 button:hover{color:var(--aurora)}
@media (max-width:640px){.post{grid-template-columns:1fr}.post .who{display:flex;align-items:center;gap:.7rem;text-align:left}.post .who img{margin:0;width:36px;height:36px}}

form.box{display:grid;gap:.8rem;padding:1.2rem;background:var(--night);border:1px solid rgba(230,241,243,.1);border-radius:12px;margin-top:1.4rem}
form.box label{font-weight:700;font-size:.95rem}
input[type=text],textarea,select{width:100%;font:inherit;color:var(--frost);background:var(--fjord);border:1px solid rgba(230,241,243,.25);border-radius:8px;padding:.65rem .8rem}
textarea{min-height:9rem;resize:vertical}
.note{color:var(--mist);font-size:.9rem;margin:0}
.err{color:#ff9a8a;font-size:.95rem;min-height:1.2em;margin:0}
.pager{display:flex;gap:.6rem;justify-content:center;align-items:center;margin:1.2rem 0;color:var(--mist)}
.btn.small{padding:.4rem .9rem;font-size:.9rem}
.btn.danger{border-color:#ff9a8a;color:#ff9a8a}
.empty{padding:2rem;text-align:center;color:var(--mist);border:1px dashed rgba(230,241,243,.2);border-radius:12px}

.dialog{max-width:30rem;width:calc(100% - 32px);color:var(--frost);background:var(--fjord);border:1px solid rgba(230,241,243,.25);border-radius:14px;padding:1.5rem}
.dialog::backdrop{background:rgba(3,10,15,.7)}
.dialog h3{font-size:1.5rem;margin-bottom:.6rem}
.dialog-actions{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.mini{padding-left:1.2rem;color:#cfe1e6}
.mini li{margin-bottom:.5rem}

.table-wrap{overflow-x:auto;border:1px solid rgba(230,241,243,.1);border-radius:12px}
table.users{width:100%;border-collapse:collapse;min-width:640px}
table.users th,table.users td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid rgba(230,241,243,.08);vertical-align:middle}
table.users th{color:var(--mist);font-weight:500;font-size:.9rem;background:var(--night)}
table.users td .nm{display:flex;align-items:center;gap:.6rem;font-weight:700}
table.users td .nm img{border-radius:6px;image-rendering:pixelated;background:var(--slate)}
table.users tr.off{opacity:.55}
.search{max-width:20rem;margin-bottom:1rem}

.center-card{max-width:30rem;margin:0 auto;padding:2rem;background:var(--night);border:1px solid rgba(230,241,243,.14);border-radius:14px;text-align:center}
.center-card h1{font-size:1.8rem}
#authSlot{display:inline-flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}
#authSlot a{opacity:.85}
#authSlot a.me{opacity:1}
#authSlot a:hover{opacity:1;color:var(--aurora)}
@media (max-width:640px){#authSlot a:not(.me){display:none}.top{gap:.5rem}}

/* ---------- indhold og redigeringspanel ---------- */
.badge-headadmin{background:#ff8a6b;color:#2a0f08}
.rich p{margin:0 0 .6em}
.rich ul{margin:.3rem 0 0;padding-left:1.1rem}
.rich li{margin-bottom:.4rem}
.rich :last-child{margin-bottom:0}
.grid .tag{display:inline-block;margin:0 0 .6rem}
.edit-link{font-size:.9rem;margin-left:.8rem;color:var(--mist);text-decoration:underline;font-family:var(--body);font-weight:500}
.edit-link:hover{color:var(--aurora)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.tabs button{font:inherit;font-weight:700;color:var(--frost);background:transparent;border:1px solid rgba(230,241,243,.25);border-radius:999px;padding:.45rem 1.1rem;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--aurora);border-color:var(--aurora);color:var(--night)}
.panel-card{padding:1rem 1.2rem;background:var(--night);border:1px solid rgba(230,241,243,.1);border-radius:12px;margin-bottom:.7rem;display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:center}
.panel-card.hidden-item{opacity:.6;border-style:dashed}
.panel-card h3{margin:0;font-size:1.1rem}
.panel-card .meta{color:var(--mist);font-size:.9rem}
.panel-card .tools{display:flex;gap:.4rem;flex-wrap:wrap}
.panel-card .btn{padding:.35rem .8rem;font-size:.9rem}
@media (max-width:560px){.panel-card{grid-template-columns:1fr}}
.editor{display:grid;gap:.7rem;padding:1.2rem;background:var(--night);border:1px solid var(--aurora);border-radius:12px;margin-bottom:1rem}
.editor label{font-weight:700;font-size:.95rem}
.editor .row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:560px){.editor .row2{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:.5rem;font-weight:500!important}
.chk input{width:1.1rem;height:1.1rem;accent-color:var(--aurora)}
.preview{padding:.9rem 1rem;border:1px dashed rgba(230,241,243,.25);border-radius:10px;color:#cfe1e6}
.preview .ph{color:var(--mist);font-size:.9rem}
.saved{color:var(--aurora);font-size:.95rem;min-height:1.2em;margin:0}

/* Profiler */
.profile{--acc:#6ee7c8;background:var(--night);border:1px solid var(--acc);border-radius:14px;padding:1.2rem;display:grid;gap:1rem}
.acc-aurora{--acc:#6ee7c8}.acc-guld{--acc:#d2a85a}.acc-rune{--acc:#a78bfa}.acc-ild{--acc:#f0775a}.acc-is{--acc:#7cc4f2}.acc-skov{--acc:#7fcf7a}
.profile-head{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.rank-badge{display:inline-block;margin-left:.5rem;padding:.1rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;color:#0b1a22;background:var(--acc,#6ee7c8);vertical-align:middle}
.tagrow{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .4rem}
.bio{border-left:3px solid var(--acc);padding-left:.8rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}
.stat{background:rgba(255,255,255,.04);border-radius:10px;padding:.7rem .8rem;display:grid;gap:.1rem}
.stat strong{font-size:1.35rem;color:var(--acc)}.stat span{font-size:.8rem;color:var(--mist)}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid transparent;background:var(--acc);cursor:pointer}
.swatch[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--acc)}
.tagpick{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
@media (max-width:560px){.profile-head{grid-template-columns:1fr}}

/* Vanilla+ guide: store nummererede bokse */
.guide{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.gcard{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--fjord),var(--night));border:1px solid rgba(230,241,243,.14);border-radius:16px;padding:1.4rem 1.3rem 1.3rem;transition:transform .2s,border-color .2s,box-shadow .2s}
.gcard:hover{transform:translateY(-4px);border-color:var(--aurora);box-shadow:0 10px 30px rgba(110,231,200,.12)}
.gcard.rare{border-color:rgba(210,168,90,.6);background:linear-gradient(165deg,#2a2210,var(--night))}
.gnum{position:absolute;top:-.55rem;right:.6rem;font-family:var(--display);font-weight:700;font-size:5.2rem;line-height:1;color:rgba(110,231,200,.14);pointer-events:none}
.gcard.rare .gnum{color:rgba(210,168,90,.2)}
.gcard h3{font-size:1.25rem;margin:0 0 .5rem;position:relative}
.gcard .tag{position:relative;display:inline-block;margin-bottom:.5rem}
.gcard .rich{position:relative}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}.gcard:hover{transform:none}}

/* Appeals */
.typepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1rem 0}
.typecard{text-align:left;display:grid;gap:.3rem;background:var(--night);color:var(--frost);border:1px solid rgba(230,241,243,.18);border-radius:12px;padding:1rem;cursor:pointer;font:inherit}
.typecard span{color:var(--mist);font-size:.9rem}
.typecard:hover,.typecard[aria-pressed="true"]{border-color:var(--aurora)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.filters select,.appeal select{background:var(--night);color:var(--frost);border:1px solid rgba(230,241,243,.25);border-radius:8px;padding:.5rem .7rem;font:inherit}
.appeal{background:var(--night);border:1px solid rgba(230,241,243,.14);border-radius:12px;margin:0 0 .7rem}
.appeal.is-new{border-color:var(--aurora)}
.appeal summary{padding:.9rem 1rem;cursor:pointer}
.appeal-body{padding:0 1rem 1rem;display:grid;gap:.6rem}
.appeal .ans{margin:.2rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.st-ny{background:rgba(110,231,200,.2)}.st-godkendt{background:rgba(127,207,122,.25)}.st-afvist{background:rgba(240,119,90,.25)}.st-behandles{background:rgba(210,168,90,.25)}
.filters select{width:auto;min-width:11rem}

/* Appeals: kategorier */
.typecard.closed{opacity:.55;cursor:not-allowed}
.catbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0}
.catbtn .ok{color:#7fcf7a}.catbtn .no{color:#f0775a}
.qlist{display:grid;gap:.6rem}
.qrow{display:grid;grid-template-columns:1fr auto auto auto auto auto;gap:.5rem;align-items:center}
@media (max-width:700px){.qrow{grid-template-columns:1fr 1fr}.qrow input[type=text]{grid-column:1/-1}}

/* Leaderboards */
.lb{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem}
.lbrow{display:grid;grid-template-columns:2.2rem 40px 1fr auto;gap:.8rem;align-items:center;background:var(--night);border:1px solid rgba(230,241,243,.12);border-radius:12px;padding:.6rem .9rem}
.lbrow img{border-radius:6px;image-rendering:pixelated}
.lbpos{font-family:var(--display);font-weight:700;color:var(--mist);text-align:center}
.lbname{color:var(--frost);text-decoration:none;font-weight:700;overflow-wrap:anywhere}.lbname:hover{text-decoration:underline}
.lbval{font-size:1.15rem;color:var(--aurora)}
.lbrow.gold{border-color:#d2a85a;background:linear-gradient(90deg,#2a2210,var(--night))}.lbrow.gold .lbpos{color:#d2a85a}
.lbrow.silver{border-color:#aab7c4}.lbrow.silver .lbpos{color:#aab7c4}
.lbrow.bronze{border-color:#b87a4b}.lbrow.bronze .lbpos{color:#b87a4b}
.lbrow .rank-badge{font-size:.7rem}
/* Wiki */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-top:1rem}
.wcard{background:var(--night);border:1px solid rgba(230,241,243,.14);border-radius:14px;padding:1.1rem 1.2rem}
.wcard h3{font-size:1.2rem;margin:0 0 .5rem}
input[type=search]{width:100%;max-width:30rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0;align-items:center}
.chip{background:var(--night);color:var(--frost);border:1px solid rgba(230,241,243,.22);border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.9rem;cursor:pointer}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--aurora);color:var(--aurora)}
/* Tutorial */
.askbar{display:flex;gap:.6rem;margin:1rem 0}.askbar input{flex:1}
.tchat{display:grid;gap:.7rem;margin-top:1rem}
.bubble{max-width:42rem;padding:.8rem 1rem;border-radius:14px;overflow-wrap:anywhere}
.bubble.me{justify-self:end;background:rgba(110,231,200,.16);border:1px solid rgba(110,231,200,.4)}
.bubble.bot{justify-self:start;background:var(--night);border:1px solid rgba(230,241,243,.16)}
.bubble p{margin:.3rem 0}
/* Menu: Mere */
.more{position:relative;display:inline-block}
.more summary{list-style:none;cursor:pointer;padding:.2rem .1rem;color:inherit}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ▾"}
.more>div{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;display:grid;min-width:10rem;background:var(--night);border:1px solid rgba(230,241,243,.2);border-radius:12px;padding:.4rem;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.more>div a{padding:.45rem .7rem;border-radius:8px;white-space:nowrap}.more>div a:hover{background:rgba(230,241,243,.08)}
@media (max-width:760px){.more>div{left:0;right:auto}.lbrow{grid-template-columns:1.8rem 36px 1fr auto;gap:.5rem}}