/* The ropes, board and original live controls move as one suspended assembly. */
.reference-stage .hanging-sign {
  position:absolute;
  left:60.287081%;
  top:23.379384%;
  right:auto;
  bottom:auto;
  width:34.688995%;
  height:auto;
  aspect-ratio:3/2;
  min-width:0;
  margin:0;
  padding:0;
  z-index:2;
  pointer-events:none;
}
.hanging-sign-sway {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin:50% 2%;
  animation:hanging-sign-breeze 7.8s ease-in-out infinite;
  will-change:transform;
  pointer-events:auto;
}
.hanging-sign-art {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.reference-stage .hanging-sign .spin-area {
  position:absolute;
  left:50%;
  top:63.964844%;
  right:auto;
  bottom:auto;
  width:60.689655%;
  max-width:none;
  height:auto;
  margin:0;
  padding:0;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:1;
  pointer-events:auto;
}
.reference-stage .hanging-sign .spin-area p {
  background:none;
  padding:.299043cqw 0;
  color:#fff0c7;
  text-shadow:0 1px 2px #180e05,0 0 5px #21130b60;
}
.hanging-sign:hover .hanging-sign-sway,
.hanging-sign:focus-within .hanging-sign-sway,
.logo-shine-paused .hanging-sign-sway {
  animation-play-state:paused;
}
.reduced-motion .hanging-sign-sway {
  animation:none;
  transform:none;
  will-change:auto;
}
@keyframes hanging-sign-breeze {
  0%,100% { transform:rotate(-.65deg); }
  50% { transform:rotate(.65deg); }
}

/* These rectangles match the supplied static and video logo pixels exactly. */
.reference-stage > .hanging-sign-logo {
  position:absolute;
  display:block;
  left:55.023923%;
  top:1.487779%;
  width:43.421053%;
  height:auto;
  aspect-ratio:726/372;
  object-fit:fill;
  z-index:4;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.reference-stage:not(:has(>.reference-scene-overlay)):has(>.reference-video-layer>.reference-video-canvas:not([hidden])) > .hanging-sign-logo {
  left:55.04784689%;
  top:1.03081828%;
  width:43.79186603%;
  aspect-ratio:732.2/372.5;
}
.reference-stage > .logo-shine-desktop { z-index:5; }

@media (max-width:900px) and (orientation:portrait) {
  .reference-stage > .hanging-sign-logo { display:none; }
  .reference-stage #main-scene {
    grid-template-rows:clamp(145px,41vw,215px) auto auto auto;
  }
  .reference-stage .brand {
    grid-row:1;
    z-index:4;
  }
  .reference-stage .hanging-sign {
    position:relative;
    inset:auto;
    display:block;
    grid-column:1/-1;
    grid-row:2;
    justify-self:center;
    align-self:center;
    width:100%;
    max-width:544px;
    height:auto;
    margin:-12% auto 12px;
    aspect-ratio:3/2;
    z-index:2;
  }
  .reference-stage .wheel-area { grid-row:3; }
  .reference-stage .hanging-sign .spin-area {
    position:absolute;
    inset:auto;
    left:50%;
    top:63.964844%;
    width:76%;
    max-width:330px;
    height:auto;
    margin:0;
    padding:0;
    transform:translate(-50%,-50%);
  }
  .reference-stage .hanging-sign .spin-area p {
    min-height:2.4em;
    margin:0 0 clamp(4px,1.2vw,7px);
    padding:0;
    font:400 clamp(10px,2.8vw,14px)/1.2 var(--game-font);
    background:none;
  }
  .reference-stage .hanging-sign .spin-button {
    width:100%;
    min-height:48px;
    height:clamp(48px,14vw,66px);
    padding:0 6px;
    gap:8px;
    font-size:clamp(22px,6vw,30px);
    letter-spacing:1.5px;
  }
  .reference-stage .hanging-sign .spin-glyph {
    font-size:clamp(25px,7vw,30px);
  }
}

@media (max-width:360px) and (orientation:portrait) {
  .reference-stage #main-scene { grid-template-rows:140px auto auto auto; }
}

/* This existing region runs from the board's inner top edge to the Spin rim. */
#game.landscape-main .reference-stage .hanging-sign #round-message,
#game:not(.mobile-layout) .reference-stage .hanging-sign #round-message {
  display:flex;
  align-items:center;
  justify-content:center;
  height:3.229665cqw;
  min-height:0;
  margin:0 0 .657895cqw;
  padding:.05em 0 0;
  line-height:1.25;
  text-align:center;
  text-wrap:balance;
}