/* Mineva – mörk, ren design med blå accent. */
:root {
  --bg: #050608; --surface: #0f1117; --surface-2: #161924; --text: #f2f4f8; --muted: #9aa3b5; --line: #1f2330;
  --accent: #5b7cf6; --accent-2: #6995E7; --accent-soft: rgba(91,124,246,.16); --gold: #f5c542; --danger: #e05252;
  --radius: 12px;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --mc: "Minecraft", var(--sf);
}
@font-face { font-family: "Minecraft"; src: url("/fonts/minecraft-bold.otf") format("opentype"); font-weight: 400 900; font-display: block; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 300 700; font-display: block; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sf); }
a { color: var(--accent-2); text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 400; letter-spacing: .01em; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
main { min-height: 60vh; }
main > section { padding: 40px 0; }
.center { text-align: center; }
.right { text-align: right; }
.muted { color: var(--muted); }

/* toppmeny */
.top { position: sticky; top: 0; z-index: 20; background: rgba(5,6,8,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 68px; padding: 8px clamp(16px, 2.5vw, 32px); }
.top-left, .top-right { display: flex; align-items: center; gap: 10px; }
.top-right { justify-content: flex-end; }
.nav { display: flex; gap: 6px; justify-content: center; }
.nav a { color: var(--text); font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; }
.nav a:hover { background: var(--surface-2); }
.nav a.on { background: var(--accent); }
.icon-btn { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 8px; background: var(--accent); color: #fff; }
.ip-btn { background: var(--gold); color: #1a1406; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 800;
          font-size: .8rem; letter-spacing: .03em; cursor: pointer; }
.ip-btn:hover { filter: brightness(1.08); }
.who { display: flex; align-items: center; gap: 8px; margin: 0; }
.who img { border-radius: 50%; }
.who-name { font-weight: 600; font-size: .9rem; }
@media (max-width: 860px) {
  .top-inner { grid-template-columns: 1fr auto; }
  .nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
}

/* knappar och små delar */
.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 11px 20px;
       font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn.small { padding: 7px 13px; font-size: .82rem; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.danger { background: var(--danger); }
button.link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; }
button.link:hover { color: var(--text); }
button.link.liked { color: #ff5f8f; }
button.link:disabled { cursor: default; opacity: .7; }
.badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-2);
         font-size: .7rem; font-weight: 700; vertical-align: middle; }
.meta { color: var(--muted); font-size: .88rem; margin: .2em 0 .6em; }
.tag { color: var(--accent-2); font-weight: 700; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }

/* hero */
main > .hero { padding: 0; }
.hero-art { height: clamp(340px, 52vw, 720px); display: grid; place-items: center; position: relative;
  background: radial-gradient(ellipse at 50% 40%, #2b4bb3 0%, #16245c 40%, #070a18 75%, var(--bg) 100%); }
.hero-art.has-banner { background: var(--bg); overflow: hidden; }
.hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.hero-art.editing { cursor: grab; outline: 2px dashed var(--accent-2); outline-offset: -2px; }
.hero-art.editing:active { cursor: grabbing; }
.banner-tools.adjusting { align-items: center; background: rgba(5,6,8,.8); padding: 8px 10px; border-radius: 10px; cursor: default; }
.banner-tools .hint, .banner-tools .zoom { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.banner-tools[hidden] { display: none; }
.hero-art.admin-banner { cursor: pointer; }
.banner-tools { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.banner-tools form { margin: 0; }
.banner-tools .btn.ghost { background: rgba(5,6,8,.7); }
.hero-logo { width: clamp(140px, 18vw, 220px); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); position: relative; z-index: 1; }

/* nyheter */
.news h1 { font-size: 1.6rem; margin-bottom: .2em; }
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; color: var(--text); margin: 36px 0; }
.feature h2 { font-size: 1.6rem; }
.feature p { color: var(--muted); }
.feature-img, .post-img { border-radius: var(--radius); background: var(--surface-2) center/cover no-repeat; aspect-ratio: 16/9;
  display: grid; place-items: center; overflow: hidden; }
.feature-img img, .post-img img { width: 28%; opacity: .45; }
.post-card { color: var(--text); display: block; }
.post-card h3 { margin-top: 14px; font-size: 1.15rem; }
.post-card:hover h3, .feature:hover h2 { color: var(--accent-2); }
.excerpt { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }

/* guider */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 32px 24px; max-width: 760px; margin: 0 auto; }
.guide-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text); font-weight: 700; }
.guide-icon { width: 120px; height: 120px; border-radius: 12px; display: grid; place-items: center; transition: transform .15s;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.guide-icon img { width: 70%; image-rendering: pixelated; }
.guide-icon b { font-size: 3rem; color: rgba(255,255,255,.92); text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.guide-tile:hover .guide-icon { transform: translateY(-4px); }
.guide-page { max-width: 860px; }
.guide-head { display: flex; align-items: center; gap: 28px; margin-bottom: 28px; flex-wrap: wrap; }
.guide-icon.big { width: 160px; height: 160px; }
.kicker { color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 0; }
.guide-head h1 { font-size: clamp(2rem, 5vw, 3rem); }

/* text */
.prose { max-width: 780px; }
.prose h2 { margin-top: 1.6em; }
.prose code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-size: .9em; }
.prose img { max-width: 100%; border-radius: 10px; }
.post-page { max-width: 860px; }
.post-cover { width: 100%; border-radius: var(--radius); margin-bottom: 24px; }
.admin-bar { margin: 8px 0 18px; }
.admin-bar form { margin: 0; }

/* kommentarer */
.comments { max-width: 780px; margin-top: 40px; }
.comment { border-top: 1px solid var(--line); padding: 14px 0; }
.comment.reply { margin-left: 34px; border-top: 1px dashed var(--line); padding-bottom: 6px; }
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-head img { border-radius: 50%; }
.comment-head small { color: var(--muted); }
.comment-body { white-space: pre-wrap; margin: 6px 0; }
.comment-actions { display: flex; gap: 16px; }
.comment-actions form { margin: 0; }
.reply-box { margin-left: 34px; }
.reply-box summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.comment-form { display: grid; gap: 8px; margin: 12px 0; }
.comment-form textarea, .editor input, .editor textarea { width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.comment-form textarea { min-height: 84px; }
.comment-form .btn { justify-self: start; }
.editor { display: grid; gap: 16px; max-width: 820px; }
.editor label { display: grid; gap: 6px; font-weight: 700; }
.editor label small { font-weight: 400; color: var(--muted); }
.editor .check { display: flex; gap: 8px; font-weight: 400; }

/* panel */
.stats .card { display: flex; flex-direction: column; }
.stats b { font-size: 1.8rem; }
.stats span { color: var(--muted); }
.list { display: grid; gap: 12px; }
.post-row { color: var(--text); display: block; }

/* Discord-uppmaning och sidfot */
.cta { text-align: center; padding: 72px 0; background: linear-gradient(180deg, var(--bg), #0b1230 60%, var(--bg)); }
.cta h2 { font-size: 2rem; }
.cta p { color: var(--muted); }
.foot { border-top: 1px solid var(--line); background: #08090d; color: var(--muted); font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 48px 0 36px; }
.foot-logo { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 1.2rem; }
.foot-brand p { max-width: 380px; margin: 14px 0 18px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 { margin: 0 0 4px; color: var(--text); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.foot-col a { color: var(--muted); font-weight: 600; width: fit-content; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; border-top: 1px solid var(--line);
  padding: 18px 0 24px; font-size: .82rem; }
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 0 24px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; }
}

/* Typsnitt: SF-stil för all vanlig text, Minecraft Bold för allt som är fetstilt. */
input, textarea, select, button { font-family: var(--sf); }
h1, h2, h3, h4, b, strong, .nav a, .btn, .ip-btn, button.link, .kicker, .tag, .badge, .guide-tile, .foot-logo b,
.foot-col h4, .foot-col a, .editor label, .comment-head strong {
  font-family: var(--mc); font-weight: 400; }
.editor label small, .editor .check { font-family: var(--sf); }
/* Eget namn uppe till höger: vanlig fetstil som i Discord. */
.who-name { font-family: "gg sans", var(--sf); font-weight: 700; }

.icon-btn svg { shape-rendering: crispEdges; }

/* Storlekar för Minecraft-typsnittet (ungefär som innan bytet). */
h1, h2, h3, h4, .nav a, .btn, .ip-btn, .kicker, .tag, .badge, .guide-tile, .foot-logo b, .foot-col h4,
.editor label, .comment-head strong, button.link { letter-spacing: .02em; }
h1, .cta h2 { font-size: 2rem; }
.guide-head h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
h2, .news h1, .feature h2 { font-size: 1.5rem; }
h3, .post-card h3, .foot-logo b, .guide-tile, .comment-head strong { font-size: 1.1rem; }
.nav a, .btn.small, .ip-btn, .editor label, button.link { font-size: .85rem; }
.btn { font-size: .95rem; }
.kicker, .tag, .badge, .foot-col h4 { font-size: .75rem; }
@media (max-width: 720px) { h1, .cta h2 { font-size: 1.6rem; } h2, .news h1, .feature h2 { font-size: 1.25rem; } }

/* Logga ut: tunn SF-text, i linje med namnet. */
.who { line-height: 1; }
.who button.link { font-family: var(--sf); font-weight: 300; font-size: .9rem; color: var(--muted); }

/* Loggan i bannern kopierar IP:n. */
.hero-logo-btn { position: relative; z-index: 1; background: none; border: 0; padding: 0; cursor: pointer; transition: transform .15s; }
.hero-logo-btn:hover { transform: scale(1.04); }
.hero-logo-btn:active { transform: scale(.97); }

/* Bubbla längst ned. */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 10px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: .95rem; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Länkarna i sidfoten: vanlig SF-text. */
.foot-col a { font-family: var(--sf); font-weight: 400; font-size: .95rem; }

@media (max-width: 720px) {
  .nav { gap: 2px; justify-content: space-between; }
  .who-name { display: none; }
}

/* Bubblan i Minecraft-fonten. */
.toast { font-family: var(--mc); font-size: .85rem; letter-spacing: .02em; }

/* Inläggen studsar lite vid hover, som loggan. */
.post-card, .feature { transition: transform .15s; }
.post-card:hover, .feature:hover { transform: scale(1.03); }
.feature:hover { transform: scale(1.015); }
.post-card:active, .feature:active { transform: scale(.98); }

/* Loggan ljusnar lite vid hover, som IP-knappen. */
.hero-logo { transition: filter .15s; }
.hero-logo-btn:hover .hero-logo { filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)) brightness(1.1); }

/* Kommentarer: namn i vanlig fetstil som i Discord, knappar i vanlig text. */
.comment-head strong { font-family: "gg sans", var(--sf); font-weight: 700; font-size: .95rem; letter-spacing: 0; }
.comment-head small { font-size: .8rem; }
.comment-actions button.link { font-family: var(--sf); font-size: .85rem; letter-spacing: 0; }

/* Bara titlar (plus meny, IP-knapp och bubbla) har Minecraft-fonten; allt annat är SF. */
.btn, .tag, .badge, .kicker, .editor label, button.link, b, strong, .foot-col h4 {
  font-family: var(--sf); letter-spacing: 0; }
.btn { font-weight: 600; font-size: .9rem; }
.btn.small { font-size: .82rem; }
.tag, .badge { font-weight: 600; font-size: .85em; }
.kicker, .foot-col h4 { font-weight: 700; letter-spacing: .08em; }
.editor label { font-weight: 600; font-size: .95rem; }
b, strong { font-weight: 700; }
.guide-tile, .foot-logo b { font-family: var(--mc); font-weight: 400; }

/* Långa ord utan mellanslag ska inte sticka ut ur texten. */
.prose, .comment-body, .excerpt, .feature p { overflow-wrap: anywhere; }

/* Huvuden på de senaste som gillat; fler än fem = de sista tonas ut mot svart. */
.comment-actions { align-items: center; flex-wrap: wrap; }
.likers { display: inline-flex; align-items: center; margin-left: -8px; }
.likers:empty { display: none; }
.likers img, .likers i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -6px; object-fit: cover;
  background: var(--surface-2); }
.likers img:first-child, .likers i:first-child { margin-left: 0; }
.likers i { display: grid; place-items: center; font-style: normal; font-size: .65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.likers.more { -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }

/* Admin-gillning. */

/* Kommentarer: stjärna (admin), fästa, moderering. */
.star { display: inline-grid; place-items: center; color: var(--muted); }
.star svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.star.on { color: var(--gold); }
.star.on svg { fill: currentColor; }
button.star:hover { color: var(--gold); }
.mod-actions { display: inline-flex; gap: 14px; margin-left: auto; }
.mod-actions form { margin: 0; }
.mod-actions button.link { font-size: .8rem; opacity: .75; }
.mod-actions button.link:hover { opacity: 1; }
.danger-link:hover { color: var(--danger) !important; }

/* Kommentarer, lugnare: fäst/stjärnmärkt som små gråa markeringar (som i Discord), inga bakgrunder. */
.c-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; color: var(--muted); font-size: .75rem; }
.c-flag[hidden] { display: none; }
.c-flag svg { fill: currentColor; }
.star-flag svg { fill: var(--gold); }
button.like { display: inline-flex; align-items: center; gap: 5px; }
button.like svg { fill: none; stroke: currentColor; stroke-width: 2; }
button.like.liked svg { fill: currentColor; }
.reply-box summary { list-style: none; }
.reply-box summary::-webkit-details-marker { display: none; }

/* Klickbara namn och profilkort i Discord-stil. */
.user-link { background: none; border: 0; padding: 0; color: var(--text); font: 700 .95rem/1.2 "gg sans", var(--sf); cursor: pointer; }
.user-link:hover { text-decoration: underline; }
.pcard { position: absolute; z-index: 60; width: 300px; background: #111214; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); color: #dbdee1; }
.pcard[hidden] { display: none; }
.pcard.sheet { position: fixed; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(320px, calc(100vw - 32px)); }
.pcard-banner { height: 72px; background: #5865f2 center/cover no-repeat; }
.pcard-avatar { position: absolute; top: 28px; left: 14px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid #111214;
  background: #111214; object-fit: cover; }
.pcard-body { padding: 48px 16px 16px; }
.pcard-name { font: 700 1.2rem/1.25 "gg sans", var(--sf); color: #f2f3f5; }
.pcard-username { font-size: .85rem; color: #b5bac1; }
.pcard-role { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 4px; background: #1e1f22; font-size: .75rem; font-weight: 600; }
.pcard-role[hidden] { display: none; }
.pcard-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #2b2d31; }
.pcard-section h5 { margin: 0 0 6px; font: 700 .72rem var(--sf); color: #f2f3f5; }
.pcard-dates { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #b5bac1; }
.pcard-date { display: inline-flex; align-items: center; gap: 6px; }
.pcard-date svg { fill: #b5bac1; }
.pcard-dot { width: 4px; height: 4px; border-radius: 50%; background: #4e5058; }
.pcard-btn { display: block; margin-top: 14px; padding: 8px; border-radius: 6px; background: #5865f2; color: #fff; text-align: center;
  font-weight: 600; font-size: .88rem; }
.pcard-btn:hover { background: #4752c4; }
.pcard-ban { display: block; width: 100%; margin-top: 8px; padding: 7px; border: 1px solid #3a3c42; border-radius: 6px; background: none;
  color: #f23f43; font: 600 .82rem var(--sf); cursor: pointer; }
.pcard-ban[hidden] { display: none; }
.pcard-ban:hover { background: rgba(242,63,67,.1); }
.pcard-ban.on { color: #b5bac1; }

/* Profilkort: dekoration, server-tagg, bio, boost. */
.pcard-avatar-wrap { position: absolute; top: 28px; left: 14px; width: 92px; height: 92px; }
.pcard-avatar-wrap .pcard-avatar { position: static; }
.pcard-deco { position: absolute; left: -2px; top: -2px; width: 96px; height: 96px; pointer-events: none; }
.pcard-deco[hidden] { display: none; }
.pcard-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcard-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 4px; background: #2b2d31;
  font-size: .72rem; font-weight: 700; color: #dbdee1; line-height: 18px; }
.pcard-tag[hidden], .pcard-tag img[hidden] { display: none; }
.pcard-bio { margin: 0; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; color: #dbdee1; }
.pcard-bio[hidden], .pcard-about[hidden], .pcard-bio-form[hidden], .pcard-boost[hidden], .pcard-date[hidden], .pcard-dot[hidden],
.pcard-bio-edit[hidden] { display: none; }
.pcard-bio-form textarea { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #3a3c42; background: #1e1f22; color: #dbdee1;
  font: .85rem/1.4 var(--sf); resize: vertical; }
.pcard-bio-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: #949ba4; }
.pcard-link { background: none; border: 0; padding: 0; color: #00a8fc; font: .8rem var(--sf); cursor: pointer; }
.pcard-link.strong { font-weight: 600; }
.pcard-link:hover { text-decoration: underline; }
.pcard-bio-edit { margin-top: 4px; }
.pcard-boost { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; color: #ff73fa; }
.pcard-boost svg { fill: currentColor; }

/* Rollikon vid namnet (som i Discord) och rollen på profilkortet. */
.role-icon { width: 16px; height: 16px; image-rendering: pixelated; margin-left: -4px; }
.pcard-role { display: inline-flex; align-items: center; gap: 5px; color: #dbdee1; }
.pcard-role img { image-rendering: pixelated; }

/* Wiki-editor */
.editor input[type="color"] { padding: 2px; height: 44px; cursor: pointer; }
.image-btn { cursor: pointer; }

/* Wiki-rutor: uppladdad ikon fyller hela rutan, namnet i SF. */
.guide-icon { overflow: hidden; }
.guide-icon img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.guide-tile, .guide-name { font-family: var(--sf); font-weight: 600; font-size: 1rem; letter-spacing: 0; }

/* Wiki-sidor: sektioner och bilder med bildtext (som Origin Realms guider). */
.wiki-body h2 { margin-top: 1.8em; scroll-margin-top: 90px; }
.wiki-body figure { margin: 28px 0; }
.wiki-body figure img { display: block; width: 100%; border-radius: 6px; }
.wiki-body figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: .95rem; }

/* Blockeditor */
.blocks-head h3 { margin: 8px 0 2px; }
.blocks { display: grid; gap: 12px; }
.block { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.block-heading { font-weight: 700; font-size: 1.1rem; }
.block-tools { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.block-type { flex: 1; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.block-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--surface-2);
  color: var(--muted); cursor: pointer; }
.block-btn svg { fill: currentColor; stroke: currentColor; stroke-width: 2; }
.block-btn:hover { color: var(--text); }
.block-image-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.block-preview { width: 200px; max-width: 100%; border-radius: 6px; }
.block-preview[hidden] { display: none; }
.block-image-fields { flex: 1; min-width: 200px; display: grid; gap: 8px; justify-items: start; }
.block-image-fields .block-caption { width: 100%; }
.block-add { margin-top: 4px; }
.editor .block input, .editor .block textarea { width: 100%; }

/* Menyn: SF-text, vald sida markeras med vit text och ett tunt streck under (ingen ruta). */
.nav a { position: relative; font-family: var(--sf); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--muted); background: none; padding: 8px 12px; border-radius: 0; transition: color .15s; }
.nav a:hover { background: none; color: var(--text); }
.nav a.on { background: none; color: var(--text); }
.nav a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--text); }

/* Sök i wikin */
.wiki-search { display: block; width: min(420px, 100%); margin: 0 auto 32px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.guide-tile[hidden], #wiki-none[hidden] { display: none; }

/* Startsidan: bannern går upp under topbaren. */
.top.overlay { position: fixed; left: 0; right: 0; background: linear-gradient(rgba(0,0,0,.55), transparent); border-bottom-color: transparent;
  backdrop-filter: none; transition: background .2s, border-color .2s; }
.top.overlay.scrolled { background: rgba(5,6,8,.86); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.top.overlay .nav a { color: rgba(255,255,255,.8); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.top.overlay .nav a:hover, .top.overlay .nav a.on { color: #fff; }
.top.overlay .nav a.on::after { background: #fff; }
.top.overlay .who-name, .top.overlay .who button.link { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Discord-kortet ovanför sidfoten (som en inbjudan i Discord). */
.cta { padding: 56px 0 72px; background: none; text-align: left; }
.invite { max-width: 760px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.invite-banner { height: 120px; background: linear-gradient(120deg, #2b4bb3, #16245c) center/cover no-repeat; }
.invite-body { display: flex; align-items: center; gap: 18px; padding: 0 24px 22px; flex-wrap: wrap; }
.invite-icon { width: 72px; height: 72px; margin-top: -28px; border-radius: 18px; border: 5px solid var(--surface); background: var(--surface); }
.invite-text { flex: 1; min-width: 220px; padding-top: 14px; }
.invite-text h2 { font-size: 1.4rem; margin: 0 0 4px; }
.invite-text p { margin: 0; color: var(--muted); font-size: .95rem; }
.invite-counts { display: flex; gap: 16px; margin-top: 8px !important; font-size: .85rem !important; }
.invite-counts span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #80848e; }
.dot.online { background: #23a55a; }
.invite-btn { margin-top: 14px; background: #248046; padding: 11px 26px; }
.invite-btn:hover { background: #1a6334; filter: none; }
@media (max-width: 560px) { .invite-btn { width: 100%; text-align: center; } }

/* Glidande streck under menyn (ersätter strecket per länk). */
.nav { position: relative; }
.nav a.on::after { display: none; }
.nav-line { position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; border-radius: 2px; background: #fff; pointer-events: none;
  transition: transform .22s ease-in, width .22s ease-in, opacity .15s; }

/* Topbaren över bannern: ingen linje, längre mörk toning neråt så texten syns. */
.top.overlay, .top.overlay.scrolled { border-bottom: 0; }
.top.overlay { background: none; }
.top.overlay::before { content: ""; position: absolute; inset: 0 0 auto; height: 170px; pointer-events: none; z-index: -1;
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25) 55%, transparent); transition: opacity .2s; }
.top.overlay.scrolled { background: rgba(5,6,8,.9); }
.top.overlay.scrolled::before { opacity: 0; }
.top.overlay .nav a, .top.overlay .who-name, .top.overlay .who button.link { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.45); }
.top.overlay .nav a { opacity: .85; }
.top.overlay .nav a:hover, .top.overlay .nav a.on { opacity: 1; }
.top.overlay .nav-line { box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Filterknappar (wiki-kategorier, bloggsortering). */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.filter { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: none; color: var(--muted);
  font: 500 .88rem var(--sf); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.filter:hover { color: var(--text); border-color: #333849; }
.filter.on { color: var(--bg); background: var(--text); border-color: var(--text); }
.guide-tile[hidden] { display: none; }

/* Bloggen: rutnät med varierande storlekar. */
.blog-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.blog-bar .filters { margin: 0; justify-content: flex-start; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 18px; }
.tile { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius); color: #fff;
  background: var(--surface-2) center/cover no-repeat; transition: transform .15s; }
.tile:hover { transform: scale(1.015); }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.85)); }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile.tall { grid-row: span 2; }
.tile-logo { position: absolute; top: 50%; left: 50%; width: 30%; max-width: 120px; transform: translate(-50%, -60%); opacity: .35; }
.tile-text { position: relative; padding: 18px; }
.tile h3 { margin: 4px 0; font-size: 1.15rem; color: #fff; }
.tile.big h3 { font-size: 1.6rem; }
.tile .meta { margin: 0; color: rgba(255,255,255,.75); }
.tile .excerpt { color: rgba(255,255,255,.8); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile:not(.big):not(.tall) .excerpt { display: none; }
.tile-stats { display: flex; gap: 14px; margin: 8px 0 0; font-size: .8rem; color: rgba(255,255,255,.75); }
.tile-stats span { display: inline-flex; align-items: center; gap: 5px; }
.tile-stats svg { fill: currentColor; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; } .tile.big, .tile.wide { grid-column: auto; } .tile.big { grid-row: span 2; } .tile.tall { grid-row: auto; } }

/* Gilla ett blogginlägg. */
.post-like { margin: 28px 0 0; }
.like-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line);
  background: none; color: var(--muted); font: 600 .95rem var(--sf); cursor: pointer; transition: color .15s, border-color .15s; }
.like-btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.like-btn:hover:not(:disabled) { color: #ff5f8f; border-color: #ff5f8f; }
.like-btn.liked { color: #ff5f8f; border-color: #ff5f8f; }
.like-btn.liked svg { fill: currentColor; }
.like-btn:disabled { cursor: default; opacity: .7; }

/* Sidfot: fyra kolumner med kontakt. */
.foot-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
.foot-text { color: var(--muted); font-size: .88rem; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* Hover på inlägg: bilden inuti zoomar in och vrids lite, och glider tillbaka mjukt. Rutan står still. */
.tile:hover { transform: none; }
.tile-bg { position: absolute; inset: 0; background: var(--surface-2) center/cover no-repeat;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile::before { z-index: 1; }
.tile-text { z-index: 2; }
.tile:hover .tile-bg { transform: scale(1.08) rotate(1.5deg); }
.tile-logo { transform: translate(-50%, -60%); }
.feature-img, .post-img { position: relative; }
.feature-img::before, .post-img::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.feature-img > *, .post-img > * { position: relative; }
.feature:hover .feature-img::before, .post-card:hover .post-img::before { transform: scale(1.08) rotate(1.5deg); }
.post-card, .feature, .post-card:hover, .feature:hover { transform: none; }

/* Blogginlägg med innehållslista till vänster (som Origin Realms). Innehållet står kvar i mitten. */
.with-toc { display: grid; grid-template-columns: 1fr minmax(0, 860px) 1fr; gap: 32px; padding: 40px 16px; }
.with-toc > .post-page { grid-column: 2; padding: 0; }
.toc { grid-column: 1; justify-self: start; align-self: start; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px;
  max-width: 260px; padding-left: clamp(0px, 2vw, 28px); }
.toc a { color: var(--muted); font-size: .92rem; line-height: 1.4; transition: color .15s; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); font-weight: 600; }
.post-page h2 { scroll-margin-top: 100px; }
.post-page figure { margin: 28px 0; }
.post-page figure img { display: block; width: 100%; border-radius: 6px; }
.post-page figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: .95rem; font-style: italic; }
@media (max-width: 1180px) { .with-toc { grid-template-columns: minmax(0, 1fr); } .with-toc > .post-page { grid-column: 1; max-width: 860px; margin: 0 auto; width: 100%; } .toc { display: none; } }

/* Kaotiskt bloggrutnät: 4 kolumner, korten har olika bredd och höjd (--c, --r). */
.mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
.mosaic .tile { grid-column: span var(--c, 1); grid-row: span var(--r, 1); }
.tile.big h3 { font-size: 1.6rem; }
.tile.big .excerpt { display: -webkit-box; }
.tile:not(.big) .excerpt { display: none; }
/* Hover: hela kortet zoomar lite, och bilden inuti zoomar och vrids. */
.tile { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.tile:hover { transform: scale(1.03); z-index: 3; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
@media (max-width: 1000px) { .mosaic { grid-template-columns: repeat(2, 1fr); } .mosaic .tile { grid-column: span min(var(--c, 1), 2); } }
@media (max-width: 560px) { .mosaic { grid-template-columns: 1fr; grid-auto-rows: 170px; } .mosaic .tile { grid-column: auto; grid-row: span min(var(--r, 1), 2); } }

/* Bloggrutnätet i strikt läsordning (inga kort flyttas fram), med datum på varje kort. */
.mosaic { grid-auto-flow: row; }
.tile-date { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 99px; background: rgba(5,6,8,.7);
  backdrop-filter: blur(6px); color: #fff; font-size: .78rem; font-weight: 600; }
@media (max-width: 1000px) { .mosaic .tile { grid-row: span min(var(--r, 1), 2); } }

/* Startsidans nyhetskort: samma hover som i bloggen – bildrutan zoomar lite med skugga, bilden inuti zoomar och vrids. */
.feature-img, .post-img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.feature:hover .feature-img, .post-card:hover .post-img { transform: scale(1.03); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.feature-img > img, .post-img > img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.feature:hover .feature-img > img, .post-card:hover .post-img > img { transform: scale(1.08) rotate(1.5deg); }
.post-card, .feature { position: relative; z-index: 0; }
.post-card:hover, .feature:hover { z-index: 2; }

/* Bloggen: två kort per rad i olika former; senaste inlägget störst. */
.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 20px; }
.mosaic .tile:first-child h3 { font-size: 2rem; }
@media (max-width: 1000px) { .mosaic { grid-template-columns: repeat(2, 1fr); } .mosaic .tile { grid-column: span var(--c, 1); } }
@media (max-width: 560px) { .mosaic { grid-template-columns: 1fr; } .mosaic .tile { grid-column: auto; grid-row: span min(var(--r, 1), 2); } }

.blog-bar { justify-content: flex-end; }
.blog-bar:empty { display: none; }

/* Plusknapp (nytt inlägg / ny wiki-sida) i högra hörnet. */
.add-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); transition: background .15s, transform .15s; }
.add-btn svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.add-btn:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }

/* Wiki-rutor: samma hover som bloggkorten – rutan zoomar lite med skugga, bilden inuti zoomar och vrids. */
.guide-icon { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.guide-tile:hover .guide-icon { transform: scale(1.06); box-shadow: 0 14px 32px rgba(0,0,0,.55); }
.guide-icon img, .guide-icon b { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.guide-tile:hover .guide-icon img, .guide-tile:hover .guide-icon b { transform: scale(1.1) rotate(3deg); }
.guide-tile:active .guide-icon { transform: scale(.98); }

/* Menystrecket: aktiva länken har sitt eget streck; .nav-line används bara när det glider från förra sidan. */
.nav a.on::after { display: block; content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: currentColor; }
.nav-line { opacity: 0; transition: none; }
.nav.nav-moving a.on::after { opacity: 0; }
.nav.nav-moving .nav-line { opacity: 1; }
.nav-line.run { transition: transform .16s ease-in, width .16s ease-in; }

/* Under bannern: en suddig, mörk kopia av bannern som tonar ut i bakgrunden (mysigare övergång). */
.glow-zone { position: relative; isolation: isolate; }
.hero-glow { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: center top / cover no-repeat; filter: blur(60px) saturate(1.4) brightness(.75); opacity: .8; transform: scale(1.15);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

/* Guide: sektioner per kategori. */
.guide-section { margin-bottom: 48px; }
.guide-section-title { max-width: 760px; margin: 0 auto 22px; font-size: 1.3rem; }

/* Suddiga bannern: börjar bakom bannern (ingen kant där den slutar), mörkare och mjukare. */
.hero-glow { inset: -320px 0 auto; height: 1100px; filter: blur(70px) saturate(1.2) brightness(.42); opacity: .7;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.hero-art.has-banner::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; pointer-events: none; box-shadow: none;
  background: linear-gradient(transparent, rgba(5,6,8,.35)); }

/* Alla bilder i ett inlägg (Updates och Guide) är lika stora. */
.post-page figure img, .wiki-body figure img, .post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Bannern ligger överst och tonar ut nedtill, så den suddiga kopian bakom tar vid helt utan kant. */
main > .hero { position: relative; z-index: 1; }
.hero-art.has-banner { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.hero-art.has-banner::after { display: none; }

/* Guide-sidor: sektionsrubriker och text centrerade, som bildtexterna. */
.wiki-body { margin-inline: auto; text-align: center; }
.wiki-body ul, .wiki-body ol { display: inline-block; text-align: left; }

/* Förhandsvisning i Updates: datum bredvid titeln. */
.tile-day { margin-left: 8px; font: 500 .8rem var(--sf); color: rgba(255,255,255,.7); white-space: nowrap; vertical-align: middle; }

/* Updates-inlägg: rubriker och text centrerade, som i Guide. */
.post-page .prose { margin-inline: auto; text-align: center; }
.post-page .prose ul, .post-page .prose ol { display: inline-block; text-align: left; }
.post-page .admin-bar { justify-content: center; }

/* Mjukare skuggor överallt: kort lyfts lite, inga tunga mörka moln. */
.tile:hover, .feature:hover .feature-img, .post-card:hover .post-img { box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.guide-tile:hover .guide-icon { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.guide-icon { box-shadow: none; }
.guide-icon b { text-shadow: none; }
.hero-logo, .hero-logo-btn:hover .hero-logo { filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.hero-logo-btn:hover .hero-logo { filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) brightness(1.1); }
.top.overlay .nav a, .top.overlay .who-name, .top.overlay .who button.link { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.top.overlay .nav-line { box-shadow: none; }
.toast { box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.pcard { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); }

/* Bannerns adminknappar uppe till höger (under topbaren), inte nere i den uttonade delen. */
.hero-art .banner-tools { top: 84px; bottom: auto; right: 20px; }

/* Justera den suddiga bakgrunden. */
.glow-zone.glow-editing { cursor: grab; outline: 2px dashed var(--accent-2); outline-offset: -2px; }
.glow-zone.glow-editing:active { cursor: grabbing; }
.glow-zone.glow-editing .news { pointer-events: none; user-select: none; }
.glow-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px; background: rgba(5,6,8,.88); border: 1px solid var(--line); }
.glow-bar[hidden] { display: none; }
.glow-bar .hint, .glow-bar .zoom { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* Startsidans nyheter: senaste stort, fyra mindre bredvid/under. */
.home-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; margin: 32px 0; }
@media (max-width: 1000px) { .home-mosaic { grid-template-columns: repeat(2, 1fr); } }

/* Mjukare övergång bannern → suddiga bakgrunden: bannerns nedre del blir gradvis suddigare (progressiv oskärpa)
   samtidigt som den tonar ut, så de två bilderna flyter ihop. */
.hero-fade { position: absolute; inset: auto 0 0; height: 55%; pointer-events: none; z-index: 0;
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.hero-art.has-banner { -webkit-mask-image: linear-gradient(#000 55%, rgba(0,0,0,.6) 78%, transparent); mask-image: linear-gradient(#000 55%, rgba(0,0,0,.6) 78%, transparent); }
.hero-glow { filter: blur(90px) saturate(1.2) brightness(.45); }

/* Kugghjul för admin, diskret i bannerns hörn. */
.banner-gear { position: absolute; top: 84px; right: 20px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: rgba(5,6,8,.35); color: rgba(255,255,255,.55); cursor: pointer;
  opacity: .5; transition: opacity .2s, transform .4s, background .2s, color .2s; }
.banner-gear svg { fill: currentColor; }
.hero-art:hover .banner-gear { opacity: 1; }
.banner-gear:hover { color: #fff; background: rgba(5,6,8,.65); transform: rotate(60deg); }
.hero-art .banner-tools { top: 126px; }
.hero-art.admin-banner { cursor: default; }

/* Kugghjulsmenyn: två tydliga grupper (Banner / Suddig bakgrund), en åtgärd per rad, borttagning i rött. */
.banner-menu { flex-direction: column; align-items: stretch; gap: 6px; width: 260px; padding: 8px; border-radius: 12px;
  background: rgba(10,11,15,.94); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.banner-menu[hidden] { display: none; }
.bm-group { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.bm-group + .bm-group { border-top: 1px solid var(--line); padding-top: 10px; }
.bm-title { margin: 0 0 4px; padding: 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.bm-title small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.bm-group form { margin: 0; }
.bm-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text);
  font: 500 .9rem var(--sf); text-align: left; cursor: pointer; }
.bm-item:hover { background: var(--surface-2); }
.bm-item.danger { color: #f26b6b; }
.bm-item.danger:hover { background: rgba(242,63,67,.12); }

/* Menyn utan streck: vald sida vit och fet, de andra grå och tunnare. */
.nav a.on::after, .nav-line { display: none !important; }
.nav a { color: var(--muted); font-weight: 400; opacity: 1; transition: color .15s; }
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--text); font-weight: 700; }
.top.overlay .nav a { color: rgba(255,255,255,.62); opacity: 1; font-weight: 400; }
.top.overlay .nav a:hover { color: rgba(255,255,255,.9); }
.top.overlay .nav a.on { color: #fff; font-weight: 700; }
/* Fet text tar mer plats: reservera bredden för fet stil så menyn inte hoppar när man byter sida. */
.nav a { display: inline-flex; flex-direction: column; align-items: center; }
.nav a::before { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }

/* Ingen ljus kant nedtill på kort vid hover: mörk botten under bilden, toningen går 1 px utanför, och kantklippningen
   hålls skarp även när kortet skalas. */
.tile { background: #000; -webkit-mask-image: -webkit-radial-gradient(white, black); backface-visibility: hidden; }
.tile::before { inset: -1px; }
.tile-bg { inset: -1px; }

/* Inlägg: innehållslista | text och bilder | kommentarer till höger (följer med när man scrollar, egen scroll). */
.post-layout { grid-template-columns: minmax(160px, 1fr) minmax(0, 760px) minmax(320px, 400px); gap: 40px; max-width: 1640px; margin: 0 auto; }
.post-layout > .post-page { grid-column: 2; }
.comments-side { grid-column: 3; align-self: start; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto;
  margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.comments-side h2 { font-size: 1.1rem; margin-bottom: 12px; }
.comments-side .comment.reply, .comments-side .reply-box { margin-left: 20px; }
.comments-side::-webkit-scrollbar { width: 8px; }
.comments-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
@media (max-width: 1180px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-layout > .post-page, .comments-side { grid-column: 1; max-width: 860px; width: 100%; margin: 0 auto; }
  .comments-side { position: static; max-height: none; }
}

/* IP-knappen mörkblå i stället för gul. */
.ip-btn { background: #1d3a8a; color: #fff; }
.ip-btn:hover { background: #2448a8; filter: none; }

/* Himlen bakom alla sidor. --night går från 0 (toppen) till 1 (botten) när man scrollar. */
html { background: var(--bg); }
body { background: transparent; }
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-img { position: absolute; inset: -8%; background: center / cover no-repeat; filter: blur(70px) saturate(1.2) brightness(.5); opacity: .75; }
.sky-night { position: absolute; inset: 0; background: linear-gradient(#0b1838, #03060f 75%); opacity: calc(var(--night, 0) * .85); }
.sky-stars { position: absolute; inset: 0; opacity: calc((var(--night, 0) - .45) * 1.6);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 58% 33%, #fff 50%, transparent),
    radial-gradient(2px 2px at 71% 9%, #fff 50%, transparent), radial-gradient(1px 1px at 83% 27%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 92% 48%, #fff 50%, transparent), radial-gradient(1px 1px at 6% 61%, #fff 50%, transparent),
    radial-gradient(1px 1px at 35% 70%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 66% 64%, #fff 50%, transparent),
    radial-gradient(1px 1px at 79% 78%, #fff 50%, transparent), radial-gradient(1px 1px at 20% 88%, #fff 50%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { filter: brightness(.7); } to { filter: brightness(1.2); } }
@media (prefers-reduced-motion: reduce) { .sky-stars { animation: none; } }
/* Den gamla suddiga kopian under bannern behövs inte längre (himlen tar över). */
.hero-glow { display: none; }
.glow-zone { isolation: auto; }

/* Sidfoten släpper igenom natthimlen. */
.foot { background: rgba(3,5,12,.55); }

/* E-postadressen i sidfoten kopieras vid klick. */
.foot-copy { background: none; border: 0; padding: 0; color: var(--muted); font: 400 .95rem var(--sf); cursor: pointer; text-align: left; width: fit-content; }
.foot-copy:hover { color: var(--text); }

/* IP-knappen i sidfoten lyser svagt blått och lyser upp sin omgivning lite. */
.foot-brand { position: relative; }
.foot-brand .ip-btn { position: relative; box-shadow: 0 0 18px rgba(72, 120, 255, .45), 0 0 60px rgba(72, 120, 255, .18); }
.foot-brand .ip-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 220px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(72, 120, 255, .16), transparent); pointer-events: none; z-index: -1; }
.foot-brand .ip-btn:hover { box-shadow: 0 0 22px rgba(72, 120, 255, .6), 0 0 70px rgba(72, 120, 255, .25); }

/* Mindre sken kring IP-knappen i sidfoten. */
.foot-brand .ip-btn { box-shadow: 0 0 10px rgba(72, 120, 255, .22); }
.foot-brand .ip-btn:hover { box-shadow: 0 0 14px rgba(72, 120, 255, .32); }
.foot-brand .ip-btn::before { width: 240px; height: 140px; background: radial-gradient(closest-side, rgba(72, 120, 255, .07), transparent); }

/* Kopierat-bubblan: diskret och proffsig, vanlig text med en bock. */
.toast { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 10px;
  background: rgba(22, 25, 36, .92); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.08);
  font: 500 .88rem var(--sf); letter-spacing: 0; color: var(--text); box-shadow: 0 6px 20px rgba(0,0,0,.3);
  transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease; }
.toast::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; background: #23a55a
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.toast.show { transform: translate(-50%, 0); }

/* Natten: mjuk övergång även mellan scrollsteg, och lite ljusare som mest. */
.sky-night { opacity: calc(var(--night, 0) * .78); transition: opacity .6s ease-out; }
.sky-stars { transition: opacity .8s ease-out; }

/* Stjärnorna: små prickar utan sken som långsamt tonar in och ut, var och en i sin egen takt. */
.sky-stars { background-image: none; animation: none; }
.sky-stars i { position: absolute; border-radius: 50%; background: #fff; opacity: .85; animation: star-fade 10s ease-in-out infinite; }
@keyframes star-fade { 0%, 100% { opacity: .85; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .sky-stars i { animation: none; } }

/* Kopierat-bubblan utan bock. */
.toast::before { display: none; }
.toast { padding: 9px 16px; }

/* Alpha-märke i sidfoten. */
.alpha-tag { padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(105,149,231,.4); color: var(--accent-2); font: 600 .7rem var(--sf); letter-spacing: .04em; text-transform: uppercase; }

/* Inställningssidan och kugghjulet i topbaren (admins). */
.settings-link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); transition: color .15s, transform .4s; }
.settings-link svg { fill: currentColor; }
.settings-link:hover { color: var(--text); transform: rotate(60deg); }
.settings-page { max-width: 820px; }
.settings-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; margin: 0; display: grid; gap: 14px; background: rgba(15,17,23,.6); }
.settings-group legend { padding: 0 8px; font-weight: 700; }
.settings-group label small { display: block; }
.logo-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-row img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.saved-note { color: #23a55a; font-weight: 600; }

/* ===== Telefon ===== */
@media (max-width: 720px) {
  /* Topbar: en kompakt rad (Discord, IP | inställningar, profil) och menyn i en tät rad under. */
  .top-inner { gap: 6px 10px; padding: 8px 14px 4px; min-height: 0; }
  .top-left { gap: 8px; }
  .icon-btn { width: 34px; height: 30px; }
  .ip-btn { padding: 6px 10px; font-size: .72rem; }
  .top-right { gap: 6px; }
  .who img { width: 26px; height: 26px; }
  .who button.link { font-size: .8rem; }
  .btn.small { padding: 6px 11px; font-size: .78rem; }
  .nav { justify-content: center; gap: 0; }
  .nav a { padding: 6px 12px; font-size: .9rem; }
  /* Bannern: lagom hög, loggan mindre, kugghjulet under topbaren. */
  .hero-art { height: 300px; }
  .hero-logo { width: 120px; }
  .banner-gear { top: 104px; right: 12px; }
  .hero-art .banner-tools { top: 144px; right: 12px; left: 12px; width: auto; }
  /* Nyhetskorten: en kolumn, senaste lite högre. */
  .home-mosaic, .mosaic { grid-template-columns: 1fr; grid-auto-rows: 150px; gap: 14px; }
  .home-mosaic .tile, .mosaic .tile { grid-column: auto; grid-row: span 1; }
  .home-mosaic .tile:first-child, .mosaic .tile:first-child { grid-row: span 2; }
  .tile h3, .tile.big h3, .mosaic .tile:first-child h3 { font-size: 1.15rem; }
  .tile .excerpt { display: none !important; }
  .news h1 { font-size: 1.35rem; }
  main > section { padding: 28px 0; }
  /* Inlägg och guider: mindre rubriker och luft. */
  .with-toc { padding: 24px 16px; }
  .post-page h1, .guide-head h1 { font-size: 1.6rem; }
  .guide-head { gap: 16px; }
  .guide-icon.big { width: 96px; height: 96px; }
  .guide-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 22px 14px; }
  .guide-icon { width: 96px; height: 96px; }
  .comments-side { padding: 14px; }
  .settings-group { padding: 14px; }
}

/* Släppyta för bilder (inställningar). */
.dropzone { padding: 16px; border: 2px dashed var(--line); border-radius: var(--radius); transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--accent-2); background: rgba(91,124,246,.08); }
.drop-label { cursor: pointer; font-weight: 400 !important; }
.drop-pick { color: var(--accent-2); text-decoration: underline; }
.drop-name { color: #23a55a; }

/* Texten på korten ska inte hoppa när de zoomar: håll korten i ett eget lager hela tiden, så webbläsaren inte ritar om
   texten på nya pixelpositioner när zoomen börjar eller slutar. */
.tile, .guide-icon, .feature-img, .post-img { will-change: transform; transform: translateZ(0); }
.tile:hover { transform: translateZ(0) scale(1.03); }
.tile-text, .tile-date { transform: translateZ(0); -webkit-font-smoothing: antialiased; }

/* Prestanda: den suddiga himlen är en liten bild som förstoras (billig oskärpa i stället för 70 px på en stor bild). */
.sky-img { filter: blur(26px) saturate(1.2) brightness(.5); inset: -4%; }
/* Lager för hover-zoom bara på enheter med mus; telefoner slipper hålla dem i minnet. */
@media (hover: none) {
  .tile, .guide-icon, .feature-img, .post-img, .tile-text, .tile-date { will-change: auto; transform: none; }
}
/* Live-oskärpa är dyrt på telefon: ersätt med fasta toningar. */
@media (max-width: 900px) {
  .hero-fade { display: none; }
  .top, .top.overlay.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,6,8,.94); }
  .top.overlay { background: none; }
  .tile-date, .glow-bar, .banner-menu, .toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sky-stars i { animation: none; }
}

/* Längst ned på sidan är det helt natt (bakgrundsbilden syns inte längre). */
.sky-night { opacity: var(--night, 0); background: linear-gradient(#08122b, #02040b 70%); }

/* Kommentarerna längst ned under inlägget igen (som förut). */
.post-layout { grid-template-columns: 1fr minmax(0, 860px) 1fr; gap: 32px; max-width: none; }
.comments-side { grid-column: 2; position: static; max-height: none; overflow: visible; margin-top: 40px; padding: 0;
  border: 0; border-radius: 0; background: none; }
.comments-side h2 { font-size: 1.5rem; }
.comments-side .comment.reply, .comments-side .reply-box { margin-left: 34px; }
@media (max-width: 1180px) { .comments-side { grid-column: 1; } }

/* Läsbar brödtext i inlägg och guider: rubriker, bildtexter och titel centrerade, men själva texten vänsterställd
   i en lagom bred spalt mitt på sidan, med större text och luft mellan stycken. */
.post-page .prose p:not(.meta), .wiki-body p, .post-page .prose li, .wiki-body li {
  text-align: left; font-size: 1.05rem; line-height: 1.8; color: #d9dde6; font-weight: 400; }
.post-page .prose > p:not(.meta), .wiki-body > p, .post-page .prose > ul, .post-page .prose > ol, .wiki-body > ul, .wiki-body > ol {
  max-width: 680px; margin-left: auto; margin-right: auto; }
.post-page .prose p, .wiki-body p { margin: 0 auto 1.1em; }
.post-page .prose ul, .post-page .prose ol, .wiki-body ul, .wiki-body ol { display: block; padding-left: 1.3em; }
.post-page .prose h2, .wiki-body h2 { margin: 2.2em auto .8em; font-size: 1.55rem; }
.post-page .prose strong, .wiki-body strong { color: #fff; }
.post-page .prose figure, .wiki-body figure { max-width: 760px; margin: 2em auto; }

/* Som Origin Realms: bara titel och datum centrerade; sektionsrubriker, text och bilder vänsterställda i en jämn spalt. */
.post-page .prose, .wiki-body { text-align: left; max-width: 720px; margin-inline: auto; }
.post-page .prose > h1, .post-page .prose > .meta, .post-page .admin-bar, .post-page .post-like { text-align: center; justify-content: center; }
.post-page .prose > p:not(.meta), .wiki-body > p, .post-page .prose > ul, .post-page .prose > ol, .wiki-body > ul, .wiki-body > ol,
.post-page .prose figure, .wiki-body figure { max-width: none; margin-left: 0; margin-right: 0; }
.post-page .prose h2, .wiki-body h2 { text-align: left; margin: 1.8em 0 .6em; font-size: 1.45rem; }
.post-page .prose figure, .wiki-body figure { margin: 1.8em 0; }
.post-page .prose figcaption, .wiki-body figcaption { text-align: center; }
.post-page .prose p, .wiki-body p { margin: 0 0 1.2em; }

/* Innehållslistan: mitt i vänsterkolumnen, och vertikalt mitt på skärmen medan man läser. */
.toc { justify-self: center; top: 50vh; transform: translateY(-50%); padding-left: 0; text-align: left; }
.toc a { transform-origin: left center; transition: color .2s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.toc a.on { transform: scale(1.06); }

/* Innehållet tonar upp och växer lite när det kommer in i bild. */
.prose > .reveal { opacity: 0; transform: translateY(18px) scale(.985); }
.prose > .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
/* Rubrik man hoppat till via listan: kort lyft. */
.post-page h2.jumped { animation: jumped .9s cubic-bezier(.2, .7, .2, 1); }
@keyframes jumped { 0% { opacity: .2; transform: translateY(14px) scale(.97); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: none; } }

/* Sektionsrubriker i inlägg och guider: SF i fetstil (Minecraft-fonten saknar snygga å, ä, ö), ingen animation. */
.post-page .prose h2, .wiki-body h2 { font-family: var(--sf); font-weight: 700; font-size: 1.7rem; letter-spacing: -.01em; animation: none; }
.post-page h2.jumped { animation: none; }
/* Innehållslistan nära vänsterkanten. */
.toc { justify-self: start; padding-left: clamp(16px, 2.2vw, 36px); }

.block .block-short { margin-top: 6px; font-size: .88rem; }

/* Innehållslistan utan pixelhopp: ingen skalning eller viktbyte (som flyttar texten), bara färg; centreras i höjdled
   med flex i stället för transform (som kan hamna på halva pixlar). */
.toc { top: 0; height: 100vh; transform: none; justify-content: center; margin-top: -40px; }
.toc a, .toc a.on { transform: none; font-weight: 500; }
.toc a.on { color: var(--text); }

/* Gilla-knappen sist i texten, vänsterställd i samma spalt med en tunn linje ovanför. */
.post-page .post-like { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 36px 0 0; padding-top: 22px;
  border-top: 1px solid var(--line); text-align: left; }
.post-like-text { color: var(--muted); font-size: .95rem; }
/* Kommentarerna i samma spalt som texten, rubriken i samma typsnitt som sektionsrubrikerna. */
.comments-side { max-width: 720px; width: 100%; justify-self: center; }
.comments-side h2 { font-family: var(--sf); font-weight: 700; font-size: 1.7rem; letter-spacing: -.01em; }

/* Alla rubriker och titlar i SF fetstil. Minecraft-fonten bara på IP-knapparna (play.mineva.se). */
h1, h2, h3, h4, .foot-logo b, .tile h3, .guide-name, .guide-tile, .news h1, .cta h2 {
  font-family: var(--sf); font-weight: 700; letter-spacing: -.01em; }
.ip-btn { font-family: var(--mc); font-weight: 400; letter-spacing: .02em; }
.tile h3 { font-size: 1.2rem; }
.tile.big h3, .mosaic .tile:first-child h3 { font-size: 1.9rem; }
.news h1 { font-size: 1.9rem; }
.post-page .prose > h1 { font-size: 2.4rem; }
@media (max-width: 720px) { .tile.big h3, .mosaic .tile:first-child h3 { font-size: 1.35rem; } .post-page .prose > h1 { font-size: 1.8rem; } }

/* Sidfoten alltid längst ned, även när sidan är kortare än fönstret. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .foot { flex-shrink: 0; }

/* Kugghjulen: tunn linjeikon, liten och diskret. */
.settings-link svg, .banner-gear svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.banner-gear { width: 30px; height: 30px; background: rgba(0,0,0,.28); color: rgba(255,255,255,.75); opacity: .6;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.banner-gear svg { width: 16px; height: 16px; }
.banner-gear:hover { background: rgba(0,0,0,.45); color: #fff; }
.settings-link svg { width: 17px; height: 17px; }