body { margin: 0; background: #f4f1e7; }
.thm { --bg: #f3ecdd; --card: #fffaef; --inset: #ebe5d7; --line: #ded6c4; --ink: #16204a; --mut: #3f4c78; --mut2: #5b6791; --acc: #1a6fa8; --link: #9a5a00; --sky: #cfdaf0; --floor: #bcc7e4; --shadow: 0 18px 36px rgba(60, 70, 110, .18); }
.thm.dark { --bg: #0e1430; --card: #18214a; --inset: #101839; --line: #1b2550; --ink: #f4f1e8; --mut: #c3cbee; --mut2: #8f9bcd; --acc: #5bc0f8; --link: #ffd166; --sky: #152049; --floor: #1d2a5c; --shadow: 0 22px 44px rgba(5, 8, 24, .55); }
.scene .bg, .land .bg { fill: var(--sky); }
.scene .fl { fill: var(--floor); }
a { color: var(--link); }
a:hover { opacity: .75; }
.tgl { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--inset); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.tgl:hover { background: var(--line); }
.lyr { position: relative; z-index: 1; }

.thm:not(.dark) .role { color: #16204a; }
.sgn { font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; }
.bld { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: block; }
.bld svg { display: block; margin: 0 auto; width: min(100%, 232px); height: auto; transition: transform .25s ease; }
.bld:hover svg, .bld:focus-visible svg { transform: translateY(-10px); }
.bld:focus-visible { outline: 3px solid #ffd166; outline-offset: 6px; border-radius: 14px; }
.door { transform-box: fill-box; transform-origin: left center; transition: transform .3s ease; }
.bld:hover .door, .bld:focus-visible .door { transform: scaleX(0); }
.board { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.row { display: flex; flex-wrap: nowrap; align-items: center; }
.row.flip { flex-direction: row-reverse; }
.row.flip .pop { animation-name: popL, grow; transform-origin: 180% 50%; }
.pop.closing, .row.flip .pop.closing { animation: shrinkOut .5s cubic-bezier(.4, .02, .55, 1) both, shrink .5s cubic-bezier(.4, .02, .55, 1) both; }
.cellB, .cellF { flex: 1 1 0; min-width: 0; padding: 14px 10px; }
.cellB { display: flex; justify-content: center; align-items: flex-end; }
.bld { margin: 0 auto; }
.spine { flex: 0 0 134px; align-self: stretch; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; }
.line { position: absolute; top: 0; bottom: 0; left: 50%; width: 8px; margin-left: -4px; background: var(--line); border-radius: 4px; }
.tile { position: relative; width: 58px; height: 58px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; font-size: 26px; color: #141b3c; }
.tlabel { position: relative; max-width: 124px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--mut); }
.land { display: block; width: 100%; height: auto; border-radius: 18px; }
.scene { display: block; width: 100%; height: auto; }
.pop { animation: popR .62s cubic-bezier(.2, .72, .28, 1) both, grow .62s cubic-bezier(.3, .55, .4, 1) both; transform-origin: -80% 50%; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pt { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); }
.dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; border-radius: 5px; }
.x { font: inherit; font-weight: 700; width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--inset); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.x:hover { background: var(--line); }
@keyframes popR { 0% { opacity: 0; transform: scale(.04); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes popL { 0% { opacity: 0; transform: scale(.04); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes popD { 0% { opacity: 0; transform: scale(.06); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes grow { 0% { max-height: 238px; } 100% { max-height: 1000px; } }
@keyframes shrinkOut { 0% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(.08); } }
@keyframes shrink { 0% { max-height: 1000px; } 100% { max-height: 238px; } }
@keyframes shrinkTall { 0% { max-height: 1500px; } 100% { max-height: 172px; } }
@keyframes growTall { 0% { max-height: 172px; } 100% { max-height: 1500px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes blink { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes led { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
@keyframes typeA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes typeB { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(0); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(2px) scale(.7); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-30px) scale(1.4); } }
@keyframes beltA { from { transform: translateX(-130px); } to { transform: translateX(260px); } }
@keyframes swing { 0%, 100% { transform: rotate(17deg); } 50% { transform: rotate(-17deg); } }
@keyframes needle { 0%, 100% { transform: rotate(-52deg); } 50% { transform: rotate(52deg); } }
@keyframes clap { 0%, 68%, 100% { transform: rotate(0); } 80% { transform: rotate(-24deg); } }
@keyframes roll { from { transform: translateX(0) rotate(0); } to { transform: translateX(250px) rotate(540deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }
@keyframes sweep { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes drift { from { transform: translateX(-20px); } to { transform: translateX(40px); } }
@keyframes tap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes glide { from { transform: translateX(-30px); } to { transform: translateX(400px); } }
@keyframes ripple { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
.a-spin { transform-box: fill-box; transform-origin: center; animation: spin 7s linear infinite; }
.a-radar { transform-box: view-box; transform-origin: 368px 86px; animation: spin 7s linear infinite; }
.a-spin-f { transform-box: fill-box; transform-origin: center; animation: spin 1.6s linear infinite; }
.a-bob { transform-box: fill-box; transform-origin: center; animation: bob 2.2s ease-in-out infinite; }
.a-blink { animation: blink 1.1s steps(1) infinite; }
.a-led { animation: led 1.4s ease-in-out infinite; }
.a-typeA { transform-box: fill-box; animation: typeA .36s ease-in-out infinite; }
.a-typeB { transform-box: fill-box; animation: typeB .36s ease-in-out infinite; }
.a-steam { transform-box: fill-box; animation: steam 2.6s ease-out infinite; }
.a-belt { transform-box: fill-box; animation: beltA 5s linear infinite; }
.a-swing { transform-box: fill-box; transform-origin: top center; animation: swing 2.4s ease-in-out infinite; }
.a-needle { transform-box: fill-box; transform-origin: bottom center; animation: needle 3.2s ease-in-out infinite; }
.a-clap { transform-box: fill-box; transform-origin: left bottom; animation: clap 3s ease-in-out infinite; }
.a-roll { transform-box: fill-box; transform-origin: center; animation: roll 5.5s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.a-hop { transform-box: fill-box; animation: hop 1.1s ease-in-out infinite; }
.a-sweep { transform-box: fill-box; transform-origin: top center; animation: sweep 4.5s ease-in-out infinite; }
.a-twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite; }
.a-drift { transform-box: fill-box; animation: drift 24s ease-in-out infinite alternate; }
.a-tap { transform-box: fill-box; transform-origin: bottom left; animation: tap 1.5s ease-in-out infinite; }
.a-sway { transform-box: fill-box; transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
.a-glide { transform-box: fill-box; animation: glide 14s linear infinite; }
.a-ripple { transform-box: fill-box; animation: ripple 4s ease-in-out infinite; }
.d2 { animation-delay: .45s; }
.d3 { animation-delay: .9s; }
.d4 { animation-delay: 1.35s; }
@media (max-width: 860px) {
  .row, .row.flip { flex-direction: row; flex-wrap: wrap; }
  .cellB { order: 2; flex: 1 1 100%; padding: 4px 0 10px; }
  .spine { order: 1; flex: 1 1 100%; flex-direction: row; justify-content: flex-start; gap: 14px; align-self: auto; padding: 18px 0 2px; }
  .line { top: -16px; bottom: auto; height: 18px; left: 29px; }
  .tlabel { max-width: none; text-align: left; font-size: 15px; }
  .cellF { order: 3; flex: 1 1 100%; padding: 0 0 18px; }
  .pop, .row.flip .pop { animation-name: popD, growTall; transform-origin: 50% -150px; }
  .pop.closing, .row.flip .pop.closing { animation-name: shrinkOut, shrinkTall; }
  .pt { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .a-spin, .a-spin-f, .a-bob, .a-blink, .a-led, .a-typeA, .a-typeB, .a-steam, .a-belt, .a-swing, .a-needle, .a-clap, .a-roll, .a-hop, .a-sweep, .a-twinkle, .a-drift, .a-tap, .a-sway, .a-glide, .a-ripple, .pop, .row.flip .pop { animation: none; }
}

/* overlay mode (George 2026-10-14): card floats over the land, land stays visible,
   no height grow/shrink - only the pop-in / shrink-out scale+fade. */
.cellF { position: relative; }
.pop-wrap { position: absolute; top: 50%; left: 10px; right: 10px; z-index: 20; transform: translateY(-50%); }
.pop { animation: popR .62s cubic-bezier(.2, .72, .28, 1) both; }
.row.flip .pop { animation-name: popL; }
.pop.closing, .row.flip .pop.closing { animation: shrinkOut .5s cubic-bezier(.4, .02, .55, 1) both; }
@media (max-width: 860px) {
  .pop-wrap { left: 0; right: 0; }
  .pop, .row.flip .pop { animation-name: popD; }
  .pop.closing, .row.flip .pop.closing { animation-name: shrinkOut; }
}

/* road (George 2026-10-14): grey tiles snake between the numbered tiles, replacing the line. */
.line { display: none; }
.spine { min-height: 380px; }
.tile { z-index: 2; }
.road { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rtile { position: absolute; width: 58px; height: 58px; border-radius: 17px; background: var(--line); }
@media (max-width: 860px) { .spine { min-height: 0; } }