/* =========================================================
   Salt House: styles
   A hand-made personal homepage, around 1998 to 2003.
   Tiled seasonal wallpaper (set by seasons.js), solid boxes
   on top so text stays readable, chunky glossy buttons.
   ========================================================= */

/* ---------- Things that never change with the season ---------- */
:root {
  --ink: #1a1a1a;            /* main text */
  --white: #ffffff;
  --link: #0000ee;           /* classic link blue */
  --visited: #551a8b;        /* classic visited purple */
  --tooltip: #ffffe1;
  --tap: 48px;               /* minimum height of anything you tap */

  /* Fonts. Each list falls back to a lookalike on phones that lack the first one. */
  --font-times: "Times New Roman", Times, "Liberation Serif", serif;
  --font-verdana: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --font-comic: "Comic Sans MS", "Comic Sans", "Comic Neue", "Chalkboard SE", sans-serif;
  /* All ordinary (non-heading) text. Chosen by Amanda 2026-10-04. */
  --font-body: "Cormorant Garamond", Garamond, "Times New Roman", serif;

  color-scheme: light;
}

/* ---------- Season colors ----------
   accent    dark color: headers, outlines, title bar start
   accent-2  lighter color: borders, title bar end
   soft      pale tint: picked choices
   paper     the solid boxes everything sits on
   btn       the glossy buttons (light and dark make the bevel)
   plaque    the dark box behind the title and counter */
[data-season="fall"] {
  --accent: #7a3412;  --accent-2: #d0702a;  --soft: #fde9cc;  --paper: #fffaf0;
  --btn: #e8792b;     --btn-light: #ffb878; --btn-dark: #a8481a; --btn-text: #ffffff;
  --plaque: #4a1f0a;  --title: #ffd23f;     --title-shadow: #b0300e;
  --marquee-bg: #4a1f0a; --marquee-text: #ffd23f;
}

[data-season="winter"] {
  --accent: #1f3d73;  --accent-2: #5b8ad0;  --soft: #e6effc;  --paper: #fbfdff;
  --btn: #c8343f;     --btn-light: #f28a91; --btn-dark: #8a1d26; --btn-text: #ffffff;
  --plaque: #0f2347;  --title: #ffffff;     --title-shadow: #c8343f;
  --marquee-bg: #0f2347; --marquee-text: #ffffff;
}

[data-season="spring"] {
  --accent: #4d6e26;  --accent-2: #93bd55;  --soft: #eef7dd;  --paper: #fffef5;
  --btn: #d9608f;     --btn-light: #f7a8c6; --btn-dark: #9c3a62; --btn-text: #ffffff;
  --plaque: #3e5a1f;  --title: #fff6a8;     --title-shadow: #c2547c;
  --marquee-bg: #3e5a1f; --marquee-text: #fff6a8;
}

[data-season="summer"] {
  --accent: #a83a14;  --accent-2: #f0a020;  --soft: #fff1c4;  --paper: #fffcef;
  --btn: #f2a516;     --btn-light: #ffd76a; --btn-dark: #b8720a; --btn-text: #3a1d00;
  --plaque: #12324a;  --title: #d8ff6a;     --title-shadow: #e2502c;
  --marquee-bg: #12324a; --marquee-text: #d8ff6a;
}

* { box-sizing: border-box; }

/* Cormorant Garamond runs small, so everything is sized up a little */
html { -webkit-text-size-adjust: 100%; font-size: 18px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  /* straight, even numbers (Cormorant's book-style numbers dip and shrink) */
  font-variant-numeric: lining-nums;
  color: var(--ink);
  background-color: #f3dfbf;   /* the wallpaper itself is set by seasons.js */
  background-size: 96px 96px;
  image-rendering: pixelated;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Links: blue, purple once visited ---------- */
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: #ff0000; }

/* ---------- Pixel art pictures (drawn by app.js) ---------- */
.px {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.px svg,
.mark svg,
.cat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

/* ---------- Scrolling marquee banner ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--marquee-bg);
  color: var(--marquee-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: calc(6px + env(safe-area-inset-top)) 0 6px;
  border-bottom: 4px ridge var(--accent-2);
}

.marquee-track {
  display: inline-block;
  animation: marquee 32s linear infinite;
}

.marquee-track span { display: inline-block; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Page frame ---------- */
.page {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ---------- Solid boxes: everything readable sits on one ---------- */
.box {
  background: var(--paper);
  border: 4px ridge var(--accent-2);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
  padding: 14px 14px 16px;
}

/* the colored bar across the top of a box or pop-up */
.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  min-height: 34px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: var(--white);
  font-family: var(--font-verdana);
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}

/* ---------- Title and hit counter ---------- */
/* spans the full width of the sidebar plus content, so the page reads as one centered column */
.site-head {
  margin: 14px 0;
  padding: 16px 12px 18px;
  text-align: center;
  background: var(--plaque);
  border: 4px ridge var(--accent-2);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}

h1 {
  margin: 0;
  font-family: var(--font-times);
  font-style: italic;
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--title);
  text-shadow: 3px 3px 0 var(--title-shadow);
}

h1 .px { width: 26px; height: 26px; }

.tagline {
  margin: 6px 0 12px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--white);
}

.counter-box { display: inline-block; }

.counter-label {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  color: var(--title);
}

.counter-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.counter-row .px { width: 24px; height: 24px; }

/* the odometer: one black box per digit */
.odometer {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #000;
  border: 3px ridge var(--accent-2);
}

.digit {
  position: relative;
  width: 24px;
  height: 36px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Courier New", Courier, "Liberation Mono", monospace;
  font-weight: 700;
  font-size: 28px;
  color: var(--white);
  /* a band of light across the middle, like a real counter wheel */
  background: linear-gradient(#000 0%, #3a3a3a 30%, #555 50%, #3a3a3a 70%, #000 100%);
}

/* the decimal digits are red on white, like the last wheel on an odometer */
.digit.tenths {
  color: #cc0000;
  background: linear-gradient(#bbb 0%, #fff 40%, #fff 60%, #bbb 100%);
}

.digit.dot { width: 10px; background: #000; }

.digit span { display: block; }

/* a changed digit clicks over in little jumps, not smoothly */
.digit.roll span { animation: roll .4s steps(4) both; }

@keyframes roll {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* "+2!" that pops up beside the counter */
.gain-pop {
  position: absolute;
  right: -8px;
  top: -30px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: #ff0066;
  text-shadow: 2px 2px 0 #ffff00;
  opacity: 0;
  pointer-events: none;
}

.gain-pop.show { animation: popBlink 1.8s steps(1) forwards; }

@keyframes popBlink {
  0%, 20%, 40%, 60%, 80% { opacity: 1; }
  10%, 30%, 50%, 70% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Little quirky animations ---------- */
.blink { animation: blink 1.2s steps(1) infinite; }
.blink-late { animation-delay: .6s; }

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
}

/* the coin spins in chunky steps, like an old GIF */
.spin { animation: spin 1.6s steps(8) infinite; }

@keyframes spin {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(.1); }
  50%  { transform: scaleX(-1); }
  75%  { transform: scaleX(.1); }
  100% { transform: scaleX(1); }
}

/* ---------- Two columns on a computer, one on a phone ---------- */
.layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  align-items: start;
}

main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 10px;
  padding: 0 0 10px;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 1.1rem;
}

.link-list li {
  padding: 2px 8px 2px 22px;
  background: no-repeat 5px 50% / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff00aa' d='M3 0h1v7H3zM0 3h7v1H0zM2 2h3v3H2z'/%3E%3C/svg%3E");
}

.link-list a { display: inline-block; padding: 8px 0; }

/* the yellow and black "under construction" sign */
.construction {
  margin: 4px 10px 0;
  text-align: center;
  font-family: var(--font-verdana);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  background: #ffcc00;
  border: 2px solid #000;
}

.stripes {
  display: block;
  height: 8px;
  background: repeating-linear-gradient(45deg, #000 0 6px, #ffcc00 6px 12px);
}

.construction-text { display: block; padding: 3px 4px; }

/* ---------- Old website section headers ---------- */
.old-head {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-family: var(--font-times);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  border-bottom: 4px double var(--accent-2);
}

.old-head .px { width: 22px; height: 22px; margin: 0 4px; vertical-align: -2px; }

p { margin: 0 0 10px; }

.hint { font-size: .9rem; color: #333; }

.stack { display: grid; gap: 14px; }

/* ---------- Form fields ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* option groups get a dotted frame, like a hand-drawn box */
.field.group {
  border: 2px dotted var(--accent-2);
  padding: 8px 10px 12px;
}

.field.group legend { padding: 0 6px; color: var(--accent); }

.field { display: grid; gap: 6px; }

.field-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
}

.optional { font-weight: 400; color: #444; }

input[type="text"],
input[type="search"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: var(--tap);
  font-family: var(--font-body);
  font-size: 18px;            /* 16px or more stops phones zooming in */
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: 0;
  padding: 10px 12px;
  appearance: none;
}

textarea { resize: vertical; min-height: 64px; }

/* text boxes don't inherit the page's straight numbers, so set them here too */
input, textarea, select { font-variant-numeric: lining-nums; }

input:focus, textarea:focus, select:focus {
  outline: 3px dotted var(--accent-2);
  outline-offset: 2px;
}

.custom-points { margin-top: 6px; }

.form-error {
  margin: 0;
  padding: 6px 8px;
  background: var(--tooltip);
  border: 1px solid #000;
  font-weight: 700;
}

.form-error:empty { display: none; }

/* ---------- Choices: little stars, hearts and moons that fill in ---------- */
.chip-grid { display: grid; gap: 6px; }
.chip-grid.categories { grid-template-columns: repeat(3, 1fr); }
.chip-grid.points { grid-template-columns: repeat(3, 1fr); }
.chip-grid.levels { grid-template-columns: repeat(2, 1fr); }

/* the real radio button is hidden; the label is what you tap */
.chip { position: relative; }

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  height: 100%;
  padding: 8px 6px;
  text-align: center;
  background: var(--white);
  border: 2px dashed var(--accent-2);
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.chip input:checked + span {
  background: var(--soft);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.chip input:focus-visible + span { outline: 3px dotted var(--accent); outline-offset: 2px; }

/* the star / heart / moon: outline when empty, filled when picked */
.mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--accent);
}

.mark .mark-full { display: none; }
.chip input:checked + span .mark .mark-empty { display: none; }
.chip input:checked + span .mark .mark-full { display: block; }

.mark-star  { --mark-fill: #ffd23f; }
.mark-heart { --mark-fill: #e8436a; }
.mark-moon  { --mark-fill: #ffe9a0; }

/* on category choices the star sits up in the corner */
.categories .chip > span { flex-direction: column; min-height: 76px; font-size: .78rem; padding-top: 12px; }
.categories .mark { position: absolute; top: 4px; left: 4px; }

.points .chip > span {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ---------- Category icons, with a twinkling sparkle ---------- */
.cat-icon {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.cat-icon .sparkle {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 11px;
  height: 11px;
  animation: blink 1.4s steps(1) infinite;
  animation-delay: var(--twinkle, 0s);
}

/* in the choices, the star in the corner does the sparkling instead */
.chip .cat-icon .sparkle { display: none; }

/* ---------- Glossy web 1.0 buttons ---------- */
.btn {
  min-height: var(--tap);
  min-width: 90px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  color: var(--btn-text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
  /* a shine on the top half, over the season color */
  background:
    linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 48%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .1)),
    var(--btn);
  border: 4px outset var(--btn-light);
  border-right-color: var(--btn-dark);
  border-bottom-color: var(--btn-dark);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  border-style: inset;
  border-color: var(--btn-dark) var(--btn-light) var(--btn-light) var(--btn-dark);
  padding: 9px 15px 7px 17px;
}

.btn:focus-visible { outline: 3px dotted var(--accent); outline-offset: 2px; }

/* a calmer button for "Never mind" and "Copy" */
.btn-quiet {
  color: var(--accent);
  text-shadow: none;
  background:
    linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .3) 48%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .05)),
    var(--soft);
  border-color: var(--white);
  border-right-color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}

.btn-quiet:active { border-color: var(--accent-2) var(--white) var(--white) var(--accent-2); }

.btn-big {
  width: 100%;
  min-height: 56px;
  font-size: 1.1rem;
}

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* a button that looks like a plain old underlined link */
.link-btn {
  min-height: 40px;
  padding: 4px 2px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

.link-btn:active { color: #ff0000; }

.link-line { margin: 4px 0 0; text-align: center; }

/* ---------- Today's page ---------- */
.today-date {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
}

/* the log looks like a guestbook */
.entries {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 4px;
}

.entries:empty { display: none; }

.entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 2px;
  border-bottom: 2px dashed var(--accent-2);
}

.entry:last-child { border-bottom: 0; }

.entry-main { min-width: 0; }

.entry-task {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.entry-meta {
  margin: 2px 0 0;
  font-size: .8rem;
  color: #444;
}

.level-tag {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  color: #2f7a2f;
}

.entry-note {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .98rem;
  overflow-wrap: anywhere;
}

.entry-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.points-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent);
  white-space: nowrap;
}

.fix-btn { min-width: 58px; min-height: 40px; padding: 4px 10px; font-size: .85rem; }
.fix-btn:active { padding: 5px 9px 3px 11px; }

/* the blinking red NEW! next to anything added in the last few minutes */
.new-tag {
  margin-left: 6px;
  padding: 0 4px;
  font-family: var(--font-verdana);
  font-size: .68rem;
  font-weight: 700;
  color: #ffff00;
  background: #ff0000;
  vertical-align: 2px;
  animation: blink 1s steps(1) infinite;
}

.empty {
  margin: 12px 0 0;
  padding: 14px;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  border: 2px dashed var(--accent-2);
}

/* ---------- Earlier pages ---------- */
.earlier summary { list-style: none; cursor: pointer; }
.earlier summary::-webkit-details-marker { display: none; }
.earlier summary .old-head { margin-bottom: 0; }
.earlier details[open] summary .old-head { margin-bottom: 12px; }

.summary-hint {
  display: block;
  font-size: .9rem;
  font-weight: 400;
  color: var(--link);
  text-decoration: underline;
}

.earlier details[open] .summary-hint { display: none; }

.day-heading {
  margin: 16px 0 0;
  font-family: var(--font-times);
  font-size: 1.15rem;
  color: var(--accent);
}

/* ---------- Footer ---------- */
.site-foot {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
}

.site-foot p { margin: 0 0 6px; }

.wallpaper-line { font-style: italic; }

.season-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
}

/* the season picker is small on purpose */
.season-line select {
  width: auto;
  min-height: 40px;
  padding: 6px 10px;
  font-size: 15px;
  background: var(--soft);
}

.badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* tiny 88x31 web badges */
.badge {
  display: inline-flex;
  align-items: center;
  width: 88px;
  height: 31px;
  overflow: hidden;
  border: 1px solid #000;
  font-family: var(--font-verdana);
  line-height: 1.05;
  text-align: left;
}

.badge b {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 3px;
  font-size: 8px;
}

.badge i { font-style: normal; font-size: 8px; padding: 0 4px; white-space: nowrap; }

.badge-nav { background: #000; color: #fff; }
.badge-nav b { background: #008080; color: #ffff00; font-family: var(--font-times); font-size: 20px; padding: 0 6px; }
.badge-note { background: #fff; color: #000; }
.badge-note b { background: #ffcc00; font-size: 11px; }
.badge-res { background: #ffcc00; color: #000; }
.badge-res b { background: #000080; color: #fff; }

/* ---------- Pop-up windows ---------- */
.pop {
  width: min(500px, calc(100vw - 16px));
  max-height: calc(100vh - 24px);
  padding: 0 0 14px;
  border: 4px ridge var(--accent-2);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .5);
  overflow-y: auto;
}

.pop .title-bar { position: sticky; top: 0; z-index: 1; }
.pop.small { width: min(380px, calc(100vw - 16px)); }
.pop::backdrop { background: rgba(0, 0, 0, .45); }

.pop-body { padding: 12px 14px 0; }

/* the little x in the corner of the title bar */
.x-btn {
  width: 34px;
  height: 30px;
  flex: 0 0 34px;
  padding: 0 0 2px;
  font-family: var(--font-verdana);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--btn-text);
  background:
    linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 48%, rgba(0, 0, 0, 0) 52%),
    var(--btn);
  border: 3px outset var(--btn-light);
  border-radius: 6px;
  cursor: pointer;
}

.x-btn:active { border-style: inset; }

.confirm-row { display: flex; gap: 12px; align-items: flex-start; }
.confirm-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.confirm-text { margin: 4px 0 0; }

#confirmNo[hidden] + #confirmYes { grid-column: 1 / -1; }

.recap-list {
  margin: 0;
  padding: 10px 12px 10px 30px;
  border: 2px dashed var(--accent-2);
  display: grid;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  list-style: square;
}

.recap-list li::marker { color: var(--accent); }

/* ---------- Yellow tooltip message ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--tooltip);
  color: #000;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 8px 12px;
  max-width: calc(100vw - 32px);
  text-align: center;
  z-index: 10;
  visibility: hidden;
}

.toast.show { visibility: visible; }

/* the old-school visitor counter in the footer */
.visits { margin: 8px 0 10px; }

.visit-counter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-left: 4px;
  vertical-align: middle;
  background: #000;
  border: 2px inset #777;
}

.visit-counter span {
  display: inline-block;
  width: 15px;
  padding: 1px 0;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #39ff14;
  background: #0b1a0b;
  text-shadow: 0 0 4px rgba(57, 255, 20, .7);
}

.storage-warning {
  margin: 0;
  padding: 10px 12px;
  background: var(--tooltip);
  border: 2px solid #000;
  font-weight: 700;
}

/* ---------- Session and Dream Wins ---------- */
.session-hint { text-align: center; }

.session-name {
  margin: 0;
  text-align: center;
  font-family: var(--font-times);
  font-style: italic;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--accent);
}

.session-meta { margin: 2px 0 12px; text-align: center; font-size: .85rem; color: #444; }

.dream-wins { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }

.dream-win {
  padding: 10px;
  background: var(--white);
  border: 2px dotted var(--accent-2);
}

.dream-win-label {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
}

.chip-grid.statuses { grid-template-columns: repeat(4, 1fr); }
.statuses .chip > span { font-size: .78rem; padding: 6px 4px; gap: 4px; }

.past-sessions { margin-top: 14px; }
.past-sessions summary { display: inline-block; list-style: none; cursor: pointer; }
.past-sessions summary::-webkit-details-marker { display: none; }
.past-session .session-meta { text-align: left; margin-bottom: 4px; }
.past-dream-wins { margin: 0 0 6px; padding-left: 1.2em; font-family: var(--font-body); }

#sessionForm .field.group input { margin-top: 6px; }

/* ---------- House Rule of the Day ---------- */
.house-rule {
  margin: 0 0 14px;
  padding: 10px 10px 12px;
  border: 2px dotted var(--accent-2);
  background: var(--soft);
}

.house-rule-label {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--font-times);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}

.house-rule .hint { text-align: center; }

/* the drawn card looks like a little playing card */
.rule-card {
  max-width: 340px;
  margin: 0 auto 12px;
  padding: 12px 14px 14px;
  text-align: center;
  background: var(--white);
  border: 4px double var(--accent);
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
  transform: rotate(-1.5deg);
}

.rule-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rule-card-pip { display: inline-block; width: 14px; height: 14px; }
.rule-card-pip svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

.rule-card-name {
  margin: 0;
  font-family: var(--font-times);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent);
}

.rule-card-text { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.3; }
.rule-card-note { margin: 6px 0 0; font-size: .8rem; color: #555; }

.card-actions { display: grid; gap: 10px; }

.wild-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.wild-form .btn { min-width: 0; padding: 6px 12px; }

.card-bonuses { list-style: none; margin: 0; padding: 0; text-align: center; }
.card-bonus { display: flex; justify-content: center; align-items: center; gap: 10px; font-weight: 700; }
.card-bonus .link-btn { min-height: 32px; font-size: .85rem; }

/* the deck list */
.deck { margin-top: 10px; }
.deck summary { display: inline-block; list-style: none; cursor: pointer; }
.deck summary::-webkit-details-marker { display: none; }
.deck-list { list-style: none; margin: 8px 0 0; padding: 0; }

.deck-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px 2px;
  border-bottom: 2px dashed var(--accent-2);
}

.deck-card:last-child { border-bottom: 0; }
.deck-card-name { margin: 0; font-weight: 700; }
.deck-card-rule { margin: 0; font-style: italic; line-height: 1.3; }
.deck-card-tag { margin: 2px 0 0; font-size: .8rem; color: var(--accent); font-weight: 700; }
.deck-card .link-btn { min-height: 32px; }

/* ---------- Preset points: the task menu and the preview ---------- */
.chip-grid.tasks { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.chip-grid.times { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.task-chip > span,
.times .chip > span {
  justify-content: flex-start;
  text-align: left;
  padding: 8px 10px;
  font-size: .95rem;
}

.task-chip .chip-text,
.times .chip-text { flex: 1; }

.task-pts {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 0 6px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  background: var(--paper);
}

.chip input:checked + span .task-pts { background: var(--white); }

.other-chip > span { font-style: italic; }

.something-else {
  margin-top: 10px;
  padding: 10px;
  border: 2px dashed var(--accent-2);
  background: var(--paper);
}

.points-preview {
  padding: 10px 14px;
  text-align: center;
  background: var(--soft);
  border: 3px double var(--accent);
}

.preview-total {
  margin: 0 0 4px;
  font-family: var(--font-times);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--accent);
}

.preview-lines { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.preview-extra { color: var(--accent); font-weight: 700; }

.entry-extras { margin: 4px 0 0; font-size: .85rem; color: var(--accent); font-weight: 600; }
.adjust-link { min-height: 32px; font-size: .9rem; }
.adjust-title { margin: 0; font-weight: 700; }

/* the Price List room */
.price-rows { list-style: none; margin: 0; padding: 0; }

.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--accent-2);
}

.price-row:last-child { border-bottom: 0; }
.price-pts { font-weight: 700; color: var(--accent); }
.price-row .link-btn { min-height: 32px; font-size: .9rem; }
.price-box .old-head .cat-icon { width: 26px; height: 26px; vertical-align: -3px; }

/* ---------- Ante gambles ---------- */
.ante-condition { margin: 0; text-align: center; font-style: italic; }
.ante-odds { list-style: none; margin: 4px 0 12px; padding: 10px; text-align: center; background: var(--soft); border: 2px dotted var(--accent-2); }
.ante-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.past-ante-name { margin: 10px 0 0; font-weight: 700; }
.past-ante .session-meta { text-align: left; margin: 0; }
#anteForm .btn-row .field { gap: 4px; }

/* ---------- The Long Wager ---------- */
.wager-levels .chip > span { font-size: .9rem; }
.wager-ante { margin: 12px 0; padding: 10px; text-align: center; background: var(--soft); border: 2px dotted var(--accent-2); }
.wager-ante p { margin: 0 0 8px; }
.wager-open .btn-row { margin-top: 12px; }
.prize-note {
  margin: 12px 0 0;
  padding: 8px 10px;
  text-align: center;
  font-weight: 700;
  color: var(--accent);
  background: var(--soft);
  border: 3px double var(--accent);
}
input[type="date"] { width: 100%; min-height: var(--tap); font-family: var(--font-body); font-size: 18px; color: var(--ink); background: var(--white); border: 2px solid var(--accent); padding: 8px 12px; }

/* ---------- The Secret Archive ---------- */
.suit-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 14px; }
.suit-slot {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px; text-align: center;
  background: var(--white); border: 2px dashed var(--accent-2); min-height: 104px;
}
.suit-slot.filled { border: 3px double var(--accent); background: var(--soft); }
.suit-slot:not(.filled) .suit-pic { opacity: .35; }
.suit-pic { display: block; width: 34px; height: 34px; }
.suit-pic svg, .spread-pic svg, .suit-chip-pic svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.suit-name { margin: 0; font-weight: 700; font-size: .85rem; }
.suit-cards { margin: 0; font-size: .8rem; color: var(--accent); font-weight: 700; }
.suit-chip-pic { display: inline-block; width: 20px; height: 20px; }
.chip-grid.suits { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.set-complete { margin: 0 0 14px; padding: 12px; text-align: center; background: var(--soft); border: 3px double var(--accent); }
.set-complete-title { margin: 0 0 4px; font-family: var(--font-times); font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.secret-link { display: inline-block; margin-top: 6px; font-size: 1.1rem; font-weight: 700; }
.carry-box { margin: 0 0 14px; padding: 10px; border: 2px dotted var(--accent-2); }
.archive-card { padding: 8px 2px; border-bottom: 2px dashed var(--accent-2); }
.archive-card:last-child { border-bottom: 0; }
.archive-card-head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; min-height: 40px; }
.archive-card-head::-webkit-details-marker { display: none; }
.archive-card-number { font-weight: 700; color: var(--accent); }
.archive-card-text { white-space: pre-wrap; margin: 8px 0; padding: 10px; font-style: italic; background: var(--soft); border-left: 4px solid var(--accent-2); }
.archive-card .session-meta { text-align: left; margin: 4px 0; }
.turn-form { margin-top: 10px; }
@media (max-width: 480px) { .suit-grid { grid-template-columns: repeat(3, 1fr); } }

/* a set's secret page: a dark, starry tarot spread */
.secret-page {
  text-align: center;
  background: #1a1030;
  color: #f4e9ff;
  border: 4px ridge #b48ae0;
  box-shadow: 0 0 0 4px #1a1030, 6px 6px 0 rgba(0, 0, 0, .5);
}
.secret-page a { color: #ffe36e; }
.secret-page a:visited { color: #f7b7ff; }
.secret-kicker { margin: 4px 0; font-style: italic; letter-spacing: .1em; color: #c9a6f0; }
.secret-title { margin: 0; font-family: var(--font-times); font-style: italic; font-size: 2.4rem; color: #ffe36e; text-shadow: 2px 2px 0 #6a2fa0; }
.secret-sub { margin: 0 0 14px; color: #e3d2ff; }
.spread {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: ". c0 ." "c1 c2 c3" ". c4 .";
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 16px;
}
.spread-0 { grid-area: c0; } .spread-1 { grid-area: c1; } .spread-2 { grid-area: c2; } .spread-3 { grid-area: c3; } .spread-4 { grid-area: c4; }
.spread-card {
  padding: 10px 6px; min-height: 140px; display: grid; justify-items: center; align-content: start; gap: 2px;
  background: linear-gradient(#fffaf0, #f3e6ff); color: #2a1a4a;
  border: 3px double #6a2fa0; border-radius: 8px; box-shadow: 0 0 10px rgba(255, 227, 110, .45);
}
.spread-2 { transform: rotate(-2deg); }
.spread-pic { display: block; width: 40px; height: 40px; }
.spread-number { margin: 4px 0 0; font-weight: 700; color: #6a2fa0; }
.spread-title { margin: 0; font-size: .85rem; line-height: 1.2; font-style: italic; }
.spread-suit { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #6a2fa0; }
.secret-unlock { margin: 0 0 14px; font-weight: 700; color: #ffe36e; }
.sealed-box { margin: 0 auto 14px; max-width: 520px; padding: 12px; border: 2px dotted #b48ae0; }
.sealed-text { white-space: pre-wrap; text-align: left; margin: 0 0 10px; padding: 12px; color: #2a1a4a; background: #fffaf0; border-radius: 6px; }
.secret-page textarea { background: #fffaf0; }
.secret-page .empty { color: #f4e9ff; border-color: #b48ae0; }

/* ---------- The Roll of Titles ---------- */
.title-roll { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plaque {
  padding: 12px 14px 8px;
  text-align: center;
  background: linear-gradient(#fff6d8, #f5e2a8);
  border: 4px double #a7792a;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #fffaf0, 3px 3px 0 rgba(0, 0, 0, .2);
}
.plaque-number { margin: 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #8a5a1a; }
.plaque-name { margin: 2px 0 4px; font-family: var(--font-times); font-weight: 700; font-style: italic; font-size: 1.4rem; color: #5a3410; }
.plaque-for { margin: 0 0 4px; font-size: .95rem; line-height: 1.3; }
.plaque-when { margin: 0; font-size: .85rem; color: #8a5a1a; font-weight: 700; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rung { padding: 10px 12px; background: var(--white); border: 2px dashed var(--accent-2); }
.rung.reached { border: 3px double var(--accent); background: var(--soft); }
.rung-head { margin: 0; font-family: var(--font-times); font-weight: 700; font-size: 1.15rem; color: var(--accent); }
.rung-what { margin: 2px 0; line-height: 1.3; }
.rung-status { margin: 0; font-weight: 700; }
.rung-more { margin-top: 4px; }
.rung-explain { margin: 0 0 10px; line-height: 1.4; }
.named-year { margin: 0 0 8px; text-align: center; font-family: var(--font-times); font-style: italic; font-weight: 700; font-size: 1.6rem; color: var(--accent); }
.free-hand-btn { font-size: .85rem; }
.milestone-pop { text-align: center; }
.milestone-stars .px { width: 28px; height: 28px; }
.milestone-head { margin: 0; font-family: var(--font-times); font-weight: 700; font-size: 1.1rem; letter-spacing: .1em; color: var(--accent); }
.milestone-name { margin: 0; font-family: var(--font-times); font-style: italic; font-weight: 700; font-size: 1.8rem; color: var(--accent); text-shadow: 2px 2px 0 var(--soft); }
.milestone-what { margin: 0; font-size: 1.05rem; }

/* ---------- Home Base ---------- */
/* On Home Base the marquee, title box, sidebar and footer step aside,
   and the page becomes outer space, colored by the time of day. */
body.space-room .marquee,
body.space-room .site-head,
body.space-room .sidebar,
body.space-room .site-foot { display: none; }
body.space-room .layout { grid-template-columns: 1fr; }
body.space-room .page { max-width: 1100px; }
body.space-room { min-height: 100vh; background-repeat: repeat, repeat, repeat, no-repeat !important; background-size: 97px 89px, 151px 137px, 233px 211px, 100% 100% !important; }
body.space-room[data-home-time] {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 80px 40px, #ffe9ff 99%, transparent),
    radial-gradient(2px 2px at 150px 120px, #e8fbff 99%, transparent),
    var(--hb-space) !important;
  background-attachment: scroll !important;
}
body.space-room[data-home-time="day"]   { background-color: #4fb0e8 !important; --hb-space: linear-gradient(#3b2fb0, #5a5fe0 55%, #4fb0e8); }
body.space-room[data-home-time="dusk"]  { background-color: #ff7a5a !important; --hb-space: linear-gradient(#24104f, #8a2f8f 55%, #ff7a5a); }
body.space-room[data-home-time="night"] { background-color: #2a1260 !important; --hb-space: linear-gradient(#05041a, #12093a 55%, #2a1260); }

.home-view { gap: 12px; padding-top: 14px; text-align: center; }
.home-title-row { position: relative; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-title { margin: 0; line-height: 1.15; }

/* "Welcome to Salt House!!" in bouncing rainbow WordArt */
.hb-wordart {
  display: inline-block;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  letter-spacing: .02em;
}
.hb-wordart span {
  display: inline-block;
  -webkit-text-stroke: 1.5px #2b1650;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #2b1650, 0 0 14px rgba(255, 255, 255, .45);
  animation: hb-bounce 1.6s ease-in-out infinite;
}
.hb-letter-0 { color: #ff5f8a; } .hb-letter-1 { color: #ff9a3a; } .hb-letter-2 { color: #ffe36e; }
.hb-letter-3 { color: #7ff07a; } .hb-letter-4 { color: #5fe0ff; } .hb-letter-5 { color: #8a9aff; } .hb-letter-6 { color: #e08aff; }
@keyframes hb-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-.22em) rotate(-4deg); } 50% { transform: translateY(0); } }

/* the spinning NEW! burst */
.hb-new {
  display: inline-grid;
  filter: drop-shadow(2px 2px 0 #2b1650);
  animation: hb-wobble 2.4s ease-in-out infinite;
}
.hb-new span {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  font-family: var(--font-verdana); font-weight: 700; font-size: 17px; font-style: italic;
  color: #e8001c;
  background: radial-gradient(#fffbd0, #ffe36e 60%, #ffb000);
  clip-path: polygon(50% 0%, 59% 15%, 75% 7%, 76% 24%, 93% 25%, 85% 40%, 100% 50%, 85% 60%, 93% 75%, 76% 76%, 75% 93%, 59% 85%, 50% 100%, 41% 85%, 25% 93%, 24% 76%, 7% 75%, 15% 60%, 0% 50%, 15% 40%, 7% 25%, 24% 24%, 25% 7%, 41% 15%);
}
@keyframes hb-wobble { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }

.home-season {
  margin: 0;
  font-style: italic; font-weight: 700; font-size: 1.2rem;
  color: #fff3b0;
  text-shadow: 0 0 8px #ff4fa8, 1px 1px 0 #2b1650;
}

.home-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 100;
  overflow: hidden;
  container-type: inline-size;   /* lets the little signs size with the picture */
  border: 6px ridge #c9a4ff;
  box-shadow: 0 0 0 3px #2b1650, 0 0 28px rgba(201, 164, 255, .75);
}
.home-scene svg { display: block; width: 100%; height: 100%; }

/* little moving things in the picture */
.home-scene .hb-twinkle { animation: hb-twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hb-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }
.home-scene .hb-blink { animation: hb-twinkle 1.1s steps(2) infinite; }
.home-scene .hb-puff { animation: hb-puff 2.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hb-puff { 0% { opacity: 0; transform: translateY(2px) scale(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-3px) scale(1.25); } }
.home-scene .hb-flame { animation: hb-flame .25s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes hb-flame { from { transform: scaleY(.75); } to { transform: scaleY(1.15); } }
.home-scene .hb-flag { animation: hb-flag 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom left; }
@keyframes hb-flag { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
.home-scene .hb-letter { animation: hb-hop 2.2s ease-in-out infinite; }
@keyframes hb-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-1.2px); } }
.home-scene .hb-critter { animation: hb-hop 1.8s ease-in-out infinite; }
.home-scene .hb-eyes { animation: hb-blinkeyes 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hb-blinkeyes { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.home-scene .hb-drift { animation: hb-drift 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hb-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1.5px, 2.5px) rotate(40deg); } }
.home-scene .hb-flutter { animation: hb-flutter .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes hb-flutter { from { transform: scaleX(1) translateY(0); } to { transform: scaleX(.55) translateY(-1px); } }
.home-scene .hb-zz { animation: hb-twinkle 2.4s ease-in-out infinite; }
.home-scene .hb-award { animation: hb-sway 3s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes hb-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* the flying saucer and the comet */
.hb-ufo {
  position: absolute; top: 2%; left: 0; z-index: 1;
  width: 9cqw; pointer-events: none;
  animation: hb-ufo 26s linear infinite;
}
.hb-ufo svg { display: block; width: 100%; height: auto; animation: hb-hover 1.6s ease-in-out infinite; }
@keyframes hb-ufo { from { transform: translateX(-12cqw); } to { transform: translateX(112cqw); } }
@keyframes hb-hover { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(.8cqw) rotate(3deg); } }
.hb-comet {
  position: absolute; top: 4%; left: 70%; z-index: 1;
  width: 12cqw; height: .5cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, #fff 0%, #fff3b0 8%, rgba(127, 240, 255, .6) 35%, transparent);
  box-shadow: 0 0 .8cqw #fff;
  transform: rotate(-28deg);
  opacity: 0;
  pointer-events: none;
  animation: hb-comet 11s ease-in infinite 2s;
}
@keyframes hb-comet {
  0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
  2% { opacity: 1; }
  12% { opacity: 1; transform: rotate(-28deg) translateX(-45cqw); }
  14%, 100% { opacity: 0; transform: rotate(-28deg) translateX(-50cqw); }
}

/* the sparkle trail behind the mouse */
.hb-trail {
  position: fixed; z-index: 50;
  font-size: 14px; line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 4px currentColor;
  transform: translate(-50%, -50%);
  animation: hb-trail .8s ease-out forwards;
}
@keyframes hb-trail { to { opacity: 0; transform: translate(-50%, 10px) scale(.3) rotate(90deg); } }

/* clickable parts with an old-school label on hover */
.home-part { position: absolute; display: block; z-index: 2; border-radius: 1cqw; outline-offset: -2px; }
.home-part:hover, .home-part:focus-visible { outline: 2px dashed #fff59a; background: rgba(255, 245, 154, .18); box-shadow: 0 0 1.2cqw rgba(255, 245, 154, .6); }
.home-part-door, .home-door-sign { z-index: 3; }
.home-part:hover::after, .home-part:focus-visible::after,
.home-door-sign:hover::after, .home-riding:hover::after {
  content: "\2605  " attr(data-label) "  \2605";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 10px;
  font-family: var(--font-comic);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  color: #2b1650;
  background: linear-gradient(#fff8d8, #ffd6f0);
  border: 2px solid #2b1650;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #2b1650;
  z-index: 5;
  pointer-events: none;
}
.home-riding:hover::after { content: "\2605  The porch: antes and the Long Wager  \2605"; }
.home-part-shop:hover::after, .home-part-patch:hover::after { left: auto; right: 0; transform: none; }
.home-part-mailbox:hover::after { left: 0; transform: none; }

/* the at-a-glance bits drawn on top of the picture */
.home-number, .home-sign-word, .home-door-sign, .home-chalk, .home-riding { position: absolute; z-index: 4; line-height: 1.1; }
.home-number {
  padding: .2cqw .6cqw;
  font-family: var(--font-times);
  font-weight: 700;
  font-size: 1.6cqw;
  color: #3a2410;
  background: linear-gradient(#fff2a0, #e0a020);
  border: .25cqw solid #2b1650;
  border-radius: .5cqw;
  box-shadow: .2cqw .2cqw 0 #2b1650;
  pointer-events: none;
}
.home-sign-word {
  display: grid; place-items: center;
  font-family: var(--font-verdana); font-weight: 700; font-size: 1.7cqw; letter-spacing: .12em;
  color: #c0287f; pointer-events: none;
}
.home-door-sign {
  display: block;
  padding: .35cqw .3cqw;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 1.2cqw;
  text-align: center;
  text-decoration: none;
  color: #2b1650;
  background: #fff8d8;
  border: .25cqw solid #2b1650;
  border-radius: .6cqw;
  box-shadow: .2cqw .2cqw 0 #2b1650;
  transform: rotate(-3deg);
}
.home-door-sign.invite { color: #c0287f; }
.home-chalk {
  display: grid; place-items: center; align-content: center; gap: .2cqw;
  font-family: var(--font-verdana); font-weight: 700; font-size: 1.3cqw; color: #7dff9a;
  text-shadow: 0 0 .5cqw #2fff7a;
  pointer-events: none;
}
.home-chalk .home-chalk-head { font-size: .95cqw; letter-spacing: .2em; color: #ffe36e; text-shadow: 0 0 .5cqw #ffb000; }
.home-riding { display: grid; gap: .5cqw; text-decoration: none; }
.home-riding span {
  padding: .4cqw .7cqw;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.3cqw;
  color: #2b1650;
  background: #fff6c8;
  border: .2cqw solid #2b1650;
  border-radius: .3cqw;
  box-shadow: .25cqw .25cqw 0 #2b1650;
  transform: rotate(2deg);
}
.home-riding span:nth-child(2n) { transform: rotate(-2deg); background: #d8fff0; }

/* My Doll: the avatar's own panel beside the picture (step 9) */
.home-stage { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; align-items: stretch; }
.home-doll {
  display: flex; flex-direction: column;
  contain: size;   /* the picture sets the height; the panel just matches it */
  background: linear-gradient(#fff8d8, #ffd6f0);
  border: 6px ridge #c9a4ff;
  box-shadow: 0 0 0 3px #2b1650, 0 0 28px rgba(201, 164, 255, .75);
  overflow: hidden;
}
.home-doll-title {
  margin: 0; padding: 5px 8px;
  font-family: var(--font-verdana); font-weight: 700; font-size: 14px;
  color: #fff; background: linear-gradient(#b07cff, #6a35c8);
  border-bottom: 3px solid #2b1650;
}
.home-doll-stand {
  position: relative; min-height: 0; flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 10px 6px 4px;
  background:
    radial-gradient(ellipse 60% 6% at 50% 96%, rgba(43, 22, 80, .25), transparent),
    radial-gradient(circle at 20% 15%, #fff 1.5px, transparent 2px) 0 0 / 34px 34px,
    linear-gradient(#e8dcff, #fff2fa);
}
.home-doll-figure { height: 100%; aspect-ratio: 60 / 150; }
.home-doll-figure svg { display: block; width: 100%; height: 100%; }
.home-doll-freddie { position: absolute; right: 4px; bottom: 4px; width: 42%; }
.home-doll-freddie svg { display: block; width: 100%; height: auto; }
.home-doll-shelf {
  display: flex; justify-content: center; gap: 2px; flex-wrap: wrap;
  margin: 0; padding: 3px 4px 2px; list-style: none;
  background: linear-gradient(#c9845a, #a0603a);
  border-top: 3px solid #2b1650;
}
.home-doll-shelf li { width: 26px; height: 30px; }
.home-doll-shelf svg { display: block; width: 100%; height: 100%; }
.home-doll-closet { margin-left: 6px; font-family: var(--font-times); font-size: .9rem; font-weight: 400; }
.home-doll .hb-twinkle, .outfit-figure .hb-twinkle { animation: hb-twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.home-doll-name {
  margin: 0; padding: 4px;
  font-family: var(--font-comic); font-weight: 700; font-size: 1.1rem;
  color: #c0287f; border-top: 3px solid #2b1650; background: #fff8d8;
}
@media (max-width: 760px) {
  .home-stage { grid-template-columns: 1fr; }
  .home-doll { height: 440px; }
}

.home-log { display: block; max-width: 420px; width: 100%; margin: 6px auto 0; text-decoration: none; text-align: center; line-height: 36px; }
.home-links {
  margin: 0;
  padding: 8px 12px;
  font-family: var(--font-times);
  font-size: 1.1rem;
  background: var(--paper);
  border: 4px ridge #c9a4ff;
  box-shadow: 0 0 0 2px #2b1650;
}

/* The Calendar (calendar.js): outer space, like Home Base */
.calendar-room { gap: 12px; padding-top: 14px; text-align: center; }
.cal-frame {
  padding: 14px;
  background:
    radial-gradient(1px 1px at 12px 18px, #fff 99%, transparent) 0 0 / 61px 53px,
    radial-gradient(1.5px 1.5px at 40px 30px, #ffe9ff 99%, transparent) 0 0 / 97px 83px,
    radial-gradient(ellipse at 20% 0%, rgba(255, 138, 216, .35), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(127, 240, 224, .3), transparent 60%),
    linear-gradient(#1a0f4a, #2a1260);
  border: 6px ridge #c9a4ff;
  box-shadow: 0 0 0 3px #2b1650, 0 0 28px rgba(201, 164, 255, .75);
}
.cal-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-title { text-align: center; }
.cal-month {
  display: inline-block; margin: 0; padding: 4px 22px;
  font-family: var(--font-comic); font-weight: 700; font-size: 1.8rem; color: #2b1650;
  background: linear-gradient(#fff8d8, #ffd6f0);
  border: 3px solid #2b1650; border-radius: 22px;
  box-shadow: 3px 3px 0 #2b1650, inset 0 4px 0 rgba(255, 255, 255, .7);
}
.cal-run {
  display: block; width: fit-content; margin: 8px auto 0; padding: 2px 14px;
  font-family: var(--font-comic); font-weight: 700; font-size: 1rem;
  color: #fff3b0; text-shadow: 0 0 8px #ff4fa8, 1px 1px 0 #2b1650;
  border: 2px dashed #ff9ad6; border-radius: 14px; background: rgba(43, 22, 80, .55);
}
.cal-run::before { content: "\2605  "; } .cal-run::after { content: "  \2605"; }
.cal-arrow {
  width: 50px; height: 50px; border-radius: 50%;
  font-family: var(--font-comic); font-weight: 700; font-size: 1.5rem; line-height: 1; color: #2b1650;
  background: radial-gradient(circle at 35% 30%, #fffbd8, #ffd23f 55%, #ff9a2a);
  border: 3px solid #2b1650; box-shadow: 2px 3px 0 #2b1650; cursor: pointer;
}
.cal-arrow:hover, .cal-arrow:focus-visible { transform: rotate(-8deg) scale(1.06); outline: none; box-shadow: 0 0 12px #fff59a, 2px 3px 0 #2b1650; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-weekday { font-family: var(--font-verdana); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff3b0; text-shadow: 0 0 6px #ff4fa8; padding: 2px 0; }
.cal-day {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 82px; padding: 4px 6px; text-align: left;
  font: inherit; color: #2b1650; cursor: pointer;
  background: linear-gradient(#fdfaff, #ece2ff);
  border: 2.5px solid #2b1650; border-radius: 12px;
  box-shadow: 2px 3px 0 #2b1650, inset 0 5px 0 rgba(255, 255, 255, .8);
}
.cal-day:hover, .cal-day:focus-visible { outline: none; transform: translateY(-2px); box-shadow: 0 0 12px #fff59a, 2px 3px 0 #2b1650, inset 0 5px 0 rgba(255, 255, 255, .8); }
.cal-day.today { background: linear-gradient(#fffbe0, #ffe98a); box-shadow: 0 0 16px #fff59a, 2px 3px 0 #2b1650, inset 0 5px 0 rgba(255, 255, 255, .8); }
.cal-day.turn { background: linear-gradient(#f5ecff, #d8c4ff); }
.cal-num { font-family: var(--font-comic); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.cal-today-tag {
  position: absolute; top: -9px; right: 6px; padding: 0 6px;
  font-family: var(--font-verdana); font-size: 10px; font-weight: 700; color: #fff;
  background: #ff4fa8; border: 2px solid #2b1650; border-radius: 8px;
}
.cal-earned {
  padding: 0 6px; font-family: var(--font-comic); font-weight: 700; font-size: .9rem; line-height: 1.3;
  color: #2b1650; background: linear-gradient(#d8ffb0, #7ad84f); border: 1.5px solid #2b1650; border-radius: 9px;
}
.cal-spent {
  padding: 0 6px; font-family: var(--font-comic); font-size: .78rem; line-height: 1.3;
  color: #2b1650; background: linear-gradient(#ffe0f2, #ff9ad6); border: 1.5px solid #2b1650; border-radius: 9px;
}
.cal-turn { font-size: .78rem; line-height: 1.1; font-style: italic; font-weight: 700; color: #6a35c8; }
.cal-foot { margin: 12px 0 0; color: #fff3b0; }
.cal-foot .link-btn { color: #7ff0ff; }
.cal-hint { margin-left: 10px; font-style: italic; }
.day-numbers { margin: 0; font-family: var(--font-comic); font-weight: 700; font-size: 1.05rem; }
.day-turn-line { margin: 0; font-style: italic; color: #6a35c8; }
/* pop-ups opened from the space rooms get a space-colored title bar */
body.space-room .pop .title-bar { background: linear-gradient(#b07cff, #6a35c8); }
body.space-room .pop { border-color: #c9a4ff; box-shadow: 0 0 0 3px #2b1650, 0 0 24px rgba(201, 164, 255, .7); }
body.space-room .pop .pop-body { background: linear-gradient(#fffdf6, #fff0fa); }
body.space-room .pop .recap-sub { color: #6a35c8; }
body.space-room .pop .recap-list { border-color: #c9a4ff; }
@media (max-width: 560px) {
  .cal-frame { padding: 8px; }
  .cal-grid { gap: 3px; }
  .cal-day { min-height: 60px; padding: 3px; border-radius: 8px; }
  .cal-earned, .cal-spent { padding: 0 3px; font-size: .7rem; }
  .cal-turn, .cal-hint { font-size: .66rem; }
  .cal-month { font-size: 1.3rem; padding: 3px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-day:hover, .cal-day:focus-visible, .cal-arrow:hover, .cal-arrow:focus-visible { transform: none; }
}

/* My Collection (treasures.js): a trophy shelf in space */
.collection-room { gap: 12px; padding-top: 14px; text-align: center; }
.collection-frame {
  display: grid; gap: 16px; padding: 16px;
  background:
    radial-gradient(1px 1px at 12px 18px, #fff 99%, transparent) 0 0 / 61px 53px,
    radial-gradient(ellipse at 80% 0%, rgba(255, 138, 216, .3), transparent 60%),
    linear-gradient(#1a0f4a, #2a1260);
  border: 6px ridge #c9a4ff;
  box-shadow: 0 0 0 3px #2b1650, 0 0 28px rgba(201, 164, 255, .75);
}
.shelf-title {
  width: fit-content; margin: 0 auto 6px; padding: 2px 18px;
  font-family: var(--font-comic); font-weight: 700; font-size: 1.2rem; color: #2b1650;
  background: linear-gradient(#fff8d8, #ffd6f0); border: 3px solid #2b1650; border-radius: 16px;
  box-shadow: 2px 2px 0 #2b1650;
}
.shelf-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 14px;
  margin: 0; padding: 10px 10px 14px; list-style: none;
  border-bottom: 10px solid #a0603a; box-shadow: 0 6px 0 #6b3d1f;
  background: linear-gradient(transparent 70%, rgba(201, 164, 255, .12));
}
.shelf-item { display: grid; justify-items: center; gap: 3px; width: 130px; }
.shelf-name { margin: 0; font-weight: 700; color: #fff3b0; line-height: 1.15; text-shadow: 1px 1px 0 #2b1650; }
.shelf-when { margin: 0; font-size: .85rem; font-style: italic; color: #d8c8ff; }
.shelf-empty { margin: 20px; font-style: italic; font-size: 1.15rem; color: #fff3b0; }
.treasure-preview { border: 3px solid #2b1650; border-radius: 10px; box-shadow: 2px 2px 0 #2b1650, 0 0 10px rgba(255, 245, 154, .4); overflow: hidden; }
.treasure-wallpaper { width: 96px; height: 96px; background-size: 96px 96px; image-rendering: pixelated; }
.treasure-decoration { width: 110px; height: 90px; background: #1a0f4a; }
.treasure-decoration svg { display: block; width: 100%; height: 100%; }
.treasure-marquee, .treasure-marquee-line {
  display: grid; place-items: center; width: 260px; min-height: 40px; padding: 4px 8px;
  font-family: var(--font-verdana); font-weight: 700; font-size: 13px; color: var(--marquee-text, #fff3b0);
  background: #2b1650;
}
.shelf-item:has(.treasure-marquee), .shelf-item:has(.treasure-marquee-line) { width: 270px; }
.treasure-doll { width: 64px; height: 160px; border: 0; box-shadow: none; background: transparent; }
.treasure-dog { width: 110px; border: 0; box-shadow: none; background: transparent; }
.treasure-doll svg, .treasure-dog svg { display: block; width: 100%; height: 100%; }
.treasure-figure { display: flex; justify-content: center; }
.treasure-figure .treasure-wallpaper { width: 160px; height: 160px; background-size: 96px 96px; }
.treasure-figure .treasure-decoration { width: 220px; height: 180px; }

/* The Wheel of the Year (wheel.js) */
/* Samhain: cobwebs in the corners of every box */
body.samhain .box, body.samhain .cal-frame, body.samhain .collection-frame, body.samhain .advent-frame {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg stroke='%23888' stroke-width='1' fill='none' opacity='.7'%3E%3Cpath d='M0 0L44 0M0 0L0 44M0 0L40 40M0 0L22 42M0 0L42 22M14 0Q12 12 0 14M28 0Q24 24 0 28M40 0Q34 34 0 40'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg stroke='%23888' stroke-width='1' fill='none' opacity='.7'%3E%3Cpath d='M44 0L0 0M44 0L44 44M44 0L4 40M44 0L22 42M44 0L2 22M30 0Q32 12 44 14M16 0Q20 24 44 28M4 0Q10 34 44 40'/%3E%3C/g%3E%3C/svg%3E");
  background-position: left top, right top;
  background-repeat: no-repeat;
}
.home-treat {
  position: absolute; z-index: 5;
  padding: .5cqw .4cqw;
  font-family: var(--font-comic); font-weight: 700; font-size: 1.2cqw; line-height: 1.1;
  color: #2b1650; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffb347 60%, #ff7a1a);
  border: .25cqw solid #2b1650; border-radius: 1cqw; box-shadow: 0 0 1.2cqw #ffb347, .2cqw .2cqw 0 #2b1650;
  cursor: pointer; animation: hb-wobble 2.4s ease-in-out infinite;
}
.treasure-candy { font-size: 64px; line-height: 1; }
.advent-room { gap: 12px; padding-top: 14px; text-align: center; }
.advent-frame {
  padding: 16px;
  background:
    radial-gradient(1px 1px at 12px 18px, #fff 99%, transparent) 0 0 / 61px 53px,
    radial-gradient(ellipse at 50% 0%, rgba(255, 79, 106, .3), transparent 60%),
    linear-gradient(#123a26, #0b2418);
  border: 6px ridge #e8364a;
  box-shadow: 0 0 0 3px #2b1650, 0 0 28px rgba(255, 210, 63, .6);
}
.advent-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.advent-door {
  position: relative; min-height: 84px; display: grid; place-items: center;
  font-family: var(--font-comic); font-weight: 700; color: #2b1650; cursor: pointer;
  background: linear-gradient(#fff8d8, #ffd6a0);
  border: 3px solid #2b1650; border-radius: 10px;
  box-shadow: 2px 3px 0 #2b1650, inset 0 5px 0 rgba(255, 255, 255, .8);
}
.advent-door:nth-child(3n) { background: linear-gradient(#ffe0e6, #ff9aa8); }
.advent-door:nth-child(3n+1) { background: linear-gradient(#e0fff0, #8ae0b4); }
.advent-num { font-size: 1.6rem; }
.advent-door.ready { box-shadow: 0 0 14px #fff59a, 2px 3px 0 #2b1650, inset 0 5px 0 rgba(255, 255, 255, .8); animation: hb-pulse 1.8s ease-in-out infinite; }
@keyframes hb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.advent-door.later { opacity: .72; }
.advent-door.open { background: linear-gradient(#2b1650, #4a2a8a); color: #fff3b0; }
.advent-door.open .advent-num { position: absolute; top: 4px; left: 8px; font-size: .9rem; }
.advent-gift { font-size: 1.6rem; color: #ffe36e; text-shadow: 0 0 8px #ff9ad6; }
.advent-points { font-family: var(--font-comic); font-weight: 700; font-size: 3rem; color: #2f9a4a; text-shadow: 2px 2px 0 #2b1650; }
@media (max-width: 560px) { .advent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .advent-door { min-height: 64px; } }
@media (prefers-reduced-motion: reduce) { .home-treat, .advent-door.ready { animation: none; } }

/* The Reward Gallery (gallery.js): a witchy oracle room */
.gallery-room { gap: 16px; }
.oracle-sign, .oracle-box, .oracle-card {
  color: #f4ead8;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 120, .14), transparent 60%), linear-gradient(#2a1238, #1a0a24);
  border: 3px double #d8b45a;
  box-shadow: 0 0 0 2px #120818, 0 0 24px rgba(216, 180, 90, .25);
  padding: 16px 20px;
}
.oracle-sign { text-align: center; }
.oracle-stars { margin: 0; color: #d8b45a; letter-spacing: .4em; font-size: 1.1rem; }
.oracle-head { margin: 4px 0; font-family: var(--font-times); font-style: italic; font-size: 2.2rem; color: #ffe8a8; text-shadow: 0 0 12px rgba(255, 210, 120, .6); }
.oracle-hello { margin: 0; font-style: italic; font-size: 1.15rem; color: #e8d8f0; }
.oracle-sub { margin: 0 0 8px; font-family: var(--font-times); font-style: italic; font-size: 1.4rem; color: #ffe8a8; border-bottom: 1px solid #6a4a2a; }
.oracle-empty { font-style: italic; color: #d8c8e8; }
.gallery-toc { margin: 0 0 12px; padding-left: 1.6em; display: grid; gap: 6px; font-size: 1.15rem; }
.gallery-toc a, .gallery-toc .link-btn { color: #ffd88a; }
.gallery-toc a:visited { color: #e8b8ff; }
.gallery-toc-link { font-weight: 700; white-space: pre-wrap; }
.gallery-toc-date { color: #c8b8d8; font-style: italic; }
.gallery-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 14px; font-family: var(--font-times); font-size: 1.2rem;
  background: #120818; border: 1px solid #d8b45a;
}
.gallery-nav a { color: #ffd88a; }
.gallery-nav a:visited { color: #ffd88a; }
.gallery-nav a[hidden] { display: inline; visibility: hidden; }
.oracle-card { max-width: 760px; margin: 14px auto 0; padding: 26px 34px 20px; text-align: center; border-width: 4px; border-radius: 14px; }
.oracle-number { margin: 0; font-family: var(--font-verdana); font-size: .85rem; letter-spacing: .3em; color: #d8b45a; }
.oracle-title { margin: 6px 0 2px; font-family: var(--font-times); font-style: italic; font-size: 2rem; color: #ffe8a8; text-shadow: 0 0 10px rgba(255, 210, 120, .5); }
.oracle-meta { margin: 0; font-style: italic; color: #d8c8e8; }
.oracle-rule { margin: 10px 0 14px; color: #d8b45a; letter-spacing: .6em; }
.oracle-text { text-align: left; font-size: 1.25rem; line-height: 1.6; color: #fbf3e4; }
.oracle-text p { margin: 0; white-space: pre-wrap; }
.oracle-text .rw-gap { height: .8em; }
.oracle-text .rw-h { margin: .4em 0 .2em; font-family: var(--font-times); font-weight: 700; color: #ffe8a8; }
.oracle-text .rw-h1, .oracle-text .rw-h2 { font-size: 1.45rem; } .oracle-text .rw-h3 { font-size: 1.3rem; } .oracle-text .rw-h4 { font-size: 1.15rem; font-style: italic; }
.oracle-text strong { color: #fff3c8; }
.oracle-text .rw-list { margin: .2em 0; padding-left: 1.4em; }
.oracle-text .rw-quote { padding-left: .8em; border-left: 2px solid #d8b45a; font-style: italic; }
.oracle-text .rw-rule { text-align: center; color: #d8b45a; letter-spacing: .6em; }
.oracle-where { margin: 18px 0 0; font-size: .95rem; color: #b8a8c8; }
.oracle-where .link-btn { color: #ffd88a; }
.oracle-pop .title-bar { background: linear-gradient(#5a2a7a, #2a1238); color: #ffe8a8; }
.oracle-pop textarea { font-family: var(--font-body); font-size: 1.05rem; }
.bulk-pop { width: min(760px, 96vw); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bulk-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-height: 52vh; overflow: auto; }
.bulk-piece { padding: 8px 10px; background: #fffaf0; border: 2px solid #5a2a7a; border-radius: 8px; }
.bulk-guess { margin: 0 0 6px; font-weight: 700; color: #5a2a7a; }
.bulk-lines { max-height: 180px; overflow: auto; font-size: .98rem; border-top: 1px dashed #c9a4ff; padding-top: 4px; }
.bulk-line { display: flex; gap: 6px; align-items: flex-start; min-height: 1.3em; white-space: pre-wrap; }
.bulk-cut { flex: none; width: 26px; height: 22px; padding: 0; font-size: 14px; line-height: 1; background: #fff0f8; border: 1px solid #ff9ad6; border-radius: 4px; cursor: pointer; opacity: .55; }
.bulk-line:hover .bulk-cut, .bulk-cut:focus-visible { opacity: 1; }
.bulk-join { display: block; margin: 0 0 6px; }
@media (max-width: 560px) { .oracle-card { padding: 18px 14px; } .oracle-title { font-size: 1.5rem; } }

/* The Doll Shop and Dress-Up (dollshop.js) */
.doll-room { gap: 12px; padding-top: 14px; text-align: center; }
.doll-shelf { display: grid; gap: 6px; }
.doll-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.doll-card {
  display: grid; justify-items: center; align-content: start; gap: 4px; width: 150px; padding: 8px;
  background: linear-gradient(#fff8d8, #ffe6f4); border: 3px solid #2b1650; border-radius: 12px; box-shadow: 2px 3px 0 #2b1650;
}
.doll-name { margin: 0; font-weight: 700; line-height: 1.15; color: #2b1650; }
.doll-price { margin: 0; font-family: var(--font-comic); font-weight: 700; color: #c0287f; }
.doll-card .btn { font-size: .9rem; }
.doll-preview { width: 70px; height: 175px; }
.doll-preview svg { display: block; width: 100%; height: 100%; }
.doll-preview-freddie, .doll-preview-freddieExtra { width: 120px; height: 120px; display: flex; align-items: flex-end; }
.doll-preview-freddie svg, .doll-preview-freddieExtra svg { height: auto; }
.doll-preview-background { width: 110px; height: 175px; border: 2px solid #2b1650; border-radius: 8px; overflow: hidden; }
.dress-frame {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: 14px; padding: 14px;
  background: radial-gradient(1px 1px at 12px 18px, #fff 99%, transparent) 0 0 / 61px 53px, linear-gradient(#1a0f4a, #2a1260);
  border: 6px ridge #c9a4ff; box-shadow: 0 0 0 3px #2b1650, 0 0 28px rgba(201, 164, 255, .75);
}
.dress-stage {
  position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 520px; overflow: hidden;
  background: linear-gradient(#e8dcff, #fff2fa); border: 3px solid #2b1650; border-radius: 14px;
}
.dress-stage.drop-ready { box-shadow: 0 0 0 4px #fff59a, 0 0 24px #fff59a; }
.dress-bg { position: absolute; inset: 0; }
.dress-bg svg { display: block; width: 100%; height: 100%; }
.dress-doll { position: relative; height: 480px; aspect-ratio: 60 / 150; margin-bottom: 8px; }
.dress-doll svg { display: block; width: 100%; height: 100%; }
.dress-dog { position: absolute; right: 8px; bottom: 6px; width: 34%; }
.dress-dog svg { display: block; width: 100%; height: auto; }
.home-doll-stand .dress-bg { z-index: 0; }
.home-doll-stand .home-doll-figure, .home-doll-stand .home-doll-freddie { z-index: 1; }
.dress-wardrobe { display: grid; align-content: start; gap: 10px; }
.dress-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dress-tab {
  padding: 4px 12px; font-family: var(--font-comic); font-weight: 700; font-size: .95rem; color: #2b1650; cursor: pointer;
  background: linear-gradient(#fff8d8, #ffd6f0); border: 2px solid #2b1650; border-radius: 14px;
}
.dress-tab.on { background: linear-gradient(#fff3b0, #ffd23f); box-shadow: 0 0 10px #fff59a; }
.dress-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-height: 470px; overflow: auto; padding: 4px; }
.dress-tile {
  display: grid; justify-items: center; gap: 2px; width: 104px; padding: 6px 4px; cursor: grab; touch-action: none;
  font: inherit; color: #2b1650; background: linear-gradient(#fdfaff, #ece2ff); border: 2.5px solid #2b1650; border-radius: 12px;
}
.dress-tile .doll-preview { width: 52px; height: 130px; pointer-events: none; }
.dress-tile .doll-preview-freddie, .dress-tile .doll-preview-freddieExtra { width: 90px; height: 90px; }
.dress-tile .doll-preview-background { width: 78px; height: 120px; }
.dress-tile.on { background: linear-gradient(#fffbe0, #ffe98a); box-shadow: 0 0 12px #fff59a; }
.dress-tile-name { font-size: .85rem; font-weight: 700; line-height: 1.1; }
.dress-ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg); opacity: .85; width: 104px; display: grid; justify-items: center; background: #fffbe0; border: 2.5px dashed #2b1650; border-radius: 12px; padding: 4px; }
.dress-ghost .doll-preview { width: 52px; height: 130px; }
.dress-empty { color: #fff3b0; font-style: italic; }
.dress-empty a { color: #7ff0ff; }
.dress-foot { margin: 0; }
.dress-foot .link-btn { color: #7ff0ff; }
@media (max-width: 760px) { .dress-frame { grid-template-columns: 1fr; } .dress-stage { min-height: 380px; } .dress-doll { height: 340px; } }

/* My Closet (avatar.js) */
.closet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.closet-card {
  display: grid; justify-items: center; gap: 4px; padding: 8px; text-align: center;
  background: linear-gradient(#fff8d8, #ffe6f4); border: 4px ridge #c9a4ff;
}
.closet-card.wearing { border-color: #ffd23f; box-shadow: 0 0 12px rgba(255, 210, 63, .8); }
.closet-figure { height: 230px; aspect-ratio: 60 / 150; }
.closet-figure svg, .outfit-figure svg { display: block; width: 100%; height: 100%; }
.closet-name { margin: 0; font-weight: 700; line-height: 1.15; }
.closet-found { margin: 0; font-size: .9rem; font-style: italic; }
.closet-wearing { margin: 0; font-family: var(--font-comic); font-weight: 700; color: #c0287f; }
.outfit-figure { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 260px; margin: 0 auto; }
.outfit-doll { height: 100%; aspect-ratio: 60 / 150; }
.outfit-dog { width: 150px; }
.outfit-dog svg { display: block; width: 100%; height: auto; }
.freddie-figure { width: 130px; height: 134px; display: flex; align-items: flex-end; }
.freddie-figure svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .home-doll .hb-twinkle, .outfit-figure .hb-twinkle { animation: none; }
  .hb-wordart span, .hb-new, .home-scene *, .hb-ufo, .hb-ufo svg { animation: none !important; }
  .hb-comet { display: none; }
}

/* ---------- Pages (the ledger and the shop) ---------- */
.view { display: grid; gap: 14px; min-width: 0; }

/* ---------- The Reward Shop ---------- */
.shop-sign { text-align: center; }

.shop-hello {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}

/* the old-school text menu: [ Big Ticket | Permissions | ... ] */
.aisles {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 2.2;
}

.aisles a { padding: 6px 2px; }

.shelf-note { text-align: center; font-style: italic; }

/* item cards sit on the shelf in a grid */
.item-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 8px;
  text-align: center;
  background: var(--white);
  border: 3px double var(--accent-2);
}

.item-pic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 10px;
  background: var(--soft);
  border: 2px dotted var(--accent-2);
}

.item-pic svg, .price-coin svg, .written-quill svg, .ticket-pic svg, .receipt-pic svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

.item-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.item-about {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.25;
}

.item-written {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  color: #6a3fa0;
}

.written-quill { display: inline-block; width: 14px; height: 14px; }

/* the ORDERED mark, like an ink stamp */
.item-ordered {
  margin: 0;
  padding: 1px 6px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  color: #a02828;
  border: 2px solid #a02828;
  transform: rotate(-2deg);
}

.price-tag {
  margin: auto 0 0;      /* pushes price and Buy to the bottom of the card */
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
}

.price-coin { display: inline-block; width: 16px; height: 16px; }

.buy-btn { width: 100%; min-width: 0; padding: 6px 8px; }

/* "Not enough points": faded, not gray, and no other comment */
.btn:disabled,
.btn:disabled:active {
  opacity: .5;
  cursor: default;
  font-size: .8rem;
  border-style: outset;
  border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
  padding: 6px 8px;
}

.edit-link { min-height: 32px; font-size: .9rem; }

/* the Big Ticket gets a bigger card */
.ticket-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--white);
  border: 4px double var(--accent);
}

.ticket-pic {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 8px;
  background: var(--soft);
  border: 2px dotted var(--accent-2);
}

.ticket-body { flex: 1; min-width: 0; display: grid; gap: 6px; }

.ticket-name {
  margin: 0;
  font-family: var(--font-times);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}

.ticket-named { margin: 0; font-size: .82rem; color: #444; }

.ticket-body .price-tag { margin: 0; }

/* receipts */
.receipts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.receipt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 2px;
  border-bottom: 2px dashed var(--accent-2);
}

.receipt:last-child { border-bottom: 0; }

.receipt-pic { display: block; width: 28px; height: 28px; }
.receipt-main { min-width: 0; }
.receipt-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.receipt-meta { margin: 0; font-size: .8rem; color: #444; }
.refund-btn { min-width: 0; min-height: 40px; padding: 4px 12px; font-size: .85rem; }
.refund-btn:active { padding: 5px 11px 3px 13px; }

.receipt.refunded .receipt-name { text-decoration: line-through; color: #666; }

.refunded-tag, .kept-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  color: #2f7a2f;
}

.kept-tag { color: var(--accent); }

.older-receipts { margin-top: 12px; }
.older-receipts summary { display: inline-block; list-style: none; cursor: pointer; }
.older-receipts summary::-webkit-details-marker { display: none; }

/* pop-up choice grids for the shop editor */
.chip-grid.four { grid-template-columns: repeat(4, 1fr); }
.chip-grid.single { grid-template-columns: 1fr; }

.recap-sub {
  margin: 4px 0 0;
  font-family: var(--font-times);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}

/* ---------- Phones: the sidebar moves to the top ---------- */
@media (max-width: 700px) {
  /* wider gaps on a phone so the wallpaper shows around the boxes */
  .page { padding: 0 16px; }
  .layout, main { gap: 22px; }
  .site-head { margin: 18px 0 22px; }
  h1 { font-size: 1.9rem; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .link-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6px;
  }
  .construction { display: flex; align-items: center; }
  .construction .stripes { flex: 0 0 28px; height: 22px; }
  .construction-text { flex: 1; }
}

/* very narrow phones */
@media (max-width: 360px) {
  .chip-grid.categories { grid-template-columns: repeat(2, 1fr); }
  .digit { width: 20px; font-size: 24px; }
}

/* ---------- Respect "reduce motion" on the phone ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-track span + span { display: none; }
  .marquee { white-space: normal; text-align: center; }
  .blink, .spin, .new-tag, .cat-icon .sparkle, .digit.roll span { animation: none; }
}

/* ---------- Secret Archive: Sealed Cards and THE TURN's to-do list (2026-10-04) ---------- */
.sealed-held { margin: 0 0 4px; font-family: var(--font-times); font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.sealed-list, .turn-tasks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.sealed-item { border: 2px dashed var(--soft); border-radius: 6px; padding: 8px 10px; background: var(--paper, #fff); }
.sealed-item.held { border-style: solid; border-color: var(--accent); }
.sealed-item p { margin: 0 0 3px; }
.sealed-item-head { font-weight: 700; }
.sealed-item-log { font-size: .95rem; opacity: .85; }
.turn-task { display: flex; align-items: baseline; gap: 8px; }
.turn-task-mark { color: var(--accent); font-size: 1.2rem; }
.turn-task.done span:nth-child(2) { text-decoration: line-through; opacity: .7; }
.first-open { margin: 6px 0 10px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }

/* ---------- The Quiz Archive: an old card catalogue (2026-10-04) ---------- */
.quiz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.quiz-tab { font-family: var(--font-times); font-size: 1.05rem; font-weight: 700; padding: 8px 14px 6px; min-height: 44px;
  background: #f6e9c8; color: #5a3b1a; border: 2px solid #8a6a3a; border-bottom-width: 4px; border-radius: 10px 10px 0 0; cursor: pointer; }
.quiz-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.quiz-search { margin-bottom: 8px; }
.quiz-list { display: grid; gap: 12px; }
.quiz-card { background: #fffdf4; border: 2px solid #8a6a3a; box-shadow: 3px 3px 0 #c9b48a;
  background-image: linear-gradient(#fffdf4 0 2.4rem, #d9534f 2.4rem calc(2.4rem + 2px), transparent calc(2.4rem + 2px)); }
.quiz-card-top { min-height: calc(2.4rem - 8px); align-items: center; }
.quiz-card-head { list-style: none; cursor: pointer; padding: 8px 12px 12px; display: grid; gap: 6px; }
.quiz-card-head::-webkit-details-marker { display: none; }
.quiz-card-top { display: flex; justify-content: space-between; gap: 8px; font-family: "Courier New", Courier, monospace; font-size: .9rem; color: #5a3b1a; }
.quiz-card-q { font-size: 1.12rem; line-height: 1.35; padding-top: 6px; }
.quiz-mark { display: inline-flex; align-items: center; gap: 6px; font-family: "Courier New", Courier, monospace; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .06em; color: #5a3b1a; justify-self: start; border: 1px dashed #8a6a3a; padding: 2px 8px; background: #fff; }
.quiz-mark-pic { width: 18px; height: 18px; display: inline-block; }
.quiz-mark-pic svg { width: 100%; height: 100%; }
.quiz-body { padding: 4px 14px 12px; border-top: 2px dashed #c9b48a; background: #fffdf4; }
.quiz-row { margin: 10px 0; }
.quiz-label { margin: 0; font-family: "Courier New", Courier, monospace; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.quiz-value { margin: 2px 0 0; line-height: 1.4; }
.quiz-pre .quiz-value { white-space: pre-wrap; }
.quiz-note { border-left: 4px double var(--accent); padding: 2px 0 2px 12px; line-height: 1.45; }
.quiz-note .rw-h { font-family: var(--font-times); font-weight: 700; color: var(--accent); margin: 10px 0 4px; }
.quiz-note .rw-p, .quiz-note .rw-quote { margin: 0 0 6px; }
.quiz-note .rw-gap { margin: 0; height: 4px; }
.quiz-note .rw-rule { text-align: center; color: var(--accent); }
.quiz-gap { font-style: italic; opacity: .85; margin: 8px 0; }
.quiz-related { padding: 0; }
.quiz-rules { margin: 0; padding-left: 1.2em; line-height: 1.4; }
.quiz-rules li { margin-bottom: 4px; }

/* ---------- Ready Rewards (ready.js, 2026-10-04) ---------- */
.item-ready { margin: 2px 0; font-family: Verdana, sans-serif; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #6b5a40; }
.item-ready.is-ready { color: var(--accent); font-weight: 700; }
.ready-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.ready-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border: 2px dashed var(--soft); background: var(--white); }
.ready-row.is-ready { border-style: solid; border-color: var(--accent); }
.ready-name { flex: 1 1 12em; }
.ready-state { font-family: Verdana, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.is-ready .ready-state { color: var(--accent); font-weight: 700; }
.ready-out { font-size: .95rem; }
.ready-preview { margin: 6px 0; padding-left: 1.2em; }
.ready-preview li.no { opacity: .8; font-style: italic; }
.oracle-depends { margin-top: 1.2em; padding-top: .8em; border-top: 3px double #d8b45a; text-align: left; color: #fbf3e4; }
.oracle-depends-head { margin: 0 0 .2em; font-family: var(--font-times); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffe8a8; }
.oracle-depends-list { margin: 0; padding-left: 1.4em; line-height: 1.5; }
.oracle-written { margin: .6em 0 0; font-style: italic; opacity: .8; }

/* ---------- Quiz cards in play (quizbank.js, 2026-10-04) ---------- */
.quiz-top-buttons { justify-content: center; }
.play-lead { margin: 0; text-align: center; }
.play-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: 8px; }
.play-diff:disabled { opacity: .45; cursor: default; }
.play-kicker { margin: 0; font-family: "Courier New", Courier, monospace; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.play-question { font-size: 1.2rem; line-height: 1.45; }
.play-question p { margin: 0 0 6px; }
.play-plain { font-size: 1.05rem; font-style: italic; border-left: 3px solid var(--soft); padding-left: 10px; }
.play-answers { display: grid; gap: 8px; }
.play-answer { display: flex; align-items: baseline; gap: 10px; text-align: left; white-space: normal; }
.play-letter { font-family: var(--font-times); font-weight: 700; font-size: 1.2rem; color: var(--accent); }
.play-points { margin: 0; text-align: center; font-family: var(--font-times); font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.play-note { max-height: 50vh; overflow-y: auto; }
.bank-format summary { cursor: pointer; color: #0000ee; text-decoration: underline; }
.bank-format pre { white-space: pre-wrap; font-size: .85rem; background: var(--white); border: 1px dashed var(--soft); padding: 8px; }

/* ---------- Building Salt House (house.js, 2026-10-04) ---------- */
.house-picture { width: 100%; max-width: 900px; margin: 0 auto; border: 4px solid #ffe36e; border-radius: 14px; overflow: hidden; box-shadow: 0 0 18px #b04fd8; }
.house-picture svg { display: block; width: 100%; height: auto; }
.house-preview { display: inline-block; width: 64px; height: 64px; background: #12093a; border: 2px solid #2b1650; border-radius: 10px; flex: none; }
.house-preview svg { width: 100%; height: 100%; display: block; }
.house-built { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.house-built-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.house-built-name { font-weight: 700; color: #fff3c8; flex: 1 1 12em; }
.house-built-when { font-size: .95rem; color: #d8ccff; }
.house-built .empty { color: #fff3c8; }
.house-card .house-preview { width: 84px; height: 84px; margin: 0 auto; }
.house-owned { margin: 0; font-weight: 700; color: #2fa04a; }
.house-shop-title { margin-top: 6px; }
.house-grew { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.house-grew-item { display: flex; align-items: center; gap: 12px; font-weight: 700; }