/* ---------- Variables (easy to change later) ---------- */
:root {
  --font-mono: "Roboto Mono", monospace;

  --bar-height: 2.5rem;   /* height of the top and bottom bars */
  --radius: 3px;          /* how rounded the corners of the entry boxes are */
  --bg: #141414;     /* deep charcoal, not pure black */
  --text: #f2efe9;   /* soft off-white */
  --line: #f2efe9;
}

/* ---------- Light mode (switched on by the top right button) ---------- */
:root[data-theme="light"] {
  --bg: #f2efe9;     /* soft off-white */
  --text: #2a2a2a;   /* soft charcoal */
  --line: #2a2a2a;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

/* on phones the browser's own toolbars grow and shrink, so follow the visible height */
@supports (height: 100dvh) {
  body { height: 100dvh; }
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
}

a { color: inherit; text-decoration: none; }

/* ---------- Fixed top and bottom bars ---------- */
.bar {
  flex: 0 0 var(--bar-height);
  height: var(--bar-height);
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 even sections */
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg);
}

.bar-top    { border-bottom: 1px solid var(--line); }
.bar-bottom { border-top: 1px solid var(--line); }

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.5rem;
}

/* ---------- Middle section (the part that changes) ---------- */
main {
  flex: 1 1 auto;
  min-height: 0;          /* lets it scroll inside the flex layout */
  overflow-y: auto;
  position: relative;
  z-index: 0;             /* keeps everything inside the middle below the menu */
}

.page { display: none; padding: 1.5rem; }
.page.active { display: block; }

/* ---------- Top left buttons (refresh / return) ---------- */
.cell-left {
  justify-content: flex-start;   /* left aligned */
  gap: 0.75rem;
  padding-left: 1rem;            /* space on the left of the top left section */
}

.cell-left button {
  font: inherit;                 /* uses the bar's Roboto Mono */
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cell-left button:hover { text-decoration: underline; }

/* keeps the return button truly hidden when it has the hidden attribute */
.cell-left button[hidden] { display: none; }

/* ---------- Theme toggle button (top right) ---------- */
.cell-toggle {
  justify-content: flex-end;   /* right aligned */
  padding-right: 1.75rem;      /* space on the right of the top right section */
}

.cell-toggle button {
  width: 100%;
  height: 100%;
  text-align: right;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.cell-toggle button:hover { text-decoration: underline; }

/* ---------- The message strip (top center, see marquee.js) ---------- */
.cell-marquee {
  padding: 0;
  min-width: 0;            /* keeps the 3 sections even */
  justify-content: center;
}

/* the strip is as wide as its section. the text (repeated to fill it) slides left by one copy-set, over and over (see marquee.js) */
.marquee-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1.3em;
}
.marquee-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: max-content;
  animation: marquee-scroll 10s linear infinite;   /* the real speed is set from marquee.js (SPEED) */
}
.marquee-item {
  flex: none;
  white-space: nowrap;
  padding-right: 3rem;     /* space between each repeat of the text */
}
.marquee-still { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--shift, -50%)); }
}

/* ---------- Bottom bar ---------- */
.cell-right {
  justify-content: flex-end;   /* right aligned */
  padding-right: 1.75rem;      /* same space as the top right section */
}

.cell-menu button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cell-menu button:hover { text-decoration: underline; }

/* ---------- Menu that opens in the middle of the screen ---------- */
.bar-bottom {
  position: relative;
  z-index: 10;               /* keeps the open menu above the page content */
}

.cell-menu { position: relative; }

/* covers the middle section only, so the bottom button can still close it */
.menu-overlay {
  position: fixed;
  top: var(--bar-height);
  bottom: var(--bar-height);
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.menu-overlay[hidden] { display: none; }

.menu-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.92;
}

/* a rectangle with slightly rounded corners, right in the middle */
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(22rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.menu-wrap {
  position: relative;
  animation: menu-pop 0.18s ease;   /* the x and the menu fade in together */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  width: min(22rem, 100%);
  max-height: 100%;
}
.menu-wrap .menu-card { width: 100%; min-height: 0; }

/* the x sits above the menu, in its own little box */
.menu-wrap .menu-x {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
}
.menu-wrap .menu-x:hover, .menu-wrap .menu-x:focus-visible, .menu-wrap .menu-x:active {
  text-decoration: none; background: var(--text); color: var(--bg); }

.music-vol[hidden] { display: none; }

.menu-card a {
  display: block;
  padding: 0.9rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* hovering, tapping, tabbing to it, or being on that page: the colors flip */
.menu-card a:hover,
.menu-card a:focus-visible,
.menu-card a:active,
.menu-card a[aria-current="page"] {
  background: var(--text);
  color: var(--bg);
  outline: none;
}

@keyframes menu-pop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-wrap { animation: none; }
}

/* ---------- Thoughts to consume page ---------- */
/* this page fills the whole middle section and scrolls on its own */
.page[data-page="thoughts"] {
  position: absolute;
  inset: 0;
  padding: 0;
}

.thoughts-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  z-index: 0;              /* keeps the boxes below the buttons and the enlarged entry */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* the grid of entries, same idea as the moodboard */
.thoughts-canvas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.9rem;
  padding: 3.75rem clamp(1rem, 6vw, 5.5rem) 4rem;   /* room at the top for the buttons */
}

/* shuffle and pick one for me, near the top */
.thoughts-toolbar {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.35rem 0.9rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.thoughts-toolbar button,
.featured-actions button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.thoughts-toolbar button:hover,
.featured-actions button:hover { text-decoration: underline; }

/* each entry is its own outlined box */
.entry {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 10rem;
  padding: 0.75rem;
  overflow: hidden;
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.entry:hover .entry-title { text-decoration: underline; }

.entry-date { font-size: 0.7rem; opacity: 0.6; }

.entry-title {
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* the enlarged entry in the middle */
.featured {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.featured[hidden] { display: none; }

.featured-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.88;
}

.featured-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(30rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.6;
  animation: featured-pop 0.22s ease;
  transition: width 0.25s ease;
}

.featured-card.expanded { width: min(44rem, 100%); }

.featured-date { font-size: 0.75rem; opacity: 0.6; }

.featured-card h2 { font-size: 1.25rem; line-height: 1.3; }

.featured-body p + p { margin-top: 0.9rem; }

/* before it's expanded, only a short preview shows */
.featured-card:not(.expanded) .featured-body p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-actions {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

@keyframes featured-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-card { animation: none; transition: none; }
}

/* ---------- Braindump page (moodboards) ---------- */
.page[data-page="braindump"] {
  padding: 3rem clamp(1rem, 6vw, 5.5rem) 4rem;
}

.mb {
  container-type: inline-size;
  --mb-gap: 1.2rem;
  /* one unit of height: the width of a 3-column box in a line of three, so it's a square */
  --mb-unit: calc((100cqw - 2 * var(--mb-gap)) / 4);
}

/* the tabs on the left, the reset button on the right */
.mb-top {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 3.25rem;
}

/* the + button and the tabs sit together on the left */
.mb-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.mb-plus {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 2.25rem;
  text-align: center;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

/* "add more" appears under the button on hover or keyboard focus */
.mb-plus::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}

.mb-newboard {
  width: auto;
  padding: 0 0.9rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* reset (and delete board) sit on their own line, under the + and tabs row */
.mb-right { display: flex; align-items: flex-end; gap: 1.25rem; flex: 0 0 auto; }
/* reset sits right next to "make yours" */
.mb-top .mb-right { justify-content: flex-start; align-items: center; height: 2.25rem; padding-top: 2px; box-sizing: border-box; margin-left: 0.25rem; }

/* the little secret line, shown under the tabs while you're on a board of your own */
.mb-note {
  margin: 0.6rem 0 1.6rem;
  font-size: 0.7rem;
  opacity: 0.6;
}

.mb:has(.mb-note:not([hidden])) .mb-top { margin-bottom: 0; }

.mb-plus:hover::after, .mb-plus:focus-visible::after { opacity: 1; }

.mb-reset {
  flex: 0 0 auto;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.mb-reset:hover { text-decoration: underline; }

/* tabs: joined together, rounded on the two top corners */
.mb-tabs {
  display: flex;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scrollbar-width: none;
}

.mb-tab {
  flex: 0 0 auto;
  width: max-content;
  min-width: 7.5rem;
  height: 2.25rem;
  padding: 0 1rem;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  font-size: 0.75rem;
  line-height: 2.25rem;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.mb-tab + .mb-tab { border-left: 1px solid var(--line); }
.mb-tab:hover { text-decoration: underline; }

/* the tab you're on is filled in */
.mb-tab[aria-selected="true"] {
  background: var(--text);
  color: var(--bg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mb-loading { font-size: 0.8rem; opacity: 0.6; }

/* the board is a stack of lines; each line shares its width between its boxes */
.mb-grid {
  display: flex;
  flex-direction: column;
  gap: var(--mb-gap);
}

.mb-row {
  display: flex;
  gap: var(--mb-gap);
  height: calc(var(--mb-unit) * var(--rh, 1) + (var(--rh, 1) - 1) * var(--mb-gap));
}

.mb-item {
  position: relative;
  flex: 0 0 calc((100% - (var(--n, 1) - 1) * var(--mb-gap)) * var(--c, 3) / var(--total, 12));
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: grab;
  user-select: none;
}

.mb-grid.sorting, .mb-grid.sorting .mb-item { cursor: grabbing; }

/* the box you're holding follows the cursor and sits on top */
.mb-item.lifted {
  z-index: 30;
  pointer-events: none;
}

/* pictures */
.mb-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* what shows until you add a real picture: a box with a cross through it */
.mb-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.mb-placeholder span {
  padding: 0.25rem 0.6rem;
  background: var(--bg);
  font-size: 0.7rem;
  text-align: center;
}

/* text boxes */
.mb-text { padding: 1rem; font-size: 0.8rem; line-height: 1.6; }
.mb-text h3 { margin-bottom: 0.5rem; font-size: 0.85rem; }
.mb-text p { white-space: pre-line; }

/* color boxes */
.mb-color {
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  font-size: 0.7rem;
}

/* on small screens each line wraps into 6 columns so boxes stay readable */
@container (max-width: 40rem) {
  .mb-tabs, .mb-grid {
    --mb-unit: calc((100cqw - 5 * var(--mb-gap)) / 6 * 2 + var(--mb-gap));
  }
  .mb-row { flex-wrap: wrap; height: auto; }
  .mb-item {
    flex: 0 0 calc((100% - 5 * var(--mb-gap)) / 6 * var(--c-sm, 2) + (var(--c-sm, 2) - 1) * var(--mb-gap));
    height: calc(var(--mb-unit) * var(--r, 1) + (var(--r, 1) - 1) * var(--mb-gap));
  }
}

/* ---------- Moodboard viewer (click a box to enlarge it) ---------- */
/* covers the middle section only, so the top and bottom bars stay usable */
.mb-light {
  position: fixed;
  top: var(--bar-height);
  bottom: var(--bar-height);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
}

.mb-light[hidden] { display: none; }

.mb-light-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.94;
}

.mb-light-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem 0 0.5rem;
  overflow: hidden;
}

/* every box in a row, side by side; the script slides this so the chosen one is in the middle */
.mb-light-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  height: 100%;
  transition: transform 0.35s ease;
}

.mb-light-track.instant { transition: none; }

.mb-slide {
  flex: 0 0 auto;
  height: min(100%, 44rem);
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  opacity: 0.35;
  transform: scale(0.82);
  transition: opacity 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

/* the one in the middle */
.mb-slide.active {
  opacity: 1;
  transform: none;
  cursor: default;
}

/* pictures show whole here, never cropped */
.mb-slide-image { height: auto; max-height: 100%; overflow: hidden; line-height: 0; }
.mb-slide-image.has-cap { overflow: auto; }
.mb-slide-cap {                       /* under the picture, as wide as the picture (width 0 + min-width so it never stretches the frame) */
  width: 0; min-width: 100%; box-sizing: border-box; margin: 0; padding: 0.8rem 1rem;
  font-size: 0.85rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; text-align: left;
  border-top: 1px solid var(--line);
}
/* the caption along the bottom of a box on the board */
.mb-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.35rem 0.5rem;
  font-size: 0.7rem; line-height: 1.3; text-align: left; color: var(--text); pointer-events: none;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-top: 1px solid var(--line);
}
.mb-cap span {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;                    /* two lines at most */
}
.mb-slide img {
  display: block;
  height: 100%;
  width: auto;
  max-width: calc(100vw - 8rem);
  object-fit: cover;          /* (the frame is sized to the picture, so nothing is actually cropped) */
}

.mb-slide-ph { width: min(40rem, calc(100vw - 8rem)); }

.mb-slide-text {
  width: min(34rem, calc(100vw - 8rem));
  padding: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.mb-slide-text h2 { margin-bottom: 0.75rem; font-size: 1.1rem; line-height: 1.3; }
.mb-slide-text p { white-space: pre-line; }

.mb-slide-color {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1;
  max-width: calc(100vw - 8rem);
  padding: 1rem;
  font-size: 0.75rem;
}

.mb-light-bar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.9rem 1rem 1.1rem;
  font-size: 0.75rem;
}

.mb-light-bar button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mb-light-bar button:hover:not(:disabled) { text-decoration: underline; }
.mb-light-bar button:disabled { opacity: 0.3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .mb-light-track, .mb-slide { transition: none; }
}

/* ---------- "add more" box ---------- */
.mb-add {
  position: fixed;
  top: var(--bar-height);
  bottom: var(--bar-height);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mb-add[hidden] { display: none; }

.mb-add-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.94;
}

.mb-add-card {
  position: relative;
  width: min(26rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 1.25rem;
  font-size: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mb-add-card h2 { font-size: 1rem; margin-bottom: 0.25rem; }
.mb-add-sub { margin-bottom: 1rem; opacity: 0.6; }

.mb-add-kinds {
  display: flex;
  width: fit-content;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.mb-add-kinds button {
  padding: 0 1rem;
  height: 2rem;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.mb-add-kinds button + button { border-left: 1px solid var(--line); }
.mb-add-kinds button:hover { text-decoration: underline; }
.mb-add-kinds button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

.mb-add-fields[hidden] { display: none; }

.mb-add-card label {
  display: block;
  margin-bottom: 0.8rem;
}

.mb-add-card input[type="text"], .mb-add-card input[type="password"], .mb-add-card input[type="email"], .mb-add-card textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mb-add-card textarea { resize: vertical; }

.mb-add-card input[type="color"] {
  display: block;
  width: 4rem;
  height: 2rem;
  margin-top: 0.3rem;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.mb-add-card input:focus-visible, .mb-add-card textarea:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

.mb-add-msg { min-height: 1.2em; margin-bottom: 0.6rem; }

.mb-add-actions { display: flex; gap: 1.5rem; }

.mb-add-actions button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.mb-add-actions button:hover:not(:disabled) { text-decoration: underline; }
.mb-add-actions button:disabled { opacity: 0.4; cursor: default; }

/* colors: one swatch, or several in a row like a palette */
.mb-add-colors { margin-bottom: 0.8rem; }
.mb-add-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.3rem 0 0.5rem; }
.mb-add-swatches .sw { display: flex; align-items: flex-start; }

.mb-add-swatches input[type="color"] { margin-top: 0; }

.mb-add-swatches .sw-x {
  width: 1rem;
  height: 1rem;
  margin-left: -0.4rem;
  margin-top: -0.4rem;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.mb-add-morecolor {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.mb-add-morecolor:hover { text-decoration: underline; }

.mb-color.mb-palette, .mb-slide-color.mb-palette {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.mb-stripe { flex: 1 1 0; min-width: 0; }

.mb-chip {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  max-width: calc(100% - 1rem);
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius);
}

/* the "are you sure?" box sits above everything else */
.mb-confirm { z-index: 50; }
.mb-confirm-card { width: min(20rem, 100%); }
.mb-confirm-card p { margin-bottom: 1rem; font-size: 0.8rem; line-height: 1.5; }

/* ---------- Music page: the jukebox ---------- */
/* the drawing is an svg (viewBox 290 50 500 935, from jukebox_design.svg); the player and the song list
   are real buttons laid on top of it. every size is in "design units": --u is one unit of the drawing,
   so a number below is the same spot as in the design file (x - 290, y - 50) and it all scales together */
/* the jukebox sits in the middle of the screen, up and down. the volume and messages hang below it, in the bottom padding */
.page[data-page="music"] {
  padding: 1.2rem clamp(0.5rem, 3vw, 5.5rem) 2.8rem;
}
.page[data-page="music"].active {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--bar-height) * 2 - var(--lights-h)); min-height: calc(100dvh - var(--bar-height) * 2 - var(--lights-h));
  box-sizing: border-box;
}
body.has-yb .page[data-page="music"] { padding-bottom: 2.8rem; }
/* computers: the whole jukebox fits the screen, so the page never scrolls */
@media (min-width: 50.01rem) and (pointer: fine) { main:has(.page[data-page="music"].active) { overflow-y: hidden; } }
/* phones and tablets: scroll with extra room at the bottom, so the last bit clears the yeonbucks buttons and the pet */
@media (max-width: 50rem), (pointer: coarse) {
  .jb-main { width: min(100%, 30rem); }
  .page[data-page="music"], body.has-yb .page[data-page="music"] { padding-bottom: 6.5rem; }
}

/* the title sits beside the jukebox; the jukebox shrinks to fit the screen height (but never below 24rem), and on a phone it goes below the title and fills the width */
.music { width: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 6vw, 6rem); margin: 0 auto; text-align: center; }
.jb-main { position: relative; width: min(42rem, calc((100vh - 12rem) * 0.637)); max-width: 100%; flex: 0 0 auto; container-type: inline-size; }

/* the drawing is stretched sideways to make the jukebox wider: --sx is how much (1.2 = 20% wider). --u is one design unit
   up and down (and for text), --ux is one design unit across. if you change --sx, change the 600 in aspect-ratio to 500 x --sx */
.jb {
  --sx: 1;
  --ux: calc(100cqw / 500);
  --u: calc(var(--ux) / var(--sx));
  position: relative;
  aspect-ratio: 500 / 785;
  font-size: calc(var(--u) * 8.41);
  text-align: center;
}

/* the drawing: the design's white is the page color and its black is the text color, so it follows light and dark */
.jb-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; fill: var(--text); overflow: visible; }
.jb-art * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.jb-w { fill: var(--bg); stroke: var(--text); stroke-miterlimit: 10; }
.jb-b { fill: var(--text); stroke: var(--bg); stroke-miterlimit: 10; }
.jb-bg { fill: var(--bg); }
.jb-l { fill: none; stroke: var(--text); stroke-miterlimit: 10; }
.jb-clipped { clip-path: url(#jb-clip); }

.jb > :not(.jb-art) { position: absolute; margin: 0; }

/* the title and the little line under it, above the machine */
.jb-head { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: clamp(13rem, 24vw, 20rem); flex: 0 1 auto; }
.jb-logo { width: 78%; height: auto; display: block; fill: var(--text); }
.jb-tag { margin: 0; font-size: 0.95rem; line-height: 1.35; }
@media (max-width: 50rem) {
  .music { flex-direction: column; gap: 0.5rem; }
  .jb-head { width: 13rem; gap: 0.3rem; }
  .jb-tag { font-size: 0.75rem; }
}

/* what's playing, inside the half-round screen */
.jb-now { left: calc(var(--ux) * 155); width: calc(var(--ux) * 190); top: calc(var(--u) * 172); }
.jb-title {
  font-family: "Shrikhand", serif; font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 23);
  font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jb-artist {
  margin: calc(var(--u) * 1) calc(var(--ux) * -15) 0 !important; font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 15);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jb-cur, .jb-dur {
  top: calc(var(--u) * 222); line-height: calc(var(--u) * 12);
  font-family: "Shrikhand", serif; font-size: calc(var(--u) * 10.52); white-space: nowrap;
}
.jb-cur { left: calc(var(--ux) * 135); }
.jb-dur { left: calc(var(--ux) * 336.8); }

/* the bar: an outlined, rounded track that fills as the song goes */
.jb-seek {
  left: calc(var(--ux) * 168.5); width: calc(var(--ux) * 160.9); height: calc(var(--u) * 14); top: calc(var(--u) * 222.3);
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer; color: var(--text); --p: 0%;
}
.jb-seek::-webkit-slider-runnable-track {
  height: calc(var(--u) * 5); border: 1px solid var(--text); border-radius: calc(var(--u) * 1.8); box-sizing: border-box;
  background: linear-gradient(to right, var(--text) var(--p), var(--bg) var(--p));
}
.jb-seek::-moz-range-track {
  height: calc(var(--u) * 5); border: 1px solid var(--text); border-radius: calc(var(--u) * 1.8); box-sizing: border-box;
  background: linear-gradient(to right, var(--text) var(--p), var(--bg) var(--p));
}
.jb-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  margin-top: calc(var(--u) * -2.5 - 0.5px); border-radius: 50%; background: var(--bg); border: 1px solid var(--text); box-sizing: border-box;
}
.jb-seek::-moz-range-thumb {
  width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--bg); border: 1px solid var(--text); box-sizing: border-box;
}
.jb-seek:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

/* shuffle, previous, play, next, repeat: in the panel, at the spots the design puts them */
.jb-controls { inset: 0; pointer-events: none; }
.jb-ctl {
  position: absolute; pointer-events: auto; top: calc(var(--u) * 269.75); width: calc(var(--u) * 31); height: calc(var(--u) * 32.5);
  display: grid; place-items: center; padding: 0; font: inherit; color: var(--text); background: none;
  border: none; border-radius: var(--radius); cursor: pointer;
}
.jb-ctl::after { content: ""; position: absolute; inset: -4px; }
.jb-ctl svg { width: calc(var(--u) * 21.25); height: calc(var(--u) * 21.25); display: block; }
.jb-ctl:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.jb-ctl[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.jb-ctl:focus-visible { outline: 1px solid var(--text); outline-offset: 1px; }
#music-shuffle { left: calc(var(--ux) * 155 - var(--u) * 15.5); }
#music-prev    { left: calc(var(--ux) * 202.5 - var(--u) * 15.5); }
#music-play    { left: calc(var(--ux) * 250 - var(--u) * 15.5); }
#music-next    { left: calc(var(--ux) * 297.5 - var(--u) * 15.5); }
#music-repeat  { left: calc(var(--ux) * 345 - var(--u) * 15.5); }

/* all songs on its own line, then the categories and playlists */
.jb-tabs {
  left: calc(var(--ux) * 95); width: calc(var(--ux) * 310); top: calc(var(--u) * 312); height: calc(var(--u) * 58);
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: calc(var(--u) * 4) calc(var(--ux) * 5);
  overflow-y: auto; scrollbar-width: none; font-size: max(7.5px, calc(var(--u) * 11.5));
}
.jb-tabs::-webkit-scrollbar { display: none; }
.jb-tabs [role="tablist"] { display: contents; }
.jb-tab {
  flex: 0 0 auto; height: calc(var(--u) * 22); padding: 0 calc(var(--ux) * 7); font: inherit; line-height: 1;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--u) * 3.56);
  cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.jb-tab:hover { text-decoration: underline; }
.jb-tab[aria-selected="true"] { background: var(--text); color: var(--bg); }
.jb-plus { width: calc(var(--u) * 22); padding: 0; font-size: max(10px, calc(var(--u) * 13)); }
.jb-plus:hover { text-decoration: none; background: var(--text); color: var(--bg); }
/* the little arrow that opens all the tabs (phones only) */
.jb-exp { display: none; }
/* phones and tablets: the jukebox is stretched up and down a bit (--sx under 1 makes it taller, so the 500 in aspect-ratio becomes 500 x --sx),
   and the tabs get big enough to tap: they show one line, and the arrow beside them opens every tab over the song list */
@media (max-width: 50rem), (pointer: coarse) {
  .jb { --sx: 0.88; aspect-ratio: 440 / 785; }
  .jb-tabs {
    top: calc(var(--u) * 318); height: max(2rem, calc(var(--u) * 24)); width: calc(var(--ux) * 310 - 2.4rem); left: calc(var(--ux) * 95);
    flex-wrap: wrap; justify-content: center; align-content: flex-start; overflow: hidden;
    font-size: max(13px, calc(var(--u) * 12)); gap: calc(var(--u) * 5) calc(var(--ux) * 5);
  }
  .jb-tabs.open {
    z-index: 5; height: auto; max-height: calc(var(--u) * 190); overflow-y: auto; width: calc(var(--ux) * 310);
    padding: calc(var(--u) * 8) calc(2.4rem + var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8); box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--u) * 5);
  }
  .jb-tab { height: max(2rem, calc(var(--u) * 24)); padding: 0 max(0.8rem, calc(var(--ux) * 10)); }
  /* bigger shuffle / previous / play / next / repeat, spread evenly along the panel */
  .jb-ctl { top: calc(var(--u) * 269.5); width: calc(var(--ux) * 38); height: calc(var(--u) * 31); }
  .jb-ctl svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
  #music-shuffle { left: calc(var(--ux) * (154 - 19)); }
  #music-prev    { left: calc(var(--ux) * (202 - 19)); }
  #music-play    { left: calc(var(--ux) * (250 - 19)); }
  #music-next    { left: calc(var(--ux) * (298 - 19)); }
  #music-repeat  { left: calc(var(--ux) * (346 - 19)); }
  .jb-plus { width: max(2rem, calc(var(--u) * 24)); padding: 0; font-size: max(16px, calc(var(--u) * 14)); }
  .jb-exp {
    display: block; position: absolute; z-index: 6; left: calc(var(--ux) * 405 - 2.2rem); top: calc(var(--u) * 318);
    width: 2rem; height: max(2rem, calc(var(--u) * 24)); margin: 0; padding: 0; font: inherit; font-size: max(14px, calc(var(--u) * 12));
    color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--u) * 3.56); cursor: pointer;
  }
  .jb-tabs.open ~ .jb-exp { left: calc(var(--ux) * 405 - 2.2rem); top: calc(var(--u) * 318); }
}

/* the songs: two columns of four, like the design. a "+" in the corner adds to a playlist */
.jb-grid {
  left: calc(var(--ux) * 155); top: calc(var(--u) * 476.55); width: calc(var(--ux) * 190); height: calc(var(--u) * 165);
  padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--u) * 7); grid-auto-flow: row;
}
.jb-cell {
  position: relative; min-width: 0; display: flex; align-items: stretch;
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--u) * 3.59); box-sizing: border-box; overflow: hidden;
}
.song-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5);
  padding: 0 calc(var(--u) * 14); font: inherit; color: inherit; background: none; border: none; cursor: pointer;
}
.song-title, .song-artist { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }

.song-title { font-size: max(10px, calc(var(--u) * 13.5)); font-weight: 700; }
.song-artist { font-size: max(8.5px, calc(var(--u) * 10.5)); }
.song-main:hover .song-title { text-decoration: underline; }
.song-act {
  position: absolute; top: 50%; right: calc(var(--u) * 3); transform: translateY(-50%); width: max(14px, calc(var(--u) * 12)); height: max(14px, calc(var(--u) * 12));
  display: grid; place-items: center; padding: 0; font: inherit; font-size: max(11px, calc(var(--u) * 11)); line-height: 1;
  color: inherit; background: none; border: none; border-radius: var(--radius); cursor: pointer; opacity: 0.55;
}
.song-act::after { content: ""; position: absolute; inset: -4px; }
.song-act:hover, .song-act:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
.jb-cell.current { background: var(--text); color: var(--bg); }
.jb-cell.current.paused .song-title { font-style: italic; }
.music-empty { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; font-size: max(8px, calc(var(--u) * 7)); line-height: 1.5; opacity: 0.7; }

/* the arrows that turn through the songs: back, page number, forward */
.jb-pager {
  position: absolute; left: calc(var(--ux) * 253.33); top: calc(var(--u) * 654); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 8);
}
.jb-pager[hidden] { display: none; }
.jb-more {
  position: static; width: calc(var(--u) * 28.3); height: calc(var(--u) * 28.3);
  display: grid; place-items: center; padding: 0; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: calc(var(--u) * 3.56); cursor: pointer;
}
.jb-more svg { width: 60%; height: 60%; display: block; }
.jb-more:hover { background: var(--text); color: var(--bg); }
.jb-page { position: static; min-width: 2.6em; padding: 0.3em 0.5em; text-align: center; font-size: max(9px, calc(var(--u) * 10)); white-space: nowrap; background: color-mix(in srgb, var(--bg) 90%, transparent); border-radius: calc(var(--u) * 3.56); }

/* under the jukebox: volume, the owner's buttons, and little messages */
.jb-extras { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.15rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.75rem; }
.music-vol { display: flex; align-items: center; gap: 0.5rem; }
.music-vol input { width: 7rem; }
/* phones and tablets use their own volume buttons, so the slider is only for computers */
@media (pointer: coarse), (max-width: 40rem) { .music-vol { display: none; } }
.music input[type="range"].music-vol-range, .music-vol input[type="range"] { accent-color: var(--text); cursor: pointer; }
.jb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
.jb-actions:not(:has(button:not([hidden]))) { display: none; }
.jb-extras .mb-note { max-width: 24rem; margin: 0; }
.music-toast { min-height: 1.4em; margin: 0; font-size: 0.75rem; }
.music-msg { min-height: 1.2em; margin: 0; opacity: 0.7; max-width: 24rem; }

.music-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.music-pick button { padding: 0.4rem 0.8rem; font: inherit; color: inherit; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.music-pick button:hover { text-decoration: underline; }
.music-secret { margin: 1rem 0 0; }


/* the small player that shows on other pages while music is going */
.mini {
  position: fixed;
  right: 1rem;
  top: calc(var(--bar-height) + 0.75rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mini[hidden] { display: none; }
.mini-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-title:hover { text-decoration: underline; }

.mini button {
  flex: 0 0 auto;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.mini button:hover { text-decoration: underline; }


/* ---------- Community page ---------- */
.page[data-page="community"] {
  padding: 3rem clamp(1rem, 6vw, 5.5rem) 4rem;
}

.cm-intro { max-width: 36rem; margin-bottom: 1.5rem; font-size: 0.8rem; line-height: 1.6; }

.cm-top { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.5rem; }

.cm-status { min-height: 1.6em; margin-bottom: 1.2rem; padding-top: 0.5rem; font-size: 0.75rem; opacity: 0.7; }

/* the posts, laid out like the moodboard: outlined boxes of different sizes */
.cm-grid { column-width: 16rem; column-gap: 1.2rem; }

.cm-card {
  display: block;
  background: var(--bg);
  break-inside: avoid;
  margin: 0 0 1.2rem;
  overflow: hidden;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cm-card img { display: block; width: 100%; height: auto; }
.cm-card-text { padding: 0.9rem 1rem; }
.cm-card-text p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.cm-card-meta { margin-top: 0.7rem; font-size: 0.7rem; opacity: 0.6; }

.cm-more { display: block; margin: 0.5rem 0 0; }
.cm-more[hidden] { display: none; }

.cm-preview {
  display: block;
  max-width: 100%;
  max-height: 12rem;
  margin: 0 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cm-preview[hidden] { display: none; }   /* with no photo chosen, the empty frame showed up as a dot */
.cm-fine { margin: 1rem 0 0; }
.mb-add-card input[type="file"] { display: block; margin-top: 0.3rem; font: inherit; color: inherit; max-width: 100%; }

.cm-hint { margin: -0.4rem 0 0.9rem; }

/* ---------- Touch screens: pressing and holding a moodboard box picks it up ---------- */
.mb-item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* no hover on a phone, so a tapped button shouldn't leave its little label stuck on screen */
@media (hover: none) {
  .mb-plus::after { display: none; }
}

/* ---------- Phones and other narrow screens ---------- */
@media (max-width: 40rem) {
  :root { --bar-height: 3rem; }    /* a little taller, so two lines of text sit inside the bar */

  .bar { line-height: 1.25; }

  /* the top middle section (the marquee) goes away: just the buttons on the left and the toggle on the right */
  .bar-top { grid-template-columns: auto 1fr; }
  .cell-marquee { display: none; }

  .cell-left { padding-left: 0.9rem; gap: 0.5rem 0.9rem; }
  .cell-toggle { padding: 0 0.9rem 0 0.5rem; }
  .cell-toggle button { text-wrap: balance; }
  .cell-right { padding-right: 0.9rem; }
  .bar-bottom .cell-left { padding-left: 0.9rem; }

  /* easier to tap */
  .cell-left button, .cell-menu button { padding: 0.7rem 0; }
  .menu-card a { padding: 1rem; }

  /* date on its own line, with updates ○ credits underneath */
  .bar-bottom { grid-template-columns: .85fr .9fr 1.25fr; }
  .bar-bottom .cell-right { flex-wrap: wrap; justify-content: flex-end; align-content: center; text-align: right; }
  .bar-bottom .cell-right #today { flex: 0 0 100%; }
  .bar-bottom .cell-right .bar-dot:nth-child(2) { display: none; }
  .bar-bottom .cell-right .bar-dot { margin: 0 0.3rem; }
}

/* phones: tighter top of the moodboard, music and community pages */
@media (max-width: 40rem) {
  .page[data-page="braindump"], .page[data-page="music"], .page[data-page="community"] { padding-top: 1.25rem; }
  .mb-top { margin-bottom: 1.25rem; }
  .mb:has(.mb-note:not([hidden])) .mb-top { margin-bottom: 0; }
  /* tabs on their own line, then the + and "make yours" on the left and reset on the right */
  .mb-top { display: grid; grid-template-columns: auto auto 1fr; gap: 0.75rem 0.5rem; align-items: center; }
  .mb-top { grid-template-columns: repeat(4, auto) 1fr; }       /* room for the owner's +, the board's +, make yours, reset */
  .mb-top .mb-left { display: contents; }
  .mb-top .mb-tabs { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  /* on the braindump page the buttons fill the second line left to right, whichever ones are showing */
  .mb-top .mb-plus-wrap, .mb-top #mb-add-mine, .mb-top .mb-newboard, .mb-top .mb-right { grid-row: 2; grid-column: auto; }
  .mb-top .mb-right { justify-self: start; margin-left: 0.5rem; }
}

/* phones: the small player sits just above the bottom bar instead of the top right */
@media (max-width: 40rem) {
  .mini {
    top: auto;
    bottom: calc(var(--bar-height) + 0.6rem);
    left: 1rem;
    right: 1rem;
    max-width: none;
    padding: 0.55rem 0.9rem;
  }
  .mini-title { flex: 1 1 auto; }
}

/* ---------- Journal: grid on phones, and the owner-only editor ---------- */
@media (max-width: 40rem) {
  .thoughts-canvas {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    padding: 3.75rem 1rem 1.5rem;
  }
}

/* only shown once you've signed in (journal.js turns them on) */
.thoughts-toolbar [hidden],
.featured-actions [hidden] { display: none; }

.thoughts-toolbar .mb-plus { flex: 0 0 auto; }

.entry-edit-card { width: min(34rem, 100%); }
.mb-owner { z-index: 45; }

/* the + (owner only): hover it (or tap it on a phone) for a little menu under it */
.mb-plus-wrap { position: relative; flex: 0 0 auto; z-index: 6; }
.mb-plus-wrap[hidden] { display: none; }
.mb-plus:not([data-tip])::after { display: none; }

.mb-drop {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding-top: 0.35rem;        /* bridges the gap, so the menu doesn't close on the way down to it */
}
.mb-plus-wrap.open .mb-drop { display: block; }

.mb-drop { font-size: 0.75rem; }
.mb-drop button {
  display: block;
  width: 100%;
  min-width: 10rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
}
.mb-drop button + button { border-top: none; }
.mb-drop button:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.mb-drop button:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.mb-drop button:hover, .mb-drop button:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.mb-drop button[hidden] { display: none; }
.mb-plus[hidden] { display: none; }



/* with no moodboards at all, the empty tab strip showed up as a tiny dot */
.mb-tabs:empty { display: none; }

/* the "or upload a picture" line in the add box */
.mb-add-filehint { margin: -0.4rem 0 0.9rem; font-size: 0.7rem; }
.mb-add-filehint:empty { display: none; }
.mb-plus[hidden] { display: none; }

/* ---------- Confession booth ---------- */
/* fills the middle and centers its words */
.page[data-page="confession"] {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
}
.page[data-page="confession"].active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.confession { width: 100%; text-align: center; }
.confession-intro, .confession-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.confession-intro[hidden], .confession-next[hidden] { display: none; }

.confession-line {
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* each word fades in a little after the one before it (--i is the word's number) */
.confession-word {
  display: inline-block;
  opacity: 0;
  animation: confession-in 1.2s ease forwards;
  animation-delay: calc(0.5s + var(--i, 0) * 0.35s);
}

.confession-go {
  padding: 0.85rem 1.5rem;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  animation: confession-in 1.2s ease forwards;
  animation-delay: var(--go-delay, 3s);    /* script.js sets this to come after the last word */
}
.confession-go:hover, .confession-go:focus-visible { background: var(--text); color: var(--bg); outline: none; }

.confession-intro.leaving { opacity: 0; transition: opacity 0.6s ease; }
.confession-next { animation: confession-in 1.2s ease both; }
.confession-next.instant { animation: none; }       /* someone who's been here before skips the fade */

@keyframes confession-in {
  from { opacity: 0; transform: translateY(0.5rem); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .confession-word, .confession-go, .confession-next { animation: none; opacity: 1; }
  .confession-intro.leaving { transition: none; }
}

/* ---------- Fairgrounds: places scattered around ---------- */
.confession-next { width: 100%; max-width: 46rem; margin: 0 auto; gap: 1.2rem; }
.fair-head { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.fair-sub { font-size: 0.8rem; opacity: 0.65; letter-spacing: 0.02em; }
.fair-map { position: relative; width: 100%; height: clamp(17rem, 54vh, 28rem); }
.fair-place {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  padding: 0.35rem 0.6rem;
  font-size: clamp(0.95rem, 3.4vw, 1.3rem);
  white-space: nowrap;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  border-radius: var(--radius);
}
.fair-place:hover, .fair-place:focus-visible { background: var(--text); color: var(--bg); outline: none; text-decoration: none; }

/* ---------- Place pages (where secrets get hidden) ---------- */
.place-back { display: inline-block; margin-bottom: 1.2rem; font-size: 0.8rem; color: inherit; text-underline-offset: 0.25em; }
.place-title { font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 400; margin-bottom: 0.4rem; }
.place-sub { font-size: 0.8rem; opacity: 0.65; margin-bottom: 1.2rem; }
.place-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 30rem; margin-bottom: 1.5rem; }
.place-form textarea, .place-form input {
  width: 100%; padding: 0.7rem 0.8rem; font: inherit; font-size: 0.85rem;
  color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.place-form textarea { min-height: 6rem; resize: vertical; }
.place-form button {
  align-self: flex-start; padding: 0.7rem 1.3rem; font: inherit; font-size: 0.8rem;
  color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.place-form button:hover, .place-form button:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.place-form button:disabled { opacity: 0.5; cursor: default; }
.place-status { min-height: 1.2em; margin-bottom: 0.8rem; font-size: 0.8rem; opacity: 0.75; }
.place-more { margin-top: 1rem; padding: 0.6rem 1.1rem; font: inherit; font-size: 0.8rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.place-more[hidden] { display: none; }

/* centered place pages: the secrets sit in up to 3 columns underneath, only as wide as that needs */
.page.place { text-align: center; }
.place-inner { width: 100%; max-width: 52rem; margin: 0 auto; }
.place-form { margin-left: auto; margin-right: auto; text-align: left; }
.place-form button { align-self: center; }
.place .cm-grid {
  column-width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* one or two secrets stay centered */
  gap: 1.2rem;
  align-items: flex-start;
  margin: 0 auto;
}
.place .cm-card { margin: 0; cursor: pointer; flex: 0 0 calc((100% - 2.4rem) / 3); min-width: 0; }
.place .cm-card:hover, .place .cm-card:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.place .cm-card-text p:not(.cm-card-meta) {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.secret-pop { text-align: center; }
.secret-pop-text { font-size: 0.95rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.secret-pop .cm-card-meta { margin-bottom: 1.2rem; }
@media (max-width: 44rem) { .place .cm-card { flex-basis: calc((100% - 1.2rem) / 2); } }
@media (max-width: 30rem) { .place .cm-card { flex-basis: 100%; } }

/* ---------- Thoughts page: centered ---------- */
.thoughts-canvas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;        /* a short last row (or just a few entries) stays centered */
  align-content: flex-start;
  gap: 0.9rem;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  box-sizing: border-box;
}
.thoughts-canvas .entry { flex: 0 0 14rem; max-width: 100%; box-sizing: border-box; text-align: center; align-items: center; }
@media (max-width: 40rem) {
  .thoughts-canvas { gap: 0.75rem; }
  .thoughts-canvas .entry { flex: 0 0 calc((100% - 0.75rem) / 2); }
}

/* thoughts page: more room above the buttons and the boxes */
.thoughts-toolbar { top: 2rem; }
.thoughts-canvas { padding-top: 6rem; }
@media (max-width: 40rem) {
  .thoughts-toolbar { top: 1.5rem; }
  .thoughts-canvas { padding-top: 5rem; }
}

/* ---------- Home page ---------- */
.page[data-page="home"] {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
}
.page[data-page="home"].active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home { width: 100%; max-width: 40rem; text-align: center; }
.home-title { font-size: clamp(1.3rem, 5vw, 2rem); font-weight: 700; margin-bottom: 0.5rem; }
.home-sub { font-size: 0.8rem; line-height: 1.6; margin-bottom: 2.5rem; }
.home-sub-below { margin: 2.5rem auto 0; width: fit-content; max-width: 100%; padding: 0.45rem 0.8rem; background: color-mix(in srgb, var(--bg) 78%, transparent); border-radius: var(--radius); }

/* < box > */
.home-carousel { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }

.home-arrow {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.home-arrow:hover, .home-arrow:focus-visible { background: var(--text); color: var(--bg); outline: none; }

/* every box sits in the same spot; only the current one shows */
.home-slides {
  position: relative;
  flex: 0 1 16rem;
  min-width: 0;
  aspect-ratio: 1 / 1;            /* square */
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
}
.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.home-slide.active, .home-slide.leaving { opacity: 1; visibility: visible; }
.home-slide.leaving { pointer-events: none; }

.home-slide a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  background: var(--bg);          /* solid, so boxes sliding past each other don't show through */
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.home-slide a:hover, .home-slide a:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.home-slide-label { font-size: 1rem; }

@media (max-width: 30rem) {
  .home-carousel { gap: 0.5rem; }
  .home-arrow { width: 2rem; height: 2rem; }
}

.home-ul { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

.home-random {
  margin-top: 1.25rem;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.home-random:hover, .home-random:focus-visible { background: var(--text); color: var(--bg); outline: none; }

.bar-surprise {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.bar-surprise:hover, .bar-surprise:focus-visible { text-decoration: underline; outline: none; }
.bar-surprise[hidden], #bar-name[hidden] { display: none; }

/* ---------- Moodboard: every box is the same size ---------- */
/* a box is a square, 4 to a line (2 on small screens) and never wider than 14rem, so the board looks tidy
   whatever is inside. Pictures are cropped to fit; text boxes show what fits (click one to read it all). */
.mb-grid { --mb-card: min(14rem, calc((100cqw - 3 * var(--mb-gap)) / 4)); }
.mb-row { height: auto; flex-wrap: wrap; justify-content: center; }
.mb-item {
  flex: 0 0 var(--mb-card);
  width: var(--mb-card);
  height: auto;
  aspect-ratio: 1 / 1;
}
.mb-text { overflow: hidden; }
.mb-text h3, .mb-text p { overflow-wrap: anywhere; }
@container (max-width: 40rem) {
  .mb-grid { --mb-card: calc((100cqw - var(--mb-gap)) / 2); }
  .mb-item { flex: 0 0 var(--mb-card); height: auto; }
}

/* phones: moodboard names wrap onto new lines (and a long name wraps inside its tab) instead of running off the side */
@media (max-width: 40rem) {
  .mb-top .mb-tabs {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
    overflow: visible;
    border: none;
    border-radius: 0;
  }
  .mb-top .mb-tab {
    min-width: 0;
    max-width: 100%;
    width: auto;
    height: auto;
    min-height: 2.25rem;
    padding: 0.5rem 0.9rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .mb-top .mb-tab + .mb-tab { border-left: 1px solid var(--line); }
}

/* the description under a moodboard's name */
.mb-desc {
  max-width: 40rem;
  margin: 0.9rem 0 1.6rem;
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.mb-desc[hidden], .mb-reset[hidden] { display: none; }
.mb-reset:disabled { opacity: 0.4; cursor: default; }

/* phones: the buttons beside "make yours" (description, move, delete, reset) wrap instead of running off the side */
@media (max-width: 40rem) {
  .mb-top .mb-right { grid-column: 3 / -1; flex-wrap: wrap; gap: 0.4rem 1rem; height: auto; min-width: 0; }
}

/* moodboard description: centered */
.mb-desc { margin-left: auto; margin-right: auto; text-align: center; }

/* "+ N more" at the end of the moodboard tabs */
.mb-more { min-width: 0; }

/* opened up: every moodboard shows, wrapping onto new lines, each in its own outline */
.mb-tabs.expanded {
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow: visible;
  border: none;
  border-radius: 0;
}
.mb-tabs.expanded .mb-tab {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mb-tabs.expanded .mb-tab + .mb-tab { border-left: 1px solid var(--line); }

/* when the buttons are too many to sit on the same line as the moodboard names, everything in that area is centered
   (script.js adds "wrapped" to .mb-top whenever a line has wrapped) */
.mb-top.wrapped { justify-content: center; }
.mb-top.wrapped .mb-left { justify-content: center; }
.mb-top.wrapped .mb-right { flex: 1 1 100%; justify-content: center; margin-left: 0; }
.mb-top.wrapped .mb-tabs { justify-content: center; }

/* phones: the moodboard names already have a line to themselves, so the buttons (save order, description, move, delete, reset) get their own centered line too */
@media (max-width: 40rem) {
  .mb-top .mb-right {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    justify-content: center;
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* ---------- Touch screens: easier to tap ---------- */
@media (pointer: coarse) {
  /* small text buttons get a bigger invisible area to tap (their looks and spacing don't change) */
  .thoughts-toolbar button,
  .mb-reset,
  .cm-refresh,
  #cm-refresh,
  .place-back,
  .bar-surprise,
  .menu-x {
    position: relative;
  }
  .thoughts-toolbar button::after,
  .mb-reset::after,
  #cm-refresh::after,
  .place-back::after,
  .bar-surprise::after {
    content: "";
    position: absolute;
    inset: -0.7rem -0.5rem;
  }
  .music-vol input[type="range"] { height: 2rem; }

  /* iPhones zoom the whole page in when a box with small text is tapped; 16px stops that */
  input, textarea, select { font-size: 16px; }
  .mb-add-card input[type="text"], .mb-add-card input[type="password"], .mb-add-card input[type="email"], .mb-add-card textarea,
  .place-form textarea, .place-form input { font-size: 16px; }
}

/* "make yours" sits with reset, the same size of text, in an outlined rectangle */
.mb-right .mb-newboard {
  height: auto;
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* ---------- Moodboard names: everything up there stays centered ---------- */
.mb-top { justify-content: center; }
.mb-top .mb-left { justify-content: center; }
.mb-top .mb-tabs { justify-content: center; }
.mb-top .mb-tab { text-align: center; }
.mb-top .mb-right { justify-content: center; }
.mb-note { text-align: center; margin-left: auto; margin-right: auto; }

/* phones: names on top (centered), then the + buttons, then the other buttons, all centered */
@media (max-width: 40rem) {
  .mb-top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 0.5rem; }
  .mb-top .mb-left { display: contents; }
  .mb-top .mb-tabs { order: 0; width: 100%; justify-content: center; justify-self: auto; }
  .mb-top .mb-plus-wrap, .mb-top #mb-add-mine { order: 1; }
  .mb-top .mb-right { order: 2; flex: 1 1 100%; width: 100%; margin-left: 0; justify-content: center; justify-self: auto; }
}

/* ---------- The arcade ---------- */
.page[data-page="arcade"] {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  overflow: auto;
}
.page[data-page="arcade"].active { display: flex; flex-direction: column; align-items: center; }

.arcade { width: 100%; margin: auto; text-align: center; }
.arcade-title { font-size: clamp(1.3rem, 5vw, 2rem); font-weight: 700; margin-bottom: 0.4rem; }
.arcade-sub { font-size: 0.8rem; opacity: 0.7; }

/* the circle: every game is placed round it, and the whole thing turns slowly.
   --n (how many games) and --i (which one) are set in arcade.js */
.arcade-ring {
  --r: max(9rem, calc(var(--n, 3) * 2rem));        /* the circle gets bigger as games are added */
  --card-w: 10rem;
  --card-h: 5.5rem;
  position: relative;
  width: calc(var(--r) * 2 + var(--card-w));
  max-width: 100%;
  height: calc(var(--r) * 2 + var(--card-h));
  margin: 2.5rem auto 1.5rem;
  padding: 0;
  list-style: none;
  animation: arcade-spin 45s linear infinite;
}

.arcade-item {
  --a: calc(360deg / var(--n, 3) * var(--i, 0));
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
}

/* each box turns the opposite way to the circle, so its words always stay upright */
.arcade-card {
  position: absolute;
  left: calc(var(--card-w) / -2);
  top: calc(var(--card-h) / -2);
  width: var(--card-w);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transform: rotate(calc(var(--a) * -1));
  animation: arcade-unspin 45s linear infinite;
}
.arcade-card:hover, .arcade-card:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.arcade-tag { font-size: 0.65rem; opacity: 0.7; }

/* the prize shop box: confetti sits behind it (bigger than the box, so it pokes out all round). It's faint, and gets
   darker when you point at the box, and the box itself goes yellow. The other boxes always sit on top of the confetti.
   (the confetti icon is by Jooyun Lee, from Noun Project) */
.arcade-item { z-index: 1; }
.arcade-item-prize { z-index: 0; }
.arcade-item-prize::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--card-w) + 5rem);
  height: calc(var(--card-h) + 4rem);
  translate: -50% -50%;
  transform: rotate(calc(var(--a) * -1));           /* turns the opposite way to the circle, so it stays level with the box */
  background: url("games/prize/confetti-soft.svg") center / contain no-repeat;
  opacity: 0;                                       /* invisible until you point at the box */
  scale: 0.85;                                     /* resting size (1 = full size, reached on hover) */
  transition: opacity 0.25s ease, scale 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  z-index: -1;
  pointer-events: none;
  animation: arcade-unspin 45s linear infinite;
}
:root[data-theme="dark"] .arcade-item-prize::before { background-image: url("games/prize/confetti-soft-light.svg"); }
.arcade-item-prize:hover::before, .arcade-item-prize:focus-within::before { opacity: 1; scale: 1; }
.arcade-ring:hover .arcade-item-prize::before, .arcade-ring:focus-within .arcade-item-prize::before { animation-play-state: paused; }
.arcade-item-prize .arcade-card:hover, .arcade-item-prize .arcade-card:focus-visible { background: #F8DE7E; color: #1a1a1a; }
@media (prefers-reduced-motion: reduce) { .arcade-item-prize::before { animation: none; } }
.shop-credit { font-size: 0.65rem; opacity: 0.6; margin-top: 1.5rem; }

/* pointing at a game (or tabbing to one) stops the turning so it's easy to click */
.arcade-ring:hover, .arcade-ring:hover .arcade-card,
.arcade-ring:focus-within, .arcade-ring:focus-within .arcade-card { animation-play-state: paused; }

@keyframes arcade-spin { to { transform: rotate(360deg); } }
@keyframes arcade-unspin {
  from { transform: rotate(calc(var(--a) * -1)); }
  to   { transform: rotate(calc(var(--a) * -1 - 360deg)); }
}

.arcade-status { min-height: 1.4em; font-size: 0.8rem; opacity: 0.8; }

/* a visitor who asks their device for less movement gets the circle standing still */
@media (prefers-reduced-motion: reduce) {
  .arcade-ring, .arcade-card { animation: none; }
}

/* phones: no turning circle, just the games stacked in the middle */
@media (max-width: 40rem) {
  .arcade-ring {
    width: 100%;
    height: auto;
    margin: 1.75rem auto 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    animation: none;
  }
  .arcade-item { position: static; width: 100%; height: auto; transform: none; }
  .arcade-card { position: static; width: min(18rem, 100%); height: auto; min-height: 4.5rem; transform: none; animation: none; margin: 0 auto; }
  .arcade-item-prize { position: relative; left: auto; top: auto; margin: 1.3rem 0; }
  .arcade-item-prize::before { left: 50%; top: 50%; width: min(24rem, 100%); height: calc(100% + 3.5rem); transform: none; animation: none; }
}

/* ---------- Help the hyrax ---------- */
.page[data-page="hyrax"] { position: absolute; inset: 0; padding: 0.75rem 1rem 1rem; overflow: hidden; }
.page[data-page="hyrax"].active { display: flex; flex-direction: column; }
.hy-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.hy-head { text-align: center; padding-bottom: 0.6rem; }
.hy-back { display: inline-block; font-size: 0.75rem; color: inherit; opacity: 0.7; text-decoration: none; margin-bottom: 0.4rem; }
.hy-back:hover, .hy-back:focus-visible { opacity: 1; text-decoration: underline; }
.hy-title { font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 700; margin: 0 0 0.25rem; }
.hy-hint { font-size: 0.78rem; opacity: 0.75; margin: 0 0 0.4rem; }
.hy-bar { font-size: 0.75rem; margin: 0; display: flex; gap: 0.75rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.hy-btn { font: inherit; font-size: 0.75rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.15rem 0.6rem; cursor: pointer; }
.hy-btn:hover, .hy-btn:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.hy-btn[hidden] { display: none; }

/* the board fills everything left over; the boxes are placed by hyrax.js */
.hy-board { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.hy-cell {
  position: absolute;
  width: calc(var(--cell) - 4px); height: calc(var(--cell) - 4px);
  margin: 2px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s;
}
.hy-cell svg { width: 78%; height: 78%; color: #2f8a2a; stroke-width: 2.4; opacity: 0; transition: opacity 0.2s; }
.hy-cell.seen { border-style: dashed; border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.hy-cell.seen svg { opacity: 1; }
.hy-cell.seen:has(svg) { background: #2f8a2a; border-color: #2f8a2a; border-style: solid; }
.hy-cell.seen:has(svg) svg { color: #fff; }
.hy-cell.eaten { animation: hy-flash 0.8s ease-out; }
@keyframes hy-flash { from { background: #2f8a2a; } }

/* the word that floats up when the hyrax eats */
.hy-pop { position: absolute; z-index: 3; transform: translate(-50%, -100%); font-size: 0.95rem; font-weight: 700; color: #2f8a2a; pointer-events: none; animation: hy-pop 0.9s ease-out forwards; }
@keyframes hy-pop { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -2.2rem; } }

.hy-hyrax {
  position: absolute; left: 0; top: 0;
  width: auto; max-width: none;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none;
  z-index: 2; outline: none;
  will-change: transform;
}
.hy-hyrax.dragging { cursor: grabbing; }
.hy-hyrax:focus-visible { filter: drop-shadow(0 0 3px var(--text)); }

/* the first-time pop-up for the hyrax game */
.hy-intro { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.hy-intro[hidden] { display: none; }
.hy-intro-box { width: min(22rem, 100%); box-sizing: border-box; text-align: center; padding: 1.75rem 1.5rem 1.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.hy-intro-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }
.hy-intro-text { font-size: 0.85rem; margin: 0 0 0.9rem; }
.hy-intro-ps { font-size: 0.7rem; opacity: 0.65; margin: 0 0 1.25rem; }
.hy-intro-btn { font-size: 0.8rem; padding: 0.3rem 1.1rem; }

/* ---------- Guess the k-pop idol ---------- */
.page[data-page="idol"] { position: absolute; inset: 0; padding: 0.75rem 1rem 1.5rem; overflow: auto; }
.page[data-page="idol"].active { display: flex; flex-direction: column; align-items: center; }
.gi-wrap { width: min(26rem, 100%); margin: auto; text-align: center; }
.gi-photo {
  --size: min(22rem, 100%, 38dvh);
  width: var(--size); aspect-ratio: 1; margin: 0.9rem auto 0.7rem;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
/* the blur is set by idol.js (--blur); the photo is scaled up a touch so the blurry edges never show */
.gi-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: blur(calc(var(--blur, 40) * 1px)); transform: scale(1.12); transition: filter 0.6s ease; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.gi-photo.clear img { transform: none; }
.gi-msg { min-height: 2.6em; font-size: 0.8rem; margin: 0 0 0.5rem; }
.gi-msg strong { font-weight: 700; }
.gi-form { display: flex; gap: 0.5rem; justify-content: center; margin: 0 0 0.6rem; }
.gi-input { flex: 1; min-width: 0; max-width: 15rem; font: inherit; font-size: 0.85rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 0.6rem; }
.gi-input:focus { outline: none; box-shadow: 0 0 0 1px var(--line); }
.gi-actions { display: flex; gap: 0.6rem; justify-content: center; margin: 0 0 0.5rem; }
.gi-hinttext { min-height: 1.4em; font-size: 0.78rem; opacity: 0.8; margin: 0 0 0.6rem; }
.gi-next { margin-top: 0.2rem; }
.gi-form[hidden], .gi-actions[hidden], .gi-game[hidden], .gi-end[hidden], .gi-next[hidden] { display: none; }
.gi-end { padding-top: 1.5rem; }
.gi-end-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.6rem; }
.gi-end-score { font-size: 0.9rem; margin: 0 0 1rem; }
@media (pointer: coarse) { .gi-input { font-size: 16px; } }
/* phones: tighter, and sitting higher, so the yeonbucks / inventory buttons at the bottom left don't cover the game */
@media (max-width: 40rem) {
  .page[data-page="idol"] { padding: 0.35rem 1rem 8.5rem; }
  .gi-wrap { margin: auto; }
  .gi-wrap .hy-back { margin-bottom: 0.15rem; }
  .gi-wrap .hy-hint { margin-bottom: 0.25rem; }
  .gi-photo { --size: min(22rem, 100%, max(9rem, calc(100svh - 27.5rem))); margin: 0.5rem auto 0.4rem; }
  .gi-msg { min-height: 1.6em; margin-bottom: 0.35rem; }
  .gi-form { margin-bottom: 0.4rem; }
  .gi-actions { margin-bottom: 0.3rem; }
  .gi-hinttext { min-height: 1.1em; margin-bottom: 0.3rem; }
  /* the little secret door (once you own the key) also sits at the bottom left, so leave room for it too */
  body:has(#sr-door:not([hidden])) .page[data-page="idol"] { padding-top: 1.35rem; padding-bottom: 12.5rem; }
  body:has(#sr-door:not([hidden])) .gi-photo { --size: min(22rem, 100%, max(8rem, calc(100svh - 32.5rem))); }
}

/* owner only: the "add an idol" box */
.gi-dialog { position: fixed; top: var(--bar-height); bottom: var(--bar-height); left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.gi-dialog[hidden] { display: none; }
.gi-dialog-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.gi-dialog-card { position: relative; width: min(24rem, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; padding: 1.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.gi-dialog-card h2 { font-size: 1rem; margin: 0 0 0.9rem; text-align: center; }
.gi-field { display: block; font-size: 0.78rem; margin-bottom: 0.7rem; }
.gi-field small { opacity: 0.6; margin-left: 0.3rem; }
.gi-field input[type="text"], .gi-field input[type="file"] { display: block; width: 100%; box-sizing: border-box; margin-top: 0.25rem; font: inherit; font-size: 0.8rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 0.5rem; }
.gi-check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; margin-bottom: 0.7rem; }
.gi-form-msg { min-height: 1.3em; font-size: 0.75rem; margin: 0 0 0.6rem; }
.gi-dialog-actions { display: flex; gap: 0.6rem; justify-content: center; }
.gi-added { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.gi-added h3 { font-size: 0.78rem; margin: 0 0 0.5rem; font-weight: 700; }
.gi-added ul { list-style: none; margin: 0; padding: 0; }
.gi-added li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.78rem; padding: 0.15rem 0; }
.gi-added li button { font: inherit; font-size: 0.72rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.45rem; cursor: pointer; }
.gi-added li button:hover { background: var(--text); color: var(--bg); }
@media (pointer: coarse) { .gi-field input[type="text"] { font-size: 16px; } }

/* owner only: the "add a song" box */
.mb-add-card input[type="file"] { display: block; width: 100%; box-sizing: border-box; margin-top: 0.25rem; font: inherit; font-size: 0.8rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 0.5rem; }
.mb-add-card label small { opacity: 0.6; margin-left: 0.3rem; }
.song-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.3rem 0 0.7rem; }
.song-chips[hidden] { display: none; }
.song-chips button { font: inherit; font-size: 0.72rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.5rem; cursor: pointer; }
.song-chips button:hover, .song-chips button.on { background: var(--text); color: var(--bg); }
.song-added { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.song-added h3 { font-size: 0.78rem; margin: 0 0 0.5rem; font-weight: 700; }
.song-added ul { list-style: none; margin: 0; padding: 0; max-height: 10rem; overflow: auto; }
.song-added li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.78rem; padding: 0.15rem 0; }
.song-added li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-added li button { flex: 0 0 auto; font: inherit; font-size: 0.72rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.45rem; cursor: pointer; }
.song-added li button:hover { background: var(--text); color: var(--bg); }

/* ---------- Music controls as icons ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: inherit;
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.icon-btn svg { width: 1.2rem; height: 1.2rem; display: block; pointer-events: none; }
.icon-btn:hover, .icon-btn:focus-visible { background: color-mix(in srgb, var(--text) 12%, transparent); text-decoration: none; outline: none; }
.icon-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* the small player that follows you around */
.mini .icon-btn { width: 1.9rem; height: 1.9rem; }
.mini .icon-btn svg { width: 0.95rem; height: 0.95rem; }
.mini { gap: 0.4rem; }
.mini-title { margin-right: 0.35rem; }
.mini .icon-btn:hover { text-decoration: none; }

/* ---------- Scattergories (multiplayer) ---------- */
.sg-wrap { width: min(28rem, 100%); margin: auto; text-align: center; }
/* the page is a column, so the "margin: auto" above centers the game up and down too (like the other pages) */
.page[data-page="scattergories"] { position: absolute; inset: 0; padding: 0.75rem 1rem 1.5rem; overflow: auto; }   /* same as the idol game page */
.page[data-page="scattergories"].active { display: flex; flex-direction: column; align-items: center; }
.sg-wrap [hidden] { display: none !important; }
.sg-note { min-height: 1.3em; font-size: 0.75rem; margin: 0 0 0.6rem; }
.sg-panel { text-align: center; }
.sg-row { display: flex; gap: 0.6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0.7rem 0; font-size: 0.78rem; }
.sg-row select { font: inherit; font-size: 0.78rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.15rem 0.3rem; }
.sg-row select:disabled { opacity: 0.6; }
.sg-or { font-size: 0.7rem; opacity: 0.6; margin: 1rem 0 0; }
.sg-code { max-width: 7rem; text-align: center; letter-spacing: 0.15em; text-transform: uppercase; }
.sg-codebox { font-size: 0.8rem; margin: 0 0 0.6rem; }
.sg-codebox strong { display: block; font-size: 2rem; letter-spacing: 0.25em; margin-top: 0.2rem; }
.sg-h { font-size: 0.8rem; font-weight: 700; margin: 1.2rem 0 0.5rem; }
.sg-players, .sg-cats, .sg-scores { list-style: none; margin: 0; padding: 0; }
.sg-player, .sg-cat, .sg-score { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.3rem 0.6rem; margin-bottom: 0.3rem; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.sg-player { justify-content: flex-start; }
.sg-tag { font-size: 0.65rem; opacity: 0.65; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.3rem; }
.sg-x { font: inherit; font-size: 0.95rem; line-height: 1; color: inherit; background: none; border: none; cursor: pointer; opacity: 0.6; padding: 0 0.2rem; }
.sg-x:hover, .sg-x:focus-visible { opacity: 1; outline: none; }
.sg-wait { font-size: 0.75rem; opacity: 0.7; margin: 0.8rem 0; }
.sg-start { font-size: 0.85rem; padding: 0.3rem 1.2rem; }

.sg-bar { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; margin: 0 0 0.6rem; }
#sg-timer { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#sg-timer.sg-low { color: #d9534f; }
.sg-letter { font-size: 4rem; font-weight: 700; line-height: 1; margin: 0.2rem 0 1rem; }
.sg-ans { display: block; text-align: left; margin-bottom: 0.6rem; }
.sg-ans-cat { display: block; font-size: 0.72rem; opacity: 0.75; margin-bottom: 0.2rem; }
.sg-ans input { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.85rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.6rem; }
.sg-ans input:focus { outline: none; box-shadow: 0 0 0 1px var(--line); }
.sg-ans input:disabled { opacity: 0.6; }

.sg-help { font-size: 0.72rem; opacity: 0.7; margin: 0 0 0.9rem; }
.sg-cat-result { margin-bottom: 1rem; text-align: left; }
.sg-cat-name { font-size: 0.78rem; font-weight: 700; margin: 0 0 0.35rem; }
.sg-cell { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.5rem; align-items: center; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.8rem; color: inherit; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 0.6rem; margin-bottom: 0.3rem; }
button.sg-cell { cursor: pointer; }
button.sg-cell:hover, button.sg-cell:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.sg-cell-name { font-size: 0.7rem; opacity: 0.65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-cell-text { overflow-wrap: anywhere; }
.sg-cell-pts { font-size: 0.72rem; white-space: nowrap; }
.sg-bad .sg-cell-text { text-decoration: line-through; opacity: 0.55; }
.sg-bad .sg-cell-pts { opacity: 0.75; }
.sg-ruled { border-style: dashed; }
.sg-score-pts { font-variant-numeric: tabular-nums; font-weight: 700; white-space: pre; }

/* scattergories: rules pop-up and top buttons */
.sg-topbar { margin: 0 0 0.6rem; }
.sg-rules-card h3 { font-size: 0.8rem; margin: 1rem 0 0.3rem; }
.sg-rules-card h2 + h3 { margin-top: 0; }
.sg-rules-card p, .sg-rules-card li { font-size: 0.78rem; line-height: 1.5; margin: 0 0 0.4rem; }
.sg-rules-card ol, .sg-rules-card ul { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.sg-rules-card .gi-dialog-actions { margin-top: 1rem; }
.sg-invite { font-size: 0.85rem; margin: 0.6rem 0; }
.sg-invite strong { letter-spacing: 0.2em; }

/* ---------- Casino de yeon ---------- */
/* ---------- casino: the slot machine (her drawing). The picture is one svg, and the words, screen, number and lever sit on top of it.
   Everything inside the machine is sized with "cqw" (a percentage of the machine's width), so it all scales together. ---------- */
.page[data-page="casino"] { padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; }
.page[data-page="casino"].active { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.page[data-page="casino"] .cz-back { align-self: center; margin: 0.2rem 0 0; }
.cz-wrap { width: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; flex: none; }
.cz-wrap .hy-btn:not(:hover):not(:focus-visible) { background: var(--bg); }   /* solid, so patterned backgrounds don't show through */
@media (max-width: 40rem) { .cz-wrap { margin: auto; } }   /* phones: everything sits in the middle of the screen */
.cz-machine {
  position: relative; container-type: inline-size; aspect-ratio: 727 / 790;
  width: min(100%, 32rem, max(16rem, calc((100vh - 22rem) * 0.92))); width: min(100%, 32rem, max(16rem, calc((100svh - 24rem) * 0.92)));
  font-weight: 700;
  transform: translateX(6.26%);   /* the lever sticks out on the right, so the machine is nudged over to line the body (the tray) up with the middle of the page and the text underneath */
}
.cz-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: var(--text); z-index: 1; }
.cz-art *, .cz-lever * { vector-effect: non-scaling-stroke; }
.cz-art .cz4 { fill: none; stroke: var(--bg); stroke-width: 1px; }
.cz-art .cz-hb { stroke: color-mix(in srgb, var(--bg) 55%, var(--text)); }   /* lighter border over the lever holder */
.cz-art .cz5 { fill: none; stroke: var(--text); stroke-width: 1px; stroke-dasharray: 5 5; }
.cz-art .cz6 { fill: var(--bg); stroke: var(--text); stroke-width: 1px; }
.cz-art .cz7 { fill: none; stroke: var(--text); stroke-width: 1px; }
.cz-art .cz8, .cz-lever .cz8 { fill: var(--text); stroke: var(--bg); stroke-width: 1px; }
.cz-art .cz9 { fill: none; stroke: var(--text); stroke-width: 1px; stroke-dasharray: 3 3; }
.cz-art .cz13, .cz-lever .cz13 { fill: var(--bg); stroke: none; }
.cz-lever path:not([class]) { fill: var(--text); }
.cz-lever .cz-armf { fill: url(#cz-ffade); }
.cz-lever .cz-arms { fill: none; stroke: url(#cz-fade); stroke-width: 1px; }

/* the words on the marquee at the top: the title, and under it the little message (wins, losses, "spinning...") */
.cz-marquee { position: absolute; z-index: 2; left: 11.55%; width: 64.4%; top: 3.42%; height: 15.57%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5cqw; overflow: hidden; }
.cz-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-synthesis: none; font-size: 4.3cqw; line-height: 1.1; white-space: nowrap; }
.cz-msg { margin: 0; min-height: 1.3em; font-size: max(10.5px, 2.2cqw); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.cz-msg.cz-bad { opacity: 0.7; }
.cz-msg strong { font-weight: 700; }
/* after the first spin: no welcome title, just the result (the amount in bold) */
.cz-spun .cz-title { display: none; }
.cz-spun .cz-msg { font-size: max(12px, 2.9cqw); font-weight: 400; }

/* the screen: three rows, lined up with the dashed lines in the drawing */
.cz-grid { position: absolute; z-index: 2; left: 10.38%; width: 66.7%; top: 25.85%; height: 48.57%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 124.09fr 137.26fr 122.33fr; gap: 0; border-radius: 4.86cqw; overflow: hidden; margin: 0; }
/* the picture is pinned inside its cell (absolute) because iPhone Safari ignores height:100% on a box sized by aspect-ratio */
.cz-cell { position: relative; min-width: 0; min-height: 0; box-sizing: border-box; }
.cz-cell img { position: absolute; top: 7%; left: 7%; width: 86%; height: 86%; object-fit: contain; pointer-events: none; user-select: none; filter: url(#cz-ink-l); }
:root[data-theme="dark"] .cz-cell img { filter: url(#cz-ink-d); }
.cz-spinning img { opacity: 0.6; }
.cz-win { background: var(--text); }
.cz-win img { filter: url(#cz-ink-lw); }
:root[data-theme="dark"] .cz-win img { filter: url(#cz-ink-dw); }
/* jackpot: the whole screen flashes soft yellow (the pictures stay black so they show up on it) */
.cz-jackpot { background: #f8de7e; }
.cz-jackpot .cz-cell img { filter: url(#cz-ink-g); }
:root[data-theme="dark"] .cz-jackpot .cz-cell img { filter: url(#cz-ink-g); }
/* jackpot: the stars down both sides flash yellow and glow */
.cz-art .cz-stars { transition: fill 0.12s; }
.cz-machine.cz-gold .cz-stars { fill: #f4c20d; filter: drop-shadow(0 0 3px #f4c20d) drop-shadow(0 0 7px rgba(244, 194, 13, 0.85)); }
/* 0.5x: the two matching pictures get a dashed outline */
.cz-pair { outline: 1px dashed var(--text); outline-offset: -0.35em; }

/* the little window on the tray is where you type your bet */
.cz-betwin { position: absolute; z-index: 2; left: 31.87%; width: 23.8%; top: 83.2%; height: 9.9%; margin: 0; padding-bottom: 0.6cqw; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 400; cursor: text; }
.cz-bet { width: 92%; transform-origin: center; box-sizing: border-box; text-align: center; font-family: var(--font-heading); font-weight: 400; font-synthesis: none; font-size: max(16px, 5.4cqw); line-height: 1; color: var(--text); background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; -moz-appearance: textfield; appearance: textfield; }
.cz-bet::-webkit-outer-spin-button, .cz-bet::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cz-bet:focus { outline: none; }
.cz-betwin .cz-cur { font-size: max(8px, 1.9cqw); line-height: 1.2; white-space: nowrap; text-transform: none; letter-spacing: 0.02em; margin-top: -0.6cqw; }
.cz-cur { font-size: 0.8em; text-transform: uppercase; }

/* the lever: tap it to spin. Its arm flips down while the wheels turn. */
.cz-lever { position: absolute; z-index: 3; left: calc(85.1% + 0.55px); width: 12.4%; top: calc(13.3% - 0.75px); height: 42.4%; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.cz-lever svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cz-lever:focus-visible { outline: 1px dashed var(--text); outline-offset: 2px; }
.cz-lever:disabled { cursor: default; }

/* under the machine: the bet, the instructions, and the buttons */
.cz-have { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 0.55rem; row-gap: 0; text-align: center; }
.cz-hv-t { font-family: var(--font-mono); font-size: 0.8rem; }
.cz-hv-n { font-family: var(--font-heading); font-weight: 400; font-synthesis: none; font-size: 2.6rem; line-height: 1.1; }
.cz-hv-n[data-len="8"], .cz-hv-n[data-len="9"], .cz-hv-n[data-len="10"] { font-size: 2.1rem; }
.cz-hv-n:is([data-len="11"], [data-len="12"], [data-len="13"], [data-len="14"], [data-len="15"]) { font-size: 1.7rem; }
.cz-hv-n:is([data-len="16"], [data-len="17"], [data-len="18"], [data-len="19"], [data-len="20"]) { font-size: 1.35rem; }
/* phones, big amounts: "you have" goes on its own line, then the amount and "yeonbucks" under it */
@media (max-width: 40rem) {
  .cz-have:has(.cz-hv-n:is([data-len="12"], [data-len="13"], [data-len="14"], [data-len="15"], [data-len="16"], [data-len="17"], [data-len="18"], [data-len="19"], [data-len="20"])) .cz-hv-t:first-child { flex-basis: 100%; }
  .cz-have:has(.cz-hv-n:is([data-len="12"], [data-len="13"], [data-len="14"], [data-len="15"], [data-len="16"], [data-len="17"], [data-len="18"], [data-len="19"], [data-len="20"])) .cz-hv-n { font-size: 2rem; }
  .cz-have:has(.cz-hv-n:is([data-len="16"], [data-len="17"], [data-len="18"], [data-len="19"], [data-len="20"])) .cz-hv-n { font-size: 1.5rem; }
}
.cz-quick { display: flex; gap: 1.2rem; margin: -0.5rem 0 0; }
.cz-quick button { font: inherit; font-size: 0.85rem; color: inherit; background: none; border: none; padding: 0.3rem 0.2rem; opacity: 0.6; cursor: pointer; text-decoration: underline; }
.cz-quick button:hover, .cz-quick button:focus-visible { opacity: 1; outline: none; }
.cz-caption { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin: 0.2rem 0 0; padding: 0 0.5rem; }
.cz-caption strong { font-size: clamp(0.7rem, 2.9vw, 0.95rem); letter-spacing: 0; }
.cz-caption span { font-size: 0.72rem; }
.cz-earn { font-size: 0.78rem; font-weight: 700; opacity: 0.3; font-variant-numeric: tabular-nums; margin: 0; }
.cz-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; }
.cz-links .hy-btn { font-size: 0.78rem; }
@media (max-width: 40rem) { .cz-machine { transform: none; width: min(calc((100% + 1.4rem) * 0.92), 32rem, max(16rem, calc((100svh - 22rem) * 0.96))); } .cz-wrap { gap: 0.4rem; } .cz-quick { margin-top: -0.3rem; } }   /* phones: the whole machine (lever included) sits in the true middle */
@media (min-width: 40.01rem) { .cz-machine { width: calc(min(100%, 32rem, max(16rem, calc((100svh - 24rem) * 0.92))) * 0.883); } }   /* computers: the machine is a bit smaller (0.92 before, now 4% under that) */
/* the pop-up lives outside the page, so it keeps normal sizes */
.cz-pay { list-style: none; margin: 0.6rem 0 0.8rem; padding: 0; display: grid; gap: 0.3rem; }
.cz-pay-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.78rem; text-align: left; }
.cz-pay-row { display: flex; gap: 0.35rem; flex: none; width: 6.6rem; align-items: center; }
:root[data-theme="dark"] .sg-rules-card .cz-credits { font-size: 0.65rem; opacity: 0.6; }
.cz-mini { display: grid; grid-template-columns: repeat(3, 0.5rem); gap: 1px; }
.cz-mini span { width: 0.5rem; height: 0.5rem; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius: 1px; }
.cz-mini span.on { background: var(--text); border-color: var(--text); }
.sg-rules-card .cz-jp { font-size: 0.72rem; opacity: 0.75; margin: 0 0 0.6rem; }

/* casino: the little leaderboard box, centered underneath everything */
.page[data-page="casino"] { position: relative; }
.cz-lb { position: absolute; top: 6px; left: 6px; z-index: 5; width: 150px; font-size: 12px; line-height: 1.3; text-align: left; border: 1px solid var(--text); border-radius: var(--radius); padding: 7px 9px; background: var(--bg); box-sizing: border-box; }
.cz-lb p { margin: 0; }
.cz-lb-title { font-weight: 700; margin-bottom: 0.2rem !important; }
.cz-lb-list { list-style: none; margin: 0; padding: 0; }
.cz-lb-list li { display: flex; gap: 5px; align-items: baseline; padding: 2px 0; border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.cz-lb-list li:first-child { border-top: 0; }
.cz-lb-rank { opacity: 0.5; width: 12px; flex: none; }
.cz-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-lb-bal { font-weight: 700; font-variant-numeric: tabular-nums; }
.cz-lb-you { font-weight: 700; }
.cz-lb-empty { opacity: 0.6; }
.cz-lb-me { opacity: 0.7; margin-top: 0.15rem !important; }
.cz-lb-link { font: inherit; background: none; border: 0; padding: 0; margin: 6px 10px 0 0; color: inherit; text-decoration: underline; opacity: 0.7; cursor: pointer; }
.cz-lb-link:hover { opacity: 1; }
.cz-lb-form { margin-top: 5px; }
.cz-lb-form input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 4px 6px; border: 1px solid var(--text); border-radius: var(--radius); background: var(--bg); color: inherit; }
.cz-lb-btns { display: flex; flex-wrap: wrap; }
.cz-lb-note { opacity: 0.6; margin-top: 0.2rem !important; }
.cz-lb-note:empty { display: none; }
/* the "___ yeonbucks earned" box, bottom left of every page except the casino and the shop */
.yb-box { position: fixed; bottom: calc(var(--bar-height) + 0.6rem); left: 0.75rem; z-index: 1; font-size: 12px; line-height: 1.4; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.yb-box[hidden] { display: none; }
.yb-box p { margin: 0; }
.yb-row { display: flex; align-items: center; gap: 10px; }
.yb-have { border: 1px solid var(--text); border-radius: var(--radius); padding: 5px 9px; background: var(--bg); }
.yb-where { font: inherit; color: var(--text); background: color-mix(in srgb, var(--bg) 85%, transparent); border: 0; padding: 0 4px; border-radius: var(--radius); cursor: pointer; text-decoration: underline; }   /* (85% opaque background, so the words stay readable over a floor) */
.yb-where:hover { color: var(--text); }
.yb-num { position: relative; display: inline-block; }
.yb-pop { position: absolute; left: 100%; top: -1.6em; margin-left: 2px; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; }
.yb-pop-go { animation: yb-pop 1.6s ease-out forwards; }
@keyframes yb-pop {
  0%   { opacity: 0; transform: translateY(2px) scale(0.8); }
  15%  { opacity: 1; transform: translateY(-2px) scale(1.1); }
  70%  { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .yb-pop-go { animation: yb-pop-still 1.6s linear forwards; }
  @keyframes yb-pop-still { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}
.yb-where { background: color-mix(in srgb, var(--bg) 85%, transparent); padding: 3px 4px; border-radius: var(--radius); }

/* every page (except the casino and shop) ends a little higher, so the box never sits on top of the last bit of content */
body.has-yb .page { padding-bottom: 4.5rem; }

/* on phones the leaderboard goes underneath everything instead of the top left corner */
@media (max-width: 700px) {
  .cz-lb { position: static; width: min(220px, calc(100% - 16px)); margin: 1.5rem auto 0.5rem; }
}

/* on phones the music player sits just above the bottom bar, so while it's showing the yeonbucks box moves up above it */
@media (max-width: 40rem) {
  /* (the yeonbucks box stays where it is: the player sits above it, or beside the secret door, placed by secretroom.js: placeMini) */
  body.has-mini.has-yb .page { padding-bottom: 8rem; }
}

/* slot-machine lever on the side of "casino de yeon": base stays put, arm + ball flip down on hover */
.slot-lever {
  position: absolute; left: calc(100% - 1px); top: 50%;
  width: 1.6rem; height: 3.1rem; translate: 0 -78.7%;   /* base sits level with the middle of the card */
  overflow: visible; fill: var(--text); pointer-events: none;   /* page text colour, so it stays visible when the card inverts */
}
.slot-lever .sl-fill { fill: var(--bg); }              /* solid back, so nothing shows through the outline */
.arcade-item-casino { z-index: 0; }                    /* below the other boxes, so they cover the lever where they overlap */
.slot-lever .sl-arm {
  transform-origin: 14px 45.3px;                          /* hinge = the base's middle */
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.arcade-item-casino .arcade-card:hover .sl-arm,
.arcade-item-casino .arcade-card:focus-visible .sl-arm { transform: scaleY(-1); }
@media (max-width: 40rem) {
  .arcade-item-casino .arcade-card { position: relative; left: auto; top: auto; }
  .slot-lever { left: auto; right: 0.9rem; height: 2.4rem; width: 1.2rem; translate: 0 -50%; fill: currentColor; }
  .slot-lever .sl-fill { fill: none; }   /* inside the card on phones */
}
@media (prefers-reduced-motion: reduce) { .slot-lever .sl-arm { transition: none; } }

/* pencil on the bottom right corner of the "scattergories" arcade box: light until you point at the box, solid back so nothing shows through */
.arcade-item-sg { z-index: 0; }   /* below the other boxes, so they cover the pencil where they overlap */
.sg-pencil {
  position: absolute; bottom: -1.3rem; right: -2rem;
  width: 3.2rem; height: auto;
  opacity: 0; transition: opacity 0.25s ease;   /* invisible until you point at the box */
  pointer-events: none;
}
.arcade-item-sg .arcade-card:hover .sg-pencil, .arcade-item-sg .arcade-card:focus-visible .sg-pencil { opacity: 1; }
.sg-pencil .pn-fill { fill: var(--bg); }
.sg-pencil .pn-line { fill: var(--text); }
@media (max-width: 40rem) {   /* phones: sits inside the box, in the box's own colours */
  .arcade-item-sg .arcade-card { position: relative; left: auto; top: auto; }
  .sg-pencil { bottom: 0.3rem; right: 0.7rem; width: 2.4rem; }
  .sg-pencil .pn-fill { fill: none; }
  .sg-pencil .pn-line { fill: currentColor; }
}

/* leaf tucked behind "help the hyrax": grows up out of the top of the box on hover, solid back so nothing shows through */
.arcade-item-hy { z-index: 0; }
.arcade-item-hy .hy-lf {
  position: absolute; left: 0; top: 0; width: 0; height: 0;       /* middle of the box; turns the opposite way to the circle, like the box */
  z-index: -1; pointer-events: none;
  transform: rotate(calc(var(--a) * -1));
  animation: arcade-unspin 45s linear infinite;
}
.arcade-ring:hover .arcade-item-hy .hy-lf, .arcade-ring:focus-within .arcade-item-hy .hy-lf { animation-play-state: paused; }
.hy-lf svg {
  position: absolute; left: 0; top: 0; width: 2.4rem; height: auto; overflow: visible;
  translate: -50% -50%;                                            /* resting: hidden behind the box */
  transition: translate 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.arcade-item-hy:hover .hy-lf svg, .arcade-item-hy:focus-within .hy-lf svg { translate: -50% calc(var(--card-h) / -2 - 100% + 0.5rem); }   /* + = ends lower, tucked a bit behind the box */
.hy-lf .lf-fill { fill: var(--bg); }
.hy-lf .lf-line { fill: var(--text); }
@media (prefers-reduced-motion: reduce) { .arcade-item-hy .hy-lf { animation: none; } .hy-lf svg { transition: none; } }
@media (max-width: 40rem) {   /* phones: same idea, rising out of the top of the box near its right end */
  .arcade-item-hy { position: relative; left: auto; top: auto; margin-top: 1.6rem; }
  .arcade-item-hy .hy-lf { position: static; width: auto; height: auto; transform: none; animation: none; }
  .hy-lf svg { left: calc(50% + min(9rem, 50%) - 3.2rem); top: 0; width: 1.8rem; translate: 0 0; }
  .arcade-item-hy:hover .hy-lf svg, .arcade-item-hy:focus-within .hy-lf svg { translate: 0 calc(-100% + 0.5rem); }
}

/* question mark tucked behind "guess the k-pop idol": slides out from behind the box to the right on hover */
.arcade-item-idol .id-q {
  position: absolute; left: 0; top: 0; width: 0; height: 0;     /* sits at the middle of the box and turns the opposite way to the circle, like the box */
  z-index: -1; pointer-events: none;
  transform: rotate(calc(var(--a) * -1));
  animation: arcade-unspin 45s linear infinite;
}
.arcade-ring:hover .arcade-item-idol .id-q, .arcade-ring:focus-within .arcade-item-idol .id-q { animation-play-state: paused; }
.id-q svg {
  position: absolute; left: 0; top: 0; width: 2.9rem; height: auto; overflow: visible;
  translate: -50% -50%;                                          /* resting: hidden behind the box */
  transition: translate 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.arcade-item-idol:hover .id-q svg, .arcade-item-idol:focus-within .id-q svg { translate: calc(var(--card-w) / 2 + 0.5rem) -50%; }
.id-q .qm-fill { fill: var(--bg); }
.id-q .qm-line { fill: var(--text); }
@media (prefers-reduced-motion: reduce) { .arcade-item-idol .id-q { animation: none; } .id-q svg { transition: none; } }
@media (max-width: 40rem) {   /* phones: no room beside the box, so it fades up inside the box's right end */
  .arcade-item-idol { position: relative; left: auto; top: auto; }
  .arcade-item-idol .id-q { position: static; width: auto; height: auto; transform: none; animation: none; z-index: auto; }
  .id-q svg { left: calc(50% + min(9rem, 50%) - 3.4rem); top: 50%; width: 2rem; translate: 0 calc(-50% + 0.5rem); opacity: 0; transition: translate 0.35s ease, opacity 0.3s ease; z-index: 1; }
  .arcade-item-idol:hover .id-q svg, .arcade-item-idol:focus-within .id-q svg { translate: 0 -50%; opacity: 1; }
  .id-q .qm-fill { fill: none; }
  .id-q .qm-line { fill: var(--bg); }   /* the box turns dark on hover, so the icon takes the page colour */
}

/* phones: no decorations on the arcade boxes, and the boxes are evenly spaced */
@media (max-width: 40rem) {
  .slot-lever, .sg-pencil, .hy-lf, .id-q, .arcade-item-prize::before { display: none; }
  .arcade-item-prize, .arcade-item-hy { margin-top: 0; margin-bottom: 0; }
}

/* ---------- Prize shop ---------- */
.page[data-page="shop"], .page[data-page="rare-shop"] { position: absolute; inset: 0; padding: 0.5rem 1rem 1.2rem; overflow: auto; }
.page[data-page="shop"].active, .page[data-page="rare-shop"].active { display: flex; flex-direction: column; align-items: center; }
.shop-wrap { width: min(60rem, 100%); text-align: center; }
.shop-wrap .hy-back { margin-bottom: 0; }

/* the title wrapped like a present: a bow on top, ribbon ends underneath */
.shop-head { display: flex; flex-direction: column; align-items: center; margin: 0.2rem 0 0; }
.shop-title { font-size: clamp(1.3rem, 5vw, 1.7rem); margin: -0.1rem 0 0; line-height: 1.1; }
.shop-ribbon { width: 5.4rem; height: auto; overflow: visible; fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.shop-ribbon .loop path:first-child, .shop-ribbon circle { fill: var(--bg); }
.shop-ribbon-bottom { width: 4.7rem; margin-top: 0.1rem; }

.shop-have { display: flex; flex-direction: column; align-items: center; margin: 0.5rem 0 0; line-height: 1.1; }
.shop-have strong { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.shop-have span { font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; }
.shop-msg { min-height: 1.2em; font-size: 0.7rem; opacity: 0.8; margin: 0.1rem 0 0.3rem; }

/* the shop front: a striped awning over a big box */
.shop-store { width: 100%; }
.shop-awning { display: block; width: 100%; height: clamp(2.2rem, 7vw, 3.8rem); overflow: visible; fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.shop-awning path { vector-effect: non-scaling-stroke; }
.shop-awning .awn { fill: var(--bg); }
.shop-body {
  width: 90%; margin: 0 auto; box-sizing: border-box;
  background: var(--bg); border: 1.5px solid var(--line); border-top: none; border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.9rem 1rem 1rem; text-align: left;
}
/* three across; a short last row sits in the middle */
.shop-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.shop-item { flex: 0 0 calc((100% - 2 * 0.6rem) / 3); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; padding: 0.5rem 0.5rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-sizing: border-box; }
.shop-item.is-short .shop-price { opacity: 0.55; }
.shop-item.is-on { position: relative; background: color-mix(in srgb, var(--text) 13%, var(--bg)); color: var(--text); border-color: var(--text); }   /* a soft shade (the card that's switched on) */
:root:not([data-theme="light"]) .shop-item.is-on { background: color-mix(in srgb, var(--text) 16%, var(--bg)); }   /* dark mode: a lighter grey */
.shop-item.is-on::after {                                                  /* ...with a little "on" tag in its top right corner */
  content: "on"; position: absolute; top: -1px; right: -1px; padding: 3px 11px; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.06em;
  background: var(--text); color: var(--bg); border-radius: 0 var(--radius) 0 var(--radius); pointer-events: none;
}
.shop-item.is-on .hy-btn { background: var(--text); color: var(--bg); border-color: var(--text); }          /* the button is dark with light words */
.shop-item.is-on .hy-btn:hover:not(:disabled), .shop-item.is-on .hy-btn:focus-visible { background: var(--bg); color: var(--text); }
.shop-name { font-size: 0.8rem; font-weight: 700; }
.shop-desc { font-size: 0.65rem; opacity: 0.75; min-height: 2.2em; line-height: 1.1rem; }
.shop-price { font-size: 0.7rem; }
.shop-buy { margin-top: 0.2rem; }
.shop-buy:disabled { opacity: 0.45; cursor: default; background: none; color: inherit; }
.shop-prev { width: 100%; height: 2.4rem; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.2rem; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.shop-prev-glyph[data-g="heart"] { color: #f48fb1; }
.shop-prev-glyph[data-g="sparkle"] { color: #e0a82e; }
.shop-prev-glyph[data-g="petal"] { color: #f48fb1; }
.shop-prev-glyph[data-g="bubble"] { color: #8fb8d8; font-size: 1.1rem; }
.shop-prev-glyph[data-g="yb"] { color: #e0a82e; font-weight: 700; }
.shop-prev-glyph .tap-ghost-svg { width: 1.3rem; height: 1.3rem; margin: 0 0.2rem; }
.shop-credit { margin-top: 0.8rem; }
@media (max-width: 40rem) {
  .shop-body { width: 96%; padding: 0.7rem 0.6rem 0.8rem; }
  .shop-item { flex-basis: calc((100% - 0.6rem) / 2); }   /* two across on phones */
}

/* ---------- Page backgrounds (bought in the prize shop; shop.js sets data-bg on <html>) ---------- */
html[data-bg="dots"] body, .shop-prev[data-p="dots"] {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 24%, transparent) 1px, transparent 1.6px);
  background-size: 20px 20px;
}
html[data-bg="grid"] body, .shop-prev[data-p="grid"] {
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
html[data-bg="stars"] body, .shop-prev[data-p="stars"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='%23999'%20fill-opacity='.45'%3E%3Cg%20transform='translate(20%2024)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.9s'%20begin='-0.7s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.3s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='translate(-20%20-24)'%20d='M20%2018l1.6%204.4L26%2024l-4.4%201.6L20%2030l-1.6-4.4L14%2024l4.4-1.6z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(92%2044.5)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='6.3s'%20begin='-2.8s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.5s'%20begin='-1.5s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='translate(-92%20-44.5)'%20d='M92%2040l1.2%203.3L96.5%2044.5l-3.3%201.2L92%2049l-1.2-3.3L87.5%2044.5l3.3-1.2z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(58%20106)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-0.42s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.75s'%20begin='-2.55s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='translate(-58%20-106)'%20d='M58%20100l1.6%204.4L64%20106l-4.4%201.6L58%20112l-1.6-4.4L52%20106l4.4-1.6z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(120%20115)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='7s'%20begin='-4.2s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.25s'%20begin='-0.75s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='translate(-120%20-115)'%20d='M120%20112l1%202.7%202.7%201-2.7%201-1%202.7-1-2.7-2.7-1%202.7-1z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(38.0%2066.0)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.32s'%20begin='-2.1s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3s'%20begin='-1.8s'%20repeatCount='indefinite'/%3E%3Ccircle%20r='1.2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(108.0%2084.0)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.88s'%20begin='-3.5s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-3.3s'%20repeatCount='indefinite'/%3E%3Ccircle%20r='1.2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(72.0%2014.0)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.9s'%20begin='-0.7s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.3s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Ccircle%20r='1.0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(8.0%20120.0)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='6.3s'%20begin='-2.8s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.5s'%20begin='-1.5s'%20repeatCount='indefinite'/%3E%3Ccircle%20r='1.0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}

html[data-bg="hearts"] body, .shop-prev[data-p="hearts"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='none'%20stroke='%23999'%20stroke-opacity='.6'%20stroke-width='1.2'%20stroke-linejoin='round'%3E%3Cg%20transform='translate(22.00%2022.34)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.9s'%20begin='-0.7s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.3s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='scale(0.667)%20translate(-12%20-12.5)'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(89.50%2039.73)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='6.3s'%20begin='-2.8s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.5s'%20begin='-1.5s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='scale(0.458)%20translate(-12%20-12.5)'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(57.00%2099.29)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-0.42s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.75s'%20begin='-2.55s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='scale(0.583)%20translate(-12%20-12.5)'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(119.00%20109.21)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='7s'%20begin='-4.2s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.25s'%20begin='-0.75s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='scale(0.417)%20translate(-12%20-12.5)'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(120.00%2014.16)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.32s'%20begin='-2.1s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3s'%20begin='-1.8s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='scale(0.333)%20translate(-12%20-12.5)'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(14.00%20108.16)'%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='rotate'%20values='-15;15;-15'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.88s'%20begin='-3.5s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-3.3s'%20repeatCount='indefinite'/%3E%3Cpath%20transform='scale(0.333)%20translate(-12%20-12.5)'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@media (prefers-reduced-motion: reduce) {
  html[data-bg="hearts"] body, .shop-prev[data-p="hearts"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='none'%20stroke='%23999'%20stroke-opacity='.6'%20stroke-width='1.2'%20stroke-linejoin='round'%3E%3Cpath%20transform='translate%2814%2014%29%20scale%280.667%29'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20transform='translate%2884%2034%29%20scale%280.458%29'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20transform='translate%2850%2092%29%20scale%280.583%29'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20transform='translate%28114%20104%29%20scale%280.417%29'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20transform='translate%28116%2010%29%20scale%280.333%29'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20transform='translate%2810%20104%29%20scale%280.333%29'%20d='M12%2021s-7.5-4.6-9.8-9.2C.6%208.6%202.4%204.5%206.2%204.3c2.2-.1%204.1%201.1%205.8%203.2%201.7-2.1%203.6-3.3%205.8-3.2%203.8.2%205.6%204.3%204%207.5C19.5%2016.4%2012%2021%2012%2021z'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); }
  html[data-bg="stars"] body, .shop-prev[data-p="stars"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23999' fill-opacity='.45'%3E%3Cpath d='M20 18l1.6 4.4L26 24l-4.4 1.6L20 30l-1.6-4.4L14 24l4.4-1.6z'/%3E%3Cpath d='M92 40l1.2 3.3L96.5 44.5l-3.3 1.2L92 49l-1.2-3.3L87.5 44.5l3.3-1.2z'/%3E%3Cpath d='M58 100l1.6 4.4L64 106l-4.4 1.6L58 112l-1.6-4.4L52 106l4.4-1.6z'/%3E%3Cpath d='M120 112l1 2.7 2.7 1-2.7 1-1 2.7-1-2.7-2.7-1 2.7-1z'/%3E%3Ccircle cx='38' cy='66' r='1.2'/%3E%3Ccircle cx='108' cy='84' r='1.2'/%3E%3Ccircle cx='72' cy='14' r='1'/%3E%3Ccircle cx='8' cy='120' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
  html[data-bg="rain"] body, .shop-prev[data-p="rain"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='%23999'%20fill-opacity='.45'%3E%3Cg%20transform='translate%2818%2014%29%20scale%280.1750%29%20translate%28-4%20-4%29'%3E%3Cpath%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/g%3E%3Cg%20transform='translate%2878%2040%29%20scale%280.1250%29%20translate%28-4%20-4%29'%3E%3Cpath%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/g%3E%3Cg%20transform='translate%2844%2086%29%20scale%280.1500%29%20translate%28-4%20-4%29'%3E%3Cpath%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/g%3E%3Cg%20transform='translate%28108%2098%29%20scale%280.1125%29%20translate%28-4%20-4%29'%3E%3Cpath%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/g%3E%3Cg%20transform='translate%28124%2012%29%20scale%280.1000%29%20translate%28-4%20-4%29'%3E%3Cpath%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/g%3E%3Cg%20transform='translate%288%20100%29%20scale%280.1000%29%20translate%28-4%20-4%29'%3E%3Cpath%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
}
html[data-bg="rain"] body, .shop-prev[data-p="rain"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cdefs%3E%3Cpath%20id='d'%20fill-rule='evenodd'%20d='m45.969%209.0977c0.22266-2.4141%201.6406-3.4492%203.3633-3.8203%200.69922-0.14844%202.4766-0.24609%204.4375%201.4023%203.5977%203.0234%2015.434%2017.984%2023.109%2034.043%205.3711%2011.215%208.5586%2022.965%206.3594%2031.73-3.707%2014.766-18.527%2022.598-33.555%2022.605-15.035%200.007812-29.828-7.8047-33.449-23.016-1.4648-6.1641-0.27344-12.309%202.5547-18.402%202.5352-5.457%206.4023-10.898%2010.52-16.285%203.8594-5.0508%207.9375-10.059%2011.156-15.039%202.8789-4.4531%205.0938-8.8359%205.5039-13.219zm6.3711%208.1328c-3.2383%208.2812-10.039%2016.715-16.477%2025.137-3.7344%204.8867-7.2891%209.793-9.5898%2014.746-2.0039%204.3203-3.0508%208.6484-2.0117%2013.02%202.7109%2011.391%2014.164%2016.68%2025.418%2016.676%2011.273-0.007813%2022.773-5.2891%2025.555-16.363%201.8125-7.2578-1.3516-16.875-5.7969-26.164-5.2031-10.867-12.379-21.254-17.098-27.051zm-22.953%2049.547c-0.18359-2.2695%201.5117-4.2617%203.7812-4.4453%202.2695-0.18359%204.2578%201.5117%204.4414%203.7812%200.24219%202.9609%202.4648%205.7656%204.7148%206.7188%202.0977%200.89062%203.0781%203.3125%202.1914%205.4102-0.89062%202.0938-3.3125%203.0781-5.4102%202.1875-4.5977-1.9453-9.2305-7.6055-9.7188-13.652z'/%3E%3C/defs%3E%3Cg%20fill='%23999'%20fill-opacity='.45'%3E%3Cg%20transform='translate(26.02%20-117.93)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='4.62s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.3s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.175)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(26.02%2022.07)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='4.62s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.3s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.175)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(26.02%20162.07)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='4.62s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.3s'%20begin='0s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.175)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(83.72%20-94.24)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='6.3s'%20begin='-2.1s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.5s'%20begin='-1.5s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.125)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(83.72%2045.76)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='6.3s'%20begin='-2.1s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.5s'%20begin='-1.5s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.125)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(83.72%20185.76)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='6.3s'%20begin='-2.1s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.5s'%20begin='-1.5s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.125)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(50.87%20-47.08)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='5.25s'%20begin='-3.57s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.75s'%20begin='-2.55s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.15)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(50.87%2092.92)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='5.25s'%20begin='-3.57s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.75s'%20begin='-2.55s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.15)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(50.87%20232.92)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='5.25s'%20begin='-3.57s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3.75s'%20begin='-2.55s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.15)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(113.15%20-36.81)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='7.35s'%20begin='-1.05s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.25s'%20begin='-0.75s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1125)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(113.15%20103.19)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='7.35s'%20begin='-1.05s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.25s'%20begin='-0.75s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1125)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(113.15%20243.19)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='7.35s'%20begin='-1.05s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='5.25s'%20begin='-0.75s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1125)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(128.58%20-123.39)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='4.2s'%20begin='-2.52s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3s'%20begin='-1.8s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(128.58%2016.61)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='4.2s'%20begin='-2.52s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3s'%20begin='-1.8s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(128.58%20156.61)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='4.2s'%20begin='-2.52s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='3s'%20begin='-1.8s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(12.58%20-35.39)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='5.88s'%20begin='-4.62s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-3.3s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(12.58%20104.61)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='5.88s'%20begin='-4.62s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-3.3s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3Cg%20transform='translate(12.58%20244.61)'%3E%3CanimateTransform%20attributeName='transform'%20type='translate'%20additive='sum'%20values='0%200;0%20140'%20dur='5.88s'%20begin='-4.62s'%20repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform%20attributeName='transform'%20type='scale'%20values='.7;1.5;.7'%20keyTimes='0;.5;1'%20calcMode='spline'%20keySplines='.45%200%20.55%201;.45%200%20.55%201'%20dur='4.2s'%20begin='-3.3s'%20repeatCount='indefinite'/%3E%3Cuse%20xlink:href='%23d'%20transform='scale(0.1)%20translate(-49.8%20-50.1)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- Cursor trails (bought in the prize shop; drawn by shop.js) ---------- */
.trail-bit {
  position: fixed; z-index: 9999; pointer-events: none; user-select: none;
  translate: -50% -50%; line-height: 1; font-size: 0.9rem;
  animation: trail-fade 0.9s ease-out forwards;
}
.trail-sparkle { color: #e0a82e; }
.trail-heart { color: #f48fb1; }
@keyframes trail-fade {
  from { opacity: 1; transform: translate(0, 0) scale(var(--s, 1)); }
  to   { opacity: 0; transform: translate(var(--dx, 0), 22px) scale(calc(var(--s, 1) * 0.3)); }
}

/* ---------- Inventory ---------- */
.yb-inv { font: inherit; font-size: 12px; color: inherit; background: var(--bg); border: 1px solid var(--text); border-radius: var(--radius); padding: 4px 9px; cursor: pointer; }
.yb-inv:hover, .yb-inv:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.yb-row { flex-wrap: wrap; row-gap: 4px; }
.shop-inv-row { margin: 0.6rem 0 0; }

.inv-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.inv-overlay[hidden] { display: none; }
.inv-panel { position: relative; width: min(24rem, 100%); max-height: 100%; overflow: auto; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; text-align: left; }
.inv-close { position: absolute; top: 0.4rem; right: 0.5rem; font: inherit; font-size: 1.3rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; padding: 0.1rem 0.4rem; }
.inv-close:hover, .inv-close:focus-visible { opacity: 0.6; outline: none; }
.inv-title { font-size: 1.1rem; margin: 0 0 0.6rem; }
.inv-group { margin-top: 0.8rem; }
.inv-group h3 { font-size: 0.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin: 0 0 0.35rem; }
.inv-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.inv-opt { font: inherit; font-size: 0.78rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.65rem; cursor: pointer; }
.inv-opt:hover, .inv-opt:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.inv-opt.is-on { background: #F8DE7E; color: #1a1a1a; border-color: #1a1a1a; }
.inv-empty, .inv-perks { font-size: 0.78rem; margin: 0; }
.inv-empty { opacity: 0.65; }
.inv-shoplink { display: inline-block; margin-top: 1rem; font-size: 0.75rem; text-decoration: underline; opacity: 0.75; }
.inv-shoplink:hover { opacity: 1; }

/* ---------- The pet (bought in the prize shop; shop.js shows it and makes it talk) ---------- */
.pet { position: fixed; right: 1rem; bottom: calc(var(--bar-height) + 0.2rem); z-index: 3; display: flex; flex-direction: column; align-items: center; }
.pet[hidden] { display: none; }
.pet-btn { display: block; position: relative; width: 4.2rem; height: 4.2rem; padding: 0; margin: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pet-btn:focus-visible { outline: 1px dashed var(--text); outline-offset: 2px; border-radius: var(--radius); }
.pet-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pet .pf { fill: var(--bg); }
.pet .pl, .shop-prev-pet .pl { fill: var(--text); }
.shop-prev-pet .pf { fill: var(--bg); }
.pet-b { display: none; }
.pet.is-up .pet-a, .pet-btn:hover .pet-a { display: none; }
.pet.is-up .pet-b, .pet-btn:hover .pet-b { display: block; }
.pet-body { display: block; position: absolute; inset: 0; animation: pet-bob 3.2s ease-in-out infinite; }   /* (the pet's drawings and its accessory: one thing that bobs) */
@keyframes pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .pet-body { animation: none; } }
.pet-bubble {
  position: absolute; bottom: calc(100% - 0.1rem); right: 0; white-space: nowrap;
  font-size: 0.75rem; line-height: 1.2; padding: 0.3rem 0.55rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease;
}
.pet.is-up .pet-bubble { opacity: 1; transform: none; }
.shop-prev-pet { height: 3.4rem; padding: 0.15rem 0; }
.shop-prev-pet svg { height: 100%; width: auto; }
.inv-name { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; font-size: 0.78rem; }
.inv-name input { flex: 1; min-width: 0; font: inherit; font-size: 0.78rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.5rem; }
.inv-name input:focus { outline: none; box-shadow: 0 0 0 2px var(--line); }
@media (max-width: 40rem) {
  .pet-btn { width: 3.4rem; height: 3.4rem; }
  body.has-mini .pet { bottom: calc(var(--bar-height) + 4.4rem); }   /* the music player sits along the bottom on phones */
}

/* a second pet, and the shop's page arrows */
.pet-art { display: none; position: absolute; inset: 0; }
.pet[data-kind="dog"] .pet-art[data-pet="dog"], .pet[data-kind="cat"] .pet-art[data-pet="cat"], .pet[data-kind="bunny"] .pet-art[data-pet="bunny"] { display: block; }
.shop-pager { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 0.8rem; font-size: 0.75rem; }
.shop-arrow { font-size: 0.95rem; line-height: 1; padding: 0.15rem 0.8rem; }
.shop-arrow:disabled { opacity: 0.35; cursor: default; background: none; color: inherit; }

/* the dog and cat drawings come with different line weights, so the dog's lines are thinned in the
   artwork itself and the cat's are thickened here, to land on the same weight on screen */
.cat-line-a .pl { stroke: var(--text); stroke-width: 1.125; stroke-linejoin: round; }
.cat-line-b .pl { stroke: var(--text); stroke-width: 1.83; stroke-linejoin: round; }

/* the "how it works" pop-up (uses the inventory pop-up's frame) */
.how-text, .how-list { font-size: 0.78rem; line-height: 1.55; margin: 0 0 0.6rem; }
.how-list { padding-left: 1.1rem; }
.how-list li { margin-bottom: 0.4rem; }
.how-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }
.how-links a { font-size: 0.78rem; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.65rem; }
.how-links a:hover, .how-links a:focus-visible { background: var(--text); color: var(--bg); outline: none; }

/* "(desktop only)" under the name of things that need a mouse */
.shop-note { display: block; font-size: 0.62rem; font-weight: 400; opacity: 0.7; }

/* ---------- Color accents (bought in the prize shop; shop.js sets data-accent on <html>) ----------
   The whole site is tinted: the page color becomes a mix of the accent and the normal light (or dark) color.
   To make the tint stronger or softer, change --tint. To change a color, change --accent. */
:root { --tint: 20%; }
:root[data-accent="pink"]     { --accent: #ff9ec4; }
:root[data-accent="orange"]   { --accent: #ffa64d; --tint: 32%; }   /* (a little stronger than the others: 20%) */
:root[data-accent="yellow"]   { --accent: #ffe14d; --tint: 32%; }
:root[data-accent="blue"]     { --accent: #6cb4ff; }
:root[data-accent="green"]    { --accent: #39ff14; }
:root[data-accent="lavender"] { --accent: #b79cff; }
:root[data-accent] { --bg: color-mix(in srgb, var(--accent) var(--tint), #141414); }
:root[data-accent][data-theme="light"] { --bg: color-mix(in srgb, var(--accent) var(--tint), #f2efe9); }
:root[data-accent] ::selection { background: var(--accent); color: #1a1a1a; }
.shop-prev-accent[data-a="pink"]     { background: #ff9ec4; }
.shop-prev-accent[data-a="orange"]   { background: #ffa64d; }
.shop-prev-accent[data-a="yellow"]   { background: #ffe14d; }
.shop-prev-accent[data-a="blue"]     { background: #6cb4ff; }
.shop-prev-accent[data-a="green"]    { background: #39ff14; }
.shop-prev-accent[data-a="lavender"] { background: #b79cff; }

/* ---------- Tap sparkles (bought in the prize shop; drawn by shop.js) ---------- */
.tap-bit {
  position: fixed; z-index: 9999; pointer-events: none; user-select: none;
  translate: -50% -50%; line-height: 1; font-size: 0.95rem; color: #e0a82e;
  animation: tap-pop 0.7s ease-out forwards;
}
.tap-heart { color: #f48fb1; }
.tap-petal { animation-name: tap-petal; animation-duration: 1s; animation-timing-function: ease-out; }
.tap-bubble { box-sizing: border-box; border: 1.5px solid #8fb8d8; border-radius: 50%; background: var(--bg); animation-name: tap-rise; animation-duration: 1s; }
.tap-bubble::after { content: ""; position: absolute; left: 22%; top: 18%; width: 22%; height: 22%; border-radius: 50%; background: #8fb8d8; opacity: 0.8; }
.tap-ghost { width: 26px; height: 26px; color: var(--text); animation-name: tap-rise; animation-duration: 1.2s; }
.tap-ghost svg { display: block; width: 100%; height: 100%; }
.tap-yb { font-size: 0.85rem; font-weight: 700; color: #e0a82e; animation-name: tap-rise; animation-duration: 0.8s; }
@keyframes tap-petal {
  from { opacity: 1; transform: translate(0, 0) rotate(0) scale(calc(var(--s, 1) * 0.5)); }
  70%  { opacity: 1; }
  to   { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 90deg)) scale(var(--s, 1)); }
}
@keyframes tap-rise {
  from { opacity: 1; transform: translate(0, 0) scale(calc(var(--s, 1) * 0.6)); }
  70%  { opacity: 1; }
  to   { opacity: 0; transform: translate(var(--tx, 0), var(--ty, -40px)) scale(var(--s, 1)); }
}
@keyframes tap-pop {
  from { opacity: 1; transform: translate(0, 0) scale(calc(var(--s, 1) * 0.5)); }
  60%  { opacity: 1; }
  to   { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--s, 1)); }
}

/* a link that looks like one of the little buttons (the casino's "prize shop") */
a.hy-btn { display: inline-block; text-decoration: none; line-height: normal; }

/* music page: every box has a solid background, so a page background (dots, grid, stars) doesn't show through */
.music .music-now, .music .music-list, .music .mb-tabs, .music .mb-plus { background: var(--bg); }

/* braindump: the moodboard tabs (the titles) and the little + buttons have a solid background */
.mb .mb-tabs, .mb .mb-plus { background: var(--bg); }

/* confession booth: the button and the places on the map have a solid background */
.confession-go, .fair-place { background: var(--bg); }
.confession-go:hover, .confession-go:focus-visible, .fair-place:hover, .fair-place:focus-visible { background: var(--text); }

/* the places in the confession booth: the typing box, its button, the secrets and "show more" all have a solid background */
.place-form textarea, .place-form input, .place-form button, .place .cm-card, .place-more { background: var(--bg); }
.place-form button:hover, .place-form button:focus-visible { background: var(--text); }

/* ---------- the secret room ---------- */
.menu-card a[hidden] { display: none; }

/* the little door on the home page (shows once you own the key) */
.sr-door {
  position: fixed; left: 50%; bottom: 3rem; transform: translateX(-50%); z-index: 30;
  height: 6rem; width: auto; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text); opacity: .7; transition: opacity .2s, transform .2s;
}
.sr-door[hidden] { display: none; }
.sr-door svg { display: block; height: 100%; width: auto; }
.sr-door-back { fill: var(--bg); }
.sr-door-art { fill: var(--text); }
.sr-door:hover, .sr-door:focus-visible { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.sr-door:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--radius); }
@media (max-width: 40rem) { .sr-door { height: 4.4rem; } }

/* the question */
.sr-ask-panel { text-align: center; }
.sr-ask-btns { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }

/* the loading screen */
.sr-load {
  position: fixed; inset: 0; z-index: 10001; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9rem; padding: 2rem; text-align: center;
  background: var(--bg); color: var(--text); cursor: pointer;
}
.sr-load[hidden] { display: none; }
.sr-load.go { animation: sr-fade .6s ease both; }
.sr-load-title { font-weight: 700; font-size: 1.05rem; max-width: 40rem; }
.sr-load-sub { font-size: .8rem; opacity: .55; max-width: 34rem; }
.sr-load-trail { width: 12rem; max-width: 70vw; margin-top: 1rem; fill: none; stroke: var(--line); stroke-width: 1.5; }
.sr-load-trail path { stroke-dasharray: 6 6; animation: sr-march 1s linear infinite; }
.sr-load-trail circle { fill: var(--bg); }
@keyframes sr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-march { to { stroke-dashoffset: -12; } }

/* the page */
.sr { padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; align-items: center; }
.sr-canvas { width: 100%; max-width: 90rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.sr-map { display: block; width: 100%; height: auto; overflow: visible; }
.sr-title { position: relative; display: flex; flex-direction: column; align-items: center; margin: 2.6rem auto 1.5rem; }
.sr-welcome { font-weight: 700; font-size: 1rem; color: var(--text); opacity: .5; margin-bottom: .45rem; text-align: center; }
.sr-name {
  display: block; white-space: nowrap; text-align: center; font-weight: 700; line-height: 1.2; font-size: 1.9rem;
  padding: .35em 1.1em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.sr-bang { position: absolute; right: -2.6rem; top: -1.6rem; width: 4rem; fill: var(--text); }
.sr-bang-mark { fill: var(--bg); }
.sr-trail { fill: none; stroke: var(--line); stroke-width: 1.3; stroke-dasharray: 6 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sr-ring { fill: var(--bg); stroke: var(--line); stroke-width: 2; r: 15; transition: fill .2s; }
.sr-hit { fill: transparent; r: 32; }
.sr-dot { cursor: pointer; outline: none; }
.sr-dot:hover .sr-ring, .sr-dot:focus-visible .sr-ring { fill: var(--text); }
.sr-status { min-height: 1.4em; margin-top: .8rem; text-align: center; font-size: .85rem; }
.sr-credit { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-height) + .4rem); text-align: center; font-size: .65rem; opacity: .45; pointer-events: none; }

@media (max-width: 44rem) {
  .sr-welcome { font-size: .8rem; }
  .sr-name { font-size: 1.1rem; }
  .sr-bang { right: -1.8rem; top: -1.3rem; width: 3rem; }
  .sr-ring { r: 44; stroke-width: 5; }
  .sr-hit { r: 70; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-load.go, .sr-load-trail path { animation: none; }
  .sr-door { transition: none; }
}

/* secret room: the map (25% bigger than before: 52rem -> 65rem), credit pinned at the bottom */
.sr-canvas { max-width: 65rem; }
.sr-credit { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-height) + .35rem); margin: 0; z-index: 5; pointer-events: none; }
@media (max-width: 44rem) {
  .sr-canvas { max-width: 24rem; }
  .sr-credit { bottom: calc(var(--bar-height) + 3.2rem); }
}

/* secret room title: sits on the map like the design (desktop), centered above it on phones; a bit smaller */
.sr-canvas { position: relative; container-type: inline-size; }
@media (min-width: 44.01rem) {
  .sr-title { position: absolute; left: 65.4%; top: 16.8%; transform: translateX(-50%); margin: 0; z-index: 2; }
  .sr-welcome { font-size: clamp(.62rem, 1.15cqw, 1rem); margin-bottom: .4em; }
  .sr-name { font-size: clamp(.85rem, 2.1cqw, 1.8rem); padding: .3em 1em; }
  .sr-bang { width: 3.4cqw; min-width: 2rem; right: -2.4cqw; top: -2.4cqw; }
}
@media (max-width: 44rem) {
  .sr-welcome { font-size: .72rem; }
  .sr-name { font-size: .95rem; }
  .sr-bang { width: 2.6rem; right: -1.6rem; top: -1.2rem; }
}

/* secret room: everything centered in the space between the top and bottom bars */
.page[data-page="secret-room"].active {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--bar-height) * 2 - var(--lights-h)); min-height: calc(100dvh - var(--bar-height) * 2 - var(--lights-h));
}
.page[data-page="secret-room"] .sr { width: 100%; padding: 1rem 1rem 2.5rem; }
.sr-status { min-height: 0; margin-top: .4rem; }

/* secret room: two maps, the wide one for desktop and the tall one for phones */
.sr-map-m { display: none; }
.sr-map-m .sr-ring { r: 14; stroke-width: 1.5; }
.sr-map-m .sr-hit { r: 30; }
.sr-map-m .sr-trail { stroke-width: 1.3; stroke-dasharray: 6 6; }
.sr-name { font-size: clamp(.95rem, 2.4cqw, 2.1rem); }
@media (min-width: 44.01rem) {
  .sr-welcome { font-size: clamp(.7rem, 1.35cqw, 1.15rem); }
  .sr-name { font-size: clamp(.95rem, 2.4cqw, 2.1rem); }
  .sr-bang { width: 3.9cqw; right: -2.7cqw; top: -2.7cqw; }
}
@media (max-width: 44rem) {
  .sr-map-d { display: none; }
  .sr-map-m { display: block; }
  .sr-canvas { max-width: 26rem; }
  .sr-map-m { width: 125%; max-width: none; flex: none; }   /* 25% bigger than the space it's given, spilling evenly out each side (the drawing has empty room around it) */
  .sr-welcome { font-size: 1.06rem; }
  .sr-name { font-size: 1.5rem; }
  .sr-bang { width: 3.75rem; right: -2.4rem; top: -1.75rem; }
  .sr-title { margin: 1rem auto .5rem; }
}

/* phones: bigger map, more room at the top (scroll for the rest) */
@media (max-width: 44rem) {
  .page[data-page="secret-room"] .sr { padding-top: 3.5rem; padding-bottom: 5rem; }
  .sr-title { margin: 1.5rem auto 1rem; }
}

/* phones: start near the top instead of centering */
@media (max-width: 44rem) {
  .page[data-page="secret-room"].active { align-items: flex-start; }
  .page[data-page="secret-room"] .sr { padding-top: .5rem; }
  .sr-title { margin: 1.4rem auto .6rem; }
}

/* the door replaces the first dot on the map; every door's lines match the dashed trail (1.3px) */
.sr-door-icon { overflow: visible; fill: var(--text); }
.sr-door-icon .sr-door-art { fill: var(--text); stroke: var(--text); stroke-width: .35px; }
.sr-door-icon .sr-door-art path { vector-effect: non-scaling-stroke; }
.sr-door-icon .sr-door-back { fill: var(--bg); stroke: none; }
.sr-dot:hover .sr-door-icon, .sr-dot:focus-visible .sr-door-icon { opacity: .6; }
.sr-map-m .sr-door-icon .sr-door-art { stroke-width: .16px; }
/* home page door: thinned down to match */
.sr-door-art { stroke: var(--bg); stroke-width: .95px; }
.sr-door-art path { vector-effect: non-scaling-stroke; }
@media (max-width: 40rem) { .sr-door-art { stroke-width: .64px; } }
.sr-door-icon .sr-door-art { stroke: var(--text); stroke-width: .35px; }
.sr-map-m .sr-door-icon .sr-door-art { stroke-width: .16px; }

/* map doors are bigger now, so their own lines already come out near 1.3px */
.sr-door-icon .sr-door-art { stroke: var(--bg); stroke-width: .3px; }   /* a little thinner lines */
.sr-map-m .sr-door-icon .sr-door-art { stroke: var(--bg); stroke-width: .38px; }
@media (max-width: 44rem) { .sr-title { margin-bottom: 1.8rem; } }

/* room names on the map */
.sr-label { fill: var(--text); pointer-events: none; }
.sr-label-name { font-weight: 700; }
.sr-label-sub { font-weight: 400; opacity: .55; }
.sr-entry { pointer-events: none; }

/* phones: credit goes at the end of the page, and the "not open yet" note floats above the bottom bar */
@media (max-width: 44rem) {
  .sr-credit { position: static; margin: 1.5rem 0 0; pointer-events: auto; }
  .page[data-page="secret-room"] .sr { padding-bottom: 6rem; }
  .sr-status { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--bar-height) + .8rem); z-index: 6; margin: 0; padding: .45rem .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); width: fit-content; margin-inline: auto; }
  .sr-status:empty { display: none; }
}
@media (max-width: 44rem) { .sr-status { bottom: calc(var(--bar-height) + 4.4rem); font-size: .72rem; text-align: center; } }

.sr-label-sub { opacity: .72; }

/* daily prize pop up */
.sr-daily-amt { margin-top: .8rem; font-weight: 700; font-size: 1.5rem; }
.sr-daily-note { margin-top: .5rem; font-size: .8rem; opacity: .7; }

/* the wheel */
.sw-panel { width: min(34rem, 100%); text-align: center; }
.sw-svg { display: block; width: min(100%, 27rem); height: auto; margin: 0 auto; overflow: visible; }
#sw-wheel { transform-origin: 819.4px 505.6px; transition: transform 4.6s cubic-bezier(.15,.7,.1,1); }
.sw-ring { fill: var(--bg); stroke: var(--line); stroke-width: 2.2; }
.sw-line { fill: none; stroke: var(--line); stroke-width: 2.2; }
.sw-line.sw-gold { fill: #ffe48d; }
.sw-text text { fill: var(--text); }
.sw-text .sw-gold-text { fill: #1a1a1a; }
.sw-b { font-weight: 700; }
.sw-spoke { fill: var(--bg); stroke: var(--line); stroke-width: 2.2; }
.sw-hub { fill: var(--bg); stroke: var(--line); stroke-width: 2.2; }
.sw-pointer { fill: var(--text); }
.sw-info { margin-top: .4rem; font-size: .75rem; opacity: .7; min-height: 1.2em; }
.sw-result { margin-top: .5rem; min-height: 2.6em; font-weight: 700; font-size: .95rem; }
.hy-btn:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { #sw-wheel { transition-duration: .5s; } }

/* the mystery pets (koala, frog, panda): one drawing each, so the "up" pose is a little hop */
.pet[data-kind="koala"] .pet-art[data-pet="koala"], .pet[data-kind="frog"] .pet-art[data-pet="frog"], .pet[data-kind="panda"] .pet-art[data-pet="panda"] { display: block; }
/* (the little hop when you point at a pet that has one drawing: the whole body hops, see the end of this file) */
@keyframes pet-hop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }


/* choosing a mystery pet on the wheel */
.sw-pick { margin-top: .6rem; }
.sw-pick-title { font-weight: 700; font-size: .95rem; margin-bottom: .6rem; }
.sw-pick-opts { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.sw-pet-opt { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .7rem .4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 6.4rem; }
.sw-pet-opt .shop-prev-pet { height: 4.6rem; }
.sw-pet-opt span.nm { font-size: .78rem; }
.sw-pet-opt:hover, .sw-pet-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--line); }
.sw-pet-opt[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sw-pet-opt[aria-pressed="true"] .pf { fill: var(--text); }
.sw-pet-opt[aria-pressed="true"] .pl { fill: var(--bg); }
.sw-pick[hidden], #sw-controls[hidden] { display: none; }

/* rare items shop animals: drawn once in the page (see .pet-defs), shown like the other single-picture pets */
.pet-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pet-defs .pf { fill: var(--bg); }
.pet-defs .pl { fill: var(--text); }
.pet[data-kind="fish"] .pet-art[data-pet="fish"], .pet[data-kind="chicken"] .pet-art[data-pet="chicken"], .pet[data-kind="elephant"] .pet-art[data-pet="elephant"], .pet[data-kind="goat"] .pet-art[data-pet="goat"], .pet[data-kind="hamster"] .pet-art[data-pet="hamster"], .pet[data-kind="hedgehog"] .pet-art[data-pet="hedgehog"], .pet[data-kind="mouse"] .pet-art[data-pet="mouse"], .pet[data-kind="turtle"] .pet-art[data-pet="turtle"] { display: block; }
/* the drawings come with different line weights, nudged here so they all land on the same weight on screen */

/* the rare items shop ("new stock in ...") */
.shop-restock { font-size: 0.7rem; opacity: 0.8; margin: 0.15rem 0 0; }

/* the rare items shop shows 4 at a time, stacked 2 x 2 */
#rare-items .shop-item { flex-basis: calc((100% - var(--gx, 0.6rem)) / 2); }

/* a little more room between the rare items shop title and the yeonbucks count */
.page[data-page="rare-shop"] .shop-have { margin-top: 1.4rem; }

/* the rat (remy): drawn once in the page like the other rare pets. Her lines are thin when she's small, so they get a little
   extra weight in the corner and the shop (--rat-w is read by her drawing in index.html); in her own panel they stay as drawn */
.pet[data-kind="rat"] .pet-art[data-pet="rat"] { display: block; }
.pet-a, .pet-b { --rat-w: 15.5; }

/* remy's panel */
.remy-card { position: relative; width: min(34rem, 100%); max-height: 100%; overflow: auto; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1rem 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.remy-title { font-size: clamp(1.2rem, 4.6vw, 1.7rem); margin: 0.3rem 0 0.15rem; }
.remy-sub { font-size: 0.8rem; margin: 0; opacity: 0.45; }
.remy-stage { position: relative; width: 100%; height: clamp(12rem, 44vh, 20rem); margin: 0.8rem 0 0.2rem; }
.remy-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.remy-stage > svg { animation: remy-bob 3.2s ease-in-out infinite; }
.remy-stage.pop > svg { animation: remy-pop 0.45s ease-out; }
@keyframes remy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes remy-pop { 0% { transform: translateY(0) scale(0.96); } 40% { transform: translateY(-12px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
.remy-say { min-height: 1.3em; margin: 0 0 0.8rem; font-size: 0.8rem; }
.remy-btns { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; width: 100%; }
.remy-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.remy-btn { font: inherit; font-size: 0.85rem; font-weight: 700; color: inherit; background: var(--bg); border: 1px solid var(--text); border-radius: var(--radius); padding: 0.5rem 1rem; cursor: pointer; }
.remy-btn:hover, .remy-btn:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.inv-play { margin-top: 0.6rem; }
/* "make it rain": raindrops (the raindrop icon) fall BEHIND her; remy.js makes the drops */
.remy-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.remy-card[data-state="rain"] .remy-rain { display: block; }
.remy-drop { position: absolute; top: -2.5rem; left: var(--x); width: var(--s); height: calc(var(--s) * 1.15); color: var(--text); animation: remy-drop var(--d) linear infinite; animation-delay: var(--delay); }
.remy-drop svg { display: block; width: 100%; height: 100%; }
@keyframes remy-drop { from { transform: translateY(0); } to { transform: translateY(24rem); } }
@media (prefers-reduced-motion: reduce) { .remy-stage > svg, .remy-stage.pop > svg { animation: none; } .remy-drop { animation: none; } }
@media (max-width: 40rem) { .remy-card { padding-left: 0.6rem; padding-right: 0.6rem; } .remy-row { gap: 0.4rem; } .remy-btn { font-size: 0.7rem; padding: 0.45rem 0.55rem; } }

/* remy: "pet" mode (a hand for a cursor), the squish when you pet her, and the dark "battle!" button */
.remy-card[data-petting="1"] .remy-stage { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11 29 C7.5 26 6 22 5 18 C4.6 16.4 6.8 15.4 7.8 16.8 L9.6 19 V8.5 C9.6 6.6 12.4 6.6 12.4 8.5 V14 V6.5 C12.4 4.6 15.2 4.6 15.2 6.5 V14 V7.5 C15.2 5.6 18 5.6 18 7.5 V14.5 V10 C18 8.1 20.8 8.1 20.8 10 V20 C20.8 24.5 19.5 26.5 18 29 Z' fill='white' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 13 12, grab; }
.remy-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); }   /* "pet" while the hand is on */
.remy-btn[data-act="battle"] { background: var(--text); color: var(--bg); }
.remy-btn[data-act="battle"]:hover, .remy-btn[data-act="battle"]:focus-visible { background: var(--bg); color: var(--text); }
.remy-stage > svg { transform-origin: 50% 100%; }
.remy-stage.squish > svg { animation: remy-squish 0.5s ease-out; }
@keyframes remy-squish { 0% { transform: scale(1, 1); } 22% { transform: scale(1.1, 0.8); } 55% { transform: scale(0.96, 1.07) translateY(-6px); } 80% { transform: scale(1.02, 0.97); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .remy-stage.squish > svg { animation: none; } }

/* ===== the battle (battle.js). Laid out like the battle reference: 1625 x 1080, everything placed in % of that ===== */
.bt-card { position: relative; width: min(66rem, 100%); max-height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 2.4rem 0.8rem 0.8rem; }
.bt { --H: 1080; position: relative; width: min(100%, calc((100vh - 7.5rem - var(--lights-h)) * 1.505)); margin: 0 auto; aspect-ratio: 1625.51 / 1080; container-type: inline-size; font-weight: 700; }
.bt-arena { position: absolute; inset: 0; }
.bt-art { position: absolute; left: 0; top: 0; width: 100%; height: calc(1080 / var(--H) * 100%); overflow: visible; }
.bt-horizon { fill: none; stroke: var(--text); stroke-width: 4; }
.bt-plat { fill: var(--bg); stroke: var(--text); stroke-width: 4; }
.bt-sprite { transform-box: fill-box; transform-origin: 50% 100%; }

.bt-box { position: absolute; box-sizing: border-box; border: 1px solid var(--text); border-radius: var(--radius); background: var(--bg); height: calc(125.63 / var(--H) * 100%); font-size: 0.8rem; }
.bt-box-foe { left: 5.06%; top: calc(87.12 / var(--H) * 100%); width: 50.74%; }
.bt-box-me { left: 45.08%; top: calc(635.02 / var(--H) * 100%); width: 51.25%; }
.bt-name, .bt-hp { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.bt-name { font-style: italic; font-size: clamp(0.8rem, 2.46cqw, 2rem); }
.bt-hp { font-size: clamp(0.7rem, 1.85cqw, 1.5rem); }
.bt-box-foe .bt-name { left: 8.5%; } .bt-box-foe .bt-hp { left: 27.8%; }
.bt-box-me .bt-name { left: 7.2%; }  .bt-box-me .bt-hp { left: 27.5%; }
.bt-bar { position: absolute; top: 35%; height: 30%; border-radius: var(--radius); background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.bt-box-foe .bt-bar { left: 36.2%; width: 59.6%; }
.bt-box-me .bt-bar { left: 35.9%; width: 59.7%; }
.bt-bar i { display: block; width: 100%; height: 100%; background: #6cb723; transform-origin: 0 50%; transform: scaleX(var(--hp, 1)); transition: transform 0.8s linear, background-color 0.3s; }
.bt-bar i[data-lv="mid"] { background: #e6a817; }
.bt-bar i[data-lv="lo"] { background: #d64545; }

.bt-say, .bt-menu { position: absolute; margin: 0; }
.bt-say { left: 45.08%; top: calc(785.67 / var(--H) * 100%); width: 25.05%; height: calc(237.57 / var(--H) * 100%); box-sizing: border-box; padding: 1.4cqw 1.7cqw; border: 1px solid var(--text); border-radius: var(--radius); background: var(--bg); font-size: 0.8rem; font-size: clamp(0.62rem, 1.85cqw, 1.5rem); line-height: 1.5; overflow: hidden; }
.bt-menu { left: 71.51%; top: calc(785.67 / var(--H) * 100%); width: 24.82%; height: calc(235.79 / var(--H) * 100%); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12% 5%; }
.bt-btn { font: inherit; font-size: 0.8rem; font-size: clamp(0.6rem, 1.85cqw, 1.5rem); font-weight: 700; color: inherit; background: var(--bg); border: 1px solid var(--text); border-radius: var(--radius); padding: 0; cursor: pointer; }
.bt-btn:hover, .bt-btn:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.bt-btn:disabled { opacity: 0.45; cursor: default; }

/* moves */
.bt-lunge-foe { animation: bt-lunge-foe 0.5s ease-in-out; }
.bt-lunge-me { animation: bt-lunge-me 0.5s ease-in-out; }
@keyframes bt-lunge-foe { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-200px, 160px); } }
@keyframes bt-lunge-me { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(230px, -160px); } }
.bt-hit { animation: bt-blink 0.5s steps(1); }
@keyframes bt-blink { 0%, 100% { opacity: 1; } 20% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0; } 80% { opacity: 1; } }
.bt-squish { animation: remy-squish 0.5s ease-out; }
.bt-ascend { animation: bt-ascend 1.8s ease-out forwards; }
@keyframes bt-ascend { from { transform: translateY(0); } to { transform: translateY(-70px); } }
.bt-cheer { animation: bt-cheer 0.7s ease-in-out infinite; }
@keyframes bt-cheer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
.bt-ko { animation: bt-ko 0.9s ease-in forwards; }
@keyframes bt-ko { to { transform: translateY(70px) rotate(10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-lunge-foe, .bt-lunge-me, .bt-hit, .bt-squish, .bt-ascend, .bt-cheer { animation: none; } .bt-ko { animation: none; opacity: 0; } .bt-bar i { transition: none; } }

/* phones: only the arena (platforms, sprites, HP boxes) keeps the reference layout; the text box and buttons go underneath at a readable size */
@media (max-width: 40rem) {
  .bt-card { padding: 2.2rem 0.5rem 0.6rem; }
  .bt { --H: 1030; width: 100%; aspect-ratio: auto; container-type: normal; }
  .bt-arena { position: relative; inset: auto; aspect-ratio: 1625.51 / 1030; overflow: hidden; }
  .bt-plat { stroke-width: 8; }
  .bt-horizon { stroke-width: 8; }
  .bt-name { font-size: 0.68rem; } .bt-hp { font-size: 0.6rem; }
  .bt-box .bt-name { left: 5%; } .bt-box .bt-hp { left: 35%; }
  .bt-box .bt-bar { left: 53%; width: 41%; }
  .bt-say { position: static; width: auto; height: auto; min-height: 4.6rem; margin-top: 0.5rem; padding: 0.7rem 0.8rem; font-size: 0.85rem; }
  .bt-menu { position: static; width: auto; height: auto; margin-top: 0.5rem; gap: 0.5rem; }
  .bt-btn { padding: 0.8rem 0.4rem; font-size: 0.85rem; }
}

/* feed her cheese: a cheese you drag onto her (remy.js) */
.remy-cheese { position: absolute; left: 0.4rem; bottom: 0.2rem; width: 4.6rem; height: 4.1rem; padding: 0; border: 0; background: none; color: var(--text); cursor: grab; touch-action: none; z-index: 3; transition: transform 0.25s ease-out; }
.remy-cheese[hidden] { display: none; }
.remy-cheese svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.remy-cheese.dragging { cursor: grabbing; transition: none; z-index: 5; }
.remy-cheese:focus-visible { outline: 1.5px dashed var(--text); outline-offset: 3px; }
.remy-stage.hungry { outline: 1.5px dashed var(--text); outline-offset: -2px; border-radius: var(--radius); }
.remy-hat { width: 5.2rem; height: 3.7rem; bottom: 0.6rem; }

/* the door at the bottom of the prize shop: sits in the page (not fixed like the home one) */
.sr-door.sr-door-inline { position: static; transform: none; display: block; margin: 1.4rem auto 0.4rem; height: 6rem; }
.sr-door.sr-door-inline[hidden] { display: none; }
.sr-door.sr-door-inline:hover, .sr-door.sr-door-inline:focus-visible { transform: translateY(-2px); }
@media (max-width: 40rem) { .sr-door.sr-door-inline { height: 5.2rem; } }

/* phones, every page except home / prize shop / the room: the door sits bottom left, above the yeonbucks */
.sr-door.sr-door-corner { left: 0.75rem; transform: none; height: 4.4rem; }
.sr-door.sr-door-corner .sr-door-art { stroke-width: .64px; }   /* same 1px line weight as the buttons next to it */
.sr-door.sr-door-corner { opacity: 1; }                           /* and the same darkness */
.sr-door.sr-door-corner:hover, .sr-door.sr-door-corner:focus-visible { transform: translateY(-2px); }

/* the little line under each move (how much damage / healing) */
.bt-btn .bt-sub { display: block; margin-top: 0.2em; font-size: clamp(0.5rem, 1.15cqw, 0.85rem); font-weight: 400; opacity: 0.7; line-height: 1.2; }
@media (max-width: 40rem) { .bt-btn .bt-sub { font-size: 0.65rem; } }

/* hp numbers to the right of each bar (e.g. 75/100) */
.bt-hpn { position: absolute; right: 3.5%; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: clamp(0.6rem, 1.6cqw, 1.3rem); }
.bt-box-foe .bt-bar { width: 42%; } .bt-box-me .bt-bar { width: 41%; }
@media (max-width: 40rem) {
  .bt-hpn { font-size: 0.55rem; right: 3%; }
  .bt-box .bt-hp { display: none; }
  .bt-box .bt-bar { left: 33%; width: 38%; }
  .bt-box-foe .bt-bar, .bt-box-me .bt-bar { width: 38%; }
}

/* the "gotcha!" ball (a catch): remy in a circle, big words, the reward underneath */
.bt-catch { position: absolute; inset: -1rem; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; background: var(--bg); text-align: center; padding-bottom: 24%; box-sizing: border-box; }
.bt-catch[hidden] { display: none; }
.bt-ball { width: clamp(9rem, 38cqw, 17rem); aspect-ratio: 1; border: 4px solid var(--text); border-radius: 50%; background: var(--bg); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding: 0; box-sizing: border-box; animation: bt-ball-bob 1.4s ease-in-out infinite; }
.bt-ball svg { display: block; flex: none; width: 80%; height: 80%; margin-bottom: 8%; overflow: visible; }
@keyframes bt-ball-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.bt-gotcha { margin: 0.6rem 0 0; font-size: clamp(1.8rem, 6cqw, 3.4rem); font-weight: 700; line-height: 1.1; }
.bt-won { margin: 0; font-size: clamp(0.8rem, 1.9cqw, 1.2rem); font-weight: 400; opacity: 0.75; }
@media (max-width: 40rem) { .bt-catch { inset: 0; padding-bottom: 0; gap: 0; } .bt-ball { width: 6.6rem; border-width: 3px; } .bt-gotcha { font-size: 1.7rem; margin-top: 0.3rem; } .bt-won { font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .bt-ball { animation: none; } }
.bt-say, .bt-menu { z-index: 4; }   /* (the buttons stay on top of the gotcha ball) */

/* after a catch: no text box, the two buttons centered under the "gotcha!" and the same height */
.bt.bt-caught .bt-say { display: none; }
.bt.bt-caught .bt-menu { left: 50%; right: auto; top: auto; bottom: 24%; transform: translateX(-50%); width: min(24rem, 80%); height: 3.6rem; display: flex; gap: 0.8rem; margin: 0; }
.bt.bt-caught .bt-btn { flex: 1; height: 100%; padding: 0; }
@media (max-width: 40rem) { .bt.bt-caught .bt-menu { position: static; transform: none; width: auto; height: 3rem; margin-top: 0.5rem; } }

/* phones: the pet sits above the yeonbucks / inventory / "how it works" row instead of on top of it */
@media (max-width: 40rem) {
  .pet { bottom: calc(var(--bar-height) + 3.2rem); }
  body.has-mini .pet { bottom: calc(var(--bar-height) + 7.4rem); }
}

/* the leaderboard popup */
.lb-card { position: relative; width: min(25rem, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 2.2rem 1rem 1rem; font-size: 0.78rem; line-height: 1.35; text-align: left; }
.lb-card p { margin: 0; }
.lb-card .cz-lb-title { font-size: 1rem; margin-bottom: 0.5rem !important; }
.lb-card .cz-lb-list li { padding: 4px 0; }
.lb-card .cz-lb-rank { width: 1.6em; }
.lb-card .cz-lb-me { margin-top: 0.4rem !important; }
.lb-card .cz-lb-link { margin-top: 0.7rem; }
.lb-card .cz-lb-form { margin-top: 0.6rem; }
.lb-sub { margin-top: 0.8rem !important; font-size: 0.72rem; opacity: 0.5; }
/* phones: the pet sits just above the yeonbucks box, however tall it is (the leaderboard link can wrap to a second line) */
@media (max-width: 40rem) {
  .pet { bottom: calc(var(--bar-height) + var(--yb-h, 2.2rem) + 1rem); }
  body.has-mini .pet { bottom: calc(var(--bar-height) + var(--yb-h, 2.2rem) + 5.2rem); }
}
.cz-lb-unit { font-weight: 400; }
.lb-card .cz-lb-unit { font-size: 0.7rem; }
.lb-card .cz-lb-list li { gap: 4px; }

/* the secret room: "return to the fair" at the top */
.page[data-page="secret-room"] { position: relative; }
.sr-back { display: block; margin-top: 0.7rem; white-space: nowrap; font-size: 0.8rem; }

/* secret room on phones: room at the bottom so you can scroll the last stop (the library) up above the yeonbucks / leaderboard row */
@media (max-width: 44rem) {
  .page[data-page="secret-room"] .sr { padding-bottom: calc(var(--yb-h, 3rem) + 1rem); }
}

/* the door icon credit sits above the yeonbucks / inventory / leaderboard row, whatever size that is */
.sr-credit { bottom: calc(var(--bar-height) + var(--yb-h, 2.2rem) + 0.8rem); }
@media (max-width: 44rem) { .sr-credit { bottom: calc(var(--bar-height) + var(--yb-h, 2.2rem) + 0.8rem); } }

/* the menu: two columns, four rows (the secret room is the last one when unlocked) */
.menu-wrap { width: min(24rem, 100%); }
.menu-card { display: grid; grid-template-columns: repeat(2, 1fr); width: min(24rem, 100%); }
.menu-card a { display: flex; align-items: center; justify-content: center; min-height: 3.6rem; padding: 0.8rem 0.5rem; }

/* daily reward (home page button + popup) */
.home-daily { display: block; margin: 0.6rem auto 0; position: relative; }
.home-daily-dot { display: inline-block; width: 7px; height: 7px; margin-left: 0.5rem; vertical-align: middle; border-radius: 50%; background: var(--text); }
.home-daily:hover .home-daily-dot, .home-daily:focus-visible .home-daily-dot { background: var(--bg); }
.home-daily-dot[hidden] { display: none; }
.dl-card { width: min(37rem, 100%); text-align: center; }
.dl-sub { margin: 0 0 0.8rem !important; opacity: 0.8; }
.dl-grid { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; }
.dl-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.6rem; padding: 0.4rem 0.2rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.7rem; }
.dl-n { opacity: 0.7; font-size: 0.62rem; }
.dl-amt { font-size: 0.85rem; }
.dl-gift { font-size: 0.58rem; opacity: 0.85; line-height: 1.2; }
.dl-now { border: 2px solid var(--text); }
.dl-done { opacity: 0.45; }
.dl-check { position: absolute; top: 2px; right: 5px; font-size: 0.65rem; }
.dl-claim { min-width: 11rem; }
.dl-claim:disabled { opacity: 0.5; cursor: default; }

/* community: reactions and replies */
.cm-card-open { cursor: pointer; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 0.7rem 0.7rem; }
.cm-react { display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.8rem; line-height: 1; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.6rem; cursor: pointer; }
.cm-react-g { font-size: 1.35rem; line-height: 1; }
.cm-react-add { font-size: 0.68rem; padding: 0.4rem 0.55rem; }
.cm-react-n:empty { display: none; }
.cm-react:hover, .cm-react:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.cm-react-on, .cm-react-on:hover, .cm-react-on:focus-visible { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
.cm-replybtn { margin-left: auto; font: inherit; font-size: 0.7rem; color: inherit; background: none; border: 0; padding: 0.3rem 0.2rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; opacity: 0.8; }
.cm-replybtn:hover, .cm-replybtn:focus-visible { opacity: 1; outline: none; }
.cm-thread-card { width: min(30rem, 100%); padding-top: 2.4rem; }
.cm-thread-card .cm-card { margin: 0 0 1rem; cursor: default; }
.cm-replies { list-style: none; margin: 0 0 1rem; padding: 0; }
.cm-reply { padding: 0.6rem 0.7rem; margin: 0 0 6px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.cm-reply-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; margin: 0; font-size: 0.78rem; }
.cm-reply .cm-card-meta { margin-top: 0.4rem; }
#cm-reply-msg:empty { display: none; }
.cm-picker { position: fixed; z-index: 10001; display: flex; gap: 4px; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.cm-pick { font: inherit; font-size: 1.6rem; line-height: 1; width: 2.6rem; height: 2.6rem; color: inherit; background: var(--bg); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.cm-pick:hover, .cm-pick:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.cm-pick-on, .cm-pick-on:hover, .cm-pick-on:focus-visible { background: var(--text); color: var(--bg); border-color: var(--text); }

/* community: description, + and "check for new" centered */
.cm-intro { margin-left: auto; margin-right: auto; text-align: center; }
.cm-top { justify-content: center; }
.cm-status { text-align: center; }
.cm-reply-open { display: block; margin: 0 auto; }
.cm-reply-dlg { z-index: 45; }
#cm-replies-msg:empty { display: none; }
#cm-replies-msg { text-align: center; margin: 0 0 0.8rem; }

/* community: the add button says what it does */
#cm-add { width: auto; height: auto; padding: 0.55rem 1rem; font-size: 0.8rem; line-height: 1.2; }
#cm-add::after { display: none; }

/* first-visit name prompt (shown when someone enters the arcade) */
#wel { z-index: 60; }
.wel-card { text-align: center; padding-top: 1.2rem; }
.wel-card .cz-lb-title, .wel-card .wel-sub, .wel-card .cz-lb-note { text-align: center; }
.wel-card .wel-sub { margin: 0 0 0.9rem; line-height: 1.5; opacity: 0.8; }
.wel-card input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 0.8rem; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.78rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.wel-card input:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.wel-card .cz-lb-btns { justify-content: center; gap: 0.6rem; }
@media (max-width: 40rem) { .wel-card input { font-size: 16px; } }   /* 16px so phones don't zoom in when you tap it */

/* solid backgrounds for the last boxes and buttons that were see-through */
.shop-buy:disabled, .shop-arrow:disabled, .hy-cell, .shop-prev-glyph, .mb-tab { background-color: var(--bg); }

/* ---------- y2k mouse pointer (bought in the prize shop; shop.js sets data-pointer on <html>; desktop only) ---------- */
.shop-prev-ptr { background: var(--bg); }
.shop-prev-ptr img { height: 1.1rem; width: auto; image-rendering: pixelated; }
@media (hover: hover) and (pointer: fine) {
  html[data-pointer="y2k"], html[data-pointer="y2k"] body { cursor: url("cursors/y2k-normal.cur"), auto; }
  html[data-pointer="y2k"] :is(a, button, [role="button"], [data-href], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"], .arcade-card, .cm-card-open, .home-slide a, .sg-cell, .hy-cell, .inv-opt, .sr-door, .pet-btn):not(:disabled) {
    cursor: url("cursors/y2k-link.cur"), pointer !important;
  }
}

/* prize shop: the secret room key is inverted so it stands out, the halloween exclusive is orange */
.shop-item[data-id="key"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.shop-item[data-id="key"] .shop-prev { background: var(--text); color: var(--bg); border-color: var(--bg); }
.shop-item[data-id="key"] .hy-btn { background: var(--text); color: var(--bg); border-color: var(--bg); }
.shop-item[data-id="key"] .hy-btn:hover, .shop-item[data-id="key"] .hy-btn:focus-visible { background: var(--bg); color: var(--text); }
.shop-item[data-id="key"] .shop-desc, .shop-item[data-id="key"] .shop-note { color: var(--bg); }
.shop-item[data-id="tap-ghost"]:not(.is-on) { background: #ffc07a; color: #1a1a1a; border-color: #d98a2b; }
.shop-item[data-id="tap-ghost"]:not(.is-on) .shop-prev { background: #fff6ea; color: #1a1a1a; border-color: #d98a2b; }
.shop-item[data-id="tap-ghost"]:not(.is-on) .hy-btn { background: #fff6ea; color: #1a1a1a; border-color: #1a1a1a; }
.shop-item[data-id="tap-ghost"]:not(.is-on) .hy-btn:hover:not(:disabled), .shop-item[data-id="tap-ghost"]:not(.is-on) .hy-btn:focus-visible { background: #1a1a1a; color: #ffc07a; }
.shop-item[data-id="tap-ghost"]:not(.is-on) .shop-desc, .shop-item[data-id="tap-ghost"] .shop-note { color: #1a1a1a; }
.shop-item[data-id="tap-ghost"]:not(.is-on) .shop-prev .tap-ghost-svg path:first-child { fill: #fff6ea !important; }

/* ---------- fortune teller (fortune.js) ---------- */
.ft-card { width: min(30rem, 100%); text-align: center; }
.ft-card .ft-sub { margin: 0 0 0.9rem; opacity: 0.8; }
.ft-cards { display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 1rem; }
.ft-cards[hidden], .ft-reveal[hidden] { display: none; }
.ft-pick { flex: 0 1 7.2rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ft-back-art { display: block; width: 100%; color: var(--text); transition: transform 0.2s ease; }
.ft-back-art svg, .ft-face svg { display: block; width: 100%; height: auto; }
.ft-pick:hover .ft-back-art, .ft-pick:focus-visible .ft-back-art { transform: translateY(-6px) rotate(-1.5deg); }
.ft-pick:focus-visible { outline: none; }
.ft-pick-name { font-size: 0.8rem; }
.ft-reveal { display: flex; justify-content: center; margin-bottom: 1rem; perspective: 900px; }
.ft-flip { position: relative; width: min(13.5rem, 78%); aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform 0.7s ease; }
.ft-flip.is-flipped { transform: rotateY(180deg); }
.ft-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--text); }
.ft-back svg { height: 100%; }
.ft-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; box-sizing: border-box; padding: 1.1rem 1rem; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); outline: 1px solid var(--line); outline-offset: -7px; }
.ft-sym { display: block; width: 1.8rem; }
.ft-cat { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.ft-text { font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.ft-yb { margin-top: 0.3rem; font-size: 0.75rem; font-weight: 700; }
.ft-book-btn { margin-top: 0.2rem; }
.ft-book { text-align: left; max-height: 100%; }
.ft-book h3 { margin: 1rem 0 0.4rem; font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.ft-book h3:first-of-type { margin-top: 0.2rem; }
.ft-list { list-style: none; margin: 0; padding: 0; }
.ft-list li { padding: 0.4rem 0.6rem; margin: 0 0 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.78rem; line-height: 1.4; }
.ft-list .ft-locked { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .ft-flip { transition: none; } .ft-back-art { transition: none; } }

/* ---------- Lost and found finds (the room is lostfound.js, the items are in shop.js) ---------- */
/* pet accessories: they sit on top of the pet in the corner. Each one has its own spot (hat on the head, bow by the ear, soda down low) */
.pet-btn .pet-acc { position: absolute; inset: 0; pointer-events: none; }
.pet-btn .pet-acc .acc-svg { position: absolute; inset: auto; height: auto; color: var(--text); }
.pet-btn .pet-acc[data-acc="hat"] .acc-svg { left: 48%; top: -14%; width: 64%; transform-origin: 50% 85%; transform: translateX(-50%) rotate(calc(-6deg + var(--rot, 0deg))) scale(var(--sc, 1)); }
.pet-btn .pet-acc[data-acc="bow"] .acc-svg { right: 14%; top: 4%; width: 34%; transform: rotate(calc(14deg + var(--rot, 0deg))) scale(var(--sc, 1)); }
.pet-btn .pet-acc[data-acc="soda"] .acc-svg { left: -14%; bottom: 2%; width: 34%; transform: rotate(calc(-8deg + var(--rot, 0deg))) scale(var(--sc, 1)); }

/* cheese tap + cheese trail + rainbow trail */
.cheese-svg { display: block; width: 100%; height: 100%; color: #1a1a1a; }   /* yellow cheese, dark outline (so it reads in dark mode too) */
.tap-cheese { width: 22px; height: 20px; animation-name: tap-petal; animation-duration: 1s; animation-timing-function: ease-out; }
.trail-cheese { width: 18px; height: 16px; }
.trail-rainbow { color: #f48fb1; }

/* the lost and found pop-up */
.lf-card { width: min(24rem, 100%); text-align: center; }
.lb-card .lf-sub { margin: 0 0 0.8rem; font-size: 0.8rem; opacity: 0.8; }
.lf-pic { display: flex; align-items: center; justify-content: center; height: 6.5rem; margin: 1.1rem auto 1.4rem; color: var(--text); }
.lf-pic svg { display: block; height: 100%; width: auto; max-width: 11rem; }
.lf-pic .tap-ghost-svg, .lf-pic .cheese-svg { height: 85%; }
.lf-pic.lf-pop { animation: lf-pop 0.55s ease-out; }
@keyframes lf-pop { from { opacity: 0; transform: translateY(14px) scale(0.6) rotate(-6deg); } 65% { opacity: 1; transform: translateY(-4px) scale(1.08); } to { transform: none; } }
.lf-big { font-size: 1.9rem; font-weight: 700; letter-spacing: 0.02em; }
.lf-big { text-align: center; }
.lf-pic:has(.lf-big) { height: 4rem; margin: 0.6rem auto 0.9rem; }
.lf-big-long { font-size: 1.05rem; line-height: 1.3; white-space: nowrap; display: block; text-align: center; margin: 0 auto; }
.lf-rainbow { background: linear-gradient(90deg, #f06292, #ffb74d, #e0c200, #66bb6a, #42a5f5, #ab47bc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-card .lf-name { margin: 0 0 0.3rem; font-weight: 700; font-size: 0.95rem; }
.lb-card .lf-text { text-align: center; margin: 0 auto 2.8rem; max-width: 20rem; font-size: 0.8rem; line-height: 1.5; min-height: 1.2em; overflow-wrap: anywhere; }
.lf-remy { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.78rem; }
.lf-remy[hidden], #lf-go[hidden] { display: none; }
.lf-remy-art { position: relative; display: block; width: 2.6rem; height: 2.6rem; }
.lf-remy-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lf-remy-art .pf { fill: var(--bg); }
.lf-remy-art .pl { fill: var(--text); }
.lf-list-btn { margin-top: 0.2rem; }
.lf-book { text-align: left; max-height: 100%; overflow: auto; }
.lf-list { list-style: none; margin: 0; padding: 0; }
.lf-list li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.28rem 0.6rem; margin: 0 0 3px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.78rem; }
.lf-list .lf-locked { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .lf-pic.lf-pop { animation: none; } }

/* accessories: thicken the thin icon lines so they match the pets' line weight (a steady 1.2px on top of the icon, whatever the size) */
.acc-svg path[fill="currentColor"] { stroke: currentColor; stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
@media (max-width: 40rem) { .acc-svg path[fill="currentColor"] { stroke-width: 1px; } }
/* the soda has lots of tiny details, so its lines are lighter */
.pet-acc[data-acc="soda"] .acc-svg path[fill="currentColor"] { stroke-width: 0.6px; }
@media (max-width: 40rem) { .pet-acc[data-acc="soda"] .acc-svg path[fill="currentColor"] { stroke-width: 0.5px; } }
/* pointing at a pet: the whole body (drawing + accessory) hops if it has one drawing (everyone but the dog, cat and bunny, who change pose and hold still) */
.pet-btn:hover .pet-body, .pet.is-up .pet-body { animation: none; }
.pet:is([data-kind="koala"], [data-kind="frog"], [data-kind="panda"], [data-kind="fish"], [data-kind="chicken"], [data-kind="elephant"], [data-kind="goat"], [data-kind="hamster"], [data-kind="hedgehog"], [data-kind="mouse"], [data-kind="turtle"], [data-kind="rat"]) .pet-btn:hover .pet-body,
.pet:is([data-kind="koala"], [data-kind="frog"], [data-kind="panda"], [data-kind="fish"], [data-kind="chicken"], [data-kind="elephant"], [data-kind="goat"], [data-kind="hamster"], [data-kind="hedgehog"], [data-kind="mouse"], [data-kind="turtle"], [data-kind="rat"]).is-up .pet-body { animation: pet-hop .55s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pet-btn:hover .pet-body, .pet.is-up .pet-body { animation: none !important; } }
/* when the dog, cat and bunny change pose (hover / talking), the hat and bow move to where their head is now */
.pet-acc[data-acc="hat"], .pet-acc[data-acc="bow"], .pet-acc[data-acc="soda"] { transform: translate(calc(var(--ox, 0%) + var(--px, 0%)), calc(var(--oy, 0%) + var(--py, 0%))); }
/* where each accessory goes on each pet. Per pet and accessory you can set:
   --ox / --oy  move sideways / down, in % of the pet's size (negative = left / up)
   --rot        extra tilt in degrees (negative = tilts left, positive = tilts right)
   --sc         size (1 = normal, 0.9 = a bit smaller, 1.1 = a bit bigger)
   Pets that aren't listed use the normal spot. */
/* witch hat */
.pet[data-kind="dog"] .pet-acc[data-acc="hat"] { --ox: 9%; --oy: -17%; --rot: -20deg; }
.pet[data-kind="dog"] .pet-btn:hover .pet-acc[data-acc="hat"], .pet[data-kind="dog"].is-up .pet-acc[data-acc="hat"] { --ox: 0%; --oy: 0%; --rot: 0deg; }
.pet[data-kind="cat"] .pet-acc[data-acc="hat"] { --oy: -3%; --rot: 5deg; }
.pet[data-kind="bunny"] .pet-acc[data-acc="hat"] { --rot: 5deg; }
.pet[data-kind="frog"] .pet-acc[data-acc="hat"] { --oy: -16%; --rot: 6deg; }
.pet[data-kind="panda"] .pet-acc[data-acc="hat"] { --sc: 1.1; --rot: 6deg; }
.pet[data-kind="fish"] .pet-acc[data-acc="hat"] { --ox: -18%; --oy: 16%; }
.pet[data-kind="chicken"] .pet-acc[data-acc="hat"] { --rot: 10deg; }
.pet[data-kind="hedgehog"] .pet-acc[data-acc="hat"] { --oy: -3%; }
.pet[data-kind="mouse"] .pet-acc[data-acc="hat"] { --ox: 5%; --oy: -12%; --rot: 28deg; --sc: .85; }
.pet[data-kind="turtle"] .pet-acc[data-acc="hat"] { --ox: -24%; --oy: 3%; --sc: 0.77; --rot: 18deg; }
.pet[data-kind="rat"] .pet-acc[data-acc="hat"] { --oy: -14%; --rot: 14deg; }
/* bow */
.pet[data-kind="dog"] .pet-acc[data-acc="bow"] { --ox: -23%; --rot: -10deg; }
.pet[data-kind="bunny"] .pet-acc[data-acc="bow"] { --ox: -3%; --oy: 7%; }
.pet[data-kind="frog"] .pet-acc[data-acc="bow"] { --ox: -7%; --rot: -5deg; }
.pet[data-kind="fish"] .pet-acc[data-acc="bow"] { --ox: -28%; --oy: 18%; }
.pet[data-kind="chicken"] .pet-acc[data-acc="bow"] { --oy: 7%; }
.pet[data-kind="elephant"] .pet-acc[data-acc="bow"] { --ox: -3%; --oy: 7%; }
.pet[data-kind="goat"] .pet-acc[data-acc="bow"] { --oy: 7%; }
.pet[data-kind="hamster"] .pet-acc[data-acc="bow"] { --oy: 7%; }
.pet[data-kind="hedgehog"] .pet-acc[data-acc="bow"] { --oy: 4%; }
.pet[data-kind="mouse"] .pet-acc[data-acc="bow"] { --oy: 4%; }
.pet[data-kind="turtle"] .pet-acc[data-acc="bow"] { --ox: -33%; --oy: 17%; }
/* soda */
.pet[data-kind="dog"] .pet-acc[data-acc="soda"] { --ox: 99%; --rot: 16deg; }
.pet[data-kind="fish"] .pet-acc[data-acc="soda"], .pet[data-kind="elephant"] .pet-acc[data-acc="soda"], .pet[data-kind="turtle"] .pet-acc[data-acc="soda"] { --ox: -9%; }
.pet[data-kind="dog"] .pet-btn:hover, .pet[data-kind="dog"].is-up { --px: -3%; --py: 5%; }
.pet[data-kind="cat"] .pet-btn:hover, .pet[data-kind="cat"].is-up { --px: 11%; --py: 25%; }
.pet[data-kind="bunny"] .pet-btn:hover, .pet[data-kind="bunny"].is-up { --px: 0%; --py: 6%; }

/* the speech bubble sits above the witch hat instead of underneath it */
.pet[data-acc="hat"] .pet-bubble { bottom: calc(100% + 1.4rem); }
@media (max-width: 40rem) { .pet[data-acc="hat"] .pet-bubble { bottom: calc(100% + 1.2rem); } }

/* the lost and found box: drawn a bit smaller so its lines are thinner (and there's room above and below) */
.lf-pic .lf-box { height: 76%; }

/* phones: "how it works" and "leaderboard" sit together on the row above the yeonbucks / inventory row */
.yb-break { display: none; }
@media (max-width: 40rem) {
  .yb-row .yb-where { order: -2; }
  .yb-row .yb-break { display: block; order: -1; flex: 0 0 100%; height: 0; }
}

/* the little carousel's size (merry.js); smaller screens shrink it below */
.home-mid { --merry-w: clamp(9rem, calc(100svh - 38rem), 15rem); }   /* (the page-name bar under it is the same width, see --merry-w) */
.home-merry { width: var(--merry-w); max-width: 100%; margin: 0 auto 0.9rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- home on small phones / in-app browsers (discord etc. have less screen height) ----------
   everything is a bit smaller, and the page can scroll so the last buttons always end up above the door and the yeonbucks box */
@media (max-width: 1100px) and (pointer: coarse) {
  body.has-yb .page[data-page="home"].active { overflow-y: auto; align-items: safe center; padding: clamp(1.8rem, calc(100svh - 50rem), 4.8rem) 1rem 9rem; }   /* tablets: the door sits bottom left above one row of buttons */
  body.has-mini.has-yb .page[data-page="home"].active { padding-top: 8.3rem; padding-bottom: 12.5rem; }
  .home-mid { --merry-w: clamp(8.5rem, calc(100svh - 33rem), 15rem); }
}
@media (max-width: 40rem) and (pointer: coarse) {
  body.has-yb .page[data-page="home"].active { padding: clamp(2rem, calc(2rem + (100svh - 40rem) * 0.3), 7.2rem) 1rem 11.5rem; }   /* phones: two rows of buttons under the door */
  body.has-mini.has-yb .page[data-page="home"].active { padding-top: clamp(2rem, calc(2rem + (100svh - 42rem) * 0.4), 10.7rem); padding-bottom: 15rem; }
  .home-mid { --merry-w: clamp(8.5rem, calc(100svh - 43rem), 15rem); }
}
@media (max-width: 40rem) and (pointer: coarse) and (max-height: 44rem) { .home-mid { --merry-w: 7.3rem; } }   /* short phones: a slightly smaller carousel, so there's still room for the flags above the title */
@media (max-height: 46rem) {
  .home-title { font-size: 1.25rem; margin-bottom: 0.3rem; }
  .home-sub { margin-bottom: 1rem; }
  .home-sub-below { margin-top: 1rem; font-size: 0.72rem; line-height: 1.5; padding: 0.3rem 0.6rem; }
  .home-slide-label { font-size: 0.9rem; }
  .home-random { padding: 0.4rem 0.9rem; font-size: 0.78rem; }
  .home-daily { margin-top: 0.45rem; }
}

/* the "hear my thoughts..." line: on phones it flows on its own instead of breaking after "moodboard," */
@media (max-width: 40rem) {
  .home-br { display: none; }
  .home-sub-below { text-wrap: balance; }
}

/* "???" in the menu: the secret room's spot before it's unlocked (not clickable) */
.menu-card a.menu-locked { opacity: 0.55; cursor: default; pointer-events: none; }

/* ---------- the little carousel on the home page (see merry.js) ---------- */
.mg { display: block; width: 100%; height: auto; overflow: visible; }
.mg path, .mg rect, .mg polygon, .mg circle { fill: var(--text); stroke: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mg .mc1 { fill: var(--bg); stroke: var(--text); stroke-width: 1px; }   /* white shapes with a dark line */
.mg .mc2 { fill: var(--bg); }
.mg .mc3 { fill: var(--text); stroke: var(--bg); stroke-width: 1px; }   /* dark shapes with a light line */
.mg clipPath * { fill: none; stroke: none; }
.mg .mg-horse path { vector-effect: none; stroke-width: calc(var(--hsw, 4px) / var(--k, 1)); }   /* plain line so it can squash flat cleanly (merry.js sets the width) */
.mg-stripes { animation: mg-up var(--t, 4s) linear infinite; }
.mg-stripes.mg-down { animation-name: mg-down; }
@keyframes mg-up { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--p))); } }
@keyframes mg-down { from { transform: translateY(0); } to { transform: translateY(var(--p)); } }
@media (prefers-reduced-motion: reduce) { .mg-stripes { animation: none; } }

/* the box with the page names is now a slim bar under the carousel */
.home-slides { aspect-ratio: auto; flex: 0 1 14rem; height: 2.8rem; }
.home-slide a { padding: 0 1rem; gap: 0; }

/* the page-name bar under the carousel: smaller (about 0.8x) */
.home-carousel { gap: 0.55rem; }
.home-arrow { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; }
.home-slides { flex: 0 1 12rem; height: 2.2rem; }
.home-slide a { padding: 0 0.6rem; }
.home-slide-label { font-size: 0.78rem; white-space: nowrap; }

/* home layout: the title and description above, the carousel exactly in the vertical middle, the buttons below */
.home { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; }
.home-top { align-self: end; }
.home-bottom { align-self: start; width: 100%; }
.home-mid { width: 100%; }
.home .home-top .home-sub { margin-bottom: 0.9rem; }
.home .home-sub-below { margin: 0 auto 1.6rem; }
.home .home-merry { margin-bottom: 0.9rem; }
@media (max-height: 46rem) { .home .home-sub-below { margin-bottom: 1rem; } }
@media (min-width: 1101px) {
  body.has-yb .page[data-page="home"].active { padding: 4.5rem 1.5rem; }   /* the same space above and below, so the carousel is exactly in the middle of the screen */
}

/* ---------- bottom bar: "[date] ○ credits" and the credits pop-up (credits.js) ---------- */
.bar-dot { margin: 0 0.5rem; opacity: 0.6; }
.credits-link { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.credits-link:hover, .credits-link:focus-visible { opacity: 0.6; outline: none; }
.credits-card { text-align: left; width: min(26rem, 100%); }
.credits-note { opacity: 0.65; margin: 0 0 0.8rem !important; font-size: 0.72rem; text-align: center; }
.credits-list { list-style: none; margin: 0; padding: 0; }
.credits-list li { padding: 0.45rem 0; border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent); font-size: 0.74rem; line-height: 1.45; }
.credits-list li:first-child { border-top: 0; }
.credits-by { opacity: 0.85; }
.credits-where { display: block; opacity: 0.55; font-size: 0.68rem; }

/* ---------- the small music player: smaller, along the bottom, to the left of the pet (or at the bottom right if there's no pet) ---------- */
.mini {
  top: auto;
  bottom: calc(var(--bar-height) + 0.4rem);
  right: 1rem;
  left: auto;
  max-width: 15rem;
  gap: 0.2rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
}
body:has(#pet:not([hidden])) .mini { right: calc(1rem + 4.2rem + 0.5rem); }
.mini .icon-btn { width: 1.5rem; height: 1.5rem; }
.mini .icon-btn svg { width: 0.8rem; height: 0.8rem; }
.mini-title { margin-right: 0.2rem; }
@media (max-width: 40rem) {
  .mini { left: 1rem; right: 1rem; max-width: none; padding: 0.2rem 0.6rem; }
  body:has(#pet:not([hidden])) .mini { right: calc(1rem + 3.4rem + 0.4rem); }
  .mini-title { flex: 1 1 auto; }
  /* the pet goes back to the bottom right corner (the yeonbucks box is on the left, and the player sits between them) */
  .pet, body.has-mini .pet { bottom: calc(var(--bar-height) + 0.3rem); }
  body.has-mini.has-yb .page { padding-bottom: 7rem; }
}

/* the small player is just the three buttons (back, play / pause, skip) */
.mini-title { display: none; }
.mini { padding: 0.15rem 0.3rem; gap: 0.1rem; }
.mini .icon-btn { width: 1.8rem; height: 1.8rem; }
.mini .icon-btn svg { width: 0.9rem; height: 0.9rem; }
@media (max-width: 40rem) {
  .mini, body:has(#pet:not([hidden])) .mini { left: 1rem; right: auto; }
  /* phones: a smaller player, so it doesn't crowd the buttons above it */
  .mini { padding: 0.1rem 0.2rem; gap: 0; }
  .mini .icon-btn { width: 1.45rem; height: 1.45rem; }
  .mini .icon-btn svg { width: 0.75rem; height: 0.75rem; }
}

/* "randomize my stay" and "daily reward": a bit smaller */
.home .home-random { padding: 0.4rem 0.9rem; font-size: 0.7rem; }
.home .home-random.home-daily { margin-top: 0.4rem; }
.home .home-daily-dot { width: 6px; height: 6px; margin-left: 0.4rem; }

/* ---------- the updates page (updates.js) and its menu button ---------- */
.menu-card a.menu-wide { grid-column: 1 / -1; }
.updates-day { margin: 0 0 1.6rem; }
.updates-date { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; }
.updates-items { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1.6; }
.updates-items li { position: relative; padding-left: 1.1rem; }
.updates-items li::before { content: "*"; position: absolute; left: 0; }

/* updates pop-up list */
#updates-pop .updates-list { text-align: left; }
#updates-pop .updates-day:last-child { margin-bottom: 0; }

/* casino leaderboard box shows everyone: on computers it scrolls inside itself if the list gets taller than the machine */
@media (min-width: 701px) { .cz-lb { max-height: calc(100% - 12px); overflow-y: auto; } }

/* the stripes on the carousel poles are moved by merry.js now (so they stay in step when it spins faster) */
.mg-stripes, .mg-stripes.mg-down { animation: none !important; }

/* narrow windows on a computer (mouse, not touch): keep the home page centered like on a wide screen instead of shifting everything up;
   if the window is very short, the page scrolls instead */
@media (max-width: 1100px) and (pointer: fine) {
  body.has-yb .page[data-page="home"].active { overflow-y: auto; align-items: safe center; padding: 4.5rem 1rem; }
}

/* ---------- the tarot card drawings (fortune-cards.js): lines and fills follow light / dark mode ---------- */
.ft-back-art svg, .ft-back svg { color: var(--text); }
.ftx-text { font-family: var(--font-mono); font-size: 30px; fill: currentColor; stroke: none; }
.ftx-fill { fill: var(--bg); stroke: currentColor; }
.ftx-bg { fill: var(--bg); }
.ftx-line { fill: none; stroke: currentColor; }
.ftx-dash { fill: none; stroke: currentColor; stroke-dasharray: 12; }
.ftx-fill, .ftx-line, .ftx-dash { vector-effect: non-scaling-stroke; }
.ftx-fill, .ftx-line, .ftx-dash { stroke-width: 0.8px; stroke-linejoin: round; }
.ft-flip { aspect-ratio: 468 / 824; width: min(12rem, 70%); }
.ft-pick { flex: 1 1 0; max-width: 7.2rem; }
.ft-back-art svg { width: 100%; height: auto; overflow: visible; }

/* bigger tarot cards */
.ft-card { width: min(37rem, 100%); }
.ft-cards { gap: 1rem; }
.ft-pick { max-width: 10rem; }
.ft-flip { width: min(16rem, 74%); }
@media (max-width: 40rem) { .ft-cards { gap: 0.4rem; } .ft-card { padding-left: 0.6rem; padding-right: 0.6rem; } }

/* the fortune teller box and its cards are bigger */
.ft-card { width: min(44rem, 100%); }
.ft-cards { gap: 1rem; }
.ft-pick { max-width: 12rem; }
.ft-flip { width: min(16rem, 70%); }
@media (max-width: 40rem) {
  .ft-card { padding-left: 0.5rem; padding-right: 0.5rem; }
  .ft-cards { gap: 0.4rem; }
}

/* smaller screens: smaller cards in the fortune teller */
@media (max-width: 60rem) {
  .ft-card { width: min(36rem, 100%); }
  .ft-pick { max-width: 8rem; }
  .ft-flip { width: min(13rem, 70%); }
}
@media (max-width: 40rem) {
  .ft-card { padding-left: 1rem; padding-right: 1rem; }
  .ft-cards { gap: 0.6rem; }
  .ft-pick { max-width: 5.8rem; }
  .ft-flip { width: min(9.5rem, 58%); }
}

/* spread the tarot cards out more */
.ft-cards { justify-content: space-evenly; gap: 1.5rem; }
@media (max-width: 60rem) { .ft-cards { gap: 1.2rem; } }
@media (max-width: 40rem) { .ft-cards { gap: 0.8rem; } }


/* ----- the secret door (my own drawing): simple one small, detailed one big ----- */
.sr-art { display: block; overflow: visible; --dw: .64px; }
.sr-art * { vector-effect: non-scaling-stroke; stroke-width: var(--dw); }
.sr-art path:not([class]) { fill: var(--text); stroke: none; }
.sr-art g[class] path:not([class]) { stroke: none; }
.sr-art .ds1, .sr-art .dd1 { fill: none; stroke: var(--bg); }
.sr-art .ds2, .sr-art .dd2 { fill: var(--bg); stroke: var(--text); }
.sr-art .ds3, .sr-art .dd3 { fill: none; stroke: var(--text); }
.sr-art .ds4, .sr-art .dd4 { fill: var(--text); stroke: var(--bg); }
.sr-art .ds8, .sr-art .dd10 { fill: var(--bg); stroke: none; }
.sr-art .dd5, .sr-art .dd6 { fill: none; stroke: var(--text); stroke-dasharray: 1.6 1.6; }
.sr-art [class*="1"][stroke-linecap] { stroke-linecap: round; }
.sr-door svg.sr-art { height: 100%; width: auto; }
.sr-door-icon.sr-art { --dw: .4px; }
.sr-door-icon.sr-art-simple { fill: none; }
.sr-door.sr-door-inline { height: 11rem; margin-top: 1.8rem; }
.sr-door.sr-door-inline svg.sr-art { --dw: .85px; }
@media (max-width: 40rem) { .sr-door.sr-door-inline { height: 8.5rem; } }
.sr-door.sr-door-inline { opacity: 1; }

@media (min-width: 40.01rem) {
  .sr-door.sr-door-corner { height: 8.8rem; }
  .sr-door.sr-door-corner svg.sr-art { --dw: .85px; }
}

/* updates pop-up: the list scrolls when it gets long */
#updates-pop .updates-list { max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .4rem; }

/* shop + rare items shop on phones: leave room at the bottom (the yeonbucks box and music player sit on top of it) so the last items can scroll up above them */
@media (max-width: 40rem) {
  .page[data-page="shop"] .shop-wrap, .page[data-page="rare-shop"] .shop-wrap { margin-bottom: 5rem; }
  body.has-mini .page[data-page="shop"] .shop-wrap, body.has-mini .page[data-page="rare-shop"] .shop-wrap { margin-bottom: 9rem; }
}

/* the prize shop title is my hanging sign drawing */
.shop-sign { margin: 0; line-height: 0; font-weight: 700; }
.shop-sign { --sg: 13rem; }   /* --sg = height of the sign itself; the chain above it is extra and runs up under the flags */
.shop-sign svg { display: block; height: calc(var(--sg) * 753 / 494); width: auto; margin: calc(var(--lights-h) - var(--sg) * 259 / 494) auto 0; overflow: visible; }
.shop-sign path, .shop-sign rect, .shop-sign circle { fill: var(--text); stroke: none; vector-effect: non-scaling-stroke; }
.shop-sign .ps1 { fill: none; stroke: var(--text); stroke-width: 1px; stroke-dasharray: 3 3; }
.shop-sign .ps2 { fill: var(--bg); stroke: var(--text); stroke-width: 1px; }
.shop-sign .ps3 { fill: var(--text); stroke: var(--bg); stroke-width: 1px; }
.shop-sign text { font-family: inherit; font-size: 40.61px; font-weight: 700; }
.shop-sign .ps4 { fill: var(--text); }
.shop-sign .ps5 { fill: var(--bg); }
@media (max-width: 40rem) {
  .shop-sign { --sg: 10.5rem; }
  /* the sign stays pinned under the flags (like them); the page itself starts below it, so only yeonbucks and lower scroll */
  .shop-sign { height: 0; }
  .shop-sign svg { position: fixed; top: calc(var(--bar-height) + var(--lights-h) - var(--sg) * 259 / 494); left: 50%; margin: 0; transform: translateX(-50%); z-index: 2; pointer-events: none;
    clip-path: inset(calc(var(--sg) * 259 / 494 - var(--lights-h)) 0 0 0); }
  .page.active:has(.shop-sign) { top: 10.5rem; }
  /* a soft fade where the page slides out under the sign, instead of a hard edge */
  .shop-sign::after { content: ""; position: fixed; left: 0; right: 0; top: calc(var(--bar-height) + var(--lights-h) + var(--sg)); height: 1.1rem; z-index: 3; pointer-events: none; background: linear-gradient(var(--bg), transparent); }
}

/* the sign hangs from the very top of the page, with the back link and the rest underneath it */
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) { padding-top: 0; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-wrap { display: flex; flex-direction: column; align-items: center; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-head { order: -1; margin: 0 0 1.2rem; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-wrap > .hy-back { margin-top: 0.3rem; }

/* a tighter top so the items are higher up the page */
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 1.2rem; margin-top: 0.3rem; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-bar p { margin: 0; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have { flex-direction: row; align-items: baseline; gap: 0.4rem; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have strong { font-size: 1.4rem; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-msg { margin: 0; min-height: 0.8em; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-awning { height: clamp(2rem, 5vw, 3rem); }
/* ---------- the redesigned prize shop (her drawing): signpost on the left, striped shop on the right ---------- */
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-side { display: contents; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-side > .hy-back { order: 0; }
.shop-post, .shop-pole { display: none; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) #sr-door-shop { flex: none; order: 9; }

/* the sign drawing: black = text, white = bg, lines stay 1px */
.shop-post * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.shop-post :is(path, rect, circle, polygon):not([class]) { fill: var(--text); stroke: none; }
.shop-post .pp3 { fill: var(--bg); stroke: var(--text); }
.shop-post .pp4 { fill: var(--bg); stroke: none; }
.shop-post .pp7 { fill: none; stroke: var(--bg); }
.shop-post .pp8 { fill: none; stroke: var(--text); stroke-dasharray: 6 6; }
.shop-post .pp9 { fill: none; stroke: var(--text); }
.shop-post .pp10 { fill: var(--text); stroke: var(--bg); }
.shop-post text { font-family: inherit; font-size: 36px; font-weight: 700; stroke: none; }
.shop-post .pp1 { fill: var(--bg); }
.shop-post .pp2 { fill: var(--text); }

/* the awning and the framed shop (all screen sizes) */
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-store { width: 100%; }
.shop-tent { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: -4.53%; position: relative; z-index: 1; pointer-events: none; }
.shop-tent .tk { fill: var(--text); stroke: var(--text); stroke-width: 1px; stroke-linejoin: miter; }
.shop-tent .tk > :not(.tw) { vector-effect: non-scaling-stroke; }
.shop-tent .tw { fill: var(--bg); stroke: var(--text); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.shop-tent polygon.tw, .shop-tent path.tw { vector-effect: non-scaling-stroke; }
.shop-tent .tw path { vector-effect: non-scaling-stroke; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body { position: relative; width: 92.4%; margin: 0 auto; box-sizing: border-box; padding: 6.7% 5.5% 4%; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 1rem 1rem; background: var(--bg); }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body::before { content: ""; position: absolute; inset: 0 1.6% 2.3% 1.6%; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 0.7rem 0.7rem; pointer-events: none; }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-grid { --gx: 0.6rem; gap: 0.6rem var(--gx); }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-item { flex-basis: calc((100% - 2 * var(--gx)) / 3); }
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-pager { margin-top: 1.2rem; gap: 2rem; }
@media (max-width: 40rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-item { flex-basis: calc((100% - var(--gx)) / 2); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body { padding: 8% 5% 5%; }
}

@media (min-width: 61rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) { padding: 0 clamp(1rem, 4vw, 5rem) 0 calc(clamp(1rem, 7vw, 9rem) + 18.2rem); overflow: hidden; }
  /* the whole shop is sized to fit the screen height (shop.js sets --shop-s; the text stays the normal size), so it never scrolls and sits in the middle */
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-wrap { flex: none; width: 1100px; zoom: var(--shop-s, 1); margin: auto 0; padding: 30px 0; display: block; text-align: left; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-head { display: none; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-store { align-self: start; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-grid { --gx: 26px; gap: 12px var(--gx); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-item { aspect-ratio: 276 / 128; justify-content: center; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-desc { font-size: 0.86rem; line-height: 1.15rem; min-height: 0; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-name { font-size: 1.08rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-name small { font-size: 0.7rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-price { font-size: 0.9rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-buy { font-size: 0.9rem; padding: 0.25rem 1.2rem; margin-top: 0.25rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-prev { height: 2.4rem; margin-bottom: 0.1rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-item { gap: 0.15rem; padding: 0.4rem 0.6rem 0.45rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-pager { font-size: 0.9rem; margin-top: 0.9rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-arrow { font-size: 1rem; padding: 0.2rem 1rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body { padding: 6.6% 4.3% 2.4%; }

  /* the left side (back link, buttons, signpost, door) is small, not scaled with the shop, and stays at the left edge of the screen */
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-side { position: absolute; left: clamp(1rem, 7vw, 9rem); top: clamp(2rem, 7vh, 5rem); bottom: 0; width: 17rem; zoom: calc(1 / var(--shop-s, 1)); --bw: 1px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto 1fr; align-content: start; align-items: start; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-side > .hy-back { grid-row: 2; grid-column: 1; margin: 0.8rem 0 0; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-bar { display: contents; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have { grid-row: 2; grid-column: 1; margin: 0.3rem 0 0; flex-direction: row; align-items: baseline; gap: 0.4rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have strong { font-size: 1.1rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-inv-row { grid-row: 1; grid-column: 1; width: max-content; max-width: 100%; margin: 0.3rem 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-inv-row .hy-btn { width: 50%; text-align: center; padding: 0.35rem 0.4rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-inv-row .hy-btn:first-child { width: 100%; padding: 0.35rem 0.8rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-msg { grid-row: 3; grid-column: 1; margin: 0.4rem 0 0; min-height: 1em; }
  .shop-post { display: block; grid-row: 5; grid-column: 1; width: 88%; height: auto; overflow: visible; margin-top: 8%; }
  /* the pole: runs from the top of the sign down to the bottom of the page */
  .shop-pole { display: block; grid-row: 5 / 7; grid-column: 1; justify-self: start; align-self: stretch; width: 4.95%; margin-top: 8%; position: relative; box-sizing: border-box; border: 1px solid var(--text); border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--text) 0 84%, var(--bg) 84%); }
  .shop-pole::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: 100vh; border: 1px solid var(--text); border-top: 0; background: inherit; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) #sr-door-shop { grid-row: 6; grid-column: 1; align-self: end; justify-self: start; position: relative; left: auto; bottom: auto; transform: none; z-index: 1; width: 45.6%; height: auto; margin: 0 0 1rem 29.1%; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) #sr-door-shop svg.sr-art { width: 100%; height: auto; }
}

/* the shop is scaled with zoom, so thin lines are made slightly thicker to stay as dark as the rest of the site */
@media (min-width: 61rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) { --bw: calc(1px / var(--shop-s, 1)); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-wrap .hy-btn,
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-item,
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-prev { border-width: var(--bw); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body { border-width: var(--bw); border-top-width: 0; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body::before { border-width: var(--bw); border-top-width: 0; }
  .shop-pole, .shop-pole::after { border-width: var(--bw); }
  .shop-pole { border-bottom-width: 0; }
  .shop-pole::after { border-top-width: 0; }
  .shop-tent .tw, .shop-tent .tk { stroke-width: calc(var(--bw) * 1.8); }
  .shop-post * { stroke-width: calc(var(--bw) * 1.5); }
}

/* the yeonbucks box on the middle of the awning (big screens; phones keep the count next to the buttons) */
.shop-roofbox { display: none; }
@media (min-width: 61rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-store { position: relative; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have { display: none; }
  .shop-roofbox { display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; top: 5.7rem; transform: translate(-50%, -50%); z-index: 2; margin: 0; justify-content: center; padding: 0 2rem; isolation: isolate; min-width: 10.8rem; aspect-ratio: 1.877; box-sizing: border-box; line-height: 1.15; text-align: center; }   /* the ticket art (same as the homepage's) sits behind the count; it keeps its shape and grows evenly, and the number gets smaller as it gets longer */
  .shop-roofbox strong { font-size: 2.1rem; }
  .shop-roofbox strong[data-len="6"], .shop-roofbox strong[data-len="7"] { font-size: 1.7rem; }
  .shop-roofbox strong[data-len="8"], .shop-roofbox strong[data-len="9"] { font-size: 1.4rem; }
  .shop-roofbox strong:is([data-len="10"], [data-len="11"], [data-len="12"], [data-len="13"], [data-len="14"]) { font-size: 1.15rem; }
  .shop-roofbox span { font-size: 0.95rem; }
}

/* prize shop buttons: a slightly heavier outline (desktop), and the greyed-out ones a bit less faded */
@media (min-width: 61rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-wrap .hy-btn { box-shadow: 0 0 0 calc(var(--bw, 1px) * 0.5) var(--line); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-buy:disabled, :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-arrow:disabled { opacity: 0.6; }
}

/* the rare items shop: the "new stock in ..." line sits under the buttons */
.shop-restock { font-size: 0.75rem; opacity: 0.8; }
@media (min-width: 61rem) {
  .page[data-page="rare-shop"] .shop-restock { grid-row: 3; grid-column: 1; margin: 0.6rem 0 0; }
  .page[data-page="rare-shop"] .shop-msg { grid-row: 4; }
}
@media (min-width: 61rem) {
  #rare-items .shop-prev { height: 4.2rem; }
  #rare-items .shop-prev-pet { height: 4.2rem; }
}

/* the rare items shop is narrower and taller: roughly a square (big screens) */
@media (min-width: 61rem) {
  .page[data-page="rare-shop"] .shop-wrap { width: 580px; }
  #rare-items .shop-item { aspect-ratio: 1.12; }
  #rare-items .shop-prev, #rare-items .shop-prev-pet { height: 5rem; }
  #rare-items .shop-desc { font-size: 0.72rem; line-height: 1.05rem; }
  #rare-items .shop-name { font-size: 0.9rem; }
  #rare-items .shop-price { font-size: 0.86rem; }
  #rare-items .shop-buy { font-size: 0.86rem; padding: 0.25rem 1.1rem; margin-top: 0.3rem; }
  .shop-post-rare text { font-size: 26px; }
}
@media (min-width: 61rem) {
  .page[data-page="rare-shop"] .shop-body { padding-bottom: 4.5%; }
  .page[data-page="rare-shop"] .shop-body::before { bottom: 1.6%; }
}
@media (min-width: 61rem) {
  .page[data-page="rare-shop"] .shop-roofbox { top: 3.13rem; padding: 0 1.4rem; min-width: 8.6rem; }
  .page[data-page="rare-shop"] .shop-roofbox strong { font-size: 1.7rem; }
  .page[data-page="rare-shop"] .shop-roofbox strong[data-len="6"], .page[data-page="rare-shop"] .shop-roofbox strong[data-len="7"] { font-size: 1.35rem; }
  .page[data-page="rare-shop"] .shop-roofbox strong[data-len="8"], .page[data-page="rare-shop"] .shop-roofbox strong[data-len="9"] { font-size: 1.1rem; }
  .page[data-page="rare-shop"] .shop-roofbox strong:is([data-len="10"], [data-len="11"], [data-len="12"], [data-len="13"], [data-len="14"]) { font-size: 0.92rem; }
  .page[data-page="rare-shop"] .shop-roofbox span { font-size: 0.8rem; }
}

/* carnival heading font (Shrikhand): titles only, meaning every h1 and h2 on the site.
   the carousel labels and all other text stay Roboto Mono.
   to try another one, change --font-heading here and add it to the google fonts link in index.html.
   (font-synthesis: none keeps single-weight display fonts from getting a fake bold.) */
:root { --font-heading: "Shrikhand", Georgia, serif; }
h1, h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0.01em; font-synthesis: none; }

/* Shrikhand on the prize shop and rare items shop sign text (the sign on the post, and the old hanging sign on small screens)
   and on the yeonbucks number on the roof. the word "yeonbucks" under the number stays Roboto Mono. */
.shop-post text, .shop-sign text { font-family: var(--font-heading); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; }
.shop-roofbox strong { font-family: var(--font-heading); font-weight: 400; font-synthesis: none; }

/* Shrikhand on the fairgrounds welcome title in the confession booth */
.confession-title { font-family: var(--font-heading); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; }

/* Shrikhand on more short titles: leaderboard titles, back room map labels, pop-up titles, end-of-game titles,
   the "back of the fair" name and the entering-the-back-room screen. to undo, delete this block. */
.cz-lb-title, .sr-label-name, .inv-title, .sw-pick-title, .gi-end-title, .sr-name, .sr-load-title { font-family: var(--font-heading); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; }

/* bold labels on the homepage carousel buttons (braindump, confession booth, etc.) */
.home-slide-label { font-weight: 700; }

/* the underlined words in the homepage line are links now */
a.home-ul { color: inherit; }
a.home-ul:hover, a.home-ul:focus-visible { text-decoration-thickness: 2px; outline: none; }

/* a bit smaller homepage title (Shrikhand runs large) */
.home-title { font-size: clamp(1.15rem, 4.2vw, 1.7rem); }
@media (max-height: 46rem) { .home-title { font-size: 1.1rem; } }

/* the card you flip over is the same drawn card as the one you picked, with the reading printed under the picture */
.ft-front { display: block; padding: 0; border: 0; outline: 0; border-radius: 0; background: var(--bg); }
.ft-back { background: var(--bg); }
.ft-front svg { height: 100%; color: var(--text); }
.ft-front .ftx-motif { display: none; }   /* the picture and sparkles in the middle go away once the card is flipped, so the words sit in the middle of the frame */
.ft-note { position: absolute; left: 15%; right: 15%; top: 20%; bottom: 17%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; }
.ft-front .ft-text { font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 40rem) { .ft-note { left: 12%; right: 12%; } .ft-front .ft-text { font-size: 0.78rem; line-height: 1.45; } }

/* lighter outline on the buy buttons in both shops (the other shop buttons keep the darker one) */
:is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-wrap .shop-buy { box-shadow: none; }
/* the secret door sits above the page, so it used to cover the buttons in pop-ups (add yours, owner posts, etc.).
   while one of those pop-ups is open, the middle of the page is lifted above the door, so the door goes behind the pop-up. */
main:has(.mb-add:not([hidden]), .mb-light:not([hidden]), .gi-dialog:not([hidden]), .hy-intro:not([hidden])) { z-index: 31; }

/* every screen (phone, tablet, desktop): lock the page to the visible screen, so the footer and everything stuck to the bottom
   (the yeonbucks box, the pet, the door) stay put together and the page can't bounce on its own.
   only the middle of the page scrolls. */
html, body { overscroll-behavior: none; }
body { position: fixed; inset: 0; height: auto; }
main { overscroll-behavior: contain; }

/* community board: extra room at the bottom (only when the door is showing), so the last post can scroll up above the door and the yeonbucks box */
body:has(#sr-door:not([hidden])) .page[data-page="community"] { padding-bottom: 11rem; }
@media (min-width: 40.01rem) { body:has(#sr-door:not([hidden])) .page[data-page="community"] { padding-bottom: 8rem; } }

/* leaderboard: bigger numbers get commas and room (the box is a bit wider, and the number never gets squeezed or cut off) */
.cz-lb-bal { flex: none; white-space: nowrap; }
.lb-card { width: min(30rem, 100%); }
@media (min-width: 701px) { .cz-lb { width: 190px; } }

/* bigger leaderboard titles (the little box, and the pop-up) */
.cz-lb-title { font-size: 1.1rem; }
.lb-card .cz-lb-title { font-size: 1.5rem; }

/* the wheel result: an optional second line under the bold message, not bold */
.sw-sub { display: block; margin-top: .25rem; font-weight: 400; font-size: .75rem; opacity: .75; }

/* the page-name bar scrolls: the bar itself holds the outline and clips the labels as they slide past each other */
.home-slides { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.home-slide a { border: 0; border-radius: 0; }

/* on bigger screens the page-name bar is exactly as wide as the carousel drawing above it (they share --merry-w). the words shrink a little if the
   bar is narrow, so the longest one ("thoughts to consume") always fits */
@media (min-width: 40.01rem) {   /* (phones keep their own size) */
  .home-slides { flex: 0 0 var(--merry-w); width: var(--merry-w); box-sizing: border-box; }
  .home-slide a { padding: 0 0.3rem; }
  .home-slide-label { font-size: min(0.78rem, calc((var(--merry-w) - 12px) / 11.8)); }
}

/* the bottom "menu" button: a wider (and taller) click area, the text stays the same size */
#btn-menu { padding-left: 3.5rem; padding-right: 3.5rem; align-self: stretch; }
@media (max-width: 40rem) { #btn-menu { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* the homepage title is on two lines now, so it can be bigger */
.home-title { font-size: clamp(1.5rem, 5.8vw, 2.1rem); line-height: 1; }
@media (max-height: 46rem) { .home-title { font-size: 1.5rem; } }

/* phones and tablets (the prize shop and the rare shop): "how to earn more yeonbucks" gets its own line, and "inventory" and
   "leaderboard" sit side by side under it. (big screens have their own layout further up) */
@media (max-width: 60.99rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-inv-row { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 0.5rem; width: 100%; flex: 0 0 100%; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-inv-row .hy-btn:first-child { grid-column: 1 / -1; justify-self: center; }
}

/* phones and tablets, both shops:
   - more room above and below the number of yeonbucks, and between the buttons and the shop
   - "back to the arcade / secret room" sits under the buttons (the order of things in the column is set here)
   - in the rare shop, "inventory" is centered under "how to earn" */
@media (max-width: 60.99rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-head { order: -5; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-bar { order: -4; margin-top: 0.9rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-restock { order: -3; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-side > .hy-back { order: -2; margin: 0.9rem 0 0; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-msg { order: -1; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have { padding: 0.7rem 0; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-awning { margin-top: 1.4rem; }
}

/* phones and tablets, both shops: half the space between the sign and the number of yeonbucks (the space under the number stays) */
@media (max-width: 60.99rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-head { margin-bottom: 0.6rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-bar { margin-top: 0.45rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have { padding-top: 0.35rem; }
}

/* a little less again between the sign and the number of yeonbucks */
@media (max-width: 60.99rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-head { margin-bottom: 0.4rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-bar { margin-top: 0.3rem; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-have { padding-top: 0.25rem; }
}
@media (max-width: 60.99rem) { .page[data-page="rare-shop"] .shop-restock { margin-top: 0.5rem; } }

/* the whole home page block (title, description, carousel, buttons) is centered up and down, not just the carousel.
   (the title is bigger now, so centering only the carousel left the page looking top-heavy) */
.home { display: flex; flex-direction: column; justify-content: safe center; align-items: center; }
.home-top, .home-mid, .home-bottom { align-self: auto; }
.home-mid, .home-bottom { width: 100%; }

/* ---------- homepage extras (see homefun.js): string lights at the top, balloons you can pop ---------- */
:root { --lights-h: 2.8rem; }                       /* the flags along the top, on every page: the page starts just below them */
@media (max-width: 40rem) { :root { --lights-h: 2.2rem; } }
main { margin-top: var(--lights-h); }
.hl-lights {
  position: fixed; top: var(--bar-height); left: 0; right: 0; height: var(--lights-h);
  z-index: 1; overflow: hidden; pointer-events: none;
  display: flex; justify-content: center;
}
.hl-swag { flex: none; height: 100%; width: auto; aspect-ratio: 385.04 / 90; overflow: visible; }
.hl-wire, .hl-w, .hl-k { vector-effect: non-scaling-stroke; stroke-width: 1px; }   /* the same line weight as the border under the top bar */
.hl-wire { fill: none; stroke: var(--line); stroke-miterlimit: 10; }
.hl-w { fill: var(--bg); stroke: var(--line); stroke-miterlimit: 10; }     /* the light flags: the page color with an outline */
.hl-k { fill: var(--text); stroke: var(--bg); stroke-miterlimit: 10; }      /* the dark flags: the text color */

/* the balloons float behind everything on the page (z-index -1 = under the title, carousel and buttons) */
.hb-layer {
  position: fixed; top: var(--bar-height); bottom: var(--bar-height); left: 0; right: 0;
  z-index: -1; overflow: hidden; pointer-events: none;
}
.hb-fx { z-index: 2; }
@media (max-width: 640px) { .hb-layer:not(.hb-fx) { z-index: 0; } }   /* on a phone the balloons float in front of the page (so they're easy to tap), but behind the bottom left box, the door and the flags */
.hb { position: absolute; top: 0; pointer-events: none; }
.hb-sway { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.hb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hb-body, .hb-shine, .hb-string { vector-effect: non-scaling-stroke; stroke-width: 1px; }   /* (the outlines stay a clear thin line, even on the small balloons) */
.hb-string { fill: none; stroke: var(--line); stroke-miterlimit: 10; }
.hb-shine { fill: #f2efe9; stroke: #2a2a2a; stroke-miterlimit: 10; }                  /* the light balloons: the tan of the page, with a dark outline */
.hb-white .hb-body { fill: #f2efe9; stroke: #2a2a2a; stroke-miterlimit: 10; }
.hb-dark .hb-body { fill: #141414; stroke: #f2efe9; stroke-miterlimit: 10; }                 /* the site's dark mode black and its off-white (not pure #000 / #fff) */
:root[data-theme="light"] .hb-dark .hb-body { fill: #2a2a2a; }                             /* and the soft charcoal on light mode */
.hb-tick { position: absolute; width: 1px; height: 0.55rem; margin: -0.275rem 0 0 -0.5px; background: var(--line); border-radius: 2px; pointer-events: none; }
.hb-plus {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: "Shrikhand", serif; font-size: 1.9rem; line-height: 1; color: var(--text);
  text-shadow: -2px 0 var(--bg), 2px 0 var(--bg), 0 -2px var(--bg), 0 2px var(--bg), -2px -2px var(--bg), 2px 2px var(--bg), -2px 2px var(--bg), 2px -2px var(--bg);
}

/* "hide the door" in the inventory: the corner door and the one at the bottom of the prize shop go away (the secret room is still in the menu) */
html.sr-door-off .sr-door { display: none !important; }

/* the category name under the roof of the prize shop (shop.js: SHOP_CATS) */
.shop-cat { margin: 0.35rem 0 1.1rem; text-align: center; font-family: var(--font-heading); font-weight: 400; font-synthesis: none; font-size: 1.4rem; line-height: 1.2; letter-spacing: 0.01em; }

/* the prize shop's pages are all as tall as the tallest one (shop.js sets --shop-body-h), with the arrows along the bottom */
.page[data-page="shop"] .shop-body { display: flex; flex-direction: column; min-height: var(--shop-body-h, 0); }
.page[data-page="shop"] .shop-body .shop-pager { margin-top: auto; }
.page[data-page="shop"] .shop-body .shop-grid { margin-bottom: 1.2rem; }

/* secret room on phones: the flags and the background pattern scroll up with the page (secretroom.js sets --sr-y while you scroll) */
html.sr-scroll .hl-lights { transform: translateY(var(--sr-y, 0px)); }
html.sr-scroll body { background-position: 0 var(--sr-y, 0px); }

/* ---------- home ticket: the welcome sits on a ticket (wavy edges on computers, scalloped on phones) ---------- */
.home-ticket {
  position: relative; isolation: isolate; box-sizing: border-box;
  width: 19rem; max-width: 92%; aspect-ratio: 1.877; margin: 0 auto 0.9rem; padding: 0 14%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; container-type: inline-size;
}
.ht-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.ht-scal { display: none; }
.ht-o { fill: var(--bg); stroke: var(--text); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ht-d { fill: none; stroke: var(--text); stroke-width: 1px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ht-s { fill: none; stroke: var(--text); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ht-star { fill: var(--text); }
.home .home-ticket .home-title { margin: 0 0 0.35rem; font-size: 24px; line-height: 1.05; white-space: nowrap; }   /* (sized to the ticket's width, so "welcome to" / "yeon's carnival" always stay on two lines, whatever the font) */
.home .home-ticket .home-sub { margin: 0; font-size: 0.72rem; line-height: 1.35; }
@media (max-width: 40rem) {
  .home-ticket { width: 13.5rem; aspect-ratio: 1.89; margin-bottom: 0.6rem; padding: 0 8%; }
  .ht-wavy { display: none; }
  .ht-scal { display: block; }
  .home .home-ticket .home-title { font-size: 10.1cqw; margin-bottom: 0.25rem; }
  .home .home-ticket .home-sub { font-size: 0.64rem; }
  .home .home-sub.home-sub-below { font-size: 0.75rem; line-height: 1.5; padding: 0.3rem 0.6rem; margin-bottom: 1.1rem; }   /* (a bit bigger so it's easier to read) */
}

/* ---------- home: the two small buttons sit side by side, and the carousel is a little smaller on shorter computer screens ---------- */
.home .home-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.home .home-bottom .home-random, .home .home-bottom .home-random.home-daily { margin: 0; display: inline-block; }
@media (min-width: 40.01rem) and (pointer: fine) {
  .home-mid { --merry-w: clamp(8.5rem, calc(100svh - 39.5rem), 15rem); }
}

/* the name in "enjoy your stay, [name]!": stays in one piece, so a long name moves to its own second line (and only breaks apart if it's wider than the whole ticket) */
.home-name { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* phones: the inner line of the shop frame is the same distance from the outer one on the sides and the bottom */
@media (max-width: 40rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-body::before { inset: 0 5px 5px 5px; border-radius: 0 0 11px 11px; }
}

/* ---------- arcade on phones: smaller boxes and tighter, even spacing; centered on the page, and (on short screens) kept up above the bottom-left buttons ---------- */
@media (max-width: 40rem) {
  .page[data-page="arcade"] { padding: 0.35rem 1rem 0.35rem; }
  .arcade { margin: auto; }
  .arcade-title { font-size: clamp(1.15rem, 5vw, 1.4rem); margin-bottom: 0.15rem; }
  .arcade-sub { font-size: 0.75rem; }
  .arcade-ring { margin: 0.8rem auto 0.4rem; gap: 0.6rem; }
  .arcade-card { width: min(15rem, 100%); min-height: 2.9rem; padding: 0.3rem 0.5rem; gap: 0.15rem; font-size: 0.8rem; }
  .arcade-tag { font-size: 0.6rem; }
  .arcade-item-prize, .arcade-item-hy { margin: 0; }   /* (so every gap is the same) */
  .arcade-item-prize::before { height: calc(100% + 2rem); }
}
@media (max-width: 40rem) and (max-height: 41rem) {
  .page[data-page="arcade"] { padding-bottom: 8.5rem; }   /* short phones: stay clear of the yeonbucks / inventory buttons at the bottom left */
}

/* help the hyrax on phones: when the little secret door is showing (bottom left), the board ends above it so the door doesn't cover any of the game */
@media (max-width: 40rem) {
  body.has-yb:has(#sr-door:not([hidden])) .page[data-page="hyrax"] { padding-bottom: 9.7rem; }
}

/* scattergories: the name box is narrower and centered (it used to stretch across the whole page) */
.gi-field input#sg-name { width: min(14rem, 100%); margin-left: auto; margin-right: auto; text-align: center; }

.hy-hint strong { font-weight: 700; }

/* ---------- braindump: moodboard tabs as ticket stubs ----------
   Two looks. .mb-strip (added by script.js when every name fits on one line, on wider screens) = one connected strip of tickets.
   Otherwise (phones, or names that wrap) each tab is its own ticket. Needs to stay at the END of this file so it beats the old tab styles. */
.mb-top .mb-tabs { border: none; border-radius: 0; background: none; overflow: visible; }
.mb-top .mb-tab {
  --pl: 40px; --pr: 22px; --il: 5.5px; --ir: 5.5px; --rl: 5px; --rr: 5px;
  --art-l: none; --art-r: none; --art-l-s: none; --art-r-s: none;
  position: relative; box-sizing: border-box; height: auto; min-height: 2.5rem; min-width: 0; width: auto; max-width: 100%;
  padding: 0.55rem var(--pr) 0.55rem var(--pl);
  line-height: 1.3; text-align: left; white-space: normal; overflow-wrap: anywhere; overflow: hidden; text-overflow: clip;
  color: inherit; border: none; border-left: none; border-radius: var(--rl) var(--rr) var(--rr) var(--rl);
  /* the top and bottom lines (the notched ends are drawn by the pieces below) */
  background: linear-gradient(currentColor, currentColor) var(--il) 0 / calc(100% - var(--il) - var(--ir)) 1px no-repeat,
              linear-gradient(currentColor, currentColor) var(--il) 100% / calc(100% - var(--il) - var(--ir)) 1px no-repeat,
              var(--bg);
}
.mb-top .mb-tab + .mb-tab { border-left: none; }
.mb-top .mb-tab::before, .mb-top .mb-tab::after {
  content: ""; position: absolute; top: 0; bottom: 0; background: currentColor; pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.mb-top .mb-tab::before { left: 0; width: var(--pl); -webkit-mask-image: var(--art-l); mask-image: var(--art-l); }
.mb-top .mb-tab::after { right: 0; width: 12px; -webkit-mask-image: var(--art-r); mask-image: var(--art-r); display: none; }
.mb-top .mb-tab:hover { text-decoration: none; }
/* the tab you're on: inked in, drawing flips to the page color */
.mb-top .mb-tab[aria-selected="true"] {
  color: var(--bg); text-decoration: none;
  background: linear-gradient(var(--text), var(--text)) var(--il) 0 / calc(100% - var(--il) - var(--ir)) 1px no-repeat,
              linear-gradient(var(--text), var(--text)) var(--il) 100% / calc(100% - var(--il) - var(--ir)) 1px no-repeat,
              var(--text);
}
.mb-top .mb-tab[aria-selected="true"]::before, .mb-top .mb-tab[aria-selected="true"]::after { background: var(--bg); }
/* ...and the little half circles on the ends (and the punch at a joint) are cut out, showing the page */
.mb-top .mb-tab[aria-selected="true"]::before { -webkit-mask-image: var(--art-l-s); mask-image: var(--art-l-s); }
.mb-top .mb-tab[aria-selected="true"]::after { -webkit-mask-image: var(--art-r-s); mask-image: var(--art-r-s); }

/* separate tickets: notch on both sides, star, and a dashed stub line */
.mb-top .mb-tabs:not(.mb-strip) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: 100%; }
.mb-top .mb-tabs:not(.mb-strip) .mb-tab { --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Cline x1=%2232%22 y1=%223%22 x2=%2232%22 y2=%2237%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%227 5%22/%3E%3C/svg%3E"); --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpath d=%22M.5%2C14a6%2C6 0 0 1 0%2C12Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Cline x1=%2232%22 y1=%223%22 x2=%2232%22 y2=%2237%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%227 5%22/%3E%3C/svg%3E"); --art-r: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M6.5%2C.5a5%2C5 0 0 1 5%2C5V14a6%2C6 0 0 0 0%2C12V34.5a5%2C5 0 0 1-5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --art-r-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M6.5%2C.5a5%2C5 0 0 1 5%2C5V14a6%2C6 0 0 0 0%2C12V34.5a5%2C5 0 0 1-5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpath d=%22M11.5%2C14a6%2C6 0 0 0 0%2C12Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.mb-top .mb-tabs:not(.mb-strip) .mb-tab::after { display: block; }

/* one connected strip: first ticket = left notch, star and holes. joints = dashed tear line with a punch. last = joint, star, holes and the right notch */
.mb-top .mb-tabs.mb-strip { display: inline-flex; flex-wrap: nowrap; gap: 0; width: auto; max-width: none; flex-shrink: 0; }
.mb-strip .mb-tab { flex: 0 0 auto; }
.mb-strip .mb-tab { --pl: 50px; --pr: 14px; --il: 0px; --ir: 0px; --rl: 0px; --rr: 0px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2240%22 viewBox=%220 0 50 40%22%3E%3Cline x1=%2214%22 y1=%220%22 x2=%2214%22 y2=%2212.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Cline x1=%2214%22 y1=%2227.5%22 x2=%2214%22 y2=%2240%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%227%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%222.6 2.6%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3C/svg%3E"); --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2240%22 viewBox=%220 0 50 40%22%3E%3Cline x1=%2214%22 y1=%220%22 x2=%2214%22 y2=%2212.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Cline x1=%2214%22 y1=%2227.5%22 x2=%2214%22 y2=%2240%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%227%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%222.6 2.6%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%226.5%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3C/svg%3E"); white-space: nowrap; overflow: visible; min-height: 2.5rem; height: 2.5rem; padding-top: 0; padding-bottom: 0; line-height: 2.5rem; }
.mb-strip .mb-tab::before { left: -14px; }
.mb-strip .mb-tab:first-child { --pl: 60px; --il: 5.5px; --rl: 5px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpolygon points=%2222.00%2C13.80 23.53%2C17.90 27.90%2C18.08 24.47%2C20.80 25.64%2C25.02 22.00%2C22.60 18.36%2C25.02 19.53%2C20.80 16.10%2C18.08 20.47%2C17.90%22/%3E%3Ccircle cx=%2240%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpath d=%22M.5%2C14a6%2C6 0 0 1 0%2C12Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2222.00%2C13.80 23.53%2C17.90 27.90%2C18.08 24.47%2C20.80 25.64%2C25.02 22.00%2C22.60 18.36%2C25.02 19.53%2C20.80 16.10%2C18.08 20.47%2C17.90%22/%3E%3Ccircle cx=%2240%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab:first-child::before { left: 0; }
.mb-strip .mb-tab:last-child { --pl: 60px; --pr: 24px; --ir: 5.5px; --rr: 5px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cline x1=%2214%22 y1=%220%22 x2=%2214%22 y2=%2212.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Cline x1=%2214%22 y1=%2227.5%22 x2=%2214%22 y2=%2240%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%227%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%222.6 2.6%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cline x1=%2214%22 y1=%220%22 x2=%2214%22 y2=%2212.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Cline x1=%2214%22 y1=%2227.5%22 x2=%2214%22 y2=%2240%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%227%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%222.6 2.6%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%226.5%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --art-r: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M6.5%2C.5a5%2C5 0 0 1 5%2C5V14a6%2C6 0 0 0 0%2C12V34.5a5%2C5 0 0 1-5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --art-r-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M6.5%2C.5a5%2C5 0 0 1 5%2C5V14a6%2C6 0 0 0 0%2C12V34.5a5%2C5 0 0 1-5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpath d=%22M11.5%2C14a6%2C6 0 0 0 0%2C12Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab:last-child::after { display: block; }
.mb-strip .mb-tab:only-child { --pl: 60px; --il: 5.5px; --rl: 5px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpolygon points=%2222.00%2C13.80 23.53%2C17.90 27.90%2C18.08 24.47%2C20.80 25.64%2C25.02 22.00%2C22.60 18.36%2C25.02 19.53%2C20.80 16.10%2C18.08 20.47%2C17.90%22/%3E%3Ccircle cx=%2240%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpath d=%22M.5%2C14a6%2C6 0 0 1 0%2C12Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2222.00%2C13.80 23.53%2C17.90 27.90%2C18.08 24.47%2C20.80 25.64%2C25.02 22.00%2C22.60 18.36%2C25.02 19.53%2C20.80 16.10%2C18.08 20.47%2C17.90%22/%3E%3Ccircle cx=%2240%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab:only-child::before { left: 0; }

/* selected ticket in the strip: clean half-circle cutouts only (no dashed leftovers poking out past its edges) */
.mb-strip .mb-tab[aria-selected="true"]:not(:first-child) { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2240%22 viewBox=%220 0 50 40%22%3E%3Cpath d=%22M14%2C13.5a6.5%2C6.5 0 0 1 0%2C13Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"]:last-child:not(:first-child) { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M14%2C13.5a6.5%2C6.5 0 0 1 0%2C13Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"] + .mb-tab { --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2240%22 viewBox=%220 0 50 40%22%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"] + .mb-tab:last-child { --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"]:not(:last-child) { --art-r-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M12%2C13.5a6.5%2C6.5 0 0 0 0%2C13Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"]:not(:last-child)::after { display: block; }

/* strip: names sit a little closer to the star / holes (art keeps its own width, only the text moves) */
.mb-strip .mb-tab { padding-left: calc(var(--pl) - 8px); padding-right: calc(var(--pr) + 6px); }

/* opened-up list: the old per-tab outline is gone, the ticket art is the outline */
.mb-top .mb-tabs.expanded .mb-tab,
.mb-top .mb-tabs.expanded .mb-tab + .mb-tab { border: none; border-radius: var(--rl) var(--rr) var(--rr) var(--rl); }

/* separate tickets: let the top/bottom lines tuck under the rounded caps so there are no pinholes at the corners */
.mb-top .mb-tabs:not(.mb-strip) .mb-tab { --il: 5px; --ir: 5px; }

/* selected tickets: just the half-circle cutouts, no light outline along the rounded ends */
.mb-top .mb-tabs:not(.mb-strip) .mb-tab[aria-selected="true"] { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M.5%2C14a6%2C6 0 0 1 0%2C12Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Cline x1=%2232%22 y1=%223%22 x2=%2232%22 y2=%2237%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%227 5%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab:first-child[aria-selected="true"], .mb-strip .mb-tab:only-child[aria-selected="true"] { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M.5%2C14a6%2C6 0 0 1 0%2C12Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2222.00%2C13.80 23.53%2C17.90 27.90%2C18.08 24.47%2C20.80 25.64%2C25.02 22.00%2C22.60 18.36%2C25.02 19.53%2C20.80 16.10%2C18.08 20.47%2C17.90%22/%3E%3Ccircle cx=%2240%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-top .mb-tabs .mb-tab[aria-selected="true"][aria-selected="true"] { --art-r-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M11.5%2C14a6%2C6 0 0 0 0%2C12Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }

/* no browser focus ring / tap flash on the tickets: selecting one is just the inverse look */
.mb-top .mb-tab { outline: none; -webkit-tap-highlight-color: transparent; }
.mb-top .mb-tab:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }

/* selected ticket cutouts run right to the edge (no hairline across the flat side of the half circle) */
.mb-top .mb-tabs:not(.mb-strip) .mb-tab[aria-selected="true"] { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M0%2C14H.5a6%2C6 0 0 1 0%2C12H0Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Cline x1=%2232%22 y1=%223%22 x2=%2232%22 y2=%2237%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%227 5%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"]:not(:first-child) { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2240%22 viewBox=%220 0 50 40%22%3E%3Cpath d=%22M13%2C13.5H14a6.5%2C6.5 0 0 1 0%2C13H13Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"]:last-child:not(:first-child) { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M13%2C13.5H14a6.5%2C6.5 0 0 1 0%2C13H13Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab:first-child[aria-selected="true"], .mb-strip .mb-tab:only-child[aria-selected="true"] { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M0%2C14H.5a6%2C6 0 0 1 0%2C12H0Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2222.00%2C13.80 23.53%2C17.90 27.90%2C18.08 24.47%2C20.80 25.64%2C25.02 22.00%2C22.60 18.36%2C25.02 19.53%2C20.80 16.10%2C18.08 20.47%2C17.90%22/%3E%3Ccircle cx=%2240%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2240%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-top .mb-tabs .mb-tab[aria-selected="true"][aria-selected="true"] { --art-r-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2240%22 viewBox=%220 0 12 40%22%3E%3Cpath d=%22M12%2C14H11.5a6%2C6 0 0 0 0%2C12H12Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }

/* middle tickets get the column of little circles between the star and the name, like the first and last ones */
.mb-strip .mb-tab:not(:first-child):not(:last-child) { --pl: 60px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cline x1=%2214%22 y1=%220%22 x2=%2214%22 y2=%2212.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Cline x1=%2214%22 y1=%2227.5%22 x2=%2214%22 y2=%2240%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%223 3%22/%3E%3Ccircle cx=%2214%22 cy=%2220%22 r=%227%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%222.6 2.6%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"]:not(:first-child):not(:last-child) { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpath d=%22M13%2C13.5H14a6.5%2C6.5 0 0 1 0%2C13H13Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-strip .mb-tab[aria-selected="true"] + .mb-tab:not(:last-child) { --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2240%22 viewBox=%220 0 60 40%22%3E%3Cpolygon points=%2234.00%2C13.80 35.53%2C17.90 39.90%2C18.08 36.47%2C20.80 37.64%2C25.02 34.00%2C22.60 30.36%2C25.02 31.53%2C20.80 28.10%2C18.08 32.47%2C17.90%22/%3E%3Ccircle cx=%2252%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2252%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }

/* separate (expanded / phone) tickets: the little circles instead of the dashed line */
.mb-top .mb-tabs:not(.mb-strip) .mb-tab { --pl: 46px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2246%22 height=%2240%22 viewBox=%220 0 46 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Ccircle cx=%2232%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.mb-top .mb-tabs:not(.mb-strip) .mb-tab[aria-selected="true"] { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2246%22 height=%2240%22 viewBox=%220 0 46 40%22%3E%3Cpath d=%22M0%2C14H.5a6%2C6 0 0 1 0%2C12H0Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Ccircle cx=%2232%22 cy=%225.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2211.30%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2217.10%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2222.90%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2228.70%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2234.50%22 r=%221.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); }

/* phone: separate tickets use the dashed line (the little circles are for desktop) */
@media (max-width: 40rem) {
  .mb-top .mb-tabs:not(.mb-strip) .mb-tab { --pl: 40px; --art-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M5.5%2C.5a5%2C5 0 0 0-5%2C5V14a6%2C6 0 0 1 0%2C12V34.5a5%2C5 0 0 0 5%2C5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Cline x1=%2232%22 y1=%223%22 x2=%2232%22 y2=%2237%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%227 5%22/%3E%3C/svg%3E"); }
  .mb-top .mb-tabs:not(.mb-strip) .mb-tab[aria-selected="true"] { --art-l-s: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M0%2C14H.5a6%2C6 0 0 1 0%2C12H0Z%22 fill=%22%23000%22/%3E%3Cpolygon points=%2219.00%2C13.80 20.53%2C17.90 24.90%2C18.08 21.47%2C20.80 22.64%2C25.02 19.00%2C22.60 15.36%2C25.02 16.53%2C20.80 13.10%2C18.08 17.47%2C17.90%22/%3E%3Cline x1=%2232%22 y1=%223%22 x2=%2232%22 y2=%2237%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-dasharray=%227 5%22/%3E%3C/svg%3E"); }
  /* "make yours" is just underlined text that blends into the page */
  .mb-top .mb-newboard { background: none; border: none; box-shadow: none; padding: 0.3rem 0.5rem; width: auto; min-width: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; color: inherit; border-radius: 0; }
}

/* the big title under the tickets (Shrikhand, like the other headings) */
.mb-heading {
  margin: 0.4rem auto 1.8rem;
  max-width: 40rem;
  text-align: center;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.mb-heading[hidden] { display: none; }
.mb-heading + .mb-note { margin-top: 0.8rem; }
.mb-heading ~ .mb-desc { margin-top: 0.6rem; }
.mb-heading:has(~ .mb-desc:not([hidden])) { margin-bottom: 0; }

/* "make yours" is plain underlined text on every screen size */
.mb-top .mb-right .mb-newboard { background: none; border: none; box-shadow: none; padding: 0.3rem 0.5rem; width: auto; min-width: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; color: inherit; border-radius: 0; }

/* phones: the enlarged box uses nearly the whole width (script.js sizes pictures with the same 2.5rem margin) */
@media (max-width: 40rem) {
  .mb-slide img, .mb-slide-color { max-width: calc(100vw - 2.5rem); }
  .mb-slide-ph { width: calc(100vw - 2.5rem); }
  .mb-slide-text { width: calc(100vw - 2.5rem); padding: 1.25rem; }
  .mb-light-stage { padding-top: 1rem; }
}

/* prize shop: bigger text and previews on computers (phones keep their original sizes). only the items change: the shop itself is untouched */
@media (min-width: 40.01rem) and (max-width: 60.99rem) {
  .shop-name { font-size: 0.95rem; }
  .shop-desc { font-size: 0.78rem; line-height: 1.25rem; min-height: 2.5em; opacity: 0.8; }
  .shop-price { font-size: 0.85rem; }
  .shop-prev { height: 3rem; font-size: 1.1rem; }
  .shop-prev-pet { height: 4rem; }
  .shop-item { padding: 0.7rem 0.6rem 0.75rem; gap: 0.25rem; }
  .shop-note { font-size: 0.72rem; }
  .shop-item .hy-btn { font-size: 0.85rem; }
}

/* bigger computer screens zoom the shop out to fit the window (--shop-s, set by shop.js), which shrinks these words too.
   the words keep their normal size, and only get bigger when the zoom drops low enough that they'd be under about 13px (names) / 11px (the rest) on screen */
@media (min-width: 61rem) {
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-name { font-size: max(1.08rem, calc(13px / var(--shop-s, 1))); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-desc { font-size: max(0.86rem, calc(11px / var(--shop-s, 1))); line-height: 1.15rem; min-height: 0; }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-price { font-size: max(0.9rem, calc(11.5px / var(--shop-s, 1))); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-note { font-size: max(0.62rem, calc(10px / var(--shop-s, 1))); }
  :is(.page[data-page="shop"], .page[data-page="rare-shop"]) .shop-prev { height: 2.4rem; }
}

/* ---------- the arcade: a cabinet with the games on its screen (index.html; the old turning circle is gone) ---------- */
.page[data-page="arcade"] { --ac-pt: calc(var(--lights-h, 2.8rem) + 0.4rem); --ac-pb: 3.8rem; position: absolute; inset: 0; padding: var(--ac-pt) 1rem var(--ac-pb); overflow: auto; }
@media (max-width: 40rem) { .page[data-page="arcade"] { --ac-pb: 6.6rem; padding-left: 0.6rem; padding-right: 0.6rem; } }   /* phones: room under the cabinet for the yeonbucks box */
.page[data-page="arcade"].active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ac {
  position: relative; flex: none; container-type: inline-size; aspect-ratio: 630 / 1030;
  width: min(100%, 34rem, calc((100svh - var(--bar-height, 3rem) * 2 - var(--ac-pt) - var(--ac-pb)) * 0.6117));
  margin: auto;
}
.ac-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--text); stroke-miterlimit: 10; pointer-events: none; }
.ac-art * { vector-effect: non-scaling-stroke; }
.ac-art .ac-1 { fill: none; stroke: var(--bg); }
.ac-art .ac-2 { fill: var(--bg); stroke: var(--text); stroke-width: 5px; vector-effect: none; }
.ac-art .ac-3 { fill: var(--bg); stroke: var(--text); }
.ac-art .ac-4 { fill: none; stroke: var(--text); }
.ac-art .ac-5 { stroke: var(--bg); }
.ac-art .ac-6 { fill: none; stroke: var(--text); stroke-dasharray: 5; }
.ac-art .ac-7 { fill: var(--bg); }

/* "the arcade" sits in the marquee box */
.ac-sign { position: absolute; left: 50.6%; top: 24.6%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.7cqw; width: max-content; }
.ac-title { margin: 0; white-space: nowrap; font-size: 6.4cqw; line-height: 1; font-weight: 400; }
.ac-sub { margin: 0; white-space: nowrap; font-family: var(--font-mono, "Roboto Mono", monospace); font-size: max(11px, 2.625cqw); line-height: 1; opacity: 0.75; }

/* the games: buttons on the screen */
.ac-btn {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--text); border-radius: 1.76cqw; background: var(--bg); color: var(--text); text-decoration: none;
  font-family: var(--font-heading); font-size: 3.17cqw; line-height: 1.2; -webkit-tap-highlight-color: transparent;
}
.ac-btn:hover, .ac-btn:focus-visible { background: var(--text); color: var(--bg); outline: none; text-decoration: none; }
.ac-tag { font-family: var(--font-mono, "Roboto Mono", monospace); font-size: max(9px, 1.7cqw); opacity: 0.75; margin-top: 0.15em; }
.ac-prize { font-size: 4.76cqw; text-decoration: underline; text-underline-offset: 0.12em; }
.ac-prize:hover, .ac-prize:focus-visible { text-decoration: underline; }

/* computers: the arcade never scrolls, the cabinet is sized to fit the screen */
@media (min-width: 40.01rem) { .page[data-page="arcade"] { overflow: hidden; } }

/* phones: the whole cabinet sits a little higher */
@media (max-width: 40rem) { .ac { transform: translateY(-1.6rem); } }

/* less space between the tickets and the big title under them */
.mb-top { margin-bottom: 1.1rem; }
@media (max-width: 40rem) { .mb-top { margin-bottom: 0.4rem; } }

/* arcade cabinet: little animations */
.ac-art .ac-spk, .ac-art .ac-stick { transform-box: fill-box; transform-origin: 50% 50%; }
.ac-art .ac-spk { animation: ac-twinkle 4.2s ease-in-out var(--d, 0s) infinite; }
@keyframes ac-twinkle {
  0%, 60%, 100% { transform: scale(1); opacity: 1; }
  80% { transform: scale(0.88); opacity: 0.6; }
}

/* joysticks lean toward the side of the game you're pointing at */
.ac-art .ac-stick { transform-origin: 50% 100%; transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ac:has(.ac-casino:is(:hover, :focus-visible), .ac-hy:is(:hover, :focus-visible)) .ac-stick { transform: rotate(-17deg); }
.ac:has(.ac-sg:is(:hover, :focus-visible), .ac-idol:is(:hover, :focus-visible)) .ac-stick { transform: rotate(17deg); }
.ac:has(.ac-prize:is(:hover, :focus-visible)) .ac-joy-l .ac-stick { transform: rotate(17deg); }
.ac:has(.ac-prize:is(:hover, :focus-visible)) .ac-joy-r .ac-stick { transform: rotate(-17deg); }

/* after a few quiet seconds, one game gives a little nudge (arcade.js adds the class) */
.ac-btn.ac-nudge { animation: ac-nudge 0.9s ease-in-out; }
@keyframes ac-nudge {
  0%, 100% { transform: none; }
  15% { transform: translateY(-5%) rotate(-3deg); }
  30% { transform: translateY(0) rotate(2.5deg); }
  45% { transform: translateY(-3%) rotate(-2deg); }
  60% { transform: translateY(0) rotate(1.5deg); }
  80% { transform: none; }
}

/* the title bounces in letter by letter whenever the page opens */
.ac-w { display: inline-block; white-space: nowrap; }
.ac-ch { display: inline-block; animation: ac-drop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both, ac-wiggle 3.4s ease-in-out infinite; animation-delay: calc(0.08s * var(--i)), calc(0.9s + 0.17s * var(--i)); }
@keyframes ac-wiggle {
  0%, 100% { transform: none; }
  25% { transform: translateY(-0.05em) rotate(-2.2deg); }
  60% { transform: translateY(0.03em) rotate(1.6deg); }
}
@keyframes ac-drop {
  0% { transform: translateX(-1.3em) scale(0.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-art .ac-spk, .ac-btn.ac-nudge, .ac-ch, .ac-sub { animation: none; }
  .ac-art .ac-stick { transition: none; }
}

/* computers: the cabinet's side lines carry on down to the bottom bar */
.ac-art .ac-ext, .ac-art .ac-cover { display: inline; }
.ac-art .ac-ext { stroke-linecap: round; }
.ac-art .ac-extfill { fill: var(--bg); stroke: none; }
.ac-art .ac-cover { fill: none; stroke: var(--bg); stroke-width: 3px; }

/* the buttons on the control panel can be pressed (they don't do anything) */
.ac-art .ac-key, .ac-art .ac-coin, .ac-art .ac-joy { pointer-events: all; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ac-art .ac-key { stroke: transparent; stroke-width: 14px; transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.12s ease-out; }
.ac-art .ac-key.ac-hit-on { transform: translateY(2px) scale(0.86, 0.7); }
.ac-art .ac-hit { fill: transparent; stroke: none; }
.ac-art .ac-coin { transform-box: fill-box; transform-origin: 50% 100%; }
.ac-art .ac-coin.ac-hit-on { animation: ac-coin 0.35s ease-out; }
@keyframes ac-coin { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.04); } 100% { transform: none; } }
.ac-art .ac-stick.ac-flick-l { transform: rotate(-22deg); }
.ac-art .ac-stick.ac-flick-r { transform: rotate(22deg); }
@media (prefers-reduced-motion: reduce) { .ac-art .ac-key { transition: none; } .ac-art .ac-coin.ac-hit-on { animation: none; } }

/* the hyrax token: click it to take it out, click again to put it in the coin slot */
.ac-token {
  position: absolute; z-index: 4; left: 57.9%; top: 87.9%; width: 9.78cqw; aspect-ratio: 1; padding: 0; margin: 0; border: 0; background: none;
  transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; --hk-line: 0.69px; --hk-draw: 0.23px; border-radius: 50%;
}
.ac-token::before { content: ""; position: absolute; inset: -0.6rem; border-radius: 50%; }
.ac-token:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ac-token svg { display: block; width: 100%; height: 100%; fill: var(--text); overflow: visible; pointer-events: none; }
.ac-token svg * { vector-effect: non-scaling-stroke; }
.ac-token .hk-1 { fill: var(--bg); stroke: var(--text); stroke-width: var(--hk-line); stroke-miterlimit: 10; }
.ac-token .hk-2 { fill: var(--bg); }
.ac-token path:not(.hk-1):not(.hk-2):not(.hk-3) { stroke: var(--text); stroke-width: var(--hk-draw, 0.3px); stroke-linejoin: round; }
.ac-token .hk-3 { fill: none; stroke: var(--text); stroke-width: var(--hk-line); stroke-miterlimit: 10; }
.ac-token[data-st="rest"]:hover { animation: ac-coin-wiggle 0.5s ease-in-out; }
@keyframes ac-coin-wiggle { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 30% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.08); } 65% { transform: translate(-50%, -50%) rotate(9deg) scale(1.08); } }

/* taken out: it grows over the screen */
.ac-token[data-st="up"] { left: 51.1%; top: 53.4%; width: 52cqw; --hk-line: 1.2px; --hk-draw: 0.6px; cursor: pointer; transition: left 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), top 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.5s cubic-bezier(0.3, 1.25, 0.5, 1); }
.ac-token[data-st="rest"] { transition: left 0.4s ease, top 0.4s ease, width 0.4s ease; }
.ac-token[data-st="up"]:hover { animation: none; }
.ac-token-hint { position: absolute; left: 51.1%; top: 71.4%; transform: translateX(-50%); z-index: 4; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s; font-family: var(--font-mono, "Roboto Mono", monospace); font-size: max(10px, 2.5cqw); opacity: 0; }
.ac[data-coin="up"] .ac-token-hint { opacity: 0.75; transition-delay: 0.3s; }
.ac .ac-screen { transition: opacity 0.3s; }
.ac[data-coin="up"] .ac-screen { opacity: 0.25; pointer-events: none; }

/* put in: it flies to the slot, turns on its edge and drops in */
.ac-token[data-st="in"] { left: 51.1%; top: 53.4%; width: 52cqw; --hk-line: 1.2px; --hk-draw: 0.6px; pointer-events: none; animation: ac-token-in 2.7s forwards, ac-token-fade-in 2.7s forwards; }
@keyframes ac-token-in {
  0%   { left: 51.1%; top: 53.4%; width: 52cqw; opacity: 1; transform: translate(-50%, -50%) perspective(600px) rotateX(0deg) rotate(0deg) scale(1); filter: drop-shadow(0 0 0 var(--text)); animation-timing-function: cubic-bezier(0.35, 0, 0.6, 0.85); }
  32%  { left: 57.9%; top: 87.9%; width: 9.78cqw; opacity: 1; transform: translate(-50%, -50%) perspective(600px) rotateX(0deg) rotate(-8deg) scale(1); filter: drop-shadow(0 0 0 var(--text)); animation-timing-function: cubic-bezier(0.35, 0.1, 0.6, 0.9); }
  54%  { left: 74.7%; top: 89.2%; width: 9.78cqw; opacity: 1; transform: translate(-50%, -50%) perspective(600px) rotateX(76deg) rotate(0deg) scale(1); filter: drop-shadow(0 4.4cqw 0 var(--text)); animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1); }
  94%  { left: 74.7%; top: 89.2%; width: 9.78cqw; opacity: 1; transform: translate(-50%, -50%) perspective(600px) rotateX(76deg) rotate(0deg) scale(0.45); filter: drop-shadow(0 4.4cqw 0 var(--text)); animation-timing-function: ease; }
  100% { left: 74.7%; top: 89.2%; width: 9.78cqw; opacity: 0; transform: translate(-50%, -50%) perspective(600px) rotateX(76deg) rotate(0deg) scale(0.4); filter: drop-shadow(0 4.4cqw 0 var(--text)); animation-timing-function: ease; }
}
.ac-token[data-st="gone"] { opacity: 0; pointer-events: none; transition: none; }
.ac-token.ac-back { animation: ac-coin-back 0.5s ease-out; }
@keyframes ac-coin-back { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* the screen flashes inverse (a white layer that "differences" what's under it) */
.ac-flash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.ac-flash .ac-flash-fill { fill: var(--text); stroke: var(--text); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.ac-flash .ac-flash-dash { fill: none; stroke: var(--bg); stroke-dasharray: 5; vector-effect: non-scaling-stroke; }
/* the game buttons swap colours in time with the flash */
.ac.flashing .ac-btn { animation: ac-flash-btn 1.4s linear; }
@keyframes ac-flash-btn {
  0%, 100% { background-color: var(--bg); color: var(--text); border-color: var(--text); }
  5%, 32% { background-color: var(--text); color: var(--bg); border-color: var(--bg); }
  38%, 52% { background-color: var(--bg); color: var(--text); border-color: var(--text); }
  58%, 84% { background-color: var(--text); color: var(--bg); border-color: var(--bg); }
  91% { background-color: var(--bg); color: var(--text); border-color: var(--text); }
}
.ac-flash.on { animation: ac-flash 1.4s linear; }
@keyframes ac-flash { 0% { opacity: 0; } 5% { opacity: 1; } 32% { opacity: 1; } 38% { opacity: 0; } 52% { opacity: 0; } 58% { opacity: 1; } 84% { opacity: 1; } 91% { opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ac-token, .ac-token[data-st] { transition: none; }
  .ac-token[data-st="rest"]:hover, .ac-token.ac-back { animation: none; }
  .ac-token[data-st="in"] { animation: ac-token-fade 0.4s forwards; }
  @keyframes ac-token-fade { from { opacity: 1; } to { opacity: 0; } }
  .ac-flash.on { animation: ac-flash-soft 1s ease; }
  .ac.flashing .ac-btn { animation: ac-flash-btn-soft 1s ease; }
  @keyframes ac-flash-btn-soft { 0%, 100% { background-color: var(--bg); color: var(--text); border-color: var(--text); } 25%, 75% { background-color: var(--text); color: var(--bg); border-color: var(--bg); } }
  @keyframes ac-flash-soft { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } }
}

/* the small coin has no text (the big one has everything) */
.ac-token .hk-solo { display: none; }
.ac-token:is([data-st="rest"], [data-st="gone"]) .hk-text { display: none; }

/* going in: the coin gets a rim (thickness) and the slot's lip sits in front of it, so it sinks into the slot */
.ac-lip { display: none; position: absolute; z-index: 3; left: 66.45%; top: 88.5%; width: 16.44cqw; height: 2.59cqw; border-radius: 1.3cqw; background: var(--text); pointer-events: none; }
.ac[data-coin="in"] .ac-lip { display: block; }

/* first time in: the games are locked until the token goes in the slot */
.ac-insert {
  display: none; position: absolute; z-index: 2; left: 51.1%; top: 53.4%; transform: translate(-50%, -50%); box-sizing: border-box;
  width: 56cqw; margin: 0; padding: 4.2cqw 2cqw; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--text); border-radius: 1.76cqw; background: var(--bg); color: var(--text);
  font-family: "Roboto Mono", var(--font-mono, monospace); font-size: max(11px, 3.3cqw); line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.ac-insert span { animation: ac-insert-blink 2.4s ease-in-out infinite; }
.ac.is-locked .ac-insert { display: flex; }
.ac[data-coin="up"] .ac-insert span { animation: none; }
@keyframes ac-insert-blink { 0%, 55%, 100% { opacity: 1; } 75% { opacity: 0.45; } }
.ac-token.ac-wiggle[data-st="rest"] { animation: ac-coin-wiggle 0.5s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .ac-insert span { animation: none; } .ac-token.ac-wiggle[data-st="rest"] { animation: none; } }
.ac.is-locked .ac-screen { opacity: 0.3; }

/* coin taken out: the cabinet fades away so you just see the coin and the text */
.ac-art, .ac-sign, .ac-screen, .ac-insert { transition: opacity 0.45s ease; }
.ac[data-coin="up"] :is(.ac-art, .ac-sign, .ac-screen, .ac-insert) { opacity: 0.07; }
.ac[data-coin="up"] .ac-token-hint { opacity: 1; }
.ac-coinbox { position: absolute; inset: 0; pointer-events: none; }
.ac-coinbox .ac-token { pointer-events: auto; }

/* it fades as it goes into the slot */
@keyframes ac-token-fade-in { 0%, 58% { opacity: 1; animation-timing-function: ease-in; } 100% { opacity: 0; } }

/* while the games are locked, the coin glows so people know where to look */
.ac-token::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; opacity: 0; }
.ac.is-locked .ac-token[data-st="rest"]::after { opacity: 1; animation: ac-coin-glow 2.2s ease-out infinite; }
@keyframes ac-coin-glow {
  0%   { box-shadow: 0 0 7px 1px color-mix(in srgb, var(--text) 38%, transparent), 0 0 0 0 color-mix(in srgb, var(--text) 40%, transparent); }
  70%  { box-shadow: 0 0 13px 4px color-mix(in srgb, var(--text) 16%, transparent), 0 0 0 0.9rem transparent; }
  100% { box-shadow: 0 0 7px 1px color-mix(in srgb, var(--text) 38%, transparent), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .ac.is-locked .ac-token[data-st="rest"]::after { animation: none; box-shadow: 0 0 10px 3px color-mix(in srgb, var(--text) 30%, transparent); } }

/* "which one will you choose?" rises in under the title */
.ac-sub { animation: ac-rise 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) 1.1s both; }
@keyframes ac-rise { 0% { transform: translateY(1.1em); opacity: 0; } 100% { transform: none; opacity: 0.75; } }

/* hovering a game gives the same little wiggle as the idle nudge */
@media (hover: hover) { .ac-btn:hover { animation: ac-hover-wig 0.7s ease-in-out; } }
@keyframes ac-hover-wig {
  0%, 100% { transform: none; }
  25% { transform: translateY(-2%) rotate(-1.2deg); }
  55% { transform: translateY(0) rotate(1deg); }
  80% { transform: translateY(-1%) rotate(-0.5deg); }
}
@media (prefers-reduced-motion: reduce) { .ac-btn:hover { animation: none; } }

/* ---------- jukebox animations ---------- */

/* 1. bulbs round the arch: dim and still when nothing plays, chasing when a song does */
.jb-art .jb-bulb { fill: none; stroke: var(--bg); stroke-width: 5px; stroke-linecap: round; stroke-dasharray: 0 42px; stroke-dashoffset: calc(var(--o) * -1); opacity: 0.5; }
.music.is-playing .jb-bulb { animation: jb-bulb 1.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes jb-bulb { 0%, 28% { opacity: 1; } 40%, 100% { opacity: 0.15; } }

/* 3. the pills on the sides press in when tapped */
.jb-art .jb-pill { pointer-events: all; cursor: pointer; transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1); }
.jb-art .jb-pill.hit { transform: translateY(1.5px) scale(0.97, 0.85); }
/* 6. the top cap pulses faintly */
.jb-art .jb-cap { transform-box: fill-box; transform-origin: 50% 100%; }
.music.is-playing .jb-cap { animation: jb-cap 1.2s ease-in-out infinite; }
@keyframes jb-cap { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.035, 1.05); } 40% { transform: scale(1); } }

/* 7. the grille bars ripple like speaker cones */
.jb-art .jb-bar { transform-box: fill-box; transform-origin: 50% 50%; }
.music.is-playing .jb-bar { animation: jb-bar 0.9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes jb-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } }

/* 5. the logo's letters bounce in one by one, then wobble a little while a song plays */
.jb-logo path { transform-box: fill-box; transform-origin: 50% 100%; --wob: 0; animation: jb-pop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both, jb-wob 1.8s ease-in-out infinite; animation-delay: calc(0.07s * var(--i, 0)), calc(0.9s + 0.12s * var(--i, 0)); }
.music.is-playing .jb-logo path { --wob: 2.2; }
@keyframes jb-pop { 0% { transform: translateY(45%) scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes jb-wob { 0%, 100% { transform: none; } 30% { transform: translateY(calc(var(--wob) * -0.9%)) rotate(calc(var(--wob) * -1deg)); } 65% { transform: rotate(calc(var(--wob) * 0.8deg)); } }

/* 2. a title or artist that's too long scrolls gently while the song plays */
.music.is-playing .jb-title.is-long, .music.is-playing .jb-artist.is-long { text-overflow: clip; animation: jb-scroll 9s ease-in-out infinite; }
@keyframes jb-scroll { 0%, 14% { text-indent: 0; } 46%, 62% { text-indent: calc(var(--jb-over, 0px) * -1); } 94%, 100% { text-indent: 0; } }

/* 4. tapping a song presses it in; the one playing gets little equalizer bars */
.jb-cell { transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1); }
.jb-cell:has(.song-main:active) { transform: scale(0.96); }
.jb-cell.current::before {
  content: ""; position: absolute; z-index: 1; left: calc(var(--u) * 8); top: 50%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); transform: translateY(-50%); pointer-events: none;
  background:
    linear-gradient(var(--bg), var(--bg)) 0 100% / 26% 40% no-repeat,
    linear-gradient(var(--bg), var(--bg)) 50% 100% / 26% 90% no-repeat,
    linear-gradient(var(--bg), var(--bg)) 100% 100% / 26% 60% no-repeat;
  animation: jb-eq 0.9s ease-in-out infinite, jb-eq-in 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.jb-cell.current.paused::before { animation: none; background-size: 26% 30%, 26% 30%, 26% 30%; }
@keyframes jb-eq {
  0%, 100% { background-size: 26% 40%, 26% 90%, 26% 60%; }
  33% { background-size: 26% 95%, 26% 45%, 26% 85%; }
  66% { background-size: 26% 60%, 26% 80%, 26% 35%; }
}
@keyframes jb-eq-in { 0% { transform: translateY(-50%) scale(0.2) rotate(-90deg); opacity: 0; } 100% { transform: translateY(-50%); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .music.is-playing .jb-bulb, .music.is-playing .jb-pill-k, .music.is-playing .jb-pill-w, .music.is-playing .jb-cap, .music.is-playing .jb-bar,
  .jb-logo path, .music.is-playing .jb-title.is-long, .music.is-playing .jb-artist.is-long, .jb-cell.current::before { animation: none; }
  .jb-art .jb-pill, .jb-cell { transition: none; }
}
.jb-logo g > path:nth-child(1) { --i: 0; }
.jb-logo g > path:nth-child(2) { --i: 1; }
.jb-logo g > path:nth-child(3) { --i: 2; }
.jb-logo g > path:nth-child(4) { --i: 3; }
.jb-logo g > path:nth-child(5) { --i: 4; }
.jb-logo g > path:nth-child(6) { --i: 5; }
.jb-logo g > path:nth-child(7) { --i: 6; }
.jb-logo g > path:nth-child(8) { --i: 7; }
.jb-logo g > path:nth-child(9) { --i: 8; }
.jb-logo g > path:nth-child(10) { --i: 9; }

/* the description rises in from below, after the logo letters land */
.jb-tag { animation: jb-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.8s both; }
@keyframes jb-rise { 0% { transform: translateY(1.2em); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jb-tag { animation: none; } }

/* ---------- Wishing well ---------- */
.page[data-page="wishing-well"] { position: absolute; inset: 0; padding: 1rem 1rem 3.4rem; overflow: hidden; }
.page[data-page="wishing-well"].active { display: flex; align-items: center; justify-content: center; }
@media (max-width: 40rem) { .page[data-page="wishing-well"] { padding-bottom: 6.6rem; } }

/* .ww is the stage: everything is sized from it, so the fountain (and the coin on it) scale together */
.ww { position: relative; width: 100%; max-width: 56rem; height: 100%; container-type: size; --ww-top: 7.2rem; --ww-w: min(100cqw, (100cqh - var(--ww-top) - 7.4rem) * 0.862 * 0.96, 30rem); }
.ww-title { position: absolute; top: 3.2rem; left: 0; right: 0; font-size: clamp(1.3rem, 5vw, 2rem); line-height: 1.2; text-align: center; animation: ww-rise 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.ww-fit { position: absolute; left: 0; right: 0; top: var(--ww-top); bottom: 7.4rem; margin: auto; width: var(--ww-w); height: calc(var(--ww-w) * 905 / 780); }
.ww-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ww-hint { position: absolute; left: 0; right: 0; top: calc(97% + 0.6rem); margin: 0; text-align: center; font-size: 1.05rem; opacity: 0.8; letter-spacing: 0.02em; transition: opacity 0.3s; pointer-events: none; }
.ww.is-open .ww-hint { opacity: 0; }

/* the page dims when the coin is opened; clipped to the page by its overflow */
.ww-dim { position: absolute; inset: -100vmax; z-index: 2; background: color-mix(in srgb, var(--bg) 84%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.ww.is-open .ww-dim { opacity: 1; pointer-events: auto; }

/* the hyrax coin: sits at the bottom of the fountain; opens big in the middle, turns around, and takes a wish */
.ww-coin { position: absolute; z-index: 3; left: 50%; top: 85.1%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); container-type: inline-size; --hk-line: 0.8px; --hk-draw: 0.27px;
  transition: left 0.6s cubic-bezier(0.3, 1.15, 0.5, 1), top 0.6s cubic-bezier(0.3, 1.15, 0.5, 1), width 0.6s cubic-bezier(0.3, 1.15, 0.5, 1); }
.ww-coin[data-st="open"], .ww-coin[data-st="throw"] { top: 47%; width: 88%; --hk-line: 1.2px; --hk-draw: 0.6px; }
.ww-coin[data-st="gone"] { opacity: 0; pointer-events: none; transition: none; }
.ww-coin.ww-back-in { animation: ww-coin-in 0.8s ease both; }
.ww-card { position: absolute; inset: 0; }
.ww-front { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; color: inherit; }
.ww-front:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ww-front svg { display: block; width: 100%; height: 100%; fill: var(--text); overflow: visible; pointer-events: none; }
.ww-front svg * { vector-effect: non-scaling-stroke; }
.ww-front .hk-1 { fill: var(--bg); stroke: var(--text); stroke-width: var(--hk-line); stroke-miterlimit: 10; }
.ww-front .hk-2 { fill: var(--bg); }
.ww-front path:not(.hk-1):not(.hk-2):not(.hk-3) { stroke: var(--text); stroke-width: var(--hk-draw, 0.3px); stroke-linejoin: round; }
.ww-front .hk-3 { fill: none; stroke: var(--text); stroke-width: var(--hk-line); stroke-miterlimit: 10; }
.ww-front .hk-solo { display: none; }
.ww-coin[data-st="rest"] .ww-front:hover { animation: ww-wiggle 0.5s ease-in-out; }
@keyframes ww-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.06); } 65% { transform: rotate(8deg) scale(1.06); } }
@keyframes ww-coin-in { from { opacity: 0; } to { opacity: 1; } }

/* the back of the coin */
.ww-back { position: absolute; inset: 0; display: none; }
.ww-coin[data-face="back"] .ww-front { display: none; }
.ww-coin[data-face="back"] .ww-back { display: block; }
.ww-back svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ww-back svg * { vector-effect: non-scaling-stroke; }
.ww-bk-1 { fill: var(--bg); stroke: var(--text); stroke-width: 1.2px; }
.ww-bk-2 { fill: none; stroke: var(--text); stroke-width: 1.2px; }
.ww-bk-3 { fill: none; stroke: var(--text); stroke-width: 1.4px; stroke-dasharray: 5 8; stroke-linecap: round; }
.ww-wish-wrap { position: absolute; left: 18%; right: 18%; top: 22%; bottom: 26%; display: flex; align-items: center; justify-content: center; }
.ww-wish { width: 100%; max-height: 100%; box-sizing: border-box; padding: 0; margin: 0; border: 0; outline: 0; resize: none; overflow-y: auto; background: transparent; color: inherit; text-align: center; font-family: "Roboto Mono", var(--font-mono, monospace); font-size: max(13px, 5.2cqw); line-height: 1.35; -webkit-appearance: none; border-radius: 0; scrollbar-width: none; }
.ww-wish::placeholder { color: inherit; opacity: 0.45; }
.ww-count { position: absolute; left: 0; right: 0; bottom: 17%; margin: 0; text-align: center; font-size: max(10px, 3.3cqw); opacity: 0.5; pointer-events: none; }

.ww-actions { position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.ww-coin[data-st="open"][data-face="back"] .ww-actions { opacity: 1; pointer-events: auto; transition-delay: 0.15s; }
.ww-btn { padding: 0.65rem 1.1rem; font: inherit; font-size: 0.8rem; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.ww-btn:hover, .ww-btn:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.ww-btn-go { border-color: var(--text); }
.ww-wish.is-empty-shake { animation: ww-shake 0.4s ease; }
@keyframes ww-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* where the coin lands */
.ww-art .ww-splash { fill: none; stroke: var(--text); transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: ww-rip 1.6s ease-out 1 both; }

/* the drawing: white-filled shapes with an ink outline, the black shading in ink */
.ww-art * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.ww-art .ww-w { fill: var(--bg); stroke: var(--text); }
.ww-art .ww-l { fill: none; stroke: var(--text); }
.ww-art .ww-k { fill: var(--text); stroke: none; }
.ww-art .ww-solid { fill: var(--bg); fill-rule: evenodd; }   /* the basin's outer wall: solid, not see-through to the page behind */

/* water: solid sheets that spill over each tier, with a slow streak of light sliding down each one */
.ww-art .ww-sheet { fill: var(--bg); stroke: var(--text); stroke-linejoin: round; }
.ww-art .ww-streak { fill: none; stroke: var(--text); stroke-width: 1px; stroke-linecap: round; opacity: 0.55; stroke-dasharray: 26 74; animation: ww-streak calc(var(--t, 1.8s) * 3) cubic-bezier(0.45, 0, 0.9, 0.7) infinite; animation-delay: var(--d, 0s); }
@keyframes ww-streak { from { stroke-dashoffset: 26; opacity: 0.2; } 20% { opacity: 0.6; } to { stroke-dashoffset: -74; opacity: 0.6; } }
.ww-art .ww-jet { fill: none; stroke: var(--text); stroke-width: 1.2px; stroke-linecap: round; stroke-dasharray: 55 45; animation: ww-jet var(--t, 1.8s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes ww-jet { from { stroke-dashoffset: 55; } to { stroke-dashoffset: -45; } }

/* rings spreading out from where the water lands */
.ww-art .ww-rip { fill: none; stroke: var(--text); transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: ww-rip 9.5s ease-out infinite; animation-delay: var(--d, 0s); }
.ww-art .ww-rip-s { animation-duration: 7s; }
/* the ripples out on the top bowl's water, on the same beat as the streams */
.ww-art .ww-pulse { animation: ww-rip calc(var(--t, 1.6s) * 3) ease-out infinite; animation-delay: var(--d, 0s); }
/* each landing ring starts just as its stream arrives (same rhythm as the stream, shifted to the end of its cycle) */
.ww-art .ww-foam { animation: ww-rip calc(var(--t, 1.6s) * 3) ease-out infinite; animation-delay: calc(var(--d, 0s) - var(--t, 1.6s) * 3 * 0.1); }
/* little drops thrown up where the water lands */
.ww-art .ww-drop { fill: var(--text); stroke: none; opacity: 0; animation: ww-drop 4.2s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes ww-drop { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.8; } 45% { transform: translate(calc(var(--dx) * 0.7), calc(var(--h) * -1)); } 100% { transform: translate(var(--dx), 3px); opacity: 0; } }
@keyframes ww-rip { 0% { transform: scale(0.2); opacity: 0; } 18% { opacity: 0.95; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ww-rise { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ww-title { animation: none; }
  .ww-art .ww-streak, .ww-art .ww-jet, .ww-art .ww-drop { animation: none; }
  .ww-coin, .ww-dim { transition: none; }
  .ww-coin[data-st="rest"] .ww-front:hover { animation: none; }
  .ww-art .ww-drop { opacity: 0; }
  .ww-art .ww-rip { animation: none; opacity: 0.35; transform: scale(0.7); }
}

/* ---------- Wishing well: see other wishes ---------- */
.ww-seeall { position: absolute; left: 50%; top: calc(97% + 3.2rem); transform: translateX(-50%); white-space: nowrap; }
.ww.is-open .ww-seeall { opacity: 0; pointer-events: none; }
/* the water in the basin can be tapped too */
.ww-art .ww-pool { fill: transparent; stroke: var(--text); stroke-opacity: 0; stroke-dasharray: 2 6; stroke-linecap: round; cursor: pointer; pointer-events: all; outline: none; transition: stroke-opacity 0.25s; }
.ww-art .ww-pool:hover, .ww-art .ww-pool:focus-visible { stroke-opacity: 0.7; }

/* the grid of coins: sits in the middle and grows downward as more wishes are made */
.ww-wishes { position: absolute; inset: 0; z-index: 5; overflow-y: auto; box-sizing: border-box; padding: 1.2rem 1rem 6.6rem; display: flex; flex-direction: column; align-items: center; background: none; animation: ww-fade 0.4s ease both; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.ww-wishes[hidden] { display: none; }
/* the page behind (the tint / grid paper / stars you picked) shows through; the fountain just steps out of the way */
body.ww-wishes-open .ww { visibility: hidden; }
/* the title, the coins and the button sit in the middle as one group; with lots of wishes it just fills the page and scrolls */
.ww-wishes::before, .ww-wishes::after { content: ""; flex: 1 0 0; }
.ww-wh { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.ww-wt { font-size: clamp(1.3rem, 5vw, 2rem); line-height: 1.2; }
.ww-wc { margin: 0; font-size: 0.8rem; opacity: 0.65; min-height: 1.1em; }
.ww-wmsg { margin: 1.5rem 0 0; font-size: 0.9rem; opacity: 0.75; text-align: center; }
.ww-wmsg[hidden] { display: none; }
.ww-grid { width: 100%; max-width: 46rem; margin: 0; padding: 1.4rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.ww-pager { flex: 0 0 auto; margin-top: 0.2rem; }
.ww-pager[hidden] { display: none; }
@keyframes ww-fade { from { opacity: 0; } to { opacity: 1; } }

/* one coin: the back of the hyrax coin, with the wish on it */
.ww-mini { --s: clamp(5.6rem, 26vw, 7.8rem); position: relative; flex: 0 0 auto; width: var(--s); height: var(--s); padding: 0; border: 1.2px solid var(--text); border-radius: 50%; background: var(--bg); color: inherit; cursor: pointer; container-type: inline-size; -webkit-tap-highlight-color: transparent;
  transform: rotate(var(--r, 0deg)); animation: ww-mini-in 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i, 0) * 45ms); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ww-mini::before { content: ""; position: absolute; inset: 5.5%; border: 1.2px solid var(--text); border-radius: 50%; pointer-events: none; }
.ww-mini::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(var(--text) 0 7deg, transparent 7deg 14deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.ww-mini:hover, .ww-mini:focus-visible { transform: rotate(var(--r, 0deg)) scale(1.07); outline: none; }
.ww-mini:active { transform: rotate(var(--r, 0deg)) scale(0.95); }
.ww-mini-t { position: absolute; left: 19%; right: 19%; top: 19%; bottom: 19%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Roboto Mono", var(--font-mono, monospace); font-size: 8.5cqw; line-height: 1.3; overflow: hidden; z-index: 1; }
.ww-mini-c { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 4; overflow: hidden; max-height: 100%; overflow-wrap: anywhere; }
@keyframes ww-mini-in { from { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 25deg)) scale(0.3) translateY(-1.5rem); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }

/* reading one wish: the coin opens big in the middle */
.ww-read { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 1rem 1rem 5rem; background: color-mix(in srgb, var(--bg) 55%, transparent); cursor: pointer; animation: ww-fade 0.3s ease both; }
.ww-read[hidden] { display: none; }
.ww-bigcoin { position: relative; width: min(88vw, 62vh, 26rem); aspect-ratio: 1; box-sizing: border-box; border: 1.2px solid var(--text); border-radius: 50%; background: var(--bg); container-type: inline-size; text-align: center; }
.ww-bigcoin::before { content: ""; position: absolute; inset: 3.5%; border: 1.2px solid var(--text); border-radius: 50%; pointer-events: none; }
.ww-bigcoin::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(var(--text) 0 4deg, transparent 4deg 8deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.ww-bigin { position: absolute; inset: 19%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.ww-bigt { position: relative; z-index: 1; margin: 0; max-height: 100%; overflow-y: auto; font-family: "Roboto Mono", var(--font-mono, monospace); font-size: max(13px, 5.6cqw); line-height: 1.38; overflow-wrap: anywhere; scrollbar-width: none; }
.ww-bigd { position: absolute; z-index: 1; left: 0; right: 0; bottom: 14%; margin: 0; font-size: max(10px, 3.2cqw); opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .ww-wishes, .ww-read, .ww-mini { animation: none; }
  .ww-mini { transition: none; }
}

/* previous confessions: kept, in a little pop up */
.ww-conf-link { position: absolute; left: 50%; top: calc(97% + 6.2rem); transform: translateX(-50%); white-space: nowrap; padding: 0.2rem 0.4rem; margin: 0; border: 0; background: none; font: inherit; font-size: 0.7rem; color: inherit; opacity: 0.75; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: opacity 0.2s; }
.ww-conf-link:hover, .ww-conf-link:focus-visible { opacity: 1; outline: none; }
.ww.is-open .ww-conf-link { opacity: 0; pointer-events: none; }
.ww-conf { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 1rem 1rem 4rem; background: color-mix(in srgb, var(--bg) 60%, transparent); animation: ww-fade 0.3s ease both; }
.ww-conf[hidden] { display: none; }
.ww-conf-card { position: relative; box-sizing: border-box; width: min(100%, 32rem); max-height: 100%; overflow-y: auto; padding: 1.6rem 1.4rem 1.4rem; border: 1px solid var(--text); border-radius: var(--radius); background: var(--bg); text-align: center; animation: ww-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.ww-conf-t { font-size: clamp(1.05rem, 4vw, 1.4rem); line-height: 1.2; }
.ww-conf-sub { margin: 0.4rem 0 0.9rem; font-size: 0.68rem; opacity: 0.6; }
.ww-conf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ww-conf-list li { padding-top: 0.8rem; border-top: 1px dashed var(--line); font-size: 0.72rem; line-height: 1.5; overflow-wrap: anywhere; }
.ww-conf-x { position: absolute; top: 0.5rem; right: 0.6rem; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: inherit; cursor: pointer; opacity: 0.7; }
.ww-conf-x:hover, .ww-conf-x:focus-visible { opacity: 1; outline: none; }
@media (prefers-reduced-motion: reduce) { .ww-conf, .ww-conf-card { animation: none; } }

@media (max-width: 700px) { .ww-conf { padding-bottom: 9rem; } .ww-conf-card { padding: 1.4rem 1.1rem 1.2rem; } }

.ww-title { font-size: 0; line-height: 0; }
.ww-arc { display: block; width: min(92%, 24rem); height: auto; margin: 0 auto; overflow: visible; }
.ww-arc text { font-family: var(--font-heading); font-size: 38px; fill: var(--text); }

.ww-sub { position: absolute; left: 0; right: 0; top: calc(3.2rem + min(92cqw, 24rem) * 0.16 - 0.2rem); margin: 0; text-align: center; font-size: 0.85rem; line-height: 1.3; opacity: 0.75; animation: ww-rise 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s both; }
@media (prefers-reduced-motion: reduce) { .ww-sub { animation: none; } }
.ww-hint { white-space: nowrap; }
@media (min-width: 700px) {
  .ww { --ww-top: 5.8rem; }
  .ww-title { top: 1.2rem; }
  .ww-sub { top: calc(1.2rem + min(92cqw, 24rem) * 0.16 - 0.2rem); }
}
@media (max-width: 700px) { .ww-hint { font-size: 0.85rem; } }

/* casino on computers: the leaderboard sits halfway down the side, a bit in from the left edge */
@media (min-width: 701px) { .cz-lb { top: 50%; left: clamp(16px, 7vw, 100px); transform: translateY(-50%); } }
@media (min-width: 701px) { .cz-lb { width: clamp(190px, 22vw, 280px); } }

/* purchase animation (shop.js buyFx): a stamp, a burst of little stars, and the price floating away */
.shop-fx { position: relative; }
.shop-stamp { position: absolute; left: 50%; top: 42%; z-index: 4; padding: 0.15rem 0.6rem 0.25rem; border: 2px solid var(--text); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.2; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%) rotate(-10deg); }
.shop-spark { position: absolute; left: 50%; top: 42%; z-index: 3; font-size: 0.9rem; line-height: 1; color: var(--text); pointer-events: none; opacity: 0; }
.shop-float { position: absolute; left: 50%; bottom: 2.4rem; z-index: 4; font-size: 0.8rem; font-weight: 700; white-space: nowrap; color: var(--text); pointer-events: none; opacity: 0; }

/* the stamp stays on everything you own, in the top left corner of the card */
.shop-item.is-owned { position: relative; }
.shop-item.is-owned::before { content: "yours!"; position: absolute; left: 2rem; top: 0.95rem; z-index: 4; padding: 0.15rem 0.6rem 0.25rem; border: 2px solid var(--text); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.2; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%) rotate(-10deg) scale(0.9); }
.shop-item.is-owned.shop-fx::before { display: none; }

/* your own wishes sparkle in the grid */
.ww-mini .ww-spark { position: absolute; right: 3%; top: 1%; z-index: 2; font-size: 20cqw; line-height: 1; pointer-events: none; transform-origin: 50% 50%; animation: ww-twinkle 2.6s ease-in-out infinite; }
@keyframes ww-twinkle { 0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.55; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ww-mini .ww-spark { animation: none; } }

/* the coin in flight: a little 3D disc with an edge (built in wishwell.js), spinning about its up-and-down axis */
.ww-coin.ww-tossing .ww-card { visibility: hidden; }
.coin-rig { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.coin-rig-edge { position: absolute; inset: 1%; border-radius: 50%; background: var(--text); }
.coin-tface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
.coin-tface svg { display: block; width: 100%; height: 100%; fill: var(--text); overflow: visible; pointer-events: none; }
.coin-tface svg * { vector-effect: non-scaling-stroke; }
.coin-tface .hk-1 { fill: var(--bg); stroke: var(--text); stroke-width: var(--hk-line); stroke-miterlimit: 10; }
.coin-tface .hk-2 { fill: var(--bg); }
.coin-tface path:not(.hk-1):not(.hk-2):not(.hk-3) { stroke: var(--text); stroke-width: var(--hk-draw, 0.3px); stroke-linejoin: round; }
.coin-tface .hk-3 { fill: none; stroke: var(--text); stroke-width: var(--hk-line); stroke-miterlimit: 10; }
.coin-tface .hk-solo { display: none; }
/* the arcade token: its own drawing hides while the 3D one spins, and it's a size container so the edge scales with it */
.ac-token { container-type: inline-size; }
.ac-token.is-spinning > svg { visibility: hidden; }

/* flower trail: little flowers that bloom behind the cursor, sway down a bit and fade (drawn by shop.js) */
.trail-flower { width: 16px; height: 16px; font-size: 0; animation: trail-bloom 0.9s ease-out forwards; }
.trail-flower .flower-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trail-petal { color: #f48fb1; }
@keyframes trail-bloom {
  0%   { opacity: 0; transform: translate(0, 0) scale(0) rotate(calc(var(--r, 0deg) - 40deg)); }
  18%  { opacity: 1; transform: translate(0, 0) scale(calc(var(--s, 1) * 1.15)) rotate(var(--r, 0deg)); }
  30%  { opacity: 1; transform: translate(0, 0) scale(var(--s, 1)) rotate(var(--r, 0deg)); }
  62%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.4), 6px) scale(var(--s, 1)) rotate(calc(var(--r, 0deg) * -0.5)); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), 22px) scale(calc(var(--s, 1) * 0.5)) rotate(calc(var(--r, 0deg) * 1.5)); }
}
.shop-prev-glyph[data-g="flower"] .flower-svg { width: 1.5rem; height: 1.5rem; margin: 0 0.15rem; }

/* paw print trail: little prints that walk behind the cursor (drawn by shop.js), pop in, wait a moment and fade */
.trail-paw { width: 18px; height: 18px; font-size: 0; color: var(--text); animation: trail-paw 1.1s ease-out forwards; }
.trail-paw .paw-svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes trail-paw {
  0%   { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.5); }
  10%  { opacity: 0.85; transform: rotate(var(--r, 0deg)) scale(1.1); }
  18%  { opacity: 0.85; transform: rotate(var(--r, 0deg)) scale(1); }
  50%  { opacity: 0.8; transform: rotate(var(--r, 0deg)) scale(1); }
  100% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.9); }
}
.shop-prev-glyph[data-g="paw"] { color: var(--text); }
.shop-prev-glyph[data-g="paw"] .paw-svg { width: 1.2rem; height: 1.2rem; margin: 0 0.3rem; opacity: 0.85; }
.shop-prev-glyph[data-g="paw"] .paw-svg:nth-child(1) { transform: rotate(-18deg) translateY(2px); }
.shop-prev-glyph[data-g="paw"] .paw-svg:nth-child(2) { transform: rotate(14deg) translateY(-2px); }
.shop-prev-glyph[data-g="paw"] .paw-svg:nth-child(3) { transform: rotate(-12deg) translateY(2px); }
@media (prefers-reduced-motion: reduce) { .trail-paw { animation: none; } }

/* ---------- the shop signs swing a little and the awning's scalloped edge flutters (shop.js adds .swing / .flutter) ---------- */
.shop-post .pp-sign { --base: translate(0, 90.35px); transform-origin: 325px 309.65px; animation: ppIdle 3.2s ease-in-out infinite alternate; }
.shop-sign svg { --base: translateX(-50%); transform-origin: 50% 3%; animation: ppIdle 3.2s ease-in-out infinite alternate; }
.shop-post .pp-sign.swing, .shop-sign svg.swing { --sw: 1.6deg; animation: ppSwing 1.6s ease-out; }
.shop-post .pp-sign.swing.hard, .shop-sign svg.swing.hard { --sw: 7deg; animation-duration: 2.4s; }
@keyframes ppIdle { from { transform: var(--base) rotate(-0.9deg); } to { transform: var(--base) rotate(0.9deg); } }
@keyframes ppSwing {
  0% { transform: var(--base) rotate(0deg); }
  16% { transform: var(--base) rotate(var(--sw)); }
  38% { transform: var(--base) rotate(calc(var(--sw) * -0.7)); }
  58% { transform: var(--base) rotate(calc(var(--sw) * 0.42)); }
  78% { transform: var(--base) rotate(calc(var(--sw) * -0.2)); }
  100% { transform: var(--base) rotate(0deg); }
}
.shop-tent .tw > path, .shop-tent .tk > path { transform-box: fill-box; transform-origin: 50% 0; }
.shop-tent .tw > path:nth-child(1) { --k: 9; } .shop-tent .tw > path:nth-child(2) { --k: 7; } .shop-tent .tw > path:nth-child(3) { --k: 5; }
.shop-tent .tw > path:nth-child(4) { --k: 3; } .shop-tent .tw > path:nth-child(5) { --k: 1; }
.shop-tent .tk > path:nth-child(12) { --k: 10; } .shop-tent .tk > path:nth-child(13) { --k: 8; } .shop-tent .tk > path:nth-child(14) { --k: 6; }
.shop-tent .tk > path:nth-child(15) { --k: 4; } .shop-tent .tk > path:nth-child(16) { --k: 2; } .shop-tent .tk > path:nth-child(17) { --k: 0; }
.shop-tent .tw > path, .shop-tent .tk > path { animation: tentSway 4s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -140ms); }
@keyframes tentSway { from { transform: translateX(-1.6%) skewX(-6deg); } to { transform: translateX(1.6%) skewX(6deg); } }
@media (prefers-reduced-motion: reduce) {
  .shop-post .pp-sign, .shop-sign svg, .shop-tent .tw > path, .shop-tent .tk > path { animation: none !important; }
}

/* ---------- the little "did you play before?" box (transfer.js) ---------- */
.xfer { position: fixed; left: 50%; bottom: calc(var(--bar-height) + 1rem); transform: translateX(-50%); z-index: 90; width: min(22rem, calc(100vw - 2rem)); box-sizing: border-box; padding: 0.9rem 1rem; background: var(--text); color: var(--bg); border: 1px solid var(--text); border-radius: var(--radius); font-size: 0.8rem; text-align: center; box-shadow: 0 0 0 0.3rem var(--bg); }
.xfer p { margin: 0 0 0.6rem; }
.xfer .hy-btn { background: var(--bg); color: var(--text); border-color: var(--bg); }
.xfer .hy-btn:hover, .xfer .hy-btn:focus-visible { background: transparent; color: var(--bg); border-color: var(--bg); }
.xfer-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }