/* Scene layers sit behind the real filter links and workflow controls. */
body.zip-ui.dashboard-shell #app-content [data-scene] {
  background:var(--scene-image) center / cover no-repeat #142132 !important;
  isolation:isolate;
  overflow:hidden;
  position:relative;
}
/* The distant landscape fills the strip. The foreground scales with its height. */
body.zip-ui.dashboard-shell #app-content [data-scene=rain] {
  display:grid;align-items:stretch;min-height:clamp(108px,10vw,142px);
  box-sizing:border-box;padding:4px 8px!important;
  background:#142132!important;
}
body.zip-ui.dashboard-shell #app-content [data-scene=rain] > .queue-landscape {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  pointer-events:none;z-index:0;
}
body.zip-ui.dashboard-shell #app-content [data-scene=rain]::after {
  content:""; display:block!important; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(0deg,#0a1728b8,transparent 82%),url("scenes/konoha-rain.jpg") right center / auto 100% no-repeat;
  mask-image:linear-gradient(to left,#000,transparent min(48vw,420px));animation:none!important;
}
body.zip-ui.dashboard-shell #app-content [data-scene=rain] .home-stage-grid {z-index:2;background:linear-gradient(0deg,#0a1728aa,transparent)}
#app-content [data-scene=rain] .home-stage {backdrop-filter:none;-webkit-backdrop-filter:none}
#app-content [data-scene=river] {
  --scene-image:linear-gradient(90deg,#101b32e8,#23344988),url("scenes/river.svg");
}
#app-content [data-scene=lantern] {
  --scene-image:linear-gradient(112deg,#241c2b,#46313a 55%,#292031);
}
#app-content [data-scene=mountain] {
  --scene-image:linear-gradient(90deg,#102a37ba,#14232e70),url("scenes/mountain.svg");
}
body.zip-ui.dashboard-shell #app-content [data-scene]::before {
  content:"";display:block!important;position:absolute;inset:-32px;pointer-events:none;z-index:0;
  background:var(--weather);animation:var(--drift)!important;
}
[data-scene=rain] {
  --weather:url("scenes/rain-streaks.svg") repeat;
  --drift:rainfall .72s linear infinite;
}
body.zip-ui.dashboard-shell #app-content [data-scene=rain]::before {
  inset:-96px -64px 0;z-index:1;background:var(--weather)!important;will-change:transform;
}
@keyframes rainfall {from{transform:skewX(-18.4deg) translate3d(0,0,0)}to{transform:skewX(-18.4deg) translate3d(0,96px,0)}}
[data-scene=river] {
  --weather:url("scenes/river-ripples.svg") repeat;
  --drift:river-current 5s linear infinite;
}
body.zip-ui.dashboard-shell #app-content [data-scene=river]::before {
  inset:48% 0 0;mask-image:linear-gradient(transparent,#000 35%);
}
@keyframes river-current {to {background-position:200px 0}}
body.zip-ui.dashboard-shell #app-content [data-scene=lantern]::before {display:none!important}
body.zip-ui.dashboard-shell #app-content [data-scene=lantern] > .lantern-row {
  position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;justify-content:space-around;
}
.lantern-row i {
  flex:0 0 34px;height:56px;margin-inline-end:10%;background:url("scenes/lantern.svg?v=1108r6") center top / contain no-repeat;
  transform-origin:50% 0;animation:lantern-swing 2.2s ease-in-out infinite alternate;
}
.lantern-row i:nth-child(even) {animation-delay:-1.4s;animation-duration:1.8s}
.lantern-row i:nth-child(3n) {animation-delay:-.6s}
@keyframes lantern-swing {from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
@media(max-width:700px){.lantern-row i:nth-child(n+4){display:none}}
@media(prefers-reduced-motion:reduce){.lantern-row i{animation:none}}
[data-scene=mountain] {
  --weather:repeating-linear-gradient(160deg,transparent 0 90px,#ccebef4a 124px,transparent 180px);
  --drift:ridge-cloud 6s ease-in-out infinite alternate;
}
@keyframes ridge-cloud {from{transform:translateX(-24px)}to{transform:translateX(24px)}}
#app-content [data-scene=rain] .home-stage-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0}
body.zip-ui.dashboard-shell #app-content [data-scene] a:is(.home-stage,.card) {
  background:transparent!important;border:0!important;border-radius:4px;box-shadow:none!important;
}
#app-content [data-scene=rain] .home-stage {
  display:grid;grid-template-columns:max-content max-content;align-content:center;align-items:baseline;justify-content:center;text-align:center;
  gap:2px 5px;padding:6px 3px!important;min-height:54px;white-space:nowrap;text-shadow:0 1px 3px #081527;
}
#app-content [data-scene=rain] .home-stage-ring {display:contents}
#app-content [data-scene=rain] .home-stage-ring svg {display:none}
#app-content [data-scene=rain] .home-stage-ring strong {position:static;transform:none;font-size:28px;line-height:1.1;grid-column:1/-1;color:white!important}
#app-content [data-scene] .home-stage>span {font-size:13px;color:#f2f6ff!important}
html[data-surface-theme] body.zip-ui.dashboard-shell #app-content [data-scene] small {color:#dee8f5!important}
body.zip-ui.dashboard-shell #app-content [data-scene] a:is(:hover,:focus-visible,.is-active,.pd-selected){background:#ffffff20!important}
/* Match the queue's two-line density on every overview. */
#app-content :is([data-scene=lantern],[data-scene=mountain]) {
  display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;
  grid-template-columns:none;gap:2px;padding:10px 16px;margin:12px 0;
}
#app-content [data-scene=lantern] a.card,
#app-content [data-scene=mountain] > div {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:62px;padding:6px 4px;margin:0;gap:3px;text-align:center;
}
#app-content [data-scene=lantern] .home-stage-ring {display:contents}
#app-content [data-scene=lantern] .home-stage-ring svg {display:none}
#app-content :is([data-scene=lantern],[data-scene=mountain]) strong {
  position:static;transform:none;order:-1;margin:0;font-size:28px;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
#app-content [data-scene=river] {padding:9px 14px!important;margin-bottom:12px!important}
#app-content [data-scene=river] .flow-track-steps {margin:6px 0!important}
#app-content [data-scene=river] .flow-track-next {margin-top:4px!important;padding-top:4px!important}
@media (max-width:700px) {
  #app-content :is([data-scene=lantern],[data-scene=mountain]) {
    grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px;
  }
  #app-content [data-scene=mountain] {grid-template-columns:repeat(2,minmax(0,1fr))}
  #app-content [data-scene=lantern] a.card,#app-content [data-scene=mountain] > div {min-height:48px}
}
@media(max-width:700px){
  #app-content [data-scene=rain] .home-stage-grid {display:flex;overflow-x:auto}
  #app-content [data-scene=rain] .home-stage {flex:1 0 max-content;padding-inline:8px!important}
}
/* Independent wave fronts keep the form stationary. */
.verification-scene .verify-rings {
  position:absolute;left:26%;top:48%;width:clamp(350px,46vw,780px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#85bad244,transparent 65%);
}
.verify-rings i {
  position:absolute;inset:0;border:2px solid #659bb6;border-radius:50%;
  box-shadow:0 0 8px #80b2c744,inset 0 0 8px #80b2c733;
  animation:verification-ripple 5.6s linear infinite;
}
.verify-rings i:nth-child(2){animation-delay:-1.4s}
.verify-rings i:nth-child(3){animation-delay:-2.8s}
.verify-rings i:nth-child(4){animation-delay:-4.2s}
@keyframes verification-ripple {
  0% {transform:scale(.13);opacity:0}
  12% {opacity:.9}
  70% {opacity:.65}
  100% {transform:scale(1.05);opacity:0}
}
@media(max-width:680px){
  .verification-scene .verify-rings{left:13%;top:10%;width:clamp(270px,75vw,400px)}
}
@media(prefers-reduced-motion:reduce){
  body.zip-ui.dashboard-shell #app-content [data-scene]::before,.verify-rings i{animation:none!important}
  .verify-rings i{opacity:.34;transform:scale(.25)}
  .verify-rings i:nth-child(2){transform:scale(.48)}
  .verify-rings i:nth-child(3){transform:scale(.71)}
  .verify-rings i:nth-child(4){transform:scale(.94)}
}