/* 画面ごとの配置 */

/* 舞台の幅：画面の幅いっぱい(横長の画面では 9:16 の幅まで)。
   100vw だとPCのスクロールバーの分はみ出すので 100% を使う */
:root {
  --stage-w: min(100%, calc(100dvh * 9 / 16));
}

/* 上の帯：戻るボタン・題名・歯車 */
.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--stage-w);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 8px;
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}
.topbar__title {
  font-size: 22px;
  letter-spacing: 0.12em;
}
.topbar__space {
  flex: 1;
}

/* 場面：上下のすき間は場面の色でつなぐ */
.scene {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(var(--band-top) 50%, var(--band-bottom) 50%);
  padding-bottom: env(safe-area-inset-bottom);
}
.stage {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 9 / 16;
}
.stage__art,
.stage__obj {
  position: absolute;
}
.stage__art {
  inset: 0;
}
.stage__art > img,
.stage__obj > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.is-blurred {
  filter: blur(6px);
  opacity: 0.85;
}

/* 標本のタブ(フェーズ4で切りかえられるようにする) */
.specimen-tabs {
  display: flex;
  gap: 4%;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 0.5em 0;
  font-size: clamp(14px, 4vw, 18px);
  color: var(--text-sub);
  opacity: 0.75;
}
.tab.is-current {
  color: var(--text);
  font-weight: 600;
  opacity: 1;
}

/* 設定 */
.page {
  width: var(--stage-w);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 80px) 18px calc(env(safe-area-inset-bottom) + 30px);
}
.settings {
  padding: 22px 20px 26px;
  display: grid;
  gap: 26px;
}
.settings__heading {
  font-size: 18px;
  margin-bottom: 10px;
}
.settings__note {
  margin: 0 0 14px;
  color: var(--text-sub);
  font-size: 15px;
}
.settings__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.settings__version {
  text-align: center;
  color: var(--text-sub);
  font-size: 13px;
  margin-top: 18px;
}
.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.choice {
  position: relative;
  border: 0;
  background: none;
  padding: 0.7em 0.2em;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--text-sub);
}
.choice.is-selected {
  color: var(--text);
  font-weight: 600;
}

/* 時刻テスト中の表示 */
.test-badge {
  position: fixed;
  right: 8px;
  top: calc(env(safe-area-inset-top) + 66px);
  z-index: 60;
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 8px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px dashed var(--accent-text);
  pointer-events: none;
}

/* 散歩 */
.stage__art.is-walking {
  transform-origin: 50% 70%;
  animation: walk var(--walk-ms, 4000ms) ease-out forwards;
}
@keyframes walk {
  0% { transform: scale(1) translateY(0); }
  20% { transform: scale(1.025) translateY(-0.4%); }
  40% { transform: scale(1.05) translateY(0); }
  60% { transform: scale(1.075) translateY(-0.4%); }
  80% { transform: scale(1.1) translateY(0); }
  100% { transform: scale(1.12) translateY(0); }
}
.bubble {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5em 1.4em;
  white-space: nowrap;
  font-size: clamp(16px, 4.6vw, 21px);
  isolation: isolate;
  animation: fade-in 0.5s ease-out;
}
.bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--line);
  filter: url(#pencil);
}
.sparkle {
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: radial-gradient(closest-side, rgba(255, 250, 220, 0.95), rgba(255, 230, 150, 0.4) 55%, transparent);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  animation: sparkle-in 0.9s ease-out, twinkle 1.6s ease-in-out 0.9s infinite;
}
.sparkle svg {
  width: 70%;
  height: 70%;
  fill: #FFFBE6;
  animation: spin 6s linear infinite;
}
@keyframes sparkle-in {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes fade-in {
  from { opacity: 0; }
}
.rising {
  position: absolute;
  width: 10%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left var(--rise-ms) ease-in-out, top var(--rise-ms) ease-in-out, width var(--rise-ms) ease-in-out;
}
.rising.is-up {
  left: 50% !important;
  top: 40% !important;
  width: 28%;
}
.marble {
  display: block;
  width: 100%;
  height: 100%;
}
.marble img,
.marble svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stroll-bottom,
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  transform: translateX(-50%);
  width: calc(var(--stage-w) - 32px);
  display: flex;
  justify-content: center;
  z-index: 15;
}
.stroll-pick {
  font-size: 18px;
  padding: 0.6em 2.4em;
  animation: fade-in 0.4s ease-out;
}
.result-slip,
.slip {
  width: 100%;
  padding: 18px 18px 20px;
  display: grid;
  justify-items: center;
  gap: 10px;
  animation: fade-in 0.4s ease-out;
}
.result-slip__marble {
  width: 64px;
  height: 64px;
}
.result-slip__text,
.slip__text {
  margin: 0;
  text-align: center;
}
.result-slip__actions,
.slip__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.result-slip__actions button:disabled,
.slip button:disabled {
  opacity: 0.45;
}
.swap-sheet {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  transform: translateX(-50%);
  width: calc(var(--stage-w) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 90px);
  overflow: auto;
  padding: 16px 16px 18px;
  z-index: 25;
  display: grid;
  gap: 10px;
}
.swap-sheet__msg,
.swap-sheet__count {
  margin: 0;
  text-align: center;
}
.swap-sheet__count {
  color: var(--text-sub);
  font-size: 13px;
}
.swap-sheet .jar {
  width: min(100%, 300px);
  justify-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .stage__art.is-walking,
  .sparkle,
  .sparkle svg {
    animation: none;
  }
  .rising {
    transition: none;
  }
}

/* ビー玉瓶 */
.jar-page {
  width: var(--stage-w);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 84px) 24px calc(env(safe-area-inset-bottom) + 30px);
  display: grid;
  justify-items: center;
  gap: 12px;
}
.jar {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
}
.jar__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jar__inner {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 20%;
  bottom: 4%;
}
.jar__marble {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.jar__marble .pencil-ring {
  inset: -30%;
  width: 160%;
  height: 160%;
}
.jar-page__count {
  margin: 0;
  color: var(--text-sub);
}

/* 喫茶店 */
.bubble--crow {
  left: 34%;
  top: 47%;
  transform: none;
}
.bubble--inline {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  font-size: 16px;
  padding: 0.35em 1.1em;
}
.bubble--inline:empty {
  display: none;
}
.slip__heading {
  font-size: 17px;
  justify-self: start;
}
.slip__sub {
  color: var(--text-sub);
  font-size: 15px;
}
.cafe-note {
  margin: 0;
  color: var(--text-sub);
  font-size: 13px;
  text-align: center;
}
.marble-strip {
  display: flex;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  padding: 10px 8px;
  scrollbar-width: none;
}
.marble-strip__item {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.marble-strip__item .pencil-ring {
  inset: -24%;
  width: 148%;
  height: 148%;
}

/* 注文票 */
.topbar--scroll {
  position: absolute;
}
.scene--backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.order-crow {
  width: 46px;
  height: 46px;
  flex: none;
}
.order-crow > img,
.order-crow > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.order-page {
  position: relative;
  z-index: 1;
  width: var(--stage-w);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 78px) 14px calc(env(safe-area-inset-bottom) + 40px);
}
.order {
  padding: 22px 20px 28px;
  display: grid;
  gap: 24px;
}
.order__top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--text-sub);
}
.order__title {
  font-size: 26px;
  letter-spacing: 0.25em;
}
.order__no {
  color: var(--text-sub);
}
.topic-wrap {
  position: relative;
}
.wash-band {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.35em 1.1em;
  color: var(--accent-text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.wash-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  border-radius: 40% 10% 30% 12% / 50% 20% 40% 30%;
  filter: url(#watercolor);
}
.topic__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 0.5em 0.9em;
  font-size: 14px;
  z-index: 5;
}
.order__heading {
  font-size: 17px;
}
.order__prompt {
  margin: 4px 0 10px;
  color: var(--text-sub);
  font-size: 15px;
}
.lined {
  --lh: 2.1em;
  display: block;
  width: 100%;
  min-height: var(--lh);
  border: 0;
  outline: none;
  padding: 0;
  resize: none;
  overflow: hidden;
  font: inherit;
  font-size: 17px;
  line-height: var(--lh);
  color: var(--text);
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--input-line) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-attachment: local;
}
.order__section > .lined {
  min-height: calc(var(--lh) * 2);
}
.feelings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 4px;
}
.feeling {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.feeling__blob {
  position: relative;
  width: 46px;
  height: 46px;
}
.feeling__blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blob);
  filter: url(#watercolor);
  opacity: 0.9;
}
.feeling__blob .pencil-ring {
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
}
.feeling__name {
  font-size: 14px;
  line-height: 1.3;
}
.feeling.is-selected .feeling__name {
  font-weight: 600;
}
.views {
  display: grid;
  gap: 4px;
}
.view {
  display: grid;
  grid-template-columns: 18px 1fr 30px;
  align-items: end;
  gap: 6px;
}
.pen {
  width: 18px;
  height: 40px;
  color: var(--line);
  margin-bottom: 4px;
}
.view__del {
  border: 0;
  background: none;
  color: var(--text-sub);
  font-size: 18px;
  padding: 0 0 8px;
  cursor: pointer;
}
.add-btn {
  margin-top: 8px;
  padding: 0.2em 1.2em;
  font-size: 20px;
}
.order__foot {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.order__submit {
  font-size: 18px;
  padding: 0.6em 2.6em;
}
.order__submit.is-off {
  opacity: 0.45;
}
.order__note {
  margin: 0;
  color: var(--text-sub);
  font-size: 14px;
}

/* ソーダ */
.soda-table {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 72%;
  bottom: -30%;
  background: var(--wood);
  border-top: 2px solid var(--line);
}
.soda-cup {
  position: absolute;
  left: 25%;
  width: 50%;
  top: 20%;
  aspect-ratio: 1 / 2;
}
.soda-liquid,
.soda-cup__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.soda-cup__glass > img,
.soda-cup__glass > svg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.soda-fill {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform var(--drink-ms, 2000ms) ease-in;
}
.soda-cup.is-drinking .soda-fill {
  transform: scaleY(0);
}
.soda-bubble {
  fill: #FFFFFF;
  opacity: 0;
  animation: soda-bubble 3.6s linear infinite;
}
.soda-cup.is-drinking .soda-bubble {
  display: none;
}
@keyframes soda-bubble {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: translateY(-220px); opacity: 0; }
}
.soda-cup .soda-glass {
  position: absolute;
  left: 38%;
  width: 24%;
  height: auto;
  top: 61%;
  aspect-ratio: 1;
}
.glass {
  display: block;
  width: 100%;
  height: 100%;
}
.glass img,
.glass svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.muddler {
  position: absolute;
  left: 56%;
  top: -2%;
  width: 10%;
  aspect-ratio: 1 / 10;
  transform: rotate(12deg);
  transform-origin: 50% 85%;
  transition: opacity 0.5s;
}
.muddler > img,
.muddler > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.muddler.is-stirring {
  animation: stir var(--stir-ms, 1500ms) ease-in-out;
}
.muddler.is-away {
  opacity: 0;
}
@keyframes stir {
  0%, 100% { transform: rotate(12deg) translateX(0); }
  25% { transform: rotate(-6deg) translateX(-30%); }
  50% { transform: rotate(14deg) translateX(-60%); }
  75% { transform: rotate(-4deg) translateX(-30%); }
}
@media (prefers-reduced-motion: reduce) {
  .soda-bubble,
  .muddler.is-stirring {
    animation: none;
  }
  .soda-fill {
    transition: none;
  }
}

/* 標本 */
.specimen-page {
  width: var(--stage-w);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 80px) 18px calc(env(safe-area-inset-bottom) + 30px);
}
.shelf {
  position: relative;
  isolation: isolate;
  padding: 8px 16px 14px;
}
.shelf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wood-light);
  border: 10px solid var(--wood);
  outline: 1.5px solid var(--line);
  filter: url(#pencil);
}
.shelf__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 8px;
  min-height: 110px;
  padding: 14px 4px 6px;
  border-bottom: 3px solid var(--line);
}
.shelf__item {
  border: 0;
  padding: 8%;
  background: none;
  aspect-ratio: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.specimen-page__count {
  margin: 12px 0 0;
  text-align: center;
  color: var(--text-sub);
  font-size: 14px;
}