/* Desktop-only crayon doodles — tan margin + sign-in backdrop */
#desktop-doodles{
  display:none;
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
@media (min-width:860px){
  #desktop-doodles{display:block}
  #app{position:relative;z-index:1}
}

.doodle{
  position:absolute;
  opacity:.2;
}
.doodle svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.doodle .ink{
  fill:none;
  stroke:var(--crayon);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.doodle .fill{
  stroke:var(--crayon);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.doodle .lite{opacity:.55}

.d-liberty{top:3%;left:2%;width:105px;height:165px;color:#8BC96A;transform:rotate(-6deg)}
.d-empire{top:1%;right:3%;width:90px;height:175px;color:#B8B2A8;transform:rotate(4deg)}
.d-bridge{bottom:7%;right:1%;width:175px;height:100px;color:#C4A574;transform:rotate(1deg)}
.d-train{left:2%;top:38%;width:168px;height:62px;color:#FCCC0A;transform:rotate(-2deg)}
.d-bagel{bottom:5%;left:3%;width:88px;height:88px;color:#E5A020;transform:rotate(10deg)}
.d-apple{left:7%;top:54%;width:78px;height:86px;color:#FF5910;transform:rotate(-8deg)}
.d-citi{bottom:2%;right:16%;width:130px;height:88px;color:#4A90D9;transform:rotate(-2deg)}

.d-mta-line{width:38px;height:38px;opacity:.22}
.d-mta-line text{
  font-family:"Comic Sans MS","Chalkboard SE","Marker Felt",cursive;
  font-size:14px;
  font-weight:800;
  text-anchor:middle;
  dominant-baseline:central;
}
.d-mta1{left:4%;top:19%;transform:rotate(6deg)}
.d-mta4{right:3%;top:22%;transform:rotate(-5deg)}
.d-mta7{right:4%;bottom:30%;transform:rotate(4deg)}
.d-mtaN{right:5%;top:56%;transform:rotate(-7deg)}
.d-mtaA{left:3%;bottom:16%;transform:rotate(5deg)}

/* NYC logo crayons — smaller, lighter, scattered */
.d-logo{opacity:.16}
.d-logo text{
  font-family:"Comic Sans MS","Chalkboard SE","Marker Felt",cursive;
  text-anchor:middle;
  dominant-baseline:central;
}
.d-bag{left:11%;bottom:6%;width:56px;height:72px;transform:rotate(-6deg)}
.d-knicks{right:20%;top:44%;width:52px;height:52px;transform:rotate(-4deg)}
.d-yanks{left:16%;top:28%;width:48px;height:54px;transform:rotate(5deg)}
.d-mta-logo{right:7%;bottom:20%;width:50px;height:50px;transform:rotate(3deg)}
.d-nets{left:24%;bottom:34%;width:50px;height:50px;transform:rotate(-8deg)}
.d-giants{right:26%;bottom:10%;width:58px;height:38px;transform:rotate(2deg)}
.d-lottery{left:20%;top:6%;width:50px;height:50px;transform:rotate(-5deg)}
.d-mets{right:12%;top:62%;width:52px;height:46px;transform:rotate(7deg)}
.d-parks{left:30%;top:62%;width:50px;height:56px;transform:rotate(-3deg)}
.d-dsny{right:22%;top:26%;width:48px;height:48px;transform:rotate(6deg)}

@media (max-width:1100px){
  .d-bridge{width:130px;height:80px}
  .d-citi{width:105px}
  .d-train{width:140px;height:52px}
  .d-mta-line{width:32px;height:32px}
  .d-mta-line text{font-size:12px}
  .d-empire{width:72px;height:145px}
  .d-liberty{width:88px;height:140px}
  .d-logo{width:42px!important;height:auto!important;opacity:.14}
}