:root {
  --ink: #2b2140;
  --panel: rgba(255, 252, 245, 0.94);
  --edge: #ffffff;
  --accent: #7048e8;
  --accent2: #ff4d8d;
  --gold: #ffd43b;
  --good: #2f9e44;
  --bad: #e03131;
  --shadow: 0 6px 0 rgba(43, 33, 64, 0.18), 0 12px 28px rgba(43, 33, 64, 0.25);
  /* Modals float well above the game, so they get a deeper, softer shadow than bar items. */
  --shadow-modal: 0 14px 0 rgba(30, 20, 50, 0.45), 0 36px 70px rgba(10, 6, 24, 0.6), 0 70px 160px rgba(10, 6, 24, 0.5);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9cc7e6;
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}
#app, #app canvas { position: fixed; inset: 0; display: block; }

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
}

/* ---------- top bar ---------- */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
  /* The logo is positioned on its own, so reserve room for it at the left of the bar. */
  padding-left: calc(var(--logo-w) + 18px);
}
:root {
  --logo-h: 104px;
  --logo-w: calc(var(--logo-h) * 1.5);
}
/* Frosted grey strip behind the header items, fading out into the park at the bottom.
   It lives on a pseudo-element so the mask fades the backdrop, not the buttons. */
#topbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: -26px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(52, 54, 64, 0.5) 0%, rgba(52, 54, 64, 0.34) 55%, rgba(52, 54, 64, 0) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}
/* Large logo that hangs below the bar without making it taller; clicking it opens About.
   It stays above modal backdrops (z 15–30) but below the loading screen (z 40). */
#headerLogo {
  position: fixed;
  z-index: 35;
  left: 8px;
  top: 2px;
  height: var(--logo-h);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s;
}
#headerLogo img { height: 100%; width: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); }
#headerLogo:hover { transform: scale(1.04) rotate(-1.5deg); }
#headerLogo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

/* About */
/* About: the logo sits on top of the card, overlapping its top edge, as on the sign-in screen. */
.about-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); max-height: calc(100vh - 32px); transition: transform 0.2s; }
.modal.hidden .about-card { transform: scale(0.94); }
.about-card .about-logo { position: relative; z-index: 2; flex: 0 0 auto; width: min(380px, 80%); height: auto; margin: 0 auto -64px; display: block; pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); animation: logoFloat 4.5s ease-in-out infinite; }
.about-card .sheet.about { width: 100%; min-height: 0; overflow-y: auto; padding-top: 70px; }
.about-card .sheet.about h1 { margin-top: 4px; }
@media (max-width: 520px) { .about-card .about-logo { width: min(280px, 80%); margin-bottom: -46px; } .about-card .sheet.about { padding-top: 52px; } }
@media (prefers-reduced-motion: reduce) { .about-card .about-logo { animation: none; } }
.about-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; width: 100%; margin: 4px 0 16px; padding: 12px 16px; border-radius: 14px; background: #f8f6ff; text-align: left; font-size: 14px; }
.about-facts dt { font-weight: 700; opacity: 0.7; }
.about-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.about-facts code { font-size: 13px; background: #fff; border-radius: 6px; padding: 1px 6px; }
.about-dev { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 0 16px; padding: 12px 16px 14px; border-radius: 14px; background: #f8f6ff; text-align: center; }
.about-dev-head { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding-left: 0.06em; text-transform: uppercase; opacity: 0.7; margin-bottom: 8px; }
.about-dev a { display: block; width: min(170px, 100%); aspect-ratio: 2098 / 657; margin: 0 auto; overflow: hidden; border-radius: 6px; transition: transform 0.15s; }
.about-dev a:hover { transform: translateY(-2px); }
.about-dev a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
/* The PNG has uneven transparent margins (more on the left and bottom): the link
   is sized to the artwork alone (2098×657 of the 2172×724 image) and the image is shifted inside it, so it centres. */
.about-dev img { display: block; width: 103.53%; max-width: none; height: auto; margin: -0.429% 0 0 -2.097%; }
#topbar > * { pointer-events: auto; flex: 0 0 auto; }
/* Every top-bar item has a fixed width and digits are fixed-width, so nothing shifts as numbers change. */
#topbar { font-variant-numeric: tabular-nums; }
#topbar .spacer { flex: 1 1 auto; }
.brand { width: 240px; }
#brandName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.stat { overflow: hidden; white-space: nowrap; }
.stat.money { width: 160px; }
.stat.guests { width: 98px; }
.stat.rating { width: 198px; }
.stat.ticket { width: 152px; }
#publishBtn { width: 200px; }
#accountsBtn { width: 144px; }
#staffBtn { width: 118px; }
#inboxBtn { width: 122px; }
#parkBtn { width: 108px; }
#helpBtn { width: 104px; }
#helpBtn.active { box-shadow: var(--shadow), 0 0 0 3px rgba(112, 72, 232, 0.35); }
.pill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ratingTxt { min-width: 38px; text-align: right; }
.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
button.brand { border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; }
button.brand:hover { transform: translateY(-2px) scale(1.02); }
.brand .caret { font-size: 13px; opacity: 0.85; margin-left: -2px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #adb5bd; box-shadow: 0 0 0 2px #fff; }
.dot.on { background: #51cf66; }
.brand .dot { position: absolute; left: 34px; top: 30px; }
.brand .logo {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: #fff;
  border-radius: 50%;
  font-size: 20px;
  animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.stat {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  font-weight: 600;
  font-size: 17px;
  min-height: 44px;
}
.stat .si { font-size: 18px; }
.stat.money { color: var(--good); font-size: 19px; }
.stat.money.neg { color: var(--bad); }
.stat .small { font-size: 13px; opacity: 0.75; min-width: 32px; }
.bar { width: 90px; height: 12px; border-radius: 99px; background: #e9e2f5; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,0.12); }
#rating { height: 100%; width: 70%; border-radius: 99px; transition: width 0.6s, background 0.6s; }
.spacer { flex: 1; }
.group {
  display: flex; gap: 2px; padding: 4px;
  border-radius: 999px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
}
.group button {
  width: 38px; height: 32px;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
}
.group button:hover { background: #efe9ff; }
.group button.active { background: var(--accent); color: #fff; }
.round {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  font-size: 22px;
  transition: transform 0.15s;
}
.round:hover { transform: scale(1.08) rotate(-8deg); }

/* ---------- toolbar ---------- */
#toolbar {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 340px));
  z-index: 5;
}
#tabs {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-bottom: -4px;
  position: relative;
  z-index: 1;
}
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 12px;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 252, 245, 0.78);
  border: 3px solid var(--edge);
  border-bottom: none;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.12s, background 0.12s, border-radius 0.3s, padding 0.3s;
}
.tab .ti { font-size: 18px; }
/* Build and Delete are groups: their sub-tabs are hidden until the group is expanded. */
.tabgroup .caret { font-size: 11px; opacity: 0.6; margin-left: -2px; }
.tabgroup.current { color: var(--accent); }
.tabgroup.expanded { background: #fff; }
.subtabs { display: none; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 4px; align-self: center; margin: 0 4px 8px; }
.subtabs.open { display: grid; animation: subtabsIn 0.2s ease-out; }
#toolbar.collapsed .subtabs { margin-bottom: 0; }
@keyframes subtabsIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.subbtn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.9);
  border: 2px solid var(--edge);
  box-shadow: var(--shadow);
  font-weight: 600; font-size: 13px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.subbtn .ti { font-size: 15px; }
.subbtn:hover { background: #fff; }
.subbtn.active { background: #fff; color: var(--accent); border-color: var(--accent); }
.tab:hover { transform: translateY(-3px); background: #fff; }
.tab.active {
  background: linear-gradient(180deg, #fff, var(--panel));
  color: var(--accent);
  transform: translateY(-4px);
}
#tray {
  display: flex;
  gap: 10px;
  padding: 14px;
  min-height: 128px;
  overflow-x: auto;
  border-radius: 22px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  max-height: 180px;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s, border-width 0.35s;
}
/* Minimised: only the tab strip shows. Opening a tab with items slides the tray back up. */
#toolbar.collapsed #tray { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; overflow: hidden; box-shadow: none; }
#toolbar.collapsed #tabs { margin-bottom: 0; }
#toolbar.collapsed .tab { border-radius: 16px; border-bottom: 3px solid var(--edge); padding-bottom: 8px; box-shadow: var(--shadow); }
.hint { align-self: center; margin: 0 auto; font-size: 16px; opacity: 0.75; text-align: center; padding: 0 20px; }
.card {
  flex: 0 0 auto;
  width: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 16px;
  background: #fff;
  border: 3px solid #eee6fb;
  box-shadow: 0 4px 0 #e2d8f5;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.card:hover { transform: translateY(-4px); border-color: #c9b7ff; }
.card.active {
  border-color: var(--accent);
  box-shadow: 0 4px 0 var(--accent), 0 0 0 4px rgba(112, 72, 232, 0.18);
  transform: translateY(-4px);
}
.card .ci { font-size: 36px; line-height: 1; position: relative; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.18)); }
.card .sw { position: absolute; right: -8px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; }
.card .cn { font-weight: 600; font-size: 13px; text-align: center; line-height: 1.1; }
.card .cc { font-size: 12px; color: var(--good); font-weight: 600; background: #ebfbee; padding: 1px 8px; border-radius: 99px; }

/* ---------- panels ---------- */
.panel {
  position: fixed;
  right: 14px; top: 88px;
  width: 300px;
  padding: 14px;
  border-radius: 22px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  z-index: 6;
  transition: opacity 0.2s, transform 0.2s;
}
.panel.hidden { opacity: 0; transform: translateX(30px); pointer-events: none; }
.ph { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ph .pi {
  font-size: 30px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3f0ff, #ffe3ef);
}
.ph .pt { font-weight: 700; font-size: 19px; line-height: 1.1; }
.ph .sub { font-size: 13px; opacity: 0.75; }
.ph .x { margin-left: auto; align-self: flex-start; background: #f1f3f5; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; }
.chip { display: inline-block; margin-top: 3px; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.chip.ok { background: #d3f9d8; color: #2b8a3e; }
.chip.bad { background: #ffe3e3; color: #c92a2a; }
.chip.warn { background: #fff3bf; color: #a7690f; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.stats div { background: #fff; border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; }
.stats span { font-size: 11px; opacity: 0.6; }
.stats b { font-size: 16px; }
.price { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 6px 10px; margin-bottom: 10px; }
.price span { flex: 1; font-size: 13px; opacity: 0.7; }
.price b { min-width: 46px; text-align: center; font-size: 18px; color: var(--good); }
.price button { width: 30px; height: 30px; border-radius: 50%; background: #f3f0ff; font-size: 18px; font-weight: 700; color: var(--accent); }
.ingredients { background: #fff; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.ingredients .ih { display: flex; align-items: baseline; margin-bottom: 6px; }
.ingredients .ih span { margin-left: auto; font-size: 12px; opacity: 0.65; }
.ingredients .iopts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ingredients .iopts button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 10px; background: #f3f0ff; color: #4b3f72; font-size: 11px; font-weight: 600; border: 2px solid transparent; }
.ingredients .iopts button span { font-size: 18px; line-height: 1.1; }
.ingredients .iopts button:hover { background: #e9e3ff; }
.ingredients .iopts button.on { background: #fff; border-color: var(--accent); color: var(--accent); }
.ingredients .idesc { margin-top: 6px; font-size: 12px; opacity: 0.8; line-height: 1.35; }
.ingredients .idesc b { color: var(--bad, #e03131); }
body.frozen #info .ingredients button { pointer-events: none; opacity: 0.5; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions button {
  flex: 1 1 auto;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f1f3f5;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.1);
  transition: transform 0.1s;
}
.actions button:hover:not(:disabled) { transform: translateY(-2px); }
.actions button:disabled { opacity: 0.4; cursor: default; }
.actions .primary { background: var(--accent); color: #fff; box-shadow: 0 3px 0 #5232b8; }
.actions .danger { background: #ffe3e3; color: #c92a2a; }
.pieces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.cp-route { font-size: 13px; background: #f3f0ff; color: #4b3f72; border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; min-height: 18px; }
.cp-route b { color: var(--accent); }
.cp-route .neg, .cp-route b.neg { color: var(--bad); }
.piece {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 6px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #eee6fb;
  box-shadow: 0 3px 0 #e2d8f5;
  transition: transform 0.1s, border-color 0.1s;
}
.piece span { font-size: 22px; line-height: 1; color: var(--accent); }
.piece small { font-size: 10px; font-weight: 600; opacity: 0.75; }
.piece:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.piece:disabled { opacity: 0.3; cursor: not-allowed; }
.tip { margin-top: 10px; font-size: 12px; opacity: 0.75; line-height: 1.35; }

/* ---------- accounts ---------- */
.pill {
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd43b, #ffa94d);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.15s;
}
.pill:hover { transform: translateY(-2px); }
.modal {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(43, 33, 64, 0.35);
  backdrop-filter: blur(3px);
  z-index: 15;
  transition: opacity 0.2s;
  padding: 16px;
}
.modal.hidden { opacity: 0; pointer-events: none; }
.modal.hidden .sheet { transform: scale(0.94); }
.sheet {
  width: min(980px, 100%);
  max-height: min(760px, calc(100vh - 32px));
  display: flex; flex-direction: column;
  border-radius: 24px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow-modal);
  padding: 18px;
  transition: transform 0.2s;
}
.sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.sheet-head .pt { font-weight: 700; font-size: 22px; }
.sheet-head .x { margin-left: auto; background: #f1f3f5; width: 34px; height: 34px; border-radius: 50%; }
.filters { display: flex; gap: 4px; background: #f3f0ff; padding: 4px; border-radius: 999px; }
.filters button { padding: 6px 14px; border-radius: 999px; background: transparent; font-weight: 600; font-size: 13px; }
.filters button.active { background: var(--accent); color: #fff; }
.accview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#accounts .filters.hidden, .accview.hidden { display: none; }
#accChartView .foot { margin-top: 10px; }
.pc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.pc-tile { padding: 10px 14px; border-radius: 14px; background: #fff; border: 2px solid #f1edff; display: flex; flex-direction: column; }
.pc-tile span { font-size: 12.5px; opacity: 0.65; font-weight: 600; }
.pc-tile b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pc-tile small { font-size: 12px; opacity: 0.55; }
.pc-controls { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pc-body { min-height: 0; overflow: auto; }
.pc-chart { position: relative; }
.pc-chart svg { display: block; max-width: 100%; height: auto; }
.pc-axis { font-size: 11.5px; fill: rgba(43, 33, 64, 0.6); font-variant-numeric: tabular-nums; }
.pc-end { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.pc-tip { position: absolute; pointer-events: none; min-width: 210px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(43, 33, 64, 0.22); font-size: 13px; z-index: 2; }
.pc-tip.hidden { display: none; }
.pc-tip b { display: block; margin-bottom: 4px; }
.pc-tip div { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.pc-tip div span:first-child { opacity: 0.7; }
.pc-tip .pc-tp { font-weight: 700; }
.pc-tip .pc-tp span:first-child { opacity: 1; }
.pc-tip i, .pc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pc-legend { display: flex; gap: 16px; justify-content: center; font-size: 13px; margin-top: 4px; }
.pc-empty { text-align: center; opacity: 0.6; padding: 40px 0; }
.pc-table { max-height: 330px; }
@media (max-width: 760px) { .pc-tiles { grid-template-columns: repeat(2, 1fr); } }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.summary div { background: #fff; border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; }
.summary span { font-size: 12px; opacity: 0.65; }
.summary b { font-size: 20px; font-variant-numeric: tabular-nums; }
.summary .net { background: linear-gradient(135deg, #f3f0ff, #fff0f6); }
.table-wrap { overflow: auto; border-radius: 14px; background: #fff; flex: 1; min-height: 0; }
#accTable, .pc-table table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#accTable th, .pc-table table th {
  position: sticky; top: 0;
  background: #f8f6ff;
  text-align: right;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6c5f8d;
  cursor: pointer;
  white-space: nowrap;
}
#accTable th:first-child, #accTable td:first-child, #accTable th.l, #accTable td.l, .pc-table table th:first-child, .pc-table table td:first-child, .pc-table table th.l, .pc-table table td.l { text-align: left; }
#accTable th.sorted, .pc-table table th.sorted { color: var(--accent); }
#accTable td, .pc-table table td { padding: 8px 12px; text-align: right; border-top: 1px solid #f1eef8; white-space: nowrap; }
#accTable tbody tr { cursor: pointer; }
#accTable tbody tr:hover { background: #faf8ff; }
#accTable tfoot td { font-weight: 700; background: #f8f6ff; border-top: 2px solid #e5dffa; position: sticky; bottom: 0; }
.pos { color: #2b8a3e; }
.neg { color: #c92a2a; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.tag.open { background: #d3f9d8; color: #2b8a3e; }
.tag.closed { background: #f1f3f5; color: #868e96; }
.tag.broken { background: #ffe3e3; color: #c92a2a; }
.tag.build { background: #fff3bf; color: #a7690f; }
.foot { margin-top: 10px; font-size: 12px; opacity: 0.6; }
.broken { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff5f5; color: #c92a2a; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-weight: 600; font-size: 13px; }
.broken button { margin-left: auto; padding: 6px 10px; border-radius: 10px; background: #c92a2a; color: #fff; font-weight: 600; font-size: 12px; }
.stats b.pos { color: #2b8a3e; }
.stats b.neg { color: #c92a2a; }

/* ---------- multiplayer ---------- */
.pill.pub { background: linear-gradient(135deg, #63e6be, #4dabf7); }
.pill.pub.live { background: linear-gradient(135deg, #51cf66, #20c997); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.field {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 3px solid #e5dffa;
  font: 600 18px 'Fredoka', sans-serif;
  color: var(--ink);
  outline: none;
  text-align: center;
  margin-bottom: 4px;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(112, 72, 232, 0.15); }
.field-label { align-self: flex-start; font-size: 13px; font-weight: 600; opacity: 0.7; margin: 4px 0; }
.field-error { min-height: 20px; color: var(--bad); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.danger-text { color: var(--bad) !important; }
#nameModal, #publishModal { z-index: 26; }
#aboutModal { z-index: 28; } /* opened from the logo, so it can appear over another modal */
.sheet.parks { width: min(900px, 100%); }
.sheet-head .me { font-size: 13px; opacity: 0.6; }
.sheet-head .me + .x { margin-left: auto; }
.sheet-head .x + .x { margin-left: 0; }
.mine { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, #f3f0ff, #fff0f6); margin-bottom: 12px; }
.mine .mi { font-size: 28px; }
.mine .mt { flex: 1; display: flex; flex-direction: column; }
.mine .mt span { font-size: 13px; opacity: 0.7; }
.mine button, .park button { padding: 9px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; background: #fff; color: var(--accent); box-shadow: 0 3px 0 #e2d8f5; }
.mine button.go, .park button.go { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 3px 0 #5232b8; }
.park button:disabled { opacity: 0.6; cursor: default; }
.park-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; overflow: auto; min-height: 120px; padding: 2px; }
.park { border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 4px 0 #ece6f8; display: flex; flex-direction: column; transition: transform 0.15s; }
.park:hover { transform: translateY(-3px); }
.park .banner {
  height: 70px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  position: relative;
  background: linear-gradient(135deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 50) 80% 70%));
}
.park .banner em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.9); padding: 2px 8px; border-radius: 99px; }
.park .pb { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.park .pb b { font-size: 17px; line-height: 1.15; }
.park .by { font-size: 12px; opacity: 0.7; display: flex; align-items: center; gap: 6px; }
.park .by .dot { width: 8px; height: 8px; box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { font-size: 11px; background: #f3f0ff; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.empty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; font-size: 16px; opacity: 0.75; line-height: 1.6; }
.empty code { background: #f1f3f5; padding: 2px 6px; border-radius: 6px; }

#visitBar {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: min(1000px, calc(100vw - 340px));
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border-radius: 22px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  z-index: 5;
  flex-wrap: wrap;
}
.vb-info { display: flex; align-items: center; gap: 10px; }
.vb-info b { color: var(--accent); }
.vb-info small { opacity: 0.7; }
.vb-ticket { font-size: 28px; }
.vb-hint { flex: 1; font-size: 12px; opacity: 0.6; text-align: center; min-width: 140px; }
.emotes { display: flex; gap: 4px; }
.emotes button { width: 38px; height: 38px; border-radius: 12px; background: #fff; font-size: 20px; box-shadow: 0 3px 0 #e2d8f5; transition: transform 0.1s; }
.emotes button:hover { transform: translateY(-2px) scale(1.08); }
#homeBtn { padding: 11px 18px; border-radius: 14px; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 4px 0 #5232b8; }
body.visiting #visitBar { display: flex; }
body.visiting #toolbar, body.visiting .stat.money, body.visiting .stat.ticket, body.visiting #accountsBtn,
body.visiting #publishBtn, body.visiting .owner-only, body.visiting .online-only,
body.visiting #pMinus, body.visiting #pPlus, body.visiting #aToggle, body.visiting #aEdit { display: none !important; }
body.ridecam #visitBar { display: none; }

/* ---------- guest satisfaction breakdown ---------- */
.stat.rating { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.stat.rating:hover { transform: translateY(-2px); }
.stat.rating.active { box-shadow: var(--shadow), 0 0 0 3px rgba(112, 72, 232, 0.35); }
#moodPanel {
  /* Diverging mood scale (validated): red arm = unhappy, blue arm = happy. */
  --mood-0: #c93a3a; --mood-1: #ec8c8b; --mood-2: #6da7ec; --mood-3: #1c5cab;
  --love: #2a78d6; --hate: #e34948;
  --ink-2: #5f5873; --ink-3: #8a8399; --track: #efeaf7;
  position: fixed;
  top: 88px;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 16px 18px 14px;
  border-radius: 22px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  z-index: 8;
  transition: opacity 0.18s, transform 0.18s;
}
#moodPanel.hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }
#moodPanel .mh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#moodPanel .hero { display: flex; align-items: center; gap: 12px; }
#moodPanel .hero .face { font-size: 40px; line-height: 1; }
#moodPanel .hero b { display: block; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
#moodPanel .hero span { font-size: 13px; color: var(--ink-2); }
#moodPanel .x { margin-left: auto; align-self: flex-start; background: #f1f3f5; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; }
.dist { display: flex; gap: 2px; height: 16px; margin-bottom: 8px; }
.dist i { display: block; min-width: 4px; }
.dist i:first-child { border-radius: 4px 0 0 4px; }
.dist i:last-child { border-radius: 0 4px 4px 0; }
.dist i:only-child { border-radius: 4px; }
.b0 { background: var(--mood-0); } .b1 { background: var(--mood-1); } .b2 { background: var(--mood-2); } .b3 { background: var(--mood-3); }
.dlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin-bottom: 14px; }
.dlegend span { display: inline-flex; align-items: center; gap: 5px; }
.dlegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dlegend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dlegend em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcols section { background: #fff; border-radius: 14px; padding: 10px 12px; }
.mcols h4 { margin: 0 0 8px; font-size: 14px; }
.mrow { display: grid; grid-template-columns: 22px 1fr 64px 40px; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; }
.mrow + .mrow { border-top: 1px solid #f3f0f8; }
.mrow .mi { font-size: 16px; text-align: center; }
.mrow .ml { line-height: 1.15; }
.mrow .ml small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.mrow .mb { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.mrow .mb i { display: block; height: 100%; border-radius: 4px; transition: width 0.4s; }
.mrow .mb i.love { background: var(--love); }
.mrow .mb i.hate { background: var(--hate); }
.mrow .mv { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mrow .mv em { display: block; font-style: normal; font-weight: 500; font-size: 10px; color: var(--ink-3); }
.mnone { font-size: 13px; color: var(--ink-3); padding: 6px 0; }
.mfav { margin-top: 10px; display: grid; gap: 4px; font-size: 12.5px; }
.mfav span { font-weight: 700; margin-right: 6px; }
.mfav em { font-style: normal; color: var(--ink-3); }
.mfoot { margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.mfoot em { font-style: normal; font-weight: 600; }
.empty-mood { font-size: 14px; color: var(--ink-2); padding: 6px 2px 4px; }
#vizTip {
  position: fixed;
  z-index: 40;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #2b2140;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
#vizTip.show { opacity: 1; }
#vizTip .tiptxt { color: #ffe066; }
@media (max-width: 700px) { .mcols { grid-template-columns: 1fr; } }

/* ---------- ticket price ---------- */
.stat.ticket { gap: 6px; padding-right: 8px; }
.stat.ticket button {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #f3f0ff;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.stat.ticket button:hover { background: var(--accent); color: #fff; }
#fee { min-width: 38px; text-align: center; color: var(--accent); }

/* ---------- save chip ---------- */
#saveChip {
  position: fixed;
  right: 14px; top: 86px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  font-weight: 600;
  font-size: 13px;
  z-index: 7;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
#saveChip.show { opacity: 1; transform: none; }

/* ---------- start menu ---------- */
#startMenu { z-index: 25; background: rgba(43, 33, 64, 0.45); }
.sheet.start { width: min(560px, 100%); align-items: center; text-align: center; padding: 26px 26px 18px; }
.start-logo {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  font-size: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: var(--shadow);
  animation: wobble 4s ease-in-out infinite;
}
.sheet.start h1 { margin: 12px 0 2px; font-size: 32px; color: var(--accent); }
.sheet.start .lead { margin: 0 0 14px; opacity: 0.75; }
.sheet.start .summary { width: 100%; grid-template-columns: repeat(2, 1fr); text-align: left; }
.start-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.start-actions button {
  padding: 14px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 18px;
  transition: transform 0.12s;
}
.start-actions button:hover { transform: translateY(-2px); }
.start-actions .go { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 5px 0 #5232b8; }
.start-actions .alt { background: #fff; color: var(--accent); box-shadow: 0 4px 0 #e2d8f5; }

/* ---------- camera pad ---------- */
#camPad {
  position: fixed;
  left: 14px; bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 4px;
  padding: 6px;
  border-radius: 18px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  z-index: 5;
}
#camPad button { width: 36px; height: 36px; border-radius: 10px; background: #fff; font-size: 16px; color: var(--accent); box-shadow: 0 2px 0 #e2d8f5; }
#camPad button:hover { background: #f3f0ff; }
#camPad button:active { transform: translateY(1px); box-shadow: none; }
body.ridecam #camPad { display: none; }

/* ---------- toasts ---------- */
#toasts {
  position: fixed;
  top: 88px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 30; /* above open panels (.modal), so messages from inside them are seen */
  pointer-events: none;
}
.toast {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  font-weight: 600;
  font-size: 15px;
  animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.4s, transform 0.4s;
  max-width: 80vw;
  text-align: center;
}
.toast.good { background: #ebfbee; color: #2b8a3e; }
.toast.bad { background: #fff5f5; color: #c92a2a; }
.toast.out { opacity: 0; transform: translateY(-10px); }
/* Draws the eye to a button after a hint points at it. */
.nudge { box-shadow: 0 0 0 4px rgba(112, 72, 232, 0.35) !important; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 3px rgba(112, 72, 232, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(112, 72, 232, 0.45); } }
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }
.nospare { flex-basis: 100%; margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: #fff; color: #c92a2a; font-size: 13px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- help ---------- */
#help {
  position: fixed;
  right: 12px; top: 76px;
  z-index: 6;
  max-width: calc(100vw - 24px);
}
#help .body {
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.6;
}
#help.collapsed .body { display: none; }
kbd { background: #fff; border: 1px solid #ddd; border-bottom-width: 3px; border-radius: 6px; padding: 0 5px; font-family: inherit; font-size: 12px; }

/* ---------- ride cam ---------- */
#exitRideCam {
  display: none;
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--shadow);
  z-index: 9;
}
body.ridecam #exitRideCam { display: block; }
body.ridecam #topbar, body.ridecam #headerLogo, body.ridecam #toolbar, body.ridecam #help, body.ridecam .panel { display: none; }

/* ---------- loading ---------- */
#loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, #2a1f5c 0%, #140f30 45%, #07060f 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  z-index: 45; /* above the header logo; it has its own */
  transition: opacity 0.7s;
}
#loading.done { opacity: 0; pointer-events: none; }
.load-logo {
  width: min(560px, 84vw);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(255, 77, 141, 0.35));
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.015); } }
.load-text { letter-spacing: 0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.load-text .dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.load-bar { width: min(280px, 60vw); height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.load-bar i { display: block; width: 40%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff4d8d, #ffd43b, #7cff4d); animation: loadSlide 1.3s ease-in-out infinite; }
@keyframes loadSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

@media (max-width: 1840px) {
  .brand { width: 200px; }
  #publishBtn { width: 100px; }
  #accountsBtn, #staffBtn, #inboxBtn, #parkBtn, #helpBtn { width: 56px; }
  #topbar .lbl { display: none; }
  .pill { padding: 0 12px; }
}
@media (max-width: 1600px) {
  :root { --logo-h: 80px; }
  #topbar { gap: 8px; }
  .brand { width: 150px; font-size: 18px; }
  .stat { font-size: 15px; padding: 7px 11px; }
  .stat.money { width: 140px; font-size: 16px; }
  .stat.guests { width: 86px; }
  .stat.rating { width: 120px; }
  .stat.rating .bar { width: 60px; }
  #ratingTxt { display: none; }
    .stat.ticket { width: 140px; }
}
@media (max-width: 1360px) {
  :root { --logo-h: 78px; }
  .brand { width: 76px; }
  #brandName, .brand .caret { display: none; }
  }
@media (max-width: 1180px) {
  :root { --logo-h: 54px; }
  .stat.money { width: 122px; }
  .group button[data-speed="4"] { display: none; }
}
/* Overflow menu: fitTopbar() moves trailing buttons in here when the bar runs out of room. */
#moreWrap { position: relative; }
#moreWrap.off { display: none; }
#moreBtn { width: 56px; padding: 0; font-size: 22px; }
#moreBtn.active { box-shadow: var(--shadow), 0 0 0 3px rgba(112, 72, 232, 0.35); }
/* Fixed to the right edge (top set in JS) so it stays on screen even when the bar wraps. */
#moreMenu {
  position: fixed; right: 12px; top: 76px;
  max-height: calc(100vh - 96px); overflow-y: auto;
  display: none; flex-direction: column; gap: 8px;
  min-width: 210px; padding: 10px;
  border-radius: 18px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: var(--shadow);
  z-index: 10;
}
#moreMenu.open { display: flex; }
#topbar #moreMenu > * { width: 100%; height: 44px; text-align: left; }
#topbar #moreMenu .lbl { display: inline; }
#topbar #moreMenu .pill:hover { transform: translateX(-2px); }
/* Still too wide with every button in the menu: let the stats wrap rather than run off-screen. */
#topbar.wrap { flex-wrap: wrap; row-gap: 6px; }
#topbar.measuring { flex-wrap: nowrap; }
@media (max-width: 900px) {
  #topbar { gap: 6px; }
  .stat.money { width: 104px; }
  .stat.guests { width: 72px; }
  .stat.rating { width: 84px; }
  .stat.rating .bar { width: 36px; }
  .stat.ticket { width: 136px; }
  }
@media (max-width: 760px) {
  .tab .tl, .subbtn .tl, .brand span:last-child, .stat .small { display: none; }
  #topbar { padding: 8px 12px; }
  :root { --logo-h: 52px; }
  #toolbar, #visitBar { width: calc(100vw - 32px); }
  .stat { min-height: 38px; font-size: 14px; padding: 4px 10px; }
  .bar { width: 50px; }
  .panel { left: 16px; right: 16px; width: auto; top: auto; bottom: 200px; }
  #camPad { display: none; }
  .vb-hint, .brand .caret { display: none; }
  .pill { height: 38px; padding: 0 12px; font-size: 14px; }
  #accTable, .pc-table table { font-size: 12px; }
}

/* ---------- online parks: staff, inbox, park, map, leaderboard ---------- */
#mapCard.hidden, #mapEmpty.hidden, .badge.hidden, #suspended.hidden { display: none; }
body.sandbox .online-only { display: none !important; }
#sandboxBadge { display: none; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff3bf; color: #8a5a00; font-weight: 700; border: 3px solid var(--edge); box-shadow: var(--shadow); white-space: nowrap; }
body.sandbox #sandboxBadge { display: flex; }
body.sandbox #publishBtn { display: none; }
.pill { position: relative; }
.badge { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-style: normal; font-size: 11px; line-height: 18px; text-align: center; }
#inboxBtn.alert { background: linear-gradient(135deg, #ff8787, #ffa94d); }
#inboxBtn.pulse { animation: pulse 0.6s ease-in-out 4; }
@keyframes pulse { 50% { transform: scale(1.12); } }
#suspended { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 8px 18px; border-radius: 999px; background: rgba(43, 33, 64, 0.85); color: #fff; font-weight: 600; box-shadow: var(--shadow); }
#reconnect { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; }
#reconnect.hidden { display: none; }
#reconnect > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px; border-radius: 20px; background: var(--panel); border: 3px solid var(--edge); box-shadow: var(--shadow); text-align: center; }
#reconnect small { opacity: 0.7; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 4px solid #e5dffa; border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
body.frozen #toolbar, body.frozen #info .actions, body.frozen #info .price button { pointer-events: none; opacity: 0.5; }

.sheet.wide { width: min(1000px, 100%); }
.panel-body { overflow: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.muted { opacity: 0.6; }
.hire { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.hire button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 #e2d8f5; transition: transform 0.12s; }
.hire button:hover { transform: translateY(-2px); }
.hire .hi { font-size: 26px; }
.hire small, .event small, .parcels small { display: block; font-size: 12px; opacity: 0.7; font-weight: 500; }
.vacancy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; font-size: 14px; }
.vacancy.warn { background: #fff3bf; }
.vacancy.ok { background: #ebfbee; }
.vbtns { margin-left: auto; display: flex; gap: 6px; }
.vbtns button, .notice button, .staffline button, .lb button, .lb-pages button, .map-tools button { padding: 7px 12px; border-radius: 10px; background: #fff; color: var(--accent); font-weight: 700; box-shadow: 0 2px 0 #e2d8f5; }
.vbtns button.primary, #landView, .map-card .go, #mapCard .go { background: var(--accent); color: #fff; box-shadow: 0 2px 0 #5232b8; padding: 8px 14px; border-radius: 12px; font-weight: 700; }
.vbtns button:disabled { opacity: 0.4; cursor: default; }
.grace { padding: 8px 12px; border-radius: 12px; background: #e7f5ff; font-size: 14px; }
.focusnote { padding: 8px 12px; border-radius: 12px; background: #f3f0ff; font-size: 14px; }
table.staff, table.incidents, table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.staff th, table.incidents th, table.lb th { position: sticky; top: 0; background: #f8f6ff; padding: 8px 10px; font-size: 12px; text-align: right; }
table.staff td, table.incidents td, table.lb td { padding: 7px 10px; border-top: 1px solid #f1eef8; text-align: right; }
table.staff .l, table.incidents .l, table.lb .l, table.staff td:first-child, table.staff td:nth-child(2), table.staff td:nth-child(3), table.incidents td:first-child, table.incidents td:nth-child(3) { text-align: left; }
table.staff td small { display: block; font-size: 11px; opacity: 0.6; }
table.staff tr.focus { background: #f3f0ff; }
table.staff select { font-family: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 2px solid #e5dffa; max-width: 240px; }
table.staff button { background: none; font-weight: 700; }
.wages { font-size: 14px; padding: 4px 2px; }
.staffline { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 6px 10px; margin-bottom: 10px; font-size: 13px; }
.staffline button { margin-left: auto; font-size: 12px; }
.reason { font-size: 13px; margin: -4px 0 8px; color: #a7690f; font-weight: 600; }
.gatedesc { font-size: 13px; line-height: 1.4; margin: -2px 0 10px; color: var(--ink-soft, #5c5470); }
.gatehint { font-size: 12px; line-height: 1.35; margin: -4px 0 10px; color: #8a7fa0; }
.warnbox { background: #fff3bf; color: #8a5a00; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.upgrade { display: flex; flex-direction: column; gap: 4px; background: #fff9db; border: 2px solid #ffe8a1; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.upgrade .uh { display: flex; align-items: baseline; gap: 8px; }
.upgrade .uh b { color: #b07800; letter-spacing: 1px; }
.upgrade .uh span { margin-left: auto; font-size: 12px; color: #8a6d00; }
.upgrade .prog.big { margin: 2px 0; }
.upgrade .prog i { background: linear-gradient(90deg, #f2b632, #ff922b); }
.upgrade .perks { color: #7a6a3a; }
.upgrade.ready { background: linear-gradient(135deg, #fff3bf, #ffe8cc); border-color: #fcc419; }
.upgrade.ready button { margin-top: 4px; padding: 9px 12px; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f59f00, #f76707); box-shadow: 0 4px 0 #c75c00; }
.upgrade.ready button:disabled { opacity: 0.5; cursor: not-allowed; }
.upgrade.maxed { flex-direction: row; align-items: baseline; gap: 8px; }
.upgrade.maxed b { color: #b07800; letter-spacing: 1px; }
.pt .stars { color: #f2b632; font-size: 0.8em; letter-spacing: 1px; text-shadow: 0 1px 0 #b07800; }
.condemned { background: #ffe3e3; color: #a51d1d; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.condemned .actions { margin-top: 8px; }

.event { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 3px 0 #ece6f8; }
.event.live { box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.35), 0 3px 0 #ece6f8; }
.event .eh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event .st { margin-left: auto; font-size: 12px; font-weight: 600; opacity: 0.75; }
.event .handle { font-size: 13px; opacity: 0.6; }
.event p { margin: 8px 0; font-size: 14px; }
.event blockquote { margin: 8px 0; padding: 8px 12px; border-left: 4px solid #e5dffa; background: #faf8ff; border-radius: 0 10px 10px 0; font-size: 14px; user-select: text; }
.event blockquote.reply { border-left-color: #ffa8a8; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; margin: 8px 0; }
.choices button { text-align: left; padding: 8px 12px; border-radius: 12px; background: #f3f0ff; transition: transform 0.12s; }
.choices button:hover:not(:disabled) { transform: translateY(-2px); background: #e5dbff; }
.choices button:disabled { opacity: 0.45; cursor: not-allowed; }
.costs { font-size: 12px; opacity: 0.75; margin-top: 4px; }
.log { margin: 6px 0 0; padding-left: 18px; font-size: 12px; opacity: 0.75; }
.notice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #e7f5ff; font-size: 14px; }
.notice button { margin-left: auto; flex: 0 0 auto; }
.fiction { font-size: 12px; opacity: 0.6; text-align: center; margin: 4px 0 0; }
.panel-body h4 { margin: 6px 0 0; }

.pstat { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pstat h4 { margin: 0; font-size: 17px; display: flex; align-items: baseline; gap: 8px; }
.pstat h4 b { font-size: 20px; }
.pstat p { margin: 0; font-size: 14px; }
.causes { margin: 0; padding-left: 18px; font-size: 14px; }
.prog { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: #e9e2f5; overflow: hidden; vertical-align: middle; margin: 0 10px 0 4px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.prog.big { width: 100%; height: 12px; margin: 4px 0; }
.sheet.status { width: min(440px, 100%); }
/* My parks (js/slots.js) */
.sheet.slots { width: min(1180px, 100%); }
.sheet.slots .sheet-head .sub { font-size: 13px; opacity: 0.75; margin-top: 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.slot { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 16px; padding: 12px; box-shadow: inset 0 0 0 2px #ece6fb; animation: optIn 0.4s ease-out both; }
.slot:nth-child(2) { animation-delay: 0.05s; } .slot:nth-child(3) { animation-delay: 0.1s; } .slot:nth-child(4) { animation-delay: 0.15s; } .slot:nth-child(5) { animation-delay: 0.2s; }
.slot.active { box-shadow: inset 0 0 0 3px var(--accent), 0 6px 18px rgba(112, 72, 232, 0.18); }
.slot-num { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #8f86a8; }
.slot-num .chip { margin-top: 0; text-transform: none; letter-spacing: 0; }
.slot-name { font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.slot-when { font-size: 12.5px; opacity: 0.75; }
.slot-vitals { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 4px; font-size: 13px; }
.slot-vitals .sv { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; background: #f8f6ff; border-radius: 8px; }
.slot-vitals .sv span { opacity: 0.8; }
.slot-vitals .sv b.neg { color: var(--bad); } .slot-vitals .sv b.pos { color: var(--good); }
.slot-actions { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.slot-actions button, .slot.slot-free button { padding: 8px 10px; border-radius: 12px; font-weight: 700; }
.slot-actions button.primary, .slot.slot-free button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.slot-actions button.small { padding: 4px 8px; font-size: 12.5px; background: none; }
.slot.slot-free { align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px #ddd5f5; border: 2px dashed transparent; min-height: 260px; }
.slot.slot-free .slot-num { align-self: flex-start; }
.slot-empty-icon { font-size: 34px; color: #b8acdf; line-height: 1; margin-top: auto; }
.slot-empty-text { font-weight: 700; color: #8f86a8; margin-bottom: auto; }
.slot.slot-free button { width: 100%; }
.slot-foot { margin: 12px 0 0; font-size: 13px; opacity: 0.8; text-align: center; }
.slot-busy { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #f3f0ff; color: var(--accent); font-weight: 700; text-align: center; }
.slots-loading { text-align: center; padding: 30px 0; }
@media (max-width: 1100px) { .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .slot-grid { grid-template-columns: 1fr; } .slot.slot-free { min-height: 0; } }
/* CCTV wall: a grid of live feeds; a clicked feed spans the full width. */
.sheet.cctv { width: min(1200px, 100%); max-height: calc(100vh - 32px); background: #16181d; border-color: #2c3038; color: #e9ecef; }
.sheet.cctv .sheet-head .x { background: #2c3038; color: #e9ecef; }
.sheet.cctv .sheet-head .me { opacity: 0.7; }
.cctv-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 2px; }
.feed { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #000; border: 2px solid #2c3038; cursor: zoom-in; aspect-ratio: 16 / 9; }
.feed canvas { display: block; width: 100%; height: 100%; }
.feed.big { grid-column: 1 / -1; cursor: zoom-out; border-color: #868e96; }
.feed figcaption { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; gap: 10px; align-items: center; font: 600 12px/1.2 ui-monospace, Menlo, Consolas, monospace; color: #f1f3f5; text-shadow: 0 1px 2px #000; pointer-events: none; }
.feed figcaption time { margin-left: auto; }
.feed .rec { color: #ff4d4d; animation: recblink 1.2s steps(2, start) infinite; }
@keyframes recblink { to { visibility: hidden; } }
.feed .alert { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: #e03131; color: #fff; font: 700 12px ui-monospace, Menlo, Consolas, monospace; animation: recblink 0.8s steps(2, start) infinite; }
.feed .alert.hidden { display: none; }
.feed .goto { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); color: #212529; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity 0.15s; }
.feed:hover .goto, .feed.big .goto { opacity: 1; }
.pstat.upgrades h4 small { margin-left: auto; font-size: 12px; font-weight: 600; color: #8a6d00; }
#upgradeAll { align-self: flex-start; padding: 8px 14px; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f59f00, #f76707); box-shadow: 0 4px 0 #c75c00; }
#upgradeAll:disabled { opacity: 0.5; cursor: not-allowed; }
.uplist { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.uplist li { display: flex; align-items: center; gap: 8px; font-size: 14px; background: #fff9db; border-radius: 10px; padding: 6px 8px; }
.uplist li .muted { color: #8a6d00; font-size: 12px; }
.uplist li button[data-upgrade] { margin-left: auto; padding: 6px 10px; border-radius: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f59f00, #f76707); }
.uplist li button[data-upgrade]:disabled { opacity: 0.5; cursor: not-allowed; }
.uplist .link { background: none; padding: 0; font-weight: 700; color: var(--text, #2b2140); text-align: left; }
#statusBody { display: flex; flex-direction: column; gap: 10px; }
#statusBody .pstat h4 b.neg { color: var(--bad); }
#statusBody .prog i.neg { background: var(--bad); }
#statusPark { align-self: flex-start; padding: 7px 12px; border-radius: 10px; background: #f3f0ff; color: var(--accent); font-weight: 700; }
.condemned-all { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: #fff0f0; border: 2px solid #ffc9c9; font-size: 14px; }
.condemned-all button { margin-left: auto; padding: 9px 14px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
.condemned-all button:disabled { opacity: 0.5; cursor: not-allowed; }
.notice.condemn { background: #fff5f5; }
.parcels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.parcels button { text-align: left; padding: 8px 10px; border-radius: 12px; background: #ebfbee; box-shadow: 0 2px 0 #d3f9d8; }
.parcels button:disabled { background: #f1f3f5; box-shadow: none; cursor: default; }
.parcels button.owned { background: #d3f9d8; }
.parcels em { display: block; font-size: 11px; font-style: normal; color: #a7690f; }
#landView { align-self: flex-start; }
.danger-zone button.danger { align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: #ffe3e3; color: #c92a2a; font-weight: 700; }

.ptabs { margin-left: 4px; }
.map-tools { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.map-search { position: relative; flex: 1; }
.map-search .field { width: 100%; padding: 8px 12px; font-size: 14px; }
#mapResults { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
#mapResults:empty { display: none; }
#mapResults button, #mapResults .none { text-align: left; padding: 8px 12px; background: #fff; border-top: 1px solid #f1eef8; font-size: 14px; }
#mapResults button:hover { background: #f3f0ff; }
.map-wrap { position: relative; height: min(520px, calc(100vh - 260px)); border-radius: 16px; overflow: hidden; background: #5f9e46; }
#mapCanvas { display: block; cursor: grab; touch-action: none; }
.map-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; font-size: 17px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); padding: 20px; }
#mapCard { position: absolute; left: 12px; bottom: 44px; width: min(320px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 3px solid var(--edge); box-shadow: var(--shadow); }
#mapCard .mc-name { font-size: 17px; }
#mapCard .mc-by, #mapCard .mc-stats { font-size: 13px; opacity: 0.75; }
#mapCard .go { margin-top: 6px; align-self: flex-start; }
.map-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 12px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.35); }
.map-legend .dot { width: 8px; height: 8px; box-shadow: none; }
.map-legend .ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fcc419; box-shadow: 0 0 0 3px rgba(252,196,25,0.45); }
.lb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.lb-label { font-weight: 700; color: var(--accent); }
.lb-head label { margin-left: auto; font-size: 14px; }
.lb-head select { font-family: inherit; padding: 4px 8px; border-radius: 8px; border: 2px solid #e5dffa; }
.lb-me { padding: 8px 12px; border-radius: 12px; background: linear-gradient(135deg, #f3f0ff, #fff0f6); font-size: 14px; margin-bottom: 8px; }
table.lb tr.mine { background: #fff9db; }
table.lb .rank { text-align: center; font-weight: 700; }
table.lb .dot { width: 8px; height: 8px; box-shadow: none; margin-right: 6px; }
table.lb td.empty { text-align: center; }
.lb-pages { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
#ptab-board, #ptab-list { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
#ptab-board.hidden, #ptab-list.hidden, #ptab-map.hidden { display: none; }
.summary .cap { grid-column: 1 / -1; background: #f8f9fa; }
.summary .net small, .summary .cap small { font-size: 11px; opacity: 0.7; }
/* ---------- settings ---------- */
.sheet.settings { width: min(520px, 100%); padding: 20px 24px 22px; }
.sheet.settings .mhead { display: flex; align-items: center; justify-content: space-between; }
.sheet.settings h2 { margin: 0; color: var(--accent); font-size: 24px; }
.sheet.settings h3 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.sheet.settings .x { width: 34px; height: 34px; border-radius: 50%; background: #f3f0ff; font-weight: 700; }
/* Tabs: one section at a time, so the window stays short; the panel area keeps one height so the
   window doesn't jump between tabs, and scrolls if the screen is too short for it. */
.set-tabs { display: flex; gap: 2px; margin: 14px 0 12px; padding: 3px; border-radius: 14px; background: #e9e4ff; }
.set-tab { flex: 1 1 0; min-width: 0; padding: 8px 6px; border-radius: 11px; font-weight: 700; font-size: 14px; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tab:hover { opacity: 0.9; }
.set-tab.on { background: #fff; color: var(--accent); opacity: 1; box-shadow: 0 1px 4px rgba(60, 40, 120, 0.18); }
.set-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set-tab.hidden { display: none; }
.set-panels { flex: 1 1 auto; min-height: min(224px, calc(100vh - 200px)); overflow-y: auto; overscroll-behavior: contain; }
.set-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
@media (max-width: 420px) { .sheet.settings { padding: 16px 14px 18px; } .set-tab { font-size: 13px; padding: 8px 2px; } }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 14px; background: #f8f6ff; margin-bottom: 6px; }
.setrow b { display: block; }
.setrow small { display: block; font-size: 12.5px; opacity: 0.7; margin-top: 2px; }
.setrow input[type=range] { width: 170px; accent-color: var(--accent); }
.seg { display: flex; flex: 0 0 auto; padding: 3px; border-radius: 12px; background: #e9e4ff; }
.seg button { padding: 6px 12px; border-radius: 9px; font-weight: 700; font-size: 14px; opacity: 0.65; }
.seg button.on { background: #fff; color: var(--accent); opacity: 1; box-shadow: 0 1px 4px rgba(60, 40, 120, 0.18); }
.seg.disabled { opacity: 0.5; pointer-events: none; }
@media (max-width: 760px) {
  .parcels { grid-template-columns: repeat(2, 1fr); }
  .map-wrap { height: calc(100vh - 300px); }
  #suspended { top: auto; bottom: 150px; }
}

/* ---------- player reviews ---------- */
#reviewBtn { padding: 11px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; background: #fff3bf; color: #8a5a00; box-shadow: 0 4px 0 #f0d67a; white-space: nowrap; }
#reviewBtn:hover { transform: translateY(-2px); }
.sheet.reviews { width: min(620px, 100%); }
.rv-summary { font-weight: 600; margin-bottom: 10px; }
.rv-form { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #ece6f8; margin-bottom: 12px; }
.rv-form[hidden] { display: none; }
.rv-exp { border: none; margin: 0 0 4px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.rv-exp legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.rv-choice { flex: 1 1 140px; cursor: pointer; }
.rv-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rv-choice span { display: block; text-align: center; padding: 10px 12px; border-radius: 12px; font-weight: 700; background: #f8f9fa; border: 3px solid transparent; transition: transform 0.12s, border-color 0.12s; }
.rv-choice:hover span { transform: translateY(-1px); }
.rv-choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.rv-choice.rv-yes input:checked + span { background: #ebfbee; border-color: var(--good); color: #2b8a3e; }
.rv-choice.rv-no input:checked + span { background: #fff5f5; border-color: var(--bad); color: #c92a2a; }
.rv-form textarea { resize: vertical; min-height: 84px; font: inherit; text-align: left; }
.rv-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-note { flex: 1; font-size: 13px; color: var(--ink-2, #5c5470); }
.rv-foot .go { padding: 9px 18px; }
.rv-foot .go:disabled { opacity: 0.45; cursor: not-allowed; }
.rv-head { margin: 4px 0 8px; }
.rv-list { display: flex; flex-direction: column; gap: 8px; max-height: min(320px, 40vh); overflow: auto; }
.rv-card { background: #fff; border-radius: 14px; padding: 10px 12px; border-left: 5px solid #e5dffa; }
.rv-card.rv-good { border-left-color: var(--good); }
.rv-card.rv-bad { border-left-color: var(--bad); }
.rv-card .rv-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rv-card .rv-h span { font-size: 12px; opacity: 0.6; margin-left: auto; }
.rv-card p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.event.preview.rv-good { box-shadow: 0 0 0 2px rgba(47, 158, 68, 0.25), 0 3px 0 #ece6f8; }
ul.visitors { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
#readReviews { margin-left: 6px; padding: 3px 10px; border-radius: 10px; background: #f3f0ff; font-weight: 600; }

/* ---------- moderator messages ---------- */
#alertModal { z-index: 29; }
#pauseModal { z-index: 35; }
.pause-note { width: 100%; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #f8f6ff; white-space: pre-wrap; overflow-wrap: anywhere; }
.pause-note.hidden { display: none; }
.sheet.alert .lead { white-space: pre-wrap; overflow-wrap: anywhere; opacity: 0.9; }
@media (max-width: 760px) { #reviewBtn { padding: 10px 12px; } }

/* ---------- in-game yes/no prompt ---------- */
#askModal { z-index: 31; }
.sheet.ask { width: min(460px, 100%); }
.sheet.ask h1 { font-size: 26px; }
.sheet.ask .lead { opacity: 0.85; overflow-wrap: anywhere; }
.ask-actions { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.ask-actions button { flex: 1; padding: 13px 16px; border-radius: 16px; font-weight: 700; font-size: 16px; transition: transform 0.12s; }
.ask-actions button:hover { transform: translateY(-2px); }
.ask-actions .go { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 5px 0 #5232b8; }
.ask-actions .go.danger { background: linear-gradient(135deg, #ff6b6b, #e03131); box-shadow: 0 5px 0 #a51d1d; }
.ask-actions .alt { background: #fff; color: var(--accent); box-shadow: 0 4px 0 #e2d8f5; }
@media (max-width: 420px) { .ask-actions { flex-direction: column-reverse; } }
.event.news blockquote.headline { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 700; border-left-color: #343a40; background: #f8f9fa; }

/* ---------- staff monitor ---------- */
#followBar { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(43, 33, 64, 0.88); color: #fff; font-weight: 600; box-shadow: var(--shadow); }
#followBar.hidden { display: none; }
#closedBar { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(201, 42, 42, 0.92); color: #fff; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
#closedBar.hidden { display: none; }
#closedBar button { padding: 5px 12px; border-radius: 999px; background: #fff; color: #c92a2a; font-weight: 700; }
body.visiting #closedBar button { display: none; }
#followBar:not(.hidden) ~ #closedBar, #closedBar:has(~ #followBar:not(.hidden)) { top: 130px; }

/* ---------- overdraft, bank and bankruptcy ---------- */
#overdraftBar { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 7px 8px 7px 16px; border-radius: 999px; background: linear-gradient(90deg, #c92a2a, #e8590c); color: #fff; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; animation: overdraftPulse 2.4s ease-in-out infinite; }
#overdraftBar.hidden { display: none; }
#overdraftBar span { overflow: hidden; text-overflow: ellipsis; }
#overdraftBar b { font-variant-numeric: tabular-nums; }
#overdraftBar button { padding: 5px 12px; border-radius: 999px; background: #fff; color: #c92a2a; font-weight: 700; flex: none; }
#overdraftBar.urgent { animation-duration: 0.9s; }
body.visiting #overdraftBar { display: none; }
#closedBar:not(.hidden) ~ #overdraftBar, #overdraftBar:has(~ #followBar:not(.hidden)) { top: 130px; }
@keyframes overdraftPulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 6px rgba(232, 89, 12, 0.25), var(--shadow); } }
#moneyStat { cursor: pointer; }
#moneyStat:hover { filter: brightness(1.08); }

.bank-alert { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: #fff0f0; border: 2px solid #ffc9c9; color: #a61e1e; }
.bank-alert .big { font-size: 28px; }
.bank-alert b.clock { font-size: 20px; font-variant-numeric: tabular-nums; }
.bank-alert.ok { background: #ebfbee; border-color: #b2f2bb; color: #2b8a3e; }
.bank-offers { display: grid; gap: 10px; margin: 8px 0 12px; }
.bank-offer { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid #e9e3f7; animation: optIn 0.35s both; }
.bank-offer:nth-child(2) { animation-delay: 0.08s; }
.bank-offer:nth-child(3) { animation-delay: 0.16s; }
.bank-offer .logo { font-size: 26px; }
.bank-offer .best { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #d3f9d8; color: #2b8a3e; font-size: 11px; font-weight: 700; vertical-align: middle; }
.bank-offer small { display: block; color: var(--muted, #6b6880); }
.bank-offer .rate { font-size: 18px; font-weight: 700; }
.bank-offer button, #bankAsk, #parkBank { margin-top: 4px; padding: 7px 14px; border-radius: 12px; font-weight: 700; background: var(--accent); color: #fff; box-shadow: 0 2px 0 #5232b8; }
#bankAsk { width: 100%; }
#bankAsk:disabled { background: #ece8f6; color: #8a85a0; box-shadow: none; cursor: default; }
.bank-none { padding: 14px; border-radius: 14px; background: #f8f6ff; text-align: center; }
.bank-loans { width: 100%; border-collapse: collapse; }
.bank-loans th, .bank-loans td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #eee8f8; }
.bank-loans .prog { margin-top: 4px; }
@media (max-width: 760px) { #overdraftBar { top: 112px; } #overdraftBar .od-long { display: none; } }
@media (max-width: 520px) { .bank-offer { grid-template-columns: 1fr auto; } .bank-offer .logo { display: none; } }

#bankruptModal { z-index: 34; }
.sheet.start.bankrupt { animation: authIn 0.5s cubic-bezier(.2,1.4,.4,1) both; }
.sheet.start.bankrupt .start-logo { animation: bankruptShake 1.6s ease-in-out 0.4s 2; }
.bankrupt-facts { width: 100%; margin: 0 0 14px; padding: 10px 14px 10px 32px; border-radius: 12px; background: #fff5f5; text-align: left; }
.bankrupt-facts li { margin: 3px 0; }
@keyframes bankruptShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { #overdraftBar, .bank-offer, .sheet.start.bankrupt, .sheet.start.bankrupt .start-logo { animation: none; } }
.pstat.opening .opening-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pstat.opening .opening-actions button { flex: 1; padding: 8px 14px; border-radius: 12px; font-weight: 700; }
.pstat.opening .opening-actions .primary { background: var(--accent); color: #fff; box-shadow: 0 2px 0 #5232b8; }
.pstat.opening .opening-actions .danger { background: #ffe3e3; color: #c92a2a; }
#followText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#followStop { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; flex: none; }
#followStop:hover { background: rgba(255, 255, 255, 0.3); }
body.ridecam #followBar { display: none; }
.workload { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13.5px; box-shadow: 0 3px 0 #ece6f8; }
.workload b.neg { color: var(--bad); }
.staff-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-tools .seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.staff-tools .seg button { padding: 5px 10px; border-radius: 999px; background: #f3f0ff; font-weight: 600; font-size: 13px; }
.staff-tools .seg button.on { background: var(--accent); color: #fff; }
.staff-tools .seg small { opacity: 0.7; }
.staff-tools .maplabels { margin-left: auto; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
table.staff td.work { font-size: 12.5px; min-width: 150px; }
table.staff td.acts { white-space: nowrap; }
table.staff td.acts button { margin-left: 4px; }
table.staff tr.following td { background: #e7f5ff; }
.busy { position: relative; margin-top: 4px; height: 14px; border-radius: 99px; background: #efeaf7; overflow: hidden; }
.busy i { position: absolute; left: 0; top: 0; bottom: 0; background: #a5d8ff; border-radius: 99px; }
.busy span { position: relative; display: block; font-size: 10.5px; line-height: 14px; padding-left: 6px; font-weight: 600; color: #364fc7; }

/* ---------- leaderboard table ---------- */
table.lb { table-layout: fixed; min-width: 760px; }
table.lb col.c-rank { width: 48px; }
table.lb col.c-name { width: 30%; }
table.lb col.c-owner { width: 15%; }
table.lb col.c-status { width: 78px; }
table.lb col.c-act { width: 76px; }
table.lb th { white-space: nowrap; vertical-align: bottom; }
table.lb td { white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
table.lb th.c, table.lb td.rank { text-align: center; }
table.lb td.name, table.lb td.owner { overflow: hidden; text-overflow: ellipsis; }
table.lb td.owner .dot { width: 8px; height: 8px; box-shadow: none; vertical-align: middle; }
table.lb td:nth-child(8) { text-align: left; }
table.lb tr.lb-mine td { background: #fff9db; font-weight: 700; }

/* ---------- observe mode ---------- */
body.observing #topbar, body.observing #headerLogo, body.observing #toolbar, body.observing #camPad, body.observing #help,
body.observing .panel, body.observing #visitBar, body.observing #followBar, body.observing #moodPanel, body.observing #suspended,
body.observing #exitRideCam { display: none !important; }
#observeFade { position: fixed; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
#observeFade.on { opacity: 1; }
#observeBar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 21; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(20, 16, 34, 0.55); color: #fff; font-weight: 600; backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
#observeBar.hidden { display: none; }
#observeBar small { opacity: 0.6; font-weight: 500; white-space: nowrap; }
#observeText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#observeStop { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; flex: none; }
#observeStop:hover { background: rgba(255, 255, 255, 0.3); }
#topbar #moreMenu .pill.obs { background: linear-gradient(135deg, #7048e8, #f06595); color: #fff; }
.staffline.roominfo { display: block; line-height: 1.45; }

/* ---------- debug overlay (toggled from the About modal) ---------- */
#debugOverlay {
  position: fixed;
  right: 10px; bottom: 10px;
  z-index: 40;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  overflow: auto;
  padding: 6px 10px 8px;
  border-radius: 10px;
  background: rgba(16, 12, 28, 0.82);
  color: #d8f5a2;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
#debugOverlay .dbg-head { display: flex; justify-content: space-between; align-items: center; color: #fff; margin-bottom: 2px; }
#debugOverlay .dbg-head button { pointer-events: auto; background: none; color: #fff; font-size: 13px; padding: 0 2px; cursor: pointer; opacity: 0.7; }
#debugOverlay .dbg-head button:hover { opacity: 1; }
#debugOverlay pre { margin: 0; font: inherit; white-space: pre; }
.pc-table table th { cursor: default; }

/* ---------- log in / sign up / guest (js/accounts.js) ---------- */
#authModal { z-index: 40; overflow: hidden; backdrop-filter: none;
  /* The park shows through: just a soft vignette so the card stands out. */
  background: radial-gradient(ellipse 120% 90% at 50% 40%, rgba(43, 33, 64, 0) 35%, rgba(43, 33, 64, 0.5) 100%),
    linear-gradient(180deg, rgba(43, 33, 64, 0.1), rgba(43, 33, 64, 0) 30%, rgba(43, 33, 64, 0.35)); }
#authModal .hidden { display: none; }
/* The game's own buttons and bars are hidden while signing in, so it's just the park behind. */
body.auth-open #topbar, body.auth-open #headerLogo, body.auth-open #toolbar, body.auth-open #camPad, body.auth-open #guestNag, body.auth-open #toasts,
body.auth-open #info, body.auth-open #followBar, body.auth-open #overdraftBar, body.auth-open #closedBar { visibility: hidden; }

/* The card */
.auth-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(500px, 100%); max-height: calc(100vh - 32px); }
#authModal:not(.hidden) .auth-card { animation: authIn 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
/* The logo overlaps the card's top edge; the card's top padding makes room for the overlap. */
.auth-card .auth-logo { position: relative; z-index: 2; flex: 0 0 auto; width: min(360px, 82%); height: auto; margin: 0 auto -62px; display: block; pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); animation: logoFloat 4.5s ease-in-out infinite; }
.sheet.auth { position: relative; background: #fffcf5; width: 100%; min-height: 0; flex: 0 1 auto; overflow-y: auto; overflow-x: hidden; padding: 70px 26px 16px; }
@keyframes authIn { from { opacity: 0; transform: translateY(40px) scale(0.9); } to { opacity: 1; transform: none; } }
.sheet.auth h1 { font-size: 26px; text-align: center; margin-top: 6px; }
.sheet.auth .lead { text-align: center; }
.sheet.auth .foot { text-align: center; }
.sheet.auth .foot a { color: var(--accent); font-weight: 700; }
.auth-x { display: none; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: #f3f0ff; font-weight: 700; z-index: 1; }
#authModal.closable .auth-x { display: block; }
/* Background music on/off, top left of the card (the close button is top right). */
.auth-music { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%; background: #f3f0ff; font-size: 16px; line-height: 1; z-index: 1; }
.auth-music:hover { background: #e9e3ff; }
.auth-music:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.auth-music.off { opacity: 0.75; }

/* Switching views slides the new one in (from the right going forward, from the left going back). */
.auth-view { width: 100%; animation: viewFwd 0.38s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
#authModal.going-back .auth-view { animation-name: viewBack; }
@keyframes viewFwd { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes viewBack { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* The three choices */
.auth-options { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; width: 100%; }
.auth-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; text-align: left;
  background: #fff; color: var(--ink, #2b2140); box-shadow: inset 0 0 0 2px #ece6fb, 0 4px 0 #e2d8f5; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s; animation: optIn 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.auth-opt:nth-child(1) { animation-delay: 0.12s; }
.auth-opt:nth-child(2) { animation-delay: 0.22s; }
.auth-opt:nth-child(3) { animation-delay: 0.32s; }
@keyframes optIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.auth-opt:hover, .auth-opt:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--accent), 0 7px 0 #d6c9f5; }
.auth-opt:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--accent), 0 2px 0 #d6c9f5; }
.opt-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; border-radius: 14px; background: #f3f0ff; }
.auth-opt:hover .opt-icon { animation: wiggle 0.5s ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(10deg) scale(1.1); } }
.opt-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.opt-body b { font-size: 18px; }
.opt-sub { font-size: 13.5px; opacity: 0.75; margin-bottom: 4px; }
.opt-perks { display: flex; flex-direction: column; gap: 1px; font-size: 13px; font-weight: 600; }
.opt-perks .yes::before { content: '✓ '; color: #2f9e44; font-weight: 800; }
.opt-perks .no::before { content: '✗ '; color: #e8590c; font-weight: 800; }
.opt-perks .no { color: #a35200; }
.opt-go { flex: 0 0 auto; font-size: 22px; font-weight: 800; color: var(--accent); transition: transform 0.15s; }
.auth-opt:hover .opt-go { transform: translateX(4px); }
.opt-signup { background: linear-gradient(135deg, #7048e8, #ae3ec9); color: #fff; box-shadow: 0 5px 0 #5232b8; padding-top: 22px; }
.opt-signup:hover, .opt-signup:focus-visible { box-shadow: 0 8px 0 #5232b8, 0 0 0 3px rgba(174, 62, 201, 0.3); }
.opt-signup .opt-icon { background: rgba(255, 255, 255, 0.2); }
.opt-signup .opt-go { color: #fff; }
.opt-signup .opt-perks .yes::before { color: #b2f2bb; }
.opt-signup::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: shimmer 3.6s ease-in-out 1.2s infinite; }
@keyframes shimmer { 0% { left: -80px; } 40%, 100% { left: 110%; } }
.opt-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 0 0 10px 10px; background: #ffd43b; color: #5c3d00; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }

/* The first screen: a wide card low down, so the park shows above it, with the three
   choices as big cards side by side. */
#authModal.view-choose { place-items: end center; padding-bottom: max(16px, 4vh); }
#authModal.view-choose .auth-card { width: min(1080px, 100%); }
#authModal.view-choose .sheet.auth { padding: 66px 20px 18px; background: rgba(255, 252, 245, 0.95); }
#authModal.view-choose .auth-card .auth-logo { width: min(400px, 70%); margin-bottom: -70px; }
#authModal.view-choose .sheet.auth h1 { font-size: 25px; margin-top: 0; }
#authModal.view-choose .lead { margin-bottom: 4px; }
#authModal.view-choose .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
#authModal.view-choose .auth-options { flex-direction: row; align-items: stretch; gap: 16px; margin-top: 10px; }
#authModal.view-choose .auth-opt { flex: 1 1 0; flex-direction: column; justify-content: flex-start; text-align: center; gap: 8px; padding: 20px 16px 16px; border-radius: 22px; }
#authModal.view-choose .opt-signup { padding-top: 28px; }
#authModal.view-choose .opt-icon { width: 62px; height: 62px; font-size: 34px; border-radius: 20px; }
#authModal.view-choose .opt-body { align-items: center; }
#authModal.view-choose .opt-body b { font-size: 24px; }
#authModal.view-choose .opt-sub { font-size: 14.5px; margin-bottom: 8px; }
#authModal.view-choose .opt-perks { align-items: center; gap: 3px; font-size: 13.5px; }
#authModal.view-choose .opt-go { margin-top: auto; padding: 8px 22px; border-radius: 999px; background: #f3f0ff; font-size: 20px; line-height: 1; }
#authModal.view-choose .opt-signup .opt-go { background: rgba(255, 255, 255, 0.22); }
#authModal.view-choose .auth-opt:hover .opt-go { transform: translateY(-2px); }
/* Narrow screens: not enough width for a row, so back to a compact stack. */
@media (max-width: 760px) {
  #authModal.view-choose { place-items: center; padding-bottom: 16px; }
  #authModal.view-choose .auth-options { flex-direction: column; gap: 10px; }
  #authModal.view-choose .auth-opt { flex: 0 0 auto; flex-direction: row; text-align: left; padding: 12px 14px; gap: 12px; }
  #authModal.view-choose .opt-signup { padding-top: 22px; }
  #authModal.view-choose .opt-icon { width: 48px; height: 48px; font-size: 26px; border-radius: 14px; }
  #authModal.view-choose .opt-body { align-items: stretch; }
  #authModal.view-choose .opt-body b { font-size: 18px; }
  #authModal.view-choose .opt-perks { align-items: flex-start; }
  #authModal.view-choose .opt-go { margin: 0; padding: 0; background: none; }
  #authModal.view-choose .opt-signup .opt-go { background: none; }
}

/* The accounts service can't be reached: Log in and Sign up are greyed out. */
.auth-opt:disabled { cursor: not-allowed; filter: grayscale(1); opacity: 0.45; transform: none !important; box-shadow: inset 0 0 0 2px #e4e0ec, 0 3px 0 #e4e0ec !important; animation: none; }
.auth-opt:disabled .opt-icon { animation: none !important; }
.auth-opt:disabled::after, .auth-opt:disabled .opt-badge { display: none; }
.auth-down { display: flex; gap: 8px; align-items: flex-start; margin: 4px auto 8px; max-width: 760px; padding: 10px 14px; border-radius: 14px; background: #fff4e6; color: #a35200; font-size: 14px; text-align: left; animation: fadeDown 0.3s ease-out; }
.auth-down.hidden { display: none; }

.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Forms */
.auth-form { width: 100%; }
.auth-form > div { display: flex; flex-direction: column; }
.auth-form .field { text-align: left; font-size: 16px; padding: 10px 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.auth-form .field:focus { box-shadow: 0 0 0 4px rgba(112, 72, 232, 0.15); }
.auth-form .field.invalid { border-color: #ffa8a8; }
.auth-form .field.shake { animation: shake 0.4s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.auth-form .field-label { margin-top: 2px; }
.auth-form .field-label small { font-weight: 500; opacity: 0.8; margin-left: 4px; }
.auth-form .field-error { min-height: 16px; margin-bottom: 2px; }
.auth-form .field-error:not(:empty) { animation: fadeDown 0.25s ease-out; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.auth-form.busy { opacity: 0.85; }
.auth-form.busy button[type=submit] { color: transparent; position: relative; }
.auth-form.busy button[type=submit]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.auth-form button.done { background: linear-gradient(135deg, #2f9e44, #20c997) !important; box-shadow: 0 5px 0 #237032 !important; animation: pop 0.35s ease-out; }
.auth-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.auth-chips span { padding: 4px 10px; border-radius: 999px; background: #f3f0ff; color: var(--accent); font-size: 12.5px; font-weight: 700; animation: optIn 0.4s ease-out both; }
.auth-chips span:nth-child(2) { animation-delay: 0.08s; }
.auth-chips span:nth-child(3) { animation-delay: 0.16s; }
.form-error { color: var(--bad); font-weight: 600; font-size: 14px; text-align: center; min-height: 0; }
.form-error:not(:empty) { margin: 4px 0 8px; animation: shake 0.4s ease-in-out; }
/* The Turnstile widget is 300×65 (or 150×140 compact); "flexible" stretches it to the form width. */
.captcha-box { width: 100%; min-height: 65px; margin-top: 10px; }
.terms-row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-top: 6px; cursor: pointer; }
.terms-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.terms-row a { color: var(--accent); }
.terms-row a.pending { text-decoration: underline dotted; cursor: help; }
.guest-warning { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; text-align: left; background: #fff4e6; color: #a35200; border-radius: 12px; padding: 10px 12px; margin: 2px 0 10px; }
.guest-warning b { font-size: 14.5px; }
.guest-only-note { display: none; }
#authModal.from-guest .guest-only-note { display: block; background: #e6fcf5; color: #087f5b; border-radius: 12px; padding: 8px 12px; opacity: 1; }
.auth-notice { background: #fff5f5; color: #c92a2a; border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: 14px; text-align: center; margin: 4px 0 6px; animation: fadeDown 0.3s ease-out; }
.auth-notice.info { background: #f3f0ff; color: var(--accent); }
.auth-notice.hidden { display: none; }

/* Guest reminder */
#guestNag { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #7048e8, #ae3ec9); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); overflow: hidden; animation: nagIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
#guestNag.hidden { display: none; }
#guestNag .nag-icon { font-size: 26px; animation: wiggle 0.8s ease-in-out 0.4s 2; }
#guestNag .nag-text { display: flex; flex-direction: column; max-width: 440px; }
#guestNag .nag-text b { font-size: 15px; }
#guestNag .nag-text span { font-weight: 500; opacity: 0.95; }
#guestNag button { flex: 0 0 auto; padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--accent); font-weight: 800; }
#guestNag #guestNagSignUp { animation: pulse 1.6s ease-in-out 1s 3; }
#guestNag button.later { padding: 6px 10px; background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: 700; }
#guestNag .nag-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, 0.6); transform-origin: 0 0; animation: nagTimer var(--show, 30s) linear forwards; }
@keyframes nagTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes nagIn { from { opacity: 0; transform: translate(-50%, -24px) scale(0.92); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Top-bar button shown to guests in place of "Open to Public" */
#guestSaveBtn { display: none; background: linear-gradient(135deg, #ff922b, #f76707); color: #fff; font-weight: 700; }
/* inline-block like the other pills (a button centres its label; inline-flex would pin it to the top). */
body.guest #guestSaveBtn { display: inline-block; animation: savePulse 2.4s ease-in-out infinite; }
body.guest #publishBtn { display: none; }
body.sandbox #guestSaveBtn { display: none; }
@keyframes savePulse { 0%, 70%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(247, 103, 7, 0.5); } 85% { box-shadow: var(--shadow), 0 0 0 7px rgba(247, 103, 7, 0); } }

@media (max-width: 520px) {
  .sheet.auth, #authModal.view-choose .sheet.auth { padding: 50px 16px 12px; }
  .auth-card .auth-logo, #authModal.view-choose .auth-card .auth-logo { width: min(280px, 80%); margin-bottom: -44px; }
  .sheet.auth h1 { font-size: 22px; }
  .auth-opt { padding: 10px 12px; gap: 10px; }
  .opt-signup { padding-top: 20px; }
  .opt-icon { width: 40px; height: 40px; font-size: 22px; }
  .opt-body b { font-size: 16.5px; }
  #guestNag { top: 64px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-view, .auth-opt, .auth-opt *, .opt-signup::after, .auth-card, .auth-card .auth-logo, .auth-chips span,
  #guestNag, #guestNag *, body.guest #guestSaveBtn { animation: none !important; }
}

/* Account row in Settings */
.setbtns { display: flex; gap: 6px; flex: 0 0 auto; }
.setbtns button { padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.setbtns .go-small { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.setbtns .plain-small { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 2px #e5dffa; }
#setAccount .guest-only { display: none; }
#setAccount.is-guest .guest-only { display: inline-block; }
#setAccount.is-guest .account-only { display: none; }
#setAccount.hidden { display: none; }
@media (max-width: 760px) { #setAccount { flex-direction: column; align-items: stretch; } }

/* ---------- park guide (js/guide.js) ---------- */
#guide { position: fixed; left: 14px; top: calc(var(--logo-h) + 30px); z-index: 5; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }
#guide > * { pointer-events: auto; }
#guide.hidden { display: none; }
.guide-fab { position: relative; display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--panel); border: 3px solid var(--edge); box-shadow: var(--shadow); font-size: 24px; line-height: 1; transition: transform 0.12s; }
.guide-fab:hover { transform: scale(1.08) rotate(-8deg); }
.guide-fab .badge { top: -4px; right: -4px; background: var(--accent); }
.guide-fab .badge.warn { background: var(--bad); }
.guide-fab .badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; top: 0; right: 0; }
.guide-fab .badge.hidden { display: none; }
#guide.collapsed .guide-fab { display: block; }
#guide.collapsed #guidePanel { display: none; }
#guidePanel { width: 300px; max-height: calc(100vh - var(--logo-h) - 230px); overflow-y: auto; padding: 10px 12px 12px; border-radius: 20px; background: var(--panel); border: 3px solid var(--edge); box-shadow: var(--shadow); font-size: 13px; animation: guideIn 0.25s ease-out; }
@keyframes guideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
#guidePanel header { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--accent); margin-bottom: 4px; }
.guide-x { width: 26px; height: 26px; border-radius: 50%; background: #f3f0ff; color: var(--accent); font-weight: 700; font-size: 15px; line-height: 1; flex: 0 0 auto; }
.guide-x:hover { background: var(--accent); color: #fff; }
#guidePanel h4 { display: flex; justify-content: space-between; margin: 10px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
#guidePanel h4 span { font-weight: 600; text-transform: none; letter-spacing: 0; }
.guide-prog { height: 6px; border-radius: 99px; background: #ece6fb; overflow: hidden; margin-bottom: 6px; }
.guide-prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.4s; }
.guide-steps, .guide-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.guide-steps li, .guide-issues li, #guideCallout { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; }
.guide-steps li.next { background: #fff; box-shadow: inset 0 0 0 2px #e5dffa; align-items: flex-start; }
.guide-steps li.done { opacity: 0.55; }
.guide-steps li.done b { text-decoration: line-through; font-weight: 600; }
.guide-steps .gi, .guide-issues .gi, #guideCallout .gi { width: 24px; flex: 0 0 auto; text-align: center; font-size: 17px; }
.guide-steps li.done .gi { color: var(--good); font-weight: 700; }
.guide-steps .gt, .guide-issues .gt, #guideCallout .gt { flex: 1; min-width: 0; line-height: 1.3; }
.guide-steps small { display: block; margin-top: 2px; opacity: 0.8; font-size: 12px; }
#guide button[data-act^="step"], #guide button[data-act^="issue"] { flex: 0 0 auto; padding: 4px 9px; border-radius: 9px; background: #fff; color: var(--accent); font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 2px #e5dffa; white-space: nowrap; }
#guide button.primary { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; }
#guide button[data-act]:hover { filter: brightness(0.96); }
.guide-issues li { background: #fff; }
.guide-issues li.sev3 { background: #fff5f5; box-shadow: inset 3px 0 0 var(--bad); }
.guide-issues li.sev2 { background: #fff9db; box-shadow: inset 3px 0 0 #f59f00; }
.guide-ok { margin: 2px 0 0; opacity: 0.75; }
.guide-link { display: block; margin: 8px auto 0; background: none; color: var(--accent); font-size: 12px; text-decoration: underline; opacity: 0.8; }
#guideCallout { width: 280px; padding: 8px 8px 8px 10px; background: var(--panel); border: 3px solid var(--edge); box-shadow: var(--shadow); border-radius: 16px; animation: guideIn 0.3s ease-out; }
#guideCallout.hidden { display: none; }
#guide:not(.collapsed) #guideCallout { position: absolute; left: 0; top: 100%; margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.help-guide { display: block; width: 100%; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; }
/* "Show me": a ring round the button to press, with a label. */
.guide-spot { position: relative; z-index: 40; outline: 3px solid var(--accent2) !important; outline-offset: 3px; animation: guideSpot 1.1s ease-in-out infinite; }
@keyframes guideSpot { 0%, 100% { outline-offset: 3px; } 50% { outline-offset: 7px; } }
#guideSpotTag { position: fixed; z-index: 41; max-width: 260px; padding: 6px 12px; border-radius: 12px; background: var(--accent2); color: #fff; font-weight: 700; font-size: 13px; box-shadow: var(--shadow); pointer-events: none; animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* The first few times a build tool is picked: one line above the build menu. */
#toolHint { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 0 auto 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(43, 33, 64, 0.86); color: #fff; font-size: 13px; line-height: 1.35; animation: guideIn 0.25s ease-out; }
#toolHint.hidden { display: none; }
#toolHint kbd { color: var(--ink); }
#toolHint button { flex: 0 0 auto; padding: 4px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; font-size: 12px; }
#toolHint button:hover { background: rgba(255, 255, 255, 0.3); }
body.ridecam #guide, body.observing #guide, body.visiting #guide, body.auth-open #guide { display: none !important; }
@media (max-width: 760px) {
  #guidePanel, #guideCallout { width: min(280px, calc(100vw - 90px)); }
  #guidePanel { max-height: calc(100vh - var(--logo-h) - 200px); }
}
@media (prefers-reduced-motion: reduce) { #guidePanel, #guideCallout, #toolHint, #guideSpotTag, .guide-spot { animation: none !important; } }