/* Skrifttyper (selvhostet, SIL Open Font License – se fonts/OFL-*.txt). Variable fonte: alle vægte i én fil. */
@font-face { font-family: "Nunito Sans"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url("../fonts/nunito-sans-latin-wght-normal.e010923d59d4.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url("../fonts/nunito-sans-latin-ext-wght-normal.9359f35055cf.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url("../fonts/baloo-2-latin-wght-normal.86d4963e60c5.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url("../fonts/baloo-2-latin-ext-wght-normal.3fde425b1e3d.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Sodamon – platformens design (Design System v1.0, se docs/design/). Kampagner ændrer kun --campaign-* tokens
   (og evt. --sd-primary/--sd-yellow) via data-campaign på <body> – ingen brandnavne eller -farver i fælles CSS. */
:root {
  --sd-primary: #0B6B45;
  --sd-primary-hover: #075438;
  --sd-forest: #063D2C;
  --sd-mint: #DDF8E4;
  --sd-yellow: #FFE45C;
  --sd-cream: #FFFDF5;
  --sd-ink: #12362B;
  --sd-muted: #65756D;
  --sd-border: #E3EAE4;
  --sd-pink: #F34378;
  --sd-danger: #C73540;
  --sd-surface: #FFFFFF;
  --sd-star: #F2A900;
  --sd-radius-sm: 14px;
  --sd-radius: 22px;
  --sd-radius-lg: 28px;
  --sd-shadow: 0 8px 24px rgba(6, 61, 44, .08);
  --sd-font: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sd-display: "Baloo 2", var(--sd-font);
  --campaign-primary: var(--sd-primary);
  --campaign-accent: var(--sd-yellow);
  --campaign-hero: var(--sd-forest);
  --campaign-surface: var(--sd-cream);
  --campaign-on-primary: #FFFFFF;

  /* Navnene fra Bieremon peger på design-tokens, så resten af CSS'en følger med */
  --bg: var(--sd-cream);
  --card: var(--sd-surface);
  --text: var(--sd-ink);
  --muted: var(--sd-muted);
  --accent: var(--sd-primary);
  --accent-dark: var(--sd-primary-hover);
  --on-accent: #FFFFFF;
  --line: var(--sd-border);
  --bad: var(--sd-danger);
  --good: var(--sd-primary);
  --lvl1: #BDE9FF;
  --lvl2: #D9C8FF;
  --lvl3: var(--sd-yellow);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sd-cream: #0B1F18;
    --sd-surface: #12291F;
    --sd-ink: #E8F5EC;
    --sd-muted: #9DB3A8;
    --sd-border: #24423A;
    --sd-mint: #173A2C;
    --sd-primary: #1E9E66;
    --sd-primary-hover: #26B877;
    --sd-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 400 16px/1.45 var(--sd-font);
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 3px solid var(--sd-pink); outline-offset: 3px; }
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 92%, transparent); color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 var(--sd-display); letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap; color: var(--sd-primary); }
.logo-mark { width: 30px; height: 30px; flex: none; }
.guest-nav { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; 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; }
.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: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; text-decoration: none; }
.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; font-weight: 700; }
.me-count { white-space: nowrap; flex: none; margin-left: 2px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--sd-yellow); color: var(--sd-forest); font-weight: 800; padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.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: 28px; height: 28px; margin-right: 2px; } }
.me .small-btn { margin-left: 0; flex: none; }
main { max-width: 560px; margin: 0 auto; padding: 16px; }
h1 { font: 800 28px/1.1 var(--sd-display); letter-spacing: -.025em; margin: 6px 0 14px; }
h2 { font: 800 20px/1.15 var(--sd-display); letter-spacing: -.015em; margin: 22px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--sd-radius); padding: 20px;
  margin-bottom: 14px; box-shadow: var(--sd-shadow); }
.card > h2:first-child { margin-top: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: 13px; }
.eyebrow { text-transform: uppercase; font-size: .75rem; letter-spacing: .055em; font-weight: 800; color: var(--muted); margin: 0; }
label { display: block; font-weight: 700; 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], input[type=url], select, textarea {
  width: 100%; font: inherit; min-height: 48px; padding: 12px 14px; border-radius: var(--sd-radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
input:focus, select:focus, textarea:focus { border-color: var(--sd-primary); }
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 800;
  cursor: pointer; text-align: center; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  border: 2px solid transparent; background: var(--accent); color: var(--on-accent); text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
button:hover, .btn:hover { background: var(--accent-dark); color: var(--on-accent); transform: translateY(-1px); }
button:disabled { opacity: .5; cursor: wait; transform: none; }
.ghost { background: var(--sd-mint); border-color: transparent; color: var(--sd-forest); font-weight: 700; }
.ghost:hover { background: color-mix(in srgb, var(--sd-mint) 80%, var(--sd-primary)); color: var(--sd-forest); }
@media (prefers-color-scheme: dark) { .ghost, .ghost:hover { color: var(--text); } }
.btn-yellow { background: var(--sd-yellow); color: var(--sd-forest); }
.btn-yellow:hover { background: #F5D530; color: var(--sd-forest); }
.top .ghost { background: transparent; border-color: var(--line); color: var(--text); }
.small-btn { min-height: 36px; padding: 4px 12px; margin-left: 6px; font-size: 13px; }
.danger { background: transparent; color: var(--bad); border-color: var(--bad); font-weight: 700; padding: 6px 12px; font-size: 13px; min-height: 36px; }
.danger:hover { background: var(--bad); color: #fff; }
.block { display: flex; width: 100%; margin-top: 12px; min-height: 52px; padding: 14px; font-size: 17px; }
.error { color: var(--bad); font-weight: 700; margin: 6px 0 0; }
.error:empty { display: none; }
.flash { padding: 14px 16px; border-radius: var(--sd-radius-sm); margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); font-weight: 700; }
.flash.success { border-color: var(--good); background: var(--sd-mint); color: var(--sd-forest); }
.flash.error { border-color: var(--bad); background: #FDE8EA; color: var(--sd-danger); }
.flash.warning, .flash.info { border-color: #E9CF5B; background: #FFF8D6; color: #4D3A00; }
@media (prefers-color-scheme: dark) { .flash.success, .flash.error, .flash.warning, .flash.info { background: var(--card); color: var(--text); } }

.intro h1 { font-size: 34px; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--sd-mint); border-radius: 999px; overflow: hidden; margin: 12px 0; }
.seg-link, .seg-opt { flex: 1; text-align: center; padding: 10px; text-decoration: none; margin: 0; font-weight: 700; cursor: pointer;
  border-radius: 999px; color: var(--sd-forest); }
.seg-link.on, .seg-opt:has(input:checked) { background: var(--card); color: var(--sd-primary); font-weight: 800; box-shadow: 0 2px 8px rgba(6, 61, 44, .12); }
@media (prefers-color-scheme: dark) { .seg-link, .seg-opt { color: var(--text); } }
.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; }

/* Fang: kamerakortet er den primære handling */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 0; border-radius: var(--sd-radius-lg); padding: 36px 16px; margin: 0;
  text-align: center; cursor: pointer; font: 800 19px/1.2 var(--sd-display); color: #fff;
  background: radial-gradient(circle at 90% 10%, rgba(255, 228, 92, .25), transparent 45%), linear-gradient(145deg, var(--campaign-hero), var(--campaign-primary));
  box-shadow: 0 10px 26px rgba(6, 61, 44, .25);
}
.drop small { color: rgba(255, 255, 255, .8); font: 600 14px/1.3 var(--sd-font); }
.drop span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; font-size: 34px;
  background: #16D879; border: 5px solid #fff; box-shadow: inset 0 0 0 4px var(--sd-forest); margin-bottom: 6px; }
/* 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: 600; }
.check input { width: 20px; height: 20px; accent-color: var(--sd-primary); }
.retry { margin: 12px 0 4px; }
.retry summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.retry form { margin-top: 4px; }
.new-place { margin: 8px 0 4px; }
.new-place summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: .92em; }
.preview { width: 100%; max-height: 460px; object-fit: contain; border-radius: var(--sd-radius); background: #0002; display: block; }

/* Pointkort og status (point, ingen point, verificeret …) */
.points-card { background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--sd-mint) 45%, var(--card))); }
.points-value { font: 800 clamp(2.4rem, 10vw, 3.2rem)/1 var(--sd-display); margin: 6px 0; color: var(--sd-primary); }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-size: .82rem;
  font-weight: 800; background: var(--sd-mint); color: var(--sd-forest); }
.status-pending { background: #FFF3BB; color: #6A4D00; }
.status-rejected { background: #FDE8EA; color: var(--sd-danger); }
.status-muted { background: #EDF0ED; color: #4F6258; }
.point-note { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: var(--sd-radius-sm);
  background: #FFF8D6; color: #4D3A00; font-weight: 600; margin: 10px 0; }
@media (prefers-color-scheme: dark) { .point-note { background: #3A3210; color: #FFF3BB; } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--sd-radius-sm); padding: 12px 8px; text-align: center; box-shadow: var(--sd-shadow); }
.stat b { display: block; font: 800 28px/1.1 var(--sd-display); color: var(--sd-primary); }
.stat small { color: var(--muted); font-weight: 600; }

.lvl { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; color: var(--sd-forest); white-space: nowrap; }
.lvl1 { background: var(--lvl1); } .lvl2 { background: var(--lvl2); } .lvl3 { background: var(--lvl3); }
.bonus { background: #FFD3E0; }
.pt { background: var(--sd-yellow); }

.list { list-style: none; padding: 0; margin: 0; }
.item { display: flex; gap: 12px; align-items: center; padding: 12px 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: 14px; object-fit: cover; flex: none; background: var(--line); cursor: zoom-in; }
.grow { flex: 1; min-width: 0; }
.grow .t { font-weight: 800; overflow-wrap: anywhere; }
.rank { width: 36px; text-align: center; font: 800 22px/1 var(--sd-display); flex: none; }
.score { text-align: right; flex: none; }
.score b { font: 800 24px/1 var(--sd-display); color: var(--sd-primary); }
.me-row { background: color-mix(in srgb, var(--sd-yellow) 30%, transparent); border-radius: var(--sd-radius-sm); padding-left: 8px; padding-right: 8px; }

/* Feedkort: stort billede og handlinger */
.post { padding: 0; overflow: hidden; }
.post img { width: 100%; max-height: 560px; object-fit: cover; display: block; cursor: zoom-in; background: #E5EDE7; }
.post .body { padding: 14px 16px 18px; }
.result { text-align: center; }
.result .big { font-size: 56px; }
.result h1 { color: var(--sd-primary); }

/* Bundnavigation med fremhævet kamera i midten */
.tabs {
  position: fixed; z-index: 50; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 560px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--card);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 22px rgba(6, 61, 44, .07);
}
.tabs a { display: grid; place-items: center; gap: 2px; min-height: 48px; text-align: center; font-size: 12px; font-weight: 800;
  text-decoration: none; color: var(--muted); border-radius: 12px; }
.tabs a span { display: block; font-size: 22px; line-height: 1; }
.tabs a.on { color: var(--sd-primary); }
.tabs a.capture { color: var(--text); }
.tabs a.capture span { display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%;
  background: var(--campaign-hero); color: #fff; font-size: 26px; box-shadow: 0 6px 16px rgba(6, 61, 44, .3); border: 4px solid var(--card); }
.tabs a.capture.on span { background: var(--sd-primary); }
.lightbox { position: fixed; inset: 0; z-index: 3000; 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(--sd-star); 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(--sd-star); }
.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: var(--on-accent); }
.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: var(--on-accent); 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: 3000; 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; }
/* Kameraet ligger øverst: bundmenu og cookiebanner må ikke tage tryk på udløseren */
body.camera-open .tabs, body.camera-open .cookie-banner { display: none; }
.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(--sd-pink); color: #fff; border-color: var(--sd-pink); 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: var(--on-accent); 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: 34px; margin: 8px 0 10px; }
.hero .lead { font-size: 17px; margin: 0 auto 16px; max-width: 30em; }
.hero-buttons { display: grid; gap: 8px; margin: 18px 0 4px; }
.hero-buttons .btn { margin: 0; }
/* Kampagnehero: farverne kommer fra --campaign-* tokens, så en kampagne kan skifte dem */
.campaign-hero { background: radial-gradient(circle at 95% 5%, rgba(255, 228, 92, .22), transparent 45%),
    linear-gradient(135deg, var(--campaign-hero), var(--campaign-primary));
  color: var(--campaign-on-primary); padding: 28px 22px; border-radius: var(--sd-radius-lg); margin-bottom: 14px;
  box-shadow: 0 12px 30px rgba(6, 61, 44, .22); }
.campaign-hero h1 { color: var(--campaign-accent); font-size: clamp(30px, 9vw, 40px); }
.campaign-hero .eyebrow { color: rgba(255, 255, 255, .8); }
.campaign-hero .ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.campaign-hero .ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.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; }

/* Sodamon 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: var(--on-accent); 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, var(--sd-yellow), #FFD21F); color: var(--sd-forest); 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; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.lvl.verified-lvl { background: var(--sd-mint); color: var(--sd-forest); }
.guest-nav .btn, .guest-nav .btn:hover { color: var(--on-accent); }
.me-count { text-decoration: none; }
/* Kampagner og kuponer */
.progress { height: 12px; border-radius: 999px; background: #EAE8D6; overflow: hidden; margin: 8px 0; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--campaign-primary); transition: width .3s ease; }
.points-card .eyebrow a { color: inherit; }
.reward-card { gap: 12px; text-decoration: none; padding: 16px; }
.reward-detail { overflow: hidden; }
.reward-hero { margin: -20px -20px 16px; padding: 24px 20px; color: var(--campaign-on-primary);
  background: linear-gradient(135deg, var(--campaign-hero), var(--campaign-primary)); }
.reward-hero h1 { color: var(--campaign-accent); margin: 4px 0; }
.reward-hero .eyebrow { color: rgba(255, 255, 255, .8); }
.reward-code { display: grid; place-items: center; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.reward-code svg { width: min(240px, 70vw); height: auto; }
.big-code { font-size: 26px; font-weight: 800; color: #12362B; margin: 0; }
.tab-icon { position: relative; }
.tab-badge { position: absolute; top: -6px; right: -12px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--sd-pink);
  color: #fff; font: 800 11px/18px var(--sd-font); font-style: normal; }

/* ===== Soda-stemning: egne ikoner, kapsel-knapper og bobler ===== */
.ico { width: 1.3em; height: 1.3em; vertical-align: -.28em; flex: none; --ico-fill: var(--sd-yellow); overflow: visible; }
.ico-lg { width: 2.2em; height: 2.2em; }
.ico-xl { width: 64px; height: 64px; }
.ico-pink { color: var(--sd-pink); }
.ico-heart { color: var(--sd-pink); }
.icon-btn { padding: 4px 9px; }
.icon-btn .ico { width: 22px; height: 22px; }
.guest-nav .ico { width: 24px; height: 24px; color: var(--sd-primary); }
.rank .ico { width: 30px; height: 30px; color: var(--sd-primary); }
.beer-thumb.none .ico, .beer-hero.none .ico { color: var(--sd-primary); }
.beer-thumb.none .ico { width: 30px; height: 30px; }
h1 .ico, h2 .ico { color: var(--sd-primary); }
.me-count .ico { width: 18px; height: 18px; color: var(--sd-forest); --ico-fill: #fff; }
.lvl.pt .ico, .status.pt .ico { width: 16px; height: 16px; --ico-fill: #fff; }
.like-btn .ico, .like-count .ico { width: 16px; height: 16px; color: var(--sd-pink); }
.like-btn.on .ico { color: #fff; }

/* Baggrund: svage bobler, som i et glas sodavand */
body { background-image:
  radial-gradient(circle at 12% 18%, rgba(11, 107, 69, .05) 0 10px, transparent 11px),
  radial-gradient(circle at 86% 9%, rgba(11, 107, 69, .05) 0 16px, transparent 17px),
  radial-gradient(circle at 72% 46%, rgba(255, 228, 92, .14) 0 7px, transparent 8px),
  radial-gradient(circle at 24% 66%, rgba(11, 107, 69, .04) 0 22px, transparent 23px),
  radial-gradient(circle at 90% 84%, rgba(255, 228, 92, .16) 0 12px, transparent 13px);
  background-size: 420px 520px; background-attachment: fixed; }

/* Knapper som kapsler: blank top, "tryk" i bunden */
button, .btn { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 4px 0 var(--sd-forest); margin-bottom: 4px; letter-spacing: .01em; }
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 5px 0 var(--sd-forest); }
button:active, .btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 1px 0 var(--sd-forest); }
.ghost, .top .ghost, .small-btn, .danger, .seg-opt, .stars-input label { box-shadow: none; margin-bottom: 0; }
.ghost:active, .small-btn:active { transform: translateY(1px); }
.btn-yellow { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #C9A800; }
.btn-yellow:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #C9A800; }
.block { position: relative; overflow: hidden; }
/* Primære knapper bobler, når man rører dem */
.block:not(.ghost)::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 15% 80%, rgba(255, 255, 255, .35) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .3) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .3) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 35%, rgba(255, 255, 255, .35) 0 2px, transparent 3px); }
.block:not(.ghost):hover::after { opacity: 1; animation: fizz-up 1.2s ease-out infinite; }

/* Bobler der stiger i heroerne og kamerakortet */
.campaign-hero, .drop, .reward-hero { position: relative; overflow: hidden; isolation: isolate; }
.campaign-hero::after, .drop::after, .reward-hero::after { content: ""; position: absolute; inset: -40% 0 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .22) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(255, 255, 255, .16) 0 6px, transparent 7px),
    radial-gradient(circle, rgba(255, 228, 92, .25) 0 2px, transparent 3px);
  background-size: 90px 120px, 160px 210px, 60px 80px;
  background-position: 10px 0, 60px 40px, 30px 10px;
  animation: bubbles-rise 9s linear infinite; }
.drop span { position: relative; }
.drop .ico { width: 40px; height: 40px; color: var(--sd-forest); --ico-fill: #fff; }
@keyframes bubbles-rise { to { background-position: 10px -240px, 60px -380px, 30px -160px; } }
@keyframes fizz-up { from { transform: translateY(6px); } to { transform: translateY(-10px); } }

/* Fremskridt som en flaske, der fyldes – med bobler */
.progress { height: 16px; border: 2px solid var(--sd-forest); background: #fff; }
.progress > span { position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--campaign-primary) 70%, #fff), var(--campaign-primary)); }
.progress > span::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 0 1.5px, transparent 2px);
  background-size: 14px 14px; animation: bubbles-rise-x 3s linear infinite; }
@keyframes bubbles-rise-x { to { background-position: 14px -28px; } }

/* Bundmenuen: kameraknappen er en kronekapsel */
.tabs .ico { width: 26px; height: 26px; }
.tabs a.on .ico { --ico-fill: var(--sd-yellow); }
.tabs a:not(.on) .ico { --ico-fill: transparent; }
.tabs a.capture span { position: relative; width: 64px; height: 64px; margin-top: -30px; border: 0; border-radius: 50%;
  background: none; box-shadow: none; display: grid; place-items: center; color: #fff; }
.tabs a.capture .capbg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--campaign-hero);
  filter: drop-shadow(0 6px 8px rgba(6, 61, 44, .3)); transition: transform .3s ease; }
.tabs a.capture:hover .capbg, .tabs a.capture.on .capbg { transform: rotate(30deg); }
.tabs a.capture.on .capbg { color: var(--sd-primary); }
.tabs a.capture .ico-camera { position: relative; width: 28px; height: 28px; --ico-fill: var(--sd-yellow); }

/* Pointmærket i toppen er en kapsel */
.me-count { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }

/* Resultat: flasken popper */
.result .pop { display: inline-block; animation: pop-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.result .pop .ico { width: 84px; height: 84px; color: var(--sd-forest); }
@keyframes pop-in { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Kort med en tynd "flydende" kant øverst */
.card { position: relative; }
.points-card::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--campaign-primary), var(--sd-yellow)); }

@media (prefers-reduced-motion: reduce) {
  .campaign-hero::after, .drop::after, .reward-hero::after, .progress > span::after, .block:not(.ghost):hover::after, .result .pop { animation: none; }
}
/* Kameraets knapper på sort baggrund */
.camera-bar .ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; box-shadow: none; margin: 0; }
.camera-bar .ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.camera-bar .shutter, .camera-bar .shutter:hover, .camera-bar .shutter:active { box-shadow: inset 0 0 0 4px #000; margin: 0; transform: none; }