.game-tree { font-family: 'Galmuri11', system-ui, sans-serif; --tree-ink: var(--paper); --tree-line: rgba(190,238,91,.38); margin-top: 32px; padding-top: 20px; padding-bottom: 64px; }
.game-tree-heading .eyebrow { font-family: inherit; }
.game-tree-heading { max-width: 760px; margin-bottom: 16px; }
.game-tree-heading h1 { margin: 0 0 14px; font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.15; letter-spacing: -.045em; }
.game-tree-heading > p:last-child { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.game-tree-canvas { display: block; position: relative; isolation: isolate; padding: 12px 8px 24px; }
.game-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: -1; }
.game-tree-link { --link-color: #b5ec56; --link-core: #e4ffba; }
.game-tree-link[data-tone=stories] { --link-color: #ff2ca8; --link-core: #ffd4ec; }
.game-tree-lines path { fill: none; stroke: var(--link-color); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.game-tree-link-glow { stroke-width: 5; opacity: .18; filter: blur(2px); }
.game-tree-link-thread { stroke-width: 1; opacity: .62; }
.game-tree-lines .game-tree-link-spark { stroke: var(--link-core); stroke-width: 1.5; stroke-dasharray: 2 38; animation: game-tree-energy-flow 2.6s linear var(--link-delay,0s) infinite; }
.game-tree-link.is-highlighted .game-tree-link-glow { opacity: .3; }
.game-tree-link.is-highlighted .game-tree-link-thread { opacity: .95; }
@keyframes game-tree-energy-flow { to { stroke-dashoffset: -80; } }
.game-tree[data-tree-paused] .game-tree-link-spark, .game-tree:not([data-tree-visible]) .game-tree-link-spark { animation-play-state: paused; }
@media (prefers-reduced-motion:reduce) {
  .game-tree-lines .game-tree-link-spark { animation: none; }
}
@media (forced-colors:active) {
  .game-tree-lines path { stroke: CanvasText; opacity: 1; filter: none; }
  .game-tree-link-glow, .game-tree-lines .game-tree-link-spark { display: none; }
}
.game-tree-root { width: 174px; margin: 0 auto 66px; }
.game-tree .game-tree-root .game-tree-node { width: 174px; }
.game-tree-root .game-tree-copy { padding: 20px; }
.game-tree-root strong { font-size: 1.125rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.game-tree-root-eyebrow, .game-tree-root-summary { display: none; }
.game-tree-root-mark { position: absolute; bottom: 22px; color: var(--lime); font-size: 1.375rem; }
.game-tree-branches, .game-tree-leaves { list-style: none; padding: 0; margin: 0; }
.game-tree-branches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; align-items: start; }
.game-tree-branch { display: contents; min-width: 0; text-align: center; }
.game-tree-branch-heading { order: 0; min-width: 0; }
.game-tree-branch-heading > .game-tree-node-wrap { width: 164px; margin: auto; }
.game-tree-node-wrap { position: relative; animation: game-tree-drift var(--tree-period,7.4s) ease-in-out var(--tree-delay,0s) infinite; }
.game-tree .game-tree-node { --lime: #c8ff31; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; width: 100%; padding: 0; border: 1px solid transparent; border-radius: 50%; overflow: visible; background: #101114; color: #f5f5ef; text-align: center; text-decoration: none; font: inherit; cursor: pointer; transform: translateY(0) rotate(0); transition: transform .24s ease, box-shadow .24s, scale .55s cubic-bezier(.22,1,.36,1); }
.game-tree .game-tree-node.is-tree-peer { scale: .6666667; }
.game-tree-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity .24s, transform .4s; }
.game-tree-node::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(5,7,10,.62); pointer-events: none; }
.game-tree-copy { white-space: normal; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; padding: 20px 15px; }
.game-tree-copy strong { display: block; max-width: 100%; font-size: 1rem; font-weight: 700; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.game-tree-copy small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 100%; color: #dcdfd4; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.game-tree-leaf .game-tree-copy { padding: 20px 14px 24px; }
.game-tree-leaf .game-tree-copy strong { font-size: .875rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.game-tree-leaf .game-tree-copy small { -webkit-line-clamp: 2; }
.game-tree-parent .game-tree-copy { padding-bottom: 28px; }
.game-tree-parent .game-tree-copy strong { color: var(--branch-tone); font-size: 1.1875rem; }
.game-tree-toggle, .game-tree-arrow { position: absolute; bottom: 10px; z-index: 1; color: var(--branch-tone,var(--lime)); font-size: 1.125rem; line-height: 1; }
.game-tree .game-tree-branch-heading > .game-tree-section-link { display: none; }
/* Keep leaf sizes while filling the nearby gaps with two staggered rows. */
.game-tree-leaves { order: 1; grid-column: 1/-1; width: 100%; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 48px 28px; }
.game-tree-leaves > li { grid-column: span 2; width: calc((100% - 16px)/2); min-width: 0; justify-self: center; }
.game-tree-leaves > li:last-child:nth-child(odd) { grid-column: 1/-1; width: calc((100% - 104px)/6); }
#game-tree-stories-children > li:nth-child(1) { grid-column: 1/3; grid-row: 1; }
#game-tree-stories-children > li:nth-child(2) { grid-column: 5/7; grid-row: 1; }
#game-tree-stories-children > li:nth-child(3) { grid-column: 2/4; grid-row: 2; }
#game-tree-stories-children > li:nth-child(4) { grid-column: 4/6; grid-row: 2; }
#game-tree-stories-children > li:nth-child(5) { grid-column: 3/5; grid-row: 1; width: calc((100% - 16px)/2); }
.game-tree-restricted { cursor: default; }
.game-tree-restricted .game-tree-art { filter: brightness(.4) saturate(.5); }
.game-tree-restricted .game-tree-copy small { -webkit-line-clamp: 4; }
.game-tree [hidden] { display: none !important; }
.game-tree :is(a,button):focus-visible { outline: 3px solid var(--lime); outline-offset: 5px; }
@media (hover:hover) {
  .game-tree-node:is(a,button):hover { transform: translateY(-5px) rotate(-2deg); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
}
.game-tree-node:is(a,button):active { transform: scale(.97); }
.game-tree[data-tree-paused] .game-tree-node-wrap, .game-tree:not([data-tree-visible]) .game-tree-node-wrap { animation-play-state: paused; }
.game-tree-root { --tree-period: 8.4s; }
.game-tree-branch[data-tree-branch=stories] { --tree-period: 8s; }
.game-tree-branch[data-tree-branch=play] { --tree-period: 6.8s; }
.game-tree-leaves > li:nth-child(even) { --tree-period: 6.6s; }
.game-tree-leaves > li:nth-child(3n) { --tree-period: 8.2s; }
@keyframes game-tree-drift {
  0%,100% { transform: translate(0,0); }
  33% { transform: translate(4px,-7px); }
  66% { transform: translate(-4px,-11px); }
}
:root[data-theme=light] .game-tree { --tree-line: rgba(58,82,10,.45); }
:root[data-theme=light] .game-tree-link { --link-color: #587800; --link-core: #385400; }
:root[data-theme=light] .game-tree-link[data-tone=stories] { --link-color: #b21966; --link-core: #871348; }
:root[data-theme=light] .game-tree :is(a,button):focus-visible { outline-color: #4e6b00; }
@media (max-width:1100px) {
  .game-tree-branches { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px 36px; }
  .game-tree-branch:last-child .game-tree-branch-heading { grid-column: 1/-1; width: calc((100% - 36px)/2); justify-self: center; }
  .game-tree-leaves { gap: 36px 24px; margin: auto; }
  .game-tree-leaves > li { width: min(100%,173px); }
  .game-tree-leaves > li:last-child:nth-child(odd) { width: 173px; }
  #game-tree-stories-children > li:nth-child(5) { width: min(100%,173px); }
  .game-tree-root { margin-bottom: 60px; }
}
@media (max-width:600px) {
  .game-tree { padding-top: 12px; }
  .game-tree-heading h1 { font-size: 2rem; }
  .game-tree-heading > p:last-child { font-size: .875rem; }
  .game-tree-canvas { padding-inline: 0; }
  .game-tree-root, .game-tree .game-tree-root .game-tree-node { width: 154px; }
  .game-tree-branches { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 12px; }
  .game-tree-branch:last-child .game-tree-branch-heading { grid-column: 1/-1; width: calc((100% - 12px)/2); justify-self: center; }
  .game-tree-branch-heading > .game-tree-node-wrap { width: min(100%,154px); }
  .game-tree-leaves { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 22px; max-width: 360px; margin: auto; padding-inline: 12px; }
  .game-tree-leaves > li, #game-tree-stories-children > li:nth-child(n) { grid-column: auto; grid-row: auto; width: auto; justify-self: stretch; }
  .game-tree-leaves > li:last-child:nth-child(odd), #game-tree-stories-children > li:last-child:nth-child(odd) { grid-column: 1/-1; width: calc((100% - 22px)/2); justify-self: center; }
  .game-tree-copy strong { font-size: .9375rem; }
  .game-tree-copy small { font-size: .75rem; }
}
@media (min-width:601px) and (max-width:900px), (max-width:380px) {
  .game-tree-leaf .game-tree-copy { padding: 14px 12px 20px; gap: 5px; }
  .game-tree-leaf .game-tree-copy strong { font-size: .8125rem; -webkit-line-clamp: 2; }
  .game-tree-leaf .game-tree-copy small { font-size: .75rem; line-height: 1.4; }
}
@media (prefers-reduced-motion:reduce) {
  .game-tree-node-wrap { animation: none; }
  .game-tree .game-tree-node, .game-tree-image, .game-tree-lines path { transition: none; }
  .game-tree-node:is(a,button):hover, .game-tree-node:is(a,button):active { transform: none; }
}
@media (min-width:1101px) {
  .game-tree-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .game-tree-root, .game-tree .game-tree-root .game-tree-node { width: 348px; }
  .game-tree-root { margin-bottom: 100px; }
  .game-tree-root .game-tree-copy { padding: 32px 28px; gap: 12px; }
  .game-tree-root strong { display: block; font-size: 1.75rem; line-height: 1.25; overflow: visible; -webkit-line-clamp: unset; }
  .game-tree-root .game-tree-copy small { display: none; }
  .game-tree-root .game-tree-root-eyebrow { display: block; color: var(--lime); font-size: .875rem; letter-spacing: .18em; }
  .game-tree-root .game-tree-root-summary { display: block; color: #dcdfd4; font-size: .875rem; line-height: 1.7; text-wrap: balance; overflow-wrap: anywhere; }
  .game-tree-root .game-tree-root-mark { bottom: 6%; font-size: 1.25rem; }
  .game-tree-branch-heading > .game-tree-node-wrap { width: min(100%,420px); }
  .game-tree-parent .game-tree-copy { padding: 30px 24px 38px; gap: 12px; }
  .game-tree-parent .game-tree-copy strong { font-size: 1.625rem; }
  .game-tree-parent .game-tree-copy small { font-size: .875rem; }
  .game-tree-leaves { margin-top: -100px; }
  #game-tree-play-children > li:last-child { grid-column: 5/7; width: calc((100% - 16px)/2); }
}
/* Perspective is carried by staggered placement and three independently moving planes. */
.game-tree-canvas { perspective: 1100px; }
.game-tree-space {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.game-tree-stars { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.game-tree-space-object { position: absolute; top: 0; left: 0; max-width: none; height: auto; image-rendering: pixelated; }
:root[data-theme=light] .game-tree-space { opacity: .6; }
@media (forced-colors:active) {
  .game-tree-space { display: none; }
}
.game-tree .game-tree-node { --pointer-x: 0; --pointer-y: 0; --tree-emerge: 0; box-shadow: none; background: transparent; }
/* Fade the closed image into the opening; emerged planes remain fully visible. */
.game-tree-art {
  --tree-art-zoom: .08;
  --tree-plane-zoom: .5;
  --tree-art-radius: calc(37.5% + var(--tree-emerge) * 57.5%);
  position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 3;
  clip-path: circle(var(--tree-art-radius) at 50% 47%);
  mask-clip: no-clip;
  mask-image: radial-gradient(
    ellipse var(--tree-art-radius) var(--tree-art-radius) at 50% 47%,
    #000 calc(80% + var(--tree-emerge) * 20%), transparent 100%
  );
  transform: translateY(calc(3% - var(--tree-emerge) * 6%)) scale(calc(.96 + var(--tree-emerge) * var(--tree-art-zoom)));
  filter: brightness(calc(.52 + var(--tree-emerge) * .63)) saturate(calc(.65 + var(--tree-emerge) * .65));
}

.game-tree-image { opacity: 1; object-fit: contain; image-rendering: pixelated; transition: none; }
.game-tree-image-rear { transform: translate(calc(var(--pointer-x) * var(--tree-emerge) * -3px),calc(-12% + var(--pointer-y) * var(--tree-emerge) * -3px)) scale(calc(.78 + var(--tree-emerge) * .12 * var(--tree-plane-zoom))); }
.game-tree-image-middle { transform: translate(calc(var(--pointer-x) * var(--tree-emerge) * 5px),calc(var(--pointer-y) * var(--tree-emerge) * 5px - var(--tree-emerge) * 3%)) scale(calc(.95 + var(--tree-emerge) * .11 * var(--tree-plane-zoom))); }
.game-tree-image-front { transform: translate(calc(var(--pointer-x) * var(--tree-emerge) * 10px),calc(14% + var(--pointer-y) * var(--tree-emerge) * 10px - var(--tree-emerge) * 4%)) scale(calc(.9 + var(--tree-emerge) * .2 * var(--tree-plane-zoom))); }
.game-tree-node::after { display: none; }
.game-tree-copy { border-radius: 16px; text-shadow: 0 1px 3px #000, 0 0 12px #000; background: transparent; }
.game-tree .game-tree-node-wrap:has(:focus-visible) { z-index: 2; }

.game-tree-node:focus-visible::after { background: transparent; }
.game-tree-node:focus-visible .game-tree-copy { background: transparent; }
@media (min-width:1101px) {
  .game-tree-branches { padding-top: 12px; padding-bottom: 44px; }
  .game-tree-branch[data-tree-branch=hubs] > .game-tree-branch-heading { margin-top: -158px; translate: 18px 0; }
  .game-tree-branch[data-tree-branch=stories] > .game-tree-branch-heading { margin-top: 0; translate: -12px 0; }
  .game-tree-branch[data-tree-branch=play] > .game-tree-branch-heading { margin-top: -126px; translate: -20px 0; }

  .game-tree-leaves > li:nth-child(3n) .game-tree-node-wrap { width: 94%; margin-inline: auto; }
}
@media (hover:hover) {
  .game-tree .game-tree-node-wrap:hover { z-index: 2; }
  .game-tree .game-tree-node:hover { transform: none; box-shadow: none; }

  .game-tree-node:hover::after { background: transparent; }
  .game-tree-node:hover .game-tree-copy { background: transparent; }
}
/* 48 periodic poses use an 8×6 atlas to avoid oversized GPU textures. */
.game-tree-node { --portal-hue: 0deg; --stone-tone: 0; --portal-power: calc(.85 + var(--tree-emerge) * .35); }
.game-tree .game-tree-root .game-tree-copy { background: transparent; }
.game-tree-portal { position: absolute; inset: -8%; z-index: 2; overflow: visible; pointer-events: none; image-rendering: pixelated; }
.game-tree-portal::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, #0c1014 76%, transparent 100%); transform: scale(calc(.86 + var(--tree-emerge) * .22)); }
.game-tree-portal-window { position: absolute; inset: 0; overflow: hidden; contain: paint; transform: scale(calc(.86 + var(--tree-emerge) * .22)); filter: hue-rotate(var(--portal-hue)) brightness(var(--portal-power)); }
.game-tree-portal-atlas { position: absolute; top: 0; left: 0; width: 800%; height: 600%; max-width: none; image-rendering: pixelated; animation: game-tree-portal-loop 6.4s steps(1,end) var(--tree-delay,0s) infinite; }

.game-tree-toggle, .game-tree-arrow { bottom: 13%; z-index: 4; }
.game-tree-root-mark { bottom: 12%; z-index: 4; }
.game-tree .game-tree-node:is(a,button):focus-visible { outline: none; }
.game-tree-node:is(a,button):focus-visible .game-tree-copy { outline: 2px dashed #f5f5ef; outline-offset: 4px; }
.game-tree-node[data-tree-node=root] { --portal-hue: -95deg; --stone-tone: 0; }
.game-tree-node[data-tree-node=hubs] { --portal-hue: -120deg; --stone-tone: 1; }
.game-tree-node[data-tree-node=stories] { --portal-hue: 135deg; --stone-tone: 2; }
.game-tree-node[data-tree-node=play] { --portal-hue: -160deg; --stone-tone: 3; }
.game-tree-node[data-tree-node=hubs-0] { --portal-hue: 15deg; --stone-tone: 4; }
.game-tree-node[data-tree-node=hubs-1] { --portal-hue: -25deg; --stone-tone: 5; }
.game-tree-node[data-tree-node=hubs-2] { --portal-hue: 55deg; --stone-tone: 6; }
.game-tree-node[data-tree-node=hubs-3] { --portal-hue: 90deg; --stone-tone: 7; }
.game-tree-node[data-tree-node=hubs-4] { --portal-hue: -185deg; --stone-tone: 8; }
.game-tree-node[data-tree-node=hubs-5] { --portal-hue: -65deg; --stone-tone: 9; }
.game-tree-node[data-tree-node=stories-0] { --portal-hue: 170deg; --stone-tone: 10; }
.game-tree-node[data-tree-node=stories-1] { --portal-hue: 40deg; --stone-tone: 11; }
.game-tree-node[data-tree-node=stories-2] { --portal-hue: -40deg; --stone-tone: 12; }
.game-tree-node[data-tree-node=stories-3] { --portal-hue: 110deg; --stone-tone: 13; }
.game-tree-node[data-tree-node=stories-4] { --portal-hue: 0deg; --stone-tone: 3; }
.game-tree-node[data-tree-node=play-0] { --portal-hue: -145deg; --stone-tone: 14; }
@keyframes game-tree-portal-loop {
  0.000000% { transform: translate(0%,0.000000%); }
  2.083333% { transform: translate(-12.5%,0.000000%); }
  4.166667% { transform: translate(-25%,0.000000%); }
  6.250000% { transform: translate(-37.5%,0.000000%); }
  8.333333% { transform: translate(-50%,0.000000%); }
  10.416667% { transform: translate(-62.5%,0.000000%); }
  12.500000% { transform: translate(-75%,0.000000%); }
  14.583333% { transform: translate(-87.5%,0.000000%); }
  16.666667% { transform: translate(0%,-16.666667%); }
  18.750000% { transform: translate(-12.5%,-16.666667%); }
  20.833333% { transform: translate(-25%,-16.666667%); }
  22.916667% { transform: translate(-37.5%,-16.666667%); }
  25.000000% { transform: translate(-50%,-16.666667%); }
  27.083333% { transform: translate(-62.5%,-16.666667%); }
  29.166667% { transform: translate(-75%,-16.666667%); }
  31.250000% { transform: translate(-87.5%,-16.666667%); }
  33.333333% { transform: translate(0%,-33.333333%); }
  35.416667% { transform: translate(-12.5%,-33.333333%); }
  37.500000% { transform: translate(-25%,-33.333333%); }
  39.583333% { transform: translate(-37.5%,-33.333333%); }
  41.666667% { transform: translate(-50%,-33.333333%); }
  43.750000% { transform: translate(-62.5%,-33.333333%); }
  45.833333% { transform: translate(-75%,-33.333333%); }
  47.916667% { transform: translate(-87.5%,-33.333333%); }
  50.000000% { transform: translate(0%,-50.000000%); }
  52.083333% { transform: translate(-12.5%,-50.000000%); }
  54.166667% { transform: translate(-25%,-50.000000%); }
  56.250000% { transform: translate(-37.5%,-50.000000%); }
  58.333333% { transform: translate(-50%,-50.000000%); }
  60.416667% { transform: translate(-62.5%,-50.000000%); }
  62.500000% { transform: translate(-75%,-50.000000%); }
  64.583333% { transform: translate(-87.5%,-50.000000%); }
  66.666667% { transform: translate(0%,-66.666667%); }
  68.750000% { transform: translate(-12.5%,-66.666667%); }
  70.833333% { transform: translate(-25%,-66.666667%); }
  72.916667% { transform: translate(-37.5%,-66.666667%); }
  75.000000% { transform: translate(-50%,-66.666667%); }
  77.083333% { transform: translate(-62.5%,-66.666667%); }
  79.166667% { transform: translate(-75%,-66.666667%); }
  81.250000% { transform: translate(-87.5%,-66.666667%); }
  83.333333% { transform: translate(0%,-83.333333%); }
  85.416667% { transform: translate(-12.5%,-83.333333%); }
  87.500000% { transform: translate(-25%,-83.333333%); }
  89.583333% { transform: translate(-37.5%,-83.333333%); }
  91.666667% { transform: translate(-50%,-83.333333%); }
  93.750000% { transform: translate(-62.5%,-83.333333%); }
  95.833333% { transform: translate(-75%,-83.333333%); }
  97.916667% { transform: translate(-87.5%,-83.333333%); }
  100.000000% { transform: translate(0%,0.000000%); }
}
.game-tree[data-tree-paused] .game-tree-portal-atlas,
.game-tree:not([data-tree-visible]) .game-tree-portal-atlas { animation-play-state: paused; }
@media (prefers-reduced-motion:reduce) {
  .game-tree-portal-atlas { animation: none; transform: none; }
}
@media (forced-colors:active) {
  .game-tree .game-tree-node { border-color: ButtonText; }
  .game-tree .game-tree-node:is(a,button):focus-visible { outline: 3px solid Highlight; }
  .game-tree-node:is(a,button):focus-visible .game-tree-copy { outline-color: Highlight; }
}

/* The opening grows continuously while stone sizes stay fixed, widening their gaps. */
.game-tree-copy { z-index: 4; }
.game-tree-stone-anchor { position: absolute; left: 40%; top: 40%; width: 20%; height: 20%; pointer-events: none; transform: translate(calc(var(--stone-x) * (178.125% + var(--tree-emerge) * 45.3125%)),calc(var(--stone-y) * (178.125% + var(--tree-emerge) * 45.3125%))); }
.game-tree-stone { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.game-tree-stone::after { content: ''; position: absolute; inset: var(--stone-hit-y) var(--stone-hit-x); pointer-events: auto; }
.game-tree-stone-sprite { display: block; width: 100%; height: 100%; background: url('/assets/hub-cards/tree-portal-stones.webp') no-repeat; background-size: 500% 6000%; image-rendering: pixelated; opacity: calc(.85 + var(--tree-emerge) * .15); }
@media (hover:hover) {
  .game-tree-stone:hover .game-tree-stone-sprite { animation: game-tree-stone-jolt .44s ease-out; }
}
@keyframes game-tree-stone-jolt {
  0%,100% { transform: translate(0,0) rotate(0); }
  18% { transform: translate(-2px,1px) rotate(-5deg); }
  36% { transform: translate(2px,-1px) rotate(4deg); }
  58% { transform: translate(-1px,0) rotate(-2deg); }
  78% { transform: translate(.5px,0) rotate(1deg); }
}
.game-tree[data-tree-paused] .game-tree-node { --tree-emerge: 0 !important; --pointer-x: 0 !important; --pointer-y: 0 !important; }
.game-tree[data-tree-paused] .game-tree-stone-sprite { animation: none; }
@media (prefers-reduced-motion:reduce) {
  .game-tree .game-tree-node { --tree-emerge: 0 !important; }
  .game-tree .game-tree-node:hover { transform: none; }
  .game-tree-stone, .game-tree-stone-sprite { animation: none !important; }
}

/* The noninteractive starting scene stays emerged, including when motion is paused. */
.game-tree .game-tree-node[data-tree-node=root] { --tree-emerge: 1 !important; cursor: var(--pixel-cursor,default); }

.game-tree .game-tree-node[data-tree-node=root] .game-tree-art { --tree-art-zoom: .28; --tree-plane-zoom: 1; }

/* Fixed offsets scatter the portals without shuffling links on revisit or resize. */
.game-tree-leaves { padding-top: 12px; padding-bottom: 80px; row-gap: 40px; }
.game-tree-leaves > li { translate: var(--scatter-x,0px) var(--scatter-y,0px); }
.game-tree-leaves > li:nth-child(6n+1) { --scatter-x: 16px; --scatter-y: 0px; }
.game-tree-leaves > li:nth-child(6n+2) { --scatter-x: -52px; --scatter-y: 92px; }
.game-tree-leaves > li:nth-child(6n+3) { --scatter-x: -96px; --scatter-y: 16px; }
.game-tree-leaves > li:nth-child(6n+4) { --scatter-x: 48px; --scatter-y: 42px; }
.game-tree-leaves > li:nth-child(6n+5) { --scatter-x: -90px; --scatter-y: 80px; }
.game-tree-leaves > li:nth-child(6n+6) { --scatter-x: -124px; --scatter-y: 58px; }
#game-tree-stories-children > li:nth-child(3) { --scatter-x: 12px; --scatter-y: 16px; }
#game-tree-stories-children > li:nth-child(5) { --scatter-x: -12px; --scatter-y: 92px; }
#game-tree-play-children > li { --scatter-x: -20px; --scatter-y: 0px; }
@media (max-width:1100px) {
  .game-tree-branch[data-tree-branch=hubs] > .game-tree-branch-heading { translate: 8px 12px; }
  .game-tree-branch[data-tree-branch=stories] > .game-tree-branch-heading { translate: -8px 38px; }
  .game-tree-branch[data-tree-branch=play] > .game-tree-branch-heading { translate: 12px -8px; }
  .game-tree-leaves > li:nth-child(6n+1) { --scatter-x: 8px; }
  .game-tree-leaves > li:nth-child(6n+2) { --scatter-x: -20px; }
  .game-tree-leaves > li:nth-child(6n+3) { --scatter-x: -28px; }
  .game-tree-leaves > li:nth-child(6n+4) { --scatter-x: 0px; }
  .game-tree-leaves > li:nth-child(6n+5) { --scatter-x: -12px; }
  .game-tree-leaves > li:nth-child(6n+6) { --scatter-x: -16px; }
  #game-tree-stories-children > li:nth-child(3) { --scatter-x: -24px; --scatter-y: 42px; }
}
@media (max-width:600px) {
  .game-tree-branch[data-tree-branch=hubs] > .game-tree-branch-heading { translate: 4px 8px; }
  .game-tree-branch[data-tree-branch=stories] > .game-tree-branch-heading { translate: -4px 24px; }
  .game-tree-branch[data-tree-branch=play] > .game-tree-branch-heading { translate: 6px -4px; }
  .game-tree-leaves { row-gap: 26px; padding-bottom: 36px; }
  .game-tree-leaves > li:nth-child(6n+1) { --scatter-x: -4px; --scatter-y: 0px; }
  .game-tree-leaves > li:nth-child(6n+2) { --scatter-x: 6px; --scatter-y: 18px; }
  .game-tree-leaves > li:nth-child(6n+3) { --scatter-x: 4px; --scatter-y: 10px; }
  .game-tree-leaves > li:nth-child(6n+4) { --scatter-x: -6px; --scatter-y: 24px; }
  .game-tree-leaves > li:nth-child(6n+5) { --scatter-x: -2px; --scatter-y: 0px; }
  .game-tree-leaves > li:nth-child(6n+6) { --scatter-x: 4px; --scatter-y: 20px; }
  #game-tree-stories-children > li:nth-child(3) { --scatter-x: 4px; --scatter-y: 10px; }
  #game-tree-stories-children > li:nth-child(5) { --scatter-x: -2px; --scatter-y: 0px; }
  #game-tree-play-children > li { --scatter-x: 0px; }
}