/* Rainy Network / Round 2. Load AFTER network.css, from site/css/.
   Original art only. All temporal changes are transform, opacity or clip-path.
   Each loop has held frames; every motion uses steps(). */

/* Shared address contract: both labels occupy the SAME reserved grid cell. */
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) {
  --r2-ink: #211a29;
  position: relative;
  isolation: isolate;
  display: grid;
  width: 520px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  color: var(--ink);
  font: 800 27px/1.1 var(--font-display);
  letter-spacing: -.045em;
  transition: transform 120ms steps(2,end);
  -webkit-tap-highlight-color: transparent;
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) > img {
  position: relative; z-index: 2; object-fit: contain; image-rendering: pixelated;
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) > [translate] {
  position: relative; z-index: 3; white-space: nowrap; min-width: 0;
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) .copy-label {
  position: relative; z-index: 4; display: grid; place-items: center;
  min-width: 0; margin: 0; border-radius: 0;
  font: 700 11px/1.4 var(--font-pixel); letter-spacing: 0; white-space: nowrap;
  transition: transform 120ms steps(2,end);
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) .copy-label > span {
  display: block; grid-area: 1 / 1; position: static; opacity: 1; transform: none;
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) .copy-done { visibility: hidden; }
.network-page .join-address:is(.ip-d,.ip-e,.ip-f).copied .copy-idle { visibility: hidden; }
.network-page .join-address:is(.ip-d,.ip-e,.ip-f).copied .copy-done { visibility: visible; }
.network-page .join-address:is(.ip-d,.ip-e,.ip-f):focus-visible {
  outline: 3px solid #a42e65; outline-offset: 8px;
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f):hover { transform: translateY(-3px); }
.network-page .join-address:is(.ip-d,.ip-e,.ip-f):active { transform: translateY(4px); }
.network-page .version-note:is(.ip-d,.ip-e,.ip-f) {
  max-width: 520px; margin: 18px 0 0; color: #665c6d;
  font: 600 12px/1.5 var(--font-body); letter-spacing: 0;
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) .ip-stage {
  pointer-events: none; position: absolute; z-index: 0; inset: 0; overflow: hidden;
}
/* A single stepped bolt, held for two frames, and a separate six-drop copy burst.
   These effects stay behind the readable address and reserved copy label. */
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) .ip-strike {
  position: absolute; pointer-events: none; z-index: 1; inset: 0;
  background: var(--pink-soft); opacity: 0;
  clip-path: polygon(0 68%,23% 68%,23% 56%,47% 56%,47% 42%,71% 42%,71% 26%,100% 26%,100% 33%,74% 33%,74% 50%,50% 50%,50% 64%,26% 64%,26% 77%,0 77%);
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f) .ip-burst {
  position: absolute; z-index: 2; pointer-events: none; left: 40px; top: 35%;
  width: 4px; height: 9px; background: var(--pink-deep); opacity: 0;
  box-shadow: 38px -12px var(--pink), 86px 2px var(--pink-deep), 144px -15px var(--pink), 206px 3px var(--pink-deep), 263px -8px var(--pink);
}
.network-page .join-address:is(.ip-d,.ip-e,.ip-f).copied .ip-strike { animation: r2-copy-strike 700ms steps(1,end) both; }
.network-page .join-address:is(.ip-d,.ip-e,.ip-f).copied .ip-burst { animation: r2-copy-burst 900ms steps(5,end) both; }
.network-page .join-address:is(.ip-d,.ip-e,.ip-f).copied .copy-label { background: var(--pink-soft); color: var(--ink); }
@keyframes r2-copy-strike {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  14% { clip-path: polygon(0 68%,23% 68%,23% 56%,47% 56%,47% 42%,71% 42%,71% 26%,100% 26%,100% 33%,74% 33%,74% 50%,50% 50%,50% 64%,26% 64%,26% 77%,0 77%); }
  48%,100% { opacity: 0; }
}
@keyframes r2-copy-burst {
  0% { opacity: 1; transform: translateY(-12px); }
  80% { opacity: 1; transform: translateY(48px); }
  100% { opacity: 0; transform: translateY(58px); }
}

/* D — Thunder switch. The only hot-pink face / ink-base direction. */
.network-page .join-address.ip-d {
  grid-template-columns: 66px minmax(0,1fr) 104px; gap: 14px;
  min-height: 102px; padding: 16px 14px; border: 3px solid var(--ink);
  background: var(--pink); box-shadow: 0 7px 0 var(--ink);
}
.network-page .join-address.ip-d > img { width: 66px; height: 66px; animation: r2-d-emblem 8s steps(1,end) infinite; }
.network-page .join-address.ip-d > [translate] { background: var(--pink); padding-block: 5px; }
.network-page .join-address.ip-d .copy-label {
  min-height: 50px; padding: 10px 6px; border: 2px solid var(--ink);
  background: var(--ink); color: #fff; box-shadow: 0 3px 0 #a42e65;
}
.network-page .join-address.ip-d .ip-stage::before {
  content: ""; position: absolute; left: 14%; right: -12%; top: -8px; height: 40px;
  background: url('../assets/scoreboard/cloud.png') 0 0 / 42px 42px repeat-x;
  opacity: .22; image-rendering: pixelated;
  animation: r2-d-clouds 8s steps(12,end) infinite;
}
.network-page .join-address.ip-d .ip-stage::after {
  content: ""; position: absolute; left: 22px; top: 4px; width: 3px; height: 8px;
  background: #a42e65; box-shadow: 86px 12px #a42e65,138px -10px #a42e65,202px 4px #a42e65,277px -12px #a42e65,350px 7px #a42e65,435px -8px #a42e65;
  animation: r2-d-rain 8s steps(8,end) infinite;
}
.network-page .join-address.ip-d .ip-strike { animation: r2-d-strike 8s steps(1,end) infinite; }
.network-page .join-address.ip-d::after {
  content: ""; position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 5px;
  height: 4px; background: var(--ink); clip-path: inset(0 88% 0 0);
  animation: r2-d-charge 8s steps(8,end) infinite;
}
.network-page .join-address.ip-d:hover { background: var(--pink); }
.network-page .join-address.ip-d:hover .copy-label { transform: translateY(-3px); }
.network-page .join-address.ip-d.copied > img { animation: r2-land 550ms steps(3,end) both; }
.network-page .join-address.ip-d.copied::after { animation: none; clip-path: none; }
@keyframes r2-d-clouds { 0%,12% { transform: translateX(0); } 65%,100% { transform: translateX(-42px); } }
@keyframes r2-d-rain {
  0% { opacity: 1; transform: translateY(-12px); }
  45% { opacity: 1; transform: translateY(72px); }
  48%,100% { opacity: 0; transform: translateY(78px); }
}
@keyframes r2-d-emblem { 0%,100% { transform: translateY(0); } 20%,36% { transform: translateY(-4px); } 48%,51% { transform: translate(2px,2px); } 54%,60% { transform: translateY(-4px); } 66% { transform: translateY(0); } }
@keyframes r2-d-strike { 0%,47%,53%,100% { opacity: 0; } 48%,52% { opacity: 1; } }
@keyframes r2-d-charge { 0%,12% { clip-path: inset(0 88% 0 0); } 46%,67% { clip-path: inset(0); } 76%,100% { clip-path: inset(0 88% 0 0); } }

/* E — Orbit sign. An oversized crest anchors a two-level pixel billboard.
   The sign is ink; a pale-pink text sheen stays above 4.5:1 contrast. */
.network-page .join-address.ip-e {
  grid-template-columns: 92px minmax(0,1fr); grid-template-rows: 51px 34px;
  column-gap: 16px; row-gap: 0; min-height: 119px; padding: 13px 18px 15px 10px;
  border: 0; background: var(--ink); color: #fff;
  box-shadow: 6px 6px 0 var(--pink);
  border: 3px solid var(--ink);
}
.network-page .join-address.ip-e > img {
  grid-area: 1 / 1 / 3 / 2; width: 92px; height: 92px;
  animation: r2-e-crest 10s steps(1,end) infinite;
}
.network-page .join-address.ip-e > [translate] { grid-area: 1 / 2; align-self: center; font-size: 30px; background: var(--ink); }
.network-page .join-address.ip-e .copy-label {
  grid-area: 2 / 2; align-self: stretch; justify-self: stretch; padding: 4px 10px;
  background: var(--pink); color: var(--ink); box-shadow: 0 3px 0 #a42e65;
}
.network-page .join-address.ip-e .copy-label::after {
  content: ""; width: 12px; height: 12px; position: absolute; right: 12px;
  background: var(--ink); clip-path: polygon(0 0,33% 0,33% 25%,66% 25%,66% 42%,100% 42%,100% 58%,66% 58%,66% 75%,33% 75%,33% 100%,0 100%);
}
.network-page .join-address.ip-e .ip-stage { z-index: 2; }
.network-page .join-address.ip-e .ip-stage::before,
.network-page .join-address.ip-e .ip-stage::after {
  content: ""; position: absolute; left: 18px; top: 18px; width: 12px; height: 12px;
  background: var(--pink); clip-path: polygon(33% 0,66% 0,66% 33%,100% 33%,100% 66%,66% 66%,66% 100%,33% 100%,33% 66%,0 66%,0 33%,33% 33%);
  animation: r2-e-orbit 10s steps(1,end) infinite;
}
.network-page .join-address.ip-e .ip-stage::after {
  left: 18px; top: 18px; width: 8px; height: 8px; background: #fff;
  transform: translate(62px,62px); animation-name: r2-e-orbit-counter;
}
.network-page .join-address.ip-e .ip-strike { z-index: 0; background: var(--pink); }
.network-page .join-address.ip-e .ip-sheen {
  position: absolute; inset: 0; color: #ff9ac5;
  clip-path: inset(0 100% 0 0); pointer-events: none;
  animation: r2-e-sheen 10s steps(8,end) infinite;
}
.network-page .join-address.ip-e::after {
  content: ""; position: absolute; left: 126px; right: 18px; top: 9px; height: 3px;
  background: var(--pink); clip-path: inset(0 88% 0 0); animation: r2-e-track 10s steps(10,end) infinite;
}
.network-page .join-address.ip-e:hover { background: var(--ink); }
.network-page .join-address.ip-e:hover .copy-label { transform: translateX(3px); }
.network-page .join-address.ip-e.copied > img { animation: r2-land 550ms steps(3,end) both; }
.network-page .join-address.ip-e.copied .ip-sheen { animation: r2-e-copy-sheen 650ms steps(8,end) both; }
@keyframes r2-e-crest { 0%,100% { transform: translateY(0); } 10% { transform: translateY(-5px); } 20%,36% { transform: translateY(-2px); } 46%,58% { transform: translateY(-6px); } 68%,90% { transform: translateY(0); } }
@keyframes r2-e-orbit { 0%,100% { transform: translate(0,0); } 10% { transform: translate(32px,-8px); } 20% { transform: translate(64px,4px); } 30% { transform: translate(73px,31px); } 40% { transform: translate(62px,62px); } 50% { transform: translate(29px,72px); } 60% { transform: translate(-6px,48px); } 70%,90% { transform: translate(-6px,20px); } }
@keyframes r2-e-orbit-counter { 0%,100% { transform: translate(62px,62px); } 10% { transform: translate(29px,72px); } 20% { transform: translate(-6px,48px); } 30% { transform: translate(-6px,20px); } 40% { transform: translate(0,0); } 50% { transform: translate(32px,-8px); } 60% { transform: translate(64px,4px); } 70%,90% { transform: translate(73px,31px); } }
@keyframes r2-e-sheen { 0%,24% { clip-path: inset(0 100% 0 0); } 26% { clip-path: inset(0 82% 0 0); } 45% { clip-path: inset(0 0 0 82%); } 47%,100% { clip-path: inset(0 0 0 100%); } }
@keyframes r2-e-track { 0%,12% { clip-path: inset(0 88% 0 0); } 48%,63% { clip-path: inset(0 0 0 88%); } 70%,100% { clip-path: inset(0 88% 0 0); } }
@keyframes r2-e-copy-sheen { 0% { clip-path: inset(0 82% 0 0); } 80% { clip-path: inset(0 0 0 82%); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes r2-land { 0% { transform: translateY(-8px) scale(1.12); } 60% { transform: translateY(3px) scale(.96); } 100% { transform: none; } }

/* F — Cloud courier. An open mechanical rail, a moving cloud, a huge Copy key. */
.network-page .join-address.ip-f {
  grid-template-columns: minmax(0,1fr) 106px; grid-template-rows: 43px 42px;
  gap: 0 18px; min-height: 112px; padding: 8px 6px 10px 0; border: 0;
  background: transparent; box-shadow: none;
}
.network-page .join-address.ip-f > img {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px;
  animation: r2-f-courier 12s steps(1,end) infinite;
}
.network-page .join-address.ip-f > [translate] {
  grid-area: 2 / 1; align-self: center; padding: 0 0 3px; font-size: 30px;
}
.network-page .join-address.ip-f .copy-label {
  grid-area: 1 / 2 / 3 / 3; align-self: stretch; padding: 43px 4px 10px;
  border: 3px solid var(--ink); background: var(--pink); color: var(--ink);
  box-shadow: inset 3px 3px 0 #fceaf2, inset -3px -3px 0 #a42e65, 5px 5px 0 var(--ink);
  animation: r2-f-key 12s steps(1,end) infinite;
}
.network-page .join-address.ip-f .copy-label::before {
  content: ""; position: absolute; width: 21px; height: 21px; top: 13px; left: calc(50% - 10px);
  background: var(--ink); mask: url('../assets/scoreboard/bolt.png') center / contain no-repeat; image-rendering: pixelated;
}
.network-page .join-address.ip-f .ip-stage { right: 130px; }
.network-page .join-address.ip-f .ip-stage::before {
  content: ""; position: absolute; left: 0; right: 0; top: 42px; height: 4px; background: #dcd6df;
}
.network-page .join-address.ip-f .ip-stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 42px; height: 4px;
  background: var(--pink); clip-path: inset(0 88% 0 0); animation: r2-f-rail 12s steps(12,end) infinite;
}
.network-page .join-address.ip-f::before {
  content: ""; position: absolute; left: 0; right: 130px; bottom: 10px; height: 5px; background: var(--ink);
  box-shadow: 0 4px 0 var(--pink);
}
.network-page .join-address.ip-f .ip-strike { background: var(--pink); top: 0; bottom: 35px; }
.network-page .join-address.ip-f:hover { background: transparent; }
.network-page .join-address.ip-f:hover .copy-label { animation: none; transform: translateY(-4px); }
.network-page .join-address.ip-f.copied .copy-label { animation: r2-f-copy-key 350ms steps(2,end) both; }
.network-page .join-address.ip-f.copied > img { animation: r2-land 550ms steps(3,end) both; }
.network-page .join-address.ip-f.copied .ip-stage::after { animation: none; clip-path: none; }
/* Percentage translation is relative to the moving image, so the track uses a
   container unit to follow the actual button width, including narrow columns. */
.network-page .join-address.ip-f { container-type: inline-size; }
@keyframes r2-f-courier {
  0% { transform: translate(0,0); }
  6% { transform: translate(12px,-5px); }
  10% { transform: translate(calc(12.5cqw - 24px),-5px); }
  14% { transform: translate(calc(25cqw - 48px),-5px); }
  18% { transform: translate(calc(37.5cqw - 72px),-5px); }
  22% { transform: translate(calc(50cqw - 96px),-5px); }
  26% { transform: translate(calc(62.5cqw - 120px),-5px); }
  30% { transform: translate(calc(75cqw - 144px),-5px); }
  34% { transform: translate(calc(87.5cqw - 168px),-5px); }
  38%,43% { transform: translate(calc(100cqw - 192px),-5px); }
  47%,53% { transform: translate(calc(100cqw - 188px),3px); }
  59% { transform: translate(calc(100cqw - 192px),-5px); }
  62% { transform: translate(calc(87.5cqw - 168px),-5px); }
  64% { transform: translate(calc(75cqw - 144px),-5px); }
  66% { transform: translate(calc(62.5cqw - 120px),-5px); }
  68% { transform: translate(calc(50cqw - 96px),-5px); }
  70% { transform: translate(calc(37.5cqw - 72px),-5px); }
  72% { transform: translate(calc(25cqw - 48px),-5px); }
  75% { transform: translate(calc(12.5cqw - 24px),-5px); }
  78%,100% { transform: translate(0,0); }
}
@keyframes r2-f-key { 0%,44%,56%,100% { transform: translate(0,0); } 46%,53% { transform: translate(4px,4px); } }
@keyframes r2-f-rail { 0% { clip-path: inset(0 88% 0 0); } 38%,59% { clip-path: inset(0); } 78%,100% { clip-path: inset(0 88% 0 0); } }
@keyframes r2-f-copy-key { 0% { transform: translate(5px,5px); } 100% { transform: translate(2px,2px); } }

/* Store: a fixed-size 108 x 44px pink button. No changing flex geometry. */
.network-page .btn-grad:is(.store-s1,.store-s2),
.network-page .nav-cta a.btn-grad:is(.store-s1,.store-s2) {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 108px;
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 108px; min-width: 108px; max-width: 108px; height: 44px; min-height: 44px;
  padding: 3px 8px 3px 4px; gap: 4px; border: 2px solid #a42e65; border-radius: 2px;
  background: var(--pink); color: var(--ink); box-shadow: 0 3px 0 #a42e65;
  font: 800 13px/1 var(--font-body); letter-spacing: 0;
  transition: transform 120ms steps(2,end);
}
.network-page .btn-grad:is(.store-s1,.store-s2) .store-stage {
  display: block; position: relative; flex: 0 0 44px; width: 44px; height: 34px;
  pointer-events: none; overflow: hidden;
}
.network-page .btn-grad:is(.store-s1,.store-s2) .store-stage img {
  position: absolute; left: 7px; top: 2px; width: 30px; height: 30px;
  max-width: none; object-fit: contain; image-rendering: pixelated;
  opacity: 0; animation-duration: 12s; animation-timing-function: steps(1,end); animation-iteration-count: infinite;
}
.network-page .btn-grad:is(.store-s1,.store-s2) .store-stage .reel-rainy { opacity: 1; }
.network-page .btn-grad:is(.store-s1,.store-s2) .store-label {
  position: relative; isolation: isolate; z-index: 3; display: block; padding: 5px 0; color: var(--ink);
}
.network-page .btn-grad:is(.store-s1,.store-s2) .store-label::after {
  content: ""; pointer-events: none; position: absolute; z-index: -1; inset: 1px -2px;
  background: #fceaf2;
  clip-path: inset(0 100% 0 0); animation: r2-store-sheen 12s steps(6,end) infinite;
}
.network-page .btn-grad:is(.store-s1,.store-s2):hover {
  background: #ff82bb; color: var(--ink); box-shadow: 0 5px 0 var(--ink); transform: translateY(-2px);
}
.network-page .btn-grad:is(.store-s1,.store-s2):hover .store-stage { transform: translateY(-2px); }
.network-page .btn-grad:is(.store-s1,.store-s2):focus-visible { outline: 3px solid #a42e65; outline-offset: 5px; }
.network-page .btn-grad:is(.store-s1,.store-s2):active { transform: translateY(2px); }
.network-page .btn-grad:is(.store-s1,.store-s2) .store-stage::after {
  content: ""; position: absolute; z-index: 2; left: 1px; top: 4px; width: 6px; height: 6px;
  background: var(--ink); clip-path: polygon(33% 0,66% 0,66% 33%,100% 33%,100% 66%,66% 66%,66% 100%,33% 100%,33% 66%,0 66%,0 33%,33% 33%);
  opacity: 0; animation: r2-store-spark 12s steps(1,end) infinite;
}
.network-page .btn-grad:is(.store-s1,.store-s2) .store-stage .reel-key-rainy { left: 1px; width: 23px; }
.network-page .btn-grad:is(.store-s1,.store-s2) .store-stage .reel-key-cosmetics { left: 21px; width: 23px; }
@keyframes r2-store-sheen { 0%,56% { clip-path: inset(0 100% 0 0); } 57% { clip-path: inset(0 80% 0 0); } 66% { clip-path: inset(0 0 0 80%); } 68%,100% { clip-path: inset(0 0 0 100%); } }
@keyframes r2-store-spark {
  0%,46%,68%,100% { opacity: 0; transform: translate(0,0); }
  48% { opacity: 1; transform: translate(2px,1px); }
  52% { opacity: 1; transform: translate(31px,5px); }
  56% { opacity: 1; transform: translate(30px,23px); }
  60% { opacity: 1; transform: translate(3px,23px); }
  64% { opacity: 1; transform: translate(0,-1px); }
}
/* S2 makes the stage the whole button: larger crests parade through it, while
   a pink label backing preserves contrast and a pixel runway reacts underneath. */
.network-page .btn-grad.store-s2 .store-stage { position: absolute; inset: 0; width: 104px; height: 40px; }
.network-page .btn-grad.store-s2 .store-stage img { left: 5px; top: 1px; width: 38px; height: 38px; }
.network-page .btn-grad.store-s2 .store-label { margin-left: 48px; background: var(--pink); padding: 5px 3px; }
.network-page .btn-grad.store-s2 .store-stage .reel-key-rainy { left: 0; width: 29px; }
.network-page .btn-grad.store-s2 .store-stage .reel-key-cosmetics { left: 23px; width: 29px; }
.network-page .btn-grad.store-s2::after {
  content: ""; display: block; position: absolute; z-index: 4; top: auto; left: 4px; right: 4px; bottom: 1px;
  width: auto; height: 3px; opacity: 1; transform: none; transition: none; background: var(--ink); clip-path: inset(0 88% 0 0); animation: r2-s2-runway 12s steps(6,end) infinite;
}
.network-page .btn-grad.store-s2:hover .store-label { background: #ff82bb; }
@keyframes r2-s2-runway { 0% { clip-path: inset(0 88% 0 0); } 38%,42% { clip-path: inset(0); } 45%,69% { clip-path: inset(0 30%); } 72%,93% { clip-path: inset(0 0 0 88%); } 96%,100% { clip-path: inset(0 88% 0 0); } }

/* Phone geometry. Width, padding and font size never animate. */
@media (max-width:720px) {
  .network-page .join-address.ip-d { width: 100%; min-height: 94px; grid-template-columns: 48px minmax(0,1fr) 82px; gap: 8px; padding: 14px 9px; font-size: 20px; }
  .network-page .join-address.ip-d > img { width: 48px; height: 56px; }
  .network-page .join-address.ip-d .copy-label { min-height: 48px; padding: 8px 3px; font-size: 10px; }
  .network-page .join-address.ip-e { width: 100%; min-height: 112px; grid-template-columns: 72px minmax(0,1fr); grid-template-rows: 46px 34px; column-gap: 10px; padding: 12px 14px 14px 8px; }
  .network-page .join-address.ip-e > img { width: 76px; height: 80px; }
  .network-page .join-address.ip-e > [translate] { font-size: 25px; }
  .network-page .join-address.ip-e .copy-label { font-size: 10px; }
  .network-page .join-address.ip-e::after { left: 94px; right: 14px; }
  .network-page .join-address.ip-e .ip-stage::before { left: 12px; top: 8px; }
  .network-page .join-address.ip-e .ip-stage::after { left: 12px; top: 8px; }
  .network-page .join-address.ip-f { width: 100%; grid-template-columns: minmax(0,1fr) 90px; column-gap: 12px; padding: 8px 6px 10px 0; }
  .network-page .join-address.ip-f > [translate] { font-size: 24px; }
  .network-page .join-address.ip-f .copy-label { font-size: 10px; }
  .network-page .join-address.ip-f .ip-stage, .network-page .join-address.ip-f::before { right: 114px; }
  .network-page .join-address:is(.ip-d,.ip-e,.ip-f) .ip-burst { left: 14px; box-shadow: 30px -12px var(--pink),68px 2px var(--pink-deep),120px -15px var(--pink),180px 3px var(--pink-deep),236px -8px var(--pink); }
  .network-page .version-note.ip-d, .network-page .version-note.ip-e, .network-page .version-note.ip-f { font-size: 11px; }
}
@media (max-width:380px) {
  .network-page .join-address.ip-d { grid-template-columns: 38px minmax(0,1fr) 74px; gap: 5px; padding-inline: 7px; font-size: 18px; }
  .network-page .join-address.ip-d > img { width: 38px; }
  .network-page .join-address.ip-d .copy-label { font-size: 9px; }
  .network-page .join-address.ip-e > [translate] { font-size: 22px; }
  .network-page .join-address.ip-f > [translate] { font-size: 21px; }
}

/* The original header's full brand + Discord words exceed a 360px viewport.
   Reserve the reel beside the existing controls; retain both accessible names. */
@media (max-width:480px) {
  .network-page .nav:has(.store-s1,.store-s2) .brand span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width:380px) {
  .network-page .nav:has(.store-s1,.store-s2) .nav-discord .dc-label { display: none; }
  .network-page .nav:has(.store-s1,.store-s2) .nav-discord { padding-right: 0; }
  .network-page .nav:has(.store-s1,.store-s2) .nav-discord .dc-mark { margin-right: 0; }
}

/* Chosen stills (not a random paused frame). Rainy crest, orbit stars, short rail.
   Existing network.css also freezes the original hero under both preferences. */
body.network-page.motion-paused :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2),
body.network-page.motion-paused :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2) *,
body.network-page.motion-paused :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2)::before,
body.network-page.motion-paused :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2)::after,
body.network-page.motion-paused :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2) *::before,
body.network-page.motion-paused :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2) *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion:reduce) {
  .network-page :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2),
  .network-page :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2) *,
  .network-page :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2)::before,
  .network-page :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2)::after,
  .network-page :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2) *::before,
  .network-page :is(.ip-d,.ip-e,.ip-f,.store-s1,.store-s2) *::after { animation: none !important; transition: none !important; }
}
/* GENERATED REEL TABLES — build_round2.py, 72 held frames / 12 s. */
.network-page .btn-grad.store-s1 .reel-sunny { animation-name: r2-s1-sunny; }
@keyframes r2-s1-sunny {
  0.00000% { opacity:1; transform:translateY(4px) scale(.75); }
  1.38889% { opacity:1; transform:translateY(-2px) scale(1.1); }
  2.77778% { opacity:1; transform:translateY(0) scale(1); }
  6.94444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:1; transform:translateY(4px) scale(.75); }
}
.network-page .btn-grad.store-s1 .reel-windy { animation-name: r2-s1-windy; }
@keyframes r2-s1-windy {
  0.00000% { opacity:0; transform:translateY(0); }
  6.94444% { opacity:1; transform:translateY(4px) scale(.75); }
  8.33333% { opacity:1; transform:translateY(-2px) scale(1.1); }
  9.72222% { opacity:1; transform:translateY(0) scale(1); }
  12.50000% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-cloudy { animation-name: r2-s1-cloudy; }
@keyframes r2-s1-cloudy {
  0.00000% { opacity:0; transform:translateY(0); }
  12.50000% { opacity:1; transform:translateY(4px) scale(.75); }
  13.88889% { opacity:1; transform:translateY(-2px) scale(1.1); }
  15.27778% { opacity:1; transform:translateY(0) scale(1); }
  18.05556% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-snowy { animation-name: r2-s1-snowy; }
@keyframes r2-s1-snowy {
  0.00000% { opacity:0; transform:translateY(0); }
  18.05556% { opacity:1; transform:translateY(4px) scale(.75); }
  19.44444% { opacity:1; transform:translateY(-2px) scale(1.1); }
  20.83333% { opacity:1; transform:translateY(0) scale(1); }
  23.61111% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-rainy { animation-name: r2-s1-rainy; }
@keyframes r2-s1-rainy {
  0.00000% { opacity:0; transform:translateY(0); }
  23.61111% { opacity:1; transform:translateY(4px) scale(.75); }
  25.00000% { opacity:1; transform:translateY(-2px) scale(1.1); }
  26.38889% { opacity:1; transform:translateY(0) scale(1); }
  30.55556% { opacity:0; transform:translateY(0); }
  94.44444% { opacity:1; transform:translateY(0) scale(1); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-stormy { animation-name: r2-s1-stormy; }
@keyframes r2-s1-stormy {
  0.00000% { opacity:0; transform:translateY(0); }
  30.55556% { opacity:1; transform:translateY(4px) scale(.75); }
  31.94444% { opacity:1; transform:translateY(-2px) scale(1.1); }
  33.33333% { opacity:0; transform:translateY(0); }
  36.11111% { opacity:1; transform:translateY(0) scale(1); }
  38.88889% { opacity:0; transform:translateY(0); }
  41.66667% { opacity:1; transform:translateY(0) scale(1); }
  44.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-stormy-f2 { animation-name: r2-s1-stormy-f2; }
@keyframes r2-s1-stormy-f2 {
  0.00000% { opacity:0; transform:translateY(0); }
  33.33333% { opacity:1; transform:translateY(0) scale(1); }
  36.11111% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-stormy-f3 { animation-name: r2-s1-stormy-f3; }
@keyframes r2-s1-stormy-f3 {
  0.00000% { opacity:0; transform:translateY(0); }
  38.88889% { opacity:1; transform:translateY(0) scale(1); }
  41.66667% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-plus { animation-name: r2-s1-plus; }
@keyframes r2-s1-plus {
  0.00000% { opacity:0; transform:translateY(0); }
  44.44444% { opacity:1; transform:translateY(-30px) scale(.8); }
  45.83333% { opacity:1; transform:translateY(4px) scale(1.12); }
  47.22222% { opacity:1; transform:translateY(-2px) scale(1.04); }
  48.61111% { opacity:1; transform:translateY(0) scale(1); }
  69.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-key-rainy { animation-name: r2-s1-key-rainy; }
@keyframes r2-s1-key-rainy {
  0.00000% { opacity:0; transform:translateY(0); }
  69.44444% { opacity:1; transform:translateY(4px) scale(0.8); }
  70.83333% { opacity:1; transform:translateY(-3px) scale(1); }
  72.22222% { opacity:1; transform:translateY(0px) scale(1); }
  75.00000% { opacity:1; transform:translateY(-2px) scale(1); }
  77.77778% { opacity:1; transform:translateY(0px) scale(1); }
  80.55556% { opacity:1; transform:translateY(4px) scale(1); }
  81.94444% { opacity:1; transform:translateY(-3px) scale(1); }
  83.33333% { opacity:1; transform:translateY(0px) scale(1); }
  86.11111% { opacity:1; transform:translateY(-2px) scale(1); }
  88.88889% { opacity:1; transform:translateY(0px) scale(1); }
  91.66667% { opacity:1; transform:translateY(4px) scale(1); }
  93.05556% { opacity:1; transform:translateY(-3px) scale(1); }
  94.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s1 .reel-key-cosmetics { animation-name: r2-s1-key-cosmetics; }
@keyframes r2-s1-key-cosmetics {
  0.00000% { opacity:0; transform:translateY(0); }
  72.22222% { opacity:1; transform:translateY(4px) scale(0.8); }
  73.61111% { opacity:1; transform:translateY(-3px) scale(1); }
  75.00000% { opacity:1; transform:translateY(0px) scale(1); }
  77.77778% { opacity:1; transform:translateY(-2px) scale(1); }
  80.55556% { opacity:1; transform:translateY(0px) scale(1); }
  83.33333% { opacity:1; transform:translateY(4px) scale(1); }
  84.72222% { opacity:1; transform:translateY(-3px) scale(1); }
  86.11111% { opacity:1; transform:translateY(0px) scale(1); }
  88.88889% { opacity:1; transform:translateY(-2px) scale(1); }
  91.66667% { opacity:1; transform:translateY(0px) scale(1); }
  94.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-sunny { animation-name: r2-s2-sunny; }
@keyframes r2-s2-sunny {
  0.00000% { opacity:1; transform:translate(40px,0); }
  1.38889% { opacity:1; transform:translate(10px,0); }
  2.77778% { opacity:1; transform:translate(0px,0); }
  4.16667% { opacity:1; transform:translate(-3px,0); }
  5.55556% { opacity:1; transform:translate(-12px,0); }
  6.94444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:1; transform:translate(40px,0); }
}
.network-page .btn-grad.store-s2 .reel-windy { animation-name: r2-s2-windy; }
@keyframes r2-s2-windy {
  0.00000% { opacity:0; transform:translateY(0); }
  6.94444% { opacity:1; transform:translate(40px,0); }
  8.33333% { opacity:1; transform:translate(10px,0); }
  9.72222% { opacity:1; transform:translate(0px,0); }
  11.11111% { opacity:1; transform:translate(-3px,0); }
  12.50000% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-cloudy { animation-name: r2-s2-cloudy; }
@keyframes r2-s2-cloudy {
  0.00000% { opacity:0; transform:translateY(0); }
  12.50000% { opacity:1; transform:translate(40px,0); }
  13.88889% { opacity:1; transform:translate(10px,0); }
  15.27778% { opacity:1; transform:translate(0px,0); }
  16.66667% { opacity:1; transform:translate(-3px,0); }
  18.05556% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-snowy { animation-name: r2-s2-snowy; }
@keyframes r2-s2-snowy {
  0.00000% { opacity:0; transform:translateY(0); }
  18.05556% { opacity:1; transform:translate(40px,0); }
  19.44444% { opacity:1; transform:translate(10px,0); }
  20.83333% { opacity:1; transform:translate(0px,0); }
  22.22222% { opacity:1; transform:translate(-3px,0); }
  23.61111% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-rainy { animation-name: r2-s2-rainy; }
@keyframes r2-s2-rainy {
  0.00000% { opacity:0; transform:translateY(0); }
  23.61111% { opacity:1; transform:translate(40px,0); }
  25.00000% { opacity:1; transform:translate(10px,0); }
  26.38889% { opacity:1; transform:translate(0px,0); }
  27.77778% { opacity:1; transform:translate(-3px,0); }
  29.16667% { opacity:1; transform:translate(-12px,0); }
  30.55556% { opacity:0; transform:translateY(0); }
  94.44444% { opacity:1; transform:translateY(0) scale(1); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-stormy { animation-name: r2-s2-stormy; }
@keyframes r2-s2-stormy {
  0.00000% { opacity:0; transform:translateY(0); }
  30.55556% { opacity:1; transform:translateY(4px) scale(.75); }
  31.94444% { opacity:1; transform:translateY(-2px) scale(1.1); }
  33.33333% { opacity:0; transform:translateY(0); }
  36.11111% { opacity:1; transform:translateY(0) scale(1); }
  38.88889% { opacity:0; transform:translateY(0); }
  41.66667% { opacity:1; transform:translateY(0) scale(1); }
  44.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-stormy-f2 { animation-name: r2-s2-stormy-f2; }
@keyframes r2-s2-stormy-f2 {
  0.00000% { opacity:0; transform:translateY(0); }
  33.33333% { opacity:1; transform:translateY(0) scale(1); }
  36.11111% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-stormy-f3 { animation-name: r2-s2-stormy-f3; }
@keyframes r2-s2-stormy-f3 {
  0.00000% { opacity:0; transform:translateY(0); }
  38.88889% { opacity:1; transform:translateY(0) scale(1); }
  41.66667% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-plus { animation-name: r2-s2-plus; }
@keyframes r2-s2-plus {
  0.00000% { opacity:0; transform:translateY(0); }
  44.44444% { opacity:1; transform:translateY(-30px) scale(.8); }
  45.83333% { opacity:1; transform:translateY(4px) scale(1.12); }
  47.22222% { opacity:1; transform:translateY(-2px) scale(1.04); }
  48.61111% { opacity:1; transform:translateY(0) scale(1); }
  69.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-key-rainy { animation-name: r2-s2-key-rainy; }
@keyframes r2-s2-key-rainy {
  0.00000% { opacity:0; transform:translateY(0); }
  69.44444% { opacity:1; transform:translateY(4px) scale(0.8); }
  70.83333% { opacity:1; transform:translateY(-3px) scale(1); }
  72.22222% { opacity:1; transform:translateY(0px) scale(1); }
  75.00000% { opacity:1; transform:translateY(-2px) scale(1); }
  77.77778% { opacity:1; transform:translateY(0px) scale(1); }
  80.55556% { opacity:1; transform:translateY(4px) scale(1); }
  81.94444% { opacity:1; transform:translateY(-3px) scale(1); }
  83.33333% { opacity:1; transform:translateY(0px) scale(1); }
  86.11111% { opacity:1; transform:translateY(-2px) scale(1); }
  88.88889% { opacity:1; transform:translateY(0px) scale(1); }
  91.66667% { opacity:1; transform:translateY(4px) scale(1); }
  93.05556% { opacity:1; transform:translateY(-3px) scale(1); }
  94.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}
.network-page .btn-grad.store-s2 .reel-key-cosmetics { animation-name: r2-s2-key-cosmetics; }
@keyframes r2-s2-key-cosmetics {
  0.00000% { opacity:0; transform:translateY(0); }
  72.22222% { opacity:1; transform:translateY(4px) scale(0.8); }
  73.61111% { opacity:1; transform:translateY(-3px) scale(1); }
  75.00000% { opacity:1; transform:translateY(0px) scale(1); }
  77.77778% { opacity:1; transform:translateY(-2px) scale(1); }
  80.55556% { opacity:1; transform:translateY(0px) scale(1); }
  83.33333% { opacity:1; transform:translateY(4px) scale(1); }
  84.72222% { opacity:1; transform:translateY(-3px) scale(1); }
  86.11111% { opacity:1; transform:translateY(0px) scale(1); }
  88.88889% { opacity:1; transform:translateY(-2px) scale(1); }
  91.66667% { opacity:1; transform:translateY(0px) scale(1); }
  94.44444% { opacity:0; transform:translateY(0); }
  100.00000% { opacity:0; transform:translateY(0); }
}

/* The address sign at about two thirds of its drawn size (owner 2026-10-06). zoom scales every pixel
   measure of the component together - art, orbit, sheen - and the Copy label is set larger so it stays
   readable; on phones the sign keeps the full width and only gets lower. */
.network-page .join-address.ip-e { zoom: .64; }
.network-page .join-address.ip-e .copy-label { font-size: 16px; }
@media (max-width:720px) {
  .network-page .join-address.ip-e { zoom: .8; }
  .network-page .join-address.ip-e .copy-label { font-size: 12.5px; }
}