: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; } }
.date-split { display: flex; gap: 8px; }
.date-split select { flex: 1; min-width: 0; border-radius: 999px; padding: 10px 14px; text-align: center; }
.date-split select:first-child { flex: 0.8; }
.date-split select:last-child { flex: 1.1; }
.my-data .check { margin-bottom: 10px; }
.danger-link { color: var(--bad, #c0392b); }
.xmas-teaser { position: relative; overflow: hidden; display: block; margin: 0 0 14px; padding: 18px 16px 12px;
  border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #0c4a96, #12306b);
  box-shadow: 0 3px 0 rgba(4, 30, 70, .35); }
.xmas-teaser::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: repeating-linear-gradient(-45deg, #d21f2c 0 8px, #fff 8px 16px); }
.xmas-teaser .xt-big { display: block; font-weight: 800; font-size: 18px; }
.xmas-teaser .xt-small { display: block; font-size: 14px; opacity: .92; margin-top: 2px; }
.xmas-teaser a { color: #fff; font-weight: 700; }
.ad-box { margin: 16px 0; min-height: 60px; }
.ad-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.ad-box:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-li { list-style: none; }
.ad-consent { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.ad-consent p { margin: 0 0 8px; }
.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], input[type=date], 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; }
/* Tuborg-vognen kommer forbi på J-dag: blå julebryg-lastbil, lidt større og øverst */
.pin-tuborg span { width: 40px; height: 40px; margin: -3px; font-size: 21px; background: #0d3f8f; border-color: #ffd34d;
  box-shadow: 0 0 0 3px #0d3f8f55, 0 2px 8px #0007; }
.pin-tuborg.pin-visited span { border-color: #8fd19e; }
.tuborg-badge { display: flex; gap: 10px; align-items: center; background: #0d3f8f; color: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
a.tuborg-badge { text-decoration: none; }
.tuborg-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tuborg-badge a.tuborg-city { color: #0d3f8f; background: #ffd34d; border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
.tuborg-badge .truck { font-size: 30px; }
.tuborg-badge a { color: #ffd34d; }
.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); }
/* Præmiejagten: to runder side om side (under hinanden på smalle skærme) */
.prize-rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.prize-round { border: 1px solid var(--line, rgba(127, 127, 127, .25)); border-radius: 12px; padding: 10px 12px; }
.prize-round h3 { margin: 0 0 4px; font-size: 1rem; }
.prize-round.decided { border: 2px solid #d4a017; }
.prize-top { margin: 6px 0 0; padding-left: 1.4em; }
.prize-top li { padding: 3px 0; }
.prize-winner { display: flex; align-items: center; gap: 10px; }
.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; }

/* Ølkrus og kaner hopper let, mens de kører */
@keyframes bump { to { transform: translateY(-2px); } }

/* 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; }
/* Klassisk jul: julemanden med fadølsankeret kører hen over snebanken */
.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; } }

/* Julemode – "Dansende øl" (standard i julemode): kongeblå himmel med faldende snekrystaller, skrå rød/hvid stribe
   under toppen og ølkrus i nissehuer, der danser hen over en bardisk */
body.xmas.xmas-dance {
  --bg: #0c4a96;
  --card: #0a3c7d;
  --text: #ffffff;
  --muted: #c9daf3;
  --line: #2c66b0;
  --accent: #d21f2c;
  --accent-dark: #a5131e;
  --on-accent: #ffffff;
  background: var(--bg);
}
.xmas-dance::before { display: none; }
.xmas-dance::after {
  opacity: 1; animation: crystal-snow 26s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260' viewBox='0 0 300 260'%3E%3Cg opacity='0.9'%3E%3Cpath d='M60.0 50.0L60.0 39.0M60.0 44.0L57.7 41.3M60.0 44.0L62.3 41.3M60.0 41.2L58.6 39.5M60.0 41.2L61.4 39.5M60.0 50.0L69.5 44.5M65.2 47.0L66.4 43.7M65.2 47.0L68.7 47.6M67.6 45.6L68.4 43.5M67.6 45.6L69.8 46.0M60.0 50.0L69.5 55.5M65.2 53.0L68.7 52.4M65.2 53.0L66.4 56.3M67.6 54.4L69.8 54.0M67.6 54.4L68.4 56.5M60.0 50.0L60.0 61.0M60.0 56.0L62.3 58.7M60.0 56.0L57.7 58.7M60.0 58.8L61.4 60.5M60.0 58.8L58.6 60.5M60.0 50.0L50.5 55.5M54.8 53.0L53.6 56.3M54.8 53.0L51.3 52.4M52.4 54.4L51.6 56.5M52.4 54.4L50.2 54.0M60.0 50.0L50.5 44.5M54.8 47.0L51.3 47.6M54.8 47.0L53.6 43.7M52.4 45.6L50.2 46.0M52.4 45.6L51.6 43.5' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M210.0 170.0L210.0 162.0M210.0 165.6L208.4 163.6M210.0 165.6L211.6 163.6M210.0 163.6L209.0 162.4M210.0 163.6L211.0 162.4M210.0 170.0L216.9 166.0M213.8 167.8L214.7 165.4M213.8 167.8L216.3 168.2M215.5 166.8L216.1 165.3M215.5 166.8L217.1 167.1M210.0 170.0L216.9 174.0M213.8 172.2L216.3 171.8M213.8 172.2L214.7 174.6M215.5 173.2L217.1 172.9M215.5 173.2L216.1 174.7M210.0 170.0L210.0 178.0M210.0 174.4L211.6 176.4M210.0 174.4L208.4 176.4M210.0 176.4L211.0 177.6M210.0 176.4L209.0 177.6M210.0 170.0L203.1 174.0M206.2 172.2L205.3 174.6M206.2 172.2L203.7 171.8M204.5 173.2L203.9 174.7M204.5 173.2L202.9 172.9M210.0 170.0L203.1 166.0M206.2 167.8L203.7 168.2M206.2 167.8L205.3 165.4M204.5 166.8L202.9 167.1M204.5 166.8L203.9 165.3' stroke='white' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200' viewBox='0 0 220 200'%3E%3Cg opacity='0.7'%3E%3Cpath d='M150.0 40.0L150.0 34.0M150.0 36.7L148.8 35.2M150.0 36.7L151.2 35.2M150.0 35.2L149.2 34.3M150.0 35.2L150.8 34.3M150.0 40.0L155.2 37.0M152.9 38.4L153.5 36.5M152.9 38.4L154.7 38.7M154.2 37.6L154.6 36.5M154.2 37.6L155.3 37.8M150.0 40.0L155.2 43.0M152.9 41.6L154.7 41.3M152.9 41.6L153.5 43.5M154.2 42.4L155.3 42.2M154.2 42.4L154.6 43.5M150.0 40.0L150.0 46.0M150.0 43.3L151.2 44.8M150.0 43.3L148.8 44.8M150.0 44.8L150.8 45.7M150.0 44.8L149.2 45.7M150.0 40.0L144.8 43.0M147.1 41.6L146.5 43.5M147.1 41.6L145.3 41.3M145.8 42.4L145.4 43.5M145.8 42.4L144.7 42.2M150.0 40.0L144.8 37.0M147.1 38.4L145.3 38.7M147.1 38.4L146.5 36.5M145.8 37.6L144.7 37.8M145.8 37.6L145.4 36.5' stroke='white' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M40.0 140.0L40.0 135.0M40.0 137.2L39.0 136.0M40.0 137.2L41.0 136.0M40.0 136.0L39.4 135.2M40.0 136.0L40.6 135.2M40.0 140.0L44.3 137.5M42.4 138.6L42.9 137.1M42.4 138.6L44.0 138.9M43.5 138.0L43.8 137.1M43.5 138.0L44.4 138.2M40.0 140.0L44.3 142.5M42.4 141.4L44.0 141.1M42.4 141.4L42.9 142.9M43.5 142.0L44.4 141.8M43.5 142.0L43.8 142.9M40.0 140.0L40.0 145.0M40.0 142.8L41.0 144.0M40.0 142.8L39.0 144.0M40.0 144.0L40.6 144.8M40.0 144.0L39.4 144.8M40.0 140.0L35.7 142.5M37.6 141.4L37.1 142.9M37.6 141.4L36.0 141.1M36.5 142.0L36.2 142.9M36.5 142.0L35.6 141.8M40.0 140.0L35.7 137.5M37.6 138.6L36.0 138.9M37.6 138.6L37.1 137.1M36.5 138.0L35.6 138.2M36.5 138.0L36.2 137.1' stroke='white' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='380' viewBox='0 0 420 380'%3E%3Cg opacity='0.8'%3E%3Cpath d='M300.0 90.0L300.0 75.0M300.0 81.8L296.9 78.1M300.0 81.8L303.1 78.1M300.0 78.0L298.1 75.7M300.0 78.0L301.9 75.7M300.0 90.0L313.0 82.5M307.1 85.9L308.8 81.4M307.1 85.9L311.9 86.7M310.4 84.0L311.4 81.2M310.4 84.0L313.3 84.5M300.0 90.0L313.0 97.5M307.1 94.1L311.9 93.3M307.1 94.1L308.8 98.6M310.4 96.0L313.3 95.5M310.4 96.0L311.4 98.8M300.0 90.0L300.0 105.0M300.0 98.2L303.1 101.9M300.0 98.2L296.9 101.9M300.0 102.0L301.9 104.3M300.0 102.0L298.1 104.3M300.0 90.0L287.0 97.5M292.9 94.1L291.2 98.6M292.9 94.1L288.1 93.3M289.6 96.0L288.6 98.8M289.6 96.0L286.7 95.5M300.0 90.0L287.0 82.5M292.9 85.9L288.1 86.7M292.9 85.9L291.2 81.4M289.6 84.0L286.7 84.5M289.6 84.0L288.6 81.2' stroke='white' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M100.0 290.0L100.0 281.0M100.0 285.1L98.1 282.8M100.0 285.1L101.9 282.8M100.0 282.8L98.8 281.4M100.0 282.8L101.2 281.4M100.0 290.0L107.8 285.5M104.3 287.5L105.3 284.8M104.3 287.5L107.1 288.0M106.2 286.4L106.9 284.7M106.2 286.4L108.0 286.7M100.0 290.0L107.8 294.5M104.3 292.5L107.1 292.0M104.3 292.5L105.3 295.2M106.2 293.6L108.0 293.3M106.2 293.6L106.9 295.3M100.0 290.0L100.0 299.0M100.0 294.9L101.9 297.2M100.0 294.9L98.1 297.2M100.0 297.2L101.2 298.6M100.0 297.2L98.8 298.6M100.0 290.0L92.2 294.5M95.7 292.5L94.7 295.2M95.7 292.5L92.9 292.0M93.8 293.6L93.1 295.3M93.8 293.6L92.0 293.3M100.0 290.0L92.2 285.5M95.7 287.5L92.9 288.0M95.7 287.5L94.7 284.8M93.8 286.4L92.0 286.7M93.8 286.4L93.1 284.7' stroke='white' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 260px, 220px 200px, 420px 380px;
}
/* Hvert lag falder præcis én flise pr. runde (så løkken er usynlig) – lagene i hver sit tempo giver dybde */
@keyframes crystal-snow {
  from { background-position: 0 -260px, 40px -400px, 0 -380px; }
  to { background-position: 0 0, 40px 0, 0 0; }
}
.xmas-dance button, .xmas-dance .btn, .xmas-dance .seg-link.on, .xmas-dance .seg-opt:has(input:checked) { color: var(--on-accent); }
.xmas-dance .ghost { color: var(--text); }
.xmas-dance .top { background: #d21f2c; border-bottom: 0; }
.xmas-dance .top .logo, .xmas-dance .top a, .xmas-dance .top .me-count { color: #fff; }
.xmas-dance .top .ghost { border-color: rgba(255, 255, 255, .5); }
.xmas-dance .top::after {
  height: 10px;
  background: repeating-linear-gradient(-45deg, #d21f2c 0 9px, #ffffff 9px 18px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}
.xmas-dance .card { box-shadow: 0 4px 0 rgba(4, 30, 70, .35); }
/* Tekst direkte på himlen får en blå kontur, så den kan læses foran snefnuggene */
.xmas-dance main > p, .xmas-dance main > h1, .xmas-dance .theme-pick > .muted, .xmas-dance .page-foot { text-shadow: 0 0 3px #0c4a96, 0 0 6px #0c4a96; }
.xmas-dance .xmas-title .eyebrow { color: #fff; font-weight: 700; }
.xmas-dance .xmas-title .main { font-family: Georgia, "Times New Roman", serif; letter-spacing: 1px; color: #fff;
  -webkit-text-stroke: 0; text-shadow: 3px 3px 0 #d21f2c; }
.xmas-dance .xmas-note { background: rgba(255, 255, 255, .1); border-color: #fff; }
.xmas-dance .xmas-tag { background: #d21f2c; }
.xmas-dance .xmas-today { border-color: #d21f2c; }
.xmas-dance .xmas-today.done { background: #0f4f9e; }
.xmas-dance .hatch { background: #d21f2c; border-color: rgba(255, 255, 255, .5); }
.xmas-dance .hatch:nth-child(3n+2) { background: #0a3c7d; }
.xmas-dance .hatch:nth-child(4n+3) { background: #ffffff; color: #d21f2c; }
.xmas-dance .hatch .n { color: #fff; }
.xmas-dance .hatch:nth-child(4n+3) .n { color: #0c4a96; }
.xmas-dance .hatch.done { background: #f2c94c; color: #0c4a96; }
.xmas-dance .xmas-badge.have { border-color: #d21f2c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset; }
.xmas-dance .podium-img .mystery { color: #fff; }
.snow-scene .convoy-dance { display: none; }
.xmas-dance .snow-scene .convoy-classic { display: none; }
.xmas-dance .snow-scene { display: block; position: relative; height: 140px; margin: 18px -16px -8px; overflow: hidden; }
/* Ølkrusene danser på en bardisk af træ */
.xmas-dance .snow-scene::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background:
    linear-gradient(#e0a463 0 5px, #b9783d 5px 8px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 46px),
    linear-gradient(#a8692f, #7d4a1f);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .25);
}
/* Ølkrusene vandrer langsomt hen over snebanken – og hvert krus hopper og vrikker i sin egen takt */
.xmas-dance .snow-scene .convoy-dance { display: flex; position: absolute; bottom: 26px; z-index: 1; gap: 14px; align-items: flex-end;
  left: 100%; animation: beer-parade 18s linear infinite; }
.xmas-dance .snow-scene .mug { width: 64px; height: auto; transform-origin: 50% 100%; animation: beer-dance .9s ease-in-out infinite alternate; }
.xmas-dance .snow-scene .mug:nth-child(2n) { width: 58px; animation-duration: .75s; animation-delay: -.3s; }
.xmas-dance .snow-scene .mug:nth-child(3n) { animation-delay: -.55s; }
@keyframes beer-parade { from { left: 100%; } to { left: -520px; } }
@keyframes beer-dance {
  0% { transform: translateY(0) rotate(-9deg); }
  50% { transform: translateY(-14px) rotate(0deg); }
  100% { transform: translateY(0) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .xmas-dance .snow-scene .convoy-dance, .xmas-dance .snow-scene .mug { animation: none; }
  .xmas-dance .snow-scene .convoy-dance { 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; }