#hotel-scene {
  --hotel-gold: #f6d67f;
  --hotel-wine: #6b2c25;
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .73fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2.1vw, 22px);
  padding: clamp(9px, 3vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 24% 54%, #ffdc998f, transparent 60%),
    repeating-linear-gradient(105deg, #f1bf7828 0 13px, transparent 13px 25px),
    #a45c2eeb;
  border-block: 2px solid #713e2d;
  animation: hotel-scene-in 240ms ease-out both;
}

#hotel-scene[data-phase="exit"] { animation: hotel-scene-out 320ms ease-in both; }

.hotel-portrait {
  position: relative;
  align-self: stretch;
  display: grid;
  isolation: isolate;
  place-items: end center;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

.hotel-portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 4% 8%;
  border: 2px solid #fff0b8cf;
  border-radius: 50%;
  background: #ffdd8a69;
  box-shadow: 0 0 0 6px #ffefb647, 0 8px 0 #75342233;
  transform: rotate(-7deg);
}

.hotel-portrait img {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(1px 4px 1px #4e271b70);
  transform-origin: center bottom;
  animation: hotel-portrait-in 640ms cubic-bezier(.16, .75, .2, 1.19) both;
}

#hotel-scene[data-phase="speech"] .hotel-portrait img {
  animation: hotel-portrait-talk 740ms ease-in-out 2;
}

.hotel-speech {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: center;
  min-width: 0;
  padding: clamp(9px, 2.4vw, 26px);
  border: 2px solid #54271c;
  border-radius: 11px;
  background: #fff3cf;
  color: #38221b;
  box-shadow: 0 4px 0 #54271c;
}

.hotel-speech::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 55%;
  width: 12px;
  height: 12px;
  border: solid #54271c;
  border-width: 0 0 2px 2px;
  background: inherit;
  transform: rotate(45deg);
}

.hotel-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(6px, 1.2vw, 12px);
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--hotel-wine);
  color: #ffeab3;
  font-size: clamp(.61rem, 1.55vw, .76rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.hotel-bell {
  position: relative;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 8px;
  margin-top: 2px;
  border-radius: 12px 12px 1px 1px;
  background: var(--hotel-gold);
  border-bottom: 2px solid #cf9550;
  transform-origin: center bottom;
  animation: hotel-bell-ring 520ms ease-in-out 420ms both;
}

.hotel-bell::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -3px;
  width: 4px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--hotel-gold);
}

#hotel-line {
  margin: 0;
  font: 800 clamp(1.15rem, 3.9vw, 2.6rem)/1.04 var(--display);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

#hotel-scene[data-phase="speech"] #hotel-line,
#hotel-scene[data-phase="charge"] #hotel-charge {
  animation: hotel-copy-in 260ms ease-out both;
}

.hotel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-top: clamp(5px, 1.2vw, 12px);
}

#hotel-charge {
  margin: 0;
  padding: 4px 7px;
  border: 1px dashed #93532d;
  border-radius: 3px;
  background: #f6db9d;
  color: #652921;
  font-size: clamp(.68rem, 1.7vw, .92rem);
  font-weight: 700;
  line-height: 1.15;
}

#hotel-listen {
  min-height: 32px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--hotel-wine);
  font-size: clamp(.7rem, 1.6vw, .83rem);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#hotel-listen:hover { color: #9b3e1d; }

#hotel-clip-dialog { width: min(615px, calc(100% - 24px)); }
#hotel-clip-dialog h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
#hotel-clip-dialog p { margin: 12px 0 0; }
#hotel-clip-player iframe {
  display: block;
  width: 100%;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
  background: #191514;
}

#hotel-fee-amount { color: var(--rust); white-space: nowrap; }

@keyframes hotel-scene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hotel-scene-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes hotel-portrait-in {
  from { opacity: 0; transform: translate(-25%, 12%) rotate(-9deg); }
  to { opacity: 1; transform: none; }
}

@keyframes hotel-portrait-talk {
  0%, 100% { transform: none; }
  40% { transform: translateY(-3%) rotate(-2deg); }
  70% { transform: translateY(-1%) rotate(1deg); }
}

@keyframes hotel-bell-ring {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateY(-2px) rotate(15deg); }
  40%, 80% { transform: translateY(-1px) rotate(-12deg); }
}

@keyframes hotel-copy-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  #hotel-scene { grid-template-columns: minmax(0, .49fr) minmax(0, 1fr); }
  .hotel-speech { border-radius: 7px; }
  .hotel-ribbon { padding: 4px 5px; letter-spacing: .04em; }
  .hotel-actions { flex-wrap: nowrap; }
  #hotel-listen { flex: none; }
}

@media (max-width: 350px) {
  .hotel-actions { column-gap: 3px; }
  #hotel-line { font-size: 1rem; }
  #hotel-charge { padding-inline: 5px; font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  #hotel-scene,
  #hotel-scene[data-phase="exit"],
  #hotel-scene .hotel-portrait img,
  #hotel-scene[data-phase="speech"] .hotel-portrait img,
  #hotel-scene[data-phase="speech"] #hotel-line,
  #hotel-scene[data-phase="charge"] #hotel-charge,
  .hotel-bell { animation: none; }
}