/* Stable centred slots: the outer letter loops; its inner face reacts to events. */
.game-ui .topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
}
.game-ui .identity {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  justify-items: center;
  text-align: center;
  gap: 7px;
  pointer-events: none;
}
.game-ui .identity small {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .08em;
  white-space: nowrap;
}
.game-ui .header-tools { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
.brand-line { position: relative; display: flex; align-items: center; justify-content: center; gap: 17px; }
.game-ui .brand-title {
  display: flex;
  gap: 1px;
  margin: 0;
  color: #264e43;
  font: 900 34px/1.15 "Voice Matter Rounded", "PingFang SC", sans-serif;
  letter-spacing: 0;
}
.title-letter {
  --title-hop: -10px;
  --title-rebound: -3px;
  display: inline-block;
  transform-origin: 50% 85%;
  animation: title-jelly-loop 2200ms ease-in-out var(--loop-delay, 0ms) infinite;
  animation-play-state: paused;
}
.title-letter-face { display: block; transform-origin: 50% 85%; }
.identity[data-title-loop="running"] .title-letter { animation-play-state: running; }
.title-letter:last-child { color: #945549; }
.title-letter:nth-child(2) { --letter-delay: 45ms; --loop-delay: -1925ms; }
.title-letter:nth-child(3) { --letter-delay: 90ms; --loop-delay: -1650ms; }
.title-letter:nth-child(4) { --letter-delay: 135ms; --loop-delay: -1375ms; }
.title-letter:nth-child(5) { --letter-delay: 180ms; --loop-delay: -1100ms; }
.title-letter:nth-child(6) { --letter-delay: 225ms; --loop-delay: -825ms; }
.title-letter:nth-child(7) { --letter-delay: 270ms; --loop-delay: -550ms; }
.title-letter:nth-child(8) { --letter-delay: 315ms; --loop-delay: -275ms; }
.brand-buddy {
  position: relative;
  display: block;
  flex: 0 0 33px;
  height: 35px;
  border: 1px solid #fff;
  border-radius: 45% 45% 40% 40%;
  background: linear-gradient(145deg, #e6fff2 8%, #a8deca 78%);
  box-shadow: inset 0 2px 2px #fff, inset -2px -3px 4px #6ba98e30, 0 3px 0 #91bfae66;
  transform-origin: 50% 95%;
}
.brand-buddy--peach {
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, #fff4e4 8%, #f1bdac 78%);
  box-shadow: inset 0 2px 2px #fff, inset -2px -3px 4px #c5847130, 0 3px 0 #d6a19166;
}
.brand-buddy::before { content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 4px; border-radius: 50%; background: #ffffffb3; transform: rotate(-25deg); }
.brand-buddy::after { content: ""; position: absolute; left: 4px; top: 21px; width: 6px; height: 3px; border-radius: 50%; background: #e9929170; box-shadow: 18px 0 #e9929170; }
.buddy-eyes { position: absolute; left: 9px; top: 13px; width: 3px; height: 5px; border-radius: 50%; background: #37564c; box-shadow: 10px 0 #37564c; transform-origin: center; }
.buddy-smile { position: absolute; left: 13px; top: 20px; width: 6px; height: 4px; border: 1.4px solid #37564c; border-top: 0; border-radius: 0 0 8px 8px; }
.brand-spark { position: absolute; top: -6px; color: #d29751; font: 17px/1 Georgia, serif; opacity: 0; }
.brand-spark--left { left: -10px; --spark-x: -6px; --spark-turn: -25deg; }
.brand-spark--right { right: -10px; --spark-x: 6px; --spark-turn: 25deg; color: #ab80b9; }

.identity:is([data-react="welcome"], [data-react="launch"], [data-react="reward"]) .title-letter-face {
  animation: title-jelly-pop 520ms cubic-bezier(.22,.7,.3,1) var(--letter-delay, 0ms) both;
}
.identity[data-react] .brand-buddy--mint { animation: buddy-hop 620ms ease-in-out both; }
.identity[data-react]:not([data-react="catch"]) .brand-buddy--peach { animation: buddy-hop 620ms ease-in-out 95ms both; }
.identity[data-react="catch"] .brand-buddy--peach .buddy-eyes { animation: buddy-blink 440ms ease-in-out both; }
.identity[data-react="reward"] .brand-spark { animation: buddy-spark 700ms ease-out 90ms both; }
.identity[data-react="reward"] .buddy-smile { height: 6px; background: #37564c; }
@keyframes title-jelly-pop {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.04,.97); }
  43% { transform: scale(.98,1.04); }
  72% { transform: scale(1.02,.99); }
}
@keyframes title-jelly-loop {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  10% { transform: translateY(1px) scale(1.07,.93) rotate(-1deg); }
  27% { transform: translateY(var(--title-hop)) scale(.95,1.08) rotate(2deg); }
  44% { transform: translateY(1px) scale(1.08,.93) rotate(-1deg); }
  57% { transform: translateY(var(--title-rebound)) scale(.98,1.03) rotate(.6deg); }
  73% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes buddy-hop {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  18% { transform: translateY(1px) scale(1.1,.89) rotate(-4deg); }
  44% { transform: translateY(-7px) scale(.96,1.06) rotate(6deg); }
  74% { transform: translateY(0) scale(1.05,.96) rotate(-2deg); }
}
@keyframes buddy-blink { 0%, 30%, 70%, 100% { transform: scaleY(1); } 47%, 53% { transform: scaleY(.15); } }
@keyframes buddy-spark {
  0% { opacity: 0; transform: translateY(5px) scale(.5); }
  35% { opacity: 1; transform: translateY(-3px) scale(1.12); }
  100% { opacity: 0; transform: translate(var(--spark-x),-13px) scale(.8) rotate(var(--spark-turn)); }
}

/* Keep the exhibition's name, while its operating controls stay hidden. */
#stage[data-exhibit="true"] .topbar .identity { visibility: visible; }
.game-ui[data-exhibit="true"] #stress-banner { top: 109px; left: 32px; }
@media (max-width: 1200px) {
  .game-ui .header-tools .status { display: none; }
  .game-ui .brand-title { font-size: 30px; }
  .brand-line { gap: 12px; }
}
@media (max-width: 1000px) {
  .game-ui .topbar { gap: 10px; }
  .game-ui .brand-title { font-size: 28px; }
  .brand-line { gap: 9px; }
  .brand-buddy { flex-basis: 31px; }
}
@media (max-width: 900px) {
  .title-letter { --title-hop: -4px; --title-rebound: -1.5px; }
  .game-ui .topbar { grid-template-columns: 1fr; grid-template-rows: 1fr 44px; gap: 0; padding: 7px 16px 2px; }
  .game-ui .identity { grid-column: 1; grid-row: 1; gap: 3px; }
  .game-ui .brand-title { font-size: 25px; }
  .game-ui .identity small { font-size: 10px; line-height: 1.2; }
  .game-ui .header-tools { grid-column: 1; grid-row: 2; justify-self: end; }
  .game-ui .center-tools { top: 50px; }
  .brand-buddy { flex-basis: 30px; height: 30px; }
  .game-ui .vm-ledger-host { top: 108px; }
  #stage[data-exhibit="true"] .vm-ledger-host { top: 108px; }
  #stage[data-exhibit="true"] #exit-exhibit { top: 62px; left: 16px; height: 34px; font-size: 11px; }
  #stage[data-exhibit="true"] #exit-exhibit kbd { display: none; }
  .game-ui[data-exhibit="true"] #stress-banner { top: 180px; left: 12px; max-width: calc(100% - 24px); }
}
@media (max-width: 650px) {
  .game-ui .header-tools { gap: 8px; }
  .game-ui .topbar { padding-inline: 14px; }
  .game-ui .identity small { display: block; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .identity *, .identity *::before, .identity *::after { animation: none !important; transition: none !important; }
}