/* ===================== PICKER ===================== */
.picker {
  --tilt: 56%;
}
.door-lights,
.door-magpie {
  position: absolute;
  top: -400px;
  bottom: 0;
  display: block;
  text-align: left;
  overflow: hidden;
}
.door-lights {
  left: -400px;
  right: 0;
  background: #10263a url(../assets/street.webp) 0% 100% / auto 1230px no-repeat;
  color: var(--cream);
  padding: 0;
  clip-path: polygon(
    0 0,
    calc(400px + 660px) 0,
    calc(400px + 500px) 100%,
    0 100%
  );
  background-position: 375px 100%;
  background-size: 1230px 820px;
}
.door-magpie {
  left: 0;
  right: -400px;
  background: var(--red);
  clip-path: polygon(668px 0, 100% 0, 100% 100%, 508px 100%);
  color: var(--paper);
}
.door-lights .d-name,
.door-lights .d-sub {
  position: absolute;
  left: 556px;
}
.door-lights .d-name {
  top: 800px;
  font: 500 74px/0.95 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  width: 300px;
}
.door-lights .d-sub {
  top: 960px;
  font-size: 21px;
  font-weight: 500;
  width: 300px;
  text-shadow: 0 1px 8px #0d2a3dcc;
}
.door-magpie .bird {
  position: absolute;
  left: 650px;
  top: 870px;
  width: 330px;
  height: 495px;
  transform: scaleX(-1);
}
.door-magpie .d-name {
  position: absolute;
  left: 880px;
  top: 590px;
  width: 270px;
  font: 400 58px/0.98 "Bowlby One";
  color: var(--paper);
}
.door-magpie .d-sub {
  position: absolute;
  left: 882px;
  top: 790px;
  width: 270px;
  font: 700 21px/1.2 "Familjen Grotesk";
  color: var(--paper);
}
.door-lights:active,
.door-magpie:active {
  filter: brightness(1.08);
}
.pick-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  text-align: center;
  font: 500 46px/1 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  color: var(--cream);
  text-shadow: 0 2px 16px #0009;
  pointer-events: none;
}
.pick-note {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  text-shadow: 0 1px 8px #000a;
  pointer-events: none;
}
.join {
  position: absolute;
  left: 40px;
  bottom: 26px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--cream);
}
.join-link {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.join label {
  font-size: 15px;
  font-weight: 600;
}
.join-input {
  width: 220px;
  height: 44px;
  border-radius: 6px;
  border: 0;
  padding: 0 12px;
  font-size: 16px;
  color: var(--plum);
  background: var(--cream);
}
.join-go {
  height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--amber);
  color: var(--plum);
  font-weight: 700;
}

/* ===================== LIGHTS ON: HOME ===================== */
.home-lights .word {
  position: absolute;
  left: 150px;
  top: 40px;
  font: 500 88px/0.92 Fraunces;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100,
    "WONK" 1;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.home-lights .word em {
  font-style: normal;
  color: var(--amber);
}
.home-lights .tag {
  position: absolute;
  left: 156px;
  top: 214px;
  width: 340px;
  font-size: 20px;
  line-height: 1.35;
  color: var(--cream);
  text-shadow: 0 1px 8px #0d2a3dcc;
}
.home-lights .stats {
  position: absolute;
  left: 156px;
  top: 352px;
  width: 360px;
  color: var(--cream);
}
.home-lights .count {
  font: 500 62px/1 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  color: var(--amber);
}
.home-lights .count small {
  font-size: 27px;
  font-weight: 400;
  color: var(--cream);
}
.home-lights .flickline {
  margin-top: 10px;
  font-size: 17px;
  display: flex;
  gap: 9px;
  align-items: center;
  text-shadow: 0 1px 6px #0d2a3daa;
}
.home-lights .flickline i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #c98b3d;
  box-shadow: 0 0 0 2px #c98b3d44;
  animation: flick 2.6s steps(1) infinite;
  flex: none;
}
.home-lights .flickline i.calm {
  background: var(--amber);
  box-shadow: 0 0 8px #ffc36b99;
  animation: none;
}
.home-lights .cta {
  position: absolute;
  left: 156px;
  top: 466px;
  width: 346px;
  height: 84px;
}
.home-lights .sec {
  position: absolute;
  left: 156px;
  top: 562px;
  display: flex;
  gap: 10px;
}
.home-lights .ghost {
  width: 168px;
  height: 56px;
  border-radius: 8px;
  background: #0e2133f0;
  border: 1.5px solid #fbf1dc55;
  font-weight: 600;
  font-size: 17px;
  color: var(--cream);
}
.home-lights .switch {
  position: absolute;
  left: 156px;
  top: 626px;
  width: 346px;
  height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 6px #0d2a3dcc;
}
.home-lights .grown {
  position: absolute;
  left: 400px;
  top: 786px;
  font-size: 13px;
  color: var(--cream);
  opacity: 0.75;
}
.home-lights .nights {
  position: absolute;
  left: 520px;
  top: 788px;
  font-size: 13px;
  color: var(--cream);
  opacity: 0.75;
}

.home-lights .cta,
.reveal-lights .cta,
.naming .cta,
.intro-lights .cta,
.finale .cta {
  background: var(--amber);
  color: var(--plum);
  border-radius: 8px;
  font: 600 27px/1.1 Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 24px;
  box-shadow: 0 8px 26px #0a142055;
}
.home-lights .cta small {
  font: 500 15px Figtree;
  opacity: 0.75;
  margin-top: 4px;
}
.home-lights .cta:active,
.reveal-lights .cta:active {
  transform: translateY(2px);
}

.bld-slot {
  position: absolute;
  left: 536px;
  top: 24px;
  width: 620px;
  height: 748px;
}
.building {
  position: relative;
  width: 620px;
  height: 748px;
}
.facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.axis {
  position: absolute;
  font: 600 14px/1 Fraunces;
  color: #f0ddbb;
  text-align: center;
  pointer-events: none;
}
.axis.top {
  top: 103px;
  width: 35px;
}
.axis.side {
  left: 11px;
  width: 22px;
  height: 35px;
  line-height: 35px;
}
.win {
  position: absolute;
  width: 35px;
  height: 35px;
  background: linear-gradient(#1a3550, #13283d);
  box-shadow: inset 0 0 0 2px #2a1420;
  overflow: visible;
  cursor: pointer;
}
.win::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 1.5px;
  margin-left: -0.75px;
  background: #2a1420;
  opacity: 0.55;
}
.win::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -5px;
  height: 4px;
  background: #2a1420;
}
.win.arch {
  border-radius: 18px 18px 0 0;
}
.win.lit {
  box-shadow:
    inset 0 0 0 2px #2a1420,
    0 0 15px 2px #ffb04e70;
}
.win.lit::before {
  display: none;
}
.win.lit.h0 {
  background: linear-gradient(#ffd98e, #ffaf4e);
}
.win.lit.h1 {
  background: linear-gradient(#ffe7b0, #ffc877);
}
.win.lit.h2 {
  background: linear-gradient(#ffc77a, #f59a45);
}
.win img {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  width: 31px;
  height: 31px;
}
.win img.flip {
  transform: scaleX(-1);
}
.win.flick {
  animation: flick 3.4s steps(1) infinite;
}
.win.lit.flick.h0,
.win.lit.flick.h1,
.win.lit.flick.h2 {
  background: #9a6a33;
  box-shadow: inset 0 0 0 2px #2a1420;
}
.win.flick img {
  opacity: 0.55;
}
.win.rooted::after {
  background: linear-gradient(
    90deg,
    #3f7a4a 0 30%,
    #e8807a 30% 45%,
    #3f7a4a 45% 70%,
    #f1d27a 70% 85%,
    #3f7a4a 85%
  );
}
.win.twinning {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
  z-index: 2;
}
@keyframes flick {
  0%,
  62%,
  66%,
  100% {
    opacity: 1;
  }
  63% {
    opacity: 0.45;
  }
  64% {
    opacity: 1;
  }
  65% {
    opacity: 0.6;
  }
}
.bld-name {
  position: absolute;
  left: 24px;
  bottom: 19px;
  width: 240px;
  text-align: center;
  font: 500 20px/1.1 Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
  color: var(--cream);
  pointer-events: none;
}
.bld-dir {
  position: absolute;
  right: 24px;
  bottom: 10px;
  width: 220px;
  height: 42px;
  font: 600 16px Figtree;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.w-pop {
  position: absolute;
  width: 216px;
  padding: 10px 14px 12px;
  background: var(--cream);
  color: var(--plum);
  border-radius: 7px;
  box-shadow: 0 8px 22px #0a142088;
  z-index: 6;
  pointer-events: none;
}
.w-pop b {
  display: block;
  font: 600 25px/1.1 Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
}
.w-pop strong {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
}
.w-pop span {
  display: block;
  font-size: 14px;
  line-height: 1.28;
  font-weight: 500;
  margin-top: 2px;
}
.w-pop em {
  display: block;
  font-style: normal;
  font-size: 12px;
  margin-top: 6px;
  color: #7c3b48;
  font-weight: 600;
}

.summary {
  position: absolute;
  left: 156px;
  top: 96px;
  width: 346px;
  color: var(--cream);
}
.summary h1 {
  font: 500 66px/1 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  color: var(--amber);
  margin-bottom: 18px;
}
.summary p {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
  text-shadow: 0 1px 8px #0d2a3dcc;
}
.summary .cta {
  position: static;
  margin-top: 26px;
  width: 240px;
  height: 72px;
  background: var(--amber);
  color: var(--plum);
  border-radius: 8px;
  font: 600 26px Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
}
.movein {
  position: absolute;
  left: 150px;
  top: 330px;
  width: 360px;
  background: var(--cream);
  color: var(--plum);
  border-radius: 10px;
  padding: 18px 22px 20px;
  box-shadow: 0 14px 40px #06101a99;
  z-index: 8;
}
.movein-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a65a12;
}
.movein-plate {
  width: 120px;
  height: 120px;
  margin: 10px 0 8px;
  background: linear-gradient(#ffd98e, #ffaf4e);
  box-shadow: inset 0 0 0 4px #2a1420;
  padding: 10px 10px 4px;
}
.movein-plate.small {
  width: 100px;
  height: 100px;
}
.movein-plate img {
  width: 100%;
  height: 100%;
  display: block;
}
.movein h2,
.loot h2 {
  font: 600 30px/1.05 Fraunces;
  font-variation-settings:
    "opsz" 72,
    var(--soft);
}
.movein p,
.loot p {
  font-size: 18px;
  line-height: 1.3;
  margin-top: 5px;
  font-weight: 500;
}
.movein-fact {
  font: 600 18px Fraunces;
  margin-top: 8px;
  color: #a65a12;
}
.movein .card-go {
  margin-top: 12px;
  width: 100%;
  height: 54px;
  background: var(--amber);
  border-radius: 7px;
  font: 600 21px Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
}
.nudge {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 7px 8px 7px 16px;
  background: var(--cream);
  color: var(--plum);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px #0006;
  white-space: nowrap;
  z-index: 10;
}
.nudge-x {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--plum);
  color: var(--cream);
  font-weight: 700;
  font-size: 13px;
}

/* ===================== LIGHTS ON: PLAY ===================== */
.play-lights .exit {
  background: #0e2133e6;
  border: 1.5px solid #fbf1dc44;
  border-radius: 8px;
  color: var(--cream);
}
.play-lights .prog i {
  width: 20px;
  height: 28px;
  border-radius: 2px 2px 1px 1px;
  background: #13293d;
  border: 1.5px solid #fbf1dc33;
  flex: none;
}
.play-lights .prog i.on {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 12px #ffc36b66;
}
.play-lights .eq {
  position: absolute;
  left: 54px;
  top: 96px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--cream);
  font: 500 150px/1.05 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.play-lights .eq .x {
  color: var(--amber);
}
.play-lights .slot {
  min-width: 178px;
  height: 130px;
  line-height: 124px;
  border-bottom: 7px solid var(--amber);
  margin-left: 6px;
  text-align: center;
  color: var(--cream);
}
.play-lights .slot.good {
  color: var(--amber);
}
.play-lights .hintbtn,
.play-lights .skipbtn {
  position: absolute;
  left: 60px;
  top: 276px;
  height: 54px;
  padding: 0 22px;
  border-radius: 8px;
  background: #0e2133e6;
  border: 1.5px solid #fbf1dc55;
  color: var(--cream);
  font-weight: 600;
  font-size: 18px;
}
.play-lights.in-check .skipbtn {
  background: #0e2133e6;
}
.play-lights .arrbox {
  position: absolute;
  left: 58px;
  bottom: 48px;
  display: flex;
  align-items: flex-end;
}
.play-lights .note {
  position: absolute;
  left: 430px;
  bottom: 48px;
  width: 272px;
  background: var(--cream);
  color: var(--plum);
  padding: 18px 20px 6px;
  border-radius: 6px;
  box-shadow: 0 10px 26px #0a142066;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
}
.play-lights .note p,
.card-lines p {
  margin-bottom: 13px;
}
.play-lights .note b,
.card-lines b {
  display: block;
  font: 600 27px/1.12 Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
}
.play-lights .note p:nth-child(odd) b {
  color: #a65a12;
}
.play-lights .note p:nth-child(even) b {
  color: #7c3b48;
}
.play-lights .note p.sum b,
.card-lines p.sum b {
  color: var(--plum);
}
.twinline {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #7c3b48;
}
.play-lights .padwrap {
  position: absolute;
  right: 42px;
  top: 112px;
  width: 408px;
  height: 682px;
  background: var(--plum);
  border-radius: 12px;
  padding: 16px 22px 22px;
  box-shadow:
    0 18px 44px #06101a99,
    inset 0 0 0 3px #c9a26b;
}
.padlabel {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a26b;
  font-weight: 600;
  text-align: center;
  margin: 4px 0 14px;
}
.play-lights .pad {
  gap: 12px;
}
.play-lights .key {
  height: 138px;
  background: var(--cream);
  color: var(--plum);
  border-radius: 9px;
  font: 500 50px Fraunces;
  font-variation-settings:
    "opsz" 72,
    var(--soft);
  box-shadow: 0 5px 0 #b9a98d;
}
.play-lights .key.ok {
  background: var(--amber);
  box-shadow: 0 5px 0 #b47f30;
}
.play-lights .key.del {
  background: #49323f;
  color: var(--cream);
  box-shadow: 0 5px 0 #1c101a;
}
.flash {
  position: absolute;
  left: 60px;
  top: 278px;
  padding: 10px 20px;
  background: var(--amber);
  color: var(--plum);
  border-radius: 8px;
  font: 600 24px Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
  z-index: 6;
  animation: rise 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes rise {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}
.play-lights.celebrating .hintbtn,
.play-lights.celebrating .skipbtn {
  visibility: hidden;
}
.play-lights.in-check .hintbtn {
  display: none;
}

/* The explanation card: a sheet of paper over the street. */
.cardbox {
  position: absolute;
  left: 44px;
  top: 96px;
  width: 660px;
  bottom: 26px;
  z-index: 7;
  display: flex;
  align-items: stretch;
}
.card {
  position: relative;
  flex: 1;
  background: var(--cream);
  color: var(--plum);
  border-radius: 10px;
  padding: 22px 28px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 44px #06101aaa;
  animation: rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a65a12;
}
.card-eq {
  font: 500 76px/1.1 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  margin: 4px 0 8px;
  font-variant-numeric: lining-nums;
}
.card-eq em {
  font-style: normal;
  color: #a65a12;
}
.card-body {
  display: flex;
  gap: 26px;
  flex: 1;
  align-items: flex-start;
  min-height: 0;
}
.card-pic {
  flex: none;
}
.card-lines {
  flex: 1;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 500;
}
.card-lines .intro {
  font-size: 18px;
  color: #7c3b48;
  font-weight: 600;
}
.card-hook {
  font: 500 21px/1.25 Fraunces;
  font-style: italic;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
  padding: 10px 0 6px;
  color: #7c3b48;
}
.card-go {
  height: 62px;
  margin-top: 10px;
  background: var(--amber);
  border-radius: 8px;
  font: 600 24px Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
  color: var(--plum);
  flex: none;
}

/* ===================== MAGPIE: HOME ===================== */
.home-magpie,
.reveal-magpie,
.intro-magpie {
  color: var(--ink);
  font-family: "Familjen Grotesk", sans-serif;
}
.m-title {
  position: absolute;
  left: 44px;
  top: 26px;
  font: 400 74px/0.98 "Bowlby One";
  color: var(--paper);
  white-space: nowrap;
}
.m-title b {
  font-weight: 400;
  color: var(--ink);
}
.bird.big {
  position: absolute;
  left: -30px;
  top: 148px;
  width: 470px;
  height: 705px;
  transform: scaleX(-1);
}
.bubble {
  position: absolute;
  background: var(--paper);
  color: var(--ink);
  font-family: "Familjen Grotesk";
  font-weight: 700;
  font-size: 23px;
  line-height: 1.17;
  padding: 14px 20px 16px;
}
.bubble.top {
  left: 60px;
  top: 122px;
  width: 340px;
  min-height: 84px;
  z-index: 3;
}
.bubble.top::after {
  content: "";
  position: absolute;
  right: 58px;
  bottom: -22px;
  border-left: 16px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--paper);
}
.m-stat {
  position: absolute;
  left: 452px;
  top: 118px;
  font-weight: 700;
  font-size: 21px;
  color: var(--paper);
}
.m-grid {
  position: absolute;
  left: 452px;
  top: 158px;
  width: 680px;
}
.vaults {
  display: grid;
  grid-template-columns: repeat(4, 164px);
  grid-auto-rows: 158px;
  gap: 8px;
}
.vault {
  position: relative;
  background: var(--ink);
  display: block;
}
.vault:active {
  transform: translateY(2px);
}
.vault.open {
  background: var(--gold);
}
.vdoor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border-radius: 50%;
  background: #2b2622;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 42px "Bowlby One";
  color: var(--paper);
}
.vault.open .vdoor {
  background: var(--ink);
  color: var(--gold);
}
.pins {
  position: absolute;
  inset: 0;
}
.pin {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #4a433c;
  transition: background 180ms;
}
.pin.on {
  background: var(--gold);
}
.vault.open .pin.on {
  background: var(--ink);
}
.pin.gone {
  background: var(--red);
  box-shadow: 0 0 0 2px #ce3a2055;
}
.home-magpie .cta,
.reveal-magpie .cta,
.intro-magpie .cta {
  background: var(--ink);
  color: var(--paper);
  font: 400 32px "Bowlby One";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  clip-path: polygon(0 4%, 100% 0, 99% 96%, 1% 100%);
}
.home-magpie > .cta {
  position: absolute;
  left: 452px;
  top: 672px;
  width: 454px;
  height: 104px;
}
.home-magpie .cta small {
  font: 600 17px "Familjen Grotesk";
  color: var(--gold);
}
.home-magpie .sec {
  position: absolute;
  left: 916px;
  top: 672px;
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-magpie .ghost {
  height: 48px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  clip-path: polygon(0 4%, 100% 0, 99% 96%, 1% 100%);
}
.home-magpie .switch {
  position: absolute;
  left: 910px;
  top: 40px;
  width: 222px;
  height: 44px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 16px;
}
.home-magpie .grown {
  position: absolute;
  left: 452px;
  top: 786px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  opacity: 0.85;
}
.home-magpie .nights {
  position: absolute;
  right: 48px;
  top: 786px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  opacity: 0.85;
}
.m-cta-slot {
  position: absolute;
  left: 452px;
  top: 672px;
  width: 454px;
  height: 104px;
}
.m-cta-slot .cta {
  width: 100%;
  height: 100%;
}
.vault-detail {
  background: var(--ink);
  color: var(--paper);
  padding: 16px 18px;
  height: 506px;
  display: flex;
  flex-direction: column;
}
.vd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.vd-head h2 {
  font: 400 30px "Bowlby One";
  color: var(--gold);
}
.vd-close {
  height: 40px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
}
.vd-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.vd-item {
  height: 104px;
  background: #2b2622;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: "Bowlby One";
  font-size: 30px;
}
.vd-item small {
  font: 700 13px "Familjen Grotesk";
}
.vd-item img {
  width: 60px;
  height: 60px;
}
.vd-item.lit {
  background: var(--gold);
  color: var(--ink);
}
.vd-item.gone {
  background: #2b2622;
  outline: 3px solid var(--red);
  outline-offset: -3px;
  color: var(--paper);
}
.vd-item.gone img {
  filter: invert(1);
  opacity: 0.35;
}
.vd-info {
  margin-top: 12px;
  flex: 1;
  font-size: 18px;
  line-height: 1.25;
}
.vd-info b {
  display: block;
  font: 400 30px "Bowlby One";
  color: var(--gold);
}
.vd-info strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
}
.vd-info span {
  display: block;
  font-weight: 500;
  margin-top: 2px;
}
.loot {
  position: absolute;
  left: 90px;
  top: 30px;
  width: 500px;
  background: var(--paper);
  padding: 18px 26px 22px;
  box-shadow: 0 16px 44px #0006;
  z-index: 6;
}
.loot .movein-kicker {
  color: var(--red);
}
.loot h2 {
  font: 400 30px/1.05 "Bowlby One";
}
.loot .movein-fact {
  font: 700 20px "Familjen Grotesk";
  color: var(--red);
}
.loot-plate {
  width: 120px;
  height: 120px;
  background: var(--gold);
  padding: 12px;
  margin: 10px 0;
}
.loot-plate img {
  width: 100%;
  height: 100%;
  display: block;
}
.loot .card-go {
  margin-top: 12px;
  width: 100%;
  height: 56px;
  background: var(--ink);
  color: var(--paper);
  font: 400 22px "Bowlby One";
}

/* ===================== MAGPIE: PLAY ===================== */
.play-magpie {
  color: var(--paper);
  font-family: "Familjen Grotesk", sans-serif;
}
.redcut {
  position: absolute;
  left: -200px;
  bottom: -40px;
  width: 500px;
  height: 470px;
  background: var(--red);
  clip-path: polygon(0 8%, 100% 0, 86% 100%, 0 100%);
}
.play-magpie .bird {
  position: absolute;
  left: -34px;
  bottom: -170px;
  width: 360px;
  height: 540px;
  transform: scaleX(-1);
}
.play-magpie .exit {
  background: #2b2622;
  color: var(--paper);
  left: 32px;
}
.play-magpie .prog {
  left: 104px;
  top: 42px;
}
.play-magpie .prog i {
  width: 18px;
  height: 32px;
  background: #2b2622;
  flex: none;
}
.play-magpie .prog i.on {
  background: var(--gold);
}
.door {
  position: absolute;
  left: 254px;
  top: 100px;
  width: 436px;
  height: 436px;
  border-radius: 50%;
  background: #2b2622;
  box-shadow: inset 0 0 0 12px #3b3530;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bolt {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #4a433c;
}
.door-eq {
  position: absolute;
  left: 0;
  right: 0;
  top: 92px;
  text-align: center;
  font: 400 102px/1 "Bowlby One";
  color: var(--paper);
  display: flex;
  justify-content: center;
  gap: 22px;
}
.door-eq .x {
  color: var(--gold);
}
.play-magpie .slot {
  position: absolute;
  left: 118px;
  top: 218px;
  width: 200px;
  height: 96px;
  background: var(--ink);
  border-bottom: 7px solid var(--gold);
  text-align: center;
  font: 400 66px/92px "Bowlby One";
  color: var(--paper);
}
.play-magpie .slot.good {
  color: var(--gold);
}
.door.spin {
  animation: spin 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.door.spin > .slot,
.door.spin > .door-eq {
  animation: unspin 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes unspin {
  to {
    transform: rotate(-360deg);
  }
}
.bubble.side {
  left: 324px;
  top: 562px;
  width: 382px;
  min-height: 70px;
  font-size: 22px;
}
.bubble.side::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 26px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 20px solid var(--paper);
}
.play-magpie .hintbtn,
.play-magpie .skipbtn {
  position: absolute;
  left: 324px;
  top: 712px;
  width: 382px;
  height: 60px;
  background: #2b2622;
  color: var(--paper);
  font-weight: 700;
  font-size: 18px;
}
.play-magpie.in-check .hintbtn {
  display: none;
}
.play-magpie .padwrap {
  position: absolute;
  right: 38px;
  top: 100px;
  width: 410px;
  height: 690px;
}
.play-magpie .pad {
  gap: 10px;
}
.play-magpie .key {
  height: 165px;
  background: var(--gold);
  color: var(--ink);
  font: 400 58px "Bowlby One";
  clip-path: polygon(1% 2%, 99% 0, 100% 98%, 0 100%);
}
.play-magpie .key.ok {
  background: var(--red);
  color: var(--paper);
}
.play-magpie .key.del {
  background: #2b2622;
  color: var(--paper);
  font-size: 38px;
}
.play-magpie .flash {
  left: 324px;
  top: 500px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 0;
  font: 400 26px "Bowlby One";
}
/* Asking for a tip moves the door aside for the note. */
.play-magpie.hinting .door {
  transform: translate(-300px, -60px) scale(0.52);
}
.play-magpie.hinting .bubble.side {
  display: none;
}
.play-magpie .note {
  position: absolute;
  left: 306px;
  top: 96px;
  width: 410px;
  bottom: 26px;
  background: var(--paper);
  color: var(--ink);
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  z-index: 4;
}
.note-kicker {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.play-magpie .note b,
.play-magpie .card-lines b {
  display: block;
  font: 400 24px/1.15 "Bowlby One";
}
.play-magpie .note p {
  margin: 12px 0 0;
}
.play-magpie .note p.sum b {
  color: var(--red);
}
.play-magpie .cardbox {
  left: 300px;
  width: 416px;
  top: 90px;
  bottom: 22px;
}
.play-magpie .card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  font-family: "Familjen Grotesk";
  padding: 18px 22px;
}
.play-magpie .card-kicker {
  color: var(--red);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.play-magpie .card-eq {
  font: 400 54px/1.1 "Bowlby One";
}
.play-magpie .card-eq em {
  color: var(--red);
}
.play-magpie .card-body {
  flex-direction: column;
  gap: 10px;
}
.play-magpie .card-hook {
  font: 700 18px/1.2 "Familjen Grotesk";
  color: var(--red);
}
.play-magpie .card-go {
  background: var(--ink);
  color: var(--paper);
  font: 400 24px "Bowlby One";
  border-radius: 0;
}
.play-magpie .twinline {
  color: var(--red);
}

/* ===================== INTRO + REVEAL + NAME ===================== */
.intro-body {
  position: absolute;
  left: 156px;
  top: 150px;
  width: 480px;
  color: var(--cream);
}
.intro-body h1 {
  font: 500 58px/1.02 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  color: var(--cream);
}
.intro-body p {
  font-size: 22px;
  line-height: 1.36;
  margin: 16px 0 26px;
  font-weight: 500;
  text-shadow: 0 1px 8px #0d2a3dcc;
}
.intro-body .cta {
  width: 320px;
  height: 84px;
}
.intro-magpie .intro-body {
  left: 470px;
  top: 180px;
  width: 620px;
  color: var(--paper);
}
.intro-magpie .intro-body h1 {
  font: 400 54px/1.04 "Bowlby One";
  color: var(--paper);
}
.intro-magpie .intro-body p {
  font-family: "Familjen Grotesk";
  text-shadow: none;
  font-weight: 600;
}

.reveal-lights .reveal-text {
  position: absolute;
  left: 150px;
  top: 56px;
  width: 360px;
  color: var(--cream);
}
.reveal-count {
  font: 500 96px/1 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
  color: var(--amber);
}
.reveal-count b {
  font-weight: 500;
}
.reveal-count small {
  display: block;
  font-size: 30px;
  font-weight: 400;
  color: var(--cream);
}
.reveal-head {
  font: 500 36px/1.08 Fraunces;
  font-variation-settings:
    "opsz" 72,
    var(--soft);
  margin: 16px 0 10px;
  min-height: 40px;
}
.reveal-more {
  font-size: 19px;
  line-height: 1.34;
  font-weight: 500;
  text-shadow: 0 1px 8px #0d2a3dcc;
  min-height: 104px;
}
.reveal-lights .cta {
  width: 320px;
  height: 78px;
  margin-top: 14px;
}
.reveal-magpie .reveal-grid {
  position: absolute;
  left: 452px;
  top: 30px;
}
.reveal-magpie .vaults {
  grid-auto-rows: 130px;
}
.reveal-magpie .vdoor {
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  font-size: 36px;
}
.reveal-magpie .reveal-text {
  position: absolute;
  left: 452px;
  top: 440px;
  width: 680px;
  color: var(--paper);
}
.reveal-magpie .reveal-count {
  font: 400 66px/1 "Bowlby One";
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.reveal-magpie .reveal-count small {
  display: inline;
  font: 700 26px "Familjen Grotesk";
  color: var(--paper);
}
.reveal-magpie .reveal-head {
  font: 400 28px/1.1 "Bowlby One";
  color: var(--ink);
  margin: 8px 0 6px;
  min-height: 32px;
}
.reveal-magpie .reveal-more {
  font: 600 19px/1.3 "Familjen Grotesk";
  text-shadow: none;
  min-height: 76px;
  color: var(--paper);
}
.reveal-magpie .cta {
  width: 360px;
  height: 84px;
  margin-top: 6px;
}

.name-card {
  position: absolute;
  left: 50%;
  top: 110px;
  width: 560px;
  transform: translateX(-50%);
  background: var(--cream);
  color: var(--plum);
  border-radius: 12px;
  padding: 30px 34px;
  box-shadow: 0 18px 50px #06101a99;
}
.name-card h1 {
  font: 500 40px/1.05 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
}
.name-input {
  width: 100%;
  height: 66px;
  margin: 18px 0 12px;
  border: 2px solid var(--plum);
  border-radius: 8px;
  padding: 0 16px;
  font: 500 30px Fraunces;
  font-variation-settings:
    "opsz" 40,
    var(--soft);
  color: var(--plum);
  background: #fff8e8;
}
.name-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.chip {
  height: 44px;
  padding: 0 14px;
  border-radius: 7px;
  background: #efe0c4;
  font-weight: 600;
  font-size: 16px;
}
.naming .cta {
  width: 100%;
  height: 72px;
  align-items: center;
}

.finale-card {
  position: absolute;
  left: 150px;
  top: 200px;
  width: 620px;
  background: var(--cream);
  color: var(--plum);
  padding: 34px;
  border-radius: 12px;
  box-shadow: 0 18px 50px #06101a99;
  z-index: 3;
}
.finale-card h1 {
  font: 500 76px/1 Fraunces;
  font-variation-settings:
    "opsz" 144,
    var(--soft);
}
.finale-card p {
  font-size: 24px;
  line-height: 1.3;
  margin: 12px 0 20px;
  font-weight: 500;
}
.finale .cta {
  width: 220px;
  height: 66px;
  align-items: center;
}

/* ===================== PORTRAIT ===================== */
.portrait .door-lights {
  left: -400px;
  right: -400px;
  clip-path: polygon(0 0, 100% 0, 100% 56%, 0 calc(56% + 90px));
  background-position: center 340px;
  background-size: auto 1000px;
}
.portrait .door-magpie {
  left: -400px;
  right: -400px;
  clip-path: polygon(0 calc(56% + 90px), 100% 56%, 100% 100%, 0 100%);
}
.portrait .door-lights .d-name {
  left: 460px;
  top: 600px;
}
.portrait .door-lights .d-sub {
  left: 460px;
  top: 770px;
}
.portrait .door-magpie .bird {
  left: 470px;
  top: 1000px;
  width: 330px;
  height: 495px;
}
.portrait .door-magpie .d-name {
  left: 800px;
  top: 1120px;
  width: 380px;
}
.portrait .door-magpie .d-sub {
  left: 802px;
  top: 1250px;
  width: 360px;
}

.portrait .home-lights .word {
  left: 40px;
  top: 24px;
  font-size: 76px;
}
.portrait .home-lights .tag {
  left: 44px;
  top: 196px;
  width: 340px;
  font-size: 18px;
}
.portrait .home-lights .stats {
  left: 44px;
  top: 288px;
}
.portrait .home-lights .count {
  font-size: 46px;
}
.portrait .home-lights .count small {
  font-size: 22px;
}
.portrait .home-lights .cta {
  left: 424px;
  top: 36px;
  width: 356px;
}
.portrait .home-lights .sec {
  left: 424px;
  top: 132px;
}
.portrait .home-lights .ghost {
  width: 173px;
}
.portrait .home-lights .switch {
  left: 424px;
  top: 194px;
  width: 356px;
}
.portrait .home-lights .grown {
  left: 26px;
  top: 1152px;
}
.portrait .home-lights .nights {
  left: 160px;
  top: 1152px;
}
.portrait .bld-slot {
  left: 100px;
  top: 384px;
}
.portrait .summary {
  left: 44px;
  top: 30px;
  width: 700px;
}
.portrait .summary h1 {
  font-size: 48px;
  margin-bottom: 8px;
}
.portrait .summary p {
  font-size: 19px;
}
.portrait .summary .cta {
  margin-top: 10px;
  height: 60px;
}
.portrait .movein {
  left: 230px;
  top: 500px;
}

.portrait .play-lights .eq {
  left: 44px;
  top: 96px;
}
.portrait .play-lights .hintbtn,
.portrait .play-lights .skipbtn,
.portrait .flash {
  left: 50px;
  top: 270px;
}
.portrait .play-lights .arrbox {
  left: 50px;
  bottom: auto;
  top: 340px;
  height: 320px;
  align-items: flex-start;
  transform-origin: top left;
}
.portrait .play-lights .note {
  left: 460px;
  bottom: auto;
  top: 340px;
  width: 320px;
}
.portrait .play-lights .padwrap {
  right: 40px;
  top: auto;
  bottom: 26px;
  width: 740px;
  height: 470px;
  padding: 12px 22px 16px;
}
.portrait .play-lights .key {
  height: 96px;
}
.portrait .cardbox {
  left: 40px;
  width: 740px;
  top: 90px;
  bottom: 510px;
}
.portrait .card-eq {
  font-size: 64px;
}

.portrait .m-title {
  left: 30px;
  top: 30px;
  font-size: 62px;
}
.portrait .home-magpie .bird.big,
.portrait .reveal-magpie .bird.big,
.portrait .intro-magpie .bird.big {
  left: -44px;
  top: 120px;
  width: 300px;
  height: 450px;
}
.portrait .bubble.top {
  left: 250px;
  top: 126px;
  width: 530px;
}
.portrait .bubble.top::after {
  right: auto;
  left: -18px;
  bottom: 18px;
  border: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 20px solid var(--paper);
}
.portrait .m-stat {
  left: 252px;
  top: 236px;
  width: 530px;
}
.portrait .m-grid {
  left: 30px;
  top: 420px;
  width: 760px;
}
.portrait .vaults {
  grid-template-columns: repeat(4, 184px);
}
.portrait .home-magpie > .cta {
  left: 30px;
  top: 930px;
  width: 500px;
}
.portrait .m-cta-slot {
  left: 30px;
  top: 930px;
  width: 500px;
}
.portrait .home-magpie .sec {
  left: 544px;
  top: 930px;
  width: 246px;
}
.portrait .home-magpie .switch {
  left: 250px;
  top: 300px;
}
.portrait .home-magpie .grown {
  left: 30px;
  top: 1060px;
}
.portrait .home-magpie .nights {
  top: 1060px;
}
.portrait .vault-detail {
  height: 500px;
}

.portrait .door {
  left: 30px;
  top: 100px;
  width: 400px;
  height: 400px;
}
.portrait .door-eq {
  top: 78px;
  font-size: 92px;
}
.portrait .play-magpie .slot {
  left: 100px;
  top: 196px;
}
.portrait .redcut {
  display: none;
}
.portrait .play-magpie .bird {
  left: 570px;
  bottom: auto;
  top: 96px;
  width: 230px;
  height: 345px;
}
.portrait .bubble.side {
  left: 446px;
  top: 360px;
  width: 340px;
}
.portrait .bubble.side::before {
  display: none;
}
.portrait .play-magpie .hintbtn,
.portrait .play-magpie .skipbtn {
  left: 446px;
  top: 470px;
  width: 340px;
}
.portrait .play-magpie .padwrap {
  right: 40px;
  top: auto;
  bottom: 26px;
  width: 740px;
  height: 590px;
}
.portrait .play-magpie .key {
  height: 140px;
}
.portrait .play-magpie.hinting .door {
  transform: translate(-90px, -96px) scale(0.5);
}
.portrait .play-magpie .note {
  left: 300px;
  top: 96px;
  width: 480px;
  bottom: auto;
  height: 470px;
}
.portrait .play-magpie .cardbox {
  left: 40px;
  width: 740px;
  top: 90px;
  bottom: 630px;
}
.portrait .play-magpie .card-body {
  flex-direction: row;
}
.portrait .play-magpie .flash {
  left: 446px;
  top: 300px;
}

.portrait .intro-body {
  left: 60px;
  top: 300px;
  width: 700px;
}
.portrait .intro-magpie .intro-body {
  left: 60px;
  top: 640px;
  width: 700px;
}
.portrait .reveal-lights .reveal-text {
  left: 44px;
  top: 24px;
  width: 740px;
}
.portrait .reveal-count {
  font-size: 60px;
}
.portrait .reveal-count small {
  display: inline;
  font-size: 24px;
}
.portrait .reveal-head {
  font-size: 28px;
  margin: 6px 0;
}
.portrait .reveal-more {
  font-size: 17px;
  min-height: 66px;
}
.portrait .reveal-lights .cta {
  position: absolute;
  left: 460px;
  top: 0;
  width: 280px;
  height: 66px;
  margin: 0;
}
.portrait .reveal-magpie .reveal-grid {
  left: 30px;
  top: 420px;
}
.portrait .reveal-magpie .reveal-text {
  left: 30px;
  top: 830px;
  width: 760px;
}

/* Two-digit by two-digit questions need more room. */
.play-lights.long-eq .eq { font-size: 118px; gap: 14px; }
.play-lights.long-eq .slot { min-width: 200px; }
.play-magpie.long-eq .door-eq { font-size: 74px; top: 112px; gap: 14px; }

/* Picker type sits together. */
.door-lights .d-name { width: 420px; top: 790px; }
.door-lights .d-sub { top: 878px; width: 340px; }

/* The note hugs its content and leaves the ring in view. */
.play-magpie .note { left: 318px; width: 398px; bottom: auto; max-height: 690px; }
.play-magpie .cardbox { left: 318px; width: 398px; }
.play-lights .cardbox, .play-magpie .cardbox { align-items: flex-start; bottom: auto; max-height: 700px; }
.card { min-height: 400px; }
.card-body { flex: none; }
.card-go { margin-top: 18px; }

.portrait .play-magpie.hinting .bird { opacity: 0; }

.play-lights.long-eq .eq { font-size: 108px; }
.play-lights.long-eq .slot { min-width: 184px; height: 110px; line-height: 104px; }