:root {
  color-scheme: dark;
  --bg: #17212f;
  --panel: rgba(255, 255, 255, 0.09);
  --panel-strong: rgba(255, 255, 255, 0.16);
  --ink: #f6fbff;
  --muted: #aec1cf;
  --accent: #47d7ac;
  --warm: #ffbf69;
  --danger: #ff6b7f;
  --line: rgba(255, 255, 255, 0.18);
  --shadow: 0 18px 56px rgba(0, 0, 0, 0.34);
  font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 18% 10%, rgba(71, 215, 172, 0.2), transparent 28rem),
    radial-gradient(circle at 84% 20%, rgba(255, 191, 105, 0.16), transparent 24rem),
    linear-gradient(160deg, #17212f 0%, #26334a 48%, #182932 100%);
  color: var(--ink);
  touch-action: manipulation;
}

/* 画面を1枚に固定：ページスクロール・ピンチズーム・ラバーバンドを禁止。
   高さは inset:0 で visual viewport に追従（iOSのアドレスバー伸縮にもズレない） */
body {
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
}

button {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0 18px;
  background: var(--panel-strong);
  color: var(--ink);
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-shell {
  position: relative;
  width: min(100vw, 620px);
  height: 100%;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* プレイエリアを残り高さの中央に置く器 */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  touch-action: none; /* 相対スライド操作中にスクロール/ズームを起こさない */
}

.screen-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #0d1a27;
}

.screen-modal.hidden {
  display: none;
}

.screen-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.start-modal .screen-art {
  background-image:
    linear-gradient(180deg, rgba(7, 16, 26, 0.18) 0%, rgba(7, 16, 26, 0.38) 42%, rgba(7, 16, 26, 0.78) 100%),
    url("./assets/generated/screens/start_lab_portrait.png?v=clean-title-20260604");
}

.gameover-modal .screen-art {
  background-image:
    linear-gradient(180deg, rgba(7, 16, 26, 0.32), rgba(7, 16, 26, 0.74)),
    url("./assets/generated/screens/gameover_lab_portrait.png");
}

.screen-copy {
  position: relative;
  width: min(92vw, 460px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 24px;
  background: rgba(10, 22, 34, 0.72);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  display: grid;
  gap: 14px;
}

.start-copy {
  align-self: start;
  justify-self: center;
  margin-top: 7vh;
}

.gameover-copy {
  align-self: start;
  margin-top: 5vh;
  text-align: center;
}

.screen-kicker {
  color: var(--warm);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.screen-copy h2 {
  font-size: 30px;
  line-height: 1.08;
}

.screen-copy p {
  color: #d7e5ef;
  font-size: 15px;
  line-height: 1.65;
}

#finalScore {
  color: #ffffff;
  font-size: 42px;
  line-height: 1;
}

.bonus-message {
  color: #ffe1a8;
  font-size: 15px;
  font-weight: 900;
}

.primary-button {
  min-height: 54px;
  border-color: rgba(255, 191, 105, 0.55);
  background: linear-gradient(135deg, #ffbf69, #ff6b7f);
  color: #142235;
  font-size: 17px;
  font-weight: 900;
}

.topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(112px, 0.82fr) minmax(0, 1.2fr) minmax(116px, 0.82fr);
  align-items: stretch;
  gap: 10px;
}

.score-panel,
.next-panel,
.title-panel {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.score-panel,
.next-panel {
  min-height: 76px;
  display: grid;
  place-items: center;
  padding: 8px;
}

.score-panel strong {
  font-size: 34px;
  line-height: 1;
}

.score-panel {
  gap: 5px;
}

.score-line,
.best-line {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.best-line {
  min-width: 74px;
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(255, 191, 105, 0.16);
  color: #ffe1a8;
  font-size: 11px;
  font-weight: 900;
}

.best-line strong {
  font-size: 16px;
}

.next-panel canvas {
  width: 100px;
  height: 54px;
}

/* CHANGE パネル＝タップで落とすアイテムを 瓶→天秤→UV 循環 */
.change-panel {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  grid-template-rows: auto 1fr auto;
  gap: 2px;
  padding: 6px 8px;
  border-color: rgba(71, 215, 172, 0.5);
}

.change-panel:active {
  transform: translateY(1px);
}

.change-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.change-hint {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.panel-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.title-panel {
  min-width: 0;
  padding: 12px 14px;
  display: grid;
  align-content: center;
  text-align: center;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 19px;
  line-height: 1.18;
}

.title-panel p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.product-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  text-align: left;
}

.product-info img {
  width: 70px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.game-wrap {
  position: relative;
  /* 実寸は app.js の sizeGameWrap() が px で設定（玉は等倍・はみ出さない）。
     margin-right はキャラを立たせる右の余白。.stage が中央寄せするので
     「プレイエリアは中央寄り＋右にキャラ」の配置になる */
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin-right: 84px;
  aspect-ratio: 340 / 620;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  overflow: visible;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1));
  background-size: 42px 42px, 42px 42px, 100% 100%;
  box-shadow: var(--shadow);
  touch-action: none;
}

.danger-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 8px;
  background: rgba(255, 44, 73, 0.24);
  opacity: 0;
  pointer-events: none;
}

.game-wrap.danger .danger-flash {
  animation: dangerPulse 500ms ease-in-out infinite;
}

@keyframes dangerPulse {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.42; }
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#gameCanvas:active {
  cursor: grabbing;
}

.line-label {
  position: absolute;
  top: 16%;
  left: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 107, 127, 0.16);
  color: #ffd8de;
  font-size: 0.68rem;
  font-weight: 800;
  pointer-events: none;
}

.character {
  position: absolute;
  right: -84px;   /* game-wrap の右外＝キャラ用の余白(gutter)に立たせる。盤面には重ねない */
  bottom: 0;
  width: 84px;
  aspect-ratio: 0.78;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  transform-origin: center bottom;
  transition: transform 240ms ease, filter 240ms ease;
}

/* 進化キャラ（お姉さん研究者10000超／ダンディ20000超）は約2倍に大きく表示。
   2頭身→全身の絵に変わるので枠を大きくしないと小さく見えるため。右下に堂々と。 */
.character.adult,
.character.dandy {
  right: -28px;
  bottom: 0;
  width: 168px;
  z-index: 4;
}

.character.adult .researcher,
.character.dandy .researcher {
  width: 90%;
  height: 100%;
}

.character-glow,
.researcher {
  grid-area: 1 / 1;
}

.character-glow {
  width: 82%;
  height: 64%;
  align-self: end;
  margin-bottom: 14%;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(12px);
}

.researcher {
  position: relative;
  width: 76%;
  height: 88%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.researcher > span,
.character.image-ready .researcher > span {
  display: none;
}

.stage-0 .character-glow { background: #47d7ac; }
.stage-1 .character-glow { background: #ffbf69; }
.stage-2 .character-glow { background: #8bd3ff; }
.stage-3 .character-glow { background: #ff8cc6; }
.stage-4 .character-glow { background: #fff0a8; }

.hair {
  position: absolute;
  top: 2%;
  left: 17%;
  width: 66%;
  height: 43%;
  border-radius: 48% 48% 38% 38%;
  background: #382337;
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.18);
}

.head {
  position: absolute;
  top: 8%;
  left: 21%;
  width: 58%;
  height: 38%;
  border-radius: 48% 48% 46% 46%;
  background: #ffd9c7;
  border: 2px solid rgba(255, 255, 255, 0.58);
  box-shadow: inset -7px -7px 0 rgba(180, 112, 91, 0.15);
}

.body-coat {
  position: absolute;
  left: 18%;
  bottom: 7%;
  width: 64%;
  height: 47%;
  border-radius: 24% 24% 14% 14%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(35, 75, 100, 0.22) 49% 51%, transparent 52%),
    linear-gradient(160deg, #ffffff, #dbefff);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
}

.body-coat::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 34%;
  width: 32%;
  height: 16%;
  border-radius: 0 0 999px 999px;
  background: #3cc1b0;
}

.arm {
  position: absolute;
  bottom: 28%;
  width: 15%;
  height: 30%;
  border-radius: 999px;
  background: #f5fbff;
  transform-origin: top center;
}

.arm.left {
  left: 9%;
  transform: rotate(22deg);
}

.arm.right {
  right: 8%;
  transform: rotate(-31deg);
}

.beaker {
  position: absolute;
  right: 0;
  bottom: 28%;
  width: 22%;
  height: 20%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(0deg, rgba(71, 215, 172, 0.8) 0 44%, rgba(255, 255, 255, 0.18) 45%);
}

.eye {
  position: absolute;
  top: 36%;
  width: 9%;
  height: 12%;
  border-radius: 50%;
  background: #10202c;
}

.eye.left { left: 31%; }
.eye.right { right: 31%; }

.mouth {
  position: absolute;
  left: 38%;
  bottom: 29%;
  width: 24%;
  height: 12%;
  border-bottom: 4px solid #10202c;
  border-radius: 0 0 999px 999px;
}

#characterLabel {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  margin-bottom: -4px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap; /* 「ラボリーダー」等が改行されないように */
}

.character.cheer {
  animation: cheer 360ms ease;
}

.character.evolve {
  animation: evolve 680ms ease;
}

.character.milestone {
  animation: milestone 820ms ease;
}

.character.sad {
  transform: rotate(-7deg) scale(0.92);
  filter: grayscale(0.35);
}

@keyframes cheer {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-16px) scale(1.08); }
}

@keyframes evolve {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.18); filter: brightness(1.7); }
  70% { transform: scale(0.96); filter: brightness(1.2); }
}

@keyframes milestone {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  18% { transform: translateY(-10px) rotate(-5deg) scale(1.08); }
  38% { transform: translateY(0) rotate(5deg) scale(1.04); }
  58% { transform: translateY(-7px) rotate(-3deg) scale(1.1); }
}

.name-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.name-field input {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ranking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ranking-head h2,
.ranking-head h3 {
  font-size: 1rem;
  margin: 0;
}

.ranking-list {
  max-height: 116px;
  margin: 8px 0 0;
  padding-left: 24px;
  color: var(--muted);
  display: grid;
  gap: 4px;
  overflow: auto;
  overscroll-behavior: contain;
}

.ranking-list li {
  padding-right: 8px;
}

.ranking-list strong {
  color: var(--ink);
}

.gameover-ranking {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

/* 横画面（短い画面=スマホ横）では縦持ちを促すオーバーレイ。iPadの横（高さ大）には出さない */
.rotate-hint {
  display: none;
}

@media (orientation: landscape) and (max-height: 540px) {
  .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #0d1a27;
    color: var(--ink);
    text-align: center;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.5;
  }

  .rotate-emoji {
    font-size: 40px;
    margin-bottom: 8px;
  }
}

@media (max-width: 620px) {
  .app-shell {
    padding-inline: 8px;
  }

  .topbar {
    grid-template-columns: 1fr 1fr;
  }

  .title-panel {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 58px;
  }

  .score-panel,
  .next-panel {
    min-height: 64px;
  }

  .next-panel canvas {
    width: 88px;
    height: 48px;
  }

  /* .game-wrap の実寸・.character の位置は base + app.js が決めるので、ここでは上書きしない */

  h1 {
    font-size: 17px;
  }

  .title-panel p {
    font-size: 12px;
    line-height: 1.42;
  }

  .product-info {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }

  .product-info img {
    width: 56px;
    height: 48px;
  }

  .screen-modal {
    padding: 12px;
  }

  .start-copy,
  .gameover-copy {
    justify-self: center;
    margin: 0;
  }

  .screen-copy {
    padding: 18px;
  }

  .screen-copy h2 {
    font-size: 24px;
  }

  #finalScore {
    font-size: 34px;
  }
}