:root {
  color-scheme: light;
  --red: #d9342b;
  --red-dark: #9d201d;
  --eco: #348b5d;
  --eco-dark: #236442;
  --ink: #17181d;
  --muted: #6e7480;
  --panel: #f7f3e8;
  --screen: #dff5eb;
  --line: #252833;
  --gold: #f4bf45;
  --blue: #2b79d9;
  --green: #348b5d;
  --mammal: #cb7584;
  --mammal-soft: #f6d8dd;
  --bird: #2f7f45;
  --bird-soft: #d9efd2;
  --amphibian: #2f8fc5;
  --amphibian-soft: #d9effa;
  --reptile: #e0b72e;
  --reptile-soft: #fff0b8;
  --fish: #173f70;
  --fish-soft: #afc7df;
  --invertebrate: #8b5f3d;
  --invertebrate-soft: #ead4bd;
  --theme-banner: url("assets/brand/banner.png");
  --theme-bg-a: rgba(25, 87, 54, .28);
  --theme-bg-b: rgba(69, 124, 62, .24);
  --theme-page: #cfe5cb;
  --theme-top: rgba(52, 139, 93, .94);
  --theme-bottom: rgba(35, 100, 66, .96);
  --theme-fade: rgba(207, 229, 203, .5);
  --shadow: 0 18px 40px rgba(23, 24, 29, .18);
  --habitat-image: url("assets/habitats/forest.png");
  --habitat-width: min(900px, 94vw);
  --habitat-height: 620px;
  --creature-y: 208px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(135deg, var(--theme-bg-a), transparent 42%),
    linear-gradient(315deg, var(--theme-bg-b), transparent 38%),
    var(--theme-page);
}

body[data-page-theme="nature"] {
  --theme-banner: url("assets/brand/banner-mammals.png");
  --theme-bg-a: rgba(154, 78, 95, .3);
  --theme-bg-b: rgba(180, 97, 68, .22);
  --theme-page: #ead0d2;
  --theme-top: rgba(166, 88, 103, .94);
  --theme-bottom: rgba(121, 65, 77, .96);
  --theme-fade: rgba(234, 208, 210, .5);
}

body[data-page-theme="phylogeny"] {
  --theme-banner: url("assets/brand/banner-birds.png");
  --theme-bg-a: rgba(29, 90, 48, .34);
  --theme-bg-b: rgba(48, 118, 61, .28);
  --theme-page: #c9e4c3;
  --theme-top: rgba(35, 112, 61, .94);
  --theme-bottom: rgba(21, 78, 43, .96);
  --theme-fade: rgba(201, 228, 195, .52);
}

body[data-page-theme="tools"] {
  --theme-banner: url("assets/brand/banner-reptiles.png");
  --theme-bg-a: rgba(198, 159, 53, .34);
  --theme-bg-b: rgba(225, 190, 86, .26);
  --theme-page: #efe2b0;
  --theme-top: rgba(214, 173, 53, .94);
  --theme-bottom: rgba(148, 111, 32, .96);
  --theme-fade: rgba(239, 226, 176, .55);
}

body[data-page-theme="planner"] {
  --theme-banner: url("assets/brand/banner-invertebrates.png");
  --theme-bg-a: rgba(112, 74, 39, .34);
  --theme-bg-b: rgba(146, 105, 61, .28);
  --theme-page: #dfcbb3;
  --theme-top: rgba(139, 95, 61, .94);
  --theme-bottom: rgba(91, 62, 39, .96);
  --theme-fade: rgba(223, 203, 179, .55);
}

body[data-page-theme="observations"] {
  --theme-banner: url("assets/brand/banner-amphibians.png");
  --theme-bg-a: rgba(48, 134, 180, .32);
  --theme-bg-b: rgba(51, 151, 160, .24);
  --theme-page: #cde7ef;
  --theme-top: rgba(47, 143, 197, .94);
  --theme-bottom: rgba(32, 98, 139, .96);
  --theme-fade: rgba(205, 231, 239, .55);
}

body[data-page-theme="collection"] {
  --theme-banner: url("assets/brand/banner.png");
  --theme-bg-a: rgba(110, 178, 116, .2);
  --theme-bg-b: rgba(151, 204, 132, .18);
  --theme-page: #e3f2df;
  --theme-top: rgba(94, 166, 105, .94);
  --theme-bottom: rgba(57, 122, 76, .96);
  --theme-fade: rgba(227, 242, 223, .62);
}

body[data-page-theme="about"] {
  --theme-banner: url("assets/brand/banner-over.png");
  --theme-bg-a: rgba(169, 48, 47, .27);
  --theme-bg-b: rgba(207, 91, 70, .22);
  --theme-page: #efd1cd;
  --theme-top: rgba(190, 57, 53, .95);
  --theme-bottom: rgba(128, 35, 38, .97);
  --theme-fade: rgba(239, 209, 205, .58);
}

body[data-page-theme="achievements"] {
  --theme-banner: url("assets/brand/banner-prestaties.png");
  --theme-bg-a: rgba(9, 37, 75, .56);
  --theme-bg-b: rgba(30, 93, 137, .36);
  --theme-page: #b9d1e5;
  --theme-top: rgba(30, 76, 127, .96);
  --theme-bottom: rgba(13, 38, 76, .98);
  --theme-fade: rgba(185, 209, 229, .66);
}

/* Profiel begint bewust neutraal: latere prestaties kunnen hier een eigen thema ontgrendelen. */
body[data-page-theme="profile"] {
  --theme-banner: linear-gradient(135deg, #f8f9f9, #e9edef);
  --theme-bg-a: rgba(211, 216, 219, .58);
  --theme-bg-b: rgba(255, 255, 255, .72);
  --theme-page: #eef1f2;
  --theme-top: rgba(116, 123, 129, .96);
  --theme-bottom: rgba(71, 77, 83, .98);
  --theme-fade: rgba(238, 241, 242, .72);
}

button,
input {
  font: inherit;
}

.app-shell {
  position: relative;
  isolation: isolate;
  width: min(1120px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  touch-action: pan-y;
}

.app-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(17, 45, 29, .02) 0%, rgba(17, 45, 29, .08) 78%, var(--theme-fade) 100%),
    var(--theme-banner);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateX(-50%);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: white;
  background: linear-gradient(180deg, var(--theme-top), var(--theme-bottom));
  border: 4px solid var(--line);
  border-radius: 8px 8px 18px 18px;
  box-shadow: var(--shadow);
}

.topbar > div {
  min-width: 0;
}

.topbar-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.friend-profile-back {
  position: absolute;
  top: 50%;
  left: max(20px, calc((100vw - 1080px) / 2 + 20px));
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 4px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 4px 0 rgba(22, 29, 34, .28);
  font: inherit;
  font-size: 2rem;
  font-weight: 1000;
  cursor: pointer;
  transform: translateY(-50%);
}

.friend-profile-back[hidden] { display: none !important; }
body[data-view="friend-profile"] .menu-toggle {
  left: max(84px, calc((100vw - 1080px) / 2 + 84px));
}

.page-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 8px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 243, 232, .94);
  box-shadow: var(--shadow);
}

.page-tab {
  min-height: 48px;
  padding: 8px 7px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  font-weight: 950;
  font-size: .82rem;
  cursor: pointer;
}

.page-tab.active {
  color: white;
  background: var(--theme-bottom);
  box-shadow: inset 0 -4px rgba(0, 0, 0, .2);
}

.brand-mark {
  position: static;
  z-index: auto;
  display: grid;
  justify-items: center;
  flex: 0 0 96px;
  width: 96px;
  margin: 0 0 0 auto;
  color: white;
  text-shadow: none;
}

.brand-mark img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 11px;
}

.brand-mark strong {
  display: none;
}

.kicker,
.status-label {
  margin: 0;
  color: inherit;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  line-height: .9;
}

.owner-field {
  display: grid;
  align-items: start;
  gap: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-field span {
  font-size: .92rem;
}

.owner-field input {
  width: min(320px, 100%);
  min-height: 38px;
  padding: 4px 10px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffdf7;
  font-weight: 900;
  box-shadow: inset 0 3px rgba(0, 0, 0, .08);
}

.icon-button,
.close-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold);
  box-shadow: inset 0 -4px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.icon-button span {
  font-size: 1.5rem;
  font-weight: 900;
}

.scanner {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) 1fr;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 18px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 247, .94), rgba(221, 236, 212, .94)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 8px, transparent 8px 16px);
  box-shadow: var(--shadow);
}

.scanner-compact {
  grid-template-columns: 1fr;
}

.scanner-copy {
  min-width: 0;
}

.scanner-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.stat-panel {
  min-width: 0;
  padding: 10px 12px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: inset 0 -5px rgba(0, 0, 0, .08), 0 4px 0 rgba(23, 24, 29, .14);
}

.stat-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.stat-panel strong {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.85rem);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-score {
  border-color: var(--green);
  background: linear-gradient(180deg, #f8fff3, #d9efd2);
}

.stat-score .stat-label,
.stat-score strong {
  color: var(--green);
}

.status-label {
  color: var(--muted);
}

.progress-track {
  height: 16px;
  margin-top: 12px;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: white;
}

#progressFill {
  width: 0%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--green);
  background-image:
    linear-gradient(90deg, var(--green), #42a96f 52%, var(--gold)),
    repeating-linear-gradient(125deg, transparent 0 9px, rgba(255, 255, 255, .22) 9px 15px);
  background-size: 100% 100%, 30px 30px;
  animation: ecodex-progress-flow 1.8s linear infinite;
  transition: width .7s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

#progressFill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, .72) 48%, transparent 72%);
  transform: translateX(-160%);
  animation: ecodex-progress-glint 3.8s ease-in-out infinite;
}

#progressFill.is-complete {
  background-image:
    linear-gradient(90deg, #d39200, #ffd95c 48%, #e7a713),
    repeating-linear-gradient(125deg, transparent 0 9px, rgba(255, 255, 255, .3) 9px 15px);
  filter: drop-shadow(0 0 4px rgba(231, 167, 19, .7));
}

@keyframes ecodex-progress-flow {
  to { background-position: 0 0, 30px 0; }
}

@keyframes ecodex-progress-glint {
  0%, 18% { transform: translateX(-160%); }
  72%, 100% { transform: translateX(160%); }
}

@media (prefers-reduced-motion: reduce) {
  #progressFill,
  #progressFill::after {
    animation: none;
  }
}

.controls {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 243, 232, .92);
  box-shadow: var(--shadow);
}

.search {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.search input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: var(--screen);
  box-shadow: inset 0 3px rgba(255, 255, 255, .7);
}

.segments {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.segment {
  min-width: 0;
  min-height: 40px;
  padding: 5px 6px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--group-soft, white);
  font-size: .88rem;
  font-weight: 900;
  cursor: pointer;
}

.segment.active {
  color: var(--group-text, white);
  background: var(--group, var(--line));
}

.segments [data-filter="all"].active {
  color: white;
  background: var(--eco-dark);
}

.segment[data-filter="Zoogdier"] {
  --group: var(--mammal);
  --group-soft: var(--mammal-soft);
  --group-text: white;
}

.segment[data-filter="Vogel"] {
  --group: var(--bird);
  --group-soft: var(--bird-soft);
  --group-text: white;
}

.segment[data-filter="Reptiel"] {
  --group: var(--reptile);
  --group-soft: var(--reptile-soft);
  --group-text: #21180a;
}

.segment[data-filter="Amfibie"] {
  --group: var(--amphibian);
  --group-soft: var(--amphibian-soft);
  --group-text: white;
}

.segment[data-filter="Vis"] {
  --group: var(--fish);
  --group-soft: var(--fish-soft);
  --group-text: white;
}

.segment[data-filter="Ongewervelde"] {
  --group: var(--invertebrate);
  --group-soft: var(--invertebrate-soft);
  --group-text: white;
}

.rarity-filter .segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fffdf7;
}

.filter-bookmark {
  position: relative;
  display: block;
  width: 16px;
  height: 24px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(23, 24, 29, .16));
}

.filter-bookmark::before,
.filter-bookmark::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.filter-bookmark::before {
  background: var(--line);
}

.filter-bookmark::after {
  inset: 2px;
  bottom: 3px;
  background: #ffd94a;
}

.rarity-filter .segment.active {
  color: var(--ink);
  background: #ffe26e;
}

.rarity-filter [data-rarity-filter="all"].active {
  background: #d9efd2;
}

.rarity-filter [data-rarity-filter="Algemeen"].active {
  background: #aee9eb;
}

.rarity-filter [data-rarity-filter="Bijzonder"].active {
  background: #59a5ff;
}

.rarity-filter [data-rarity-filter="Zeldzaam"].active {
  background: #ffe26e;
}

.rarity-filter [data-rarity-filter="Uniek"].active {
  background: #ca89e0;
}

.rarity-filter [data-rarity-filter="Invasieve exoot"].active {
  background: #ff7676;
}

.rarity-filter .favorite-filter.active {
  background: #ffd94a;
}

.category-filter {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.category-filter select {
  min-height: 48px;
  padding: 0 12px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 30px;
}

.species-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 176px 40px auto auto auto;
  gap: 4px;
  min-height: 328px;
  padding: 12px;
  text-align: left;
  border: 4px solid var(--line);
  border-top-color: var(--group, var(--line));
  border-top-width: 10px;
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 0 51%, var(--group-soft, var(--screen)) 52%);
  box-shadow: 0 7px 0 var(--line);
  cursor: pointer;
  overflow: visible;
}

.species-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 43%;
  border-radius: 2px 2px 0 0;
  background-color: #fffdf7;
  background-image: var(--rarity-pattern, none);
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.species-card > * {
  position: relative;
  z-index: 2;
}

.species-card.rarity-bijzonder {
  --rarity-pattern: url("assets/rarity-patterns/bijzonder.png");
}

.species-card.invasive-exotic {
  --crack-overlay: url("assets/rarity-patterns/cracks.png");
  --crack-x: 50%;
  --crack-y: 50%;
  --crack-size: 310%;
}

.species-card.invasive-exotic::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 43%;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  background-image: var(--crack-overlay);
  background-position: var(--crack-x) var(--crack-y);
  background-repeat: no-repeat;
  background-size: var(--crack-size);
  mix-blend-mode: multiply;
  opacity: .45;
  filter: contrast(1.12);
  transform: scale(var(--crack-scale, 1));
  transform-origin: center;
  pointer-events: none;
}

.detail-card.invasive-exotic {
  border-top-color: #e53935;
}

.species-card.group-zoogdier.rarity-zeldzaam {
  --rarity-pattern: url("assets/rarity-patterns/zeldzaam-zoogdier.png");
}

.species-card.group-vogel.rarity-zeldzaam {
  --rarity-pattern: url("assets/rarity-patterns/zeldzaam-vogel.png");
}

.species-card.group-reptiel.rarity-zeldzaam {
  --rarity-pattern: url("assets/rarity-patterns/zeldzaam-reptiel.png");
}

.species-card.group-amfibie.rarity-zeldzaam {
  --rarity-pattern: url("assets/rarity-patterns/zeldzaam-amfibie.png");
}

.species-card.group-ongewervelde.rarity-zeldzaam {
  --rarity-pattern: url("assets/rarity-patterns/zeldzaam-ongewervelde.png");
}

.species-card.group-vis.rarity-zeldzaam {
  --rarity-pattern: url("assets/rarity-patterns/zeldzaam-vis.png");
}

.species-card.group-zoogdier.rarity-uniek {
  --rarity-pattern: url("assets/rarity-patterns/uniek-zoogdier.jpg");
}

.species-card.group-vogel.rarity-uniek {
  --rarity-pattern: url("assets/rarity-patterns/uniek-vogel.jpg");
}

.species-card.group-reptiel.rarity-uniek {
  --rarity-pattern: url("assets/rarity-patterns/uniek-reptiel.jpg");
}

.species-card.group-amfibie.rarity-uniek {
  --rarity-pattern: url("assets/rarity-patterns/uniek-amfibie.jpg");
}

.species-card.group-ongewervelde.rarity-uniek {
  --rarity-pattern: url("assets/rarity-patterns/uniek-ongewervelde.jpg");
}

.species-card.group-vis.rarity-uniek {
  --rarity-pattern: url("assets/rarity-patterns/uniek-vis.jpg");
}

.habitat-sea {
  --habitat-image: url("assets/habitats/sea.png");
}

.habitat-sand {
  --habitat-image: url("assets/habitats/sand.png");
}

.habitat-urban {
  --habitat-image: url("assets/habitats/urban.png");
}

.habitat-field {
  --habitat-image: url("assets/habitats/field.png");
}

.habitat-forest {
  --habitat-image: url("assets/habitats/forest.png");
}

.habitat-river {
  --habitat-image: url("assets/habitats/river.png");
}

.habitat-vis {
  --habitat-image: url("assets/habitats/vis.png");
}

.species-card.group-zoogdier,
.detail-card.group-zoogdier,
.observation-card.group-zoogdier {
  --group: var(--mammal);
  --group-soft: var(--mammal-soft);
  --group-text: white;
}

.species-card.group-vogel,
.detail-card.group-vogel,
.observation-card.group-vogel {
  --group: var(--bird);
  --group-soft: var(--bird-soft);
  --group-text: white;
}

.species-card.group-reptiel,
.detail-card.group-reptiel,
.observation-card.group-reptiel {
  --group: var(--reptile);
  --group-soft: var(--reptile-soft);
  --group-text: #21180a;
}

.species-card.group-amfibie,
.detail-card.group-amfibie,
.observation-card.group-amfibie {
  --group: var(--amphibian);
  --group-soft: var(--amphibian-soft);
  --group-text: white;
}

.species-card.group-ongewervelde,
.detail-card.group-ongewervelde,
.observation-card.group-ongewervelde {
  --group: var(--invertebrate);
  --group-soft: var(--invertebrate-soft);
  --group-text: white;
}

.species-card.group-vis,
.detail-card.group-vis,
.observation-card.group-vis {
  --group: var(--fish);
  --group-soft: var(--fish-soft);
  --group-text: white;
}

.species-card:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 var(--line);
}

.species-card.unseen .creature-art {
  filter: grayscale(1) brightness(.08);
  opacity: .72;
}

.card-index {
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  width: max-content;
  min-height: 56px;
}

.dex-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--group, var(--red-dark));
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 2px 0 rgba(23, 24, 29, .12);
  font-size: .92rem;
  line-height: 1;
  font-weight: 950;
}

.rarity-stars {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: min(118px, calc(100% - 28px));
  height: 38px;
  margin-top: -2px;
  transform: none;
  pointer-events: none;
}

.rarity-stars img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
}

.rarity-stars.has-invasive {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% + 12px);
}

.rarity-stars.has-invasive .rarity-star-main {
  flex: 0 1 auto;
  width: auto;
  height: 100%;
  min-width: 0;
  max-width: calc(100% - 42px);
}

.rarity-stars.has-invasive .invasive-rarity-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.rarity-stars-bijzonder {
  width: min(146px, calc(100% - 28px));
}

.rarity-stars-zeldzaam {
  width: min(172px, calc(100% - 28px));
}

.rarity-stars-uniek {
  width: min(204px, calc(100% - 20px));
  height: 44px;
}

.rarity-stars-invasieve-exoot {
  width: min(60px, calc(100% - 28px));
  height: 46px;
}

.creature-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end center;
  width: 100%;
  height: 176px;
  transition: filter .2s ease, opacity .2s ease;
}

.creature-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.creature-svg {
  width: min(100%, 160px);
  height: 138px;
  overflow: visible;
  filter: drop-shadow(0 5px 0 rgba(23, 24, 29, .16));
}

.creature-image {
  display: block;
  width: min(124%, 258px);
  height: 190px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 0 rgba(23, 24, 29, .14));
  transform: translateY(-16px);
}

/* The water strider sits high in its detail scene; lower only its collection-card icon. */
.species-card-schaatsenrijder .creature-image {
  transform: translateY(34px);
}

.creature-svg.large,
.creature-image.large {
  width: min(96%, calc(640px * var(--creature-scale, 1)));
  height: auto;
  max-height: 430px;
  transform: none;
}

.species-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.05;
}

.species-name br {
  display: block;
  content: "";
}

.species-category {
  color: var(--group, var(--eco-dark));
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.rarity-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--rarity-text, var(--ink));
  background: var(--rarity-bg, white);
  font-size: .76rem;
  font-weight: 950;
}

.rarity-algemeen {
  --rarity-bg: #aee9eb;
  --rarity-text: #000;
}

.rarity-bijzonder {
  --rarity-bg: #59a5ff;
  --rarity-text: #000;
}

.rarity-zeldzaam {
  --rarity-bg: #ffe26e;
  --rarity-text: #000;
}

.rarity-uniek {
  --rarity-bg: #ca89e0;
  --rarity-text: #000;
}

.rarity-invasieve-exoot {
  --rarity-bg: #ff9c9c;
  --rarity-text: #000;
}

.invasive-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: #000;
  background: #ff9c9c;
  font-size: .76rem;
  font-weight: 950;
}

.invasive-pill[hidden] {
  display: none;
}

.species-meta {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
}

.seen-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: none;
  padding: 4px 7px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: white;
  background: var(--group, var(--green));
  font-size: .72rem;
  font-weight: 900;
}

.species-card.seen .seen-badge {
  display: inline-flex;
}

.favorite-badge {
  position: relative;
  display: block;
  width: 20px;
  height: 30px;
  cursor: pointer;
  filter: drop-shadow(0 2px 0 rgba(23, 24, 29, .2));
}

.favorite-badge::before,
.favorite-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.favorite-badge::before {
  background: var(--line);
}

.favorite-badge::after {
  inset: 3px;
  bottom: 4px;
  background: transparent;
}

.species-card.favorite .favorite-badge::after {
  background: #ffd94a;
}

.favorite-badge:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 2px;
  border-radius: 2px;
}

dialog {
  width: min(1180px, calc(100% - 24px));
  max-width: calc(100vw - 12px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
}

dialog::backdrop {
  background: rgba(23, 24, 29, .58);
}

.detail-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: visible;
  border: 4px solid var(--line);
  border-top: 10px solid var(--group, var(--line));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.close-button {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  background: white;
  font-weight: 900;
}

.detail-nav {
  position: absolute;
  z-index: 3;
  top: 420px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fffdf7;
  font-size: 2.2rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--line);
}

.detail-nav:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--line);
}

.detail-nav-prev {
  left: 16px;
}

.detail-nav-next {
  right: 16px;
}

.detail-image {
  --scene-width: min(900px, 94vw);
  --scene-height: calc(var(--scene-width) * .6889);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(var(--scene-height) + 124px);
  padding: 0 70px;
  border-right: 0;
  border-bottom: 0;
  background: linear-gradient(180deg, #fff 0 68%, transparent 69%);
  overflow: visible;
}

.detail-rarity-stars {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 50%;
  height: 112px;
  transform: translateX(-50%);
  max-width: none;
}

.detail-rarity-stars img {
  object-position: center;
}

.detail-rarity-stars.rarity-stars-algemeen {
  width: clamp(190px, 22vw, 280px);
}

.detail-rarity-stars.rarity-stars-bijzonder {
  width: clamp(290px, 32vw, 430px);
}

.detail-rarity-stars.rarity-stars-zeldzaam {
  width: clamp(360px, 40vw, 540px);
}

.detail-rarity-stars.rarity-stars-uniek {
  width: clamp(410px, 46vw, 620px);
}

.detail-rarity-stars.rarity-stars-invasieve-exoot {
  width: clamp(118px, 15vw, 160px);
}

.detail-rarity-stars.has-invasive {
  width: max-content;
  max-width: 90%;
  gap: 6px;
}

.detail-rarity-stars.has-invasive .invasive-rarity-icon {
  flex-basis: 112px;
  width: 112px;
  height: 112px;
}

.detail-image::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: var(--habitat-bottom, 0);
  width: var(--scene-width);
  height: var(--scene-height);
  background-image: var(--habitat-image);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%);
}

.detail-card.habitat-vis .detail-image::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--habitat-bottom, 0);
  width: var(--scene-width);
  height: var(--scene-height);
  pointer-events: none;
  background-image: url("assets/habitats/visoverlay.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%);
}

.detail-image .creature-art {
  position: absolute;
  left: 50%;
  bottom: var(--habitat-bottom, 0);
  z-index: 2;
  width: var(--scene-width);
  height: var(--scene-height);
  transform: translateX(-50%);
}

.detail-image .creature-wrap {
  position: absolute;
  left: 50%;
  bottom: var(--creature-y, 45%);
  display: grid;
  place-items: center;
  width: 33.333%;
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%) translateX(var(--creature-x, 0)) translateY(var(--creature-ground-shift, 0));
}

.detail-image .creature-image.large,
.detail-image .creature-svg.large {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: none;
}

.detail-content {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 54px 34px;
  text-align: center;
  min-width: 0;
  box-sizing: border-box;
}

.detail-content .kicker {
  color: var(--group, var(--red-dark));
  font-size: 1rem;
}

.detail-content h2 {
  max-width: 100%;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.latin {
  margin: -6px 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.12rem;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

.detail-tags span {
  padding: 6px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: white;
  font-weight: 850;
}

.detail-tags span:first-child {
  color: var(--group-text, white);
  background: var(--group, var(--line));
}

.detail-tags .rarity-pill {
  color: var(--rarity-text, #000);
  background: var(--rarity-bg, white);
  font-size: inherit;
}

.detail-tags .invasive-pill {
  color: #000;
  background: #ff9c9c;
  font-size: inherit;
  font-weight: 950;
}

.detail-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: min(760px, 100%);
  margin: 4px 0 0;
  padding: 4px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #f2eee5;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.detail-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 14px;
  border: 2px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.detail-tab.active {
  border-color: var(--line);
  background: var(--group, #348b5d);
  color: var(--group-text, #fff);
}

.detail-tab-panel {
  width: min(820px, 100%);
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
}

#detailObservationsPanel {
  padding: 0;
  background: transparent;
}

#detailObservationsPanel .observation-card-photo {
  background: color-mix(in srgb, var(--group, #348b5d) 12%, #fffdf7);
}

#detailObservationsPanel .observation-card-actions {
  background: color-mix(in srgb, var(--group, #348b5d) 8%, #f4f7f7);
}

.detail-tab-panel > h3 {
  margin: 4px 0 8px;
  font-size: 1.45rem;
}

.detail-search-intro {
  margin: 0 0 12px;
  line-height: 1.5;
}

.detail-field-copy {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.detail-field-copy p {
  margin: 0;
  line-height: 1.55;
}

.detail-reference-photo {
  width: 100%;
  margin: 12px 0 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 6px;
  aspect-ratio: 16 / 9;
  background: #e8eef0;
}

.detail-reference-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.detail-distribution-map {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 8px 0 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #edf4ed;
  cursor: zoom-in;
  touch-action: pan-y;
}

.detail-distribution-map img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  transition: transform .18s ease;
  transform-origin: center;
}

.detail-distribution-map .detail-distribution-map-zoom-icon {
  position: absolute;
  display: none;
  z-index: 1;
  top: 8px;
  right: 8px;
  width: 42px;
  height: 42px;
  padding: 4px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 253, 247, .9);
  object-fit: contain;
}

.detail-distribution-map.is-zoomed {
  cursor: grab;
  touch-action: none;
}

.detail-distribution-map.is-zoomed > img:first-child {
  transform: translate(var(--map-pan-x, 0), var(--map-pan-y, 0)) scale(4);
}

.detail-distribution-map.is-dragging {
  cursor: grabbing;
}

.detail-distribution-map.is-dragging > img:first-child {
  transition: none;
}

.detail-distribution-map.is-zoomed .detail-distribution-map-zoom-icon {
  display: block;
}

.detail-distribution-map:focus-visible {
  outline: 3px solid #2f8fc5;
  outline-offset: 3px;
}

.detail-info-block {
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 2px solid #d6cfc2;
  border-radius: 8px;
  background: rgba(255, 253, 247, .72);
}

.detail-info-block h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.detail-info-block p {
  margin: 0 0 8px;
  line-height: 1.45;
}

.detail-inline-label {
  margin-top: 10px !important;
  font-weight: 900;
}

.detail-chip-list,
.detail-area-list,
.detail-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.detail-chip-list span,
.detail-area-list button {
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
}

.detail-area-list button {
  cursor: pointer;
}

.detail-area-list button:hover,
.detail-area-list button:focus-visible {
  background: var(--group, #348b5d);
  color: var(--group-text, #fff);
}

.detail-muted,
.detail-empty-state,
.detail-source-note {
  color: var(--muted);
}

.detail-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: #fffdf7;
  font-size: .82rem;
  font-weight: 800;
}

.detail-item-chip img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.detail-source-note {
  margin: 14px 0 0;
  font-size: .75rem;
  line-height: 1.4;
}

.detail-source-note a {
  color: inherit;
  font-weight: 800;
}

.detail-observation-actions {
  margin: 16px auto 12px;
}

.detail-observation-add {
  width: min(300px, 100%);
}

.detail-observation-list {
  display: grid;
  gap: 10px;
}

.detail-observation-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 2px solid #d6cfc2;
  border-radius: 8px;
  background: rgba(255, 253, 247, .72);
}

.detail-observation-card strong {
  display: block;
  margin-bottom: 4px;
}

.detail-observation-card p,
.detail-observation-card small {
  display: block;
  margin: 3px 0 0;
  line-height: 1.4;
}

.detail-observation-gallery {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.detail-observation-gallery img {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
}

.detail-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(440px, 100%);
  margin-top: 6px;
}

#detailDescription {
  max-width: 820px;
  margin: 0;
  color: #343842;
  line-height: 1.5;
  text-align: left;
}

#detailDescription p {
  margin: 0 0 10px;
}

#detailDescription p:last-child {
  margin-bottom: 0;
}

#detailOverviewPanel .detail-actions {
  margin: 16px auto 0;
}

.primary-button {
  width: min(300px, calc(100% - 66px));
  min-height: 50px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: white;
  background: var(--red);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--line);
}

.primary-button.seen {
  background: var(--green);
}

.bookmark-button {
  display: grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  min-height: 50px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fff8ce;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--line);
}

.bookmark-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--line);
}

.bookmark-button.active {
  background: #ffd94a;
}

.bookmark-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 36px;
  filter: drop-shadow(0 1px 0 rgba(23, 24, 29, .15));
}

.bookmark-icon::before,
.bookmark-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.bookmark-icon::before {
  background: var(--line);
}

.bookmark-icon::after {
  inset: 3px;
  bottom: 4px;
  background: #ffd94a;
}

@media (max-width: 680px) {
  .app-shell {
    padding: 10px;
  }

  .topbar {
    align-items: center;
  }

  .brand-mark {
    position: static;
    flex: 0 0 76px;
    width: 76px;
    margin-left: auto;
    text-shadow: none;
  }

  .brand-mark img {
    border-radius: 10px;
  }

  .brand-mark strong {
    display: none;
  }

  .app-shell::before {
    height: 100vh;
  }

  .scanner {
    grid-template-columns: 1fr;
  }

  .owner-field {
    align-items: flex-start;
  }

  .scanner-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .segments {
    grid-template-columns: repeat(2, 1fr);
  }

  .dex-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .species-card {
    grid-template-rows: auto 96px 28px auto auto auto;
    gap: 3px;
    min-height: 248px;
    padding: 6px;
    border-width: 3px;
    border-top-width: 7px;
    border-radius: 6px;
    box-shadow: 0 4px 0 var(--line);
  }

  .card-index {
    gap: 3px;
    min-height: 42px;
  }

  .dex-number {
    padding: 3px 5px;
    font-size: .72rem;
  }

  .favorite-badge {
    width: 16px;
    height: 24px;
  }

  .rarity-stars {
    width: min(78px, calc(100% - 12px));
    height: 27px;
    margin-top: -1px;
  }

  .rarity-stars-bijzonder {
    width: min(92px, calc(100% - 10px));
  }

  .rarity-stars-zeldzaam {
    width: min(104px, calc(100% - 8px));
  }

  .rarity-stars-uniek {
    width: min(116px, calc(100% - 4px));
    height: 29px;
  }

  .rarity-stars-invasieve-exoot {
    width: 42px;
    height: 29px;
  }

  .rarity-stars.has-invasive {
    width: max-content;
    max-width: calc(100% + 10px);
    gap: 2px;
  }

  .rarity-stars.has-invasive .invasive-rarity-icon {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }

  .creature-art {
    height: 96px;
  }

  .creature-wrap {
    transform: none;
  }

  .creature-svg {
    width: min(100%, 104px);
    height: 86px;
  }

  .creature-image {
    width: min(130%, 145px);
    height: 112px;
    transform: translateY(-9px);
  }

  .species-card-schaatsenrijder .creature-image {
    transform: translateY(22px);
  }

  .species-name {
    overflow-wrap: anywhere;
    font-size: .8rem;
    line-height: 1.02;
  }

  .species-category {
    font-size: .6rem;
    line-height: 1.05;
  }

  .species-meta {
    font-size: .66rem;
    line-height: 1.08;
  }

  .seen-badge {
    top: 5px;
    right: 5px;
    padding: 3px 4px;
    border-width: 1px;
    font-size: .58rem;
  }

  .detail-card {
    grid-template-columns: 1fr;
  }

  .detail-image {
    --scene-width: min(620px, 96vw);
    min-height: calc(var(--scene-height) + 82px);
    padding: 0 18px;
  }

  .detail-rarity-stars {
    top: 10px;
    height: 72px;
  }

  .detail-rarity-stars.rarity-stars-algemeen {
    width: clamp(140px, 42vw, 190px);
  }

  .detail-rarity-stars.rarity-stars-bijzonder {
    width: clamp(180px, 54vw, 260px);
  }

  .detail-rarity-stars.rarity-stars-zeldzaam {
    width: clamp(230px, 68vw, 330px);
  }

  .detail-rarity-stars.rarity-stars-uniek {
    width: clamp(265px, 78vw, 380px);
  }

  .detail-rarity-stars.rarity-stars-invasieve-exoot {
    width: clamp(82px, 24vw, 112px);
  }

  .detail-rarity-stars.has-invasive {
    width: max-content;
    max-width: 92vw;
    gap: 4px;
  }

  .detail-rarity-stars.has-invasive .invasive-rarity-icon {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }

  .detail-nav {
    top: 300px;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
  }

  .detail-nav-prev {
    left: 8px;
  }

  .detail-nav-next {
    right: 8px;
  }

  .detail-image::before {
    left: 50%;
    right: auto;
    bottom: var(--habitat-bottom, 0);
  }

  .detail-image .creature-art {
    bottom: var(--habitat-bottom, 0);
  }

  .detail-image .creature-wrap {
    transform: translateX(-50%) translateX(var(--creature-x, 0)) translateY(var(--creature-ground-shift, 0));
  }

  .creature-svg.large,
  .creature-image.large {
    max-height: none;
  }

  .detail-content {
    padding: 0 18px 24px;
    width: 100%;
  }

  dialog#detailDialog {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px auto;
  }

  #detailDialog .detail-image {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #detailDialog .detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
  }

  #detailDialog .detail-tab {
    padding: 8px 4px;
    font-size: .78rem;
    white-space: normal;
  }

  #detailDialog .detail-tags span {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: .82rem;
  }

  #detailDialog .observations-list {
    grid-template-columns: minmax(0, 1fr);
  }

  #detailDialog .observation-card {
    min-width: 0;
  }

  #detailDialog .observation-card-actions {
    justify-content: center;
  }

  .detail-content h2 {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
  }
}

.phylogeny-view {
  margin-top: 18px;
  padding: 18px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(rgba(247, 243, 232, .97), rgba(225, 238, 213, .98));
  box-shadow: var(--shadow);
}

.phylogeny-view[hidden],
.collection-panel[hidden],
.page-view[hidden] {
  display: none;
}

.placeholder-page {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 460px;
  padding: 48px 24px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 253, 247, .97), rgba(218, 236, 207, .97)),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(52, 139, 93, .08) 16px 20px);
  box-shadow: var(--shadow);
  text-align: center;
}

.placeholder-page h2 {
  margin: 8px 0 12px;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1;
}

.placeholder-page > p:last-child {
  max-width: 620px;
  margin: 0;
  color: #4d5651;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
}

.nature-page {
  display: grid;
  gap: 18px;
}

.nature-hero,
.nature-habitat-card,
.nature-area-card {
  border: 4px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.nature-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: clamp(26px, 5vw, 48px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(121, 65, 77, .92), rgba(166, 88, 103, .72)),
    var(--theme-banner) center / cover;
}

.nature-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: .95;
}

.nature-hero p:last-child {
  max-width: 760px;
  margin: 0;
  color: #eef8e8;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.5;
}

.nature-hero-card {
  display: grid;
  justify-items: center;
  min-width: 120px;
  padding: 16px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--line);
  box-shadow: 0 4px 0 var(--line);
}

.nature-hero-card strong {
  font-size: 2.2rem;
  line-height: 1;
}

.nature-hero-card span {
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.nature-filter-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .82);
  box-shadow: var(--shadow);
}

.nature-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .82);
  box-shadow: var(--shadow);
}

.nature-view-tabs button {
  min-height: 46px;
  padding: 9px 12px;
  border: 3px solid var(--line);
  border-radius: 7px;
  background: #fffdf7;
  color: var(--line);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--line);
}

.nature-view-tabs button.active {
  color: #fffdf7;
  background: var(--theme-bottom);
  text-shadow: 0 1px 0 rgba(23, 24, 29, .5);
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}

.nature-habitat-jump-panel .nature-filter-button {
  background: color-mix(in srgb, var(--habitat-color, var(--eco)) 28%, #fffdf7);
}

.nature-filter-panel .kicker {
  margin: 0 0 7px;
}

.nature-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nature-filter-button {
  min-height: 34px;
  padding: 6px 10px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habitat-color, #fffdf7) 16%, #fffdf7);
  color: var(--line);
  font-size: .82rem;
  font-weight: 950;
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
}

.nature-filter-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--habitat-color, var(--eco)) 72%, #fffdf7);
  color: #fffdf7;
  text-shadow: 0 1px 0 rgba(23, 24, 29, .55);
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}

.nature-favorite-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nature-section-list,
.nature-habitat-section {
  display: grid;
  gap: 22px;
}

.nature-directory-heading,
.nature-area-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 0;
}

.nature-directory-heading {
  margin-top: 8px;
  padding: 14px 16px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 4px 0 var(--line);
}

.nature-directory-heading h2,
.nature-area-section-header h3 {
  margin: 0;
  color: var(--line);
  line-height: 1.02;
}

.nature-directory-heading .kicker {
  color: var(--theme-bottom);
  opacity: 1;
}

.nature-directory-heading h2 {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.nature-area-section-header {
  padding: 16px 18px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habitat-color) 22%, #fffdf7);
  box-shadow: 0 4px 0 var(--line);
}

.nature-area-section-header h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
}

.nature-habitat-card {
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 34px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--habitat-color) 18%, #fffdf7), #fffdf7 38%);
}

.nature-habitat-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--habitat-color);
}

.nature-habitat-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nature-habitat-heading > span {
  width: 18px;
  height: 42px;
  border: 3px solid var(--line);
  border-radius: 4px;
  background: var(--habitat-color);
  box-shadow: 0 3px 0 var(--line);
}

.nature-habitat-heading h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.05;
}

.nature-habitat-intro,
.nature-habitat-copy p {
  margin: 0;
  color: #3f4741;
  font-weight: 700;
  line-height: 1.58;
}

.nature-habitat-intro {
  font-weight: 900;
}

.nature-habitat-copy {
  display: grid;
  gap: 10px;
  max-width: 980px;
}

.nature-timing-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 980px;
  margin-top: 2px;
}

.nature-timing-panel div,
.nature-timing-panel p {
  margin: 0;
  padding: 12px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .76);
  box-shadow: 0 3px 0 rgba(37, 40, 51, .2);
}

.nature-timing-panel div {
  display: grid;
  gap: 3px;
}

.nature-timing-panel strong {
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nature-timing-panel span,
.nature-timing-panel p {
  color: #3f4741;
  font-weight: 800;
  line-height: 1.45;
}

.nature-timing-panel p {
  grid-column: 1 / -1;
}

.nature-part-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.nature-part-list span,
.nature-area-meta span {
  padding: 5px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  color: var(--line);
  font-size: .74rem;
  font-weight: 950;
}

.nature-area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.nature-area-card {
  overflow: hidden;
  background: #fffdf7;
}

.nature-photo-button {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(230px, 32vw, 390px);
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  list-style: none;
  cursor: pointer;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--habitat-color) 28%, transparent), transparent 62%),
    var(--nature-photo, repeating-linear-gradient(45deg, rgba(37, 40, 51, .08) 0 8px, transparent 8px 16px)),
    color-mix(in srgb, var(--habitat-color) 18%, #fffdf7);
  background-size: cover;
  background-position: var(--nature-photo-position, center);
}

.nature-photo-button::-webkit-details-marker {
  display: none;
}

.nature-photo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 24, 29, .05), rgba(23, 24, 29, .72)),
    linear-gradient(90deg, rgba(23, 24, 29, .42), transparent 54%);
}

.nature-photo-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  max-width: 820px;
  color: #fffdf7;
  text-shadow: 0 3px 0 rgba(23, 24, 29, .52);
}

.nature-bookmark-button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .92);
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
}

.nature-bookmark-button .filter-bookmark {
  transform: scale(1.08);
}

.nature-bookmark-button[aria-pressed="false"] .filter-bookmark::after {
  background: #fff9cb;
}

.nature-bookmark-button[aria-pressed="true"] {
  background: #fff2a8;
}

.nature-photo-kicker {
  width: fit-content;
  padding: 5px 9px;
  border: 2px solid rgba(255, 253, 247, .85);
  border-radius: 999px;
  background: rgba(23, 24, 29, .45);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.nature-photo-content strong {
  font-size: clamp(1.9rem, 5vw, 3.7rem);
  line-height: .95;
}

.nature-photo-difficulty {
  color: #ffd857;
  font-size: 1.2rem;
  letter-spacing: 2px;
  -webkit-text-stroke: 1px #fffdf7;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 0 rgba(23, 24, 29, .72));
}

.nature-area-body {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
}

.nature-area-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nature-area-meta span:first-child {
  background: color-mix(in srgb, var(--habitat-color) 24%, #fffdf7);
}

.nature-area-card p {
  margin: 0;
  color: #4d5651;
  font-weight: 720;
  line-height: 1.62;
}

.nature-area-copy,
.nature-area-access {
  display: grid;
  gap: 10px;
}

.nature-species-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 2px;
}

.nature-area-species {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.nature-area-species > strong,
.nature-area-access > strong {
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nature-species-names {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nature-species-names span {
  padding: 5px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--habitat-color) 14%, #fffdf7);
  color: var(--line);
  font-size: .76rem;
  font-weight: 900;
}

.nature-species-chip {
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--group-soft, #d9efd2) 85%, #fffdf7);
  cursor: pointer;
}

.nature-species-chip img {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

.nature-section-count {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 4px;
  color: color-mix(in srgb, var(--habitat-color) 86%, var(--line));
  font-weight: 950;
}

.nature-section-count strong {
  font-size: 1.7rem;
  line-height: 1;
}

.nature-section-count span {
  font-size: .78rem;
  text-transform: uppercase;
}

.nature-empty-state {
  margin: 0;
  padding: 24px;
  border: 3px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .82);
  color: var(--line);
  font-weight: 900;
  text-align: center;
}

@media (max-width: 820px) {
  .nature-hero {
    grid-template-columns: 1fr;
  }

  .nature-view-tabs {
    grid-template-columns: 1fr;
  }

  .nature-hero-card {
    justify-self: start;
  }

  .nature-timing-panel {
    grid-template-columns: 1fr;
  }

  .nature-photo-button {
    min-height: 230px;
  }
}

.planner-page {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.planner-hero,
.planner-section,
.breeding-notice,
.planner-builder-preview {
  border: 4px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.planner-hero {
  padding: clamp(28px, 6vw, 58px);
  color: #fff;
  background:
    linear-gradient(110deg, rgba(78, 49, 27, .94), rgba(139, 95, 61, .75)),
    var(--theme-banner) center / cover;
}

.planner-hero .kicker {
  color: #ffe6a5;
}

.planner-hero h2 {
  max-width: 760px;
  margin: 6px 0 14px;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .96;
}

.planner-hero > p:last-child {
  max-width: 700px;
  margin: 0;
  font-size: 1.06rem;
  font-weight: 750;
  line-height: 1.55;
}

.planner-builder-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: #fffaf0;
}

.planner-builder-preview h3,
.planner-section h3,
.breeding-notice h3 {
  margin: 4px 0 8px;
  font-size: clamp(1.8rem, 4.5vw, 2.65rem);
  line-height: 1.05;
}

.planner-builder-preview p:last-child,
.planner-section > p,
.breeding-notice p {
  font-size: 1.02rem;
  line-height: 1.55;
}

.planner-builder-preview > span {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 3px solid var(--line);
  border-radius: 5px;
  background: #ead4bd;
  font-size: .8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.planner-section {
  padding: clamp(22px, 4vw, 36px);
  background: rgba(255, 253, 247, .96);
}

.planner-section-heading {
  margin-bottom: 12px;
}

.planner-section-heading .kicker {
  color: #8b5f3d;
}

.season-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.season-card {
  min-width: 0;
  padding: 18px;
  border: 3px solid var(--line);
  border-top-width: 9px;
  border-radius: 7px;
  background: #fff;
}

.season-card > span {
  font-size: .74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.season-card h4 {
  margin: 8px 0;
  font-size: 1.28rem;
  line-height: 1.15;
}

.season-card p {
  margin: 0;
  color: #4e5651;
  font-size: .96rem;
  font-weight: 650;
  line-height: 1.58;
}

.season-spring { border-top-color: #72b45b; }
.season-summer { border-top-color: #e0b72e; }
.season-autumn { border-top-color: #ba7043; }
.season-winter { border-top-color: #5d9cb9; }

.planner-time-picker {
  display: grid;
  grid-template-columns: minmax(140px, .32fr) minmax(230px, .68fr);
  gap: 8px 14px;
  margin: 22px 0;
  padding: 18px;
  border: 3px solid var(--line);
  border-radius: 7px;
  background: #f7ead4;
}

.planner-time-picker > label {
  align-self: end;
  font-size: .82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.planner-time-picker > select {
  min-width: 0;
  min-height: 50px;
  padding: 10px 12px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #fffdf7;
  color: var(--line);
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
}

.planner-time-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
  gap: 22px;
  margin-top: 8px;
  padding: clamp(20px, 4vw, 30px);
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #fffdf7;
}

.planner-time-result h4 {
  margin: 5px 0 10px;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.08;
}

.planner-time-result p:last-child {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.62;
}

.planner-time-species {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.planner-species-button {
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  border: 2px solid var(--line);
  border-left: 8px solid var(--group, #348b5d);
  border-radius: 5px;
  background: var(--group-soft, #e3f2df);
  color: var(--line);
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.planner-species-button.group-zoogdier { --group: var(--mammal); --group-soft: var(--mammal-soft); }
.planner-species-button.group-vogel { --group: var(--bird); --group-soft: var(--bird-soft); }
.planner-species-button.group-reptiel { --group: var(--reptile); --group-soft: var(--reptile-soft); }
.planner-species-button.group-amfibie { --group: var(--amphibian); --group-soft: var(--amphibian-soft); }
.planner-species-button.group-vis { --group: var(--fish); --group-soft: var(--fish-soft); }
.planner-species-button.group-ongewervelde { --group: var(--invertebrate); --group-soft: var(--invertebrate-soft); }

.planner-species-button:active {
  transform: translateY(2px);
}

.planner-tip {
  margin: 0;
  padding: 14px 16px;
  border-left: 8px solid #e0b72e;
  background: #fff4ca;
  font-weight: 850;
}

.breeding-notice {
  padding: clamp(24px, 5vw, 42px);
  color: #fff;
  background: #a9433f;
}

.breeding-notice .kicker {
  color: #ffd8a6;
}

.breeding-notice p {
  max-width: 850px;
}

.breeding-notice p:last-child {
  margin-bottom: 0;
  font-weight: 800;
}

.planner-why p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .planner-builder-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .season-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planner-time-picker,
  .planner-time-result {
    grid-template-columns: 1fr;
  }

  .planner-time-picker > label {
    align-self: auto;
  }
}

@media (max-width: 460px) {
  .season-grid {
    grid-template-columns: 1fr;
  }

  .planner-time-species {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.planner-reading {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(28px, 6vw, 64px);
  border: 4px solid var(--line);
  border-radius: 8px;
  background: #ead4bd;
  box-shadow: var(--shadow);
  color: #2e241d;
}

.planner-builder {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(26px, 5vw, 48px);
  overflow: hidden;
  border: 4px solid var(--line);
  border-radius: 8px;
  color: #fff;
  background: #5b3e27;
  box-shadow: var(--shadow);
}

.planner-builder *,
.planner-reading * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.planner-builder p,
.planner-reading p,
.planner-builder h2,
.planner-builder h3,
.planner-reading h2,
.planner-reading h3,
.planner-reading h4 {
  overflow-wrap: anywhere;
}

.planner-builder > header {
  max-width: 760px;
  margin-bottom: 26px;
}

.planner-builder h2 {
  margin: 0 0 10px;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.05;
}

.planner-builder header p {
  margin: 0;
  color: #f5e6d4;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
}

.planner-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.planner-mode-tabs button {
  min-height: 52px;
  padding: 10px 14px;
  border: 3px solid var(--line);
  border-radius: 5px;
  background: #f5e6d4;
  color: #2e241d;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.planner-mode-tabs button.active {
  background: #d5aa73;
  box-shadow: inset 0 -4px 0 rgba(46, 36, 29, .25);
}

[data-planner-mode-panel][hidden] {
  display: none;
}

[data-planner-mode-panel] {
  max-width: 100%;
  overflow: hidden;
}

.planner-builder-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.planner-builder-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: .8rem;
  font-weight: 900;
}

.planner-builder-fields select {
  min-width: 0;
  min-height: 48px;
  padding: 9px 10px;
  border: 3px solid var(--line);
  border-radius: 5px;
  background: #f5e6d4;
  color: #2e241d;
  font: inherit;
  font-size: .9rem;
  font-weight: 850;
}

#buildPlanner,
#analyzeFavorites {
  min-height: 50px;
  margin-top: 14px;
  padding: 10px 22px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #d5aa73;
  color: #241b15;
  font: inherit;
  font-weight: 950;
  box-shadow: 0 4px 0 var(--line);
  cursor: pointer;
}

#buildPlanner:active,
#analyzeFavorites:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--line);
}

#analyzeFavorites:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.planner-favorite-intro h3 {
  margin: 0 0 7px;
  font-size: 1.45rem;
}

.planner-item-selector {
  max-width: 100%;
  overflow: hidden;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid rgba(245, 230, 212, .45);
}

.planner-item-selector h3 {
  margin: 0 0 5px;
  font-size: 1.25rem;
}

.planner-item-selector > p,
.planner-item-empty {
  margin: 0;
  color: #f5e6d4;
  font-weight: 700;
  line-height: 1.45;
}

.planner-item-pool {
  display: flex;
  gap: 10px;
  max-width: 100%;
  margin-top: 14px;
  padding-bottom: 5px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.planner-item-choice {
  flex: 0 0 112px;
  display: grid;
  grid-template-rows: 78px auto;
  gap: 5px;
  min-height: 118px;
  padding: 7px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #f5e6d4;
  color: #2e241d;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  scroll-snap-align: start;
  cursor: pointer;
}

.planner-item-choice img {
  width: 100%;
  height: 78px;
  object-fit: contain;
  border-radius: 3px;
}

.planner-item-choice.selected {
  background: #d5aa73;
  box-shadow: inset 0 0 0 3px rgba(91, 62, 39, .34);
}

.planner-favorite-intro p,
.planner-favorite-empty {
  margin: 0;
  color: #f5e6d4;
  font-weight: 700;
  line-height: 1.5;
}

.planner-favorite-pool {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  max-width: 100%;
  margin-top: 18px;
}

.planner-favorite-choice {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 5px;
  min-width: 0;
  min-height: 132px;
  padding: 7px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #f5e6d4;
  color: #2e241d;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}

.planner-favorite-choice img {
  width: 100%;
  height: 86px;
  object-fit: contain;
  image-rendering: pixelated;
}

.planner-favorite-choice span {
  overflow-wrap: anywhere;
}

.planner-favorite-choice.selected {
  background: #d5aa73;
  box-shadow: inset 0 0 0 4px rgba(91, 62, 39, .34);
}

.planner-favorite-choice.selected::after {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #319263;
  content: "";
}

.planner-favorite-advice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.planner-favorite-advice p {
  margin: 0;
  padding: 12px 0;
  border-block: 2px solid rgba(245, 230, 212, .45);
}

.planner-favorite-advice span,
.planner-favorite-advice strong {
  display: block;
}

.planner-favorite-advice span {
  margin-bottom: 5px;
  color: #d5aa73;
  font-size: .75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.planner-favorite-advice strong {
  font-size: 1.08rem;
}

.planner-area-preview {
  max-width: 100%;
  overflow: hidden;
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 5px solid #d5aa73;
  background: rgba(245, 230, 212, .1);
}

.planner-area-preview p {
  margin: 5px 0 0;
  color: #f5e6d4;
  font-weight: 700;
  line-height: 1.5;
}

.planner-recommended-items {
  max-width: 100%;
  overflow: hidden;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid rgba(245, 230, 212, .45);
}

.planner-recommended-items > p {
  margin: 5px 0 0;
  color: #f5e6d4;
  font-weight: 700;
  line-height: 1.45;
}

.planner-recommended-item-pool {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.planner-recommended-item {
  display: grid;
  grid-template-rows: 74px auto;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #d5aa73;
  color: #2e241d;
  font-size: .7rem;
  font-weight: 900;
  text-align: center;
}

.planner-recommended-item img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  border-radius: 3px;
}

.planner-recommended-item span {
  overflow-wrap: anywhere;
}

.planner-nature-area-pool {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.planner-nature-area-pool > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #f5e6d4;
  font-weight: 750;
  line-height: 1.45;
}

.planner-nature-area-card {
  display: grid;
  align-content: end;
  min-height: 96px;
  padding: 10px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 7px;
  color: #fffdf7;
  text-align: left;
  text-shadow: 0 2px 0 rgba(23, 24, 29, .62);
  background:
    linear-gradient(180deg, rgba(23, 24, 29, .05), rgba(23, 24, 29, .78)),
    var(--nature-photo, linear-gradient(135deg, #55704c, #271f18));
  background-size: cover;
  background-position: var(--nature-photo-position, center);
  box-shadow: 0 4px 0 rgba(23, 24, 29, .18);
  cursor: pointer;
}

.planner-nature-area-card span {
  font-size: .95rem;
  font-weight: 950;
  line-height: 1.02;
}

.planner-nature-area-card small {
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 850;
}

.planner-builder-result {
  max-width: 100%;
  overflow: hidden;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 2px solid rgba(245, 230, 212, .45);
}

.planner-builder-result h3 {
  margin: 0 0 8px;
  font-size: 1.55rem;
}

.planner-builder-result > p {
  margin: 0;
  color: #f5e6d4;
  font-weight: 700;
  line-height: 1.5;
}

.planner-fish-tip {
  margin-top: 16px;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(245, 230, 212, .13);
  overflow-wrap: anywhere;
}

.planner-fish-tip strong {
  display: block;
  margin-bottom: 8px;
  color: #111;
  font-size: 1.05rem;
}

.planner-fish-tip-list {
  display: grid;
  gap: 8px;
}

.planner-fish-tip-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 2px solid rgba(36, 39, 49, .75);
  border-radius: 7px;
  background: rgba(255, 250, 240, .82);
  color: var(--ink);
}

.planner-fish-tip-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.planner-fish-tip-card p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.32;
}

.planner-fish-tip-card span {
  display: block;
  margin-bottom: 2px;
  font-weight: 900;
}

.planner-result-species {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  max-width: 100%;
  margin-top: 18px;
}

.planner-result-card {
  min-width: 0;
  aspect-ratio: 1;
  padding: 7px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #f5e6d4;
  cursor: pointer;
}

.planner-result-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.planner-reading > header,
.planner-reading > section {
  width: min(850px, 100%);
  margin-inline: auto;
}

.planner-breeding-info {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(91, 62, 39, .24);
}

.planner-reading > section {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 2px solid rgba(91, 62, 39, .38);
}

.planner-reading h2 {
  margin: 0 0 16px;
  color: #5b3e27;
  font-size: clamp(2.25rem, 6vw, 3.35rem);
  line-height: 1.05;
}

.planner-reading h3 {
  margin: 0 0 15px;
  color: #5b3e27;
  font-size: clamp(1.55rem, 3.5vw, 2rem);
  line-height: 1.15;
}

.planner-reading h4 {
  margin: 25px 0 7px;
  color: #6e4c30;
  font-size: 1.18rem;
  line-height: 1.2;
}

.planner-reading p {
  margin: 0 0 16px;
  color: #352a22;
  font-size: 1.05rem;
  font-weight: 620;
  line-height: 1.68;
}

.planner-reading header p {
  font-size: 1.1rem;
}

.about-sources ul {
  margin: 0;
  padding-left: 1.2rem;
}

.about-sources li {
  margin: 0 0 7px;
  font-size: .82rem;
  line-height: 1.45;
}

.about-sources a {
  overflow-wrap: anywhere;
}

.planner-time-block {
  margin-top: 30px;
}

.planner-time-block + .planner-time-block {
  padding-top: 26px;
  border-top: 1px solid rgba(91, 62, 39, .24);
}

.planner-time-block h4 {
  margin-top: 0;
  font-size: 1.35rem;
}

.planner-time-species {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 3px 0 8px;
  overflow: visible;
}

.planner-species-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 6px;
  border: 2px solid #6e4c30;
  border-radius: 6px;
  background: #f5e6d4;
  cursor: pointer;
}

.planner-species-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.planner-species-image:active {
  transform: translateY(2px);
}

@media (max-width: 600px) {
  .planner-builder {
    box-sizing: border-box;
    padding: 20px 14px 24px;
  }

  .planner-builder h2 {
    font-size: 1.85rem;
  }

  .planner-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .planner-mode-tabs button {
    min-height: 46px;
    padding: 8px 7px;
    font-size: .82rem;
    line-height: 1.15;
  }

  .planner-favorite-pool {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .planner-favorite-choice {
    flex: 0 0 104px;
    min-height: 124px;
    scroll-snap-align: start;
  }

  .planner-favorite-choice img {
    height: 78px;
  }

  .planner-favorite-advice {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .planner-recommended-item-pool {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .planner-recommended-item {
    flex: 0 0 102px;
    scroll-snap-align: start;
  }

  .planner-builder-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .planner-builder-fields select {
    min-height: 44px;
    font-size: .82rem;
  }

  .planner-item-pool {
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .planner-item-choice {
    flex-basis: 96px;
    grid-template-rows: 68px auto;
    min-height: 106px;
    font-size: .68rem;
  }

  .planner-item-choice img {
    height: 68px;
  }

  .planner-result-species {
    display: flex;
    gap: 9px;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .planner-result-card {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    scroll-snap-align: start;
  }

  .planner-area-preview,
  .planner-recommended-items {
    padding-inline: 12px;
  }

  .planner-nature-area-pool {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .planner-nature-area-card {
    flex: 0 0 170px;
    min-height: 94px;
    scroll-snap-align: start;
  }

  .planner-reading {
    padding: 26px 20px 34px;
  }

  .planner-reading > section {
    margin-top: 30px;
    padding-top: 28px;
  }

  .planner-reading p,
  .planner-reading header p {
    font-size: 1rem;
  }

  .planner-species-image {
    flex-basis: 86px;
    width: 86px;
    height: 86px;
  }
}

@media (max-width: 420px) {
  .planner-builder-fields {
    grid-template-columns: 1fr;
  }

  .planner-mode-tabs {
    grid-template-columns: 1fr;
  }
}

.placeholder-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 4px solid var(--line);
  border-radius: 8px;
  color: white;
  background: var(--theme-top);
  box-shadow: inset 0 -8px rgba(0, 0, 0, .16), 0 6px 0 rgba(23, 24, 29, .18);
  font-size: 2.3rem;
  font-weight: 950;
}

.about-page {
  min-height: 460px;
  overflow: hidden;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 253, 247, .98), rgba(251, 238, 236, .96));
  box-shadow: var(--shadow);
}

.about-page[hidden] {
  display: none;
}

.about-hero {
  padding: clamp(28px, 5vw, 54px) clamp(22px, 6vw, 72px);
  color: #fff;
  background:
    linear-gradient(115deg, rgba(112, 25, 31, .94), rgba(190, 57, 53, .78)),
    var(--theme-banner) center / cover;
}

.about-hero h2 {
  max-width: 900px;
  margin: 0 0 18px;
  font-size: clamp(1.55rem, 3.2vw, 2.55rem);
  line-height: 1.08;
}

.about-hero p:not(.kicker) {
  max-width: 860px;
  margin: 0 0 18px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 680;
  line-height: 1.55;
}

.about-flow {
  padding: 8px 0 22px;
}

.about-section {
  padding: 30px clamp(22px, 6vw, 72px);
  border-top: 1px solid rgba(39, 43, 54, .16);
  background: transparent;
}

.about-section h3 {
  max-width: 920px;
  margin: 6px 0 14px;
  font-size: clamp(1.16rem, 1.8vw, 1.5rem);
  line-height: 1.18;
}

.about-section p {
  max-width: 930px;
  margin: 0 0 12px;
  color: #3f474d;
  font-weight: 650;
  line-height: 1.58;
}

.about-section p:last-child {
  margin-bottom: 0;
}

.about-title-label {
  color: #a33338;
  font-size: .82em;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.about-hero .about-title-label {
  color: #ffe6df;
}

.about-score-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  max-width: 760px;
  margin: 16px 0;
}

.about-score-list span {
  padding: 7px 9px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: .82rem;
  font-weight: 850;
}

.about-score-list b {
  color: #348b5d;
  font-size: 1rem;
}

.about-mission {
  background: rgba(203, 117, 132, .16);
}

.about-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 188px);
  align-items: start;
  gap: 24px;
}

.about-profile img {
  width: 176px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  border: 4px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 0 rgba(23, 24, 29, .16);
}

.about-profile a {
  display: inline-block;
  margin-top: 4px;
  color: #8d292e;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.about-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.about-contact span {
  color: #8d292e;
  font-weight: 900;
}

.about-sources {
  padding-top: 22px;
}

.about-sources h3 {
  font-size: clamp(1.16rem, 1.8vw, 1.42rem);
}

@media (max-width: 700px) {
  .about-hero,
  .about-section {
    padding: 22px 18px;
  }

  .about-profile {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
  }

  .about-profile img {
    width: 128px;
  }
}

/* Profielkleur: Kleur 1 is de buitenwereld en collectie, Kleur 2 de panelen. */
body[data-page-theme="profile"] {
  background-color: var(--theme-page);
}

body[data-page-theme="profile"] .app-shell,
body[data-page-theme="profile"] .app-shell::before {
  background-color: var(--theme-page);
}

.profile-page.profile-page-customised {
  min-height: 100vh;
  background-color: var(--profile-page-accent, #ffffff);
}

.profile-page .profile-own-view {
  border-color: var(--profile-secondary);
  background: color-mix(in srgb, var(--profile-secondary) 20%, transparent);
}

.profile-page .profile-own-view .profile-header-card {
  background-color: color-mix(in srgb, var(--profile-primary) 63%, transparent);
}

.profile-page .profile-own-view .profile-collection-card,
.profile-page .profile-own-view .profile-showcase,
.profile-page .profile-own-view .profile-sticker-studio,
.profile-page .profile-own-view .profile-style-card {
  background-color: color-mix(in srgb, var(--profile-secondary) 63%, transparent);
}

.profile-page .profile-own-view .social-stat-grid span:nth-child(1),
.profile-page .profile-own-view .social-stat-grid span:nth-child(2) {
  border-color: var(--profile-primary);
  background: color-mix(in srgb, var(--profile-primary) 28%, #fff 72%);
}

.profile-page .profile-own-view .social-stat-grid span:nth-child(1) strong,
.profile-page .profile-own-view .social-stat-grid span:nth-child(2) strong {
  color: var(--ink);
}

.profile-page .profile-own-view .social-stat-grid span:nth-child(3),
.profile-page .profile-own-view .social-stat-grid span:nth-child(4) {
  border-color: var(--profile-secondary);
  background: color-mix(in srgb, var(--profile-secondary) 28%, #fff 72%);
}

.profile-page .profile-own-view .social-stat-grid span:nth-child(3) strong,
.profile-page .profile-own-view .social-stat-grid span:nth-child(4) strong {
  color: var(--ink);
}

.profile-page .profile-own-view .social-progress-track span { background: var(--profile-secondary); }

.profile-page .profile-sticker-canvas-row { align-items: flex-start; }
.profile-page .profile-sticker-actions { align-self: flex-start; margin-top: 4px; }
.profile-page .profile-sticker-studio,
.profile-page .profile-showcase { margin-bottom: 14px; }
.profile-page .profile-style-card { clear: both; }

/* Bediening en beloningen blijven altijd scherp leesbaar boven het transparante profiel. */
.profile-page .profile-sticker-actions,
.profile-page .profile-sticker-icon-button,
.profile-page .profile-showcase-group,
.profile-page .profile-showcase-group .social-badge,
.profile-page .profile-showcase-group .social-badge-mark,
.profile-page .profile-showcase-group strong {
  opacity: 1;
}

/* Zonder gekocht kader blijft de standaardrand rustig en functioneel. */
.profile-page .profile-own-view[data-profile-frame=""],
.profile-page .profile-own-view:not([data-profile-frame]) {
  border: 2px solid var(--profile-secondary);
  padding: 8px;
}

/* De profielkaart hoort bij Kleur 2, net als de overige ingevulde panelen. */
.profile-page .profile-own-view .profile-header-card,
.profile-page .profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-header-card {
  background-color: color-mix(in srgb, var(--profile-secondary) 63%, transparent);
}

/* Profile collection: keep all four summary tiles aligned, even after legacy tile rules. */
.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2) {
  display: flex !important;
  min-height: 94px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px !important;
  text-align: center;
}

.profile-page .social-stat-grid > span:nth-child(1) > strong,
.profile-page .social-stat-grid > span:nth-child(2) > strong {
  display: block !important;
  margin: 0 !important;
  color: inherit;
  font-size: clamp(.7rem, 1.25vw, .9rem) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  display: grid !important;
  min-height: 94px;
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 5px;
  padding: 8px 10px !important;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat > strong,
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  grid-row: 2;
  width: 100%;
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species,
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  grid-row: 1;
  align-self: stretch;
  min-height: 0 !important;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
  width: 62px !important;
  height: 58px !important;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 80px;
  grid-template-rows: 1fr;
  width: 100%;
  align-items: center;
  justify-content: normal;
  padding-right: 0;
  box-sizing: border-box;
  color: inherit;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  display: block !important;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0 !important;
  color: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: inherit !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: 80px !important;
  height: 62px !important;
  object-fit: contain;
}

/* Keep the habitat caption in the same rhythm as "Recent gevonden",
   while centering it only in the text area next to the island. */
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  width: calc(100% - 84px) !important;
  justify-self: start;
  text-align: center !important;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > span:nth-child(1),
  .profile-page .social-stat-grid > span:nth-child(2),
  .profile-page .social-stat-grid > .profile-recent-stat,
  .profile-page .social-stat-grid > .profile-habitat-stat {
    min-height: 82px;
    gap: 4px;
    padding: 7px !important;
  }

  .profile-page .social-stat-grid > span:nth-child(1) > strong,
  .profile-page .social-stat-grid > span:nth-child(2) > strong,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.08rem !important;
  }

  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
    width: 40px !important;
    height: 42px !important;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 55px;
    padding-right: 0;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 55px !important;
    height: 46px !important;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat > strong {
    width: calc(100% - 58px) !important;
  }
}

/* ECODEX startup screen */
.startup-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background-color: #174f38;
  background-image: url("assets/brand/loading-desktop-back.webp");
  background-position: center;
  background-size: cover;
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}

.startup-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 36, 25, .14);
  pointer-events: none;
}

.startup-color-sweep {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: url("assets/brand/loading-desktop-color.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(115deg,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,.08) 36%,
    rgba(0,0,0,.55) 44%,
    #000 50%,
    rgba(0,0,0,.55) 56%,
    rgba(0,0,0,.08) 64%,
    transparent 70%,
    transparent 100%);
  mask-image: linear-gradient(115deg,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,.08) 36%,
    rgba(0,0,0,.55) 44%,
    #000 50%,
    rgba(0,0,0,.55) 56%,
    rgba(0,0,0,.08) 64%,
    transparent 70%,
    transparent 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-position: 120% 50%;
  mask-position: 120% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  will-change: -webkit-mask-position, mask-position;
  animation: startup-background-shimmer 3.5s cubic-bezier(.35, 0, .65, 1) 0s both;
}

.startup-screen-hidden {
  visibility: hidden;
  opacity: 0;
}

.startup-brand {
  position: absolute;
  z-index: 2;
  top: 33%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: clamp(7px, 1.2vh, 16px);
  width: min(24rem, 40vw);
  transform: translate(-50%, -50%);
  color: #fff8df;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
}

.startup-logo-wrap {
  position: relative;
  width: min(16.6667vw, 280px);
  aspect-ratio: 1;
  overflow: hidden;
  opacity: 0;
  transform: scale(.72);
  animation: startup-logo-arrive .9s cubic-bezier(.18, .84, .28, 1.14) .12s forwards;
}

.startup-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.startup-logo-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .88;
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,.8));
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(115deg,
    transparent 0%,
    transparent 43%,
    rgba(0,0,0,.12) 46%,
    rgba(0,0,0,.62) 48.5%,
    #000 50%,
    rgba(0,0,0,.62) 51.5%,
    rgba(0,0,0,.12) 54%,
    transparent 57%,
    transparent 100%);
  mask-image: linear-gradient(115deg,
    transparent 0%,
    transparent 43%,
    rgba(0,0,0,.12) 46%,
    rgba(0,0,0,.62) 48.5%,
    #000 50%,
    rgba(0,0,0,.62) 51.5%,
    rgba(0,0,0,.12) 54%,
    transparent 57%,
    transparent 100%);
  -webkit-mask-size: 500% 100%;
  mask-size: 500% 100%;
  -webkit-mask-position: 130% 50%;
  mask-position: 130% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* A calm, fully visible sweep across the logo. */
  animation: startup-logo-shimmer 2.25s ease-in-out .55s both;
  pointer-events: none;
}

.startup-brand > strong {
  opacity: 0;
  font-size: clamp(1.7rem, 3vw, 3.4rem);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 3px 0 rgba(0,0,0,.32);
  animation: startup-title-arrive .55s ease .48s forwards;
}

.startup-progress-block {
  position: absolute;
  z-index: 2;
  top: 66%;
  left: 50%;
  width: min(520px, 62vw);
  transform: translate(-50%, -50%);
  color: #fff8df;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

.startup-progress-track {
  height: clamp(12px, 1.2vw, 18px);
  overflow: hidden;
  border: 3px solid #f5f0d8;
  border-radius: 999px;
  background: rgba(7, 37, 27, .74);
  box-shadow: 0 3px 0 rgba(0,0,0,.38), inset 0 0 0 2px rgba(0,0,0,.25);
}

.startup-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8bc34a, #fff176 55%, #f39a22);
  box-shadow: 0 0 12px rgba(255, 241, 118, .8);
  transition: width .16s ease-out;
}

.startup-progress-text {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: clamp(.88rem, 1.4vw, 1.15rem);
  font-weight: 900;
  letter-spacing: .03em;
}

@keyframes startup-logo-arrive {
  to { opacity: 1; transform: scale(1); }
}

@keyframes startup-logo-shimmer {
  from {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
  }
  to {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
  }
}

@keyframes startup-background-shimmer {
  from {
    -webkit-mask-position: 120% 50%;
    mask-position: 120% 50%;
  }
  to {
    -webkit-mask-position: -20% 50%;
    mask-position: -20% 50%;
  }
}

@keyframes startup-title-arrive {
  to { opacity: 1; }
}

@media (max-width: 700px), (orientation: portrait) {
  .startup-screen {
    background-image: url("assets/brand/loading-mobile-back.webp");
  }

  .startup-color-sweep {
    display: block;
    background-image: url("assets/brand/loading-mobile-color.webp");
    -webkit-mask-size: 210% 100%;
    mask-size: 210% 100%;
    animation-name: startup-background-shimmer-mobile;
  }

  .startup-logo-wrap {
    width: min(33.333vw, 190px);
  }

  .startup-logo-shine {
    animation-duration: 1.8s;
  }

  .startup-brand {
    width: 70vw;
  }

  .startup-progress-block {
    width: min(78vw, 420px);
  }
}

@keyframes startup-background-shimmer-mobile {
  from {
    -webkit-mask-position: 180% 50%;
    mask-position: 180% 50%;
  }
  to {
    -webkit-mask-position: -80% 50%;
    mask-position: -80% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .startup-logo-wrap,
  .startup-logo-shine,
  .startup-brand > strong {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}

@media (max-width: 600px) {
  .planner-time-species {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Profile background continuity: without a banner Colour 1 is one deep, uninterrupted page. */
body[data-page-theme="profile"]:not(.profile-page-has-custom-banner) .app-shell::before {
  height: 100%;
  min-height: 100vh;
  background-color: var(--theme-page);
  background-image: none;
}

.profile-page.profile-page-customised:not(.profile-page-has-banner) {
  background-color: transparent !important;
  background-image: none !important;
}


/* Profiel verfijning: de vier voortgangsvakken blijven een rustig, samenhangend geheel. */
.profile-page .profile-own-view .profile-habitat-stat .profile-favorite-habitat > span {
  font-size: clamp(1.08rem, 2.15vw, 1.35rem) !important;
}

.profile-page .profile-own-view #profileAchievementSummary,
.profile-page .profile-own-view .profile-status-chip#profileAchievementSummary {
  color: var(--ink) !important;
  border-color: var(--profile-primary) !important;
  background: color-mix(in srgb, var(--profile-primary) 72%, #fff 28%) !important;
}

.profile-page .profile-own-view #socialBadgesSummary {
  color: var(--ink) !important;
  border-color: var(--profile-primary) !important;
  background: var(--profile-primary) !important;
}

/* Dynamische kleur 1 kan zeer donker worden; houd de informatiedragers altijd leesbaar. */
.profile-page .profile-own-view[data-dynamic-primary]:not([data-dynamic-primary=""]) #profileAchievementSummary,
.profile-page .profile-own-view[data-dynamic-primary]:not([data-dynamic-primary=""]) #socialBadgesSummary,
.profile-page .profile-own-view[data-dynamic-primary]:not([data-dynamic-primary=""]) .profile-status-chip {
  color: #111820 !important;
  border-color: color-mix(in srgb, var(--profile-primary) 70%, #202932 30%) !important;
  background: color-mix(in srgb, var(--profile-primary) 20%, #fff 80%) !important;
  text-shadow: none !important;
}

.profile-page .profile-own-view .social-progress-track span {
  background: var(--profile-primary) !important;
}

/* In de neutrale stijl markeert kleur 1 de bovenrand van ieder profielpaneel. */
.profile-page .profile-own-view[data-profile-frame=""] .profile-header-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-collection-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-showcase,
.profile-page .profile-own-view[data-profile-frame=""] .profile-sticker-studio,
.profile-page .profile-own-view[data-profile-frame=""] .profile-style-card {
  border-top-color: var(--profile-primary) !important;
}

.profile-page .social-badge-grid .social-badge-mark {
  width: 76px;
  height: 76px;
}

.profile-page .social-badge-grid .social-badge {
  min-width: 108px;
}

.profile-page .social-medal-grid .social-skill-medal .social-badge-mark {
  width: 64px;
  height: 64px;
}

.profile-style-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Elke kaderkeuze toont nu de eigen randkleuren in plaats van dezelfde neutrale miniatuur. */
.profile-style-choice--profielkader .profile-style-swatch {
  border: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 0 0 1px rgba(28, 35, 40, .2);
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .profile-habitat-stat .profile-favorite-habitat > span { font-size: .98rem !important; }
  .profile-page .social-badge-grid .social-badge-mark { width: 66px; height: 66px; }
  .profile-page .social-medal-grid .social-skill-medal .social-badge-mark { width: 56px; height: 56px; }
  .profile-style-actions { justify-content: stretch; }
  .profile-style-actions .secondary-button { flex: 1 1 130px; }
}

/* Final profile collection override: favourite habitat name stays quieter than stat numbers. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 8px !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-family: inherit !important;
  font-size: clamp(.92rem, 1.2vw, 1.18rem) !important;
  font-weight: 1000 !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  width: 54px !important;
  height: 46px !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: .86rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 44px !important;
    height: 38px !important;
  }
}

/* Absolute final profile polish. */
.profile-page .profile-own-view[data-profile-frame=""] .profile-header-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-collection-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-showcase,
.profile-page .profile-own-view[data-profile-frame=""] .profile-sticker-studio,
.profile-page .profile-own-view[data-profile-frame=""] .profile-style-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-header-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-collection-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-showcase,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-sticker-studio,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-style-card {
  border-top-color: var(--theme-top) !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-size: clamp(.8rem, 1vw, 1rem) !important;
  line-height: .96 !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  max-width: 9ch !important;
}

/* FINAL: favourite habitat is a plain stat tile, identical to ECOSCORE/species. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  gap: 7px !important;
  padding: 10px !important;
  overflow: hidden !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: static !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img,
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > img {
  display: none !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    gap: 5px !important;
    padding: 8px 6px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    font-size: .7rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    font-size: .58rem !important;
  }
}

/* Terminal background override: Colour 1 never stops after one viewport. */
body[data-page-theme="profile"]:not(.profile-page-has-custom-banner) .app-shell::before {
  height: 100% !important;
  min-height: 100vh;
  background-color: var(--theme-page) !important;
  background-image: none !important;
}

.profile-page.profile-page-customised:not(.profile-page-has-banner) {
  background-color: transparent !important;
  background-image: none !important;
}

/* FINAL: 1500-Ecobit gemstone frames stay continuous on every profile panel. */
.profile-page .profile-own-view:is(
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"],
  [data-profile-frame="waterlijn-frame"],
  [data-profile-frame="rode-diamant-frame"],
  [data-profile-frame="kristal-frame"]
) :is(
  .profile-header-card,
  .profile-collection-card,
  .profile-showcase,
  .profile-sticker-studio,
  .profile-style-card
) {
  border-style: solid !important;
  border-width: 11px !important;
  border-color: transparent !important;
  border-image-source: var(--profile-frame-gradient) !important;
  border-image-slice: 1 !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
}

/* Favourite habitat is a plain statistic, matching ECOSCORE and species progress. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  gap: 7px !important;
  padding: 10px !important;
  overflow: hidden !important;
  text-align: center !important;
  border-color: var(--profile-secondary) !important;
  background: color-mix(in srgb, var(--profile-secondary) 28%, #fff 72%) !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: static !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  display: none !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    gap: 5px !important;
    padding: 8px 6px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    font-size: 1.08rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    font-size: .58rem !important;
  }
}

.repeatable-loop-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 3px solid var(--line);
  border-top: 8px solid #1f6f4a;
  border-radius: 8px;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 5px 0 rgba(23, 24, 29, .16);
}

.repeatable-loop-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.repeatable-loop-heading span {
  display: block;
  color: #1d5f9a;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.repeatable-loop-heading strong {
  display: block;
  margin-top: 3px;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.repeatable-loop-heading p {
  max-width: 420px;
  margin: 0;
  color: #52606b;
  font-weight: 800;
  line-height: 1.35;
}

.repeatable-loop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.repeatable-loop-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 3px solid var(--line);
  border-radius: 7px;
  background: #f4f8f1;
  box-shadow: 0 3px 0 rgba(23, 24, 29, .16);
}

.repeatable-loop-card.claimable {
  background: #e8f7dc;
  border-color: #1f6f4a;
}

.repeatable-loop-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.repeatable-loop-kicker {
  display: block;
  color: #1f6f4a;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.repeatable-loop-card h4 {
  margin: 2px 0 0;
  font-size: 1.05rem;
}

.repeatable-loop-reward {
  white-space: nowrap;
  padding: 5px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff7ba;
  color: #14532d;
  font-size: .78rem;
  font-weight: 900;
}

.repeatable-loop-card p {
  margin: 0;
  color: #394651;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.35;
}

.repeatable-loop-progress {
  height: 13px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #e4ebee;
}

.repeatable-loop-progress span {
  display: block;
  height: 100%;
  background: #2f935d;
  transition: width .25s ease;
}

.repeatable-loop-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #52606b;
  font-size: .78rem;
  font-weight: 900;
}

.repeatable-loop-options {
  color: #6b4a20;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.35;
}

.repeatable-loop-claim {
  justify-self: start;
  min-height: 38px;
  padding: 7px 13px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: #2f935d;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 3px 0 #1f2733;
}

.repeatable-loop-claim:disabled {
  background: #dce2e6;
  color: #60707a;
  box-shadow: none;
  cursor: default;
}

@media (max-width: 900px) {
  .repeatable-loop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .repeatable-loop-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .repeatable-loop-grid {
    grid-template-columns: 1fr;
  }
}

/* Profile final polish: neutral theme top accents match the grey title bar. */
.profile-page .profile-own-view[data-profile-frame=""] .profile-header-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-collection-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-showcase,
.profile-page .profile-own-view[data-profile-frame=""] .profile-sticker-studio,
.profile-page .profile-own-view[data-profile-frame=""] .profile-style-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-header-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-collection-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-showcase,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-sticker-studio,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-style-card {
  border-top-color: var(--theme-top) !important;
}

/* Keep the favourite habitat value readable without overpowering the stat tiles. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-size: clamp(.82rem, 1.05vw, 1.04rem) !important;
  line-height: .96 !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  max-width: 9ch;
}

/* Profile collection: keep the favourite habitat name quieter than the stat numbers. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 8px !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-family: inherit !important;
  font-size: clamp(.92rem, 1.2vw, 1.18rem) !important;
  font-weight: 1000 !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  width: 54px !important;
  height: 46px !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: .86rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 44px !important;
    height: 38px !important;
  }
}

/* Final profile habitat tile: exactly the same compact stat-card structure. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  gap: 7px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-color: var(--profile-secondary) !important;
  background: color-mix(in srgb, var(--profile-secondary) 28%, #fff 72%) !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  grid-template-rows: 1fr !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  position: static !important;
  display: grid !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  transform: none !important;
  color: var(--ink) !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  width: 62px !important;
  height: 52px !important;
  object-fit: contain !important;
  transform: none !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    padding: 7px !important;
    gap: 4px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 50px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.08rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 50px !important;
    height: 42px !important;
  }
}

/* Profile: the favourite habitat uses the exact compact stat-card rhythm
   used by ECOSCORE and SOORTEN, with its island as a small right decoration. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  gap: 5px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 68px !important;
  grid-template-rows: 1fr !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  position: static !important;
  display: grid !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  transform: none !important;
  color: var(--ink) !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  width: 66px !important;
  height: 56px !important;
  object-fit: contain !important;
  transform: none !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    padding: 7px !important;
    gap: 4px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.08rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 50px !important;
    height: 43px !important;
  }
}

/* Final habitat tile: keep its name and caption on the same rhythm as Recent found. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 20px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 8px 10px !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 86px 0 0 !important;
  box-sizing: border-box !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-height: 62px !important;
  margin: 0 !important;
  place-items: center;
  transform: none !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: absolute !important;
  top: 50% !important;
  right: 2px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 84px !important;
  height: 66px !important;
  object-fit: contain;
}

/* This is intentionally the same caption treatment as .profile-recent-stat > strong. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  grid-row: 2 !important;
  width: calc(100% - 90px) !important;
  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  color: inherit !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-align: center !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    gap: 4px !important;
    padding: 7px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    padding-right: 60px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.08rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 58px !important;
    height: 48px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    width: calc(100% - 64px) !important;
  }
}

/* Keep the four collection tiles on one compact, fixed rhythm on wider screens. */
@media (min-width: 621px) {
  .profile-page .profile-own-view .social-stat-grid > span:nth-child(1),
  .profile-page .profile-own-view .social-stat-grid > span:nth-child(2),
  .profile-page .profile-own-view .social-stat-grid > .profile-recent-stat,
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    overflow: hidden;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-recent-stat,
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    position: relative;
    display: block !important;
    padding: 0 !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-recent-stat > strong,
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 1;
    font-size: .72rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-recent-stat .profile-recent-species,
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    position: absolute;
    top: 6px;
    right: 8px;
    bottom: 26px;
    left: 8px;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    display: block !important;
    top: 7px;
    bottom: 25px;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    position: absolute;
    top: 0;
    right: 66px;
    bottom: 0;
    left: 0;
    display: grid !important;
    place-items: center;
    /* Match the score tiles vertically; nudge left to balance the island on the right. */
    transform: translateX(-12px) !important;
    font-size: 1.55rem !important;
    text-align: center !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    position: absolute !important;
    top: -3px;
    right: 0;
    bottom: auto;
    width: 66px !important;
    height: 58px !important;
  }
}

/* Habitat tile: a simple left name / right island composition inside one tile. */
@media (min-width: 621px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    top: 6px !important;
    right: 9px !important;
    bottom: 25px !important;
    left: 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    align-items: center !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    position: static !important;
    grid-column: 1;
    display: grid !important;
    place-items: center;
    transform: none !important;
    color: #101827 !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    position: static !important;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    width: 70px !important;
    height: 58px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    right: 85px;
    bottom: 7px;
    left: 9px;
    color: #101827 !important;
    text-align: center !important;
  }
}

/* Profile collection: make the habitat tile a proper name-and-island card. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding: 10px 14px !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  width: 100% !important;
  min-height: 76px !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  grid-column: 1;
  width: 100% !important;
  display: block !important;
  transform: none !important;
  text-align: center !important;
  font-size: clamp(1.5rem, 3vw, 2.15rem) !important;
  line-height: 1 !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 2;
  justify-self: end !important;
  width: 112px !important;
  height: 86px !important;
  object-fit: contain;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  grid-row: 2;
  align-self: end;
  font-size: .78rem !important;
  letter-spacing: .015em;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    padding: 7px 8px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 60px !important;
    min-height: 52px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.12rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 60px !important;
    height: 50px !important;
  }
}

/* Exact horizontal alignment for the profile collection values. */
.profile-page .social-stat-grid > span:nth-child(1) > strong,
.profile-page .social-stat-grid > span:nth-child(2) > strong {
  align-self: center !important;
  width: 100%;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-size: 1.8rem !important;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.2rem !important;
  }
}

/* Strikte centrering van de profielvoortgang - overschrijft oude gridregels. */
.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2) {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.profile-page .social-stat-grid > span:nth-child(1) > strong,
.profile-page .social-stat-grid > span:nth-child(2) > strong {
  align-self: auto;
  margin: 0;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem);
  line-height: 1;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000;
  line-height: 1;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  display: grid;
  place-items: center;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > span:nth-child(1),
  .profile-page .social-stat-grid > span:nth-child(2) {
    min-height: 80px;
    gap: 4px;
  }
  .profile-page .social-stat-grid > span:nth-child(1) > strong,
  .profile-page .social-stat-grid > span:nth-child(2) > strong,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.2rem !important;
  }
}

/* Laatste uitlijning van de vier profielstatistieken. */
.profile-page .social-stat-grid > span {
  min-height: 92px;
}

.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2) {
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat > strong,
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  order: 2;
  width: 100%;
  font-size: .8rem;
  line-height: 1.1;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  order: 1;
  min-height: 65px;
  overflow: hidden;
  justify-content: space-around;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species img {
  transform: scale(1.18);
  transform-origin: 50% 100%;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: relative;
  order: 1;
  display: flex;
  width: 100%;
  min-height: 65px;
  justify-content: center;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem);
  text-align: center;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  width: calc(100% - 92px);
  margin-right: 92px;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 92px;
  height: 70px;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > span { min-height: 80px; }
  .profile-page .social-stat-grid > span:nth-child(1) > strong,
  .profile-page .social-stat-grid > span:nth-child(2) > strong { font-size: 1.2rem; }
  .profile-page .social-stat-grid > .profile-recent-stat > strong,
  .profile-page .social-stat-grid > .profile-habitat-stat > strong { font-size: .72rem; }
  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species { min-height: 50px; }
  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species img { transform: scale(1.14); }
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    min-height: 50px;
    font-size: 1.2rem;
  }
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    width: calc(100% - 70px);
    margin-right: 70px;
  }
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 70px;
    height: 54px;
  }
}

/* Profielsamenvatting: beeld eerst, label eronder. Geen tweede kaart binnen de stat-cel. */
.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  min-height: 0;
  padding: 6px;
  gap: 3px;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  order: 1;
  width: 100%;
  min-height: 68px;
  justify-content: space-around;
  gap: 3px;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
  flex: 0 1 66px;
  width: 66px;
  height: 68px;
}

.profile-page .social-stat-grid > .profile-recent-stat > strong,
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  order: 2;
  width: 100%;
  font-size: .78rem;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  order: 1;
  width: 100%;
  min-height: 68px;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 8px;
  font-size: 1.05rem;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  width: 82px;
  height: 68px;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > .profile-recent-stat,
  .profile-page .social-stat-grid > .profile-habitat-stat { min-height: 0; }

  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
    min-height: 52px;
  }

  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
    flex-basis: 48px;
    width: 48px;
    height: 52px;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    min-height: 52px;
    font-size: .9rem;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 62px;
    height: 52px;
  }
}

/* De vier voortgangsvakken delen dezelfde rustige hiërarchie. */
.profile-page .social-stat-grid > span {
  min-height: 92px;
}

.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2) {
  grid-template-rows: 1fr auto;
  align-content: stretch;
}

.profile-page .social-stat-grid > span:nth-child(1) > strong,
.profile-page .social-stat-grid > span:nth-child(2) > strong {
  align-self: start;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem);
}

.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2),
.profile-page .social-stat-grid > .profile-recent-stat > strong,
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  font-size: .8rem;
  line-height: 1.1;
}

.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  justify-content: space-between;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  min-height: 65px;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  min-height: 65px;
  font-size: 1.25rem;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  width: 92px;
  height: 70px;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > span { min-height: 80px; }
  .profile-page .social-stat-grid > span:nth-child(1) > strong,
  .profile-page .social-stat-grid > span:nth-child(2) > strong { font-size: 1.2rem; }
  .profile-page .social-stat-grid > span:nth-child(1),
  .profile-page .social-stat-grid > span:nth-child(2),
  .profile-page .social-stat-grid > .profile-recent-stat > strong,
  .profile-page .social-stat-grid > .profile-habitat-stat > strong { font-size: .72rem; }
  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species { min-height: 50px; }
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    min-height: 50px;
    font-size: 1rem;
  }
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 70px;
    height: 54px;
  }
}

/* Gecentreerde, gelijkwaardige inhoud in alle vier de profielvakken. */
.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2) {
  justify-items: center;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  align-items: center;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  overflow: hidden;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species img {
  transform: scale(1.18);
  transform-origin: 50% 100%;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem);
  text-align: center;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  width: 100%;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species img { transform: scale(1.14); }
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat { font-size: 1.2rem; }
}

/* Profieloverzicht: alleen publieke voortgang, recente vondsten en leefgebied. */
.profile-page .social-stat-grid .profile-recent-stat,
.profile-page .social-stat-grid .profile-habitat-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
}

.profile-page .social-stat-grid .profile-recent-stat > strong,
.profile-page .social-stat-grid .profile-habitat-stat > strong {
  overflow: visible;
  font-size: .7rem;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
}

.profile-page .social-stat-grid .profile-recent-species {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-page .profile-recent-species button {
  display: grid;
  width: 34px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.profile-page .profile-recent-species img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.profile-page .profile-recent-species small {
  font-size: .72rem;
  line-height: 1.15;
  text-transform: none;
}

.profile-page .social-stat-grid .profile-favorite-habitat {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 7px;
  margin: 0;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-page .social-stat-grid .profile-favorite-habitat > span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-page .profile-favorite-habitat img {
  width: 46px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Alleen de vier hoofdcellen krijgen het stat-kaartkader; inhoud blijft los. */
.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  border-width: 2px;
  padding: 7px;
  gap: 4px;
}

/* Recente soorten en leefgebied horen in hun hoofdcellen, zonder extra kaartje. */
.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species,
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  order: 1;
  width: 100%;
  min-height: 64px;
  justify-content: space-around;
  gap: 2px;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
  width: 62px;
  height: 64px;
}

.profile-page .social-stat-grid > .profile-recent-stat > strong,
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  order: 2;
  width: 100%;
  font-size: .78rem;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  order: 1;
  width: 100%;
  min-height: 64px;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 8px;
  font-size: 1.05rem;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  width: 78px;
  height: 64px;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid .profile-recent-stat,
  .profile-page .social-stat-grid .profile-habitat-stat { min-height: 82px; }
  .profile-page .profile-recent-species button { width: 30px; height: 36px; }
  .profile-page .profile-favorite-habitat img { width: 40px; height: 36px; }
}

/* Prestaties */
.achievements-page {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(235, 245, 252, .96);
  box-shadow: var(--shadow);
}

.achievements-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 4vw, 34px);
  border: 3px solid var(--line);
  border-top: 10px solid #173f70;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(8, 31, 64, .97), rgba(27, 85, 139, .92)),
    var(--theme-banner) center / cover;
}

.achievements-hero .kicker {
  color: #9ee7ff;
}

.achievements-hero h2 {
  margin: 3px 0 7px;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: .95;
}

.achievements-hero p:last-child {
  max-width: 620px;
  margin: 0;
  font-weight: 750;
  line-height: 1.45;
}

.achievement-wallet {
  display: grid;
  justify-items: center;
  flex: 0 0 auto;
  min-width: 160px;
  padding: 14px 16px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(8, 25, 52, .48);
}

.achievement-wallet span,
.achievement-wallet small {
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.achievement-wallet span {
  color: #1d5f9a;
}

.achievement-wallet strong {
  color: #173f70;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.achievement-wallet small {
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.achievement-level-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
  padding: clamp(18px, 3vw, 26px);
  border: 3px solid var(--line);
  border-top: 9px solid #2a78ba;
  border-radius: 8px;
  background: #fffdf7;
}

.achievement-level-copy h3 {
  margin: 3px 0 5px;
  color: #173f70;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
}

.achievement-level-copy p:last-child,
.achievement-level-next {
  margin: 0;
  color: #4e5964;
  font-weight: 720;
}

.achievement-level-score {
  display: grid;
  align-content: center;
  justify-items: end;
}

.achievement-level-score span {
  color: #1d5f9a;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .06em;
}

.achievement-level-score strong {
  color: #173f70;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
}

.achievement-level-progress {
  grid-column: 1 / -1;
  height: 18px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #dce9f3;
}

#achievementLevelFill {
  width: 0;
  height: 100%;
  border-right: 2px solid rgba(255, 255, 255, .7);
  background: linear-gradient(90deg, #39c6e9, #2a78ba 62%, #173f70);
  transition: width .35s ease;
}

.achievement-level-next {
  grid-column: 1 / -1;
  font-size: .9rem;
}

.achievement-section {
  display: grid;
  gap: 14px;
}

.achievement-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
}

.achievement-section-header .kicker {
  color: #1d5f9a;
}

.achievement-section-header h3 {
  margin: 2px 0 0;
  color: #173f70;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
}

.achievement-count,
.active-title-chip {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  color: #173f70;
  font-size: .78rem;
  font-weight: 900;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 12px;
}

.achievement-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  min-height: 182px;
  padding: 14px;
  border: 3px solid var(--line);
  border-top: 8px solid #7696b2;
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(23, 24, 29, .16);
}

.achievement-card.unlocked {
  border-top-color: #31a7d2;
  background: linear-gradient(150deg, #fffdf7 58%, #e4f8ff);
}

.achievement-card.locked {
  color: #6b717b;
  background: #f1f4f5;
}

.achievement-card.gilded,
.achievement-card.gilded.locked,
.achievement-card.gilded.unlocked {
  border-color: #9a6505;
  border-top-color: #edbd32;
  background: linear-gradient(145deg, #fffdf5 42%, #f7e3a0 100%);
  box-shadow: 0 5px 0 rgba(95, 55, 0, .25), inset 0 0 0 2px rgba(255, 225, 116, .42);
}

.achievement-card.gilded .achievement-progress-track span {
  background: linear-gradient(90deg, #a86c08, #edbd32);
}

.achievement-card.gilded .achievement-reward {
  color: #5d3700;
  background: #ffe68b;
  border-color: #8c5a08;
}

.achievement-emblem {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: #173f70;
  box-shadow: inset 0 -4px rgba(0, 0, 0, .2);
  font-size: 1.35rem;
  font-weight: 950;
}

.achievement-card.unlocked .achievement-emblem {
  color: #173f70;
  background: #76dcf0;
}

.achievement-emblem.achievement-badge-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.achievement-badge-trigger {
  display: block;
  align-self: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
}

.achievement-badge-trigger:focus-visible {
  outline: 3px solid #2a78ba;
  outline-offset: 3px;
}

.achievement-badge-preview {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  background: rgba(20, 29, 38, .72);
  transition: opacity .16s ease;
}

.achievement-badge-preview.is-open {
  opacity: 1;
  pointer-events: auto;
}

.achievement-badge-preview-panel {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(390px, 100%);
  padding: 28px 28px 24px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .28);
  text-align: center;
}

.achievement-badge-preview-panel img {
  width: min(250px, 68vw);
  height: min(250px, 68vw);
  object-fit: contain;
  image-rendering: pixelated;
}

.achievement-badge-preview-panel h3 {
  margin: 10px 0 4px;
  font-size: 1.3rem;
}

.achievement-badge-preview-panel p {
  margin: 0;
  color: #4e5964;
  font-weight: 700;
  line-height: 1.45;
}

.achievement-badge-preview-close {
  position: absolute;
  top: 8px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fffdf7;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.achievement-card h4 {
  align-self: center;
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.05;
}

.achievement-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #4e5964;
  font-size: .87rem;
  font-weight: 690;
  line-height: 1.42;
}

.achievement-progress-copy {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #4e5964;
  font-size: .76rem;
  font-weight: 900;
}

.achievement-progress-track {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #e3e9ed;
}

.achievement-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: #2a78ba;
}

.achievement-reward {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 4px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: #173f70;
  background: #a9e9f4;
  font-size: .75rem;
  font-weight: 950;
}

.title-grid,
.unlockable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.title-card,
.unlockable-card {
  display: grid;
  gap: 9px;
  min-height: 188px;
  padding: 15px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(23, 24, 29, .14);
}

.title-card.locked,
.unlockable-card.locked {
  color: #6d747b;
  background: #edf0f1;
}

.title-card.active {
  border-top: 8px solid #2a78ba;
  background: linear-gradient(145deg, #fffdf7, #dff6fb);
}

.title-card h4,
.unlockable-card h4 {
  margin: 0;
  color: #173f70;
  font-size: 1.14rem;
  line-height: 1.05;
}

.title-card p,
.unlockable-card p {
  margin: 0;
  color: #4e5964;
  font-size: .84rem;
  font-weight: 680;
  line-height: 1.4;
}

.title-card .title-status,
.unlockable-cost {
  color: #1d5f9a;
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.title-card button,
.unlockable-card button {
  min-height: 38px;
  margin-top: auto;
  padding: 7px 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: #fff;
  background: #173f70;
  box-shadow: 0 3px 0 rgba(23, 24, 29, .32);
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
}

.title-card button:disabled,
.unlockable-card button:disabled {
  color: #747b83;
  background: #dce2e6;
  box-shadow: none;
  cursor: default;
}

.unlockable-card.owned {
  border-top: 8px solid #2a78ba;
  background: linear-gradient(145deg, #fffdf7, #e0f6fb);
}

.unlockable-symbol {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: #173f70;
  background: #9ee7ff;
  font-size: 1.35rem;
  font-weight: 950;
}

.unlockable-rarity {
  display: block;
  margin-top: -2px;
  padding: 0;
  border: 0;
  color: #315f83;
  background: transparent;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}

.unlockable-preview {
  display: block;
  width: 100%;
  height: 92px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background-position: center;
  background-size: cover;
}

.unlockable-banner-preview-pending {
  background:
    linear-gradient(150deg, transparent 0 52%, rgba(48, 92, 67, .28) 53% 68%, rgba(35, 76, 53, .5) 69% 100%),
    linear-gradient(180deg, #dcecf4 0 54%, #d8e7dc 55% 100%);
}

.unlockable-sticker-preview {
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: 5px;
  background: linear-gradient(135deg, #edf6ed, #d3e8d5);
  background-size: auto;
}

.unlockable-sticker-preview img {
  display: block;
  width: min(104px, 90%);
  height: min(104px, 90%);
  object-fit: contain;
  image-rendering: pixelated;
}

.unlockable-colour-preview {
  background: linear-gradient(135deg, color-mix(in srgb, var(--preview-colour) 25%, #fffdf7), var(--preview-colour));
}

.dynamic-colour-preview,
.dynamic-colour-choice .profile-style-swatch {
  background-size: 300% 300% !important;
  animation: dynamic-colour-preview-shift 7s ease-in-out infinite;
}

@keyframes dynamic-colour-preview-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@property --profile-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --profile-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

.profile-own-view[data-dynamic-theme="bosadem-theme"], body[data-dynamic-page-theme="bosadem-theme"] { --dynamic-a: #d9342b; --dynamic-b: #ed7b24; --dynamic-c: #edc52c; --dynamic-d: #4aa94b; --dynamic-e: #28a9b5; --dynamic-f: #2f6bc2; --dynamic-g: #7650a7; }
.profile-own-view[data-dynamic-theme="getijdenstroom-theme"], body[data-dynamic-page-theme="getijdenstroom-theme"] { --dynamic-a: #123965; --dynamic-b: #17629a; --dynamic-c: #58aee0; --dynamic-d: #38c4c7; --dynamic-e: #4eb58f; --dynamic-f: #17629a; --dynamic-g: #123965; }
.profile-own-view[data-dynamic-theme="noordergloed-theme"], body[data-dynamic-page-theme="noordergloed-theme"] { --dynamic-a: #142b59; --dynamic-b: #553a92; --dynamic-c: #7650a7; --dynamic-d: #35a98c; --dynamic-e: #83d39f; --dynamic-f: #3f6b9b; --dynamic-g: #142b59; }
.profile-own-view[data-dynamic-theme="gouden-uur-theme"], body[data-dynamic-page-theme="gouden-uur-theme"] { --dynamic-a: #c94f47; --dynamic-b: #e46f78; --dynamic-c: #f29aad; --dynamic-d: #e8b73f; --dynamic-e: #fff8dc; --dynamic-f: #f2cd6b; --dynamic-g: #c94f47; }
.profile-own-view[data-dynamic-theme="nachtvlinder-theme"], body[data-dynamic-page-theme="nachtvlinder-theme"] { --dynamic-a: #a75d08; --dynamic-b: #d98513; --dynamic-c: #f0b62f; --dynamic-d: #17140f; --dynamic-e: #050505; --dynamic-f: #c9780e; --dynamic-g: #a75d08; }

.profile-own-view[data-dynamic-theme]:not([data-dynamic-theme=""]) {
  animation: profile-dynamic-colours 9s ease-in-out infinite;
}

@keyframes profile-dynamic-colours {
  0%, 100% { --profile-primary: var(--dynamic-a); --profile-secondary: var(--dynamic-b); }
  16% { --profile-primary: var(--dynamic-b); --profile-secondary: var(--dynamic-c); }
  33% { --profile-primary: var(--dynamic-c); --profile-secondary: var(--dynamic-d); }
  50% { --profile-primary: var(--dynamic-d); --profile-secondary: var(--dynamic-e); }
  66% { --profile-primary: var(--dynamic-e); --profile-secondary: var(--dynamic-f); }
  83% { --profile-primary: var(--dynamic-f); --profile-secondary: var(--dynamic-g); }
}

@property --theme-page { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --theme-top { syntax: "<color>"; inherits: true; initial-value: #6d747a; }
@property --theme-bottom { syntax: "<color>"; inherits: true; initial-value: #4c5359; }

body[data-dynamic-page-theme]:not([data-dynamic-page-theme=""]) {
  animation: profile-page-dynamic-colours 9s ease-in-out infinite;
}

@keyframes profile-page-dynamic-colours {
  0%, 100% { --theme-page: color-mix(in srgb, var(--dynamic-a) 34%, white); --theme-top: var(--dynamic-a); --theme-bottom: var(--dynamic-b); }
  16% { --theme-page: color-mix(in srgb, var(--dynamic-b) 34%, white); --theme-top: var(--dynamic-b); --theme-bottom: var(--dynamic-c); }
  33% { --theme-page: color-mix(in srgb, var(--dynamic-c) 34%, white); --theme-top: var(--dynamic-c); --theme-bottom: var(--dynamic-d); }
  50% { --theme-page: color-mix(in srgb, var(--dynamic-d) 34%, white); --theme-top: var(--dynamic-d); --theme-bottom: var(--dynamic-e); }
  66% { --theme-page: color-mix(in srgb, var(--dynamic-e) 34%, white); --theme-top: var(--dynamic-e); --theme-bottom: var(--dynamic-f); }
  83% { --theme-page: color-mix(in srgb, var(--dynamic-f) 34%, white); --theme-top: var(--dynamic-f); --theme-bottom: var(--dynamic-g); }
}

body[data-dynamic-page-theme="nachtvlinder-theme"] {
  background:
    linear-gradient(90deg, transparent 20%, rgba(0,0,0,.72) 46%, transparent 72%) 0 0 / 300% 100%,
    linear-gradient(135deg, var(--theme-bg-a), transparent 42%),
    linear-gradient(315deg, var(--theme-bg-b), transparent 38%),
    var(--theme-page);
  animation: profile-page-dynamic-colours 9s ease-in-out infinite, solar-eclipse-shadow 7s linear infinite;
}

@keyframes solar-eclipse-shadow {
  from { background-position: 100% 0, 0 0, 0 0, 0 0; }
  to { background-position: -50% 0, 0 0, 0 0, 0 0; }
}

/* Every premium colour is its own phenomenon, with separate Colour 1 and Colour 2 behaviour. */
.profile-own-view[data-dynamic-theme="bosadem-theme"] { animation: rainbow-profile 12s ease-in-out infinite alternate; }
.profile-own-view[data-dynamic-theme="getijdenstroom-theme"] { animation: tides-profile 11s ease-in-out infinite alternate; }
.profile-own-view[data-dynamic-theme="noordergloed-theme"] { animation: aurora-profile 13s ease-in-out infinite alternate; }
.profile-own-view[data-dynamic-theme="gouden-uur-theme"] { animation: lunar-profile 20s ease-in-out infinite; }
.profile-own-view[data-dynamic-theme="nachtvlinder-theme"] { animation: solar-profile 20s linear infinite; }

@keyframes rainbow-profile {
  0% { --profile-primary: #ed2d32; --profile-secondary: #ff9da1; }
  18% { --profile-primary: #f06a22; --profile-secondary: #ffc08f; }
  36% { --profile-primary: #f2cf24; --profile-secondary: #fff09a; }
  54% { --profile-primary: #35b45a; --profile-secondary: #9ce7ac; }
  72% { --profile-primary: #258ad5; --profile-secondary: #9ed5f5; }
  86% { --profile-primary: #4e59c5; --profile-secondary: #b8bdf2; }
  100% { --profile-primary: #8a3fbd; --profile-secondary: #d5a9ed; }
}

@keyframes tides-profile {
  0% { --profile-primary: #0b3264; --profile-secondary: #b5f0df; }
  33% { --profile-primary: #176ead; --profile-secondary: #8bdfdf; }
  66% { --profile-primary: #55b9e8; --profile-secondary: #9fd4f1; }
  100% { --profile-primary: #20b9a5; --profile-secondary: #a8bddf; }
}

@keyframes aurora-profile {
  0% { --profile-primary: #10264f; --profile-secondary: #b6f5d7; }
  32% { --profile-primary: #433584; --profile-secondary: #7fe4bf; }
  64% { --profile-primary: #7645a1; --profile-secondary: #c5f5dd; }
  100% { --profile-primary: #1aa47f; --profile-secondary: #8ad8bd; }
}

@keyframes lunar-profile {
  0%, 100% { --profile-primary: #d5ad37; --profile-secondary: #fff3b0; }
}

@keyframes solar-profile {
  0%, 100% { --profile-primary: #b86600; --profile-secondary: #ffd76b; }
}

/* Independent animations: a profile can combine any dynamic Colour 1 with any Colour 2. */
@keyframes rainbow-primary {
  0% { --profile-primary: #970016; } 18% { --profile-primary: #c93200; } 36% { --profile-primary: #b88e00; }
  54% { --profile-primary: #006e2e; } 72% { --profile-primary: #004a96; } 86% { --profile-primary: #292785; } 100% { --profile-primary: #571078; }
}
@keyframes rainbow-secondary {
  0% { --profile-secondary: #f4b8bd; } 18% { --profile-secondary: #f7c9a6; } 36% { --profile-secondary: #f5e7a5; }
  54% { --profile-secondary: #bce6c7; } 72% { --profile-secondary: #b9daed; } 86% { --profile-secondary: #c9c9eb; } 100% { --profile-secondary: #ddc1e8; }
}
@keyframes tides-primary {
  0% { --profile-primary: #021a42; } 33% { --profile-primary: #004476; } 66% { --profile-primary: #0873a6; } 100% { --profile-primary: #006d62; }
}
@keyframes tides-secondary {
  0% { --profile-secondary: #c5eadf; } 33% { --profile-secondary: #b9e2e5; } 66% { --profile-secondary: #c4dded; } 100% { --profile-secondary: #c3d0e5; }
}
@keyframes aurora-primary {
  0% { --profile-primary: #04132f; } 32% { --profile-primary: #271753; } 64% { --profile-primary: #4c1d69; } 100% { --profile-primary: #00634d; }
}
@keyframes aurora-secondary {
  0% { --profile-secondary: #c9eddf; } 32% { --profile-secondary: #aee5d1; } 64% { --profile-secondary: #d4f0e3; } 100% { --profile-secondary: #b9ddcf; }
}
@keyframes lunar-primary {
  0%, 100% { --profile-primary: #9f3742; }
  50% { --profile-primary: #d66570; }
}
@keyframes lunar-secondary {
  0%, 100% { --profile-secondary: #fff0ad; }
  50% { --profile-secondary: #e8a9b8; }
}
@keyframes solar-primary {
  0%, 100% { --profile-primary: #ae5906; }
  50% { --profile-primary: #d68408; }
}
@keyframes solar-secondary {
  0%, 100% { --profile-secondary: #ffe39a; }
  50% { --profile-secondary: #f0a34e; }
}

body[data-dynamic-page-theme="bosadem-theme"] { animation: rainbow-page 12s ease-in-out infinite alternate; }
body[data-dynamic-page-theme="getijdenstroom-theme"] { animation: tides-page 11s ease-in-out infinite alternate; }
body[data-dynamic-page-theme="noordergloed-theme"] { animation: aurora-page 13s ease-in-out infinite alternate; }

@keyframes rainbow-page {
  0% { --theme-page: #ed2d32; --theme-top: #ba1723; --theme-bottom: #f06a22; }
  18% { --theme-page: #f06a22; --theme-top: #cc4911; --theme-bottom: #f2cf24; }
  36% { --theme-page: #f2cf24; --theme-top: #c59d08; --theme-bottom: #35b45a; }
  54% { --theme-page: #35b45a; --theme-top: #16883b; --theme-bottom: #258ad5; }
  72% { --theme-page: #258ad5; --theme-top: #1768ad; --theme-bottom: #4e59c5; }
  86% { --theme-page: #4e59c5; --theme-top: #343b9f; --theme-bottom: #8a3fbd; }
  100% { --theme-page: #8a3fbd; --theme-top: #64278f; --theme-bottom: #ed2d7a; }
}

@keyframes tides-page {
  0% { --theme-page: #0b3264; --theme-top: #071f42; --theme-bottom: #176ead; }
  33% { --theme-page: #176ead; --theme-top: #0d4e83; --theme-bottom: #55b9e8; }
  66% { --theme-page: #55b9e8; --theme-top: #278dc1; --theme-bottom: #20b9a5; }
  100% { --theme-page: #20b9a5; --theme-top: #128574; --theme-bottom: #0b5084; }
}

@keyframes aurora-page {
  0% { --theme-page: #10264f; --theme-top: #091831; --theme-bottom: #433584; }
  32% { --theme-page: #433584; --theme-top: #2e2463; --theme-bottom: #7645a1; }
  64% { --theme-page: #7645a1; --theme-top: #563178; --theme-bottom: #1aa47f; }
  100% { --theme-page: #1aa47f; --theme-top: #10745a; --theme-bottom: #183f74; }
}

body[data-dynamic-page-theme="gouden-uur-theme"] {
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(178,34,45,.96) 38% 62%, transparent 66% 100%) -15% 0 / 8% 100% no-repeat,
    linear-gradient(90deg, #fff9df, #f5d76f);
  animation: lunar-eclipse-page 20s linear infinite;
}

@keyframes lunar-eclipse-page {
  0%, 72% { --theme-page: #f5d76f; --theme-top: #e4bd48; --theme-bottom: #fff7cf; background-position: -15% 0, 0 0; }
  96%, 100% { --theme-page: #f5d76f; --theme-top: #e4bd48; --theme-bottom: #fff7cf; background-position: 115% 0, 0 0; }
}

body[data-dynamic-page-theme="nachtvlinder-theme"] {
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(0,0,0,.98) 38% 62%, transparent 66% 100%) -15% 0 / 8% 100% no-repeat,
    linear-gradient(90deg, #bd6500, #f2a516);
  animation: solar-eclipse-page 20s linear infinite;
}

@keyframes solar-eclipse-page {
  0%, 72% { --theme-page: #d68408; --theme-top: #b76100; --theme-bottom: #f2aa1d; background-position: -15% 0, 0 0; }
  96%, 100% { --theme-page: #d68408; --theme-top: #b76100; --theme-bottom: #f2aa1d; background-position: 115% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-own-view[data-dynamic-theme],
  .profile-own-view[data-dynamic-primary],
  .profile-own-view[data-dynamic-secondary],
  body[data-dynamic-page-theme]:not([data-dynamic-page-theme=""]) { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-colour-preview,
  .dynamic-colour-choice .profile-style-swatch,
  .profile-own-view[data-dynamic-theme]:not([data-dynamic-theme=""]),
  body[data-dynamic-page-theme]:not([data-dynamic-page-theme=""]) { animation: none; }
}

.unlockable-frame-preview {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: #fffdf7;
  box-shadow: inset 0 0 0 5px #2b2e36, inset 0 0 0 9px #c9a67a;
}

.unlockable-frame-preview::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255, 253, 247, .8);
  pointer-events: none;
}

.unlockable-frame-preview[data-frame-preview="velddagboek-frame"] {
  background: repeating-linear-gradient(45deg, #d3aa74 0 5px, #e5c28e 5px 10px);
  box-shadow: inset 0 0 0 5px #382b21, inset 0 0 0 9px #8d6239, inset 0 0 0 13px #edcf9d;
}
.unlockable-frame-preview[data-frame-preview="brons-frame"] {
  background: repeating-linear-gradient(135deg, #ad5e27 0 4px, #d8893e 4px 8px);
  box-shadow: inset 0 0 0 5px #3f251a, inset 0 0 0 9px #8b4522, inset 0 0 0 13px #efad62;
}
.unlockable-frame-preview[data-frame-preview="zilver-frame"] {
  background: repeating-linear-gradient(135deg, #99a5ae 0 4px, #dce5e7 4px 8px);
  box-shadow: inset 0 0 0 5px #303942, inset 0 0 0 9px #758491, inset 0 0 0 13px #f3f7f6;
}
.unlockable-frame-preview[data-frame-preview="goud-frame"] {
  background: repeating-linear-gradient(135deg, #d89f19 0 4px, #ffe167 4px 8px);
  box-shadow: inset 0 0 0 5px #503411, inset 0 0 0 9px #bb7b12, inset 0 0 0 13px #fff4a9;
}
.unlockable-frame-preview[data-frame-preview="diamant-frame"] {
  background: repeating-linear-gradient(135deg, #61c8e4 0 4px, #d9f9ff 4px 8px);
  box-shadow: inset 0 0 0 5px #174f80, inset 0 0 0 9px #3f9fc9, inset 0 0 0 13px #eefeff;
}
.unlockable-frame-preview[data-frame-preview="varen-frame"] {
  background: radial-gradient(circle at 12% 85%, #e9a1b9 0 5px, transparent 6px), radial-gradient(circle at 88% 14%, #f5d668 0 5px, transparent 6px), repeating-linear-gradient(135deg, #4d965e 0 5px, #8fc76f 5px 10px);
  box-shadow: inset 0 0 0 5px #254a32, inset 0 0 0 9px #5e9b4d, inset 0 0 0 13px #d6e995;
}
.unlockable-frame-preview[data-frame-preview="waterlijn-frame"] {
  background: repeating-linear-gradient(0deg, #73d3e9 0 4px, #2989b8 4px 8px);
  box-shadow: inset 0 0 0 5px #123e5d, inset 0 0 0 9px #1e78a4, inset 0 0 0 13px #9ceeff;
}
.unlockable-frame-preview[data-frame-preview="jade-frame"] {
  background: repeating-linear-gradient(135deg, #2f8062 0 4px, #7fd19a 4px 8px);
  box-shadow: inset 0 0 0 5px #163d36, inset 0 0 0 9px #22694f, inset 0 0 0 13px #b6edb2;
}
.unlockable-frame-preview[data-frame-preview="nacht-frame"] {
  background: radial-gradient(circle at 15% 15%, #f893a2 0 3px, transparent 4px), radial-gradient(circle at 85% 85%, #f06a7c 0 3px, transparent 4px), repeating-linear-gradient(135deg, #842e3b 0 4px, #d35862 4px 8px);
  box-shadow: inset 0 0 0 5px #3e1720, inset 0 0 0 9px #942d3b, inset 0 0 0 13px #ffb2b7;
}
.unlockable-frame-preview[data-frame-preview="kristal-frame"] {
  background: linear-gradient(135deg, #f4b5e9 0 25%, #b8e5f7 25% 50%, #e8c9fc 50% 75%, #a7eadb 75%);
  box-shadow: inset 0 0 0 5px #493b73, inset 0 0 0 9px #967fd2, inset 0 0 0 13px #f7e9ff;
}

/* Winkelvoorbeelden: mini-profielkaarten met dezelfde rand als het echte kader. */
.unlockable-frame-preview {
  background: var(--shop-frame-preview, linear-gradient(135deg, #70777c, #c1c6ca)) !important;
  box-shadow: inset 0 0 0 3px #2b2e36 !important;
}

.unlockable-frame-preview::after {
  inset: 10px;
  border: 2px solid #2b2e36;
  border-radius: 2px;
  background: #fffdf7;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

.unlockable-frame-preview[data-frame-preview="velddagboek-frame"] { --shop-frame-preview: linear-gradient(135deg, #382b21 0%, #8d6239 48%, #edcf9d 100%); }
.unlockable-frame-preview[data-frame-preview="brons-frame"] { --shop-frame-preview: linear-gradient(135deg, #3f251a 0%, #c26d2d 52%, #efad62 100%); }
.unlockable-frame-preview[data-frame-preview="zilver-frame"] { --shop-frame-preview: linear-gradient(135deg, #303942 0%, #9aa6ad 48%, #f3f7f6 100%); }
.unlockable-frame-preview[data-frame-preview="zandsteen-frame"] { --shop-frame-preview: linear-gradient(135deg, #80652e 0%, #c5a95f 48%, #f4e6b8 100%); }
.unlockable-frame-preview[data-frame-preview="grafiet-frame"] { --shop-frame-preview: linear-gradient(135deg, #3c4246 0%, #70777c 50%, #c1c6ca 100%); }
.unlockable-frame-preview[data-frame-preview="goud-frame"] { --shop-frame-preview: linear-gradient(135deg, #503411 0%, #e5b836 52%, #fff4a9 100%); }
.unlockable-frame-preview[data-frame-preview="diamant-frame"] { --shop-frame-preview: linear-gradient(135deg, #174f80 0%, #5ccfff 48%, #eefeff 100%); }
.unlockable-frame-preview[data-frame-preview="varen-frame"] { --shop-frame-preview: linear-gradient(135deg, #4f8d7c 0%, #86cfba 50%, #d5fff2 100%); }
.unlockable-frame-preview[data-frame-preview="waterlijn-frame"] { --shop-frame-preview: linear-gradient(180deg, #74cfff 0%, #dff8ff 32%, #ffffff 48%, #c8f1ff 62%, #8fd6ff 100%); }
.unlockable-frame-preview[data-frame-preview="jade-frame"] { --shop-frame-preview: linear-gradient(135deg, #0d2b22 0%, #14523c 52%, #5fa578 100%); }
.unlockable-frame-preview[data-frame-preview="saffier-frame"] { --shop-frame-preview: linear-gradient(135deg, #071d4f 0%, #164ba0 55%, #5e98e8 100%); }
.unlockable-frame-preview[data-frame-preview="nacht-frame"] { --shop-frame-preview: linear-gradient(135deg, #3e1720 0%, #942d3b 52%, #ff8b98 100%); }
.unlockable-frame-preview[data-frame-preview="kristal-frame"] {
  --shop-frame-preview: conic-gradient(from 35deg, #f8f1e8 0 12%, #8fdcff 20%, #f8f1e8 30%, #ff963f 31% 33%, #f8f1e8 34% 46%, #8fdcff 55%, #ff963f 56% 58%, #f8f1e8 59% 73%, #8fdcff 82%, #f8f1e8 91%, #ff963f 92% 94%, #f8f1e8 95% 100%);
}
.unlockable-frame-preview[data-frame-preview="obsidiaan-frame"] { --shop-frame-preview: linear-gradient(135deg, #000000 0%, #18181d 48%, #5a5a61 72%, #050505 100%); }
.unlockable-frame-preview[data-frame-preview="amethist-frame"] { --shop-frame-preview: linear-gradient(135deg, #f5a8d5 0%, #b95edb 48%, #6420a0 100%); }
.unlockable-frame-preview[data-frame-preview="fluoriet-frame"] { --shop-frame-preview: linear-gradient(90deg, #56b4ff 0%, #a894ff 50%, #ff9ed8 100%); }
.unlockable-frame-preview[data-frame-preview="amazoniet-verloop-frame"] { --shop-frame-preview: linear-gradient(180deg, #176653 0%, #39aa91 48%, #c9fff0 100%); }
.unlockable-frame-preview[data-frame-preview="citrien-frame"] { --shop-frame-preview: linear-gradient(135deg, #fff078 0%, #ffb12d 52%, #d87400 100%); }
.unlockable-frame-preview[data-frame-preview="unakiet-frame"] { --shop-frame-preview: linear-gradient(110deg, #4e5b32 0%, #758044 30%, #b76541 46%, #e38a4c 55%, #65733b 72%, #6f4a2f 100%); }
.unlockable-frame-preview[data-frame-preview="rode-diamant-frame"] { --shop-frame-preview: linear-gradient(135deg, #160006 0%, #550016 34%, #8f1735 52%, #30000c 72%, #050505 100%); }

@media (max-width: 700px) {
  .achievements-page {
    gap: 14px;
    padding: 10px;
  }

  .achievements-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }

  .achievement-wallet {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    width: 100%;
  }

  .achievement-wallet strong {
    justify-self: center;
  }

  .achievement-wallet small {
    justify-self: end;
  }

  .achievement-level-panel {
    grid-template-columns: 1fr;
  }

  .achievement-level-score {
    justify-items: start;
  }

  .achievement-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .achievement-grid,
  .title-grid,
  .unlockable-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 470px) {
  .about-profile {
    grid-template-columns: 1fr;
  }

  .about-profile img {
    width: 116px;
  }

  .about-score-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.items-page {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 16px;
  min-height: 460px;
  overflow: hidden;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .97);
  box-shadow: var(--shadow);
}

.page-view,
.phylogeny-view {
  margin-top: 18px;
}

.items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 4px solid var(--line);
  color: #fff;
  background: linear-gradient(180deg, #d9af39, #9e7421);
}

.items-header h2 {
  margin: 3px 0 5px;
  font-size: 2.5rem;
  line-height: 1;
}

.items-header p {
  margin: 0;
  font-weight: 750;
}

.items-header .kicker {
  color: #fff4c5;
}

.items-counter {
  display: grid;
  justify-items: center;
  min-width: 94px;
  padding: 9px 13px;
  border: 3px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(23, 24, 29, .22);
}

.items-counter strong {
  font-size: 1.8rem;
  line-height: 1;
}

.items-counter span {
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.items-level-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px;
}

.item-usage-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px;
}

.item-usage-filter button {
  min-height: 42px;
  padding: 7px 10px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 253, 247, .92);
  box-shadow: inset 0 -4px rgba(23, 24, 29, .1);
  font-weight: 950;
  cursor: pointer;
}

.item-usage-filter button.active {
  color: #fff;
  background: #348b5d;
  box-shadow: inset 0 -4px rgba(0, 0, 0, .2);
}

.item-usage-filter span {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  min-height: 25px;
  margin-left: 5px;
  padding: 2px 5px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: .72rem;
}

.item-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 4px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: #111;
  background: var(--item-level, #fff);
  font-size: .76rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.items-level-legend .item-level {
  width: 100%;
}

.item-level-basis,
.item-tier-basis,
.item-level-basic,
.item-tier-basic {
  --item-level: #aee9eb;
  --item-level-dark: #31858a;
}

.item-level-veld,
.item-tier-veld,
.item-level-field,
.item-tier-field {
  --item-level: #59a5ff;
  --item-level-dark: #216ebf;
}

.item-level-specialistisch,
.item-tier-specialistisch,
.item-level-specialist,
.item-tier-specialist {
  --item-level: #ffe26e;
  --item-level-dark: #b18300;
}

.item-level-professioneel,
.item-tier-professioneel,
.item-level-pro,
.item-tier-pro {
  --item-level: #ca89e0;
  --item-level-dark: #8948a0;
}

.items-list {
  display: grid;
  gap: 22px;
  padding: 2px 18px 24px;
}

.items-empty {
  margin: 0;
  padding: 28px 20px;
  border: 3px dashed var(--line);
  border-radius: 7px;
  color: #4b5258;
  background: rgba(255, 253, 247, .9);
  font-weight: 850;
  text-align: center;
}

.items-tier {
  border: 3px solid var(--line);
  border-top: 9px solid var(--item-level-dark);
  border-radius: 7px;
  overflow: hidden;
  background: #fffdf7;
  box-shadow: 0 6px 0 rgba(23, 24, 29, .16);
}

.items-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 3px solid var(--line);
  background: color-mix(in srgb, var(--item-level) 30%, white);
}

.items-tier-header h3 {
  margin: 0 0 2px;
  font-size: 1.25rem;
}

.items-tier-header p {
  margin: 0;
  color: #454b52;
  font-size: .85rem;
  font-weight: 750;
}

.items-tier-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.items-tier-list {
  display: grid;
}

.item-entry {
  background: #fffdf7;
}

.item-entry + .item-entry {
  border-top: 2px solid #d8d5cb;
}

.item-entry summary {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(126px, auto) 34px;
  align-items: center;
  gap: 15px;
  min-height: 126px;
  padding: 14px 15px;
  cursor: pointer;
  list-style: none;
}

.item-entry summary::-webkit-details-marker {
  display: none;
}

.item-entry summary:hover {
  background: color-mix(in srgb, var(--item-level) 12%, white);
}

.item-entry[open] summary {
  background: color-mix(in srgb, var(--item-level) 13%, white);
}

.item-icon-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 7px;
  color: var(--item-level-dark);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .55) 25%, transparent 25% 75%, rgba(255, 255, 255, .55) 75%),
    color-mix(in srgb, var(--item-level) 52%, white);
  background-size: 20px 20px;
  box-shadow: inset 0 -8px rgba(23, 24, 29, .1), 0 4px 0 rgba(23, 24, 29, .15);
}

.item-icon-placeholder img {
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  border-radius: 4px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: .92;
  box-shadow: 0 3px 0 rgba(23, 24, 29, .16);
}

.item-summary-copy {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: 0;
}

.item-name {
  font-size: 1.35rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.item-description {
  max-width: 720px;
  color: #4b5258;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.4;
}

.item-use-toggle {
  min-width: 126px;
  min-height: 42px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: #4f5660;
  background: #fff;
  font-size: .84rem;
  font-weight: 950;
  cursor: pointer;
}

.item-use-toggle::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  vertical-align: -1px;
}

.item-use-toggle.active {
  color: #fff;
  background: #348b5d;
}

.item-use-toggle.active::before {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 2px #348b5d;
}

.item-entry.in-use summary {
  box-shadow: inset 6px 0 #348b5d;
}

.item-expand-icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.item-expand-icon::before,
.item-expand-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 3px;
  background: var(--line);
  transform: translate(-50%, -50%) scale(var(--sticker-scale, 1));
  transform-origin: center;
}

.item-expand-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .15s ease;
}

.item-entry[open] .item-expand-icon::after {
  transform: translate(-50%, -50%) rotate(0);
}

.item-extra {
  display: grid;
  grid-template-columns: .7fr 1.15fr 1.15fr;
  gap: 10px;
  padding: 14px 15px 17px 126px;
  border-top: 2px dashed color-mix(in srgb, var(--item-level-dark) 55%, white);
  background: color-mix(in srgb, var(--item-level) 18%, white);
}

.item-extra > div {
  min-width: 0;
  padding: 10px 11px;
  border-left: 5px solid var(--item-level-dark);
  background: rgba(255, 255, 255, .82);
}

.item-extra strong {
  display: block;
  margin-bottom: 4px;
  color: var(--item-level-dark);
  font-size: .72rem;
  text-transform: uppercase;
}

.item-extra p {
  margin: 0;
  color: #30353b;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
}

.item-extra > .item-animal-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  min-height: 108px;
  padding: 12px 8px 7px;
  overflow-x: auto;
  border: 0;
  border-top: 2px dashed color-mix(in srgb, var(--item-level-dark) 38%, white);
  background: transparent;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  overscroll-behavior-inline: contain;
}

.item-animal-strip img {
  flex: 0 0 auto;
  width: auto;
  max-width: 138px;
  height: 94px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(35, 38, 42, .18));
}

@media (max-width: 700px) {
  .items-page {
    gap: 12px;
  }

  .items-header {
    align-items: flex-start;
    padding: 17px 16px;
  }

  .items-header h2 {
    font-size: 2rem;
  }

  .items-counter {
    min-width: 76px;
  }

  .items-level-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 10px;
  }

  .item-usage-filter {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .items-list {
    gap: 16px;
    padding: 2px 10px 16px;
  }

  .items-tier-header {
    align-items: flex-start;
    padding: 11px 12px;
  }

  .item-entry summary {
    grid-template-columns: 74px minmax(0, 1fr) 28px;
    grid-template-rows: auto auto;
    gap: 10px;
    min-height: 112px;
    padding: 12px 10px;
  }

  .item-icon-placeholder {
    grid-row: 1 / 3;
    width: 74px;
    height: 82px;
  }

  .item-summary-copy {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .item-use-toggle {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    min-width: 118px;
    min-height: 38px;
    padding: 7px 11px;
    font-size: .78rem;
  }

  .item-name {
    font-size: 1.08rem;
  }

  .item-description {
    font-size: .82rem;
  }

  .item-expand-icon {
    grid-column: 3;
    grid-row: 2;
    width: 28px;
    height: 28px;
  }

  .item-extra {
    grid-template-columns: 1fr;
    padding: 12px 10px 14px 94px;
  }

  .item-extra > .item-animal-strip {
    grid-column: 1;
    justify-content: flex-start;
    min-height: 94px;
  }

  .item-animal-strip img {
    max-width: 118px;
    height: 80px;
  }
}

@media (max-width: 430px) {
  .items-header p:last-child {
    max-width: 210px;
  }

  .items-counter {
    padding: 8px 9px;
  }

  .item-extra {
    padding-left: 10px;
  }
}

.observations-page {
  display: grid;
  gap: 18px;
  min-height: 460px;
  padding: 20px;
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 253, 255, .97);
  box-shadow: var(--shadow);
}

.observations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 3px solid var(--line);
  color: #fff;
  background: linear-gradient(180deg, #3ca7d9, #2479ad);
}

.observations-header h2 {
  margin: 3px 0 5px;
  font-size: 2.3rem;
  line-height: 1;
}

.observations-header p {
  max-width: 650px;
  margin: 0;
  font-weight: 750;
}

.observations-header .kicker {
  color: #dff7ff;
}

.observation-add-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 210px;
  padding: 0 18px;
  background: #186d9a;
}

.observations-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.observations-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.observations-toolbar .secondary-button {
  min-height: 42px;
  padding: 0 13px;
  box-shadow: 0 3px 0 var(--line);
  font-size: .82rem;
}

.observation-restore-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.observation-restore-button input,
.observation-photo-actions input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.observation-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  font-size: .82rem;
  font-weight: 850;
}

.observation-summary-item strong {
  color: #2479ad;
  font-size: 1.15rem;
}

.observations-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .9);
}

.observations-view-tab {
  min-height: 46px;
  border: 2px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--line);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.observations-view-tab.active {
  border-color: var(--line);
  background: #2e8f5e;
  color: #fff;
  box-shadow: 0 3px 0 var(--line);
}

[role="tabpanel"][hidden] {
  display: none;
}

.observation-map-panel {
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #e8f5f8;
}

.observation-map-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 3px solid var(--line);
  background: #d5eef4;
}

.observation-map-panel h3 {
  margin: 3px 0 0;
  font-size: 1.25rem;
}

.observation-map-panel .kicker {
  color: #2479ad;
}

#observationMapCount {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .75rem;
  font-weight: 900;
}

.observation-map-filters {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 3px solid var(--line);
  background: #eef8e8;
}

.observation-map-groups {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.observation-map-filter {
  min-height: 36px;
  padding: 5px 7px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
  color: var(--line);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}

.observation-map-filter.active {
  background: #2e8f5e;
  color: #fff;
  box-shadow: 0 2px 0 var(--line);
}

.observation-map-filter[data-map-group="Zoogdier"] { --map-group: var(--mammal); --map-group-soft: var(--mammal-soft); }
.observation-map-filter[data-map-group="Vogel"] { --map-group: var(--bird); --map-group-soft: var(--bird-soft); }
.observation-map-filter[data-map-group="Reptiel"] { --map-group: var(--reptile); --map-group-soft: var(--reptile-soft); }
.observation-map-filter[data-map-group="Amfibie"] { --map-group: var(--amphibian); --map-group-soft: var(--amphibian-soft); }
.observation-map-filter[data-map-group="Vis"] { --map-group: var(--fish); --map-group-soft: var(--fish-soft); }
.observation-map-filter[data-map-group="Ongewervelde"] { --map-group: var(--invertebrate); --map-group-soft: var(--invertebrate-soft); }

.observation-map-filter[data-map-group]:not([data-map-group="all"]) {
  background: var(--map-group-soft);
}

.observation-map-filter[data-map-group]:not([data-map-group="all"]).active {
  background: var(--map-group);
  color: #fff;
}

.observation-map-filter[data-map-group="Reptiel"].active {
  color: #21180a;
}

.observation-map-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.observation-map-selects label {
  display: grid;
  gap: 4px;
  font-size: .73rem;
  font-weight: 900;
}

.observation-map-selects select {
  min-width: 0;
  min-height: 40px;
  padding: 7px 9px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--line);
  font: inherit;
  font-weight: 800;
}

.observation-map {
  position: relative;
  min-height: min(720px, calc(100vh - 210px));
  overflow: hidden;
  background: #2d743e;
}

.observation-map-art {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: min(calc(100% - 32px), 680px);
  aspect-ratio: 1;
  background: url("assets/observations/wrs-observations-map.png") center / contain no-repeat;
  transform:
    translateX(-50%)
    translate(var(--map-pan-x, 0), var(--map-pan-y, 0))
    translate(var(--map-shift-x, 0%), var(--map-shift-y, 0%))
    scale(var(--map-scale, 1));
  transform-origin: 0 0;
  transition: transform .28s ease;
  cursor: zoom-in;
}

.observation-map.map-zoomed {
  touch-action: none;
  cursor: grab;
}

.observation-map.map-zoomed .observation-map-art {
  cursor: grab;
}

.observation-map.map-panning,
.observation-map.map-panning .observation-map-art {
  cursor: grabbing;
}

.observation-map-zoom {
  position: absolute;
  z-index: 5;
  right: 12px;
  top: 12px;
  display: grid;
  grid-template-columns: 40px 64px 40px;
  gap: 4px;
  padding: 5px;
  border: 3px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 4px 0 rgba(23, 24, 29, .28);
}

.observation-map-zoom button {
  min-width: 0;
  min-height: 38px;
  padding: 0 5px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--line);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.observation-map-zoom button:disabled {
  opacity: .38;
  cursor: default;
}

.observation-map-marker {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -100%) scale(var(--marker-scale, 1));
  transform-origin: 50% 100%;
  cursor: pointer;
}

.observation-map-marker::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--line);
  border-radius: 50% 50% 50% 0;
  background: var(--group, #d9342b);
  box-shadow: -2px 3px 0 rgba(23, 24, 29, .24);
  transform: rotate(-45deg);
}

.observation-map-marker.group-zoogdier { --group: var(--mammal); }
.observation-map-marker.group-vogel { --group: var(--bird); }
.observation-map-marker.group-reptiel { --group: var(--reptile); }
.observation-map-marker.group-amfibie { --group: var(--amphibian); }
.observation-map-marker.group-vis { --group: var(--fish); }
.observation-map-marker.group-ongewervelde { --group: var(--invertebrate); }

.observation-map-marker::after {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.observation-map-empty {
  position: absolute;
  z-index: 3;
  right: 50%;
  bottom: 18px;
  width: min(360px, calc(100% - 28px));
  margin: 0;
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 253, 247, .94);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  transform: translateX(50%);
}

.observations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  align-content: start;
}

.observations-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 270px;
  padding: 46px 20px;
  border: 3px dashed #6c8794;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  text-align: center;
}

.observations-empty strong {
  font-size: 1.45rem;
}

.observations-empty p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.observation-card {
  position: relative;
  display: grid;
  grid-template-rows: 170px auto auto;
  overflow: hidden;
  border: 3px solid var(--line);
  border-top: 8px solid var(--group, #2479ad);
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 6px 0 rgba(23, 24, 29, .18);
}

.observation-card-photo {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e7f3f5;
}

.observation-card-gallery {
  display: flex;
  place-items: unset;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
}

.observation-card-photo > img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

.observation-photo-count {
  position: sticky;
  right: 8px;
  align-self: flex-start;
  flex: 0 0 auto;
  margin: 8px 8px 0 -88px;
  padding: 4px 7px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: #fff;
  background: rgba(23, 24, 29, .8);
  font-size: .7rem;
  font-weight: 900;
}

.observation-card-photo .creature-wrap {
  width: 88%;
  height: 100%;
}

.observation-card-photo .creature-image,
.observation-card-photo .creature-svg {
  width: 100%;
  height: 100%;
  max-height: 150px;
  object-fit: contain;
  transform: none;
}

.observation-card-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 14px;
}

.observation-card-copy h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.05;
}

.observation-date,
.observation-location,
.observation-coordinates {
  margin: 0;
  color: #46505a;
  font-size: .85rem;
  font-weight: 850;
}

.observation-quantity {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.observation-coordinates {
  color: #2479ad;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .76rem;
}

.observation-note {
  margin: 3px 0 0;
  color: #343842;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.observation-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px 12px 12px;
  border-top: 2px solid #d7dce0;
  background: #f4f7f7;
}

.observation-card-actions button {
  min-height: 34px;
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
}

.observation-card-actions .observation-delete {
  color: #8e2d30;
  background: #fff1ed;
}

.observation-dialog {
  width: min(840px, calc(100% - 20px));
}

.observation-form {
  position: relative;
  overflow: hidden;
  border: 4px solid var(--line);
  border-top: 10px solid #2f8fc5;
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 8px 0 rgba(23, 24, 29, .24);
}

.observation-form-header {
  padding: 22px 24px 16px;
  border-bottom: 3px solid var(--line);
  background: #dff4fb;
}

.observation-form-header h2 {
  margin: 4px 0 6px;
  font-size: 2rem;
  line-height: 1;
}

.observation-form-header p:last-child {
  margin: 0;
  color: #46505a;
  font-weight: 700;
}

.observation-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px 24px;
}

.observation-species-count-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(138px, 1fr);
  gap: 14px;
  align-items: start;
}

.observation-species-count-row .observation-species-field,
.observation-species-count-row .observation-count-field {
  grid-column: auto;
}

.observation-count-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.observation-count-mode,
.observation-count-control input {
  min-width: 0;
}

.observation-count-mode {
  padding-inline: 4px;
  white-space: nowrap;
  font-size: .7rem;
}

.observation-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  font-weight: 900;
}

.observation-field > span {
  font-size: .82rem;
  text-transform: uppercase;
}

.observation-field input,
.observation-field select,
.observation-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 700;
}

.observation-field textarea {
  min-height: 112px;
  resize: vertical;
}

.observation-field small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.observation-species-field,
.observation-location-field,
.observation-gps-field,
.observation-photo-field,
.observation-note-field,
.observation-photo-preview {
  grid-column: 1 / -1;
}

.observation-photo-preview[hidden] {
  display: none;
}

.observation-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 9px;
  padding: 10px;
  border: 2px dashed #6c8794;
  border-radius: 6px;
  background: #edf7f8;
}

.observation-photo-preview figure {
  position: relative;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.observation-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.observation-photo-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: #8e2d30;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}

.observation-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.observation-photo-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 12px;
  box-shadow: 0 3px 0 var(--line);
  font-size: .8rem;
  cursor: pointer;
}

.observation-gps-field .secondary-button {
  width: fit-content;
  min-height: 44px;
  box-shadow: 0 3px 0 var(--line);
}

.observation-coordinate-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.observation-coordinate-inputs label {
  display: grid;
  gap: 5px;
}

.observation-coordinate-inputs label > span {
  color: #606a74;
  font-size: .74rem;
}

.observation-gps-field .secondary-button.active {
  color: #fff;
  background: #348b5d;
}

.observation-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 24px;
}

.observation-form-actions .primary-button {
  width: min(280px, 100%);
  background: #2f8fc5;
}

.secondary-button {
  min-height: 50px;
  padding: 0 18px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 5px 0 var(--line);
  font-weight: 950;
  cursor: pointer;
}

@media (max-width: 700px) {
  .observations-page {
    gap: 14px;
    padding: 10px;
  }

  .observations-header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .observations-header h2 {
    font-size: 1.85rem;
  }

  .observation-add-button {
    width: 100%;
    min-width: 0;
  }

  .observations-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .observations-toolbar > * {
    width: 100%;
  }

  .observation-restore-button {
    grid-column: 1 / -1;
  }

  .observation-map-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .observation-map-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .observation-map-selects {
    grid-template-columns: 1fr;
  }

  .observation-map {
    min-height: min(520px, calc(100vh - 175px));
  }

  .observation-map-art {
    top: 10px;
    bottom: auto;
    width: calc(100% - 20px);
  }

  .observations-list {
    grid-template-columns: 1fr;
  }

  .observation-fields {
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }

  .observation-species-count-row {
    grid-template-columns: minmax(0, 2fr) minmax(128px, 1fr);
    gap: 8px;
  }

  .observation-coordinate-inputs {
    grid-template-columns: 1fr;
  }

  .observation-species-field,
  .observation-location-field,
  .observation-gps-field,
  .observation-photo-field,
  .observation-note-field,
  .observation-photo-preview {
    grid-column: auto;
  }

  .observation-form-header {
    padding: 20px 16px 14px;
  }

  .observation-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
    padding: 0 16px 20px;
  }

  .observation-form-actions .primary-button,
  .observation-form-actions .secondary-button {
    width: 100%;
  }

  .observation-photo-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.phylogeny-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: white;
  background: linear-gradient(180deg, #327e57, #1f5b3d);
}

.phylogeny-header h2 {
  margin-top: 4px;
  font-size: clamp(1.8rem, 5vw, 3.3rem);
  line-height: 1;
}

.tree-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tree-actions button {
  min-height: 40px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  font-weight: 900;
  cursor: pointer;
}

.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 14px 0;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 253, 247, .9);
  font-size: .82rem;
  font-weight: 850;
}

.tree-search {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  font-weight: 900;
}

.tree-search input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 3px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: inset 0 3px rgba(0, 0, 0, .08);
}

.tree-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rank-dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--line);
  border-radius: 50%;
}

.taxon-chordata { background: #348b5d; }
.taxon-arthropoda { background: #8b5f3d; }
.taxon-mammalia { background: #cb7584; }
.taxon-aves { background: #2f7f45; }
.taxon-reptilia { background: #e0b72e; }
.taxon-amphibia { background: #2f8fc5; }

.phylogeny-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  position: relative;
  overflow: visible;
}

.phylo-tree {
  grid-area: 1 / 1;
  overflow-x: auto;
  padding: 6px 382px 18px 2px;
  scroll-padding-right: 382px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
}

.phylo-tree::-webkit-scrollbar {
  display: none;
}

.phylo-root {
  min-width: 1040px;
}

.phylo-branch {
  position: relative;
  margin: 8px 0 8px 22px;
  padding-left: 24px;
}

.phylo-branch::before {
  content: "";
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: 5px;
  width: 3px;
  background: #59685b;
}

.phylo-branch:last-child::before {
  bottom: calc(100% - 31px);
}

.phylo-branch > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  min-width: 220px;
  max-width: 320px;
  padding: 6px 12px 6px 34px;
  border: 3px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--node-color) 9%, #fffdf7);
  box-shadow: inset 7px 0 var(--node-color), 0 3px 0 rgba(23, 24, 29, .16);
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.phylo-branch > summary::-webkit-details-marker {
  display: none;
}

.phylo-branch > summary::before {
  content: "+";
  position: absolute;
  left: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 3px;
  color: white;
  background: var(--node-color, var(--eco));
  font-size: .9rem;
  line-height: 1;
}

.phylo-branch[open] > summary::before {
  content: "−";
}

.phylo-branch > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 21px;
  height: 3px;
  background: #59685b;
}

.phylo-branch > summary.selected {
  outline: 4px solid color-mix(in srgb, var(--node-color) 48%, white);
  background: color-mix(in srgb, var(--node-color) 13%, white);
}

.phylo-node-copy {
  display: grid;
  gap: 1px;
}

.phylo-node-rank {
  color: var(--node-color, var(--eco-dark));
  font-size: .66rem;
  line-height: 1;
  text-transform: uppercase;
}

.phylo-node-name {
  line-height: 1.05;
  overflow-wrap: break-word;
  word-break: normal;
}

.phylo-node-latin {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: .76rem;
  font-style: italic;
  font-weight: 600;
}

.phylo-species-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin: 12px 0 14px 28px;
  padding: 14px 0 4px 20px;
  border-left: 3px solid #59685b;
}

.phylo-species-grid::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 0;
  width: 18px;
  height: 3px;
  background: #59685b;
}

.phylo-species {
  display: grid;
  grid-template-rows: 122px minmax(58px, auto);
  place-items: center;
  gap: 0;
  min-width: 0;
  padding: 8px 8px 0;
  border: 3px solid var(--line);
  border-top: 7px solid var(--species-color, var(--eco));
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 4px 0 rgba(23, 24, 29, .18);
  cursor: pointer;
}

.phylo-species:hover {
  transform: translateY(-2px);
}

.phylo-species.search-match,
.phylo-branch.search-match > summary {
  outline: 5px solid #ffd94a;
  animation: tree-search-pulse .8s ease-in-out 2;
}

@keyframes tree-search-pulse {
  50% {
    filter: brightness(1.12);
    transform: translateY(-3px);
  }
}

.phylo-species-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 122px;
  overflow: hidden;
}

.phylo-species-art .creature-wrap {
  position: static;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: translateY(-14px);
}

.phylo-species-art .creature-image,
.phylo-species-art .creature-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  image-rendering: pixelated;
  transform: none;
}

.phylo-species-labels {
  position: relative;
  z-index: 3;
  display: grid;
  align-self: stretch;
  align-content: start;
  gap: 3px;
  width: calc(100% + 16px);
  min-height: 58px;
  margin-left: -8px;
  padding: 8px 7px 7px;
  border-top: 2px solid rgba(23, 24, 29, .2);
  background: #fffdf7;
  text-align: center;
}

.phylo-species-name {
  font-size: .82rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.phylo-species-latin {
  max-width: 100%;
  font-family: Georgia, serif;
  font-size: .82rem;
  font-style: italic;
  font-weight: 750;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-align: center;
}

.phylo-species.group-zoogdier { --species-color: var(--mammal); }
.phylo-species.group-vogel { --species-color: var(--bird); }
.phylo-species.group-reptiel { --species-color: var(--reptile); }
.phylo-species.group-amfibie { --species-color: var(--amphibian); }
.phylo-species.group-vis { --species-color: var(--fish); }
.phylo-species.group-ongewervelde { --species-color: var(--invertebrate); }

.taxon-info {
  grid-area: 1 / 1;
  position: sticky;
  top: 18px;
  z-index: 20;
  justify-self: end;
  align-self: start;
  height: max-content;
  width: 360px;
  margin: 6px 2px 0 0;
  overflow: hidden;
  border: 3px solid var(--line);
  border-top: 10px solid var(--taxon-color, var(--eco));
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 6px 0 rgba(23, 24, 29, .18);
}

.taxon-info::before {
  content: "";
  display: block;
  height: 72px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--taxon-color, var(--eco)) 38%, white), transparent),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, .28) 12px 18px),
    var(--taxon-color, var(--eco));
}

.taxon-info > *:not(.taxon-info-count) {
  margin-right: 18px;
  margin-left: 18px;
}

.taxon-info-rank {
  display: block;
  margin-top: 16px;
  color: var(--taxon-color, var(--eco-dark));
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.taxon-info h3 {
  margin-top: 3px;
  margin-bottom: 0;
  font-size: 1.7rem;
  line-height: 1;
  overflow-wrap: break-word;
  word-break: normal;
}

.taxon-info-latin {
  margin-top: 5px;
  margin-bottom: 14px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-style: italic;
}

#taxonInfoDescription {
  margin-top: 0;
  margin-bottom: 18px;
  color: #444a50;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.45;
}

.taxon-info-count {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 3px solid var(--line);
  background: color-mix(in srgb, var(--taxon-color, var(--eco)) 18%, white);
}

.taxon-info-count strong {
  color: var(--taxon-color, var(--eco-dark));
  font-size: 2rem;
  line-height: 1;
}

.taxon-info-count span {
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

@media (max-width: 980px) and (min-width: 701px) {
  .page-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .page-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .page-tab {
    min-height: 44px;
    padding: 6px 8px;
    font-size: .83rem;
  }

  .phylogeny-view {
    padding: 10px;
  }

  .phylogeny-header {
    align-items: stretch;
    flex-direction: column;
  }

  .tree-actions {
    justify-content: stretch;
  }

  .tree-actions button {
    flex: 1;
  }

  .phylogeny-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }

  .taxon-info {
    order: -1;
    position: sticky;
    top: 8px;
    z-index: 40;
    width: auto;
    margin: 0 0 12px;
  }

  .phylo-tree {
    order: 0;
    padding-right: 2px;
    scroll-padding-right: 2px;
  }
}

/* Account en Sociaal */
body[data-page-theme="social"] {
  --theme-banner: url("assets/brand/banner-sociaal.png");
  --theme-bg-a: rgba(46, 51, 58, .66);
  --theme-bg-b: rgba(22, 26, 31, .62);
  --theme-page: #c9ced2;
  --theme-top: rgba(51, 56, 63, .97);
  --theme-bottom: rgba(27, 31, 37, .98);
  --theme-fade: rgba(201, 206, 210, .68);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.account-trigger {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 164px;
  padding: 7px 10px 7px 7px;
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 8px;
  color: white;
  background: rgba(8, 27, 54, .32);
  box-shadow: inset 0 -3px rgba(0, 0, 0, .18);
  cursor: pointer;
  text-align: left;
}

.account-trigger:hover,
.account-trigger:focus-visible {
  background: rgba(255, 255, 255, .16);
}

.account-trigger-avatar,
.account-profile-avatar,
.social-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #f7d66c;
  font-weight: 1000;
  line-height: 1;
}

.profile-photo-button {
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}

.profile-photo-button:not(.has-photo) {
  cursor: default;
}

.profile-photo-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-username {
  margin: 2px 0 0;
  color: #59646a;
  font-size: .8rem;
  font-weight: 850;
}

.profile-page .social-avatar:not(.has-photo) {
  background: var(--profile-primary, #f7d66c);
}

.profile-photo-dialog {
  position: relative;
  width: min(560px, calc(100% - 32px));
  max-width: calc(100vw - 32px);
  padding: 14px;
  overflow: visible;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fbfaf4;
}

.profile-photo-dialog::backdrop {
  background: rgba(12, 16, 21, .72);
}

.profile-photo-dialog img {
  display: block;
  width: 100%;
  max-height: 78dvh;
  object-fit: contain;
}

.profile-photo-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: #fffdf7;
  color: var(--ink);
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}

.account-trigger-avatar {
  width: 38px;
  height: 38px;
  font-size: 1rem;
  flex: 0 0 38px;
}

.account-trigger-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-trigger-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.account-trigger-copy span {
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.account-trigger-copy strong {
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-trigger.signed-in .account-trigger-avatar {
  color: #fff;
  background: #2e8f5e;
}

.social-page,
.profile-page,
.settings-page {
  display: grid;
  gap: 18px;
  padding: clamp(12px, 2.5vw, 24px);
  border: 4px solid var(--line);
  border-radius: 8px;
  background: rgba(232, 245, 255, .96);
  box-shadow: var(--shadow);
}

.social-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 4vw, 38px);
  border: 3px solid var(--line);
  border-top: 10px solid #173f70;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(7, 31, 70, .97), rgba(26, 84, 146, .87)),
    var(--theme-banner) center / cover;
}

.social-hero h2 {
  margin: 2px 0 8px;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: .95;
}

.social-hero p:last-child {
  max-width: 650px;
  margin: 0;
  font-weight: 720;
  line-height: 1.5;
}

.social-hero .kicker {
  color: #aee9eb;
}

.profile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-placeholder {
  grid-template-columns: 1fr;
}

.social-guest-view,
.social-own-view,
.social-shared-view {
  display: grid;
  gap: 18px;
}

/* The grid declaration above must never override the native hidden state. */
.social-own-view[hidden],
.social-shared-view[hidden] {
  display: none !important;
}

.social-guest-view {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(20px, 4vw, 34px);
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
}

.social-guest-view h3,
.social-section h3,
.social-profile-card h3,
.social-shared-view h3 {
  margin: 3px 0 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.08;
}

.social-guest-view p:not(.kicker),
.social-profile-card p,
.social-section p,
.social-shared-view p {
  margin: 0;
  color: #48505a;
  font-weight: 650;
  line-height: 1.5;
}

.social-guest-actions,
.account-panel-actions,
.account-data-actions,
.social-sharing-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.social-guest-actions {
  flex-direction: column;
  min-width: 180px;
}

.social-account-benefits {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: #48505a;
  font-weight: 750;
}

.social-account-benefits li {
  position: relative;
  padding-left: 22px;
}

.social-account-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #aee9eb;
}

.social-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 14px;
}

.social-profile-card,
.social-progress-card,
.social-section,
.social-shared-view {
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(23, 24, 29, .14);
}

.social-profile-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-top: 9px solid var(--fish);
}

.social-avatar {
  width: 68px;
  height: 68px;
  color: #fff;
  background: #2f8fc5;
  font-size: 2rem;
}

.social-title-chip,
.social-cloud-status,
.social-section-count {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #d6effa;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 950;
}

.social-progress-card {
  padding: 18px;
  border-top: 9px solid #2f8fc5;
  background: linear-gradient(145deg, #e7f5ff, #fffdf7);
}

.social-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 13px 0;
}

.social-stat-grid span {
  display: grid;
  gap: 1px;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.social-stat-grid strong {
  color: #173f70;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  line-height: 1;
}

.social-progress-track {
  height: 14px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.social-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2f8fc5, #66c4ec);
  transition: width .25s ease;
}

.social-section,
.social-shared-view {
  padding: 18px;
}

.social-section > header,
.social-section > summary,
.social-shared-view > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.social-section > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}

.social-section > summary::-webkit-details-marker {
  display: none;
}

.social-section > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--line);
  background: #fffdf7;
  font-size: 1.25rem;
  font-weight: 950;
}

.social-section[open] > summary {
  margin-bottom: 14px;
}

.social-section[open] > summary::after {
  content: "-";
}

.social-sharing-section {
  border-top: 9px solid #2f8fc5;
}

.social-sharing-controls {
  align-items: center;
}

.social-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #f6fbff;
  font-size: .85rem;
  font-weight: 820;
}

.social-switch input,
.account-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #2f8fc5;
}

.social-share-hint {
  margin-top: 12px !important;
  font-size: .86rem;
}

.social-badge-grid,
.social-friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
}

.profile-showcase-group + .profile-showcase-group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid rgba(28, 35, 40, .16);
}

.profile-showcase-group h4 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.social-badge-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.social-badge-grid .social-badge {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 92px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.social-badge-grid .social-badge-mark {
  width: 62px;
  height: 62px;
}

.social-badge-grid .social-badge strong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 110px;
  font-size: .78rem;
}

.social-badge-gilded-level {
  color: #8a5a00;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
}

.social-medal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 11px;
}

.social-skill-medal {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 0;
  padding: 4px;
  text-align: center;
}

.social-skill-medal .social-badge-mark {
  width: 48px;
  height: 48px;
}

.social-skill-medal.locked .social-badge-mark {
  display: block;
  box-sizing: border-box;
  border: 3px solid #7b8389;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #c6cbd0, #7b8389 68%, #565d64);
  box-shadow: inset 0 0 0 4px #a9b0b6;
  filter: grayscale(1);
}

.social-skill-medal.locked { opacity: .72; }
.social-skill-medal strong { max-width: 112px; font-size: .72rem; line-height: 1.12; }

.social-badge,
.social-unlockable,
.social-friend-card {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 11px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #f3fbff;
}

.social-test-cosmetic-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  min-height: 190px;
  padding: 18px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 7px;
  background-color: var(--test-secondary, #eef5f2);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--test-primary) 52%, transparent), transparent 68%), var(--test-banner);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 10px var(--test-primary, #2f8062);
}

.social-test-cosmetic-copy {
  align-self: end;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--test-secondary) 82%, #fff 18%);
}

.social-test-cosmetic-copy strong,
.social-test-cosmetic-copy small { display: block; }
.social-test-cosmetic-copy small { margin-top: 4px; font-weight: 800; }

.social-test-frame-chip {
  display: block;
  width: 78px;
  height: 58px;
  margin-top: 10px;
  border-radius: 4px;
}

.social-test-canvas {
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 5px solid var(--line);
  border-radius: 5px;
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
}

.social-test-canvas img {
  position: absolute;
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.28));
}

@media (max-width: 560px) {
  .social-test-cosmetic-preview { grid-template-columns: 1fr; }
  .social-test-canvas { width: min(100%, 190px); }
}

.social-badge.locked {
  opacity: .55;
  filter: grayscale(.8);
}

.social-badge-mark {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: #173f70;
  font-size: .78rem;
  font-weight: 950;
}

img.social-badge-mark {
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.social-badge strong,
.social-unlockable strong,
.social-friend-card strong {
  line-height: 1.1;
}

.social-badge small,
.social-unlockable small,
.social-friend-card small {
  color: #59616c;
  font-weight: 700;
  line-height: 1.2;
}

.social-showcase-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  border: 2px dashed var(--line);
  border-radius: 6px;
  color: #59616c;
  font-weight: 750;
  text-align: center;
}

.social-skill-medal .social-badge-mark {
  width: 42px;
  height: 42px;
}

.social-unlockable-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.social-unlockable {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  min-height: 0;
}

.social-unlockable-symbol {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #f7d66c;
  font-weight: 1000;
}

.friend-request-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.friend-request-form label,
.account-form label,
.account-delete-confirm {
  display: grid;
  gap: 6px;
  font-size: .8rem;
  font-weight: 950;
}

.friend-request-form input,
.account-form input,
.account-delete-confirm input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  font: inherit;
  font-weight: 750;
}

.social-shared-view {
  border-top: 9px solid #2f8fc5;
}

dialog.account-dialog {
  width: min(700px, calc(100% - 24px));
}

.account-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(20px, 5vw, 42px);
  border: 4px solid var(--line);
  border-top: 10px solid #173f70;
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: var(--shadow);
}

.account-card-header {
  padding-right: 50px;
}

.account-card-header h2 {
  margin: 3px 0 8px;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: .98;
}

.account-card-header p:last-child {
  margin: 0;
  color: #4a535c;
  font-weight: 680;
  line-height: 1.5;
}

.account-feedback {
  margin: 0;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: #173f70;
  background: #dff3ff;
  font-weight: 800;
}

.account-feedback.error {
  color: #8d292e;
  background: #fde2df;
}

.account-dialog-panel h3 {
  margin: 4px 0 9px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.account-dialog-panel > p {
  color: #4a535c;
  font-weight: 650;
  line-height: 1.5;
}

.account-guest-art {
  display: grid;
  place-items: center;
  min-height: 130px;
  margin-bottom: 16px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #173f70, #2f8fc5);
  box-shadow: inset 0 -10px rgba(0, 0, 0, .13);
}

.account-guest-art span {
  font-size: .92rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.account-guest-art strong {
  font-size: 2.6rem;
  letter-spacing: .08em;
}

.account-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.account-form-note {
  font-size: .86rem;
}

.username-status {
  display: block;
  min-height: 1.2em;
  margin-top: 4px;
  color: #5d6470;
  font-size: .82rem;
  font-weight: 800;
}

.username-status[data-state="available"] { color: #197148; }
.username-status[data-state="error"] { color: #a32626; }
.username-status[data-state="checking"] { color: #1767a3; }

.account-form input[readonly] {
  background: #eceff1;
  cursor: not-allowed;
}

.account-checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.account-profile-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-right: 44px;
}

.account-profile-avatar {
  width: 58px;
  height: 58px;
  color: #fff;
  background: #2f8fc5;
  font-size: 1.6rem;
}

.account-profile-head h3,
.account-profile-head p {
  margin: 2px 0;
}

.account-profile-head p:last-child {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 650;
}

.account-back-button,
.account-inline-button,
.account-text-button {
  padding: 0;
  border: 0;
  color: #173f70;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

.account-back-button {
  margin-bottom: 5px;
}

.account-data-actions {
  margin-top: 16px;
}

.account-danger-button {
  min-height: 42px;
  padding: 8px 13px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: #8d292e;
  background: #fff0ee;
  box-shadow: 0 3px 0 var(--line);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.account-danger-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 980px) and (min-width: 701px) {
  .page-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .topbar {
    align-items: flex-start;
    gap: 10px;
  }

  .topbar-actions {
    align-items: flex-start;
    gap: 7px;
  }

  .account-trigger {
    grid-template-columns: 34px;
    min-width: 40px;
    padding: 2px;
  }

  .account-trigger-copy {
    display: none;
  }

  .account-trigger-avatar {
    width: 34px;
    height: 34px;
  }

  .brand-mark {
    flex-basis: 58px;
    width: 58px;
  }

  .social-hero,
  .social-guest-view {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .social-hero {
    flex-direction: column;
  }

  .social-hero .secondary-button,
  .social-guest-actions .primary-button,
  .social-guest-actions .secondary-button {
    width: 100%;
  }

  .social-profile-grid {
    grid-template-columns: 1fr;
  }

  .social-profile-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .social-profile-card .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-card-actions {
    grid-column: 1 / -1;
  }

  .social-avatar {
    width: 54px;
    height: 54px;
  }

  .social-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-section > header,
  .social-section > summary {
    align-items: start;
    flex-direction: column;
  }

  .social-sharing-controls,
  .account-panel-actions,
  .account-data-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .social-switch,
  .social-sharing-controls .secondary-button,
  .account-panel-actions button,
  .account-data-actions button {
    width: 100%;
  }

  .friend-request-form {
    grid-template-columns: 1fr;
  }

  .social-badge-grid,
  .social-friend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-card {
    padding: 20px 16px;
  }
}

/* Menu en snelle veldacties */
.topbar {
  position: relative;
  justify-content: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(20px, calc((100vw - 1080px) / 2 + 20px));
  border-right: 0;
  border-left: 0;
  border-radius: 0 0 18px 18px;
}

.topbar-title {
  min-width: 0;
  text-align: center;
}

.menu-toggle,
.menu-close {
  display: inline-grid;
  place-items: center;
  border: 3px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
}

.menu-toggle {
  position: absolute;
  left: max(20px, calc((100vw - 1080px) / 2 + 20px));
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 54px;
  width: 54px;
  height: 48px;
  gap: 4px;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
}

.menu-close {
  width: 40px;
  height: 40px;
  font-weight: 1000;
}

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 22, 25, .44);
  backdrop-filter: blur(1px);
}

.app-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(360px, calc(100vw - 34px));
  padding: 18px;
  border-right: 4px solid var(--line);
  color: var(--ink);
  background: rgba(247, 243, 232, .84);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: 12px 0 0 rgba(30, 35, 44, .18);
  transform: translateX(-105%);
  transition: transform .18s ease;
}

body.menu-open .app-menu {
  transform: translateX(0);
}

.menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.menu-brand {
  display: grid;
  justify-items: start;
  width: auto;
  margin: 0;
  color: var(--ink);
}

.menu-brand img {
  width: 86px;
  border-radius: 12px;
}

.menu-brand strong {
  margin-top: 4px;
  font-size: 1rem;
}

.app-menu .account-trigger {
  grid-template-columns: 38px minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  color: var(--ink);
  background: rgba(47, 143, 94, .88);
  color: #fff;
}

.app-menu .account-trigger-copy {
  display: grid;
  min-width: 0;
}

.app-menu .account-trigger-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  max-width: 38px;
  overflow: hidden;
  border-radius: 50%;
}

.app-menu .account-trigger-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-menu .page-tabs {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-menu .page-tab {
  width: 100%;
  min-height: 46px;
}

.menu-footer {
  display: grid;
  gap: 8px;
  align-self: end;
}

.menu-footer .menu-cache-version {
  margin: 0;
  text-align: center;
}

.menu-settings-button {
  display: grid;
  width: 100%;
  min-height: 46px;
  place-items: center;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 3px 0 rgba(30, 35, 44, .18);
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  cursor: pointer;
}

.menu-settings-button:hover,
.menu-settings-button:focus-visible {
  background: #e2f4e5;
}

.settings-drawer,
.settings-detail-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 101;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 340px;
  max-width: calc(100vw - 34px);
  padding: 18px;
  border-right: 4px solid var(--line);
  color: var(--ink);
  background: rgba(247, 243, 232, .98);
  box-shadow: 12px 0 0 rgba(30, 35, 44, .18);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

.settings-drawer {
  left: 360px;
  transform: translateX(-105%);
}

.settings-detail-drawer {
  left: 700px;
  z-index: 102;
  transform: translateX(-105%);
}

body.settings-drawer-open .settings-drawer {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

body.settings-detail-open .settings-detail-drawer {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.settings-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--line);
}

.settings-drawer-head .kicker {
  margin: 0 0 2px;
  font-size: .62rem;
}

.settings-drawer-head strong {
  display: block;
  font-size: 1.2rem;
}

.settings-drawer-back {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 3px 0 rgba(30, 35, 44, .18);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}

.settings-drawer-list {
  display: grid;
  align-content: start;
  gap: 9px;
  padding-top: 14px;
  overflow: auto;
}

.settings-drawer-list > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 13px 12px;
  border: 3px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 3px 0 rgba(30, 35, 44, .16);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.settings-drawer-list > button:hover,
.settings-drawer-list > button:focus-visible {
  background: #e2f4e5;
}

.settings-drawer-list > button span {
  font-weight: 900;
}

.settings-drawer-list > button small {
  grid-column: 1;
  color: var(--ink-muted);
  font-size: .74rem;
  font-weight: 700;
}

.settings-drawer-list > button b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.55rem;
  line-height: 1;
}

.settings-detail-content {
  min-height: 0;
  padding-top: 14px;
  overflow: auto;
}

.settings-detail-content .settings-section {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-detail-content .settings-section > summary {
  display: none;
}

.settings-detail-content .settings-section .settings-content {
  padding: 0;
}

.settings-detail-content .settings-danger-zone {
  display: grid;
  margin-top: 18px;
  padding: 14px;
}

@media (max-width: 1100px) {
  .settings-drawer,
  .settings-detail-drawer {
    left: 12px;
    width: min(360px, calc(100vw - 24px));
    max-width: none;
    border: 4px solid var(--line);
    border-radius: 8px;
  }

  .settings-drawer {
    z-index: 102;
  }

  .settings-detail-drawer {
    z-index: 103;
  }
}

.menu-cache-version {
  margin: 0;
  color: rgba(30, 35, 44, .42);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.field-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.field-actions[hidden] {
  display: none !important;
}

.field-action-toggle,
.scroll-top-button {
  border: 3px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
}

.field-action-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 10px 16px 10px 12px;
  color: #fff;
  background: #de302b;
}

.field-action-plus {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--line);
  background: #fffdf7;
}

.scroll-top-button {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 69;
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: rgba(255, 253, 247, .72);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .16s ease, transform .16s ease;
}

.scroll-top-button.visible {
  opacity: .82;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.unknown-species-button {
  justify-self: start;
  margin-top: 6px;
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 253, 247, .86);
  font: inherit;
  font-size: .74rem;
  font-weight: 950;
  cursor: pointer;
}

.unknown-observations-dialog {
  width: min(560px, calc(100vw - 26px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  background: transparent;
}

.unknown-observations-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 4px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 8px 0 var(--line);
}

.unknown-observations-card header {
  padding-right: 48px;
}

.unknown-observations-card h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1;
}

.unknown-observations-card p {
  margin: 0;
  color: #4d5651;
  font-weight: 700;
}

.unknown-observations-list {
  display: grid;
  gap: 8px;
  max-height: min(460px, 55vh);
  overflow: auto;
}

.unknown-observation-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 3px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(227, 242, 223, .8);
  box-shadow: 0 3px 0 var(--line);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.unknown-observation-option strong {
  font-size: 1rem;
}

.unknown-observation-option span {
  color: #4d5651;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .topbar {
    align-items: center;
    min-height: 104px;
    padding-inline: 78px 18px;
  }

  .menu-toggle {
    left: 18px;
    flex-basis: 50px;
    width: 50px;
    height: 46px;
  }

  .field-actions {
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .field-action-toggle {
    min-height: 58px;
    padding: 11px 15px 11px 12px;
    font-size: .9rem;
  }

  .scroll-top-button {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* Profiel en Sociaal: dezelfde rustige kaarttaal als de ECODEX-collectie. */
.profile-page,
.social-page,
.settings-page {
  gap: 16px;
  padding: clamp(12px, 2vw, 20px);
  border: 3px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 243, 232, .94);
  box-shadow: var(--shadow);
}

.profile-page .social-hero,
.social-page .social-hero,
.settings-page .social-hero {
  padding: clamp(18px, 3vw, 28px);
  border: 3px solid var(--line);
  border-top-width: 8px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(228, 246, 233, .97), rgba(247, 243, 232, .98));
  box-shadow: 0 5px 0 rgba(28, 35, 40, .15);
}

.social-page .social-hero {
  border-top-color: #2f8fc5;
  background: linear-gradient(135deg, rgba(226, 244, 253, .98), rgba(247, 243, 232, .98));
}

.profile-page .social-hero {
  border-top-color: #348b5d;
}

.profile-page .social-hero .kicker,
.social-page .social-hero .kicker,
.settings-page .social-hero .kicker {
  color: #287047;
}

.social-page .social-hero .kicker {
  color: #176f9d;
}

.profile-page .social-hero h2,
.social-page .social-hero h2,
.settings-page .social-hero h2 {
  margin: 3px 0 7px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
}

.profile-page .social-hero p:last-child,
.social-page .social-hero p:last-child,
.settings-page .social-hero p:last-child {
  margin: 0;
  color: #4d5651;
  font-weight: 720;
}

.profile-guest-view,
.social-page .social-guest-view {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 3px solid var(--line);
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(28, 35, 40, .14);
}

.profile-guest-view {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr);
  align-items: center;
}

.account-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 30px);
  overflow: auto;
  background: rgba(24, 29, 34, .62);
  backdrop-filter: blur(3px);
}

.account-gate-overlay[hidden] { display: none !important; }

.account-gate-panel {
  position: relative;
  width: min(1040px, 100%);
  margin: auto;
}

.account-gate-panel .profile-guest-view {
  width: 100%;
  box-sizing: border-box;
}

.account-gate-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 3px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 3px 0 rgba(28, 35, 40, .22);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
}

body.account-gate-open { overflow: hidden; }

.menu-page-tabs .page-tab.account-required {
  color: #60686d;
  background: #eef0ef;
}

.menu-page-tabs .page-tab.account-required::after {
  content: "Account";
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.profile-guest-copy h3,
.social-page .social-guest-view h3 {
  margin: 5px 0 9px;
  font-size: clamp(1.35rem, 2.9vw, 2rem);
  line-height: 1.08;
}

.profile-guest-copy p:not(.kicker),
.social-page .social-guest-view p:not(.kicker) {
  margin: 0;
  color: #4d5651;
  font-weight: 650;
  line-height: 1.55;
}

.profile-benefit-grid {
  display: grid;
  gap: 8px;
}

.profile-benefit-grid article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #eef9f0;
}

.profile-benefit-grid article > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: #1b6d47;
  background: #aee9eb;
  font-weight: 1000;
}

.profile-benefit-grid strong {
  font-size: .96rem;
}

.profile-benefit-grid small {
  color: #59615d;
  font-weight: 650;
  line-height: 1.35;
}

.profile-guest-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.account-gate-free {
  flex-basis: 100%;
  color: #52615b;
  font-weight: 800;
  text-align: center;
}

.profile-own-view,
.social-own-view {
  display: grid;
  gap: 14px;
}

.profile-header-card,
.profile-collection-card,
.profile-showcase,
.social-account-strip,
.social-tab-panel,
.social-shared-view {
  border: 3px solid var(--line);
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(28, 35, 40, .14);
}

.profile-header-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-top: 8px solid #348b5d;
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.profile-header-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(90deg, rgba(255, 253, 247, .92), rgba(255, 253, 247, .42)), var(--profile-banner, none);
  background-position: var(--profile-banner-position, center);
  background-size: cover;
  transition: opacity .2s ease;
}

.profile-header-card.profile-has-banner::before { opacity: 1; }
.profile-header-card > * { position: relative; z-index: 1; }

.profile-own-view {
  --profile-accent: #348b5d;
}

.profile-own-view .profile-header-card,
.profile-own-view .profile-collection-card,
.profile-own-view .profile-showcase,
.profile-own-view .profile-sticker-studio,
.profile-own-view .profile-style-card {
  border-top-color: var(--profile-accent);
}

.profile-own-view .profile-header-card,
.profile-own-view .profile-collection-card,
.profile-own-view .profile-showcase,
.profile-own-view .profile-sticker-studio,
.profile-own-view .profile-style-card {
  background-color: var(--profile-tint, #fffdf7);
}

.profile-own-view .profile-header-card {
  background-image: linear-gradient(135deg, var(--profile-tint, #fffdf7), #fffdf7 62%);
}

.profile-own-view .social-avatar,
.profile-own-view .social-title-chip,
.profile-own-view .profile-status-chip {
  background: var(--profile-accent);
}

.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-header-card {
  border-style: solid;
  border-width: 11px;
  border-image-slice: 3;
  image-rendering: pixelated;
}
.profile-own-view[data-profile-frame="velddagboek-frame"] .profile-header-card { border-color: #382b21 #8d6239 #edcf9d; box-shadow: 0 5px 0 #5c3c27, inset 0 0 0 4px #d3aa74; }
.profile-own-view[data-profile-frame="brons-frame"] .profile-header-card { border-color: #3f251a #8b4522 #efad62; box-shadow: 0 5px 0 #63321b, inset 0 0 0 4px #c26d2d; }
.profile-own-view[data-profile-frame="zilver-frame"] .profile-header-card { border-color: #303942 #758491 #f3f7f6; box-shadow: 0 5px 0 #59636d, inset 0 0 0 4px #c7d0d4; }
.profile-own-view[data-profile-frame="goud-frame"] .profile-header-card { border-color: #503411 #bb7b12 #fff4a9; box-shadow: 0 5px 0 #815415, inset 0 0 0 4px #e5b836; }
.profile-own-view[data-profile-frame="diamant-frame"] .profile-header-card { border-color: #174f80 #3f9fc9 #eefeff; box-shadow: 0 5px 0 #1c6d9b, inset 0 0 0 4px #a3edfb; }
.profile-own-view[data-profile-frame="varen-frame"] .profile-header-card { border-color: #254a32 #5e9b4d #d6e995; box-shadow: 0 5px 0 #315c37, inset 0 0 0 4px #8fc76f; }
.profile-own-view[data-profile-frame="waterlijn-frame"] .profile-header-card { border-color: #123e5d #1e78a4 #9ceeff; box-shadow: 0 5px 0 #185a7e, inset 0 0 0 4px #56bee0; }
.profile-own-view[data-profile-frame="jade-frame"] .profile-header-card { border-color: #163d36 #22694f #b6edb2; box-shadow: 0 5px 0 #1a4f40, inset 0 0 0 4px #59b980; }
.profile-own-view[data-profile-frame="nacht-frame"] .profile-header-card { border-color: #3e1720 #942d3b #ffb2b7; box-shadow: 0 5px 0 #611e2b, inset 0 0 0 4px #d35862; }
.profile-own-view[data-profile-frame="kristal-frame"] .profile-header-card { border-color: #493b73 #967fd2 #f7e9ff; box-shadow: 0 5px 0 #62508e, inset 0 0 0 4px #d2a8ee; }

.profile-header-copy h3 {
  margin: 2px 0 5px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

.profile-header-copy p {
  margin: 0 0 8px;
  color: #4d5651;
  font-size: .88rem;
  font-weight: 700;
}

.profile-card-actions {
  justify-content: flex-end;
}

.profile-collection-card,
.profile-showcase,
.social-tab-panel {
  padding: clamp(14px, 2.5vw, 20px);
}

.profile-style-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 3px solid var(--line);
  border-top: 8px solid var(--profile-accent);
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(28, 35, 40, .14);
}

.profile-style-card h3 { margin: 2px 0 5px; font-size: 1.05rem; }
.profile-style-card p:last-child { margin: 0; color: #4d5651; font-size: .85rem; font-weight: 700; }

.profile-sticker-studio {
  padding: 12px;
  border: 3px solid var(--line);
  border-top: 8px solid #7d858b;
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 5px 0 rgba(28, 35, 40, .14);
}

.profile-sticker-hint {
  margin: 0 0 7px;
  color: #4d5651;
  font-size: .76rem;
  font-weight: 700;
}

.profile-sticker-canvas {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 720px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 5px;
  background: #fff;
  background-image: linear-gradient(45deg, rgba(40, 45, 49, .035) 25%, transparent 25%), linear-gradient(-45deg, rgba(40, 45, 49, .035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(40, 45, 49, .035) 75%), linear-gradient(-45deg, transparent 75%, rgba(40, 45, 49, .035) 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
  touch-action: none;
  overscroll-behavior: contain;
}

.profile-sticker-canvas.has-custom-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
}

.profile-sticker-canvas[data-dynamic-canvas]:not([data-dynamic-canvas=""]) {
  background-size: 108%;
}

.profile-sticker-canvas[data-dynamic-canvas]:not([data-dynamic-canvas=""])::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

.profile-sticker-canvas[data-dynamic-canvas="river"] {
  animation: canvas-river-drift 9s steps(18) infinite alternate;
}

.profile-sticker-canvas[data-dynamic-canvas="river"]::before {
  background: repeating-linear-gradient(112deg, transparent 0 38px, rgba(174, 255, 239, .2) 40px 44px, transparent 46px 82px);
  mix-blend-mode: screen;
  animation: canvas-river-light 6s steps(12) infinite;
}

.profile-sticker-canvas[data-dynamic-canvas="clouds"] {
  animation: canvas-cloud-drift 14s steps(28) infinite alternate;
}

.profile-sticker-canvas[data-dynamic-canvas="clouds"]::before {
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .13) 42%, transparent 62%);
  animation: canvas-cloud-shine 12s steps(24) infinite;
}

.profile-sticker-canvas[data-dynamic-canvas="fireflies"]::before {
  background-image: radial-gradient(circle, #fff3a1 0 2px, transparent 3px), radial-gradient(circle, #ffc629 0 2px, transparent 3px), radial-gradient(circle, #ffe981 0 1px, transparent 2px);
  background-position: 12% 70%, 61% 82%, 83% 58%;
  background-size: 97px 83px, 137px 109px, 71px 127px;
  animation: canvas-fireflies 5s steps(10) infinite alternate;
}

.profile-sticker-empty { position: relative; z-index: 2; }

.dynamic-canvas-preview,
.dynamic-canvas-choice .profile-style-swatch {
  background-size: 108% !important;
  animation: canvas-preview-drift 7s steps(14) infinite alternate;
}

@keyframes canvas-river-drift { from { background-position: 48% 47%; } to { background-position: 53% 55%; } }
@keyframes canvas-river-light { from { transform: translate(-5%, -4%); opacity: .45; } to { transform: translate(6%, 7%); opacity: .9; } }
@keyframes canvas-cloud-drift { from { background-position: 44% center; } to { background-position: 56% center; } }
@keyframes canvas-cloud-shine { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
@keyframes canvas-fireflies { from { transform: translate(-2%, 2%); opacity: .35; } 45% { opacity: 1; } to { transform: translate(3%, -4%); opacity: .55; } }
@keyframes canvas-preview-drift { from { background-position: 45% 48%; } to { background-position: 55% 52%; } }

@media (prefers-reduced-motion: reduce) {
  .profile-sticker-canvas[data-dynamic-canvas]:not([data-dynamic-canvas=""]),
  .profile-sticker-canvas[data-dynamic-canvas]:not([data-dynamic-canvas=""])::before,
  .dynamic-canvas-preview,
  .dynamic-canvas-choice .profile-style-swatch { animation: none !important; }
}

.unlockable-canvas-preview {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
}

.profile-sticker-empty {
  max-width: 240px;
  margin: 0;
  color: #6b7378;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

.profile-canvas-sticker {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 9.25%;
  height: 9.25%;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1.8rem;
  font-weight: 1000;
  cursor: grab;
  transform: translate(-50%, -50%) rotate(var(--sticker-rotation, 0deg)) scaleX(var(--sticker-flip, 1)) scale(var(--sticker-scale, 1));
  transform-origin: center;
  user-select: none;
}

.profile-canvas-sticker.selected {
  z-index: 1;
  outline: 3px solid #f0c445;
  outline-offset: 3px;
}

.profile-sticker-resize-handle {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: 2px;
  background: #f0c445;
  box-shadow: 0 1px 0 #fff6b6;
  cursor: ew-resize;
  transform: translateY(-50%) scale(var(--sticker-control-scale, 1));
  transform-origin: center;
  touch-action: none;
}

.profile-canvas-sticker.selected .profile-sticker-resize-handle { display: block; }
.profile-sticker-resize-handle-left { left: -11px; }
.profile-sticker-resize-handle-right { right: -11px; }

.profile-canvas-sticker:active { cursor: grabbing; }

.profile-canvas-sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.profile-sticker-canvas[data-sticker-effect="underwater"] .profile-canvas-sticker img {
  filter: sepia(.08) saturate(.78) hue-rotate(128deg) brightness(.82) contrast(.94);
}

.profile-sticker-canvas[data-sticker-effect="night"] .profile-canvas-sticker img {
  filter: sepia(.14) saturate(.72) hue-rotate(168deg) brightness(.58) contrast(1.08);
}

.profile-sticker-canvas[data-sticker-effect="underwater"] .profile-canvas-sticker::after,
.profile-sticker-canvas[data-sticker-effect="night"] .profile-canvas-sticker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: color;
}

.profile-sticker-canvas[data-sticker-effect="underwater"] .profile-canvas-sticker::after { background: rgba(24, 146, 161, .28); }
.profile-sticker-canvas[data-sticker-effect="night"] .profile-canvas-sticker::after { background: rgba(22, 42, 112, .38); }

.profile-sticker-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.profile-sticker-choice {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 68px;
  padding: 10px 18px 10px 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #f4f6f6;
  font: inherit;
  font-size: .92rem;
  font-weight: 900;
  cursor: pointer;
}

.profile-sticker-choice span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 52px;
  overflow: hidden;
}

.profile-sticker-choice span img {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain;
  image-rendering: pixelated;
}

.profile-sticker-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.profile-sticker-actions button:disabled { opacity: .45; cursor: not-allowed; }
.profile-sticker-icon-button.profile-sticker-menu-toggle { display: none; }

@media (max-width: 700px) and (orientation: portrait) {
  html,
  body { overscroll-behavior-x: none; }

  .profile-sticker-studio { position: relative; }

  .profile-sticker-icon-button.profile-sticker-menu-toggle {
    display: grid;
    margin-top: auto;
    color: #fff;
    background: var(--profile-accent, #348b5d);
  }

  .profile-sticker-menu-toggle[aria-expanded="true"] {
    outline: 3px solid color-mix(in srgb, var(--profile-accent, #348b5d) 42%, white);
    outline-offset: 2px;
  }

  .profile-sticker-tray {
    position: static;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-height: none;
    margin: 12px 0 0;
    padding: 10px;
    overflow: visible;
    border: 3px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--profile-secondary, #fff) 88%, #fff 12%);
    box-shadow: 0 5px 0 rgba(23, 24, 29, .18);
  }

  .profile-sticker-tray.mobile-open { display: grid; }

  .profile-sticker-tray.mobile-open::before {
    grid-column: 1 / -1;
    margin: 0 2px 3px;
    content: "Kies een sticker";
    color: var(--ink);
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .profile-sticker-tray .profile-sticker-choice {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 78px;
    padding: 6px 4px;
    font-size: .64rem;
    line-height: 1.05;
    text-align: center;
  }

  .profile-sticker-tray .profile-sticker-choice span {
    width: 46px;
    height: 42px;
  }

  .profile-sticker-tray .profile-sticker-choice span img {
    width: 44px;
    height: 44px;
  }

  .profile-sticker-tray .profile-sticker-choice strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.profile-collection-card {
  border-top: 8px solid #2f8f5e;
}

.profile-showcase {
  border-top: 8px solid #2f8fc5;
}

.profile-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-section-heading h3 {
  margin: 3px 0 0;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.1;
}

.profile-status-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: #267348;
  background: #e4f5e4;
  font-size: .73rem;
  font-weight: 1000;
  white-space: nowrap;
}

.profile-page .social-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
}

.profile-page .social-stat-grid span {
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: #53615a;
  background: #f7f4ea;
}

.profile-page .social-stat-grid strong {
  overflow: hidden;
  color: #1b6d47;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-account-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-top: 7px solid #2f8fc5;
}

.social-account-strip p {
  flex: 1;
  min-width: 180px;
  margin: 0;
  color: #4d5651;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
}

.social-tab-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.social-tab {
  min-height: 48px;
  padding: 8px 12px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.social-tab.active {
  color: #fff;
  background: #2f8fc5;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
}

.social-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 4px;
  padding-inline: 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: .75rem;
}

.social-tab-panel {
  border-top: 7px solid #2f8fc5;
}

.social-panel-intro {
  margin: 0 0 14px;
  color: #4d5651;
  font-weight: 680;
  line-height: 1.45;
}

.social-friend-grid {
  grid-template-columns: minmax(0, 1fr);
}

.social-friend-card {
  display: block;
  min-height: 0;
  padding: 7px;
  border: 0;
  border-radius: 6px;
  background: var(--social-profile-frame);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.social-friend-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(28, 35, 40, .24); }
.social-friend-card:focus-visible { outline: 4px solid #2f8fc5; outline-offset: 3px; }

.social-friend-card:is(
  [data-profile-frame="waterlijn-frame"],
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"],
  [data-profile-frame="rode-diamant-frame"],
  [data-profile-frame="kristal-frame"]
) {
  position: relative;
  isolation: isolate;
}

.social-friend-card:is(
  [data-profile-frame="waterlijn-frame"],
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"],
  [data-profile-frame="rode-diamant-frame"]
)::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 7px;
  border-radius: inherit;
  background: repeating-linear-gradient(105deg, transparent 0 72px, rgba(255,255,255,.2) 92px, rgba(255,255,255,.92) 110px, rgba(255,255,255,.28) 130px, transparent 150px 240px) 0 50% / 240px 100%;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: legendary-frame-glint 22s linear infinite;
}

.social-friend-card[data-profile-frame="kristal-frame"]::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 7px;
  border-radius: inherit;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--opal-speck) 88%, white) 0 2.5px, transparent 3.5px) 0 4px / 66px 42px,
    repeating-linear-gradient(110deg, transparent 0 22px, color-mix(in srgb, var(--opal-base) 72%, transparent) 48px, color-mix(in srgb, var(--opal-glow) 96%, transparent) 76px, rgba(255,255,255,.82) 98px, color-mix(in srgb, var(--opal-glow) 82%, transparent) 120px, color-mix(in srgb, var(--opal-base) 66%, transparent) 146px, transparent 174px 190px) 0 50% / 190px 100%;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: opal-card-frame-flow 8.5s ease-in-out infinite alternate;
}

@keyframes opal-card-frame-flow {
  from { background-position: 0 4px, 0 50%; }
  to { background-position: 18px 9px, 225px 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .social-friend-card::before { animation: none !important; }
}

.social-friend-card-inner {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 150px;
  padding: 15px;
  border: 2px solid rgba(28, 35, 40, .7);
  border-radius: 3px;
  background-color: #edf8f1;
  background-position: center;
  background-size: cover;
}

.social-friend-identity { min-width: 0; }
.social-friend-identity > * { display: block; }
.social-friend-identity strong { font-size: 1.3rem; }
.social-friend-username { margin: 2px 0 5px; color: var(--ink) !important; }
.social-friend-title { display: inline-flex; width: fit-content; margin-top: 8px; }

.social-friend-card .social-card-actions {
  grid-column: 1 / -1;
}

.social-friend-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: #2f8fc5;
  font-weight: 1000;
}

.social-friend-avatar.large {
  width: 52px;
  height: 52px;
  font-size: 1.35rem;
}

.social-friend-card strong,
.social-search-card strong,
.social-request-card strong {
  display: block;
  font-size: 1rem;
}

.social-friend-card small,
.social-search-card small {
  color: #52615b;
  font-weight: 700;
}

.social-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.social-card-actions .secondary-button,
.social-card-actions .primary-button,
.text-danger-button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: .78rem;
}

.text-danger-button {
  border: 2px solid #9e3737;
  border-radius: 5px;
  color: #962c2c;
  background: #fff0ef;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.social-profile-preview {
  display: grid;
  gap: 12px;
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  margin: auto;
  padding: 48px 20px 22px;
  overflow: auto;
  border: 4px solid var(--line);
  border-radius: 9px;
  background: #f7f4ea;
  box-shadow: 0 10px 0 rgba(20, 27, 31, .3);
}

.social-readonly-profile-shell {
  min-height: 0;
  padding: clamp(14px, 3vw, 28px);
  border: 3px solid var(--line);
  border-radius: 8px;
  background-position: center top;
  background-size: cover;
}

.friend-profile-page,
#friendProfilePageContent { width: 100%; }

.friend-profile-page .social-readonly-profile-shell {
  min-height: calc(100vh - 160px);
  background-attachment: fixed;
}

.social-readonly-profile {
  display: grid !important;
  gap: 18px;
  width: min(100%, 1020px);
  margin: 0 auto;
}

.social-readonly-profile .profile-sticker-canvas-row { grid-template-columns: minmax(0, 1fr); }
.social-readonly-profile .profile-sticker-canvas { pointer-events: none; }
.social-readonly-profile .social-badge,
.social-readonly-profile .social-skill-medal {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.social-readonly-profile .social-badge.locked .social-badge-mark {
  opacity: .2;
  filter: grayscale(1);
}

.social-readonly-profile .social-badge.locked strong { opacity: .45; }
.social-readonly-sticker {
  position: absolute;
  width: 12%;
  height: 12%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
}

.social-profile-preview:not([open]) { display: none; }
.social-profile-preview::backdrop { background: rgba(14, 23, 31, .72); backdrop-filter: blur(3px); }
.social-profile-detail-close { position: absolute; top: 10px; right: 10px; z-index: 5; }

.social-detail-profile-header {
  padding: 7px;
  border-radius: 7px;
}

.social-detail-profile-header-inner {
  min-height: 150px;
  padding: 18px;
  border: 2px solid rgba(28, 35, 40, .72);
  border-radius: 3px;
  background-color: #edf8f1;
  background-position: center;
  background-size: cover;
}

.social-detail-profile-header-inner h4 { font-size: clamp(1.55rem, 4vw, 2.2rem); }
.social-detail-profile-header-inner .social-title-chip { display: inline-flex; margin-top: 7px; }

.social-detail-profile-section {
  padding: 15px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fffdf7;
}

.social-detail-profile-section h4 { margin: 0 0 10px; font-size: 1.2rem; }
.social-detail-sticker-canvas {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 5px;
  background-color: #edf0ee;
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
}

.social-detail-sticker-canvas img {
  position: absolute;
  width: 12%;
  height: 12%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
}

.social-profile-preview header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-profile-preview h4 {
  margin: 0 0 3px;
  font-size: 1.15rem;
}

.social-profile-preview p {
  margin: 0;
  color: #52615b;
  font-weight: 700;
}

.social-preview-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.social-preview-facts span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 5px;
  color: #52615b;
  background: #fffdf7;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.social-preview-facts strong {
  overflow: hidden;
  color: #176f9d;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-recent-title {
  color: var(--ink) !important;
  font-size: .77rem;
  font-weight: 1000 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.social-recent-species {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.social-recent-species span {
  padding: 4px 7px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  font-size: .74rem;
  font-weight: 850;
}

.social-request-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.social-request-columns > section {
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #f7f4ea;
}

.social-request-list,
.social-search-results {
  display: grid;
  gap: 8px;
}

.social-request-card,
.social-search-card {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fffdf7;
}

.social-request-card p {
  margin: 0;
  color: #52615b;
  font-size: .83rem;
  font-weight: 700;
}

.social-request-card.social-friend-card {
  display: block;
  gap: 0;
  padding: 7px;
  border: 0;
  background: var(--social-profile-frame);
}

.social-request-profile-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 190px;
  min-width: 190px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 253, 247, .94);
}

.social-request-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.social-request-profile-row .social-request-profile-card { min-width: 0; }

.request-accept-button,
.request-decline-button {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 3px 0 var(--line);
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
}

.request-accept-button { background: #2f8f5e; }
.request-decline-button { background: #d93535; }

.social-request-profile-status {
  width: 100%;
  margin-bottom: 3px;
  color: #52615b;
  font-size: .76rem;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
}

.social-request-profile-actions > button { width: 100%; }

@media (max-width: 640px) {
  .social-request-profile-row { grid-template-columns: minmax(0, 1fr); }
  .social-request-profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: auto;
    min-width: 0;
    padding: 8px;
  }
  .social-request-profile-status { grid-column: 1 / -1; white-space: normal; }
}

.social-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.social-search-form > .primary-button {
  min-width: 108px;
  min-height: 42px;
  justify-content: center;
  white-space: nowrap;
}

.social-search-form label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
  font-weight: 950;
}

.social-search-form input {
  min-height: 42px;
  padding: 8px 10px;
  border: 3px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: #e7f8ef;
  font: inherit;
}

.social-search-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.social-empty-state {
  margin: 0;
  padding: 12px;
  border: 2px dashed #77847d;
  border-radius: 6px;
  color: #52615b;
  background: rgba(247, 243, 232, .65);
  font-weight: 700;
  line-height: 1.45;
}

.password-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
}

.password-input input {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
}

.password-toggle,
.account-inline-button {
  border: 0;
  color: #176f9d;
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.password-toggle {
  padding: 0 10px;
  border-left: 2px solid var(--line);
}

.account-inline-button {
  padding: 0;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .profile-page,
  .social-page,
  .settings-page {
    gap: 12px;
    padding: 10px;
    border-width: 3px;
  }

  .profile-page .social-hero,
  .social-page .social-hero,
  .settings-page .social-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .profile-page .social-hero h2,
  .social-page .social-hero h2,
  .settings-page .social-hero h2 {
    font-size: 1.85rem;
  }

  .profile-guest-view {
    grid-template-columns: 1fr;
  }

  .profile-guest-actions {
    justify-content: stretch;
  }

  .profile-guest-actions button {
    flex: 1 1 145px;
  }

  .profile-header-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .profile-card-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .profile-card-actions button {
    flex: 1 1 150px;
  }

  .profile-style-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-style-card .secondary-button {
    width: 100%;
  }

  .profile-page .social-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-sticker-studio { padding: 13px; }

  .social-account-strip {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .social-account-strip p {
    flex-basis: 100%;
  }

  .social-tab-list {
    gap: 5px;
  }

  .social-tab {
    min-height: 44px;
    padding: 6px 4px;
    font-size: .76rem;
  }

  .social-tab span {
    min-width: 19px;
    height: 19px;
    margin-left: 2px;
    font-size: .68rem;
  }

  .social-request-columns {
    grid-template-columns: 1fr;
  }

  .social-search-form {
    grid-template-columns: 1fr;
  }

  .social-search-form button {
    width: 100%;
  }

  .social-search-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .social-search-card button {
    grid-column: 1 / -1;
  }

  .social-preview-facts {
    grid-template-columns: 1fr;
  }
}

.profile-favorite-habitat {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: .84rem;
  font-weight: 700;
}

/* Instellingen: rustige, uitklapbare secties uit het menu zonder een tweede app-laag. */
.settings-page {
  background: rgba(236, 248, 238, .96);
}

.settings-stack {
  display: grid;
  gap: 10px;
}

.settings-section {
  overflow: clip;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 4px 0 rgba(34, 40, 53, .18);
}

.settings-section > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-size: 1.04rem;
  font-weight: 900;
}

.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after {
  grid-column: 2;
  grid-row: 1;
  content: "+";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  line-height: 1;
}
.settings-section[open] > summary { border-bottom: 2px solid var(--line); background: #e2f4e5; }
.settings-section[open] > summary::after { content: "-"; }
.settings-section > summary small { grid-column: 1; color: var(--ink-muted); font-size: .76rem; font-weight: 700; }

.settings-content {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.settings-content > p { max-width: 760px; margin: 0; color: var(--ink-muted); font-weight: 650; line-height: 1.55; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.settings-note { font-size: .84rem; }
.settings-legal-links { display: flex; gap: 14px; flex-wrap: wrap; }
.text-button { padding: 0; border: 0; color: #1b6d9d; background: transparent; font: inherit; font-weight: 850; text-decoration: underline; cursor: pointer; }

.settings-toggles { gap: 0; }
.settings-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #d7d5cd;
  cursor: pointer;
}
.settings-toggle:last-of-type { border-bottom: 0; }
.settings-toggle strong, .settings-toggle small { display: block; }
.settings-toggle strong { font-size: .94rem; }
.settings-toggle small { margin-top: 3px; color: var(--ink-muted); font-size: .77rem; font-weight: 650; line-height: 1.35; }
.settings-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.settings-toggle i { position: relative; width: 48px; height: 27px; border: 2px solid var(--line); border-radius: 20px; background: #d9e1e1; transition: background .16s ease; }
.settings-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border: 2px solid var(--line); border-radius: 50%; background: #fffdf7; transition: transform .16s ease; }
.settings-toggle input:checked + i { background: #3b9464; }
.settings-toggle input:checked + i::after { transform: translateX(19px); }
.settings-toggle input:focus-visible + i { outline: 3px solid #59a5ff; outline-offset: 3px; }
.settings-toggle input:disabled + i { opacity: .42; cursor: not-allowed; }

.settings-control-grid { grid-template-columns: minmax(220px, 360px); align-items: start; }
.settings-select { display: grid; gap: 6px; font-weight: 850; }
.settings-select select { min-height: 44px; padding: 0 12px; border: 2px solid var(--line); border-radius: 6px; color: var(--ink); background: #fffdf7; font: inherit; font-weight: 750; }

.settings-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 3px solid #913b3b;
  border-radius: 8px;
  color: #512d2d;
  background: #fff0ee;
}
.settings-danger-zone h3 { margin: 3px 0 5px; font-size: 1.2rem; }
.settings-danger-zone p:not(.kicker) { max-width: 680px; margin: 0; font-size: .86rem; font-weight: 650; }
.danger-button { padding: 10px 14px; border: 3px solid var(--line); border-radius: 6px; color: #fff; background: #b44640; box-shadow: 0 3px 0 #232a36; font: inherit; font-weight: 900; cursor: pointer; }

/* Accessibility: only change the category strip on collection cards. */
body.colorblind-mode .species-card.group-zoogdier { --group: #CC79A7; }
body.colorblind-mode .species-card.group-vogel { --group: #009E73; }
body.colorblind-mode .species-card.group-reptiel { --group: #E69F00; }
body.colorblind-mode .species-card.group-amfibie { --group: #56B4E9; }
body.colorblind-mode .species-card.group-vis { --group: #0072B2; }
body.colorblind-mode .species-card.group-ongewervelde { --group: #D55E00; }

@media (max-width: 640px) {
  .settings-section > summary { padding: 13px 14px; }
  .settings-content { padding: 14px; }
  .settings-danger-zone { display: grid; padding: 15px; }
  .settings-danger-zone .settings-actions { width: 100%; }
  .settings-danger-zone .settings-actions > * { flex: 1 1 160px; }
}

/* Het profiel neemt de gekozen banner en kleur als volledige pagina-achtergrond over. */
.profile-page {
  --profile-page-accent: #f7f8f8;
  --profile-page-overlay: rgba(247, 248, 248, .9);
  --profile-page-banner: none;
  background: #f7f8f8;
}
.profile-page.profile-page-customised {
  background-color: var(--profile-page-accent);
  background-image: linear-gradient(180deg, var(--profile-page-overlay), rgba(255, 253, 247, .9) 76%), var(--profile-page-banner);
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
.profile-page.profile-signed-in > .profile-hero,
.profile-page.profile-signed-in > .profile-guest-view {
  display: none !important;
}
.profile-page .social-hero { border-top-color: #8a9095; background: linear-gradient(135deg, #ffffff, #edf0f1); }
.profile-page .social-hero .kicker,
.profile-page .profile-header-copy .kicker,
.profile-page .profile-section-heading .kicker { color: #565d63; }
.profile-page .profile-benefit-grid article,
.profile-page .social-stat-grid span { background: #f3f5f5; }
.profile-page .profile-benefit-grid article > span { color: #4f565c; background: #e0e4e6; }
.profile-page .social-avatar { color: #fff; background: #6d747a; }
.profile-page .profile-header-card,
.profile-page .profile-collection-card,
.profile-page .profile-showcase { border-top-color: #7d858b; }
.profile-page .social-title-chip,
.profile-page .profile-status-chip { color: #43494e; background: #e6e9ea; }
.profile-page .social-stat-grid strong { color: #464d53; }
.profile-page .social-progress-track span { background: linear-gradient(90deg, #596168, #91989d); }
.profile-page .primary-button { background: #555d64; }
.profile-page .secondary-button { background: #f7f8f8; }

.profile-own-view[data-profile-frame="velddagboek-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="velddagboek-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="velddagboek-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="velddagboek-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="velddagboek-frame"] .profile-style-card { background-color: #fff0d8; }
.profile-own-view[data-profile-frame="brons-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="brons-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="brons-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="brons-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="brons-frame"] .profile-style-card { background-color: #fff0e2; }
.profile-own-view[data-profile-frame="zilver-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="zilver-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="zilver-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="zilver-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="zilver-frame"] .profile-style-card { background-color: #eef2f4; }
.profile-own-view[data-profile-frame="goud-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="goud-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="goud-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="goud-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="goud-frame"] .profile-style-card { background-color: #fff8d7; }
.profile-own-view[data-profile-frame="diamant-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="diamant-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="diamant-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="diamant-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="diamant-frame"] .profile-style-card { background-color: #e7f8ff; }
.profile-own-view[data-profile-frame="varen-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="varen-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="varen-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="varen-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="varen-frame"] .profile-style-card { background-color: #edf7dd; }
.profile-own-view[data-profile-frame="waterlijn-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="waterlijn-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="waterlijn-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="waterlijn-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="waterlijn-frame"] .profile-style-card { background-color: #e1f5ff; }
.profile-own-view[data-profile-frame="jade-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="jade-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="jade-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="jade-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="jade-frame"] .profile-style-card { background-color: #e3f5e7; }
.profile-own-view[data-profile-frame="nacht-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="nacht-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="nacht-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="nacht-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="nacht-frame"] .profile-style-card { background-color: #ffe9ec; }
.profile-own-view[data-profile-frame="kristal-frame"] .profile-header-card,
.profile-own-view[data-profile-frame="kristal-frame"] .profile-collection-card,
.profile-own-view[data-profile-frame="kristal-frame"] .profile-showcase,
.profile-own-view[data-profile-frame="kristal-frame"] .profile-sticker-studio,
.profile-own-view[data-profile-frame="kristal-frame"] .profile-style-card { background-color: #f2ebff; }

/* Het kleurthema bepaalt altijd de vulling; het kader bepaalt alleen de rand. */
.profile-own-view .profile-header-card,
.profile-own-view .profile-collection-card,
.profile-own-view .profile-showcase,
.profile-own-view .profile-sticker-studio,
.profile-own-view .profile-style-card {
  background-color: var(--profile-tint, #fffdf7);
}

.profile-own-view .profile-header-card {
  background-image: linear-gradient(135deg, var(--profile-tint, #fffdf7), #fffdf7 62%);
}

.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-header-card,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-collection-card,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-showcase,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-sticker-studio,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-style-card {
  border-style: solid;
  border-width: 11px;
  border-image: none;
  border-color: var(--profile-frame-dark) var(--profile-frame-mid) var(--profile-frame-light);
  box-shadow: 0 5px 0 var(--profile-frame-shadow), inset 0 0 0 4px var(--profile-frame-inset);
  image-rendering: pixelated;
}

.profile-own-view[data-profile-frame="velddagboek-frame"] { --profile-frame-dark: #382b21; --profile-frame-mid: #8d6239; --profile-frame-light: #edcf9d; --profile-frame-shadow: #5c3c27; --profile-frame-inset: #d3aa74; }
.profile-own-view[data-profile-frame="brons-frame"] { --profile-frame-dark: #3f251a; --profile-frame-mid: #8b4522; --profile-frame-light: #efad62; --profile-frame-shadow: #63321b; --profile-frame-inset: #c26d2d; }
.profile-own-view[data-profile-frame="zilver-frame"] { --profile-frame-dark: #303942; --profile-frame-mid: #758491; --profile-frame-light: #f3f7f6; --profile-frame-shadow: #59636d; --profile-frame-inset: #c7d0d4; }
.profile-own-view[data-profile-frame="goud-frame"] { --profile-frame-dark: #503411; --profile-frame-mid: #bb7b12; --profile-frame-light: #fff4a9; --profile-frame-shadow: #815415; --profile-frame-inset: #e5b836; }
.profile-own-view[data-profile-frame="diamant-frame"] { --profile-frame-dark: #174f80; --profile-frame-mid: #3f9fc9; --profile-frame-light: #eefeff; --profile-frame-shadow: #1c6d9b; --profile-frame-inset: #a3edfb; }
.profile-own-view[data-profile-frame="varen-frame"] { --profile-frame-dark: #4f8d7c; --profile-frame-mid: #86cfba; --profile-frame-light: #d5fff2; --profile-frame-shadow: #397263; --profile-frame-inset: #a9ead7; }
.profile-own-view[data-profile-frame="waterlijn-frame"] { --profile-frame-dark: #123e5d; --profile-frame-mid: #1e78a4; --profile-frame-light: #9ceeff; --profile-frame-shadow: #185a7e; --profile-frame-inset: #56bee0; }
.profile-own-view[data-profile-frame="jade-frame"] { --profile-frame-dark: #0d2b22; --profile-frame-mid: #14523c; --profile-frame-light: #5fa578; --profile-frame-shadow: #081e17; --profile-frame-inset: #2f7654; }
.profile-own-view[data-profile-frame="nacht-frame"] { --profile-frame-dark: #3e1720; --profile-frame-mid: #942d3b; --profile-frame-light: #ffb2b7; --profile-frame-shadow: #611e2b; --profile-frame-inset: #d35862; }
.profile-own-view[data-profile-frame="kristal-frame"] { --profile-frame-dark: #493b73; --profile-frame-mid: #967fd2; --profile-frame-light: #f7e9ff; --profile-frame-shadow: #62508e; --profile-frame-inset: #d2a8ee; }
.profile-own-view[data-profile-frame="zandsteen-frame"] { --profile-frame-dark: #80652e; --profile-frame-mid: #c5a95f; --profile-frame-light: #f4e6b8; --profile-frame-shadow: #9b7a38; --profile-frame-inset: #ddc783; }
.profile-own-view[data-profile-frame="grafiet-frame"] { --profile-frame-dark: #3c4246; --profile-frame-mid: #70777c; --profile-frame-light: #c1c6ca; --profile-frame-shadow: #2e3337; --profile-frame-inset: #969da2; }
.profile-own-view[data-profile-frame="obsidiaan-frame"] { --profile-frame-dark: #050505; --profile-frame-mid: #29292f; --profile-frame-light: #696970; --profile-frame-shadow: #000000; --profile-frame-inset: #44444b; }
.profile-own-view[data-profile-frame="amethist-frame"] { --profile-frame-dark: #6420a0; --profile-frame-mid: #b95edb; --profile-frame-light: #f5a8d5; --profile-frame-shadow: #481577; --profile-frame-inset: #d982e6; }
.profile-own-view[data-profile-frame="fluoriet-frame"] { --profile-frame-dark: #397bd1; --profile-frame-mid: #a894ff; --profile-frame-light: #ffb8e1; --profile-frame-shadow: #6654b8; --profile-frame-inset: #78cfff; }
.profile-own-view[data-profile-frame="amazoniet-verloop-frame"] { --profile-frame-dark: #176653; --profile-frame-mid: #39aa91; --profile-frame-light: #c9fff0; --profile-frame-shadow: #1e7d69; --profile-frame-inset: #6ed7bb; }
.profile-own-view[data-profile-frame="citrien-frame"] { --profile-frame-dark: #9f4f00; --profile-frame-mid: #ffb12d; --profile-frame-light: #fff0a3; --profile-frame-shadow: #d87400; --profile-frame-inset: #ffe26e; }
.profile-own-view[data-profile-frame="unakiet-frame"] { --profile-frame-dark: #5a3a27; --profile-frame-mid: #b76541; --profile-frame-light: #f2a15f; --profile-frame-shadow: #6f4a2f; --profile-frame-inset: #d88157; }
.profile-own-view[data-profile-frame="saffier-frame"] { --profile-frame-dark: #071d4f; --profile-frame-mid: #164ba0; --profile-frame-light: #5e98e8; --profile-frame-shadow: #061638; --profile-frame-inset: #3675ca; }
.profile-own-view[data-profile-frame="rode-diamant-frame"] { --profile-frame-dark: #160006; --profile-frame-mid: #68001c; --profile-frame-light: #a82a48; --profile-frame-shadow: #050505; --profile-frame-inset: #8f1735; }

/* De duurste edelsteenkaders hebben een doorlopend kleurverloop over de hele rand. */
.profile-own-view[data-profile-frame="amethist-frame"] { --profile-frame-gradient: linear-gradient(135deg, #f5a8d5 0%, #b95edb 48%, #6420a0 100%); }
.profile-own-view[data-profile-frame="fluoriet-frame"] { --profile-frame-gradient: linear-gradient(90deg, #56b4ff 0%, #a894ff 50%, #ff9ed8 100%); }
.profile-own-view[data-profile-frame="amazoniet-verloop-frame"] { --profile-frame-gradient: linear-gradient(180deg, #176653 0%, #39aa91 48%, #c9fff0 100%); }
.profile-own-view[data-profile-frame="citrien-frame"] { --profile-frame-gradient: linear-gradient(135deg, #fff078 0%, #ffb12d 52%, #d87400 100%); }
.profile-own-view[data-profile-frame="unakiet-frame"] { --profile-frame-gradient: linear-gradient(110deg, #4e5b32 0%, #758044 30%, #b76541 46%, #e38a4c 55%, #65733b 72%, #6f4a2f 100%); }
.profile-own-view[data-profile-frame="waterlijn-frame"] { --profile-frame-gradient: linear-gradient(180deg, #74cfff 0%, #dff8ff 32%, #ffffff 48%, #c8f1ff 62%, #8fd6ff 100%); }
.profile-own-view[data-profile-frame="rode-diamant-frame"] { --profile-frame-gradient: linear-gradient(135deg, #160006 0%, #550016 34%, #8f1735 52%, #30000c 72%, #050505 100%); }
.profile-own-view[data-profile-frame="kristal-frame"] {
  --profile-frame-gradient: conic-gradient(from 35deg, var(--opal-base) 0 12%, var(--opal-glow) 20%, var(--opal-base) 30%, var(--opal-speck) 31% 33%, var(--opal-base) 34% 46%, var(--opal-glow) 55%, var(--opal-speck) 56% 58%, var(--opal-base) 59% 73%, var(--opal-glow) 82%, var(--opal-base) 91%, var(--opal-speck) 92% 94%, var(--opal-base) 95% 100%);
}

/* Legendarische en mythische kaders bewegen heel licht, als glans over een edelsteen. */
.profile-own-view:is(
  [data-profile-frame="waterlijn-frame"],
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"],
  [data-profile-frame="rode-diamant-frame"],
  [data-profile-frame="kristal-frame"]
) :is(.profile-header-card, .profile-collection-card, .profile-showcase, .profile-sticker-studio, .profile-style-card) {
  position: relative;
}

.profile-own-view:is(
  [data-profile-frame="waterlijn-frame"],
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"],
  [data-profile-frame="rode-diamant-frame"],
  [data-profile-frame="kristal-frame"]
) :is(.profile-header-card, .profile-collection-card, .profile-showcase, .profile-sticker-studio, .profile-style-card)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -10px;
  padding: 5px;
  border-radius: inherit;
  background:
    repeating-linear-gradient(105deg, transparent 0 82px, color-mix(in srgb, var(--profile-frame-light) 42%, transparent) 102px, rgba(255,255,255,.82) 120px, color-mix(in srgb, var(--profile-frame-mid) 34%, transparent) 138px, transparent 158px 240px) 0 50% / 240px 100%,
    var(--profile-frame-gradient) center / 100% 100%;
  opacity: .88;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: legendary-frame-glint 22s linear infinite;
}

.profile-own-view[data-profile-frame="kristal-frame"] :is(.profile-header-card, .profile-collection-card, .profile-showcase, .profile-sticker-studio, .profile-style-card)::before {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--opal-speck) 88%, white) 0 2.5px, transparent 3.5px) 0 4px / 66px 42px,
    repeating-linear-gradient(110deg, transparent 0 22px, color-mix(in srgb, var(--opal-base) 72%, transparent) 48px, color-mix(in srgb, var(--opal-glow) 96%, transparent) 76px, rgba(255,255,255,.82) 98px, color-mix(in srgb, var(--opal-glow) 82%, transparent) 120px, color-mix(in srgb, var(--opal-base) 66%, transparent) 146px, transparent 174px 190px) 0 50% / 190px 100%,
    var(--profile-frame-gradient) 42% 50% / 145% 145%;
  opacity: .94;
  animation: opal-frame-flow 8.5s ease-in-out infinite alternate;
}

@keyframes legendary-frame-glint {
  from { background-position: 0 50%, center; }
  to { background-position: 240px 50%, center; }
}

@keyframes opal-frame-flow {
  from { background-position: 0 4px, 0 50%, 38% 46%; }
  to { background-position: 18px 9px, 225px 50%, 64% 56%; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-own-view[data-profile-frame] :is(.profile-header-card, .profile-collection-card, .profile-showcase, .profile-sticker-studio, .profile-style-card)::before {
    animation: none !important;
  }
}

.opal-colour-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 20px;
  overflow: auto;
  border: 4px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 8px 0 rgba(28, 35, 40, .28);
}

.opal-colour-dialog::backdrop { background: rgba(20, 25, 30, .58); }
.opal-colour-dialog h3 { margin: 0 0 5px; }
.opal-colour-dialog > p { margin: 0 0 16px; color: #52615b; font-weight: 700; }
.opal-colour-dialog fieldset { margin: 0 0 13px; padding: 12px; border: 2px solid var(--line); border-radius: 7px; }
.opal-colour-dialog legend { padding: 0 5px; font-weight: 1000; }
.opal-colour-dialog fieldset > small { display: block; margin-bottom: 9px; color: #52615b; font-weight: 700; }
.opal-colour-choices { display: grid; grid-template-columns: repeat(5, minmax(76px, 1fr)); gap: 8px; }
.opal-colour-choices button { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 7px 4px; border: 3px solid transparent; border-radius: 7px; color: var(--ink); background: #f1f3ef; font: inherit; cursor: pointer; }
.opal-colour-choices button.active { border-color: #2f8fc5; background: #e3f5ff; box-shadow: 0 2px 0 #1d5c83; }
.opal-colour-choices button > span { width: 34px; height: 34px; border: 2px solid var(--line); border-radius: 50%; background: var(--opal-choice); }
.opal-colour-choices button strong { max-width: 100%; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.opal-colour-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }

@media (max-width: 560px) {
  .opal-colour-dialog { padding: 14px; }
  .opal-colour-choices { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
}

.profile-own-view:is(
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"]
) .profile-header-card,
.profile-own-view:is(
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"]
) .profile-collection-card,
.profile-own-view:is(
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"]
) .profile-showcase,
.profile-own-view:is(
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"]
) .profile-sticker-studio,
.profile-own-view:is(
  [data-profile-frame="amethist-frame"],
  [data-profile-frame="fluoriet-frame"],
  [data-profile-frame="amazoniet-verloop-frame"],
  [data-profile-frame="citrien-frame"],
  [data-profile-frame="unakiet-frame"]
) .profile-style-card {
  border-color: transparent;
  border-image: var(--profile-frame-gradient) 1;
}

.profile-sticker-studio .profile-status-chip { display: none; }

/* Profiel: banner als rustige, vaste pagina-achtergrond; kleurthema bestuurt de interface. */
.profile-page.profile-page-customised {
  background-image: linear-gradient(180deg, var(--profile-page-overlay), var(--profile-page-overlay)), var(--profile-page-banner);
  background-position: center top, center top;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

.profile-own-view .profile-header-card,
.profile-own-view .profile-collection-card,
.profile-own-view .profile-showcase,
.profile-own-view .profile-sticker-studio,
.profile-own-view .profile-style-card {
  background-color: var(--profile-tint, #fffdf7);
}

.profile-own-view .profile-header-card {
  background-image: linear-gradient(135deg, var(--profile-tint, #fffdf7), rgba(255, 253, 247, .82) 62%);
}

.profile-own-view .profile-header-copy .kicker,
.profile-own-view .profile-section-heading .kicker,
.profile-own-view .profile-style-card .kicker,
.profile-own-view .profile-showcase-group h4,
.profile-own-view .profile-header-copy h3,
.profile-own-view .profile-section-heading h3,
.profile-own-view .profile-style-card h3 {
  color: var(--profile-accent);
}

.profile-own-view .social-title-chip,
.profile-own-view .profile-status-chip {
  color: #fff;
  background: var(--profile-accent);
}

.profile-own-view .social-stat-grid span {
  border-color: var(--profile-accent);
  background: color-mix(in srgb, var(--profile-tint) 88%, #fff 12%);
}

.profile-own-view .social-stat-grid strong { color: var(--profile-accent); }
.profile-own-view .social-progress-track span { background: linear-gradient(90deg, var(--profile-accent), color-mix(in srgb, var(--profile-accent) 55%, #fff)); }

.profile-header-copy h3 { font-size: clamp(1.65rem, 3.4vw, 2.25rem); }
.profile-header-copy p,
.profile-style-card p:last-child,
.profile-sticker-empty,
.profile-showcase p,
.profile-collection-card p { font-size: 1rem; }
.profile-style-card h3 { font-size: 1.25rem; }
.profile-section-heading h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }

.profile-sticker-canvas-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 800px);
  margin: 0 auto;
  gap: 12px;
}

.profile-sticker-canvas-row .profile-sticker-canvas {
  width: min(100%, 720px);
  margin: 0;
}

.profile-sticker-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.profile-sticker-icon-button {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 1000;
}

.profile-sticker-icon-button.danger-button {
  color: #fff;
  background: #d93535;
}

.trash-symbol {
  position: relative;
  display: block;
  width: 16px;
  height: 18px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 2px 2px;
}
.trash-symbol::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -5px;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.trash-symbol::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 3px;
  width: 6px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: currentColor;
}

.profile-sticker-rotate-handle {
  position: absolute;
  top: -17px;
  right: -17px;
  z-index: 5;
  display: none;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 2px 0 rgba(28, 35, 40, .22);
  font-size: 1.15rem;
  font-weight: 1000;
  line-height: 1;
  cursor: grab;
  transform: scale(var(--sticker-control-scale, 1));
  transform-origin: center;
  touch-action: none;
}
.profile-canvas-sticker.selected .profile-sticker-rotate-handle { display: grid; }

.profile-style-dialog {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  overflow: auto;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 12px 0 rgba(28, 35, 40, .24);
}
.profile-style-dialog::backdrop { background: rgba(20, 27, 31, .58); }
.profile-style-dialog-card { padding: 20px; }
.profile-style-dialog-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-style-dialog-card h3 { margin: 2px 0; font-size: 1.45rem; }
.profile-style-dialog-card > p { margin: 10px 0 18px; font-size: 1rem; font-weight: 700; color: #4d5651; }
.profile-style-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.profile-style-option-group { min-width: 0; padding: 12px; border: 2px solid #d7d2c8; border-radius: 7px; background: #faf8f1; }
.profile-colour-option-group,
.profile-style-option-group[data-style-type="Profielkader"],
.profile-style-option-group[data-style-type="Achtergrondbanner"],
.profile-style-option-group[data-style-type="Canvasachtergrond"] { grid-column: 1 / -1; }
.profile-colour-option-group { display: grid; grid-template-columns: 1fr; gap: 0; }
.profile-colour-option-group > h4 { grid-column: auto; }
.profile-style-option-group h4 { margin: 0 0 8px; color: var(--ink); font-size: 1rem; }
.profile-style-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-style-choice {
  min-height: 38px;
  padding: 7px 10px;
  border: 2px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: .96rem;
  font-weight: 900;
  cursor: pointer;
}
.profile-style-choice.active { color: #fff; background: var(--profile-accent, #348b5d); }
.profile-style-empty { margin: 7px 0 0; color: #6a7376; font-size: .9rem; font-weight: 700; }

/* Profielstijl: kleur, opvulling en kader zijn drie afzonderlijke lagen. */
.profile-own-view {
  --profile-primary: #ffffff;
  --profile-secondary: #ffffff;
  --profile-selection-colour: var(--profile-secondary);
  background: color-mix(in srgb, var(--profile-secondary) 20%, transparent);
  border: 3px solid var(--profile-secondary);
  border-radius: 8px;
  padding: 10px;
}

.profile-page.profile-page-customised {
  background-color: var(--profile-page-accent, #ffffff);
  background-image: none;
  background-attachment: fixed;
}

.profile-page.profile-page-customised.profile-page-has-banner {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--profile-page-accent) 48%, transparent), color-mix(in srgb, var(--profile-page-accent) 62%, transparent)), var(--profile-page-banner);
  background-position: center top, center top;
  background-size: cover, cover;
}

.profile-own-view .profile-header-card,
.profile-own-view .profile-collection-card,
.profile-own-view .profile-showcase,
.profile-own-view .profile-sticker-studio,
.profile-own-view .profile-style-card {
  color: var(--ink);
  background: color-mix(in srgb, var(--profile-secondary) 63%, transparent);
}

.profile-own-view .profile-header-card {
  background-color: color-mix(in srgb, var(--profile-primary) 63%, transparent);
  background-image: none;
}

.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-header-card,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-collection-card,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-showcase,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-sticker-studio,
.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-style-card {
  background-color: color-mix(in srgb, var(--profile-secondary) 63%, transparent);
}

.profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-header-card {
  background-color: color-mix(in srgb, var(--profile-primary) 63%, transparent);
}

.profile-own-view .profile-header-copy .kicker,
.profile-own-view .profile-section-heading .kicker,
.profile-own-view .profile-style-card .kicker,
.profile-own-view .profile-showcase-group h4,
.profile-own-view .profile-header-copy h3,
.profile-own-view .profile-section-heading h3,
.profile-own-view .profile-style-card h3,
.profile-own-view .profile-header-copy p,
.profile-own-view .profile-style-card p,
.profile-own-view .profile-collection-card p,
.profile-own-view .profile-showcase p,
.profile-own-view .social-stat-grid strong {
  color: var(--ink);
}

.profile-own-view .social-title-chip,
.profile-own-view .profile-status-chip {
  color: var(--ink);
  background: color-mix(in srgb, var(--profile-primary) 78%, #fff 22%);
}

.profile-own-view .social-stat-grid span:nth-child(1),
.profile-own-view .social-stat-grid span:nth-child(2) {
  color: var(--ink);
  border-color: var(--profile-primary);
  background: color-mix(in srgb, var(--profile-primary) 28%, #fff 72%);
}

.profile-own-view .social-stat-grid span:nth-child(3),
.profile-own-view .social-stat-grid span:nth-child(4) {
  color: var(--ink);
  border-color: var(--profile-secondary);
  background: color-mix(in srgb, var(--profile-secondary) 28%, #fff 72%);
}

.profile-own-view .social-progress-track span {
  background: var(--profile-secondary);
}

.profile-style-option-group h4 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.profile-current-theme-preview,
.profile-style-split-preview,
.profile-style-swatch {
  display: block;
  width: 38px;
  height: 38px;
  border: 2px solid var(--line);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .44);
}

.profile-current-theme-preview { width: 31px; height: 31px; }
.profile-current-theme-preview--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: transparent;
}

.profile-current-theme-preview--split > span {
  display: block;
  width: 100%;
  height: 100%;
}
.profile-colour-picker { margin-top: 11px; }
.profile-colour-picker > span { display: block; margin-bottom: 6px; font-size: .94rem; font-weight: 900; }

.profile-style-choice--visual {
  display: grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 5px;
  border: 3px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, .84);
}

.profile-style-choice--visual:has(.profile-style-choice-name) {
  width: 104px;
  min-width: 104px;
  min-height: 94px;
  align-content: center;
  gap: 7px;
}

.profile-style-choice-name {
  display: block;
  max-width: 94px;
  overflow: visible;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-style-choice-name {
  font-size: .74rem;
  font-weight: 1000;
  line-height: 1.12;
}

.profile-style-choice-list {
  display: grid;
  gap: 10px;
}

.profile-colour-picker {
  padding: 10px 0 12px;
  border-top: 2px solid #ded9cf;
}

.profile-colour-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
}

.profile-colour-choice-list {
  grid-template-columns: 1fr;
}

.profile-colour-choice-list .profile-style-rarity-group {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
}

.profile-colour-choice-list .profile-style-rarity-group h5 {
  padding-top: 9px;
}

.profile-colour-choice-list .profile-style-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.profile-colour-choice-grid .profile-style-choice--visual {
  width: 100%;
  min-width: 0;
}

.profile-colour-choice-grid .profile-style-choice-name {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.profile-style-option-group[data-style-type="Profielkader"] .profile-style-choice-list {
  grid-template-columns: 1fr;
}

.profile-style-option-group[data-style-type="Profielkader"] .profile-style-rarity-group {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  padding: 8px;
}

.profile-style-option-group[data-style-type="Profielkader"] .profile-style-rarity-group h5 {
  padding-top: 9px;
}

/* Banners en canvasachtergronden gebruiken brede, horizontale keuzerijen. */
.profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-rarity-group {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  padding: 8px;
}

.profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-rarity-group h5 {
  padding-top: 9px;
}

.profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-choice-grid,
.profile-style-option-group[data-style-type="Canvasachtergrond"] .profile-style-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
}

.profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-choice--visual,
.profile-style-option-group[data-style-type="Canvasachtergrond"] .profile-style-choice--visual {
  width: 100%;
  min-width: 0;
}

.profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-choice-name,
.profile-style-option-group[data-style-type="Canvasachtergrond"] .profile-style-choice-name {
  max-width: 100%;
}

.profile-style-rarity-group {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .62);
}

.profile-style-rarity-group h5 {
  margin: 0;
  color: #315f83;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
}

.profile-style-choice--visual.active {
  color: var(--ink);
  position: relative;
  border-color: #1769a6;
  background: #e4f4ff;
  box-shadow: 0 0 0 3px #8bd6ff, 0 4px 0 rgba(23, 105, 166, .35);
  transform: translateY(-2px);
}

.profile-style-choice--visual.active::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #1769a6;
  box-shadow: 0 2px 0 rgba(20, 27, 31, .28);
  font-size: .82rem;
  font-weight: 1000;
}

.profile-style-choice--visual .profile-style-swatch {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

.profile-style-choice--achtergrondbanner .profile-style-swatch,
.profile-style-choice--canvasachtergrond .profile-style-swatch {
  width: 62px;
  height: 44px;
}

.profile-style-choice--profielkader .profile-style-swatch {
  border-width: 6px;
}

@media (max-width: 560px) {
  .profile-style-dialog { width: calc(100vw - 14px); max-height: calc(100vh - 14px); }
  .profile-style-dialog-card { padding: 13px; }
  .profile-style-options { grid-template-columns: 1fr; }
  .profile-colour-option-group,
  .profile-style-option-group[data-style-type="Profielkader"],
  .profile-style-option-group[data-style-type="Achtergrondbanner"],
  .profile-style-option-group[data-style-type="Canvasachtergrond"] { grid-column: auto; }
  .profile-colour-option-group { grid-template-columns: 1fr; }
  .profile-colour-option-group > h4 { grid-column: auto; }
  .profile-style-option-group[data-style-type="Profielkader"] .profile-style-rarity-group { grid-template-columns: 1fr; }
  .profile-style-option-group[data-style-type="Profielkader"] .profile-style-rarity-group h5 { padding-top: 0; }
  .profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-rarity-group { grid-template-columns: 1fr; }
  .profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-rarity-group h5 { padding-top: 0; }
  .profile-style-option-group[data-style-type="Achtergrondbanner"] .profile-style-choice-grid,
  .profile-style-option-group[data-style-type="Canvasachtergrond"] .profile-style-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-colour-choice-list .profile-style-rarity-group { grid-template-columns: 1fr; }
  .profile-colour-choice-list .profile-style-rarity-group h5 { padding-top: 0; }
  .profile-colour-choice-list .profile-style-choice-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .profile-colour-choice-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .profile-sticker-canvas-row { gap: 7px; }
  .profile-sticker-icon-button { width: 42px; height: 42px; min-height: 42px; }
  .profile-sticker-actions { gap: 7px; }
  .profile-sticker-canvas-row .profile-sticker-canvas { width: calc(100% - 49px); }
  .profile-header-copy h3 { font-size: 1.55rem; }
}

/* Sociaal gebruikt hetzelfde grijze palet als de donkere banner, ook in acties en tabs. */
.social-page { background: rgba(229, 232, 234, .96); }
.social-page .social-hero {
  border-top-color: #3d434a;
  color: #fff;
  background: linear-gradient(115deg, rgba(29, 33, 38, .9), rgba(62, 68, 76, .76)), var(--theme-banner) center / cover;
}
.social-page .social-hero p:last-child { color: #e5e8ea; }
.social-page .social-hero .kicker { color: #d4d9dc; }
.social-page .social-tab.active,
.social-page .primary-button { background: #424951; }
.social-page .secondary-button { background: #f1f3f4; }
.social-page .social-account-strip,
.social-page .social-tab-panel,
.social-page .social-sharing-section,
.social-page .social-shared-view,
.social-page .social-progress-card { border-top-color: #5e666d; }
.social-page .social-avatar,
.social-page .social-friend-avatar,
.social-page .social-badge-mark { background: #4b535b; }
.social-page img.social-badge-mark { background: transparent; }
.social-page .social-title-chip,
.social-page .social-cloud-status,
.social-page .social-section-count,
.social-page .social-switch,
.social-page .social-badge,
.social-page .social-unlockable,
.social-page .social-friend-card { background: #edf0f1; }
.social-page .social-progress-card { background: linear-gradient(145deg, #e2e6e8, #fffdf7); }
.social-page .social-stat-grid strong,
.social-page .social-preview-facts strong { color: #40474e; }
.social-page .social-progress-track span { background: linear-gradient(90deg, #4b535b, #9ca4aa); }
.social-page .social-switch input,
.social-page .account-checkbox input { accent-color: #555d64; }

/* Belangrijke account- en vriendschapsacties blijven duidelijk herkenbaar. */
.social-page #socialCreateAccount,
.social-page #sharedProfileAddFriend,
.profile-page #profileCreateAccount {
  color: #fff;
  background: var(--red);
}

/* Profielstatistieken sluiten aan bij de vaste ECODEX- en Prestatiesaccenten. */
.profile-page .social-stat-grid span:nth-child(1),
.profile-page .social-stat-grid span:nth-child(2) {
  border-color: #3b9464;
  background: #e7f5e4;
}

.profile-page .social-stat-grid span:nth-child(1) strong,
.profile-page .social-stat-grid span:nth-child(2) strong {
  color: #287c4d;
}

.profile-page .social-stat-grid span:nth-child(3),
.profile-page .social-stat-grid span:nth-child(4) {
  border-color: #2f79b4;
  background: #e5f1fb;
}

.profile-page .social-stat-grid span:nth-child(3) strong,
.profile-page .social-stat-grid span:nth-child(4) strong {
  color: #1d609a;
}

/* Prestaties v2: compacte skill trees, uitdagende badges en cosmetische ECOBITS. */
.achievements-page {
  gap: 14px;
  max-width: 1120px;
  margin-inline: auto;
  padding: 14px;
  border-top-color: #174c80;
  background: rgba(231, 242, 249, .97);
}

.achievements-hero {
  min-height: 148px;
  padding: 24px 28px;
  border-top-color: #0c396a;
}

.achievements-hero h2 {
  font-size: clamp(2rem, 4vw, 3.05rem);
}

.achievements-hero p:last-child { max-width: 570px; }

.achievement-overview {
  display: grid;
  grid-template-columns: .8fr 1.2fr 1.1fr;
  gap: 10px;
}

.achievement-overview article {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px 16px;
  border: 3px solid var(--line);
  border-top: 8px solid #2a78ba;
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 4px 0 rgba(23, 24, 29, .14);
}

.achievement-overview article:nth-child(2) { border-top-color: #55b4d9; }
.achievement-overview article:nth-child(3) { border-top-color: #8ca9c0; }
.achievement-overview span,
.achievement-overview small,
.unlockable-type {
  font-size: .69rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.achievement-overview span { color: #1d5f9a; }
.achievement-overview strong {
  overflow-wrap: anywhere;
  color: #173f70;
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  line-height: 1.04;
}
.achievement-overview small { color: var(--muted); letter-spacing: 0; text-transform: none; }

.achievement-tabs,
.skill-tree-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.achievement-tab,
.skill-tree-tab {
  min-height: 42px;
  padding: 9px 15px;
  border: 3px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 3px 0 rgba(23, 24, 29, .2);
  font: inherit;
  font-size: .86rem;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}

.achievement-tab { flex: 1 1 0; }
.achievement-tab.active { color: #fff; background: #174c80; }
.achievement-tab span { display: inline-block; margin-left: 5px; color: inherit; font-size: .76rem; }

.achievement-tab-panel { display: grid; gap: 14px; }
.achievement-tab-panel[hidden] { display: none; }
.achievement-section-header { padding: 3px 2px 0; }
.achievement-section-header h3 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.achievement-section-header .kicker { color: #1d5f9a; }

.skill-tree-tab { border-top: 7px solid var(--tree-accent); }
.skill-tree-tab.active { color: #fff; background: var(--tree-accent); }

.skill-tree-current {
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 3px solid var(--line);
  border-top: 9px solid var(--tree-accent);
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 4px 0 rgba(23, 24, 29, .14);
}

.skill-tree-current > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.skill-tree-current h4 { margin: 2px 0; font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
.skill-tree-current p { margin: 0; color: var(--muted); font-weight: 700; }
.tree-total { display: grid; min-width: 94px; justify-items: center; padding: 8px; border: 2px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--tree-accent) 12%, white); }
.tree-total strong { color: var(--tree-accent); font-size: 1.55rem; line-height: 1; }
.tree-total span { font-size: .7rem; font-weight: 900; text-transform: uppercase; }

.skill-tree-progress { height: 15px; overflow: hidden; border: 3px solid var(--line); border-radius: 999px; background: #e4ebee; }
.skill-tree-progress span { display: block; height: 100%; background: var(--tree-accent); transition: width .35s ease; }

.skill-medal-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.skill-medal-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--tree-accent, #6b7280) 14%, #fffdf7);
}

.skill-medal-card.unlocked { background: color-mix(in srgb, var(--tree-accent, #6b7280) 22%, #fffdf7); }
.skill-medal {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: #69747b;
  font-weight: 950;
}
.skill-medal-card.unlocked .skill-medal { background: var(--tree-accent); }
.skill-medal-card.brons .skill-medal { background: #aa704a; }
.skill-medal-card.zilver .skill-medal { background: #98a5af; }
.skill-medal-card.goud .skill-medal { background: #d7aa24; }
.skill-medal-card.diamant .skill-medal { background: #49b9d5; }
.skill-medal-card h5 { margin: 0; font-size: .78rem; line-height: 1.1; }
.skill-medal-card p { min-height: 34px; margin: 0; color: var(--ink); font-size: .8rem; font-weight: 900; line-height: 1.15; }
.skill-medal-card small { color: var(--muted); font-size: .69rem; font-weight: 800; }
.skill-medal-card button {
  min-height: 32px;
  padding: 5px 7px;
  border: 2px solid var(--line);
  border-radius: 5px;
  color: #fff;
  background: var(--tree-accent);
  font: inherit;
  font-size: .72rem;
  font-weight: 950;
  cursor: pointer;
}
.skill-medal-card button:disabled { color: #667078; background: #dce2e6; cursor: default; }

.achievement-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.achievement-card { min-height: 206px; border-top-width: 7px; }
.achievement-badge-trigger { width: 68px; height: 68px; }
.achievement-card h4 { font-size: 1rem; }
.achievement-card p { font-size: .84rem; }

.achievement-shop-copy { max-width: 760px; margin: -4px 0 0; color: #48545e; font-weight: 700; line-height: 1.45; }

.shop-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0;
}

.shop-filter {
  min-height: 36px;
  padding: 6px 11px;
  border: 2px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: #fffdf7;
  font: inherit;
  font-size: .78rem;
  font-weight: 950;
  cursor: pointer;
}

.shop-filter.active {
  color: #fff;
  background: #184f85;
}
.unlockable-grid { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
.unlockable-card { position: relative; min-height: 218px; padding-top: 36px; border-top: 7px solid #7696b2; }
.unlockable-card.owned { border-top-color: #2a78ba; }
.unlockable-type { position: absolute; top: 10px; left: 13px; color: #1d5f9a; }
.unlockable-symbol { width: 48px; height: 48px; font-size: 1.45rem; }
.unlockable-card h4 { color: var(--ink); }

@media (max-width: 700px) {
  .achievement-overview { grid-template-columns: 1fr; }
  .achievement-overview article { min-height: 84px; }
  .achievement-tabs { gap: 6px; }
  .achievement-tab { flex: 0 0 auto; }
  .skill-medal-list { grid-template-columns: 1fr; }
  .skill-medal-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; }
  .skill-medal-card p { min-height: 0; }
  .skill-medal-card small { grid-column: 2; }
  .skill-medal-card button { grid-column: 3; grid-row: 1 / span 2; }
}

/* Elke medaille groeit als een blad uit dezelfde voortgangstak. */
.skill-tree-branches {
  position: relative;
  padding-top: 1px;
}

.tree-branch-progress {
  position: absolute;
  z-index: 0;
  top: 24px;
  left: 8.5%;
  width: 83%;
  height: 14px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: #dfe6e8;
}

.tree-branch-progress span {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 6px, transparent 6px 12px),
    var(--tree-accent);
}

.skill-medal-list {
  position: relative;
  z-index: 1;
  align-items: start;
  gap: 12px;
  padding-top: 60px;
}

.skill-medal-card {
  position: relative;
  min-height: 172px;
  padding-top: 41px;
}

.skill-medal-card::before {
  position: absolute;
  top: -39px;
  left: 50%;
  width: 3px;
  height: 39px;
  content: "";
  background: var(--line);
  transform: translateX(-50%);
}

.skill-medal-card.unlocked::before { background: var(--tree-accent); }

.skill-medal {
  position: absolute;
  top: -27px;
  left: 50%;
  z-index: 2;
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 0 rgba(23, 24, 29, .2));
}

.skill-medal-card.locked .skill-medal {
  filter: drop-shadow(0 3px 0 rgba(23, 24, 29, .2));
  opacity: 1;
}

/* Medal artwork is a transparent PNG, so never paint an old CSS tile behind it. */
.skill-medal-card.unlocked .skill-medal,
.skill-medal-card.brons .skill-medal,
.skill-medal-card.zilver .skill-medal,
.skill-medal-card.goud .skill-medal,
.skill-medal-card.diamant .skill-medal {
  background: transparent;
}

.skill-medal-card > div { min-width: 0; }
.skill-medal-card h5 { text-align: center; }
.skill-medal-card p { text-align: center; }
.skill-medal-card small { display: block; text-align: center; }
.skill-medal-card button { width: 100%; }

/* Videogame-style level route: each segment belongs to exactly one medal tier. */
.skill-route-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(360px, 100%);
  margin: 0 auto 4px;
  padding: 6px 11px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tree-accent) 12%, #fffdf7);
  box-shadow: 0 3px 0 rgba(23, 24, 29, .13);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.skill-route-status span { color: var(--muted); letter-spacing: .06em; }
.skill-route-status strong { color: var(--tree-accent); }

.tree-branch-progress.skill-route {
  top: 58px;
  left: 4%;
  display: flex;
  width: 92%;
  height: 18px;
  gap: 5px;
  padding: 2px;
  overflow: visible;
  border-width: 2px;
  background: #25303a;
  box-shadow: 0 3px 0 rgba(23, 24, 29, .22);
}

.tree-branch-progress.skill-route .skill-route-segment {
  position: relative;
  flex: 1 1 20%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #cbd3d7;
}

.tree-branch-progress.skill-route .skill-route-segment i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.32) 0 7px, transparent 7px 14px),
    var(--tree-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

.tree-branch-progress.skill-route .skill-route-segment.complete i {
  filter: saturate(1.2) brightness(1.05);
}

.tree-branch-progress.skill-route .skill-route-segment.active {
  outline: 2px solid color-mix(in srgb, var(--tree-accent) 70%, white);
  outline-offset: 1px;
}

.tree-branch-progress.skill-route .skill-route-segment.active::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-110%);
  animation: skill-route-xp-glint 1.8s ease-in-out infinite;
}

.skill-medal-list { padding-top: 72px; }

.skill-medal-card.current-quest {
  border-color: var(--tree-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tree-accent) 22%, transparent), 0 4px 0 rgba(23,24,29,.14);
}

.skill-medal-card.current-quest::after {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  content: "XP";
  color: #fff;
  background: var(--tree-accent);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .05em;
}

@keyframes skill-route-xp-glint {
  0%, 42% { transform: translateX(-110%); }
  75%, 100% { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
  .tree-branch-progress.skill-route .skill-route-segment.active::after { animation: none; }
}

@media (max-width: 700px) {
  .skill-tree-branches { padding-left: 0; }
  .tree-branch-progress.skill-route { top: 58px; left: 3%; width: 94%; }
  .skill-medal-list { gap: 18px; padding-top: 66px; }
  .skill-medal-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    min-height: 0;
    padding-top: 14px;
    padding-left: 60px;
  }
  .skill-medal-card::before {
    top: -27px;
    left: 31px;
    height: 42px;
  }
  .skill-medal {
    top: -10px;
    left: 8px;
    width: 54px;
    height: 54px;
    transform: none;
  }
  .skill-medal-card > div { grid-column: 1; }
  .skill-medal-card button { grid-column: 2; grid-row: 1; width: auto; }
  .skill-medal-card h5,
  .skill-medal-card p,
  .skill-medal-card small { text-align: left; }
}

/* Separate species and observation progress, while keeping both targets readable. */
.skill-medal-card .skill-medal-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

/* Op hoge, smalle schermen blijft de hele route zichtbaar, met alleen de
   eerstvolgende medaille als missiekaart. */
@media (max-width: 760px) and (orientation: portrait) {
  .skill-tree-current { gap: 12px; }

  .skill-tree-branches {
    display: grid;
    gap: 12px;
    padding-top: 0;
  }

  .skill-route-status {
    order: 1;
    width: 100%;
    margin: 0;
  }

  .tree-branch-progress.skill-route {
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    width: 100%;
    margin: 0;
  }

  .skill-medal-list {
    order: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 4px;
  }

  .skill-medal-card:not(.portrait-focus-medal) { display: none; }

  .skill-medal-card.portrait-focus-medal {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 10px;
    min-height: 0;
    padding: 14px;
    border-color: var(--tree-accent);
    background: color-mix(in srgb, var(--tree-accent) 17%, #fffdf7);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tree-accent) 18%, transparent), 0 4px 0 rgba(23, 24, 29, .14);
  }

  .skill-medal-card.portrait-focus-medal::before { display: none; }

  .skill-medal-card.portrait-focus-medal .skill-medal {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 62px;
    height: 62px;
    transform: none;
  }

  .skill-medal-card.portrait-focus-medal > div:not(.skill-medal-actions) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .skill-medal-card.portrait-focus-medal h5,
  .skill-medal-card.portrait-focus-medal p,
  .skill-medal-card.portrait-focus-medal small { text-align: left; }

  .skill-medal-card.portrait-focus-medal h5 {
    padding-right: 28px;
    font-size: .83rem;
  }

  .skill-medal-card.portrait-focus-medal p {
    min-height: 0;
    margin-top: 2px;
  }

  .skill-medal-card.portrait-focus-medal .skill-medal-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .skill-medal-card.portrait-focus-medal .skill-title-button { grid-column: 1 / -1; }
}

.skill-medal-card .skill-medal-actions > button {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-height: 31px;
  padding: 5px 7px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #f5f7f7;
  font-size: .68rem;
  line-height: 1.1;
  white-space: normal;
}

.skill-medal-card .skill-medal-actions > button:disabled {
  color: var(--ink);
  background: #f5f7f7;
  opacity: 1;
  cursor: default;
}

.skill-medal-card .skill-medal-actions > .skill-title-button {
  color: #fff;
  background: var(--tree-accent);
}

.skill-medal-card .skill-medal-actions > .skill-title-button:disabled {
  color: #667078;
  background: #dce2e6;
}

@media (max-width: 700px) {
  .skill-medal-card .skill-medal-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .skill-medal-card .skill-medal-actions > button {
    flex: 1 1 116px;
    width: auto;
  }
}

/* Definitieve profielstijl-overrides: houden stand boven oudere profielblokken. */
.profile-page .profile-own-view[data-profile-frame=""] {
  border-width: 2px;
}

.profile-page .profile-own-view .profile-header-card,
.profile-page .profile-own-view[data-profile-frame]:not([data-profile-frame=""]) .profile-header-card {
  background-color: color-mix(in srgb, var(--profile-secondary) 63%, transparent);
}

/* The favourite habitat uses two fixed zones: centred name at left, island at right. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 84px !important;
  align-items: center !important;
  justify-items: center !important;
  padding-right: 0 !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  grid-column: 1;
  width: 100% !important;
  text-align: center !important;
  transform: translateX(18px);
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 2;
  justify-self: end;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 58px !important;
  }
}

/* Final profile-summary layout: score, collection, recent finds and habitat share one rhythm. */
.profile-page .social-stat-grid > span:nth-child(1),
.profile-page .social-stat-grid > span:nth-child(2) {
  display: flex !important;
  min-height: 94px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px !important;
  text-align: center;
}

.profile-page .social-stat-grid > span:nth-child(1) > strong,
.profile-page .social-stat-grid > span:nth-child(2) > strong {
  display: block !important;
  margin: 0 !important;
  color: inherit;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-recent-stat,
.profile-page .social-stat-grid > .profile-habitat-stat {
  display: grid !important;
  min-height: 94px;
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 5px;
  padding: 8px 10px !important;
  text-align: center;
}

.profile-page .social-stat-grid > .profile-recent-stat > strong,
.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  grid-row: 2;
  width: 100%;
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species,
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  grid-row: 1;
  align-self: stretch;
  min-height: 0 !important;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}

.profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
  width: 62px !important;
  height: 58px !important;
}

/* The habitat value and island share the first row. The label below gets the
   exact same treatment as the Recent found label, inside the left text area. */
/* Active profile habitat tile: big name left, island right, matching caption below. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 8px 10px !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 80px 0 0 !important;
  box-sizing: border-box !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-height: 62px !important;
  margin: 0 !important;
  place-items: center;
  transform: none !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 80px !important;
  height: 62px !important;
  object-fit: contain;
}

/* Same type treatment as the Recent found label, centered in the left text area. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  grid-row: 2 !important;
  width: calc(100% - 84px) !important;
  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  color: inherit !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-align: center !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    gap: 4px !important;
    padding: 7px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    padding-right: 55px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.08rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 55px !important;
    height: 46px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    width: calc(100% - 58px) !important;
  }
}
.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 80px;
  grid-template-rows: 1fr;
  width: 100%;
  align-items: center;
  justify-content: normal;
  padding: 0;
  box-sizing: border-box;
  color: inherit;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000;
  line-height: 1 !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  display: block !important;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0 !important;
  color: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: inherit !important;
  text-align: center !important;
}

.profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: 80px !important;
  height: 62px !important;
  object-fit: contain;
}

.profile-page .social-stat-grid > .profile-habitat-stat > strong {
  width: calc(100% - 84px) !important;
  justify-self: start;
  text-align: center !important;
}

@media (max-width: 620px) {
  .profile-page .social-stat-grid > span:nth-child(1),
  .profile-page .social-stat-grid > span:nth-child(2),
  .profile-page .social-stat-grid > .profile-recent-stat,
  .profile-page .social-stat-grid > .profile-habitat-stat {
    min-height: 82px;
    gap: 4px;
    padding: 7px !important;
  }

  .profile-page .social-stat-grid > span:nth-child(1) > strong,
  .profile-page .social-stat-grid > span:nth-child(2) > strong,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat,
  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: 1.08rem !important;
  }

  .profile-page .social-stat-grid > .profile-recent-stat .profile-recent-species button {
    width: 40px !important;
    height: 42px !important;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 55px;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 55px !important;
    height: 46px !important;
  }

  .profile-page .social-stat-grid > .profile-habitat-stat > strong {
    width: calc(100% - 58px) !important;
  }
}

/* Terminal override: compact profile favourite habitat stat tile. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  gap: 7px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-color: var(--profile-secondary) !important;
  background: color-mix(in srgb, var(--profile-secondary) 28%, #fff 72%) !important;
}
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  grid-template-rows: 1fr !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  position: static !important;
  display: grid !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  transform: none !important;
  color: var(--ink) !important;
  font-size: clamp(1.35rem, 2.55vw, 1.8rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  position: static !important;
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  width: 62px !important;
  height: 52px !important;
  object-fit: contain !important;
  transform: none !important;
}
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  text-align: center !important;
}
@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat { min-height:82px !important; height:82px !important; max-height:82px !important; padding:7px !important; gap:4px !important; }
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat { grid-template-columns:minmax(0,1fr) 50px !important; }
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span { font-size:1.08rem !important; }
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img { width:50px !important; height:42px !important; }
}

/* Profile refinement: keep the four collection tiles readable and consistent. */
.profile-page .profile-own-view .profile-habitat-stat .profile-favorite-habitat > span {
  font-size: clamp(1.08rem, 2.15vw, 1.35rem) !important;
}

.profile-page .profile-own-view #profileAchievementSummary,
.profile-page .profile-own-view .profile-status-chip#profileAchievementSummary {
  color: var(--ink) !important;
  border-color: var(--profile-primary) !important;
  background: color-mix(in srgb, var(--profile-primary) 72%, #fff 28%) !important;
}

.profile-page .profile-own-view .social-progress-track span {
  background: var(--profile-primary) !important;
}

/* In the neutral style, colour 1 marks the top edge of every profile panel. */
.profile-page .profile-own-view[data-profile-frame=""] .profile-header-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-collection-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-showcase,
.profile-page .profile-own-view[data-profile-frame=""] .profile-sticker-studio,
.profile-page .profile-own-view[data-profile-frame=""] .profile-style-card {
  border-top-color: var(--profile-primary) !important;
}

.profile-page .social-badge-grid .social-badge-mark {
  width: 76px;
  height: 76px;
}

.profile-page .social-badge-grid .social-badge {
  min-width: 108px;
}

.profile-page .social-medal-grid .social-skill-medal .social-badge-mark {
  width: 64px;
  height: 64px;
}

.profile-style-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Each frame choice now shows its own colours instead of the same neutral preview. */
.profile-style-choice--profielkader .profile-style-swatch {
  border: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 0 0 1px rgba(28, 35, 40, .2);
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .profile-habitat-stat .profile-favorite-habitat > span { font-size: .98rem !important; }
  .profile-page .social-badge-grid .social-badge-mark { width: 66px; height: 66px; }
  .profile-page .social-medal-grid .social-skill-medal .social-badge-mark { width: 56px; height: 56px; }
  .profile-style-actions { justify-content: stretch; }
  .profile-style-actions .secondary-button { flex: 1 1 130px; }
}

/* Final profile collection override: favourite habitat name stays quieter than stat numbers. */
.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 8px !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
  font-family: inherit !important;
  font-size: clamp(.92rem, 1.2vw, 1.18rem) !important;
  font-weight: 1000 !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  width: 54px !important;
  height: 46px !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat > span {
    font-size: .86rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
    width: 44px !important;
    height: 38px !important;
  }
}


/* Absolute final profile polish - appended after all profile overrides. */
.profile-page .profile-own-view[data-profile-frame=""] .profile-header-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-collection-card,
.profile-page .profile-own-view[data-profile-frame=""] .profile-showcase,
.profile-page .profile-own-view[data-profile-frame=""] .profile-sticker-studio,
.profile-page .profile-own-view[data-profile-frame=""] .profile-style-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-header-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-collection-card,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-showcase,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-sticker-studio,
.profile-page .profile-own-view:not([data-profile-frame]) .profile-style-card {
  border-top-color: var(--theme-top) !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  gap: 7px !important;
  padding: 10px !important;
  overflow: hidden !important;
  text-align: center !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
  position: static !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: clamp(.68rem, 1.28vw, .9rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat img {
  display: none !important;
}

.profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
  position: static !important;
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

@media (max-width: 620px) {
  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat {
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    gap: 5px !important;
    padding: 8px 6px !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat .profile-favorite-habitat {
    font-size: .54rem !important;
  }

  .profile-page .profile-own-view .social-stat-grid > .profile-habitat-stat > strong {
    font-size: .58rem !important;
  }
}