.screen-title { background: var(--c-sky); }

.title-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 28px 0 28px;
}
.title-catch {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-sub);
  background: var(--c-surface);
  padding: 4px 14px;
  border-radius: var(--r-pill);
}
.title-logo {
  margin: 0;
  font-size: 46px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  color: var(--c-text);
}

.title-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.title-scene__mountain {
  position: absolute;
  border-radius: 50% 50% 0 0;
  background: var(--c-mountain);
}
.title-scene__mountain--a { left: -10%; top: 30%; width: 67%; height: 16.5%; }
.title-scene__mountain--b { left: 49%; top: 36%; width: 67%; height: 14%; background: var(--c-ground-far); }
.title-scene__ground {
  position: absolute;
  left: 0; top: 56%; width: 100%; height: 44%;
  background: var(--c-ground-near);
}
.title-scene__bear {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 42%;
  height: 90%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
}

.title-panel { gap: 16px; padding: 28px 28px 40px 28px; }

/* 遊び方：本物のゲージを縮小して、マーカーが往復する様子をそのまま見せる */
.title-howto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; }
.title-howto__text { margin: 0; font-size: 14px; font-weight: 900; color: var(--c-panel-text); white-space: nowrap; }
.title-howto__text .is-perfect { color: var(--c-perfect-text); }
.title-howto .gauge { width: 120px; height: 26px; flex: 0 0 auto; }
.title-howto .gauge__track { top: 3px; height: 20px; border-width: 2px; border-radius: 8px; }
.title-howto .gauge__seg--perfect { border-left-width: 1px; border-right-width: 1px; }
.title-howto .gauge__marker {
  left: calc(50% - 3px);
  width: 6px; height: 26px;
  border-radius: 3px;
  border-width: 1px;
  animation: howto-marker 1.6s linear infinite alternate;
}
@keyframes howto-marker {
  from { left: 0; }
  to { left: calc(100% - 6px); }
}
.title-best {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 16px;
  background: var(--c-surface);
  color: var(--c-text);
}
.title-best__label { font-size: 12px; font-weight: 700; color: var(--c-sub); }
.title-best__value { font-size: 32px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.title-best__unit { font-size: 14px; font-weight: 700; }
.title-best__empty { font-size: 18px; font-weight: 900; }
.title-best [hidden] { display: none; }
.title-start { width: 100%; height: 72px; font-size: 26px; }