/* Tales (#133, D132): a tale's scene on the World's visual-novel frame (story.css), the Plot's painting at an hour, the
   Night Watch's board, a tale's end, the Hollow Almanac, and the card a place shows when a tale has a scene there. No
   inline styles (CSP): widths come from classes. */

/* ---- backdrops: the Plot's painting, cropped and lit for the hour */
.tl-bg { background: #0c0a18 url(/static/world/plot/main.webp) 24% 62% / cover no-repeat; animation: vn2Drift 52s ease-in-out infinite alternate; }
.tl-bg::before, .tl-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.tl-bg-plot-dawn::after { background: linear-gradient(180deg, rgba(255, 150, 120, .38), rgba(255, 214, 170, .12) 45%, rgba(40, 24, 70, .3)); mix-blend-mode: soft-light; }
.tl-bg-plot-dawn::before { background: radial-gradient(ellipse at 78% 18%, rgba(255, 214, 150, .45), transparent 55%); }
.tl-bg-plot-night, .tl-bg-hedge-night { filter: brightness(.42) saturate(.7) contrast(1.05); }
.tl-bg-plot-night::after, .tl-bg-hedge-night::after { background: linear-gradient(180deg, rgba(14, 16, 64, .55), rgba(20, 10, 46, .35)); }
.tl-bg-plot-night::before, .tl-bg-hedge-night::before { background-image: radial-gradient(circle at 12% 14%, #fff 0 1px, transparent 2px), radial-gradient(circle at 34% 8%, #dfe8ff 0 1px, transparent 2px), radial-gradient(circle at 58% 18%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 81% 10%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 26%, #dfe8ff 0 1px, transparent 2px), radial-gradient(circle at 22% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 92% 22%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 46% 4%, #fff 0 1px, transparent 2px); animation: tlTwinkle 4s ease-in-out infinite alternate; }
.tl-bg-hedge-night { background-position: 4% 74%; background-size: 260% auto; }
@keyframes tlTwinkle { from { opacity: .55; } to { opacity: 1; } }
.tl-bg-almanac { background: radial-gradient(ellipse at 50% 30%, #3a2a5a, #120a22 70%); animation: none; }
.tl-svg > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- the people and the props */
.tl .tl-child { right: 14%; height: 56%; }
.tl .tl-npc { left: 5%; height: 78%; animation-delay: .1s; }
.tl .vn2-fig.tl-child:only-of-type { right: auto; left: 22%; height: 60%; }
.tl-prop { position: absolute; z-index: 2; pointer-events: none; }
.tl-roshi { width: 86px; height: 112px; object-fit: cover; object-position: left center; image-rendering: pixelated; }
.tl-glow { animation: tlGlow 2.4s ease-in-out infinite; }
.tl-roshi.tl-glow { filter: hue-rotate(247deg) brightness(1.25) drop-shadow(0 0 10px rgba(200, 150, 255, .95)) drop-shadow(0 0 22px rgba(160, 90, 255, .6)); }
@keyframes tlGlow { 50% { opacity: .78; } }
.tl-p-glimi { right: 30%; bottom: 31%; } .tl-p-glimi .tl-roshi { width: 64px; height: 84px; transform: scaleX(-1); }
.tl-p-nest { right: 6%; bottom: 29%; width: min(36vw, 380px); } .tl-p-nest .tl-log { width: 100%; height: auto; display: block; }
.tl-p-nest .tl-roshi { position: absolute; }
.tl-p-nest .tl-mum { width: 62px; height: 81px; left: 58%; bottom: 58%; }
.tl-p-nest .tl-baby { width: 30px; height: 39px; bottom: 30%; } .tl-b1 { left: 14%; } .tl-b2 { left: 24%; animation-delay: .4s !important; } .tl-b3 { left: 34%; animation-delay: .8s !important; }
.tl-p-seed { right: 30%; bottom: 31%; width: min(8vw, 84px); filter: drop-shadow(0 0 18px rgba(200, 160, 255, .9)); animation: vn2Egg 2.6s ease-in-out infinite; } .tl-p-seed svg { width: 100%; height: auto; display: block; }
.tl-p-pet { left: 31%; bottom: 29%; } .tl-p-pet .tl-roshi { width: 74px; height: 96px; filter: hue-rotate(12deg) saturate(.6) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.tl-p-basket { left: 30%; bottom: 30%; width: 120px; } .tl-p-basket svg { width: 120px; height: auto; display: block; position: relative; z-index: 1; } .tl-p-basket .tl-roshi { position: absolute; left: 34px; bottom: 22px; width: 48px; height: 62px; }

/* ---- the box: what came of a choice */
.tl-said { margin: 0 0 6px; padding: 4px 10px; border-radius: 10px; background: rgba(206, 244, 27, .12); border: 1px solid rgba(206, 244, 27, .5); color: #eaffb0; font-size: 14px; }
.tl-said.tl-err { background: rgba(255, 92, 122, .12); border-color: rgba(255, 92, 122, .55); color: #ffd0d8; }
.tl-when { color: #ffd27a; }
.tl:has(.tl-sim) .vn2-box { max-height: 30%; }

/* ---- the Night Watch */
.tl-sim { position: absolute; z-index: 4; top: 2%; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 20px)); max-height: 64%; overflow: auto; padding: 10px 12px 12px; background: rgba(8, 8, 28, .9); border: 2px solid rgba(255, 214, 140, .55); border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); color: #f6f2ff; }
.tl-simh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 2px 8px; } .tl-simh b { font: 18px var(--nx-font-display); letter-spacing: .05em; text-transform: uppercase; color: #ffd27a; } .tl-simh span { color: #cbbfe8; font-size: 13px; }
.tl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tl-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 74px; padding: 4px 2px 3px; border: 1px solid rgba(160, 170, 255, .2); border-radius: 10px; background: linear-gradient(180deg, rgba(30, 34, 80, .7), rgba(14, 16, 40, .9)); color: #d8d2f0; font: 11px/1.15 var(--nx-font-body); text-align: center; }
.tl-cell svg { width: 100%; max-width: 72px; height: auto; display: block; }
.tl-cell.is-hedge { background: linear-gradient(180deg, rgba(10, 30, 18, .8), rgba(6, 16, 10, .95)); }
.tl-cell.is-here { border-color: #ffd27a; box-shadow: inset 0 0 0 1px #ffd27a, 0 0 14px rgba(255, 210, 122, .35); }
button.tl-cell { cursor: pointer; } button.tl-cell.is-step { border-color: rgba(11, 222, 251, .6); } button.tl-cell.is-step:hover, button.tl-cell.is-step:focus-visible { background: linear-gradient(180deg, rgba(11, 222, 251, .25), rgba(14, 16, 40, .9)); transform: translateY(-2px); outline: none; }
.tl-cn { display: block; margin-top: 2px; }
.tl-m { position: absolute; display: grid; place-items: center; }
.tl-mv { top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(90deg, #ffd27a, #ff9a6a); color: #2a1030; font: 700 12px var(--nx-font-display); }
.tl-ml { top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 10px 4px rgba(255, 210, 120, .55); }
.tl-ml.is-open { width: 16px; height: 16px; box-shadow: 0 0 22px 12px rgba(255, 220, 140, .7); }
.tl-mb { bottom: 20px; right: 10px; width: 14px; height: 10px; border-radius: 4px; background: #d9a65c; box-shadow: 0 0 0 2px #8a5a2a; }
.tl-mg { top: 30%; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #e2c8ff; box-shadow: 0 0 14px 6px rgba(190, 130, 255, .85); animation: tlGlow 1s ease-in-out infinite; }
.tl-setup { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; font-size: 14px; }
.tl-setup label { display: inline-flex; gap: 6px; align-items: center; } .tl-setup select { max-width: 13em; }
.tl-radio { gap: 4px !important; }
.tl-wait { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tl-tip { margin: 8px 2px 0; color: #b9b0d8; font-size: 12.5px; }
.tl-simnote { margin: 4px 0; color: #ffd27a; font: 600 14px var(--nx-font-body); }

/* ---- a tale told */
.tl-endcard { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; padding: 24px 28px; background: linear-gradient(180deg, #f8efd8, #ecdcb4); color: #2b2416; border-radius: 6px 18px 18px 6px; box-shadow: 0 18px 60px rgba(0, 0, 0, .6), inset 6px 0 0 #b8864a; text-align: center; }
.tl-kicker { margin: 0; font: 13px var(--nx-font-console, monospace); letter-spacing: .2em; text-transform: uppercase; color: #8a6a3a; }
.tl-endcard h2 { margin: 4px 0; font: 34px/1.1 Georgia, 'Times New Roman', serif; }
.tl-ending { margin: 0 0 12px; font: italic 18px Georgia, serif; color: #7a4a00; }
.tl-journal { margin: 0 0 12px; font: 16px/1.55 Georgia, serif; }
.tl-gifts { list-style: none; padding: 0; margin: 0 0 10px; color: #3a5a10; font-weight: bold; }
.tl-points { margin: 0 0 14px; color: #6a4a8a; font: 600 14px var(--nx-font-body); }

/* ---- the Hollow Almanac */
.tl-almanac { position: absolute; inset: 0; overflow: auto; padding: 18px clamp(12px, 4vw, 40px) 30px; background: radial-gradient(ellipse at 50% 0%, #3a2a5a, #120a22 70%); color: #2b2416; }
.tl-ah, .tl-tales, .tl-ways, .tl-journalist, .tl-regard, .tl-regardh, .tl-foot { max-width: 980px; margin-left: auto; margin-right: auto; }
.tl-ah { padding: 18px 22px 10px; background: linear-gradient(180deg, #f8efd8, #efe2c0); border-radius: 6px 18px 0 0; box-shadow: inset 8px 0 0 #b8864a; }
.tl-ah h2 { margin: 0; font: 30px/1.1 Georgia, serif; color: #3a2a10; } .tl-ah p { margin: 6px 0 10px; font: 15px/1.5 Georgia, serif; }
.tl-ah p.tl-record { margin: 8px 0 0; font: 12px var(--nx-font-body); color: #6a5230; } .tl-record a { color: #7a3f8a; } .tl-record a:hover { color: #b0109f; }
.tl-tabs { display: flex; gap: 6px; } .tl-almanac .tl-tab { padding: 6px 14px; border-radius: 10px 10px 0 0; background: #d9c8a0; color: #3a2a10; text-decoration: none; font: 600 14px var(--nx-font-body); } .tl-almanac .tl-tab.is-on { background: #fbf4e2; box-shadow: 0 -2px 0 #b8864a inset; }
/* buttons on parchment */
.tl-almanac .nx-btn, .tl-endcard .nx-btn { display: inline-block; padding: 6px 16px; border: 2px solid #6a4a10; border-radius: 999px; background: linear-gradient(180deg, #ffe7a8, #e8b85a); color: #3a2a10; box-shadow: 0 2px 0 #6a4a10; font: 700 14px var(--nx-font-body); letter-spacing: .02em; text-transform: none; text-decoration: none; text-shadow: none; }
.tl-almanac .nx-btn:hover, .tl-endcard .nx-btn:hover, .tl-almanac .nx-btn:focus-visible, .tl-endcard .nx-btn:focus-visible { transform: translateY(-1px); background: linear-gradient(180deg, #fff2c8, #f2c86a); }
.tl-endcard .nx-btn.console { background: #f4ead2; }
.tl-tales, .tl-ways, .tl-journalist { list-style: none; margin-top: 0; padding: 16px 22px 22px; background: #fbf4e2; border-radius: 0 0 18px 6px; box-shadow: inset 8px 0 0 #b8864a, 0 18px 40px rgba(0, 0, 0, .45); }
.tl-tales { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tl-tale { position: relative; padding: 14px 16px; border: 1px solid #d9c8a0; border-radius: 12px; background: #fffaf0; }
.tl-tale h3 { margin: 6px 0 4px; font: bold 19px Georgia, serif; } .tl-tale p { margin: 0 0 8px; font: 14px/1.45 Georgia, serif; }
.tl-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #e8dcc0; color: #6a5030; font: 600 11px var(--nx-font-body); letter-spacing: .06em; text-transform: uppercase; }
.tl-tale.is-new { border-color: #c9a24a; box-shadow: 0 0 0 2px rgba(201, 162, 74, .35), 0 6px 18px rgba(201, 162, 74, .25); } .tl-tale.is-new .tl-chip { background: linear-gradient(90deg, #ffd27a, #ff9a6a); color: #2a1030; }
.tl-tale.is-on .tl-chip { background: #2b4fa8; color: #fff; } .tl-tale.is-waiting .tl-chip { background: #8a7ab0; color: #fff; } .tl-tale.is-done .tl-chip { background: #3a7a3a; color: #fff; } .tl-tale.is-closed { opacity: .72; }
.tl-ended { font: italic 14px Georgia, serif; color: #3a5a10; }
.tl-almanac .dim { color: #8a7b57; }
.tl-way { padding: 12px 0 14px; border-bottom: 1px dashed #d9c8a0; } .tl-way:last-child { border-bottom: 0; }
.tl-wayh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .tl-wayh h3 { margin: 0; font: bold 19px Georgia, serif; } .tl-rank { font: 600 15px var(--nx-font-body); color: #7a4a00; } .tl-rank small { color: #8a7b57; font-weight: normal; }
.tl-bar { position: relative; height: 12px; margin: 8px 0 4px; border-radius: 999px; background: #e8dcc0; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.tl-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #c9a24a, #ff9a6a); }
.tl-way-wanderer .tl-fill { background: linear-gradient(90deg, #3a8a5a, #9ad06a); } .tl-way-trader .tl-fill { background: linear-gradient(90deg, #b8864a, #ffd27a); } .tl-way-fighter .tl-fill { background: linear-gradient(90deg, #a33, #ff8a5a); } .tl-way-lorekeeper .tl-fill { background: linear-gradient(90deg, #4a3a8a, #a88aff); }
.tl-p0 { width: 0; } .tl-p5 { width: 5%; } .tl-p10 { width: 10%; } .tl-p15 { width: 15%; } .tl-p20 { width: 20%; } .tl-p25 { width: 25%; } .tl-p30 { width: 30%; } .tl-p35 { width: 35%; } .tl-p40 { width: 40%; } .tl-p45 { width: 45%; } .tl-p50 { width: 50%; }
.tl-p55 { width: 55%; } .tl-p60 { width: 60%; } .tl-p65 { width: 65%; } .tl-p70 { width: 70%; } .tl-p75 { width: 75%; } .tl-p80 { width: 80%; } .tl-p85 { width: 85%; } .tl-p90 { width: 90%; } .tl-p95 { width: 95%; } .tl-p100 { width: 100%; }
.tl-wayn { margin: 0 0 4px; font: 13px var(--nx-font-body); color: #6a5030; } .tl-way p { margin: 0 0 6px; font: 14px/1.45 Georgia, serif; } .tl-way details { font: 14px Georgia, serif; } .tl-way summary { cursor: pointer; color: #2b4fa8; }
.tl-journalist li { padding: 8px 0; border-bottom: 1px dotted #d9c8a0; font: 15px/1.5 Georgia, serif; } .tl-journalist time { display: block; font: 12px var(--nx-font-console, monospace); color: #8a7b57; }
.tl-regardh { margin-top: 18px; color: #f4ead2; font: bold 17px Georgia, serif; } .tl-regard { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; } .tl-regard li { padding: 6px 12px; border-radius: 999px; background: #fbf4e2; font: 14px Georgia, serif; } .tl-hearts { color: #c2185b; letter-spacing: 1px; }
.tl-foot { color: #cbbfe8 !important; font-size: 13px; text-align: center; }

/* ---- the card a place shows when a tale has a scene there */
.tl-cards { position: absolute; z-index: 7; top: 12px; right: 12px; display: grid; gap: 8px; width: min(320px, calc(100% - 24px)); }
.tl-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 14px; border: 2px solid rgba(255, 214, 140, .7); border-radius: 16px; background: linear-gradient(180deg, rgba(40, 22, 70, .95), rgba(18, 10, 36, .95)); color: #fbf8ff; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 190, 110, .25); animation: tlCard 2.8s ease-in-out infinite; }
.tl-card b { font: 16px var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: #ffd27a; } .tl-card span:last-child { grid-column: 2; font-size: 13px; line-height: 1.35; color: #e6dcff; }
.tl-star { grid-row: span 2; align-self: center; font-size: 22px; color: #ffd27a; text-shadow: 0 0 12px rgba(255, 210, 122, .9); }
.tl-card:hover, .tl-card:focus-visible { transform: translateY(-2px); border-color: #ffd27a; outline: none; }
@keyframes tlCard { 50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 28px rgba(255, 190, 110, .5); } }

@media (max-width: 760px) {
  .tl .tl-child { right: 2%; height: 44%; } .tl .tl-npc { left: -4%; height: 60%; } .tl .vn2-fig.tl-child:only-of-type { left: 6%; height: 48%; }
  .tl-p-nest { width: 52vw; right: 2%; bottom: 40%; } .tl-p-glimi, .tl-p-seed { right: 18%; bottom: 42%; } .tl-p-pet, .tl-p-basket { left: 36%; bottom: 40%; }
  .tl-sim { top: 1%; max-height: 62%; padding: 8px; } .tl-cell { min-height: 58px; font-size: 10px; } .tl-grid { gap: 4px; }
  .tl:has(.tl-sim) .vn2-box { max-height: 34%; }
  .tl-cards { top: auto; bottom: 10px; right: 10px; left: 10px; width: auto; }
}

/* ---- D133: the Home at evening, painted backdrops, Kite */
.tl-bg-home-evening { background: #1a1020 url(/static/world/home/room.webp) 50% 60% / cover no-repeat; animation: none; }
.tl-bg-home-evening::after { background: linear-gradient(180deg, rgba(40, 20, 70, .5), rgba(255, 150, 80, .16) 70%, rgba(20, 10, 30, .4)); mix-blend-mode: multiply; }
.tl-bg-home-evening::before { background: radial-gradient(ellipse at 30% 40%, rgba(255, 200, 120, .35), transparent 50%); }
img.tl-img { object-fit: cover; object-position: 50% 100%; }
/* D142: the Wilds' roshi, each in its kind's colour (as the Hollow draws them) */
.tl-p-wild { right: 30%; bottom: 29%; } .tl-p-wild .tl-roshi { width: 74px; height: 96px; transform: scaleX(-1); }
.tl-p-herd { right: 4%; bottom: 31%; width: 150px; height: 84px; } .tl-p-herd .tl-roshi { position: absolute; bottom: 0; width: 62px; height: 81px; } .tl-p-herd .tl-h1 { left: 0; } .tl-p-herd .tl-h2 { right: 0; bottom: 6px; width: 54px; height: 70px; transform: scaleX(-1); }
.tl-p-finni { right: 6%; bottom: 30%; animation: tlBob 3.2s ease-in-out infinite; } .tl-p-finni .tl-roshi { width: 70px; height: 91px; transform: scaleX(-1); }
.tl-prop.tl-k1 .tl-roshi { filter: hue-rotate(67deg) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.tl-prop.tl-k2 .tl-roshi { filter: hue-rotate(12deg) saturate(.6) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.tl-prop.tl-k3 .tl-roshi { filter: hue-rotate(157deg) drop-shadow(0 0 10px rgba(120, 210, 255, .5)); }
.tl-prop.tl-k4 .tl-roshi { filter: hue-rotate(-20deg) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.tl-prop.tl-k5 .tl-roshi { filter: hue-rotate(-28deg) saturate(.3) brightness(.7) drop-shadow(0 0 6px rgba(255, 240, 200, .45)) drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
@media (max-width: 760px) { .tl-p-wild { right: 18%; bottom: 40%; } .tl-p-herd { right: 2%; bottom: 42%; width: 120px; } .tl-p-finni { right: 4%; bottom: 40%; } }
.tl-p-kite { right: 30%; bottom: 31%; } .tl-p-kite .tl-roshi { width: 78px; height: 101px; transform: scaleX(-1); filter: hue-rotate(182deg) drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }

/* ---- the Fog */
.tl-fgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tl-fc { position: relative; aspect-ratio: 1.5; border: 1px solid rgba(220, 230, 255, .14); border-radius: 8px; background: #5a6478; overflow: hidden; }
.tl-fc.is-fog { background: radial-gradient(circle at 30% 30%, #e8edf5, #b8c2d2 60%, #9aa6ba); box-shadow: inset 0 0 18px rgba(255, 255, 255, .6); }
.tl-fc.is-open { background: linear-gradient(180deg, #8a9a7a, #6a7a5a); }
.tl-fc.is-rock { background: repeating-linear-gradient(135deg, #3a3a48 0 8px, #2e2e3a 8px 16px); }
.tl-fc.is-bramble { background: radial-gradient(circle at 30% 40%, #3a5a2a 0 6px, transparent 7px), radial-gradient(circle at 70% 60%, #2f4a22 0 7px, transparent 8px), linear-gradient(180deg, #6a7a4a, #4a5a32); }
.tl-fc.is-walked { box-shadow: inset 0 0 0 2px rgba(255, 210, 122, .35); }
.tl-fc.is-here { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 12px rgba(255, 210, 122, .5); }
.tl-fc.is-found { box-shadow: inset 0 0 0 3px #7fd8ff, 0 0 18px rgba(127, 216, 255, .7); }
button.tl-fc { cursor: pointer; font: inherit; padding: 0; } button.tl-fc.is-step { border-color: rgba(11, 222, 251, .75); } button.tl-fc.is-step::after { content: ''; position: absolute; inset: 0; background: rgba(11, 222, 251, .14); }
button.tl-fc.is-step:hover, button.tl-fc.is-step:focus-visible { outline: none; transform: translateY(-2px); box-shadow: 0 0 14px rgba(11, 222, 251, .6); }
.tl-fc .tl-mv { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tl-mk { top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #7fd8ff; box-shadow: 0 0 14px 6px rgba(127, 216, 255, .8); }
.tl-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #ffd27a; opacity: .7; }
.tl-call { margin: 8px 2px 0; color: #bfe6ff; font: 600 15px var(--nx-font-body); }

/* ---- the notice board in the Square, and the cards' kinds */
.tl-noticeboard { position: absolute; z-index: 7; left: 12px; top: 12px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 12px 14px; background: #c9a878 linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(0, 0, 0, .1)); border: 6px solid #6a4a22; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); color: #2b2416; }
.tl-noticeboard h3 { margin: 0 0 8px; font: 20px var(--nx-font-display); letter-spacing: .05em; text-transform: uppercase; color: #3a2a10; text-align: center; }
.tl-noticeboard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-noticeboard li > a, .tl-noticeboard li > span { display: block; padding: 8px 10px; background: #fffbe8; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); color: inherit; text-decoration: none; font: 13px/1.35 Georgia, serif; transform: rotate(-.6deg); }
.tl-noticeboard li:nth-child(even) > a, .tl-noticeboard li:nth-child(even) > span { transform: rotate(.7deg); }
.tl-noticeboard li > a:hover, .tl-noticeboard li > a:focus-visible { outline: none; background: #fff; transform: rotate(0) translateY(-2px); }
.tl-noticeboard b { display: block; font: bold 15px Georgia, serif; } .tl-noticeboard i { color: #7a5a2a; } .tl-noticeboard .is-done, .tl-noticeboard .is-closed { opacity: .65; }
.tl-card.is-talk { border-color: rgba(255, 150, 190, .75); } .tl-card.is-talk .tl-star { color: #ff8ac0; text-shadow: 0 0 12px rgba(255, 138, 192, .9); }
.tl-card.is-errand { border-color: rgba(206, 244, 27, .6); } .tl-card.is-errand .tl-star { color: #cef41b; text-shadow: 0 0 12px rgba(206, 244, 27, .8); }
.tl-tale.is-talk { background: #fff4f8; } .tl-tale.is-errand { background: #fffbe8; }
@media (max-width: 760px) { .tl-noticeboard { top: auto; bottom: 10px; max-height: 46%; } .tl-fgrid { gap: 3px; } }

/* ---- D133 polish: the fog panel stands to one side, so the child can be seen looking into it; the Home's card sits in
   the room's corner, clear of the sheet; the board's subtitle */
.tl-sim.tl-fog { left: auto; right: 2%; transform: none; width: min(540px, calc(100% - 20px)); max-height: 70%; }
.tl:has(.tl-fog) .vn2-fig.tl-child:only-of-type { left: 6%; }
.hm-room .tl-cards { top: auto; bottom: 12px; right: 12px; left: auto; width: min(300px, 46%); }
.tl-nbsub { margin: -6px 0 8px; text-align: center; font: italic 13px Georgia, serif; color: #5a4020; }
@media (max-width: 760px) { .tl-sim.tl-fog { right: 50%; transform: translateX(50%); top: 1%; } .hm-room .tl-cards { width: min(300px, 70%); } }

/* ---- D134: the Harvest Fair — the contests on canvas-tent colours, the judges' sheet, rosettes, the Fair's board */
.tl-sim.tl-fair { background: #fbf4e2; color: #2b2416; border: 3px solid #b8864a; }
.tl-sim.tl-fair .tl-simh { margin: -10px -12px 10px; padding: 8px 14px; border-radius: 15px 15px 0 0; background: repeating-linear-gradient(90deg, #c8352a 0 26px, #fff6e4 26px 52px); }
.tl-fairh b { padding: 2px 10px; border-radius: 8px; background: #fbf4e2; color: #7a2a10 !important; } .tl-fairh span { padding: 2px 8px; border-radius: 8px; background: #fbf4e2; color: #5a4020 !important; }
.tl-fair .tl-tip, .tl-fair .dim { color: #7a6a4a; }
.tl-fair .nx-btn { display: inline-block; padding: 6px 16px; border: 2px solid #6a4a10; border-radius: 999px; background: linear-gradient(180deg, #ffe7a8, #e8b85a); color: #3a2a10; box-shadow: 0 2px 0 #6a4a10; font: 700 14px var(--nx-font-body); letter-spacing: .02em; text-transform: none; text-shadow: none; cursor: pointer; }
.tl-fair .nx-btn.console { background: #f4ead2; }
.tl-fair .nx-btn:hover, .tl-fair .nx-btn:focus-visible { transform: translateY(-1px); background: linear-gradient(180deg, #fff2c8, #f2c86a); outline: none; }
.tl-judges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; }
.tl-judges li { padding: 8px 10px; background: #fffaf0; border: 1px solid #d9c8a0; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); font: 13px/1.35 Georgia, serif; transform: rotate(-.5deg); }
.tl-judges li:nth-child(2) { transform: rotate(.6deg); }
.tl-judges b { display: block; font: 700 14px var(--nx-font-body); color: #7a2a10; } .tl-judges q { display: block; margin: 2px 0; } .tl-judges small { color: #8a7b57; font-style: italic; }
.tl-fairform fieldset { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.tl-fairform legend { width: 100%; margin-bottom: 4px; padding: 0; font: 700 13px var(--nx-font-body); color: #5a4020; } .tl-fairform legend .dim { font-weight: normal; }
.tl-chipbox { position: relative; cursor: pointer; display: inline-flex; align-items: center; }
.tl-chipbox input { position: absolute; opacity: 0; pointer-events: none; }
.tl-chipbox > span { display: flex; flex-direction: column; padding: 5px 10px; border: 2px solid #d9c8a0; border-radius: 10px; background: #fffaf0; font: 13px var(--nx-font-body); color: #2b2416; }
.tl-chipbox small { color: #8a7b57; font-size: 11px; }
.tl-chipbox input:checked + span, .tl-chipbox input:checked ~ span { border-color: #c8352a; background: #ffe9d8; box-shadow: 0 0 0 2px rgba(200, 53, 42, .22); }
.tl-chipbox input:focus-visible + span, .tl-chipbox input:focus-visible ~ span { outline: 2px solid #2b6fd6; outline-offset: 2px; }
.tl-roshipick { gap: 0; } .tl-roshipick .ho-pet { position: absolute; left: 6px; top: 50%; width: 26px; height: 34px; margin-top: -17px; object-fit: cover; object-position: left center; image-rendering: pixelated; z-index: 1; pointer-events: none; } .tl-roshipick > span { padding-left: 38px; }
.tl-ovenrow, .tl-ringrow, .tl-sheetrow { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.tl-ovenrow > div, .tl-ringrow > div, .tl-sheetrow > div { flex: 1; min-width: 0; } .tl-ringrow > .tl-ring { flex: none; }
.tl-oven { width: 150px; flex: none; }
.tl-ovenglow { animation: tlOven 1.6s ease-in-out infinite; } .tl-ov4 { animation: none; }
@keyframes tlOven { 50% { opacity: .8; } }
.tl-smell { margin: 0 0 6px; font: italic 17px Georgia, serif; color: #5a3010; }
.tl-ring { flex: none; width: 140px; height: 112px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #ecd592, #c9a860 62%, #8a6a3a); display: grid; place-items: center; box-shadow: inset 0 0 0 8px #d8b85a, 0 4px 10px rgba(0, 0, 0, .2); }
.tl-ring .ho-pet { width: 60px; height: 78px; object-fit: cover; object-position: left center; image-rendering: pixelated; animation: tlTrot 1.4s ease-in-out infinite; }
@keyframes tlTrot { 50% { transform: translateY(-4px); } }
.tl-ask { margin: 0 0 8px; font: italic 16px Georgia, serif; color: #3a2a10; }
.tl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-told { margin: 0 0 10px; padding: 10px 14px; background: #fffaf0; border-left: 4px solid #b8864a; font: italic 16px/1.5 Georgia, serif; color: #2b2416; }
.tl-yarncards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tl-yarncard { display: flex; flex-direction: column; gap: 4px; padding: 12px; min-height: 88px; border: 2px solid #b8864a; border-radius: 12px; background: linear-gradient(180deg, #fffaf0, #f2e4c0); color: #2b2416; font: 15px/1.35 Georgia, serif; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #b8864a; }
.tl-yarncard small { font: 11px var(--nx-font-body); letter-spacing: .08em; text-transform: uppercase; color: #8a6a3a; }
.tl-yarncard:hover, .tl-yarncard:focus-visible { transform: translateY(-3px) rotate(-.6deg); outline: none; border-color: #c8352a; }
.tl-marks { width: 100%; border-collapse: collapse; font: 14px/1.35 Georgia, serif; }
.tl-marks th { text-align: left; font: 700 13px var(--nx-font-body); color: #7a2a10; padding: 4px 6px; vertical-align: top; } .tl-marks th small { display: block; font-weight: normal; color: #8a7b57; }
.tl-marks td { padding: 4px 6px; vertical-align: top; border-top: 1px dashed #d9c8a0; } .tl-marks tfoot td, .tl-marks tfoot th { border-top: 2px solid #b8864a; }
.tl-score { white-space: nowrap; font: 18px var(--nx-font-display); color: #2b2416; } .tl-score small { font-size: 12px; color: #8a7b57; }
.tl-rosette { display: inline-block; vertical-align: middle; height: auto; }
.tl-ro-big { width: 112px; flex: none; animation: tlRosette 1.1s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tlRosette { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }
.tl-ro-end { width: 80px; display: block; margin: 2px auto 4px; animation: tlRosette 1.1s cubic-bezier(.2, 1.6, .4, 1) both; }
.tl-ro-small { width: 26px; } .tl-ro-tiny { width: 16px; }
.tl-fairboard h3 { color: #7a2a10; } .tl-fairboard { border-color: #8a2a1a; background: #e8cf9a linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .08)); }
.tl-fairboard::before { content: ''; display: block; height: 14px; margin: -12px -14px 10px; background: repeating-linear-gradient(90deg, #c8352a 0 18px, #fff6e4 18px 36px); }
.tl-fairboard li { padding: 8px 10px; background: #fffbe8; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); font: 13px/1.35 Georgia, serif; transform: rotate(-.5deg); }
.tl-fairboard li:nth-child(even) { transform: rotate(.6deg); }
.tl-fairboard li > span { display: block; padding: 0; background: none; box-shadow: none; transform: none; }
.tl-fb-act { margin-top: 6px; display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-fairboard .nx-btn { padding: 3px 14px; border: 2px solid #6a4a10; border-radius: 999px; background: linear-gradient(180deg, #ffe7a8, #e8b85a); color: #3a2a10; font: 700 13px var(--nx-font-body); text-decoration: none; text-transform: none; text-shadow: none; box-shadow: 0 2px 0 #6a4a10; }
.tl-fairboard h4 { margin: 12px 0 6px; font: 15px var(--nx-font-display); letter-spacing: .05em; text-transform: uppercase; color: #3a2a10; text-align: center; }
.tl-leaders { width: 100%; border-collapse: collapse; background: #fffbe8; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); font: 13px/1.4 Georgia, serif; }
.tl-leaders td, .tl-leaders th { padding: 4px 6px; border-bottom: 1px dotted #d9c8a0; text-align: left; vertical-align: middle; } .tl-leaders th { font-weight: bold; } .tl-leaders small { color: #8a7b57; font-weight: normal; }
.tl-leaders a { color: #2b4fa8; } .tl-lscore { font: 15px var(--nx-font-display); text-align: right !important; }
.tl-tale .tl-ro-small { width: 30px; }
@media (max-width: 760px) { .tl-judges, .tl-yarncards { grid-template-columns: 1fr; } .tl-ovenrow, .tl-ringrow, .tl-sheetrow { flex-direction: column; } .tl-oven { width: 110px; } .tl-ro-big { width: 80px; } }

/* ---- the card at a Hollow place: top left of the stage (the place's panel is on the right), two lines of blurb */
.vn.ho ~ .tl-cards { left: 12px; right: auto; width: min(300px, 38%); }
.vn.ho ~ .tl-cards .tl-card span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .vn.ho ~ .tl-cards { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; } }

/* ---- D135: the Lantern Moon — the night, the lanterns, the race */
.tl-night > svg { filter: brightness(.4) saturate(.72) hue-rotate(-14deg); }
.tl-night::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 54, .55), rgba(16, 10, 40, .22)); pointer-events: none; }
.tl-moonball { position: absolute; z-index: 1; top: 6%; right: 14%; width: clamp(54px, 8vw, 110px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffdf0, #ece6cc 55%, #cfc6a4); box-shadow: 0 0 40px 14px rgba(255, 250, 220, .42), 0 0 120px 40px rgba(200, 210, 255, .16); }
.tl-sim.tl-moonsim { background: linear-gradient(180deg, rgba(14, 18, 52, .97), rgba(8, 10, 30, .97)); border-color: rgba(220, 228, 255, .55); color: #eef1ff; }
.tl-moonh b { color: #fff3c4 !important; } .tl-moonh span { color: #c8d0f0 !important; }
.tl-moonsim .tl-tip { color: #aab4dc; } .tl-moonsim .tl-ask { color: #fff3c4; }
.tl-moonsim .nx-btn { display: inline-block; padding: 6px 16px; border: 2px solid #c8d0f0; border-radius: 999px; background: linear-gradient(180deg, #f4f6ff, #c8d0f0); color: #1a1e40; box-shadow: 0 2px 0 #6a74a8; font: 700 14px var(--nx-font-body); text-transform: none; text-shadow: none; cursor: pointer; }
.tl-moonsim .nx-btn.console { background: rgba(255, 255, 255, .08); color: #eef1ff; }
.tl-moonsim .nx-btn:hover, .tl-moonsim .nx-btn:focus-visible { transform: translateY(-1px); border-color: #ffcf6a; outline: none; }
.tl-moonsim .tl-chipbox > span { background: rgba(255, 255, 255, .06); border-color: rgba(200, 208, 240, .35); color: #eef1ff; } .tl-moonsim .tl-chipbox small { color: #aab4dc; }
.tl-moonsim .tl-chipbox input:checked + span, .tl-moonsim .tl-chipbox input:checked ~ span { border-color: #ffcf6a; background: rgba(255, 207, 106, .14); }
.tl-moonsim .tl-fairform legend { color: #dfe6ff; }
.tl-lopts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tl-lopt { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 112px; padding: 8px 6px; border: 2px solid rgba(255, 207, 106, .4); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #fff6dc; cursor: pointer; font: 13px var(--nx-font-body); text-align: center; }
.tl-lopt small { color: #c8b88a; font-size: 11px; }
button.tl-lopt:hover, button.tl-lopt:focus-visible { border-color: #ffcf6a; background: rgba(255, 207, 106, .12); outline: none; transform: translateY(-2px); }
.tl-lopt.is-out { opacity: .8; cursor: default; border-style: dashed; }
.tl-lglyph { width: 30px; height: 39px; }
.tl-lopt.is-out .tl-lglyph, .tl-lt .tl-lglyph, .tl-lnames .tl-lglyph { filter: drop-shadow(0 0 8px rgba(255, 200, 100, .9)); }
.tl-legs { display: flex; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.tl-legs li { flex: 1; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #aab4dc; font: 600 12px var(--nx-font-body); text-align: center; }
.tl-legs li.is-done { background: rgba(127, 216, 255, .18); color: #dff4ff; } .tl-legs li.is-now { background: #ffcf6a; color: #2a1a00; }
.tl-track { display: grid; gap: 3px; margin-bottom: 8px; flex: 1; }
.tl-lane { display: grid; grid-template-columns: 104px 1fr 34px; align-items: center; gap: 6px; }
.tl-lname { font: 600 12px/1.1 var(--nx-font-body); color: #dfe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-lname small { display: block; font-weight: normal; color: #8a94c0; font-size: 10px; }
.tl-lane.is-mine .tl-lname { color: #ffcf6a; }
.tl-lpath { position: relative; height: 22px; border-radius: 6px; background: linear-gradient(90deg, rgba(60, 90, 50, .5), rgba(40, 70, 110, .55) 45%, rgba(40, 70, 110, .55) 55%, rgba(90, 70, 50, .55)); border-right: 3px dashed #fff6dc; }
.tl-lane.is-mine .tl-lpath { box-shadow: inset 0 0 0 1px #ffcf6a; }
.tl-runner { position: absolute; bottom: 0; width: 17px; height: 22px; object-fit: cover; object-position: left center; image-rendering: pixelated; animation: tlRun .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes tlRun { from { transform: translateX(-26px); opacity: .4; } }
.tl-track.is-over .tl-runner { animation: none; }
.tl-lpos { font: 13px var(--nx-font-display); color: #fff3c4; }
.tl-x0 { left: 0; } .tl-x5 { left: calc(5% - 10px); } .tl-x10 { left: calc(10% - 10px); } .tl-x15 { left: calc(15% - 10px); } .tl-x20 { left: calc(20% - 10px); } .tl-x25 { left: calc(25% - 10px); } .tl-x30 { left: calc(30% - 10px); } .tl-x35 { left: calc(35% - 10px); } .tl-x40 { left: calc(40% - 10px); } .tl-x45 { left: calc(45% - 10px); } .tl-x50 { left: calc(50% - 10px); }
.tl-x55 { left: calc(55% - 10px); } .tl-x60 { left: calc(60% - 10px); } .tl-x65 { left: calc(65% - 10px); } .tl-x70 { left: calc(70% - 10px); } .tl-x75 { left: calc(75% - 10px); } .tl-x80 { left: calc(80% - 10px); } .tl-x85 { left: calc(85% - 10px); } .tl-x90 { left: calc(90% - 10px); } .tl-x95 { left: calc(95% - 14px); } .tl-x100 { left: calc(100% - 20px); }
.tl-moonsim .tl-sheetrow > div { flex: 1; } .tl-sim.tl-race { max-height: 72%; }
/* the water: everyone's lanterns, by name */
.tl-p-water { left: 0; right: 0; bottom: 27%; height: 24%; }
.tl-water { position: relative; width: 100%; height: 100%; }
.tl-lt { position: absolute; display: flex; flex-direction: column; align-items: center; animation: tlBob 3.4s ease-in-out infinite; }
.tl-lt .tl-lglyph { width: 26px; height: 34px; }
.tl-lt small { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--nx-font-body); color: #fff3c4; text-shadow: 0 1px 3px #000; }
@keyframes tlBob { 50% { transform: translateY(-5px) rotate(2deg); } }
.tl-lt1 { left: 30%; bottom: 8%; } .tl-lt2 { left: 40%; bottom: 30%; animation-delay: .4s; } .tl-lt3 { left: 50%; bottom: 10%; animation-delay: .8s; } .tl-lt4 { left: 60%; bottom: 34%; animation-delay: 1.2s; }
.tl-lt5 { left: 35%; bottom: 58%; animation-delay: 1.6s; } .tl-lt6 { left: 55%; bottom: 60%; animation-delay: 2s; } .tl-lt7 { left: 45%; bottom: 52%; animation-delay: 2.4s; } .tl-lt8 { left: 68%; bottom: 12%; animation-delay: 2.8s; }
.tl-lt9 { left: 22%; bottom: 30%; animation-delay: .2s; } .tl-lt10 { left: 72%; bottom: 46%; animation-delay: .6s; } .tl-lt11 { left: 26%; bottom: 62%; animation-delay: 1s; } .tl-lt12 { left: 64%; bottom: 76%; animation-delay: 1.4s; }
.tl-lt13 { left: 78%; bottom: 24%; animation-delay: 1.8s; } .tl-lt14 { left: 16%; bottom: 10%; animation-delay: 2.2s; } .tl-lt15 { left: 48%; bottom: 78%; animation-delay: 2.6s; } .tl-lt16 { left: 84%; bottom: 60%; animation-delay: 3s; }
.tl-lt17 { left: 12%; bottom: 48%; animation-delay: .3s; } .tl-lt18 { left: 88%; bottom: 8%; animation-delay: .7s; } .tl-lt19 { left: 36%; bottom: 82%; animation-delay: 1.1s; } .tl-lt20 { left: 74%; bottom: 80%; animation-delay: 1.5s; }
.tl-lt21 { left: 8%; bottom: 74%; animation-delay: 1.9s; } .tl-lt22 { left: 92%; bottom: 36%; animation-delay: 2.3s; } .tl-lt23 { left: 18%; bottom: 84%; animation-delay: 2.7s; } .tl-lt24 { left: 58%; bottom: 88%; animation-delay: 3.1s; }
.tl-lmore { position: absolute; left: 0; right: 0; bottom: -18px; margin: 0; text-align: center; font: italic 13px Georgia, serif; color: #fff3c4; }
/* the Lantern Moon's boards */
.tl-moonboard { background: #141a40 linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)); border-color: #c8d0f0; color: #eef1ff; }
.tl-moonboard h3 { color: #fff3c4; } .tl-moonboard .tl-nbsub { color: #c8d0f0; }
.tl-lnames { list-style: none; margin: 0; padding: 0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 10px !important; font: 13px Georgia, serif; }
.tl-lnames li { display: flex; align-items: center; gap: 4px; } .tl-lnames .tl-lglyph { width: 16px; height: 21px; flex: none; }
.tl-moonboard .tl-leaders { background: rgba(255, 255, 255, .06); color: #eef1ff; } .tl-moonboard .tl-leaders a { color: #a8c8ff; }
.ho-fest.is-moon { border-color: #6a74a8; background: #141a40; color: #eef1ff; } .ho-fest.is-moon::before { background: repeating-linear-gradient(90deg, #ffcf6a 0 4px, transparent 4px 28px); } .ho-fest.is-moon b { color: #fff3c4; } .kp.ho .ho-fest.is-moon a { color: #a8c8ff; }