:root {
  --bg: #fff8ec;
  --card: #ffffff;
  --text: #2b1d0e;
  --muted: #8a7358;
  --accent: #f5a623;
  --accent-dark: #c47d06;
  --line: #f0e2c8;
  --bad: #d64545;
  --good: #2e9d57;
  --lvl1: #9ad0ff;
  --lvl2: #c7a6ff;
  --lvl3: #ffc93c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17120c;
    --card: #231b12;
    --text: #f6ead8;
    --muted: #b39c7e;
    --line: #3a2e20;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: inherit; }
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--accent); color: #2b1d0e;
}
.logo { font-weight: 800; font-size: 20px; text-decoration: none; white-space: nowrap; }
.guest-nav { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-width: 0; }
.guest-nav a { color: inherit; text-decoration: none; white-space: nowrap; }
.guest-nav .small-btn { margin: 0; }
@media (max-width: 480px) { .guest-nav { gap: 12px; font-size: 18px; } .guest-nav a span { display: none; } .guest-nav .small-btn { font-size: 14px; } }
.guest-cta p { margin-top: 0; }
.city-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.city-links a { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid #0002; font-size: 14px; }
.me { font-size: 14px; margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.me-name { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.me-count { white-space: nowrap; flex: none; margin-left: -2px; }
.me-name { display: flex; align-items: center; }
/* Smal telefon: profilbilledet er nok – så er der plads til knapperne i toppen */
@media (max-width: 480px) { .me-name .me-text { display: none; } .me-name .avatar-xs { width: 26px; height: 26px; margin-right: 2px; } }
.me .small-btn { margin-left: 0; flex: none; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 24px; margin: 4px 0 12px; }
h2 { font-size: 18px; margin: 20px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.card > h2:first-child { margin-top: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: 13px; }
label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 14px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
button, .btn {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer; text-align: center;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  background: var(--accent); color: #2b1d0e; text-decoration: none;
}
button:hover, .btn:hover { background: var(--accent-dark); color: #fff; }
button:disabled { opacity: .6; cursor: wait; }
.ghost { background: transparent; border-color: var(--line); color: var(--text); font-weight: 500; }
.top .ghost { border-color: #2b1d0e55; color: #2b1d0e; }
.small-btn { padding: 4px 10px; margin-left: 6px; font-size: 13px; }
.danger { background: transparent; color: var(--bad); border-color: var(--bad); font-weight: 500; padding: 6px 10px; font-size: 13px; }
.block { display: block; width: 100%; margin-top: 12px; padding: 14px; font-size: 17px; }
.error { color: var(--bad); font-weight: 600; margin: 6px 0 0; }
.error:empty { display: none; }
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); font-weight: 600; }
.flash.success { border-color: var(--good); }

.intro h1 { font-size: 32px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 12px 0; }
.seg-link, .seg-opt { flex: 1; text-align: center; padding: 10px; text-decoration: none; margin: 0; font-weight: 500; cursor: pointer; }
.seg-link.on, .seg-opt:has(input:checked) { background: var(--accent); color: #2b1d0e; font-weight: 700; }
.seg.scroll { overflow-x: auto; scrollbar-width: none; }
.seg.scroll .seg-link { flex: 1 0 auto; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.code { font-family: ui-monospace, monospace; letter-spacing: 2px; }
.big { font-size: 56px; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }

.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 2px dashed var(--accent); border-radius: 16px; padding: 32px 16px; margin: 0;
  text-align: center; cursor: pointer; font-weight: 700; font-size: 16px;
}
.drop span { font-size: 48px; }
/* Filknapperne er usynlige og ligger i hjørnet, så klik rammer knappen (label) og ikke dem */
.drop input, .pick input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.drop, .pick { position: relative; }
.preview.mirrored { transform: scaleX(-1); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.retry { margin: 12px 0 4px; }
.retry summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.retry form { margin-top: 4px; }
.new-place { margin: 8px 0 4px; }
.new-place summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: .92em; }
.preview { width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; background: #0002; display: block; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 26px; }
.stat small { color: var(--muted); }

.lvl { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px; color: #2b1d0e; white-space: nowrap; }
.lvl1 { background: var(--lvl1); } .lvl2 { background: var(--lvl2); } .lvl3 { background: var(--lvl3); }
.bonus { background: #ffb3c7; }

.list { list-style: none; padding: 0; margin: 0; }
.item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.list > li:last-child > .item, .list > .item:last-child { border-bottom: none; }
.item form { margin: 0; }
.thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--line); cursor: zoom-in; }
.grow { flex: 1; min-width: 0; }
.grow .t { font-weight: 700; overflow-wrap: anywhere; }
.rank { width: 36px; text-align: center; font-size: 22px; font-weight: 800; flex: none; }
.score { text-align: right; flex: none; }
.score b { font-size: 22px; }
.me-row { background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 10px; padding-left: 6px; padding-right: 6px; }

.post { padding: 0; overflow: hidden; }
.post img { width: 100%; max-height: 520px; object-fit: cover; display: block; cursor: zoom-in; }
.post .body { padding: 12px 16px; }
.result { text-align: center; }
.result .big { font-size: 56px; }

.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a { flex: 1; text-align: center; padding: 8px 0 10px; font-size: 12px; text-decoration: none; color: var(--muted); }
.tabs a span { display: block; font-size: 22px; }
.tabs a.on { color: var(--text); font-weight: 700; }
.lightbox { position: fixed; inset: 0; z-index: 20; background: #000d; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.cheat details { margin-top: 6px; font-size: 14px; }
.cheat summary { cursor: pointer; color: var(--muted); }
.cheat ul { margin: 4px 0; padding-left: 20px; }
.cheat-flag { color: var(--bad); font-weight: 700; margin: 6px 0 0; }
.cheat-lvl { background: var(--bad); color: #fff; }
.accuse-form { display: flex; gap: 6px; margin-top: 6px; }
.accuse-form input { flex: 1; min-width: 0; padding: 6px 10px; }
.flagged img { filter: grayscale(1); opacity: .6; }
.post.flagged { border-color: var(--bad); }
.rating { color: var(--accent); letter-spacing: 1px; }
.big-rating { font-size: 28px; margin: 4px 0 12px; }
.stars-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input label { margin: 0; font-size: 34px; line-height: 1; color: var(--line); cursor: pointer; font-weight: 400; }
.stars-input input:checked ~ label,
.stars-input label:hover, .stars-input label:hover ~ label { color: var(--accent); }
.stars-input input:focus-visible + label { outline: 2px solid var(--accent-dark); border-radius: 4px; }
.steps { padding-left: 22px; margin: 8px 0; }
.rules p { margin: 8px 0; }
.steps li { margin-bottom: 8px; }
.share-icon { width: 20px; height: 20px; vertical-align: -4px; color: #0a84ff; }
.install-warn { border-color: var(--bad); }
.install-note { border-color: var(--good); }
@media (display-mode: standalone) { .hide-installed { display: none; } }
.rate-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.rate-form .stars-input label { font-size: 24px; }
.result .rate-form { justify-content: center; margin: 8px 0 12px; }
.result .rate-form .stars-input label { font-size: 32px; }
.lead { margin: -6px 0 12px; color: var(--muted); }
.lead a { color: var(--text); font-weight: 600; }
.lang-switch { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.lang-switch .small-btn { margin: 0; }
.lang-switch .on { border-color: var(--accent); font-weight: 700; }
.sso { margin: 0 0 14px; }
.sso form { margin: 0 0 8px; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f;
    border: 1px solid #0003; font-weight: 600; }
.sso-logo { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.sso-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.sso-or::before, .sso-or::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .3; }
.sso-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.sso-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.page-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
.map { height: 320px; border-radius: 12px; margin: 8px 0; z-index: 0; background: var(--line); }
.map-small { height: 200px; }
.pin { background: none; border: none; }
.pin span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px #0005; font-size: 15px; font-weight: 800; color: #2b1d0e; }
.pin-visited span { background: #8fd19e; }
.progress { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress div { height: 100%; background: var(--good); }
.pick-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pick-list .small-btn { margin: 0; }
.pick-list .on { background: var(--accent); color: #2b1d0e; border-color: var(--accent); }
.checkin-post { padding: 12px 16px; }
.inline-field { display: flex; gap: 6px; }
.inline-field input, .inline-field select { flex: 1; min-width: 0; }
.inline-field button { flex: none; padding: 10px 12px; }
.map-locate { width: 34px; height: 34px; padding: 0; background: #fff; color: #1a73e8; font-size: 20px; line-height: 1; border-radius: 4px; cursor: pointer; }
.map-locate:hover { background: #f4f4f4; color: #1a73e8; }
#map-error { white-space: pre-line; overflow-wrap: anywhere; }
.camera { position: fixed; inset: 0; z-index: 30; background: #000; display: flex; flex-direction: column; }
.camera video { flex: 1; width: 100%; min-height: 0; object-fit: cover; }
.camera video.mirrored { transform: scaleX(-1); }
.camera-bar { display: flex; align-items: center; justify-content: space-around; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.camera-bar .ghost { color: #fff; border-color: #fff6; font-size: 20px; width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.shutter { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 5px solid #fff8; padding: 0; }
.shutter:hover { background: #eee; }
body.camera-open { overflow: hidden; }
.like-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.like-row form { margin: 0; }
.like-btn { margin-left: 0; }
.like-btn.on { background: var(--accent); color: #2b1d0e; border-color: var(--accent); font-weight: 700; }
.culture-lvl { background: #b6e3ff; }
.tag-picker { margin: 12px 0 4px; }
.tag-picker summary { cursor: pointer; font-weight: 600; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; font-weight: 500; cursor: pointer; }
.tag-chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #2b1d0e; font-weight: 700; }
.tag-chip:has(input:disabled) { opacity: .45; }
.tag-actions { display: flex; gap: 6px; margin-top: 6px; }
.tag-actions form { margin: 0; }
.tag-actions .small-btn { margin-left: 0; }
.tag-badge { background: var(--bad); color: #fff; }
.tag-flash { display: block; text-decoration: none; border-color: var(--accent); }
[hidden] { display: none !important; }
.found-note { background: var(--bg); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 10px; }

/* Vilkår, cookies og samtykke */
.legal h2 { margin-top: 20px; }
.legal li { margin-bottom: 6px; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cookie-table th, .cookie-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie-table code { word-break: break-all; }
.legal-links { text-align: center; margin: 8px 0 0; }
.legal-links a { color: var(--muted); }
.cookie-banner {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 2000;
  max-width: 560px; margin: 0 auto; padding: 14px 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.cookie-banner p { margin: 0 0 10px; font-size: 15px; }
.cookie-buttons { display: flex; gap: 8px; margin: 0; }
.cookie-buttons button { flex: 1; margin: 0; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 12px 0; }
label.check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
.inline-form { margin: 0; }

/* Forsiden */
.hero { padding: 12px 0 8px; }
.hero-emoji { font-size: 56px; line-height: 1; }
.hero h1 { font-size: 30px; margin: 10px 0 8px; }
.hero .lead { font-size: 17px; margin: 0 auto 16px; max-width: 30em; }
.hero-buttons { display: grid; gap: 8px; margin-bottom: 12px; }
.hero-buttons .btn { margin: 0; }
.section-title { margin: 20px 0 4px; }
.top3 .medal { font-size: 26px; background: none; }
.route-card h3 { margin: 0 0 2px; font-size: 20px; }
.route-preview { height: 220px; margin: 10px 0; }
.route-stops { padding-left: 22px; margin: 8px 0; }
.route-stops li { margin-bottom: 6px; }
.route-card details { margin-bottom: 12px; }
.route-card summary { cursor: pointer; font-weight: 600; }
#route-order li { display: flex; align-items: center; gap: 6px; }
#route-order .stop-buttons { display: flex; gap: 4px; flex: none; }
#route-order .stop-buttons button { margin: 0; min-width: 34px; }

/* Profilbilleder */
.avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--line); vertical-align: middle; }
.avatar-xs { width: 22px; height: 22px; margin-right: 5px; }
.avatar-sm { width: 30px; height: 30px; margin-right: 6px; }
.avatar-md { width: 38px; height: 38px; }
.avatar-lg { width: 76px; height: 76px; }
.post-avatar { float: left; }
.profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.profile-head h1 { margin: 0; }
.avatar-form { margin: 0; }
.avatar-pick { position: relative; display: block; cursor: pointer; margin: 0; }
.avatar-edit { position: absolute; right: -2px; bottom: -2px; background: var(--card); border: 1px solid var(--line); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.avatar-remove { display: inline; }
.avatar-remove button { margin: 0; }

/* Bieremon Battle */
.bcard { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px;
  background: var(--card); border: 2px solid var(--lvl1); min-width: 0; }
.bcard.lvl-2 { border-color: var(--lvl2); }
.bcard.lvl-3 { border-color: var(--lvl3); box-shadow: 0 0 0 2px rgba(255, 201, 60, .25); }
.bcard.in-pot { outline: 2px dashed var(--accent-dark); outline-offset: 2px; }
.bcard-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; background: var(--line); }
.bcard-body { min-width: 0; flex: 1; }
.bcard-name { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.bcard-meta, .bcard-by { font-size: 12px; color: var(--muted); }
.bcard-power { position: absolute; top: -8px; right: -6px; background: var(--accent); color: #2b1d0e; font-weight: 800;
  font-size: 13px; padding: 2px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.bcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0; }
.bhand { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.bhand li { display: flex; align-items: center; gap: 6px; }
.bhand li .bcard { flex: 1; }
.bhand-no { font-weight: 800; width: 20px; text-align: center; color: var(--muted); }
.bhand .stop-buttons { display: flex; flex-direction: column; gap: 4px; }
.bhand .stop-buttons button { margin: 0; min-width: 34px; }
.battle-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 2px; }
.fighter { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.fighter b { overflow-wrap: anywhere; text-align: center; }
.vs-big { font-size: 28px; font-weight: 900; color: var(--accent-dark); }
.rounds { display: grid; gap: 12px; margin: 12px 0; }
.round-no { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.round-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.round-cards .bcard { flex-direction: column; text-align: center; }
.round-cards .bcard-img { width: 100%; height: 90px; }
.round .vs { font-weight: 900; color: var(--accent-dark); }
.side.win .bcard { border-color: var(--good); box-shadow: 0 0 0 3px rgba(46, 157, 87, .25); }
.side.lose { opacity: .55; }
.roll { font-size: 12px; text-align: center; margin-top: 4px; }
.battle-result h2 { margin: 4px 0; }
.unrevealed { opacity: 0; transform: rotateY(90deg) scale(.9); }
.revealed { opacity: 1; transform: none; transition: transform .45s ease, opacity .45s ease; }
@media (prefers-reduced-motion: reduce) { .revealed { transition: none; } }
.pick-cards { display: grid; gap: 10px; margin: 10px 0; }
.pick-card { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card:has(input:checked) .bcard { border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(196, 125, 6, .35); }
.combo-badge { position: absolute; left: -4px; top: -8px; background: var(--good); color: #fff; font-size: 12px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; }
.attack-card { max-width: 320px; margin: 8px auto; }
.waiting-card { min-height: 110px; justify-content: center; border-style: dashed; }
.flash.deadline { border-color: var(--accent-dark); }

/* Collager */
.collage-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 10px 0; }
.collage-tile { position: relative; display: block; margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; }
.collage-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage-tile input { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; margin: 0; z-index: 1; accent-color: var(--accent); }
.collage-tile:has(input:not(:checked)) img { opacity: .35; filter: grayscale(1); }
.collage-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-row label { margin: 0; }
.friend-row { margin: 0 0 12px; }
.caption-bold { color: var(--accent); font-weight: 800; -webkit-text-stroke: .6px #2b1d0e; }

/* Julemode – "vinternat": natblå himmel med trekantsmønster og stjerner, guld og en snedrive under toppen */
body.xmas {
  --bg: #0b1442;
  --card: #13205e;
  --text: #f2f6ff;
  --muted: #a8b6e0;
  --line: #2a3a80;
  --accent: #c9a75e;
  --accent-dark: #a8873f;
  --ice: #7fc4ef;
  color-scheme: dark;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgba(46, 92, 196, .55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83.14'%3E%3Cpath d='M0 0 L48 83.14 M48 0 L0 83.14 M0 41.57 H48 M24 0 L0 41.57 L24 83.14 M24 0 L48 41.57 L24 83.14' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
.xmas .top {
  background: linear-gradient(180deg, #08103a, #0f1d5c); color: #fff;
  border-bottom: 1px solid rgba(201, 167, 94, .5);
}
/* Snedriven under toppen */
.xmas .top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H400 V3 C340 14 300 4 250 8 C200 12 170 2 120 6 C70 10 40 3 0 9 Z' fill='%23f4f8ff'/%3E%3Cpath d='M0 9 C40 3 70 10 120 6 C170 2 200 12 250 8 C300 4 340 14 400 3' fill='none' stroke='%237fc4ef' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.xmas .top .logo { color: var(--accent); letter-spacing: .5px; }
.xmas .top a, .xmas .top .me-count { color: #fff; }
.xmas .top .btn.ghost { border-color: rgba(255, 255, 255, .35); }
.xmas main { padding-top: 22px; }
.xmas .card { box-shadow: 0 6px 22px rgba(3, 8, 35, .45); }
.xmas a.item:hover, .xmas .me-row { background: rgba(127, 196, 239, .08); }
/* Stjerner der blinker over himlen */
.xmas::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 30px 40px, #bfe6ff 50%, transparent 51%),
    radial-gradient(2px 2px at 180px 90px, #7fc4ef 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 260px 220px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 260px, #7fc4ef 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 330px 150px, #bfe6ff 50%, transparent 51%);
  background-size: 380px 300px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.xmas main { position: relative; z-index: 1; }
@keyframes twinkle { from { opacity: .35; } to { opacity: .9; } }
/* Julesidens titel: hvide, kantede bogstaver med blå skygge og en lille guldlinje over */
.xmas-title { text-align: center; margin: 6px 0 14px; line-height: 1; container-type: inline-size; }
.xmas-title .eyebrow { display: block; color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-size: 18px;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
/* Skriftstørrelsen følger ordets længde (--n tegn), så "Weihnachten ✻ 2026" også kan være der på en telefon */
.xmas-title .main { display: inline-block; white-space: nowrap; font-size: min(60px, 12vw, calc(100cqi / (var(--n, 8) * .92))); font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  color: #fff; -webkit-text-stroke: 1.5px #0b1442; paint-order: stroke fill;
  text-shadow: 3px 3px 0 #2f6fd6, 4px 4px 0 #0b1442; }
.xmas-title .main .flake { color: #fff; font-size: .55em; vertical-align: middle; margin: 0 .08em; text-shadow: none; -webkit-text-stroke: 0; }
.xmas::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .55;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 90px 120px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 160px 60px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 230px 180px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 300px 90px, #fff 50%, transparent 51%);
  background-size: 320px 220px;
  animation: snow 14s linear infinite;
  filter: drop-shadow(0 0 1px rgba(120, 140, 170, .6));
}
@keyframes snow { from { background-position: 0 -220px; } to { background-position: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .xmas::before, .xmas::after { animation: none; } }
.hat-wrap { position: relative; display: inline-block; line-height: 0; vertical-align: middle; flex: none; }
/* Juleoutfit: ::after er den farvede del (maske i spillerens farve --hat), ::before den hvide pynt */
.hat-wrap::after, .hat-wrap::before {
  content: ""; position: absolute; pointer-events: none;
  top: var(--ot, -38%); left: var(--ol, auto); right: var(--or, -22%); width: var(--ow, 70%); height: var(--oh, 70%);
  transform: rotate(var(--orot, 18deg));
}
.hat-wrap::after {
  background: var(--hat, #d62b2b);
  -webkit-mask: var(--shape) no-repeat center / contain; mask: var(--shape) no-repeat center / contain;
}
.hat-wrap::before { background: var(--trim, none) no-repeat center / contain; z-index: 1; }
.outfit-hat {
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 50 C14 26 30 8 50 12 C44 22 46 34 52 48 Z'/%3E%3C/svg%3E");
  --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='46' width='52' height='12' rx='6' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='52' cy='12' r='7' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3C/svg%3E");
}
.outfit-beanie {
  --ot: -30%; --ol: 8%; --or: auto; --ow: 84%; --oh: 62%; --orot: -4deg;
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 52 C6 26 20 16 32 16 C44 16 58 26 58 52 Z'/%3E%3C/svg%3E");
  --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='3' y='44' width='58' height='14' rx='6' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='11' r='9' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M12 30 H52' stroke='%23fff' stroke-width='4' stroke-dasharray='4 4'/%3E%3C/svg%3E");
}
.outfit-antlers {
  --ot: -48%; --ol: -6%; --or: auto; --ow: 112%; --oh: 70%; --orot: 0deg;
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M20 62 V36 M20 46 L8 38 M20 36 L10 20 M20 36 L28 20 M44 62 V36 M44 46 L56 38 M44 36 L54 20 M44 36 L36 20'/%3E%3C/g%3E%3C/svg%3E");
}
.outfit-star {
  --ot: -52%; --ol: 22%; --or: auto; --ow: 56%; --oh: 56%; --orot: 0deg;
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,4 39,24 60,24 43,37 49,58 32,45 15,58 21,37 4,24 25,24'/%3E%3C/svg%3E");
  --trim: none;
}
.outfit-halo {
  --ot: -34%; --ol: 8%; --or: auto; --ow: 84%; --oh: 44%; --orot: -6deg;
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='32' rx='27' ry='11' fill='none' stroke='%23000' stroke-width='7'/%3E%3C/svg%3E");
}
.avatar-xs-hat .avatar-xs, .avatar-sm-hat .avatar-sm { margin-right: 0; }
.avatar-xs-hat { margin-right: 5px; }
.avatar-sm-hat { margin-right: 6px; }
.xmas-preview { display: block; text-decoration: none; }
.xmas-check { margin: 8px 0; font-weight: 600; }
.xmas-note { background: rgba(127, 196, 239, .12); border: 1px solid #7fc4ef; color: inherit; border-radius: 10px; padding: 8px 10px; }
.xmas-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: #2f6fd6; color: #fff; vertical-align: middle; }
.xmas-badges { font-size: 16px; letter-spacing: 2px; margin-top: 2px; }
.xmas-today { text-align: center; border-color: #c9a75e; }
.xmas-today.done { background: #17306f; }
.xmas-calendar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0 16px; }
.hatch { aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #17286e; color: #fff; position: relative; border: 1px solid rgba(127, 196, 239, .35); }
.hatch:nth-child(3n+2) { background: #1d3a8f; }
.hatch:nth-child(4n+3) { background: #0f1a52; }
.hatch .n { position: absolute; top: 4px; left: 7px; font-weight: 800; font-size: 13px; color: #c9a75e; }
.hatch .e { font-size: 22px; }
.hatch.today { outline: 3px solid var(--accent); outline-offset: 1px; animation: pulse 1.6s ease-in-out infinite; }
.hatch.missed { opacity: .45; }
.hatch.done { background: #2f6fd6; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.xmas-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.xmas-badge { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; opacity: .45; filter: grayscale(1); }
.xmas-badge.have { opacity: 1; filter: none; border-color: #c9a75e; box-shadow: 0 0 0 2px rgba(201, 167, 94, .25) inset; }
.xmas-badge .e { font-size: 30px; }
.xmas-badge .t { font-weight: 700; }
@media (max-width: 480px) { .me-name { flex-shrink: 0; overflow: visible; } }
@media (max-width: 380px) { .xmas .top .logo { font-size: 17px; } .xmas .top .me .btn { padding-left: 7px; padding-right: 7px; } }
/* I julemode tager 🎄 pladsen i toppen på telefoner – installér-knappen findes også på Fang-siden */
@media (max-width: 480px) { .xmas .top .hide-installed { display: none; } }
.period-edit { margin: -4px 0 12px; } .period-edit summary { cursor: pointer; }
.early-tag { background: #2b1d0e; }
.first-catch { border: 2px solid #d4a017; box-shadow: 0 0 0 3px rgba(212, 160, 23, .18); }
.first-banner { background: linear-gradient(90deg, #f7d774, #d4a017); color: #2b1d0e; font-weight: 800; padding: 8px 12px; text-align: center; }
.outfit-card summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.outfit-card summary::-webkit-details-marker { display: none; }
.outfit-preview { padding-top: 14px; }
.outfit-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 12px 0 8px; }
.outfit-choice { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-weight: 500; }
.outfit-choice:has(input:checked) { border-color: #1f7a3f; background: #eaf6ee; font-weight: 700; }
.outfit-choice input, .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { margin: 0; cursor: pointer; }
.swatch span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.swatch:has(input:checked) span { box-shadow: 0 0 0 3px #1f7a3f; }
/* Juleøl-podiet */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; margin-top: 10px; }
.podium-place { text-align: center; min-width: 0; }
.podium-img { height: 96px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.podium-img img { max-height: 96px; max-width: 100%; object-fit: contain; border-radius: 6px; }
.podium-img span { font-size: 40px; }
.podium-img .mystery { font-size: 48px; font-weight: 800; color: #7fc4ef; }
.place-1 .podium-img { height: 120px; }
.place-1 .podium-img img { max-height: 120px; }
.podium-name { font-weight: 700; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.podium-score { font-size: 13px; }
.podium-step { margin-top: 6px; border-radius: 8px 8px 0 0; color: #fff; font-size: 22px; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.place-1 .podium-step { background: #d4a017; height: 72px; }
.place-2 .podium-step { background: #9aa4ad; height: 52px; }
.place-3 .podium-step { background: #b87333; height: 38px; }
.beer-thumb { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 6px; background: #fff; }
.beer-thumb.none { display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--line); }

/* Flere juleoutfits – tegnet i en større boks omkring profilbilledet (130 × 150 med billedet i midten) */
.outfit-santa { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M24 54 C30 24 60 6 98 14 C90 24 92 38 102 52 Z'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Crect x='16' y='46' width='94' height='14' rx='7' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='14' r='8' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M26 92 C28 126 48 148 65 148 C82 148 102 126 104 92 C94 106 80 112 65 112 C50 112 36 106 26 92 Z' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M44 104 C50 96 60 96 65 102 C70 96 80 96 86 104 C78 110 70 108 65 104 C60 108 52 110 44 104 Z' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3C/svg%3E"); }
.outfit-suit { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M24 54 C30 24 60 6 98 14 C90 24 92 38 102 52 Z'/%3E%3Cpath d='M8 150 C12 126 36 118 65 118 C94 118 118 126 122 150 Z'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Crect x='16' y='46' width='94' height='14' rx='7' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='14' r='8' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M14 136 C24 124 44 119 65 119 C86 119 106 124 116 136' fill='none' stroke='%23fff' stroke-width='13' stroke-linecap='round'/%3E%3Ccircle cx='65' cy='138' r='4' fill='%23f1c232'/%3E%3C/svg%3E"); }
.outfit-mistletoe { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M65 10 L50 2 L50 18 Z M65 10 L80 2 L80 18 Z'/%3E%3Ccircle cx='65' cy='10' r='4'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cg fill='%232e7d32'%3E%3Cellipse cx='52' cy='24' rx='12' ry='6' transform='rotate%28-30 52 24%29'/%3E%3Cellipse cx='78' cy='24' rx='12' ry='6' transform='rotate%2830 78 24%29'/%3E%3Cellipse cx='65' cy='30' rx='6' ry='12'/%3E%3C/g%3E%3Ccircle cx='60' cy='36' r='4' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='70' cy='36' r='4' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='65' cy='41' r='4' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3C/svg%3E"); }
.outfit-mrs { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M14 76 C14 30 38 14 65 14 C92 14 116 30 116 76 C104 60 86 52 65 52 C44 52 26 60 14 76 Z'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M16 74 C28 60 46 53 65 53 C84 53 102 60 114 74' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round'/%3E%3Cg fill='%232e7d32'%3E%3Cellipse cx='98' cy='34' rx='11' ry='5' transform='rotate%28-35 98 34%29'/%3E%3Cellipse cx='108' cy='44' rx='11' ry='5' transform='rotate%2820 108 44%29'/%3E%3C/g%3E%3Ccircle cx='100' cy='44' r='4' fill='%23d62b2b'/%3E%3Ccircle cx='106' cy='37' r='4' fill='%23d62b2b'/%3E%3C/svg%3E"); }

.outfit-tie { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M58 108 L72 108 L69 120 L61 120 Z'/%3E%3Cpath d='M61 120 L69 120 L77 144 L65 150 L53 144 Z'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M42 102 L58 108 L61 121 Z' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M88 102 L72 108 L69 121 Z' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M57 131 L73 125 M55 141 L75 134' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.outfit-bowtie { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M40 110 L61 120 L40 132 Z'/%3E%3Cpath d='M90 110 L69 120 L90 132 Z'/%3E%3Crect x='59' y='114' width='12' height='12' rx='3'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Ccircle cx='47' cy='117' r='2.6' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='52' cy='125' r='2.6' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='46' cy='127' r='2' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='83' cy='117' r='2.6' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='78' cy='125' r='2.6' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Ccircle cx='84' cy='127' r='2' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3C/svg%3E"); }
.outfit-girl { --ot: -40%; --ol: -15%; --or: auto; --ow: 130%; --oh: 150%; --orot: 0deg; --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cpath d='M20 60 C22 26 54 4 96 8 C88 20 94 32 108 42 Z' transform='rotate%28-8 64 40%29'/%3E%3Cpath d='M6 112 L18 106 L6 100 Z M30 112 L18 106 L30 100 Z'/%3E%3Cpath d='M100 112 L112 106 L100 100 Z M124 112 L112 106 L124 100 Z'/%3E%3C/svg%3E"); --trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cg fill='%23e0b04a' stroke='%23b8862b' stroke-width='1.2'%3E%3Cellipse cx='18' cy='92' rx='7' ry='9'/%3E%3Cellipse cx='18' cy='116' rx='6' ry='8'/%3E%3Cellipse cx='18' cy='130' rx='5' ry='7'/%3E%3Cellipse cx='112' cy='92' rx='7' ry='9'/%3E%3Cellipse cx='112' cy='116' rx='6' ry='8'/%3E%3Cellipse cx='112' cy='130' rx='5' ry='7'/%3E%3C/g%3E%3Crect x='12' y='44' width='94' height='13' rx='6.5' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5' transform='rotate%28-8 64 40%29'/%3E%3Ccircle cx='96' cy='6' r='8' fill='%23fff' stroke='%23cbbfae' stroke-width='1.5'/%3E%3Cpath d='M100 70 C100 64 108 64 108 70 C108 64 116 64 116 70 C116 78 108 82 108 84 C108 82 100 78 100 70 Z' fill='%23e0457b' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); }
.podium-card.final { border: 2px solid #d4a017; box-shadow: 0 0 0 4px rgba(212, 160, 23, .15); }
.podium-banner { display: block; text-decoration: none; background: linear-gradient(90deg, #f7d774, #d4a017); color: #2b1d0e; font-weight: 700; border: 0; }
/* Ølbilleder (logo, flaske eller dåse) fra admin */
.beer-logo { height: 1.4em; width: auto; max-width: 3em; object-fit: contain; vertical-align: middle; margin-right: 6px; border-radius: 3px; }
.feed-logo { height: 34px; max-width: 60px; margin: 2px 6px 2px 0; }
.result-logo { display: block; max-height: 110px; max-width: 60%; object-fit: contain; margin: 4px auto 8px; }
/* Ølsider */
.beer-search input { width: 100%; margin-bottom: 12px; }
.beer-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.beer-head h1 { margin: 0 0 2px; }
.beer-head p { margin: 2px 0; }
.beer-hero { width: 110px; height: 140px; object-fit: contain; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.beer-hero.none { display: flex; align-items: center; justify-content: center; font-size: 56px; background: var(--line); }
.beer-pick { position: relative; display: block; cursor: pointer; margin: 0; }
.beer-pick-form { margin: 0; }
.big-score { font-size: 28px; }
.beer-comment .thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
a.beer-link { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Juletema-vælger (øverst på julesiden) */
.theme-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; justify-content: center; }
.theme-opt { margin: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt span { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); }
.theme-opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #2b1d0e); }
.theme-opt input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.snow-scene { display: none; }

/* Julemode – "Snefald": kongeblå himmel med store, runde snefnug, rød og hvid, og en snebanke med kanen forneden */
body.xmas.xmas-snow {
  --bg: #0c4a96;
  --card: #0a3c7d;
  --text: #ffffff;
  --muted: #c9daf3;
  --line: #2c66b0;
  --accent: #d21f2c;
  --accent-dark: #a5131e;
  --on-accent: #ffffff;
  background: var(--bg);
}
.xmas-snow button, .xmas-snow .btn, .xmas-snow .seg-link.on, .xmas-snow .seg-opt:has(input:checked) { color: var(--on-accent); }
.xmas-snow .ghost { color: var(--text); }
.xmas-snow .top { background: #d21f2c; border-bottom: 0; }
.xmas-snow .top .logo { color: #fff; }
.xmas-snow .top::after {
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H400 V6 Q390 13 378 7 Q366 14 352 8 Q338 15 322 7 Q308 13 292 8 Q278 15 262 7 Q248 13 232 8 Q218 15 202 7 Q188 13 172 8 Q158 15 142 7 Q128 13 112 8 Q98 15 82 7 Q68 13 52 8 Q38 15 22 7 Q12 13 0 6 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.xmas-snow .card { box-shadow: 0 4px 0 rgba(4, 30, 70, .35); }
/* Store, bløde snefnug der daler langsomt – i stedet for vinternattens stjerner */
.xmas-snow::after {
  opacity: .85; animation: snow 22s linear infinite;
  background-image:
    radial-gradient(circle at 24px 30px, #fff 4px, transparent 5px),
    radial-gradient(circle at 110px 96px, #fff 3px, transparent 4px),
    radial-gradient(circle at 190px 40px, #eef6ff 4.5px, transparent 5.5px),
    radial-gradient(circle at 70px 170px, #fff 3.5px, transparent 4.5px),
    radial-gradient(circle at 160px 200px, #eef6ff 3px, transparent 4px),
    radial-gradient(circle at 232px 140px, #fff 4px, transparent 5px);
  background-size: 260px 230px;
}
/* Tekst direkte på himlen får en blå kontur, så den kan læses foran snefnuggene */
.xmas-snow main > p, .xmas-snow main > h1, .xmas-snow .theme-pick > .muted, .xmas-snow .page-foot { text-shadow: 0 0 3px #0c4a96, 0 0 6px #0c4a96; }
.xmas-snow::before { display: none; }
.xmas-snow .xmas-title .eyebrow { color: #fff; font-weight: 700; }
.xmas-snow .xmas-title .main { font-family: Georgia, "Times New Roman", serif; letter-spacing: 1px; -webkit-text-stroke: 0;
  text-shadow: 3px 3px 0 #d21f2c; }
.xmas-snow .xmas-note { background: rgba(255, 255, 255, .1); border-color: #fff; }
.xmas-snow .xmas-tag { background: #d21f2c; }
.xmas-snow .xmas-today { border-color: #d21f2c; }
.xmas-snow .xmas-today.done { background: #0f4f9e; }
.xmas-snow .hatch { background: #d21f2c; border-color: rgba(255, 255, 255, .5); }
.xmas-snow .hatch:nth-child(3n+2) { background: #0a3c7d; }
.xmas-snow .hatch:nth-child(4n+3) { background: #ffffff; color: #d21f2c; }
.xmas-snow .hatch .n { color: #fff; }
.xmas-snow .hatch:nth-child(4n+3) .n { color: #0c4a96; }
.xmas-snow .hatch.done { background: #1f7a3f; color: #fff; }
.xmas-snow .xmas-badge.have { border-color: #d21f2c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset; }
.xmas-snow .podium-img .mystery { color: #fff; }
.xmas-snow .snow-scene {
  display: block; position: relative; height: 150px; margin: 18px -16px -8px; overflow: hidden; background: transparent;
}
/* Jorden: en hvid, bulet snekant med lyseblå sne under – lastbilen og kanen kører oven på den */
.xmas-snow .snow-scene::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V12 Q8 6 18 10 Q28 4 40 9 Q52 3 64 9 Q76 5 88 10 Q100 3 112 9 Q124 5 136 10 Q148 4 160 9 Q172 3 184 9 Q196 5 208 10 Q220 4 232 9 Q244 3 256 9 Q268 5 280 10 Q292 4 304 9 Q316 3 328 9 Q340 5 352 10 Q364 4 376 9 Q388 5 400 10 V40 Z' fill='%23a9d3f5'/%3E%3Cpath d='M0 16 V12 Q8 6 18 10 Q28 4 40 9 Q52 3 64 9 Q76 5 88 10 Q100 3 112 9 Q124 5 136 10 Q148 4 160 9 Q172 3 184 9 Q196 5 208 10 Q220 4 232 9 Q244 3 256 9 Q268 5 280 10 Q292 4 304 9 Q316 3 328 9 Q340 5 352 10 Q364 4 376 9 Q388 5 400 10 V17 Q388 13 376 16 Q364 12 352 17 Q340 13 328 16 Q316 11 304 16 Q292 12 280 17 Q268 13 256 16 Q244 11 232 16 Q220 12 208 17 Q196 13 184 16 Q172 11 160 16 Q148 12 136 17 Q124 13 112 16 Q100 11 88 17 Q76 13 64 16 Q52 11 40 16 Q28 12 18 17 Q8 13 0 16 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* Lastbilen med øl til julefrokosten kører forrest, og julemanden i kanen følger efter hen over snebanken */
.xmas-snow .snow-scene .convoy { position: absolute; bottom: 26px; z-index: 1; display: flex; align-items: flex-end; gap: 28px;
  white-space: nowrap; left: 100%; animation: sleigh 15s linear infinite; }
.xmas-snow .snow-scene .sleigh { width: 200px; height: auto; margin-bottom: -2px; }
.xmas-snow .snow-scene .truck { width: 200px; height: auto; }
.xmas-snow .snow-scene .convoy img { animation: bump .5s ease-in-out infinite alternate; }
.xmas-snow .snow-scene .convoy .sleigh { animation-delay: .25s; }
@keyframes sleigh { from { left: 100%; } to { left: -440px; } }
@keyframes bump { to { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .xmas-snow .snow-scene .convoy, .xmas-snow .snow-scene .convoy img { animation: none; } .xmas-snow .snow-scene .convoy { left: 8px; } }

/* Detaljeret vurdering: duft, smag, udseende og oplevet bitterhed */
.detail-rate { margin: 6px 0 2px; }
.detail-rate summary { cursor: pointer; color: var(--muted); }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0; }
.detail-row > span:first-child { font-size: 13px; font-weight: 600; white-space: nowrap; }
.stars-input.stars-sm { gap: 0; }
.stars-input.stars-sm label, .rate-form .stars-input.stars-sm label { font-size: 21px; }
.bitter-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 8px; }
.bitter-scale { display: flex; gap: 4px; }
.bitter-scale input { position: absolute; opacity: 0; pointer-events: none; }
.bitter-scale label { flex: 1; margin: 0; text-align: center; padding: 6px 0; border-radius: 8px; cursor: pointer; font-weight: 700;
  border: 1px solid var(--line); background: var(--card); }
.bitter-scale label:nth-of-type(1) { --b: #cfe8a8; } .bitter-scale label:nth-of-type(2) { --b: #b5d77a; }
.bitter-scale label:nth-of-type(3) { --b: #93c04f; } .bitter-scale label:nth-of-type(4) { --b: #6fa236; }
.bitter-scale label:nth-of-type(5) { --b: #4c7f22; }
.bitter-scale input:checked + label { background: var(--b); border-color: var(--b); color: #1d2a10; }
.bitter-scale input:focus-visible + label { outline: 2px solid var(--accent-dark); }
.bitter-ends { display: flex; justify-content: space-between; }
/* Ølsiden: ølfakta og smagsnoter */
.beer-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.beer-facts span { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--line); }
.detail-avgs { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.detail-avgs li { display: flex; align-items: baseline; gap: 6px; }
.detail-avgs li > span:first-child { flex: 1; }
.bitter-meter { margin: 8px 0 10px; }
.bitter-bar { position: relative; height: 10px; border-radius: 999px; margin: 8px 0 4px;
  background: linear-gradient(90deg, #cfe8a8, #93c04f, #4c7f22); }
.bitter-bar span { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--card); border: 3px solid var(--text); }
.facts-edit summary { cursor: pointer; color: var(--muted); }
.facts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Lille besked når en vurdering er gemt i baggrunden */
.save-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--text); color: var(--bg); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.save-toast.show { opacity: 1; transform: translate(-50%, 0); }
.save-toast.bad { background: var(--bad); color: #fff; }

/* Julemode – "Klassisk jul": rød, hvid og lidt grøn – lyst og hyggeligt, med en slikstok-stribe under toppen
   og julemanden der slæber et fadølsanker efter kanen */
body.xmas.xmas-classic {
  --bg: #fbf6ee;
  --card: #ffffff;
  --text: #2a1a12;
  --muted: #7a6457;
  --line: #ecd9c6;
  --accent: #c8102e;
  --accent-dark: #9e0b22;
  --on-accent: #ffffff;
  --green: #1f7a3f;
  color-scheme: light;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 20px 24px, rgba(200, 16, 46, .10) 3px, transparent 4px),
    radial-gradient(circle at 70px 64px, rgba(31, 122, 63, .10) 3px, transparent 4px);
  background-size: 96px 96px;
}
.xmas-classic::before, .xmas-classic::after { display: none; }
.xmas-classic button, .xmas-classic .btn, .xmas-classic .seg-link.on, .xmas-classic .seg-opt:has(input:checked) { color: var(--on-accent); }
.xmas-classic .ghost { color: var(--text); }
.xmas-classic .top { background: #c8102e; border-bottom: 0; }
.xmas-classic .top .logo, .xmas-classic .top a, .xmas-classic .top .me-count { color: #fff; }
.xmas-classic .top::after {
  height: 9px;
  background: repeating-linear-gradient(-45deg, #c8102e 0 8px, #ffffff 8px 16px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.xmas-classic .card { border-color: #f0dcc8; box-shadow: 0 2px 10px rgba(120, 40, 20, .08); }
.xmas-classic h2 { color: var(--green); }
.xmas-classic .xmas-title .eyebrow { color: var(--green); font-weight: 700; }
.xmas-classic .xmas-title .main { font-family: Georgia, "Times New Roman", serif; letter-spacing: 1px; color: #c8102e;
  -webkit-text-stroke: 0; text-shadow: 3px 3px 0 #1f7a3f; }
.xmas-classic .xmas-title .main .flake { color: var(--green); }
.xmas-classic .xmas-note { background: #eef7f0; border-color: #b8e0c4; }
.xmas-classic .xmas-tag { background: #c8102e; }
.xmas-classic .xmas-today { border-color: #c8102e; }
.xmas-classic .xmas-today.done { background: #eef7f0; }
.xmas-classic .hatch { background: #c8102e; border-color: transparent; }
.xmas-classic .hatch:nth-child(3n+2) { background: #1f7a3f; }
.xmas-classic .hatch:nth-child(4n+3) { background: #ffffff; color: #c8102e; border: 2px solid #c8102e; }
.xmas-classic .hatch .n { color: #fff; }
.xmas-classic .hatch:nth-child(4n+3) .n { color: #1f7a3f; }
.xmas-classic .hatch.done { background: #f2c94c; color: #2a1a12; }
.xmas-classic .xmas-badge.have { border-color: #1f7a3f; box-shadow: 0 0 0 2px #eef7f0 inset; }
.xmas-classic .podium-img .mystery { color: #c8102e; }
.xmas-classic .theme-opt input:checked + span { color: #fff; }
/* Snebanken i begge "tegnede" temaer – hvert tema har sit eget optog */
.xmas-snow .snow-scene .convoy-classic, .xmas-classic .snow-scene .convoy-snow { display: none; }
.xmas-classic .snow-scene .convoy-classic { display: flex; }
.xmas-classic .snow-scene {
  display: block; position: relative; height: 150px; margin: 18px -16px -8px; overflow: hidden;
}
.xmas-classic .snow-scene::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V12 Q10 4 22 10 Q34 3 48 9 Q60 4 74 10 Q88 3 100 9 Q114 4 128 10 Q140 3 154 9 Q168 4 180 10 Q194 3 206 9 Q220 4 232 10 Q246 3 258 9 Q272 4 284 10 Q298 3 310 9 Q324 4 336 10 Q350 3 362 9 Q376 4 388 10 Q394 6 400 9 V40 Z' fill='%23ffffff' stroke='%23dbe5ec' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.xmas-classic .snow-scene .convoy { position: absolute; bottom: 24px; z-index: 1; left: 100%; animation: sleigh-keg 16s linear infinite; }
.xmas-classic .snow-scene .sleigh-keg { width: 300px; height: auto; animation: bump .5s ease-in-out infinite alternate; }
@keyframes sleigh-keg { from { left: 100%; } to { left: -320px; } }
@media (prefers-reduced-motion: reduce) { .xmas-classic .snow-scene .convoy, .xmas-classic .snow-scene .sleigh-keg { animation: none; } .xmas-classic .snow-scene .convoy { left: 8px; } }

/* Anmeldelser og private fangster */
.kind-tag { font-size: 14px; }
.review-tag { background: #5b6b7a; }
.visibility { margin-top: 4px; }
.visibility summary { cursor: pointer; }
.privacy { margin-top: 10px; }
.share-groups { margin-left: 28px; }
.lvl.info-lvl { background: var(--line); color: var(--text); }

/* Steder rangeret efter bedste bar eller nærmest */
.geo-form { margin-bottom: 10px; }
.geo-form .seg { margin-top: 0; }
.geo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geo-row label { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.geo-row select { width: auto; padding: 6px 10px; }
.checkin-stars-label { margin: 10px 0 2px; }

/* Alkohol-filter på Alle øl */
.abv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.chip { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  text-decoration: none; background: var(--card); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #2b1d0e); }
.abv-custom summary { cursor: pointer; }
.abv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.abv-row label { margin: 0; display: flex; align-items: center; gap: 6px; }
.abv-row input { width: 80px; padding: 6px 8px; }
.ai-facts a { margin-left: 4px; }
.facts-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.facts-actions form { margin: 0; }

.area-row { margin-top: 8px; }
.area-row select { flex: 1 1 140px; width: auto; padding: 6px 10px; }