/* Trunk or Treat: the public page, the host's manage page, the lot map, and
   the Board Portal bits. Friendly Halloween for an elementary school on the
   same palette as You've Been Boo'ed: pumpkin orange, twilight purple, a
   night sky. No gore, no gold. */
@font-face {
  font-family: "RT Boo";
  src: url("../fonts/Creepster-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.rt-trunk {
  --tr-orange: #f26b1d;
  --tr-orange-deep: #c8520f;
  --tr-orange-soft: #ffb066;
  --tr-purple: #5b2a86;
  --tr-purple-deep: #3a1a5c;
  --tr-night: #1b1430;
  --tr-cream: #fff6e9;
  --tr-paper: #fffaf3;
  --tr-ink: #241a3a;
  --tr-font: "RT Boo", "Chalkboard SE", "Comic Sans MS", cursive;
  max-width: var(--rt-maxw, min(1440px, 94vw));
  margin: 0 auto 40px;
  color: var(--tr-ink);
}

/* The same tokens inside the Board Portal, where there is no .rt-trunk root (markers painted hollow without them). */
.rt-trunk-map, .rt-trunk-studio, .rt-trunk-pop { --tr-orange: #f26b1d; --tr-orange-deep: #c8520f; --tr-orange-soft: #ffb066; --tr-purple: #5b2a86; --tr-purple-deep: #3a1a5c; --tr-night: #1b1430; --tr-cream: #fff6e9; --tr-paper: #fffaf3; --tr-ink: #241a3a; }

/* ---- Hero ---------------------------------------------------------------- */
.rt-trunk-weather {
  margin: 0 0 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--tr-orange);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.rt-trunk-hero {
  position: relative;
  overflow: hidden;
  padding: 44px 28px 40px;
  border-radius: 22px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(1.8px 1.8px at 41% 30%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 56% 14%, rgba(255,255,255,.8) 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 67% 48%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 78% 22%, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(1.7px 1.7px at 88% 58%, #fff 60%, transparent 62%),
    radial-gradient(circle at 20% 30%, rgba(242, 107, 29, 0.28), transparent 42%),
    linear-gradient(180deg, #120c22 0%, var(--tr-night) 45%, var(--tr-purple-deep) 100%);
}
.rt-trunk-hero::after {
  /* the lot, an orange hill at the bottom */
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -70px;
  height: 110px;
  border-radius: 50% 50% 0 0;
  background: var(--tr-orange-deep);
  opacity: .9;
}
.rt-trunk-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.rt-trunk-kicker { margin: 0 0 6px; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; font-weight: 700; color: var(--tr-orange-soft); }
.rt-trunk .rt-trunk-hero .rt-trunk-title { margin: 0 0 14px; font-family: var(--tr-font); font-weight: 400; line-height: .95; color: #fff; }
.rt-trunk .rt-trunk-hero .rt-trunk-title-lead { color: #fff; }
.rt-trunk-title-lead { display: block; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: .04em; }
.rt-trunk-title-shout { display: block; font-size: clamp(3rem, 9vw, 5.6rem); color: var(--tr-orange); text-shadow: 0 6px 0 var(--tr-orange-deep), 0 10px 24px rgba(0,0,0,.45); }
.rt-trunk-when, .rt-trunk-where { margin: 4px 0; font-size: 1.15rem; font-weight: 700; }
/* No underlined links on this page, ever (Furi, 10-14): a link shows itself by color and weight. */
.rt-trunk a:not(.rt-btn), .rt-trunk a:not(.rt-btn):hover, .rt-trunk a:not(.rt-btn):focus { text-decoration: none; }
.rt-trunk-where a { color: #fff; }
.rt-trunk-intro { margin: 14px auto 0; max-width: 620px; font-size: 1.05rem; color: var(--tr-cream); }
.rt-trunk-pills { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rt-trunk-pills li { padding: 6px 14px; border-radius: 999px; background: var(--tr-cream); border: 1px solid var(--tr-orange-soft); color: var(--tr-ink); font-weight: 700; font-size: .92rem; text-shadow: none; }
.rt-trunk-cta { margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rt-trunk-hero .rt-btn { background: var(--tr-orange); color: #fff; border-color: var(--tr-orange); }
.rt-trunk-hero .rt-btn:hover { background: var(--tr-orange-deep); border-color: var(--tr-orange-deep); }
.rt-trunk-hero .rt-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.rt-trunk-hero .rt-btn--ghost:hover { background: rgba(255,255,255,.12); }

/* ---- Sections ------------------------------------------------------------ */
.rt-trunk-sec { margin: 36px auto 0; max-width: 900px; }
.rt-trunk-sec > h3 { margin: 0 0 10px; font-family: var(--tr-font); font-weight: 400; font-size: 2rem; letter-spacing: .03em; color: var(--tr-purple); text-align: center; }
.rt-trunk-sec > h4 { margin: 22px 0 8px; text-align: center; color: var(--tr-purple-deep); }
.rt-trunk-lead, .rt-trunk-count { text-align: center; margin: 0 0 14px; }
.rt-trunk-count { font-weight: 700; color: var(--tr-orange-deep); }
.rt-trunk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rt-trunk-chips li { padding: 8px 14px; border-radius: 999px; background: var(--tr-cream); border: 1px solid var(--tr-orange-soft); font-weight: 700; color: var(--tr-ink); }
.rt-trunk-chips--prize li { background: #fff; border-color: var(--tr-purple); color: var(--tr-purple-deep); }
.rt-trunk-chips--prize i { color: var(--tr-orange); margin-right: 6px; }
.rt-trunk-rules { list-style: none; margin: 0; padding: 0; max-width: 640px; margin-inline: auto; }
.rt-trunk-rules li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px dashed rgba(91,42,134,.25); }
.rt-trunk-rules li:last-child { border-bottom: 0; }
.rt-trunk-rules i { position: absolute; left: 4px; top: 11px; color: var(--tr-orange); }
.rt-trunk-questions { text-align: center; font-weight: 700; }
.rt-trunk-questions a { color: var(--tr-purple); font-weight: 800; }
.rt-trunk-questions a:hover, .rt-trunk-questions a:focus-visible { color: var(--tr-orange-deep); }

/* ---- Notices + form ------------------------------------------------------ */
/* The sign-up notice wears the notice kit (assets/css/notice.css); this keeps its place. */
.rt-trunk-notice { margin: 0 0 16px; }
.rt-trunk-notice--link { font-weight: 400; word-break: break-all; }
.rt-trunk-closed { text-align: center; font-weight: 700; color: var(--tr-purple-deep); }
.rt-trunk-form { background: #fff; border: 2px solid var(--tr-orange-soft); border-radius: 18px; padding: 22px 22px 16px; }
.rt-trunk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rt-trunk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.rt-trunk-grid label, .rt-trunk-form > label, .rt-trunk-student label { display: block; font-weight: 700; font-size: .92rem; min-width: 0; }
.rt-trunk-grid label[hidden], .rt-trunk-form [hidden] { display: none; }
.rt-trunk-grid input, .rt-trunk-form textarea, .rt-trunk-student input { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
.rt-trunk-grid select { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
/* The Board Portal's "What Families See": the real family form, framed as a preview (FURIOPS-382). */
.rt-trunk-preview-box { margin: 10px 0 14px; }
/* The summary is the Board Portal's blue pill: its words are the pill's own light color (Furi, 10-15: purple read dark on the blue). */
.rt-trunk-preview-box > summary { cursor: pointer; font-weight: 700; color: var(--rt-on-primary, #fff); }
.rt-trunk-preview { margin-top: 10px; padding: 12px; border: 2px dashed var(--tr-orange-soft, #ffb066); border-radius: 18px; background: var(--tr-paper, #fffaf3); }
.rt-trunk-preview .rt-trunk-sec { margin-top: 0; }
.rt-trunk-preview-note { margin: 0 0 12px; text-align: center; font-weight: 700; color: var(--tr-orange-deep, #c8520f); }
.rt-trunk-preview-foot { margin: 10px 0 0; padding: 4px 8px; border-radius: 8px; text-align: center; font-size: .9rem; opacity: .85; }
.rt-trunk-preview-foot.is-flash { animation: rt-trunk-flash 1.2s ease; }
@keyframes rt-trunk-flash { 0%, 100% { background: transparent; } 30% { background: #ffe2c4; } }
.rt-trunk-guess-hist { display: inline-block; margin-left: 6px; font-size: .88rem; vertical-align: top; }
.rt-trunk-guess-hist summary { cursor: pointer; color: var(--tr-purple, #5b2a86); }
.rt-trunk-guess-hist ol { margin: 6px 0 2px 1.2em; padding: 0; }
.rt-trunk-guess-hist li.is-current b { color: var(--tr-orange-deep, #c8520f); }
.rt-trunk-wide { grid-column: 1 / -1; }
.rt-trunk-form > label.rt-trunk-wide { margin-top: 14px; }
.rt-trunk-conn { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }
.rt-trunk-conn legend { font-weight: 700; font-size: .92rem; padding: 0; margin-bottom: 6px; }
.rt-trunk-conn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-trunk-grid .rt-trunk-pill { display: inline-flex; align-items: center; margin: 0; position: relative; cursor: pointer; }
.rt-trunk-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rt-trunk-pill span { display: inline-block; line-height: 1.25; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--tr-purple); color: var(--tr-purple); font-weight: 700; }
.rt-trunk-pill input:checked + span { background: var(--tr-purple); color: #fff; }
.rt-trunk-pill input:focus-visible + span { outline: 3px solid var(--tr-orange); outline-offset: 2px; }
.rt-trunk-students { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--tr-paper); }
.rt-trunk-students-h { margin: 0 0 8px; font-weight: 700; }
.rt-trunk-students-h small { display: block; font-weight: 400; color: #555; }
.rt-trunk-student { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.rt-trunk-student-x { border: 0; background: transparent; color: #999; font-size: 1.1rem; padding: 10px 6px; cursor: pointer; }
.rt-trunk-student-x:hover { color: #b3141c; }
.rt-trunk-form-rules { margin: 16px 0 0; font-size: .92rem; color: #555; text-align: center; }
.rt-trunk-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 0; }
.rt-trunk-actions--center { justify-content: center; }
.rt-trunk .rt-trunk-form .rt-btn--ghost, .rt-trunk .rt-trunk-actions .rt-btn--ghost { background: transparent; color: var(--tr-purple); border: 2px solid var(--tr-purple); }
.rt-trunk-form .rt-btn:not(.rt-btn--ghost):not(.rt-btn--plain) { background: var(--tr-orange); border-color: var(--tr-orange); color: #fff; }
/* The sign-up form is a sheet over the page: a dialog that answers the first
   tap with nothing to scroll to (a scroll-to-reveal lost the first tap on a
   phone, Furi 10-2). A bottom sheet on phones, a centered card on a desk. */
.rt-trunk-form-wrap { text-align: center; }
.rt-trunk-sheet { border: 0; padding: 0; margin: auto; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: 22px; background: #fff; color: var(--tr-ink, #241a3a); box-shadow: 0 30px 80px rgba(27, 20, 48, .5); overflow: hidden; text-align: left; }
.rt-trunk-sheet:not([open]) { display: none; }
.rt-trunk-sheet::backdrop { background: rgba(27, 20, 48, .66); backdrop-filter: blur(2px); }
.rt-trunk-sheet-inner { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.rt-trunk-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--tr-night, #1b1430); color: #fff; }
.rt-trunk-sheet-head h3 { margin: 0; font-family: var(--tr-font); font-weight: 400; font-size: 1.9rem; letter-spacing: .03em; color: var(--tr-orange, #f26b1d); }
.rt-trunk-sheet-x { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; }
.rt-trunk-sheet-x:hover, .rt-trunk-sheet-x:focus-visible { background: var(--tr-orange, #f26b1d); }
.rt-trunk-sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 18px 18px; }
.rt-trunk-sheet .rt-trunk-form { border: 0; border-radius: 0; padding: 0; }
.rt-trunk-sheet .rt-trunk-notice { margin-bottom: 14px; }
@keyframes rt-trunk-sheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.rt-trunk-sheet[open] { animation: rt-trunk-sheet-in .26s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .rt-trunk-sheet[open] { animation: none; } }
html.rt-trunk-sheet-on { overflow: hidden; }
/* No JavaScript: the link's target shows the same form inline. */
.rt-trunk-sheet:target:not([open]) { display: block; position: static; width: auto; max-height: none; margin: 0; box-shadow: none; border: 2px solid var(--tr-orange-soft); border-radius: 18px; }
.rt-trunk-sheet:target:not([open]) .rt-trunk-sheet-inner { max-height: none; }
.rt-trunk-sheet:target:not([open]) .rt-trunk-sheet-x { display: none; }
/* Buttons keep their words in every state. The theme paints a ghost label
   near-black on light sections and on hover, and a tapped button on a phone
   keeps showing its hover state (Furi, 10-2: black on dark). */
.rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:hover, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:focus, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:active,
.rt-trunk .rt-trunk-form-wrap .rt-btn--lg, .rt-trunk .rt-trunk-form-wrap .rt-btn--lg:hover, .rt-trunk .rt-trunk-form-wrap .rt-btn--lg:focus, .rt-trunk .rt-trunk-form-wrap .rt-btn--lg:active { color: #fff !important; }
.rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:not(.rt-btn--ghost), .rt-trunk .rt-trunk-form-wrap .rt-btn--lg { background: var(--tr-orange) !important; border-color: var(--tr-orange) !important; }
.rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:not(.rt-btn--ghost):hover, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:not(.rt-btn--ghost):focus-visible, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn:not(.rt-btn--ghost):active,
.rt-trunk .rt-trunk-form-wrap .rt-btn--lg:hover, .rt-trunk .rt-trunk-form-wrap .rt-btn--lg:focus-visible, .rt-trunk .rt-trunk-form-wrap .rt-btn--lg:active { background: var(--tr-orange-deep) !important; border-color: var(--tr-orange-deep) !important; }
.rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost:hover, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost:focus, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost:active { background: transparent !important; border: 2px solid rgba(255,255,255,.65) !important; color: #fff !important; }
.rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost:hover, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost:focus-visible, .rt-trunk .rt-trunk-hero .rt-trunk-cta .rt-btn--ghost:active { background: rgba(255,255,255,.16) !important; border-color: #fff !important; }
.rt-trunk .rt-trunk-actions .rt-btn--ghost, .rt-trunk .rt-trunk-actions .rt-btn--ghost:focus { background: transparent !important; border: 2px solid var(--tr-purple) !important; color: var(--tr-purple) !important; box-shadow: none; }
.rt-trunk .rt-trunk-actions .rt-btn--ghost:hover, .rt-trunk .rt-trunk-actions .rt-btn--ghost:focus-visible, .rt-trunk .rt-trunk-actions .rt-btn--ghost:active { background: var(--tr-purple) !important; border-color: var(--tr-purple) !important; color: #fff !important; }
.rt-trunk-fine { font-size: .9rem; color: #555; text-align: center; margin-top: 24px; }
.rt-trunk-check { display: block; margin: 8px 0; }
.rt-trunk-check .rt-trunk-check-note { display: block; margin: 2px 0 0 1.6em; font-size: .85em; opacity: .75; }
.rt-trunk-withdraw { margin-top: 18px; border-color: #e5e5e5; }
.rt-trunk-withdraw-h { margin: 0 0 6px; font-weight: 700; }
.rt-trunk-manage-head { text-align: center; margin-bottom: 18px; }
.rt-trunk-manage-head h1 { font-family: var(--tr-font); font-weight: 400; color: var(--tr-purple); letter-spacing: .03em; }
.rt-trunk-manage-lead { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; }
.rt-trunk-manage-facts { margin: 0 0 6px; color: #444; }

/* ---- The night's games: Best Trunk vote, Guess the Candies ---------------- */
.rt-trunk-vote-form select, .rt-trunk-guess-form input { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
.rt-trunk-vote-done { margin: 0; padding: 10px 14px; border-radius: 12px; background: #eef8ee; font-weight: 700; color: #2f8f46; align-self: center; }
.rt-trunk-vote-done i { color: #2f8f46; margin-right: 4px; }
.rt-trunk-winner-list { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
.rt-trunk-winner-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; padding: 12px 0; border-bottom: 1px dashed rgba(91,42,134,.25); align-items: center; }
.rt-trunk-winner-list li:last-child { border-bottom: 0; }
.rt-trunk-winner-list i { grid-row: 1 / span 2; font-size: 1.5rem; color: var(--tr-orange); }
.rt-trunk-winner-list b { color: var(--tr-purple); }
.rt-trunk-winner-list span { grid-column: 2; }
.rt-trunk-candy-result { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--tr-purple-deep); }
.rt-trunk-candy-result i { color: var(--tr-orange); margin-right: 6px; }

/* ---- Cauldron ------------------------------------------------------------ */
.rt-trunk-cauldron-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--tr-night); color: var(--tr-cream); border-radius: 18px; padding: 18px 22px; }
.rt-trunk-cauldron-svg { width: 160px; height: 160px; }
.rt-trunk-cauldron-svg .rt-trunk-foam { transition: opacity .5s ease; }
.rt-trunk-cauldron-words p { margin: 0 0 8px; }
.rt-trunk-cauldron-dates { font-weight: 700; color: var(--tr-orange-soft); }
.rt-trunk-cauldron-level { font-size: 1.4rem; }
.rt-trunk-cauldron-level b { color: var(--tr-orange); font-size: 2rem; }

/* ---- The map ------------------------------------------------------------- */
.rt-trunk-map { margin: 0 auto; }
.rt-trunk-map-stage { position: relative; border-radius: 14px; overflow: hidden; background: #222; }
.rt-trunk-map-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.rt-trunk-map-layer { position: absolute; inset: 0; touch-action: none; }
/* Zoom, pan and full screen: the canvas (picture + markers) rides a translate/scale; markers counter-scale so a pin stays a pin. */
.rt-trunk-map-stage { touch-action: none; }
.rt-trunk-map-canvas { position: relative; width: 100%; transform-origin: 0 0; will-change: transform; }
.rt-trunk-map-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: flex; flex-direction: row; gap: 6px; }
.rt-trunk-map-zoom button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(27, 20, 48, .84); color: #fff; font-size: 1rem; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); cursor: pointer; touch-action: manipulation; padding: 0; }
.rt-trunk-map-zoom button:hover, .rt-trunk-map-zoom button:focus-visible { background: var(--tr-orange, #f26b1d); }
.rt-trunk-studio { position: relative; }
.rt-trunk-studio.is-full, .rt-trunk-map.is-full { position: fixed; inset: 0; z-index: 99990; margin: 0; padding: 0; max-width: none; background: #0f0a1c; display: flex; flex-direction: column; overflow: hidden; }
.rt-trunk-studio.is-full .rt-trunk-toolbar { flex: 0 0 auto; min-width: 0; max-width: 100%; margin: 0; padding: 8px 10px; background: var(--tr-night, #1b1430); color: #fff; overflow-x: auto; flex-wrap: nowrap; }
.rt-trunk-studio.is-full .rt-trunk-toolbar-h, .rt-trunk-studio.is-full .rt-trunk-publish { color: #fff; white-space: nowrap; }
.rt-trunk-studio.is-full .rt-trunk-tool { flex: 0 0 auto; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.rt-trunk-studio.is-full .rt-trunk-tool.is-on { background: var(--tr-orange, #f26b1d); border-color: var(--tr-orange, #f26b1d); }
.rt-trunk-studio.is-full [data-rt-trunk-hint] { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--tr-orange, #f26b1d); color: #fff; white-space: nowrap; }
.rt-trunk-studio.is-full .rt-trunk-editor { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.rt-trunk-studio.is-full .rt-trunk-map, .rt-trunk-map.is-full { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.is-full .rt-trunk-map-stage { flex: 1 1 auto; min-height: 0; border-radius: 0; background: #0f0a1c; }
.is-full .rt-trunk-legend { flex: 0 0 auto; margin: 0; padding: 6px 10px; color: #fff; background: var(--tr-night, #1b1430); }
.rt-trunk-studio.is-full .rt-trunk-rail { flex: 0 0 auto; min-width: 0; max-width: 100%; max-height: 26vh; border-radius: 0; background: #241a3a; color: #fff; display: flex; gap: 6px; overflow: auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
.rt-trunk-studio.is-full .rt-trunk-rail-h, .rt-trunk-studio.is-full [data-rt-trunk-rail-empty] { flex: 0 0 auto; align-self: center; margin: 0 6px 0 0; }
.rt-trunk-studio.is-full .rt-trunk-rail-h small { display: none; }
.rt-trunk-studio.is-full .rt-trunk-chip { flex: 0 0 auto; width: 170px; margin: 0; color: #241a3a; }
html.rt-trunk-full-on { overflow: hidden; }
/* A pin is a share of the lot picture's width (the Pin Size slider, --tr-pin, default 2.5 = about one parking space), so it
   scales with the zoom and two pins can sit on two neighboring spaces; a floor in SCREEN pixels (divided by the zoom) keeps it
   tappable when the lot is small and lets the lot's own proportion win as soon as the zoom brings a space past it. */
.rt-trunk-map-layer { container-type: size; }
.rt-trunk-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  width: calc(var(--mw, 1) * max(calc(var(--tr-pin, 2.5) * 1cqw), calc(12px / var(--tr-zoom, 1))));
  height: calc(var(--mh, 1) * max(calc(var(--tr-pin, 2.5) * 1cqw), calc(12px / var(--tr-zoom, 1))));
  border-radius: 50%;
  border-radius: max(calc(var(--tr-pin, 2.5) * 0.5cqw), calc(6px / var(--tr-zoom, 1)));
  border: 2px solid #fff;
  border-width: max(calc(var(--tr-pin, 2.5) * 0.09cqw), calc(1.5px / var(--tr-zoom, 1)));
  background: var(--tr-purple);
  color: #fff;
  font-weight: 800;
  font-size: 8px;
  font-size: max(calc(var(--tr-pin, 2.5) * 0.5cqw), calc(7px / var(--tr-zoom, 1)));
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 .12em .4em rgba(0,0,0,.45);
  cursor: pointer;
  padding: 0;
  touch-action: none;
}
.rt-trunk-marker.is-zone { opacity: .92; }
.rt-trunk-marker--trunk { background: var(--tr-orange); }
.rt-trunk-marker--trunk.is-taken { background: var(--tr-orange-deep); }
.rt-trunk-marker--vendor { background: #1f6f8b; }
.rt-trunk-marker--entertainment { background: #b0338d; }
.rt-trunk-marker--station { background: #2f8f46; }
.rt-trunk-marker--pta { background: #2566b6; }
.rt-trunk-marker--restroom { background: #555; }
.rt-trunk-marker--entrance, .rt-trunk-marker--exit { background: #111; }
.rt-trunk-marker--power { background: #8a6d00; }
.rt-trunk-marker--first_aid { background: #b3141c; }
.rt-trunk-marker-l { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .2em; white-space: nowrap; font-size: .8em; font-weight: 700; background: rgba(0,0,0,.72); color: #fff; padding: .15em .5em; border-radius: .5em; pointer-events: none; }
.rt-trunk-marker--key { position: static; transform: none; width: 26px; height: 26px; font-size: .8rem; border-width: 3px; cursor: default; box-shadow: none; vertical-align: middle; }
.rt-trunk-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .9rem; font-weight: 700; }
.rt-trunk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rt-trunk-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.rt-trunk-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(91,42,134,.25); }
.rt-trunk-list li.is-open { opacity: .6; }
.rt-trunk-list-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--tr-orange); color: #fff; font-weight: 800; display: grid; place-items: center; }
.rt-trunk-list-t { font-weight: 700; }
.rt-trunk-list-t small { display: block; font-weight: 400; color: #555; }
.rt-trunk-pop { position: absolute; z-index: 5; min-width: 180px; max-width: 260px; background: #fff; color: var(--tr-ink); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); transform: translate(-50%, 12px); font-size: .92rem; }
.rt-trunk-pop b { display: block; color: var(--tr-purple); }
/* On a phone the popover is a sheet along the bottom of the screen (a short stage clipped it). */
.rt-trunk-pop--sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; max-width: none; min-width: 0; border-radius: 18px 18px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 99995; box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); font-size: 1rem; }
.rt-trunk-pop--sheet b { font-size: 1.15rem; }
.rt-trunk-pop--edit.rt-trunk-pop--sheet label { font-size: .9rem; margin: 0 0 8px; }
.rt-trunk-pop--edit.rt-trunk-pop--sheet input, .rt-trunk-pop--edit.rt-trunk-pop--sheet select { font-size: 16px; }
.rt-trunk-pop--sheet .rt-trunk-pop-acts { margin-top: 10px; }
.rt-trunk-pop small { display: block; color: #555; }

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 720px) {
  .rt-trunk-hero { padding: 32px 18px 36px; border-radius: 16px; }
  .rt-trunk-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-trunk-form { padding: 16px 14px 12px; }
  .rt-trunk-form-wrap .rt-trunk-actions--center .rt-btn--lg { display: block; white-space: normal; text-align: center; }
  .rt-trunk-sheet { width: 100%; max-width: none; margin: auto 0 0; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; }
  .rt-trunk-sheet-inner { max-height: 92vh; max-height: 92dvh; }
  .rt-trunk-sheet-body { padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .rt-trunk-sheet:target:not([open]) { width: auto; margin: 0; border-radius: 18px; }
  .rt-trunk-student { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
  .rt-trunk-student label:first-child { grid-column: 1 / -1; }
  .rt-trunk-cauldron-row { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .rt-trunk-actions { flex-direction: column-reverse; align-items: stretch; }
  .rt-trunk-actions .rt-btn { text-align: center; }
}

/* ---- Board Portal: the editor, the rail, the day of ---------------------- */
.rt-trunk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.rt-trunk-toolbar-h { font-weight: 700; margin-right: 4px; }
.rt-trunk-tool { border: 2px solid var(--rt-primary, #2566b6); background: #fff; color: var(--rt-primary, #2566b6); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.rt-trunk-tool.is-on { background: var(--rt-primary, #2566b6); color: #fff; }
.rt-trunk-publish { margin-left: auto; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.rt-trunk-pinsize { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.rt-trunk-pinsize input[type="range"] { width: 110px; }
.rt-trunk-editor { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; align-items: start; }
.rt-trunk-map--edit .rt-trunk-map-layer { cursor: crosshair; }
.rt-trunk-map--edit .rt-trunk-marker { cursor: grab; }
.rt-trunk-map--edit .rt-trunk-marker.is-dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); z-index: 3; }
.rt-trunk-marker.is-drop { outline: .15em solid #fff; box-shadow: 0 0 0 .3em var(--tr-orange, #f26b1d); }
.rt-trunk-rail { background: #f6f7f9; border-radius: 12px; padding: 10px 12px; max-height: 520px; overflow: auto; }
.rt-trunk-rail-h { margin: 0 0 8px; font-weight: 700; }
.rt-trunk-chip { display: block; margin: 0 0 6px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #d9dde3; font-size: .9rem; font-weight: 700; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.rt-trunk-chip.is-lift { opacity: .45; border-style: dashed; }
.rt-trunk-chip small { display: block; font-weight: 400; color: #555; }
.rt-trunk-chip.is-on { border-color: var(--tr-orange, #f26b1d); box-shadow: 0 0 0 3px rgba(242, 107, 29, .35); }
.rt-trunk-rail-h small { display: block; font-weight: 400; font-size: .8rem; color: #555; }
.rt-trunk-chip i { margin-right: 4px; }
.rt-trunk-chip--trunk i { color: var(--tr-orange, #f26b1d); }
.rt-trunk-chip--vendor i { color: #1f6f8b; }
.rt-trunk-chip--entertainment i { color: #b0338d; }
.rt-trunk-chip--station i { color: #2f8f46; }
.rt-trunk-chip--ghost { position: fixed; z-index: 99999; transform: translate(-50%, -50%); pointer-events: none; opacity: .9; box-shadow: 0 8px 24px rgba(0,0,0,.3); width: 200px; }
.rt-trunk-pop--edit { min-width: 220px; }
.rt-trunk-pop--edit label { display: block; font-size: .8rem; font-weight: 700; margin: 0 0 6px; }
.rt-trunk-pop--edit input, .rt-trunk-pop--edit select { display: block; width: 100%; font-weight: 400; margin-top: 2px; }
.rt-trunk-pop-size { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; }
.rt-trunk-pop-size span { flex: 0 0 100%; font-size: .8rem; font-weight: 700; }
.rt-trunk-pop-size label { flex: 1 1 0; font-size: .8rem; font-weight: 700; margin: 0; }
.rt-trunk-pop-size input { display: block; width: 100%; font-weight: 400; margin-top: 2px; }
.rt-trunk-pop-acts { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 0; }
.rt-trunk-linkbtn { border: 0; background: transparent; color: var(--rt-primary, #2566b6); font-weight: 700; cursor: pointer; padding: 2px 4px; text-decoration: none; font-size: .85rem; }
/* Delete on a vendor row: the same link button in a warning red, so it
   never reads as one more status, and a step away from the Set button. */
.rt-trunk-linkbtn--danger { color: #b3261e; }
.rt-trunk-acts .rt-trunk-linkbtn--danger { margin-top: 8px; }
/* Phone: a row's actions share one wrapped line with thumb-sized links,
   so Delete is never a 19px target two pixels under Set. */
@media (max-width: 720px) {
  .rt-board-table td.rt-trunk-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .8rem; white-space: normal; }
  .rt-board-table td.rt-trunk-acts .rt-trunk-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .7rem; }
  .rt-board-table td.rt-trunk-acts .rt-trunk-linkbtn--danger { margin-top: 0; margin-left: auto; }
}
.rt-trunk-danger { color: #b3141c; }
.rt-trunk-spotn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tr-orange, #f26b1d); color: #fff; font-weight: 800; }
.rt-trunk-kids, .rt-trunk-msg { display: block; font-size: .85rem; color: #444; }
.rt-trunk-msg--chair { color: #8a4b00; font-style: italic; }
.rt-trunk-rowlink { word-break: break-all; }
.rt-trunk-warn { color: #8a4b00; }
.rt-trunk-upload { margin: 0 0 10px; }
.rt-trunk-upload label { cursor: pointer; }
.rt-trunk-needs { border: 1px solid #d9dde3; border-radius: 10px; padding: 8px 12px 4px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.rt-trunk-needs legend { font-weight: 700; padding: 0 4px; }
.rt-trunk-needs label { font-size: .85rem; font-weight: 700; }
.rt-trunk-needs input { display: block; margin-top: 2px; width: 70px; }
.rt-trunk-needs label:last-child input { width: 220px; }
.rt-trunk-cands { list-style: none; margin: 0; padding: 0; }
.rt-trunk-cands li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #d9dde3; }
.rt-trunk-import-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0 12px; }
.rt-trunk-import-table th, .rt-trunk-import-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e5e5e5; }
.rt-trunk-import-table tr.is-already td { color: #777; }
.rt-trunk-import-table tr.is-invalid td { color: #b3141c; }
.rt-trunk-import-done { color: #2f8f46; font-weight: 700; }
.rt-trunk-cauldron-live { margin: 0 0 16px; }
.rt-trunk-cauldron-live input[type="range"] { width: 100%; max-width: 480px; }
.rt-trunk-gate { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; background: var(--tr-night, #1b1430); color: #fff; font-weight: 700; }
.rt-trunk-gate-n { font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--tr-orange-soft, #ffb066); }
.rt-trunk-gate.is-soon .rt-trunk-gate-n { color: var(--tr-orange, #f26b1d); }
.rt-trunk-gate.is-closed .rt-trunk-gate-n { color: #c8520f; font-size: 1.4rem; }
.rt-trunk-daylist { list-style: none; margin: 0; padding: 0; }
.rt-trunk-day { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5e5e5; }
.rt-trunk-day.is-in { background: #eef8ee; }
.rt-trunk-day-spot { font-weight: 800; color: var(--tr-orange-deep, #c8520f); }
.rt-trunk-day-who small { display: block; color: #555; font-weight: 400; }
.rt-trunk-day-btn { min-width: 110px; }
.rt-trunk-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 99999; background: #241a3a; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; }
.rt-trunk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.rt-trunk-toast.is-bad { background: #b3141c; }
.rt-trunk-game > summary { cursor: pointer; }
.rt-trunk-game-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.rt-trunk-game-row .rt-trunk-msg { flex-basis: 100%; }
.rt-trunk-game-row input[name="g_actual"] { width: 110px; }
.rt-trunk-tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; margin: 0 0 10px; }
.rt-trunk-tally-h { margin: 0 0 6px; font-weight: 800; }
.rt-trunk-tally-list { margin: 0 0 8px; padding: 0; list-style: none; }
.rt-trunk-tally-list li { padding: 4px 0; border-bottom: 1px dashed #d9dde3; font-size: .92rem; }
.rt-trunk-tally-list small { color: #555; }
.rt-trunk-tally-n { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--tr-orange, #f26b1d); color: #fff; font-weight: 800; font-size: .85rem; }
.rt-trunk-tally-pick { display: block; font-size: .85rem; font-weight: 700; }
.rt-trunk-tally-pick select { display: block; width: 100%; font-weight: 400; margin-top: 2px; }
@media (max-width: 900px) {
  .rt-trunk-editor { grid-template-columns: minmax(0, 1fr); }
  .rt-trunk-rail { max-height: 220px; }
  .rt-trunk-day { grid-template-columns: 70px minmax(0, 1fr); }
  .rt-trunk-day-btn { grid-column: 1 / -1; }
}

/* ---- The banner scene and its critters (Furi, 10-14) -------------------- */
/* The sky behind the picture is the picture's own: its top row (#101325) and stars like its stars, so the
   stars run all the way to the top of the banner however tall the words make it (Furi, 10-14: no black bar). */
.rt-trunk-hero.has-art { --tr-sky: #101325; background-color: var(--tr-sky); background-image: radial-gradient(circle at 23px 41px, #fff 1.7px, transparent 2.3px), radial-gradient(circle at 151px 17px, #fff 1.5px, transparent 2.1px), radial-gradient(circle at 207px 128px, rgba(255, 255, 255, .92) 1.7px, transparent 2.3px), radial-gradient(circle at 318px 66px, #fff 1.6px, transparent 2.2px), radial-gradient(circle at 92px 231px, rgba(255, 255, 255, .9) 1.5px, transparent 2.1px), radial-gradient(circle at 377px 244px, #fff 1.7px, transparent 2.3px), radial-gradient(circle at 37px 23px, rgba(255, 255, 255, .55) .7px, transparent 1.2px), radial-gradient(circle at 118px 77px, rgba(255, 255, 255, .45) .7px, transparent 1.2px), radial-gradient(circle at 61px 109px, rgba(255, 255, 255, .5) .6px, transparent 1.1px), radial-gradient(circle at 149px 121px, rgba(255, 255, 255, .4) .7px, transparent 1.2px); background-size: 263px 191px, 263px 191px, 263px 191px, 409px 287px, 409px 287px, 409px 287px, 173px 131px, 173px 131px, 173px 131px, 173px 131px; background-repeat: repeat; padding: 44px 28px calc(22% + 10px); min-height: min(654px, 51.2vw); }
/* The hero is 1163px wide at most (the page column), so 56.25 percent of its width is at most 654px and about 51.2vw below that. */
.rt-trunk-hero.has-art::after { display: none; }
/* The scene is a 16:9 layer: the backdrop picture with the figures laid on it by percent. */
.rt-trunk-scene { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 16 / 9; background: var(--tr-hero-art) center bottom / 100% auto no-repeat; z-index: 0; }
.rt-trunk-figure { position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.rt-trunk-figure img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rt-trunk-figure:focus-visible { outline: 3px solid var(--tr-orange-soft); outline-offset: 4px; border-radius: 14px; }
.rt-trunk-figure--bat { animation: rt-trunk-flap 5s ease-in-out infinite alternate; }
.rt-trunk-figure.is-play img { animation: rt-trunk-boo .9s ease-in-out; }
.rt-trunk-figure--truck.is-play img { animation: rt-trunk-bounce .9s ease-in-out; }
.rt-trunk-figure--moon.is-play img { animation: rt-trunk-glow 1.2s ease-in-out; }
.rt-trunk-figure--zombie.is-play img { animation: rt-trunk-hop .9s ease-in-out; }
@keyframes rt-trunk-flap { from { transform: translate(0, 0); } to { transform: translate(14px, -16px); } }
@keyframes rt-trunk-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px) rotate(-2deg); } 50% { transform: translateY(0); } 75% { transform: translateY(-6px) rotate(2deg); } }
@keyframes rt-trunk-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 18px #fff) brightness(1.2); } }
@keyframes rt-trunk-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px) rotate(-5deg); } 60% { transform: translateY(0); } 80% { transform: translateY(-8px) rotate(4deg); } }
.rt-trunk-hero.has-art .rt-trunk-hero-inner { position: relative; z-index: 1; }
.rt-trunk-countdown { margin: 10px auto 0; }
.rt-countdown-boxes { display: inline-flex; gap: 8px; }
.rt-countdown-box { display: inline-grid; justify-items: center; min-width: 64px; padding: 6px 8px 4px; border-radius: 12px; background: var(--tr-cream); color: var(--tr-ink); text-shadow: none; }
.rt-countdown-box b { font-family: var(--tr-font); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--tr-orange-deep); }
.rt-countdown-box small { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #555; }
.rt-countdown-words { display: block; margin-top: 6px; font-weight: 700; color: var(--tr-orange-soft); }
.rt-trunk-countdown.is-now .rt-countdown-words, .rt-trunk-countdown.is-after .rt-countdown-words { font-family: var(--tr-font); font-size: 1.6rem; color: #fff; }
.rt-trunk-hero.has-art .rt-trunk-hero-inner { max-width: 560px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
/* The scene keeps its clear sky down the middle: the bat flies at the left, the logo moon rises at the right. */
.rt-trunk-hero.has-art .rt-trunk-title-shout { text-shadow: 0 6px 0 var(--tr-orange-deep), 0 10px 24px rgba(0, 0, 0, .65); }
/* The place: the pin and the name on one centered line, the street centered under it (Furi, 10-14). White even
   once the maps link has been visited: the theme's visited color went navy on a navy sky. */
.rt-trunk-where { display: block; text-align: center; }
.rt-trunk-where-name { display: inline; }
.rt-trunk-where-addr { display: block; font-weight: 500; font-size: .95em; opacity: .92; }
.rt-trunk .rt-trunk-hero .rt-trunk-where a, .rt-trunk .rt-trunk-hero .rt-trunk-where a:visited { color: #fff; }
.rt-trunk .rt-trunk-hero .rt-trunk-where a:hover, .rt-trunk .rt-trunk-hero .rt-trunk-where a:focus-visible { color: var(--tr-orange-soft); }
.rt-trunk-critters { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rt-trunk-critter { position: absolute; pointer-events: auto; margin: 0; padding: 6px; border: 0; background: none; color: #fff; font-size: 2.3rem; line-height: 1; cursor: pointer; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); -webkit-tap-highlight-color: transparent; }
.rt-trunk-critter:focus-visible { outline: 3px solid var(--tr-orange-soft); outline-offset: 2px; border-radius: 12px; }
.rt-trunk-critter i { display: inline-block; }
.rt-trunk-critter--g1 { top: 14px; left: 5%; animation: rt-trunk-drift 7s ease-in-out infinite alternate; }
.rt-trunk-critter--g2 { top: 38px; left: 22%; font-size: 1.8rem; opacity: .92; animation: rt-trunk-drift 9s ease-in-out infinite alternate-reverse; }
.rt-trunk-critter.is-play i { animation: rt-trunk-boo .9s ease-in-out; }
.rt-trunk-web { position: absolute; top: 0; right: 0; width: 160px; height: 160px; opacity: .6; pointer-events: none; }
.rt-trunk-web svg { display: block; width: 100%; height: 100%; }
.rt-trunk-critter--spider { top: 58px; right: 9%; font-size: 1.9rem; color: #1b1430; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)) drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); transform-origin: 50% -40px; animation: rt-trunk-sway 4.5s ease-in-out infinite alternate; }
.rt-trunk-critter--spider::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 64px; background: rgba(255, 255, 255, .75); }
.rt-trunk-critter--spider.is-play { animation: rt-trunk-spider-drop 1.4s ease-in-out; }
@keyframes rt-trunk-drift { from { transform: translate(0, 0) rotate(-4deg); } to { transform: translate(44px, 12px) rotate(5deg); } }
@keyframes rt-trunk-boo { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes rt-trunk-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes rt-trunk-spider-drop { 0% { transform: translateY(0); } 45% { transform: translateY(72px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rt-trunk-critter, .rt-trunk-critter i { animation: none !important; } }
@media (max-width: 640px) {
  /* The phone: the whole scene as a strip under the words, the sky above fading into the picture's own top. */
  .rt-trunk-hero.has-art { min-height: 0; padding: 36px 0 0; display: flex; flex-direction: column; }
  .rt-trunk-hero.has-art .rt-trunk-hero-inner { order: 1; padding: 0 18px 18px; max-width: none; }
  .rt-trunk-hero.has-art .rt-trunk-scene { position: relative; order: 2; width: 100%; }
  .rt-countdown-box { min-width: 56px; }
  .rt-countdown-box b { font-size: 1.5rem; }
  .rt-trunk-critter { font-size: 1.7rem; }
  .rt-trunk-critter--g2 { display: none; }
  .rt-trunk-web { width: 110px; height: 110px; }
  .rt-trunk-critter--spider { font-size: 1.5rem; right: 8%; top: 42px; transform-origin: 50% -30px; }
  .rt-trunk-critter--spider::before { height: 46px; }
}