/* Park management windows (ui/panels.js and the shop / staff / finance / rating / goals windows), the
   HUD rating pill and goal chip, the menu entries, the goal celebration canvas and the "Welkom terug"
   dialog. Same look as the ride window (ride.css): white rounded sheet, ice-blue buttons, salmon
   primaries. Phone: a bottom sheet over the bar (<= 64vh); desktop (>= 900 px): a 380 px panel on the
   right. Tap targets >= 44 px, body text 16 px. Colours from the theme custom properties (game.css). */

/* ---------------------------------------------------------------- panel shell */
.cp-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: min(64vh, 560px);
  padding: 10px 12px calc(var(--cp-safe-b) + 10px);
  border-radius: 20px 20px 0 0;
  background: var(--cp-panel);
  box-shadow: 0 -4px 18px color-mix(in srgb, var(--cp-ink) 22%, transparent);
  pointer-events: auto;
}
@supports (height: 1dvh) { .cp-panel { max-height: min(64dvh, 560px); } }
.cp-panel[hidden] { display: none; }
.cp-panel [hidden] { display: none !important; }
.cp-panel__head { display: flex; align-items: flex-start; gap: 10px; }
.cp-panel__icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--cp-ice); color: var(--cp-ink);
}
.cp-panel__icon.has-img { overflow: hidden; }
.cp-panel__img { display: block; width: 40px; height: 40px; object-fit: contain; }
.cp-panel__titles { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.cp-panel__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cp-panel__title { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.cp-panel__title:focus { outline: none; }
.cp-panel__badge { padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; background: var(--cp-ice); color: var(--cp-ink); white-space: nowrap; }
.cp-panel__badge.is-ok { background: var(--cp-ok); color: var(--cp-text); }
.cp-panel__badge.is-off { background: var(--cp-peri); color: var(--cp-text); }
.cp-panel__sub { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--cp-slate); line-height: 1.25; }
.cp-panel__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--cp-ice); display: grid; place-items: center; }
.cp-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 2px 4px 0; font-size: 16px; }
.cp-panel__actions { padding-top: 8px; }
.cp-panel__actionrow { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-panel__actionrow .cp-btn { flex: 1 1 0; min-width: 130px; padding-inline: 10px; white-space: nowrap; }
.cp-panel__h { margin: 12px 0 6px; font-size: 16px; font-weight: 900; }
.cp-panel__h:first-child { margin-top: 2px; }
.cp-panel__lead { margin: 0 0 8px; font-size: 16px; line-height: 1.35; color: var(--cp-slate); }
.cp-panel__note { margin: 6px 0; font-size: 16px; line-height: 1.35; color: var(--cp-slate); }
.cp-panel__warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cp-panel__warn { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.cp-panel__warn.is-bad { background: color-mix(in srgb, var(--cp-bad) 14%, var(--cp-white)); color: color-mix(in srgb, var(--cp-bad) 70%, var(--cp-text)); }
.cp-panel__warn.is-note { background: color-mix(in srgb, var(--cp-amber) 22%, var(--cp-white)); color: var(--cp-text); }
.cp-panel__warn .cp-icon { flex: none; margin-top: 1px; }
.cp-panel__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0; font-size: 16px; }
.cp-panel__facts dt { color: var(--cp-slate); }
.cp-panel__facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* price: value, default button, [-] slider [+], verdict */
.cp-panel__price { margin: 4px 0 8px; }
.cp-panel__pricehead { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.cp-panel__pricevalue { font-size: 20px; font-variant-numeric: tabular-nums; }
.cp-panel__chipbtn { margin-left: auto; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--cp-cream); font-size: 15px; font-weight: 800; }
.cp-panel__chipbtn:disabled { opacity: 0.55; cursor: default; }
.cp-panel__stepper { display: flex; align-items: center; gap: 8px; }
.cp-panel__step { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--cp-ice); color: var(--cp-ink); display: grid; place-items: center; }
.cp-panel__step:disabled { opacity: 0.38; cursor: default; }
.cp-panel__sliderwrap { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center; }
.cp-panel__slider { width: 100%; height: 44px; margin: 0; accent-color: var(--cp-accent2); }
.cp-panel__marker {
  position: absolute; top: 6px; width: 4px; height: 32px; margin-left: -2px; border-radius: 2px;
  background: var(--cp-accent); pointer-events: none;
}
.cp-panel__verdict { margin: 2px 0 0; padding: 6px 10px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.cp-panel__verdict[data-tone="fair"] { background: color-mix(in srgb, var(--cp-ok) 20%, var(--cp-white)); }
.cp-panel__verdict[data-tone="high"] { background: color-mix(in srgb, var(--cp-amber) 22%, var(--cp-white)); }
.cp-panel__verdict[data-tone="some"], .cp-panel__verdict[data-tone="free"] { background: color-mix(in srgb, var(--cp-accent) 24%, var(--cp-white)); }
.cp-panel__verdict[data-tone="none"] { background: color-mix(in srgb, var(--cp-bad) 16%, var(--cp-white)); color: color-mix(in srgb, var(--cp-bad) 70%, var(--cp-text)); }
.cp-panel__btnicon { display: contents; }

/* ---------------------------------------------------------------- staff window */
/* Hire row: icon | name + count | Aannemen (or "Niveau N"), then the description and the costs over the
   full width (compact on phones: about 130 px per role). */
.cp-staffwin__roles { display: flex; flex-direction: column; gap: 6px; }
.cp-staffwin__role {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
  grid-template-areas: "icon head act" "desc desc desc" "cost cost cost";
  padding: 8px 10px 8px 8px; border-radius: 14px; background: color-mix(in srgb, var(--cp-ice) 40%, var(--cp-white));
}
.cp-staffwin__role > .cp-staffwin__roleicon { grid-area: icon; }
.cp-staffwin__role .cp-staffwin__roletext { display: contents; }
.cp-staffwin__role .cp-staffwin__rolehead { grid-area: head; }
.cp-staffwin__role .cp-staffwin__desc { grid-area: desc; margin-top: 4px; }
.cp-staffwin__role .cp-staffwin__cost { grid-area: cost; }
.cp-staffwin__role > .cp-staffwin__hire, .cp-staffwin__role > .cp-staffwin__lock { grid-area: act; }
.cp-staffwin__role.is-flash { box-shadow: inset 0 0 0 3px var(--cp-accent2); }
.cp-staffwin__role.is-locked { background: color-mix(in srgb, var(--cp-peri) 18%, var(--cp-white)); }
.cp-staffwin__roleicon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cp-ice); color: var(--cp-ink); }
.cp-staffwin__roleicon.is-small { width: 40px; height: 40px; }
.cp-staffwin__role.is-locked .cp-staffwin__roleicon { background: var(--cp-white); color: var(--cp-slate); }
.cp-staffwin__roletext { min-width: 0; }
.cp-staffwin__rolehead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.cp-staffwin__rolename { font-size: 17px; font-weight: 900; }
.cp-staffwin__count { font-size: 14px; font-weight: 800; color: var(--cp-accent2); }
.cp-staffwin__desc { margin: 2px 0 0; font-size: 16px; line-height: 1.3; color: var(--cp-slate); }
.cp-staffwin__cost { margin: 2px 0 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cp-staffwin__hire { padding: 0 12px 0 8px; gap: 4px; }
.cp-staffwin__lock { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border-radius: 12px; background: var(--cp-white); font-size: 15px; font-weight: 800; color: var(--cp-slate); white-space: nowrap; }
.cp-staffwin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-staffwin__member { display: flex; align-items: stretch; gap: 6px; }
.cp-staffwin__show {
  flex: 1 1 auto; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 6px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--cp-ice) 40%, var(--cp-white)); text-align: left;
}
.cp-staffwin__member.is-selected .cp-staffwin__show { background: var(--cp-ice); box-shadow: inset 0 0 0 3px var(--cp-accent2); }
.cp-staffwin__membertext { min-width: 0; display: flex; flex-direction: column; }
.cp-staffwin__name { font-size: 16px; font-weight: 900; }
.cp-staffwin__job { font-size: 16px; color: var(--cp-slate); }
.cp-staffwin__detail { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--cp-ink); line-height: 1.3; }
.cp-staffwin__fire { flex: none; width: 48px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--cp-bad) 14%, var(--cp-white)); color: var(--cp-bad); display: grid; place-items: center; }

/* ---------------------------------------------------------------- finance window */
.cp-finwin__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-finwin__tile { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--cp-ice) 40%, var(--cp-white)); min-width: 0; }
.cp-finwin__tilelabel { font-size: 14px; font-weight: 700; color: var(--cp-slate); line-height: 1.2; }
.cp-finwin__tilevalue { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-finwin__tile.is-in .cp-finwin__tilevalue { color: color-mix(in srgb, var(--cp-ok) 55%, var(--cp-text)); }
.cp-finwin__tile.is-out .cp-finwin__tilevalue { color: color-mix(in srgb, var(--cp-bad) 80%, var(--cp-text)); }
.cp-chart__wrap { margin: 0; }
.cp-chart__box { position: relative; height: 128px; border-radius: 14px; background: color-mix(in srgb, var(--cp-ice) 30%, var(--cp-white)); overflow: hidden; }
.cp-chart { display: block; width: 100%; height: 100%; }
.cp-chart__in { fill: var(--cp-ok); }
.cp-chart__out { fill: var(--cp-accent); }
.cp-chart__zero { stroke: color-mix(in srgb, var(--cp-slate) 55%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cp-chart__max { position: absolute; left: 8px; padding: 1px 6px; border-radius: 8px; background: color-mix(in srgb, var(--cp-white) 85%, transparent); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; }
.cp-chart__max.is-in { top: 4px; color: color-mix(in srgb, var(--cp-ok) 50%, var(--cp-text)); }
.cp-chart__max.is-out { bottom: 4px; color: color-mix(in srgb, var(--cp-bad) 80%, var(--cp-text)); }
.cp-chart__empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 16px; color: var(--cp-slate); }
.cp-chart__axis { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--cp-slate); }
.cp-chart__legend { display: inline-flex; align-items: center; gap: 4px; }
.cp-chart__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.cp-chart__key.is-in { background: var(--cp-ok); }
.cp-chart__key.is-out { background: var(--cp-accent); }
.cp-seg { display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--cp-ice); margin-bottom: 6px; }
.cp-seg__btn { flex: 1 1 0; min-height: 44px; border: 0; border-radius: 11px; background: transparent; font-size: 15px; font-weight: 800; color: var(--cp-ink); }
.cp-seg__btn[aria-pressed="true"] { background: var(--cp-white); color: var(--cp-text); box-shadow: 0 2px 0 color-mix(in srgb, var(--cp-ink) 14%, transparent); }
.cp-finwin__ledger dd.is-in { color: color-mix(in srgb, var(--cp-ok) 55%, var(--cp-text)); }
.cp-finwin__ledger dd.is-out { color: color-mix(in srgb, var(--cp-bad) 80%, var(--cp-text)); }
.cp-finwin__ledger { column-gap: 0; }
.cp-finwin__ledger dt { padding-right: 12px; }
.cp-finwin__ledger .is-total { padding-top: 4px; border-top: 2px solid var(--cp-ice); font-weight: 900; color: var(--cp-text); }
.cp-finwin__ledger dd.is-total.is-in, .cp-finwin__ledger dd.is-total.is-out { font-weight: 900; }
.cp-finwin__campaigns { display: flex; flex-direction: column; gap: 6px; }
.cp-finwin__campaign {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 10px;
  padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--cp-ice) 40%, var(--cp-white));
}
.cp-finwin__campaign.is-running { background: color-mix(in srgb, var(--cp-ok) 18%, var(--cp-white)); }
.cp-finwin__campaign.is-locked { background: color-mix(in srgb, var(--cp-peri) 18%, var(--cp-white)); }
.cp-finwin__camptext { min-width: 0; }
.cp-finwin__camptext strong { font-size: 16px; font-weight: 900; }
.cp-finwin__campmeta, .cp-finwin__left { margin: 2px 0 0; font-size: 16px; color: var(--cp-slate); line-height: 1.3; }
.cp-finwin__campmeta:empty { display: none; }
.cp-finwin__left { font-weight: 800; color: var(--cp-text); font-variant-numeric: tabular-nums; }
.cp-finwin__camptrack { display: block; position: relative; height: 8px; margin-top: 4px; border-radius: 999px; background: var(--cp-white); overflow: hidden; }
.cp-finwin__campfill { position: absolute; inset: 0; border-radius: 999px; background: var(--cp-ok); transform-origin: 0 50%; }
.cp-finwin__start { padding: 0 14px; }
.cp-finwin__start:disabled { background: var(--cp-peri); cursor: default; }

/* ---------------------------------------------------------------- park rating window */
.cp-ratingwin__meter { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.cp-ratingwin__star { flex: none; color: var(--cp-amber); }
.cp-ratingwin__star .cp-icon, .cp-hud__star .cp-icon { fill: currentColor; stroke: color-mix(in srgb, var(--cp-amber) 55%, var(--cp-text)); stroke-width: 1.2; }
.cp-ratingwin__track { position: relative; flex: 1 1 auto; height: 16px; border-radius: 999px; background: var(--cp-ice); overflow: hidden; }
.cp-ratingwin__fill { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cp-amber), var(--cp-ok)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.3s; }
.cp-ratingwin__value { flex: none; min-width: 3ch; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.cp-ratingwin__list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-ratingwin__row { display: flex; flex-direction: column; gap: 4px; }
.cp-ratingwin__rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 16px; }
.cp-ratingwin__points { font-size: 15px; font-weight: 800; color: var(--cp-slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ratingwin__hint { margin: 0; font-size: 16px; line-height: 1.3; color: var(--cp-slate); }
.cp-ratingwin__row .cp-meter__track { display: block; }
.cp-ratingwin__row[data-tone="warn"] .cp-meter__fill { background: var(--cp-amber); }
.cp-ratingwin__row[data-tone="bad"] .cp-meter__fill { background: var(--cp-bad); }
/* The meter styles live in agents.css (guest window); repeated here so the window also works alone. */
.cp-ratingwin .cp-meter__track { position: relative; height: 12px; border-radius: 999px; background: var(--cp-ice); overflow: hidden; }
.cp-ratingwin .cp-meter__fill { position: absolute; inset: 0; border-radius: 999px; transform-origin: 0 50%; transform: scaleX(0); background: var(--cp-ok); transition: transform 0.25s linear; }

/* ---------------------------------------------------------------- goals window */
.cp-goalswin__active { padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--cp-amber) 20%, var(--cp-white)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cp-amber) 60%, transparent); }
.cp-goalswin__name { display: block; font-size: 19px; font-weight: 900; }
.cp-goalswin__desc { margin: 2px 0 8px; font-size: 16px; line-height: 1.35; }
.cp-goalswin__bar { display: flex; align-items: center; gap: 8px; }
.cp-goalswin__track { position: relative; flex: 1 1 auto; height: 14px; border-radius: 999px; background: var(--cp-white); overflow: hidden; }
.cp-goalswin__fill { position: absolute; inset: 0; border-radius: 999px; background: var(--cp-ok); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.3s; }
.cp-goalswin__progresstext { flex: none; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cp-goalswin__reward { margin: 4px 0 0; font-size: 16px; font-weight: 800; line-height: 1.3; color: color-mix(in srgb, var(--cp-ok) 45%, var(--cp-text)); }
.cp-goalswin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-goalswin__item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--cp-ice) 40%, var(--cp-white)); }
.cp-goalswin__itemicon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cp-white); color: var(--cp-ink); }
.cp-goalswin__itemtext { min-width: 0; }
.cp-goalswin__itemtext strong { font-size: 16px; font-weight: 900; }
.cp-goalswin__itemtext p { margin: 2px 0 0; font-size: 16px; line-height: 1.3; }
.cp-goalswin__item.is-secret { background: color-mix(in srgb, var(--cp-peri) 16%, var(--cp-white)); color: var(--cp-slate); }
.cp-goalswin__item.is-done { background: color-mix(in srgb, var(--cp-ok) 14%, var(--cp-white)); }
.cp-goalswin__item.is-done .cp-goalswin__itemicon { background: var(--cp-ok); color: var(--cp-white); }
.cp-goalswin__done { margin-top: 10px; }
.cp-goalswin__summary { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 12px; background: var(--cp-ice); font-size: 16px; font-weight: 900; cursor: pointer; list-style-position: inside; }
.cp-goalswin__done[open] .cp-goalswin__summary { margin-bottom: 6px; }
.cp-goalswin__alldone { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--cp-amber) 24%, var(--cp-white)); font-weight: 800; }
.cp-goalswin__alldone .cp-icon { color: var(--cp-amber); fill: currentColor; }

/* ---------------------------------------------------------------- HUD: rating pill, goal chip */
.cp-hud__rating { flex: none; gap: 5px; padding: 0 12px 0 9px; border: 0; color: var(--cp-text); font-size: 18px; font-weight: 900; }
.cp-hud__rating[hidden], .cp-goalchip[hidden] { display: none; }
.cp-hud__star { display: grid; place-items: center; color: var(--cp-amber); }
.cp-goalchip {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: 8px;
  min-width: 0; width: 290px; max-width: 290px; height: 48px;
  padding: 0 12px 0 7px;
  border: 0; border-radius: 14px;
  background: var(--cp-panel); box-shadow: var(--cp-shadow);
  color: var(--cp-text); text-align: left;
}
.cp-goalchip__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cp-amber) 35%, var(--cp-white)); color: var(--cp-text); }
.cp-goalchip__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-goalchip__line { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.cp-goalchip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-goalchip__reward { flex: none; margin-left: auto; color: color-mix(in srgb, var(--cp-ok) 50%, var(--cp-text)); font-variant-numeric: tabular-nums; }
.cp-goalchip__reward:empty { display: none; }
.cp-goalchip__bar { display: flex; align-items: center; gap: 6px; }
.cp-goalchip__track { position: relative; flex: 1 1 auto; min-width: 40px; height: 8px; border-radius: 999px; background: var(--cp-ice); overflow: hidden; }
.cp-goalchip__fill { position: absolute; inset: 0; border-radius: 999px; background: var(--cp-ok); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.3s; }
.cp-goalchip__progress { flex: none; font-size: 14px; font-weight: 800; line-height: 1; color: var(--cp-slate); font-variant-numeric: tabular-nums; }
.cp-goalchip.is-snug .cp-goalchip__reward, .cp-goalchip.is-tight .cp-goalchip__progress, .cp-goalchip.is-tight .cp-goalchip__reward { display: none; }
.cp-goalchip.is-done { animation: cp-goal-done 1.4s ease-out; }
@keyframes cp-goal-done {
  0% { transform: scale(1); box-shadow: var(--cp-shadow), 0 0 0 0 color-mix(in srgb, var(--cp-amber) 80%, transparent); }
  25% { transform: scale(1.08); box-shadow: var(--cp-shadow), 0 0 0 8px color-mix(in srgb, var(--cp-amber) 55%, transparent); }
  100% { transform: scale(1); box-shadow: var(--cp-shadow), 0 0 0 14px transparent; }
}

/* gem reward of a goal: the gem icon (ui/icons.js 'gem', when present) and "+10", else "+10 gems" */
.cp-goalswin__reward { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cp-gembadge {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--cp-accent2) 18%, var(--cp-white)); color: color-mix(in srgb, var(--cp-accent2) 55%, var(--cp-text));
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cp-gembadge .cp-icon { flex: none; }

/* ---------------------------------------------------------------- toast with an action (toast.js) */
/* The container ignores the pointer (game.css); a toast with an action takes taps itself. */
.cp-toast.has-action { pointer-events: auto; cursor: pointer; flex-wrap: wrap; row-gap: 6px; padding: 8px 8px 8px 14px; }
.cp-toast.has-action .cp-toast__text { flex: 1 1 180px; min-width: 0; line-height: 1.3; }
.cp-toast__action { flex: none; margin-left: auto; min-height: 44px; padding: 0 14px 0 10px; gap: 6px; font-size: 16px; font-weight: 900; white-space: nowrap; }

/* ---------------------------------------------------------------- "Gratis grond" pill (hud.js) */
.cp-freeland {
  flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px;
  border: 0; border-radius: 999px; background: var(--cp-ok); color: var(--cp-text);
  box-shadow: var(--cp-shadow); font-size: 16px; font-weight: 900; white-space: nowrap;
  animation: cp-freeland-in 0.25s ease-out;
}
.cp-freeland[hidden] { display: none; }
.cp-freeland:active { transform: translateY(1px); }
@keyframes cp-freeland-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------------------------------------------------------------- menu entries */
.cp-menu__nav { display: grid; grid-template-columns: 1fr; gap: 6px; }
.cp-menu__entry { justify-content: flex-start; gap: 8px; min-height: 48px; padding: 0 10px; font-size: 16px; }
.cp-menu__entry .cp-icon { color: var(--cp-ink); }
.cp-menu__head { margin: 4px 0 -2px; font-size: 15px; font-weight: 900; color: var(--cp-slate); }

/* ---------------------------------------------------------------- celebration canvas */
.cp-celebrate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
.cp-celebrate[hidden] { display: none; }

/* ---------------------------------------------------------------- Welkom terug */
.cp-welcome__backdrop { z-index: 12; }
.cp-welcome { width: min(380px, 100%); text-align: center; }
.cp-welcome__badge {
  width: 72px; height: 72px; margin: -2px auto 8px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(#ffe27a, #ffc23a); color: #4a3200; box-shadow: 0 4px 0 color-mix(in srgb, #b07a00 45%, transparent);
}
.cp-welcome__title { margin-bottom: 6px; }
.cp-welcome__away { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.cp-welcome__label { margin: 0; font-size: 16px; font-weight: 800; color: var(--cp-slate); }
.cp-welcome__amount { margin: 2px 0 12px; font-size: 36px; font-weight: 900; line-height: 1.1; color: color-mix(in srgb, var(--cp-ok) 55%, var(--cp-text)); font-variant-numeric: tabular-nums; }
.cp-welcome__cap { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--cp-amber) 22%, var(--cp-white)); font-size: 16px; font-weight: 700; line-height: 1.3; text-align: left; }
.cp-welcome__cap .cp-icon { flex: none; margin-top: 1px; }
.cp-welcome__rate { margin: 0 0 16px; font-size: 16px; line-height: 1.35; color: var(--cp-slate); }
.cp-welcome .cp-dialog__actions .cp-btn { min-height: 48px; font-size: 17px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 899px) {
  /* The goal chip is a round icon in the HUD row, like the rating and gems pills (user 2026-10-16:
     the wide card on a row of its own covered the park): the goals icon inside a progress ring
     (--cp-goal-frac, hud.js); a tap opens the goals window with the name, numbers and reward. */
  .cp-goalchip { flex: none; width: 44px; max-width: none; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .cp-goalchip__text { display: none; }
  .cp-goalchip__icon {
    position: relative; width: 36px; height: 36px; border-radius: 50%;
    background: conic-gradient(var(--cp-ok) calc(var(--cp-goal-frac, 0) * 1turn), var(--cp-ice) 0);
  }
  .cp-goalchip__icon::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: color-mix(in srgb, var(--cp-amber) 35%, var(--cp-white)); }
  .cp-goalchip__icon > .cp-icon { position: relative; width: 20px; height: 20px; }
  /* "Gratis grond" floats under the HUD row on the right like "Alles ophalen" (one row lower while
     that pill shows); toasts move below whichever pills float there, so they never cover them. */
  .cp-freeland { position: absolute; top: calc(var(--cp-safe-t) + 60px); right: calc(var(--cp-safe-r) + 8px); }
  .cp-hud:has(.cp-collect:not([hidden])) .cp-freeland { top: calc(var(--cp-safe-t) + 112px); }
  .cp-ui:has(.cp-freeland:not([hidden])):not(.is-building) .cp-toasts,
  .cp-ui:has(.cp-collect:not([hidden])):not(.is-building) .cp-toasts { top: calc(var(--cp-safe-t) + 112px); }
  .cp-ui:has(.cp-freeland:not([hidden])):has(.cp-collect:not([hidden])):not(.is-building) .cp-toasts { top: calc(var(--cp-safe-t) + 164px); }
  /* While building (sheet open or a build tool armed) the HUD keeps only money, guests and the menu:
     HUD band + sheet + bar stay within 35% of the screen (BRIEF 5.9). */
  .cp-ui.is-building .cp-goalchip, .cp-ui.is-building .cp-hud__rating, .cp-ui.is-building .cp-freeland { display: none; }
  /* Between the HUD row (top + 60 px) and the bottom bar (64 px + safe area): the menu scrolls instead of
     running under the bar (user 2026-10-18: "onderste deel valt weg"). */
  .cp-menu { max-height: calc(100% - var(--cp-safe-t) - var(--cp-safe-b) - 140px); overflow-y: auto; overscroll-behavior: contain; }
}
/* Very narrow phones: the rating pill without padding to spare. */
@media (max-width: 360px) {
  .cp-hud__rating { padding: 0 8px 0 6px; font-size: 16px; }
}
/* Phones with the gems pill (ui/gems.js) in the HUD row as well: money, guests, rating, goal, gems
   and the menu share one row, so the row tightens its spacing and the amount is set a little smaller
   (a long one, .is-long from hud.js, smaller still). If the exact amount still does not fit, hud.js
   fitMoney shows the short form ("€ 974K"), and as a last resort (320 px) hides the guest count. */
@media (max-width: 419px) {
  .cp-hud:has(.cp-gems__pill:not([hidden])) { gap: 3px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__stats { gap: 6px; padding: 0 8px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__rating { gap: 3px; padding: 0 6px 0 4px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-gems__pill { gap: 3px; padding: 0 7px 0 5px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__money { font-size: 17px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__money.is-long { font-size: 16px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__guests { font-size: 16px; }
}
@media (max-width: 374px) {
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__stats { gap: 5px; padding: 0 7px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__money { font-size: 16px; }
  .cp-hud:has(.cp-gems__pill:not([hidden])) .cp-hud__money.is-long { font-size: 15px; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  .cp-panel {
    left: auto;
    right: 12px;
    top: calc(var(--cp-safe-t) + 64px);
    bottom: auto;
    width: 380px;
    max-height: calc(100vh - 160px);
    border-radius: 20px;
    padding-bottom: 12px;
    box-shadow: var(--cp-shadow);
  }
  /* HUD row: the money pill and every other HUD item keep their full width; only the goal chip gives
     way. A narrow chip drops its reward (.is-snug), then its numbers (.is-tight; hud.js fit) and
     fills the room left (up to 290 px), so the money never gets cut off however many pills show
     (rating, gems, "Gratis grond", "Alles ophalen"). */
  .cp-hud__stats { flex: none; }
  .cp-hud__extra > * { flex-shrink: 0; }
  .cp-hud__extra > .cp-goalchip { flex-shrink: 1; width: auto; min-width: 0; overflow: hidden; }
  .cp-hud__extra > .cp-goalchip.is-snug, .cp-hud__extra > .cp-goalchip.is-tight { width: 290px; }
}
/* Wide screens have room for every HUD item next to a full-size goal chip. */
@media (min-width: 1100px) {
  .cp-hud__extra > .cp-goalchip { min-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-goalchip.is-done { animation: none; box-shadow: var(--cp-shadow), 0 0 0 4px color-mix(in srgb, var(--cp-amber) 70%, transparent); }
  .cp-goalchip__fill, .cp-goalswin__fill, .cp-ratingwin__fill, .cp-ratingwin .cp-meter__fill { transition: none; }
  .cp-freeland { animation: none; }
}

/* ---------------------------------------------------------------- 'Opnieuw beginnen' (ui/new-park.js) */
/* The park reset is not one more management entry: white with a red outline, text and icon, set a
   little apart from the entries above it. Its confirm uses the red .cp-btn--danger button. */
.cp-menu__entry[data-entry="newPark"] {
  margin-top: 6px;
  background: var(--cp-white);
  color: var(--cp-bad);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cp-bad) 55%, transparent);
}
.cp-menu__entry[data-entry="newPark"] .cp-icon { color: var(--cp-bad); }

/* Phones: the goal chip sits in the bottom bar next to Bouwen (app/game.js, user 2026-10-18), a round
   progress-ring button like the bar's other buttons, without its own panel and shadow. */
.cp-bar .cp-goalchip { flex: 0 0 auto; background: transparent; box-shadow: none; border-radius: 14px; width: 48px; height: 48px; }
.cp-bar .cp-goalchip:active { background: var(--cp-ice); }