@charset "utf-8";
/* ==========================================================================
   ミニゲーム「スキャン大作戦」（game/index.html / js/game.js）
   本文カラム（375px）の中に収まる縦長のゲーム画面
   ========================================================================== */
.gamepage {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  padding: var(--space-24) var(--space-16) 40px;
  background: var(--c-wt);
}

.gamepage__head {
  text-align: center;
}

.gamepage__lead {
  margin-top: var(--space-8);
  color: var(--c-text-primary);
  font-size: 14px;
  line-height: 1.8;
}

.game {
  width: 100%;
  max-width: 343px;
}

.game__frame {
  position: relative;
  /* 中の重なり順（音ボタンなど）がメニューのドロワーより上に出ないよう、ここで閉じる */
  isolation: isolate;
  overflow: hidden;
  border: 3px solid var(--c-bl-03);
  border-radius: 20px;
  background: #f4f9ff;
  box-shadow: 0 6px 0 #0f4bb0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   HUD（ステージ名・残り時間・スコア）
   -------------------------------------------------------------------------- */
.game-hud {
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, #1f6fe5 0%, #1761d8 100%);
  color: #fff;
}

.game-hud__stage {
  overflow: hidden;
  font-size: 12px;
  font-weight: var(--fw-demibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.9;
}

.game-time {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.game-time__icon {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
}

.game-time__icon::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 2px;
  height: 6px;
  background: #fff;
  transform-origin: 50% 100%;
  animation: game-tick 1s steps(4) infinite;
}

.game-time__track {
  position: relative;
  flex: 1;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(0 0 0 / 25%);
}

.game-time__bar {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffec00, #ffc400);
  transform-origin: 0 50%;
}

.game-time__bar.is-hurry {
  background: linear-gradient(90deg, #ff6b6b, #ff3d3d);
  animation: game-blink 0.5s steps(2) infinite;
}

.game-time__num {
  flex: none;
  width: 28px;
  font-size: 18px;
  font-weight: var(--fw-demibold);
  text-align: right;
}

.game-hud__row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
}

.game-score {
  font-size: 12px;
  font-weight: var(--fw-demibold);
}

.game-score b {
  margin-left: 4px;
  font-size: 22px;
  transition: color 0.2s ease;
}

.game-score b.is-clear {
  color: #ffec00;
}

.game-score span {
  margin-left: 6px;
  opacity: 0.85;
}

.game-combo {
  color: #ffec00;
  font-size: 14px;
  font-weight: var(--fw-demibold);
  font-style: italic;
  text-shadow: 0 2px 0 #c45a00;
}

/* --------------------------------------------------------------------------
   研究所（キャラクターが動くところ）
   -------------------------------------------------------------------------- */
.game-lab {
  position: relative;
  height: 220px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f4fbff 0%, #e2eefd 64%, #ffffff 66%, #dcebff 68%, #91b1ea 68.5%, #b4cff2 100%);
}

/* 壁の窓 */
.game-lab::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 176px;
  width: 64px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 4px;
  background: linear-gradient(160deg, #9fd7ff 0%, #c9ecff 55%, #8fd88a 56%, #6cc46a 100%);
  box-shadow: 0 2px 0 rgb(0 0 0 / 8%);
}

.game-nanotom {
  position: absolute;
  bottom: 56px;
  left: 2px;
  width: 150px;
  height: 112px;
}

.game-nanotom > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.game-nanotom > img + img {
  visibility: hidden;
}

.game-lab.is-scanning .game-nanotom > img:first-of-type {
  animation: anim-flip-a 0.5s step-end infinite;
}

.game-lab.is-scanning .game-nanotom > img + img {
  animation: anim-flip-b 0.5s step-end infinite;
}

/* 装置の窓に入った製品 */
.game-slot {
  position: absolute;
  top: 16px;
  left: 54px;
  width: 36px;
  height: 30px;
}

.game-slot__svg {
  width: 100%;
  height: 100%;
  animation: game-load 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* スキャン中の光 */
.game-beam {
  position: absolute;
  top: 10px;
  left: 50px;
  width: 44px;
  height: 46px;
  overflow: hidden;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
}

.game-lab.is-scanning .game-beam {
  opacity: 1;
  background: radial-gradient(circle, rgb(95 179 255 / 55%) 0%, rgb(95 179 255 / 0%) 70%);
  animation: game-glow 0.6s ease-in-out infinite alternate;
}

.game-lab.is-scanning .game-beam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #7ff3ff;
  box-shadow: 0 0 10px 3px #3fd8ff;
  animation: game-sweep 0.7s linear infinite;
}

/* 博士 */
.game-hakase {
  position: absolute;
  right: 1px;
  bottom: 7px;
  width: 91px; /* img/chara/hakase-*.png（表情ちがい）。足もとが前と同じ位置になる大きさ */
}

.game-hakase img {
  display: block;
  width: 100%;
  height: auto;
}

.game-hakase.is-joy {
  animation: game-jump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-hakase.is-down {
  animation: game-shake 0.5s ease;
}

/* スキャにゃん（右から歩いてくる） */
.game-cat {
  position: absolute;
  bottom: 6px;
  left: 142px;
  width: 84px;
  transform: translateX(420px);
  will-change: transform;
}

.game-cat img {
  display: block;
  width: 100%;
  height: auto;
}

.game-cat.is-hop img {
  animation: game-hop 0.4s ease;
}

.game-cat.is-leave .game-carry {
  display: none;
}

.game-carry {
  position: absolute;
  top: -30px;
  left: 10px;
  width: 64px;
  height: 48px;
  animation: game-bob 0.22s ease-in-out infinite alternate;
}

.game-carry__svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / 15%));
}

/* 博士のふきだし（博士の頭の上。左の結果カードと重ならない位置） */
.game-bubble {
  position: absolute;
  top: 8px;
  right: 6px;
  left: 182px;
  padding: 7px 9px;
  border: 2px solid var(--c-bl-03);
  border-radius: 14px;
  background: #fff;
  color: var(--c-text-primary);
  font-size: 11.5px;
  font-weight: var(--fw-demibold);
  line-height: 1.45;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 70% 100%;
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.game-bubble::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -14px;
  border: 7px solid transparent;
  border-top-color: var(--c-bl-03);
}

.game-bubble.is-show {
  opacity: 1;
  transform: none;
}

.game-bubble.is-sad {
  border-color: #e0572e;
}

.game-bubble.is-sad::after {
  border-top-color: #e0572e;
}

/* スキャン結果（CT画像） */
.game-result {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 168px;
  padding: 8px 8px 6px;
  border: 3px solid #fff;
  border-radius: 14px;
  background: #0b1320;
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
  text-align: center;
  opacity: 0;
  transform: scale(0.4) rotate(-6deg);
  transition: opacity 0.15s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.game-result.is-show {
  opacity: 1;
  transform: none;
}

.game-result__img {
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 45%, #182436 0%, #0b1320 75%);
}

.game-result__img svg {
  width: 100%;
  height: 100%;
  filter: brightness(var(--ct-bright, 1)) contrast(var(--ct-contrast, 1)) blur(var(--ct-blur, 0px));
}

.game-result.is-show .game-result__img svg {
  animation: game-reveal 0.6s ease both;
}

.game-result__noise {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 17% 32%, rgb(255 255 255 / 35%) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 71% 64%, rgb(255 255 255 / 30%) 0 1px, transparent 1px 4px);
  opacity: var(--ct-noise, 0);
  mix-blend-mode: screen;
}

.game-result__streak {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / 45%) 0deg 2deg, transparent 2deg 15deg);
  mix-blend-mode: screen;
}

.game-result__img.is-streak .game-result__streak {
  opacity: 0.6;
}

.game-result__rank {
  margin-top: 4px;
  font-size: 18px;
  font-weight: var(--fw-demibold);
  font-style: italic;
  line-height: 1.2;
}

.game-result__rank--happy {
  color: #ffec00;
}

.game-result__rank--normal {
  color: #7fd3ff;
}

.game-result__rank--sad {
  color: #ff9a7a;
}

.game-result__q {
  color: #cfe0f5;
  font-size: 11px;
}

/* 得点のポップ */
.game-pops {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.game-pop {
  position: absolute;
  top: 120px;
  left: 66%;
  color: #fff;
  font-size: 26px;
  font-weight: var(--fw-demibold);
  text-shadow: -2px 0px 0 #1761d8, 2px 0px 0 #1761d8, 0px -2px 0 #1761d8, 0px 2px 0 #1761d8, -2px -2px 0 #1761d8, 2px -2px 0 #1761d8, -2px 2px 0 #1761d8, 2px 2px 0 #1761d8, 0 5px 0 #1761d8;
  white-space: nowrap;
  animation: game-pop 1.1s ease-out forwards;
}

.game-pop.is-big {
  color: #ffec00;
  font-size: 34px;
  text-shadow: -2px 0px 0 #d64b00, 2px 0px 0 #d64b00, 0px -2px 0 #d64b00, 0px 2px 0 #d64b00, -2px -2px 0 #d64b00, 2px -2px 0 #d64b00, -2px 2px 0 #d64b00, 2px 2px 0 #d64b00, 0 5px 0 #d64b00;
}

/* --------------------------------------------------------------------------
   製品カード・パラメータ・ボタン
   -------------------------------------------------------------------------- */
.game-card {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 86px;
  margin: 10px 10px 0;
  padding: 8px 10px;
  border: 2px solid #ffd84d;
  border-radius: 14px;
  background: #fffbe0;
}

.game-card.is-in {
  animation: game-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card__wait {
  width: 100%;
  color: #9a8a3a;
  font-size: 12px;
  text-align: center;
}

.game-card__pic {
  flex: none;
  width: 72px;
  height: 56px;
  border-radius: 10px;
  background: #fff;
}

.game-card__pic svg {
  width: 100%;
  height: 100%;
}

.game-card__body {
  flex: 1;
  min-width: 0;
}

.game-card__name {
  color: var(--c-bl-03);
  font-size: 15px;
  font-weight: var(--fw-demibold);
  line-height: 1.3;
}

.game-card__tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.game-card__tags span {
  display: inline-block;
  min-width: 68px;
  margin-right: 4px;
  color: #8a7a2a;
}

.game-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 0;
}

.game-param {
  display: flex;
  gap: 6px;
  align-items: center;
}

.game-param__name {
  flex: none;
  width: 58px;
  color: var(--c-text-primary);
  font-size: 11px;
  font-weight: var(--fw-demibold);
  line-height: 1.2;
}

.game-param__opts {
  display: flex;
  flex: 1;
  gap: 4px;
}

.game-opt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 2px;
  border: 2px solid #b9d2f5;
  border-radius: 10px;
  background: #fff;
  color: var(--c-bl-03);
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.game-opt b {
  font-size: 14px;
  font-weight: var(--fw-demibold);
}

.game-opt small {
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.8;
}

.game-opt:active:not(:disabled) {
  transform: scale(0.94);
}

.game-opt.is-on {
  border-color: #1761d8;
  background: #1761d8;
  color: #fff;
  box-shadow: 0 3px 0 #0f4bb0;
}

.game-opt:disabled {
  cursor: default;
  opacity: 0.55;
}

.game-opt.is-on:disabled {
  opacity: 0.8;
}

.game-actions {
  display: flex;
  gap: 8px;
  padding: 12px 10px 14px;
}

.game-memo-btn {
  flex: none;
  width: 92px;
  border: 2px solid var(--c-bl-03);
  border-radius: 14px;
  background: #fff;
  color: var(--c-bl-03);
  font-size: 12px;
  font-weight: var(--fw-demibold);
  cursor: pointer;
}

.game-scan {
  flex: 1;
  height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffef3a 0%, #ffc400 100%);
  box-shadow: 0 5px 0 #d68a00;
  color: #8a3b00;
  font-size: 20px;
  font-weight: var(--fw-demibold);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

.game-scan:not(:disabled) {
  animation: game-ready 1.2s ease-in-out infinite;
}

.game-scan:active:not(:disabled) {
  box-shadow: 0 1px 0 #d68a00;
  transform: translateY(4px);
  animation: none;
}

.game-scan:disabled {
  cursor: default;
  filter: grayscale(0.8);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   重ねて出す画面（タイトル・ステージ選択・会話・結果・メモ）
   -------------------------------------------------------------------------- */
.game-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  background: rgb(10 40 100 / 55%);
}

.game-layer[hidden] {
  display: none;
}

.game-layer.is-title,
.game-layer.is-select,
.game-layer.is-howto {
  align-items: flex-start;
  background:
    radial-gradient(circle at 50% 30%, rgb(255 255 255 / 25%) 0 30%, transparent 31%),
    repeating-conic-gradient(from 0deg at 50% 30%, #2a7cf0 0deg 10deg, #1f6fe5 10deg 20deg);
}

.game-layer.is-talk {
  align-items: flex-end;
  cursor: pointer;
  background: rgb(10 40 100 / 25%);
}

.game-layer.is-count {
  background: rgb(10 40 100 / 35%);
}

.game-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 #0f4bb0;
  color: var(--c-bl-03);
  font-size: 15px;
  font-weight: var(--fw-demibold);
  cursor: pointer;
}

.game-btn:active {
  box-shadow: 0 1px 0 #0f4bb0;
  transform: translateY(3px);
}

.game-btn--big {
  min-height: 56px;
  background: linear-gradient(180deg, #ffef3a 0%, #ffc400 100%);
  box-shadow: 0 5px 0 #d68a00;
  color: #8a3b00;
  font-size: 20px;
}

.game-btn--sub {
  background: rgb(255 255 255 / 90%);
}

/* タイトル */
.game-title {
  width: 100%;
  padding-top: 18px;
  text-align: center;
}

.game-title__sub {
  color: #fff;
  font-size: 15px;
  font-weight: var(--fw-demibold);
  text-shadow: 0 2px 0 #0f4bb0;
}

.game-title__main {
  color: #fff;
  font-size: 40px;
  font-weight: var(--fw-demibold);
  line-height: 1.15;
  text-shadow: -2px 0px 0 #0f4bb0, 2px 0px 0 #0f4bb0, 0px -2px 0 #0f4bb0, 0px 2px 0 #0f4bb0, -2px -2px 0 #0f4bb0, 2px -2px 0 #0f4bb0, -2px 2px 0 #0f4bb0, 2px 2px 0 #0f4bb0, 0 7px 0 #0f4bb0;
  animation: game-title-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-title__main span {
  display: block;
  color: #ffec00;
}

.game-title__charas {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}

.game-title__charas img {
  width: 120px;
  height: auto;
  animation: game-bounce 1.2s ease-in-out infinite;
}

.game-title__charas img + img {
  margin-left: -16px;
  animation-delay: 0.3s;
}

/* タイトルロゴ（画像） */
.game-title__logo {
  margin: -6px auto 0;
  width: 100%;
  max-width: 300px;
  animation: game-title-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-title__logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 0 rgb(15 75 176 / 45%));
}

.game-title__logo + .game-title__charas {
  margin-top: -2px;
}

.game-title__charas {
  align-items: flex-end;
}

.game-title__logo + .game-title__charas img {
  width: 92px;
}

.game-title__logo + .game-title__charas img + img {
  width: 98px;
}

/* ステージ選択 */
.game-select {
  width: 100%;
}

.game-select__ttl,
.game-howto__ttl {
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: var(--fw-demibold);
  text-align: center;
  text-shadow: 0 3px 0 #0f4bb0;
}

.game-select__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 6px;
}

/* カードを左右にずらして、すごろくの道のように並べる */
.game-sel {
  position: relative;
  margin-right: 22px;
  animation: game-sel-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 0.07s);
}

.game-sel:nth-child(even) {
  margin-right: 0;
  margin-left: 22px;
}

/* カードのあいだの足あと */
.game-sel + .game-sel::before {
  content: "";
  display: block;
  width: 40px;
  height: 14px;
  margin: 0 auto 4px;
  background: radial-gradient(circle, #fff 0 3px, transparent 3.5px) 0 50% / 13px 14px repeat-x;
  opacity: 0.8;
}

.game-stage {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 84px;
  padding: 10px 12px 10px 10px;
  border: 3px solid #fff;
  border-radius: 22px;
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0%) 0 12px, rgb(255 255 255 / 10%) 12px 24px),
    linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow: 0 5px 0 rgb(0 0 0 / 22%), inset 0 -4px 0 rgb(0 0 0 / 10%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transform: rotate(-1.2deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.1s ease;
}

.game-sel:nth-child(even) .game-stage {
  transform: rotate(1.2deg);
}

.game-stage:hover:not(:disabled) {
  transform: rotate(0) scale(1.03);
}

.game-stage:active:not(:disabled) {
  box-shadow: 0 2px 0 rgb(0 0 0 / 22%), inset 0 -4px 0 rgb(0 0 0 / 10%);
  transform: translateY(3px) scale(0.98);
}

.game-stage.is-locked {
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0%) 0 12px, rgb(255 255 255 / 12%) 12px 24px),
    linear-gradient(160deg, #b9c6dc 0%, #8e9dba 100%);
  cursor: default;
}

.game-stage__num {
  position: absolute;
  top: -10px;
  left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffec00;
  box-shadow: 0 2px 0 rgb(0 0 0 / 20%);
  color: var(--c2);
  font-size: 17px;
  font-weight: var(--fw-demibold);
}

.game-stage.is-locked .game-stage__num {
  background: #fff;
  color: #8e9dba;
}

.game-stage__num svg {
  width: 16px;
  height: 16px;
}

.game-stage__pic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 8%);
}

.game-stage__pic svg {
  width: 52px;
  height: 40px;
}

.game-stage:not(:disabled):hover .game-stage__pic svg {
  animation: game-wiggle 0.5s ease;
}

.game-stage__q {
  color: #8e9dba;
  font-size: 30px;
  font-weight: var(--fw-demibold);
}

.game-stage__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.game-stage__no {
  font-size: 10px;
  font-weight: var(--fw-demibold);
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.game-stage__name {
  font-size: 16px;
  font-weight: var(--fw-demibold);
  line-height: 1.3;
  text-shadow: 0 2px 0 rgb(0 0 0 / 18%);
}

.game-stage__meta {
  margin-top: 2px;
  font-size: 10.5px;
  opacity: 0.95;
}

.game-stage__stars {
  position: absolute;
  right: 10px;
  bottom: -11px;
  padding: 1px 8px 2px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.game-stage__stars .game-star {
  font-size: 13px;
}

.game-stage__stars em {
  margin-left: 4px;
  color: var(--c2);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--fw-demibold);
}

.game-stage.is-locked .game-stage__stars {
  display: none;
}

/* カードの右上からひょっこり顔を出すキャラクター */
.game-stage__face {
  position: absolute;
  top: -16px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
  animation: game-peek 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

.game-stage__new {
  position: absolute;
  top: -12px;
  right: 54px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #ff3d6e;
  box-shadow: 0 2px 0 #b8204a;
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-demibold);
  animation: game-bounce 0.9s ease-in-out infinite;
}

.game-star {
  color: #d5dbe5;
  font-size: 16px;
}

.game-star.is-on {
  color: #ffc400;
  text-shadow: 0 1px 0 #d68a00;
}

/* あそびかた・メモ */
.game-howto {
  width: 100%;
}

.game-howto__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.game-howto__sub {
  margin: 14px 0 -2px;
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-demibold);
  text-align: center;
  text-shadow: 0 2px 0 #0f4bb0;
}

/* ステップのカード（番号バッジ＋ミニチュア画面＋説明） */
.game-step {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 #0f4bb0;
  border-left: 6px solid var(--c);
  animation: game-sel-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 0.07s);
}

.game-step:nth-child(odd) {
  transform: rotate(-0.8deg);
}

.game-step:nth-child(even) {
  transform: rotate(0.8deg);
}

.game-step__no {
  position: absolute;
  top: -8px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 2px 0 rgb(0 0 0 / 20%);
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-demibold);
}

.game-step__pic {
  flex: none;
}

.game-step__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #444;
  font-size: 11.5px;
  line-height: 1.55;
}

.game-step__body b {
  color: var(--c);
  font-size: 14px;
}

.game-step__em {
  color: #6c47dc;
  font-weight: var(--fw-demibold);
}

/* ミニチュアの画面 */
.game-mini {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f6fd;
}

.game-mini i,
.game-mini em {
  font-style: normal;
  font-weight: var(--fw-demibold);
}

.game-mini--carry {
  background: linear-gradient(180deg, #f4fbff 0 62%, #91b1ea 62%);
}

.game-mini--carry img {
  position: absolute;
  bottom: -2px;
  left: 18px;
  width: 44px;
  height: auto;
  animation: game-hop 0.6s ease-in-out infinite;
}

.game-mini--carry span {
  position: absolute;
  top: 2px;
  left: 24px;
  width: 34px;
  height: 26px;
  animation: game-bob 0.3s ease-in-out infinite alternate;
}

.game-mini--carry svg {
  width: 100%;
  height: 100%;
}

.game-mini--card {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  border: 2px solid #ffd84d;
  background: #fffbe0;
}

.game-mini--card i {
  width: 70px;
  padding: 0;
  line-height: 16px;
  border-radius: 5px;
  background: #fff;
  color: #8a7a2a;
  font-size: 9px;
  text-align: center;
}

.game-mini--opts {
  background: #3a2fa8;
}

.game-mini--opts i {
  width: 22px;
  padding: 3px 0;
  border: 2px solid #b9d2f5;
  border-radius: 6px;
  background: #fff;
  color: #1761d8;
  font-size: 11px;
  text-align: center;
}

.game-mini--opts i.is-on {
  border-color: #1761d8;
  background: #1761d8;
  color: #fff;
  animation: game-ready 1s ease-in-out infinite;
}

.game-mini--opts em {
  width: 100%;
  color: #8fe9ff;
  font-size: 11px;
  text-align: center;
}

.game-mini--scan {
  flex-direction: column;
  background: #0b1320;
}

.game-mini--scan i {
  padding: 3px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffef3a 0%, #ffc400 100%);
  box-shadow: 0 2px 0 #d68a00;
  color: #8a3b00;
  font-size: 11px;
}

.game-mini--scan em {
  color: #ffec00;
  font-size: 12px;
  font-style: italic;
  animation: game-blink 1s steps(2) infinite;
}

.game-mini--time {
  flex-direction: column;
  background: #1761d8;
}

.game-mini--time i {
  position: relative;
  width: 66px;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(0 0 0 / 25%);
}

.game-mini--time i span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffec00, #ffc400);
  transform-origin: 0 50%;
  animation: game-mini-time 3s linear infinite;
}

.game-mini--time em {
  color: #ffec00;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

@keyframes game-mini-time {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.1); }
}

/* 博士のメモ：方眼の手帳のページ。上にリング、3枚の色カードで「決め方」を見せる */
.game-layer.is-memo {
  flex-direction: column;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 18%) 0 40%, transparent 41%),
    rgb(10 40 100 / 70%);
}

.game-memo {
  position: relative;
  width: 100%;
  margin-top: 10px;
  padding: 22px 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(rgb(23 97 216 / 7%) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, rgb(23 97 216 / 7%) 1px, transparent 1px) 0 0 / 14px 14px,
    #fffdf3;
  box-shadow: 0 5px 0 #c9b25a, 0 10px 24px rgb(0 0 0 / 25%);
  rotate: -0.8deg; /* 出てくるアニメーション（transform）と別にして、最初から傾けておく */
  animation: game-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 手帳のリング */
.game-memo__ring {
  position: absolute;
  top: -9px;
  left: 24px;
  right: 24px;
  height: 18px;
  background: radial-gradient(circle at 50% 50%, #9aa7b8 0 5px, #6b7a90 5px 6.5px, transparent 7px) 0 0 / 26px 18px repeat-x;
}

.game-memo__head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.game-memo__head img {
  flex: none;
  width: 52px;
  height: 52px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgb(0 0 0 / 12%);
  animation: game-peek 2.4s ease-in-out infinite;
}

.game-memo__head p {
  color: var(--c-bl-03);
  font-size: 22px;
  font-weight: var(--fw-demibold);
  line-height: 1.1;
  text-shadow: 0 2px 0 #ffe27a;
}

.game-memo__head p span {
  display: block;
  color: #ff8a00;
  font-size: 11px;
  text-shadow: none;
}

.game-memo__card {
  margin-top: 10px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 var(--memo-shadow, #cfe0f5);
  border-top: 6px solid var(--memo-c, #1761d8);
}

.game-memo__card--mat {
  --memo-c: #2fae67;
  --memo-shadow: #bfe8cf;
}

.game-memo__card--size {
  --memo-c: #f0841c;
  --memo-shadow: #fbd9b4;
}

.game-memo__card--detail {
  --memo-c: #6c47dc;
  --memo-shadow: #d9cdfa;
}

.game-memo__ttl {
  margin-bottom: 6px;
  color: #333;
  font-size: 12px;
  font-weight: var(--fw-demibold);
}

.game-memo__ttl b {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--memo-c);
  color: #fff;
}

.game-memo__ttl em {
  color: var(--memo-c);
  font-style: normal;
}

.game-memo__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 2px 6px;
  align-items: center;
  padding: 4px 0;
}

.game-memo__row + .game-memo__row {
  border-top: 1px dashed #e3e8ef;
}

.game-memo__pic {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4f8fd;
}

.game-memo__pic svg {
  width: 32px;
  height: 28px;
}

.game-memo__label {
  color: #333;
  font-size: 12px;
  font-weight: var(--fw-demibold);
}

.game-memo__arrow {
  display: none;
}

.game-memo__pills {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: flex;
  gap: 4px;
}

.game-memo__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: 3px 6px;
  border-radius: 10px;
  background: #1761d8;
  box-shadow: 0 2px 0 #0f4bb0;
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-demibold);
  line-height: 1.1;
}

.game-memo__pill i {
  font-size: 8.5px;
  font-style: normal;
  opacity: 0.85;
}

.game-memo__tip {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff8d6;
  color: #7a5a00;
  font-size: 10.5px;
  line-height: 1.5;
}

.game-memo__tip::before {
  content: "ヒント ";
  color: #ff8a00;
  font-weight: var(--fw-demibold);
}

.game-memo__note {
  margin-top: 12px;
  color: #333;
  font-size: 12px;
  text-align: center;
}

.game-memo__note span {
  margin-right: 4px;
  color: #ffc400;
}

.game-memo__note b {
  color: #ff3d6e;
}

/* 意味のまとまりごとに改行する（まとまりの途中では折り返さない） */
.game-memo__note i {
  display: inline-block;
  font-style: normal;
  white-space: nowrap;
}

.game-layer.is-memo .game-btn {
  margin-top: 14px;
}

.game-howto .game-memo {
  transform: none;
}

/* 会話 */
.game-talk {
  width: 100%;
  cursor: pointer;
  animation: game-card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-talk__box {
  position: relative;
  min-height: 110px;
  padding: 12px 12px 22px 84px;
  border: 3px solid var(--c-bl-03);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 #0f4bb0;
}

.game-talk__face {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 64px;
  height: 64px;
}

.game-talk__name {
  color: #ff8a00;
  font-size: 12px;
  font-weight: var(--fw-demibold);
}

.game-talk__text {
  margin-top: 2px;
  color: var(--c-text-primary);
  font-size: 14px;
  line-height: 1.6;
}

.game-talk__next {
  position: absolute;
  right: 12px;
  bottom: 6px;
  color: var(--c-bl-03);
  font-size: 12px;
  animation: game-bob 0.5s ease-in-out infinite alternate;
}

/* カウントダウン・タイムアップ */
.game-count {
  color: #fff;
  font-size: 72px;
  font-weight: var(--fw-demibold);
  text-shadow: -3px 0px 0 #0f4bb0, 3px 0px 0 #0f4bb0, 0px -3px 0 #0f4bb0, 0px 3px 0 #0f4bb0, -3px -3px 0 #0f4bb0, 3px -3px 0 #0f4bb0, -3px 3px 0 #0f4bb0, 3px 3px 0 #0f4bb0, 0 9px 0 #0f4bb0;
  animation: game-count 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-count--go,
.game-count--end {
  color: #ffec00;
  font-size: min(40px, calc((100vw - 70px) / 7.2)); /* 狭い画面でも7文字が1行に収まる大きさ */
  letter-spacing: -0.02em;
  white-space: nowrap; /* 「タイムアップ！」「プレイボール！」を1行で */
}

/* 結果 */
.game-end {
  width: 100%;
  padding: 16px 14px 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 0 #0f4bb0;
  text-align: center;
  animation: game-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-end__head {
  font-size: 26px;
  font-weight: var(--fw-demibold);
}

.game-end.is-clear .game-end__head {
  color: #ff8a00;
  text-shadow: 0 3px 0 #ffe27a;
}

.game-end.is-fail .game-end__head {
  color: #6b7a90;
}

.game-end__stars .game-star {
  font-size: 30px;
}

.game-end__stars .game-star.is-on {
  display: inline-block;
  animation: game-star 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-end__stars .game-star:nth-child(2) {
  animation-delay: 0.15s;
}

.game-end__stars .game-star:nth-child(3) {
  animation-delay: 0.3s;
}

.game-end__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 8px 0 4px;
  font-size: 13px;
  text-align: left;
}

.game-end__list dt {
  color: #666;
}

.game-end__list b {
  color: var(--c-bl-03);
  font-size: 22px;
}

.game-end__list em {
  margin-left: 6px;
  color: #ff3d6e;
  font-size: 11px;
  font-style: normal;
  font-weight: var(--fw-demibold);
}

.game-end__note {
  color: #888;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   博士の思考時間（条件を選んでいるあいだ。時間の流れが 1/3 になる）
   画面全体を少し暗い青紫に寄せ、ゆっくり脈打つ光の輪と、考え中のふきだしを出す
   -------------------------------------------------------------------------- */
.game-hud {
  position: relative;
  transition: background 0.4s ease;
}

.game.is-thinking .game-hud {
  background: linear-gradient(180deg, #4b3fc9 0%, #3a2fa8 100%);
}

.game.is-thinking .game-time__bar {
  background: repeating-linear-gradient(-45deg, #8fe9ff 0 6px, #5fc8ff 6px 12px);
  background-size: 34px 100%;
  animation: game-think-stripe 1.6s linear infinite;
}

.game-think-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #6458de;
  box-shadow: -10px 0 10px 2px #4b3fc9;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.game-think-badge b {
  margin-left: 4px;
  color: #8fe9ff;
  font-size: 12px;
}

.game.is-thinking .game-think-badge {
  opacity: 1;
  transform: none;
}

.game-lab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 78% 62%, transparent 0 22%, rgb(60 40 170 / 30%) 70%),
    repeating-radial-gradient(circle at 78% 62%, rgb(143 233 255 / 0%) 0 18px, rgb(143 233 255 / 18%) 19px 21px, rgb(143 233 255 / 0%) 22px 38px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.game.is-thinking .game-lab::after {
  opacity: 1;
  animation: game-think-ring 2.4s ease-in-out infinite;
}

.game.is-thinking .game-lab > :not(.game-hakase):not(.game-think):not(.game-result):not(.game-pops):not(.cutin) {
  filter: saturate(0.6) brightness(0.92);
  transition: filter 0.4s ease;
}

.game.is-thinking .game-hakase {
  z-index: 4;
  animation: game-think-sway 1.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* 考え中のふきだし（雲形） */
.game-think {
  position: absolute;
  top: 10px;
  right: 18px;
  z-index: 5;
  width: 112px;
  height: 64px;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 80% 100%;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.game.is-thinking .game-think {
  opacity: 1;
  transform: none;
}

.game-think__body {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #6a5cf0, 0 0 14px 2px rgb(143 233 255 / 70%);
  color: #4b3fc9;
  font-size: 13px;
  font-weight: var(--fw-demibold);
}

.game-think__body i {
  font-style: normal;
  animation: game-think-dot 1.2s ease-in-out infinite;
}

.game-think__body i:nth-child(2) {
  animation-delay: 0.2s;
}

.game-think__body i:nth-child(3) {
  animation-delay: 0.4s;
}

.game-think__dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #6a5cf0;
}

.game-think__dot:nth-child(1) {
  right: 22px;
  bottom: 2px;
  width: 8px;
  height: 8px;
}

.game-think__dot:nth-child(2) {
  right: 30px;
  bottom: 12px;
  width: 12px;
  height: 12px;
}

/* 思考時間中は、ふつうのふきだしを隠す（結果のふきだしと重ならないように） */
.game.is-thinking .game-bubble {
  opacity: 0;
}

@keyframes game-think-stripe {
  to { background-position: 34px 0; }
}

@keyframes game-think-ring {
  50% { filter: brightness(1.15); }
}

@keyframes game-think-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes game-think-dot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   アニメーション
   -------------------------------------------------------------------------- */
@keyframes game-sel-in {
  from { opacity: 0; transform: translateY(18px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

@keyframes game-wiggle {
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}

@keyframes game-peek {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(8deg); }
}

@keyframes game-tick {
  to { transform: rotate(360deg); }
}

@keyframes game-blink {
  50% { opacity: 0.4; }
}

@keyframes game-load {
  from { opacity: 0; transform: translate(80px, -40px) scale(1.6); }
  to { opacity: 1; transform: none; }
}

@keyframes game-glow {
  from { filter: brightness(0.9); }
  to { filter: brightness(1.4); }
}

@keyframes game-sweep {
  from { top: -4px; }
  to { top: 100%; }
}

@keyframes game-jump {
  30% { transform: translateY(-16px) rotate(-4deg); }
  60% { transform: translateY(0) rotate(2deg); }
  80% { transform: translateY(-5px); }
}

@keyframes game-shake {
  20%, 60% { transform: translateX(-4px) rotate(-2deg); }
  40%, 80% { transform: translateX(4px) rotate(2deg); }
}

@keyframes game-hop {
  50% { transform: translateY(-8px); }
}

@keyframes game-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@keyframes game-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes game-pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  35% { transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(1); }
}

@keyframes game-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes game-ready {
  50% { filter: brightness(1.08); transform: scale(1.02); }
}

@keyframes game-title-in {
  from { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

@keyframes game-bounce {
  50% { transform: translateY(-8px); }
}

@keyframes game-count {
  from { opacity: 0; transform: scale(2.2); }
  to { opacity: 1; transform: none; }
}

@keyframes game-star {
  from { opacity: 0; transform: scale(2.4) rotate(-30deg); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game *,
  .game *::before,
  .game *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.game.is-thinking .game-hud__stage {
  padding-right: 120px;
}

/* --------------------------------------------------------------------------
   ふりかえり（ステージ終了後）
   -------------------------------------------------------------------------- */
.game-btn--review {
  background: linear-gradient(180deg, #8fe9ff 0%, #4fc3f7 100%);
  box-shadow: 0 4px 0 #1f8fc4;
  color: #0b4a75;
}

.game-layer.is-review {
  align-items: flex-start;
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0%) 0 14px, rgb(255 255 255 / 5%) 14px 28px),
    #1f5fd0;
}

.game-rv {
  width: 100%;
}

.game-rv__ttl {
  margin-bottom: 8px;
  color: #fff;
  font-size: 22px;
  font-weight: var(--fw-demibold);
  text-align: center;
  text-shadow: 0 3px 0 #0f4bb0;
}

.game-rv__box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 #0f4bb0;
  animation: game-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-rv__box:nth-of-type(2) { animation-delay: 0.08s; }
.game-rv__box:nth-of-type(3) { animation-delay: 0.16s; }
.game-rv__box:nth-of-type(4) { animation-delay: 0.24s; }

.game-rv__h {
  margin-bottom: 6px;
  color: var(--c-bl-03);
  font-size: 13px;
  font-weight: var(--fw-demibold);
}

.game-rv__h--good {
  color: #2fae67;
}

.game-rv__h--bad {
  margin-top: 8px;
  color: #e5507f;
}

/* 条件ごとの正解率 */
.game-rv-bars li {
  display: grid;
  grid-template-columns: 76px 1fr 36px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}

.game-rv-bars__name {
  font-weight: var(--fw-demibold);
}

.game-rv-bars__track {
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #eef2f8;
}

.game-rv-bars__track span {
  display: block;
  height: 100%;
  border-radius: 6px;
  animation: game-bar 0.8s ease-out both;
  transform-origin: 0 50%;
}

.game-rv-bars .is-good .game-rv-bars__track span { background: linear-gradient(90deg, #6ddb98, #2fae67); }
.game-rv-bars .is-mid .game-rv-bars__track span { background: linear-gradient(90deg, #ffd45a, #f0a81c); }
.game-rv-bars .is-bad .game-rv-bars__track span { background: linear-gradient(90deg, #ff8db3, #e5507f); }

.game-rv-bars__num {
  color: #555;
  text-align: right;
}

.game-rv-bars .is-weak .game-rv-bars__name::after {
  content: "にがて";
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 6px;
  background: #e5507f;
  color: #fff;
  font-size: 9px;
}

/* 時間の使い方 */
.game-rv-time {
  display: flex;
  height: 22px;
  overflow: hidden;
  border-radius: 11px;
  background: #eef2f8;
}

.game-rv-time__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
  white-space: nowrap;
  animation: game-bar 0.8s ease-out both;
  transform-origin: 0 50%;
}

.game-rv-time__seg--think { background: #6c47dc; }
.game-rv-time__seg--scan { background: #2a92e6; }
.game-rv-time__seg--other { background: #9aa7b8; }

.game-rv-time__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 6px;
  font-size: 10.5px;
}

.game-rv-time__legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 2px;
  vertical-align: 0;
}

.game-rv-time__legend .is-think::before { background: #6c47dc; }
.game-rv-time__legend .is-scan::before { background: #2a92e6; }
.game-rv-time__legend .is-other::before { background: #9aa7b8; }

/* 博士のコメント */
.game-rv__box--talk {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.game-rv__box--talk > img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.game-rv__list li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.55;
}

.game-rv__list li + li {
  margin-top: 3px;
}

.game-rv__list li::before {
  position: absolute;
  left: 0;
  font-weight: var(--fw-demibold);
}

.game-rv__h--good + .game-rv__list li::before {
  content: "◎";
  color: #2fae67;
}

.game-rv__h--bad + .game-rv__list li::before {
  content: "！";
  color: #e5507f;
}

/* 1個ずつの記録 */
.game-rv-log__item {
  display: grid;
  grid-template-columns: 18px 40px 1fr;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
}

.game-rv-log__item + .game-rv-log__item {
  border-top: 1px dashed #e3e8ef;
}

.game-rv-log__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1761d8;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
}

.game-rv-log__item.is-perfect .game-rv-log__no {
  background: #ffc400;
  color: #8a3b00;
}

.game-rv-log__pic {
  width: 40px;
  height: 32px;
  border-radius: 8px;
  background: #f4f8fd;
}

.game-rv-log__pic svg {
  width: 100%;
  height: 100%;
}

.game-rv-log__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.game-rv-log__head {
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
}

.game-rv-log__head em {
  flex: none;
  color: #ff8a00;
  font-size: 11px;
  font-style: normal;
  font-weight: var(--fw-demibold);
}

.game-rv-log__item.is-perfect .game-rv-log__head em {
  color: #e5507f;
}

.game-rv-log__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.game-rv-chip {
  display: inline-flex;
  gap: 2px;
  align-items: baseline;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: var(--fw-demibold);
  line-height: 1.5;
}

.game-rv-chip i {
  font-size: 9px;
  font-style: normal;
  font-weight: normal;
  opacity: 0.8;
}

.game-rv-chip s {
  margin-left: 1px;
  text-decoration: none;
}

.game-rv-chip.is-ok { background: #dcf5e6; color: #1d8a4e; }
.game-rv-chip.is-near { background: #fff1c7; color: #a06a00; }
.game-rv-chip.is-ng { background: #ffe0ea; color: #c4325f; }

.game-rv-log__think {
  color: #888;
  font-size: 10px;
}

.game-rv__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
  color: #666;
  font-size: 10px;
}

@keyframes game-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   カットイン（js/cutin.js）：斜めの帯に、背景つきのキャラクターが飛びこむ
   -------------------------------------------------------------------------- */
.cutin {
  --ci-band: 184px;
  --ci-c1: #0b4fc4;
  --ci-c2: #39c1ff;
  --ci-ink: #06296b;
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}

.cutin--scanyan { --ci-c1: #f06a00; --ci-c2: #ffd000; --ci-ink: #6b2a00; }
.cutin--anko { --ci-c1: #e43f78; --ci-c2: #ffb36b; --ci-ink: #6b0f33; }
.cutin--robot { --ci-c1: #3a3f72; --ci-c2: #9a7bff; --ci-ink: #15173a; }

/* うしろを暗くする＋入りの白フラッシュ */
.cutin::before,
.cutin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cutin::before {
  background: linear-gradient(180deg, rgb(4 18 56 / 50%) 0 62%, rgb(4 18 56 / 12%) 86%);
  animation: cutin-fade 0.18s ease-out both;
}

.cutin::after {
  z-index: 3;
  background: #fff;
  opacity: 0;
  animation: cutin-flash 0.32s ease-out;
}

.cutin.is-out::before {
  animation: cutin-fade 0.22s ease-in reverse both;
}

/* 帯 */
.cutin__band {
  position: absolute;
  top: 50%;
  left: -12%;
  width: 124%;
  height: var(--ci-band);
  overflow: hidden;
  translate: 0 -50%;
  rotate: -6deg;
  box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff, 0 -9px 0 var(--ci-c2), 0 9px 0 var(--ci-c2), 0 0 0 12px rgb(0 0 0 / 20%);
  animation: cutin-open 0.2s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

.cutin--right .cutin__band {
  rotate: 6deg;
}

.cutin.is-out .cutin__band {
  animation: cutin-close 0.22s ease-in both;
}

/* 背景：キャラクターの色＋研究所の景色（流れる） */
.cutin__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--ci-c1) 74%, transparent), color-mix(in srgb, var(--ci-c2) 48%, transparent)),
    url("/ctlab/img/bg-lg.png?v=2026110602");
  background-color: var(--ci-c1);
  background-position: 0 0, 0 64%;
  background-size: 100% 100%, auto 340%;
  animation: cutin-pan 1.6s linear both;
}

.cutin--right .cutin__bg {
  background-image:
    linear-gradient(270deg, color-mix(in srgb, var(--ci-c1) 74%, transparent), color-mix(in srgb, var(--ci-c2) 48%, transparent)),
    url("/ctlab/img/bg-lg.png?v=2026110602");
  animation-name: cutin-pan-r;
}

/* CTのリング（キャラクターのうしろで回る） */
.cutin__ring {
  position: absolute;
  top: 50%;
  left: 21%;
  width: calc(var(--ci-band) * 1.5);
  aspect-ratio: 1;
  margin: calc(var(--ci-band) * -0.75) 0 0 calc(var(--ci-band) * -0.75);
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 255 255 / 55%) 0 7deg, rgb(255 255 255 / 10%) 7deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 51% 64%, transparent 65% 72%, #000 73% 75%, transparent 76%);
  mask: radial-gradient(circle, transparent 50%, #000 51% 64%, transparent 65% 72%, #000 73% 75%, transparent 76%);
  animation: cutin-ring 2.4s linear infinite;
}

.cutin--right .cutin__ring {
  right: 21%;
  left: auto;
  margin: calc(var(--ci-band) * -0.75) calc(var(--ci-band) * -0.75) 0 0;
  animation-direction: reverse;
}

/* 流れる線 */
.cutin__speed {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='92'%3E%3Cg stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M10 8h90' stroke-width='2' opacity='.8'/%3E%3Cpath d='M150 22h140' stroke-width='3' opacity='.55'/%3E%3Cpath d='M40 40h60' stroke-width='2' opacity='.7'/%3E%3Cpath d='M190 56h110' stroke-width='2' opacity='.8'/%3E%3Cpath d='M20 72h150' stroke-width='3' opacity='.45'/%3E%3Cpath d='M230 86h70' stroke-width='2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") repeat;
  animation: cutin-speed 0.32s linear infinite;
}

.cutin--right .cutin__speed {
  animation-direction: reverse;
}

/* キャラクター */
.cutin__chara {
  position: absolute;
  top: var(--ci-y);
  left: calc(12% + var(--ci-x));
  height: var(--ci-h);
  animation: cutin-chara 1.6s linear both;
}

.cutin__chara img {
  display: block;
  width: auto;
  height: 100%;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(6px 6px 0 rgb(0 0 0 / 22%));
}

.cutin--right .cutin__chara {
  right: calc(12% + var(--ci-x));
  left: auto;
  animation-name: cutin-chara-r;
}

.cutin--right .cutin__chara img {
  transform: scaleX(-1);
}

/* セリフ・技の名前 */
.cutin__text {
  position: absolute;
  top: 50%;
  right: 14%;
  left: 47%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  translate: 0 -50%;
}

.cutin--right .cutin__text {
  right: 47%;
  left: 14%;
  align-items: flex-end;
  text-align: right;
}

.cutin__name {
  padding: 2px 10px;
  background: #fff;
  color: var(--ci-c1);
  font-size: 10px;
  font-weight: var(--fw-demibold);
  letter-spacing: 0.06em;
  transform: skewX(-12deg);
  animation: cutin-slide 0.26s 0.08s ease-out both;
}

.cutin__line {
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-demibold);
  line-height: 1.35;
  white-space: nowrap;
  text-shadow:
    -2px 0 0 var(--ci-ink), 2px 0 0 var(--ci-ink), 0 -2px 0 var(--ci-ink), 0 2px 0 var(--ci-ink),
    -2px -2px 0 var(--ci-ink), 2px -2px 0 var(--ci-ink), -2px 2px 0 var(--ci-ink), 2px 2px 0 var(--ci-ink);
  animation: cutin-slide 0.28s 0.14s ease-out both;
}

.cutin__word {
  margin-top: 2px;
  color: #ffec00;
  font-size: 21px;
  font-style: italic;
  font-weight: var(--fw-demibold);
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    -3px 0 0 var(--ci-ink), 3px 0 0 var(--ci-ink), 0 -3px 0 var(--ci-ink), 0 3px 0 var(--ci-ink),
    -2px -2px 0 var(--ci-ink), 2px -2px 0 var(--ci-ink), -2px 2px 0 var(--ci-ink), 2px 2px 0 var(--ci-ink),
    0 6px 0 rgb(0 0 0 / 25%);
  transform: skewX(-10deg);
  animation: cutin-stamp 0.34s 0.36s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.cutin--right .cutin__word {
  transform: skewX(10deg);
}

/* 入りのスキャン光 */
.cutin__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  background: linear-gradient(90deg, transparent, rgb(200 255 255 / 95%), transparent);
  box-shadow: 0 0 18px #7ff3ff;
  animation: cutin-scan 0.5s 0.1s ease-out both;
}

.cutin--right .cutin__scan {
  animation-name: cutin-scan-r;
}

@keyframes cutin-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cutin-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes cutin-open { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cutin-close {
  0% { transform: scaleY(1); filter: brightness(1); }
  40% { transform: scaleY(1.08); filter: brightness(1.6); }
  100% { transform: scaleY(0); filter: brightness(2); }
}
@keyframes cutin-pan { from { background-position: 0 0, 0 64%; } to { background-position: 0 0, -260px 64%; } }
@keyframes cutin-pan-r { from { background-position: 0 0, -260px 64%; } to { background-position: 0 0, 0 64%; } }
@keyframes cutin-ring { to { transform: rotate(360deg); } }
@keyframes cutin-speed { from { background-position: 0 0; } to { background-position: -320px 0; } }
@keyframes cutin-chara {
  0% { transform: translateX(-90%); }
  16% { transform: translateX(6%); }
  24% { transform: translateX(0); }
  100% { transform: translateX(7%); }
}
@keyframes cutin-chara-r {
  0% { transform: translateX(90%); }
  16% { transform: translateX(-6%); }
  24% { transform: translateX(0); }
  100% { transform: translateX(-7%); }
}
@keyframes cutin-slide { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cutin-stamp { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } }
@keyframes cutin-scan { from { translate: -40px 0; } to { translate: 480px 0; } }
@keyframes cutin-scan-r { from { translate: 480px 0; } to { translate: -40px 0; } }

/* 思考時間：研究所の背景に出しっぱなしにする帯（スキャン大作戦） */
.cutin--stay {
  --ci-band: 150px;
  z-index: 2;
  cursor: default;
  pointer-events: none;
}

.cutin--stay::before {
  background: rgb(40 24 140 / 30%);
}

.cutin--stay::after {
  display: none;
}

.cutin--stay .cutin__band {
  animation-duration: 0.26s;
}

.cutin--stay .cutin__bg {
  animation: cutin-pan 7s linear infinite alternate;
}

.cutin--stay.cutin--right .cutin__bg {
  animation-name: cutin-pan-r;
}

.cutin--stay .cutin__chara {
  animation: cutin-in-r 0.45s ease-out both, cutin-float 2.4s 0.45s ease-in-out infinite;
}

.cutin--stay .cutin__text {
  right: 50%;
  left: 13%;
  align-items: flex-start;
  text-align: left;
}

.cutin--stay .cutin__word {
  font-size: 17px;
  transform: skewX(-10deg);
}

.cutin--stay .cutin__line {
  font-size: 13px;
}

/* 帯の上にスキャにゃんを出す。小さい博士と考え中のふきだしは帯の博士にまかせる */
.game.has-thinkcut .game-cat {
  z-index: 3;
}

.game-lab::after {
  z-index: 1;
}

.game.has-thinkcut .game-hakase,
.game.has-thinkcut .game-think {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@keyframes cutin-in-r {
  0% { transform: translateX(90%); }
  60% { transform: translateX(-5%); }
  100% { transform: translateX(0); }
}

@keyframes cutin-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -4px; rotate: -1.5deg; }
}

/* 思考時間のカットイン：勢いではなく「集中している」雰囲気
   （落ちついた深い青・ゆっくり寄っていく博士・頭のまわりに集まる集中線） */
.cutin--think {
  --ci-c1: #0c2f7a;
  --ci-c2: #1e8fd6;
  --ci-ink: #061a4a;
}

.cutin--think::before {
  background: rgb(6 26 74 / 30%);
  animation: cutin-fade 0.5s ease-out both;
}

.cutin--think .cutin__band {
  rotate: 3deg;
  box-shadow: 0 -3px 0 #8fe9ff, 0 3px 0 #8fe9ff, 0 -6px 0 rgb(255 255 255 / 85%), 0 6px 0 rgb(255 255 255 / 85%);
  animation: cutin-think-open 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.cutin--think.is-out .cutin__band {
  animation: cutin-think-close 0.22s ease-in both;
}

.cutin--think .cutin__bg {
  background-image:
    linear-gradient(270deg, color-mix(in srgb, var(--ci-c1) 82%, transparent), color-mix(in srgb, var(--ci-c2) 66%, transparent)),
    url("/ctlab/img/bg-lg.png?v=2026110602");
  filter: saturate(0.7);
  animation: cutin-pan-r 24s linear infinite alternate;
}

/* 流れる線のかわりに、ゆっくり走るスキャンのグリッド */
.cutin--think .cutin__speed {
  background:
    linear-gradient(90deg, rgb(143 233 255 / 14%) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgb(143 233 255 / 14%) 1px, transparent 1px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 30%) 60%, transparent 100%);
  mask: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 30%) 60%, transparent 100%);
  animation: cutin-think-grid 6s linear infinite;
}

.cutin--think .cutin__ring {
  opacity: 0.45;
  animation-duration: 12s;
}

/* 博士：ゆっくり寄っていく（カメラが近づく） */
.cutin--think .cutin__chara {
  animation: cutin-think-in 0.6s ease-out both, cutin-think-zoom 6s 0.6s ease-in-out infinite alternate;
  transform-origin: 70% 40%;
}

/* 頭のまわりに集まる集中線 */
.cutin__focus {
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(from 0deg at 76% 40%, rgb(255 255 255 / 0%) 0deg 4deg, rgb(255 255 255 / 60%) 4deg 5.2deg, rgb(255 255 255 / 0%) 5.2deg 9deg);
  -webkit-mask: radial-gradient(circle at 76% 40%, transparent 0 16%, rgb(0 0 0 / 60%) 30%, #000 50%);
  mask: radial-gradient(circle at 76% 40%, transparent 0 16%, rgb(0 0 0 / 60%) 30%, #000 50%);
  opacity: 0;
  animation: cutin-fade 0.6s 0.4s ease-out forwards, cutin-think-focus 2.4s 1s ease-in-out infinite;
  pointer-events: none;
}

.cutin--think .cutin__name {
  transform: none;
  color: #0c2f7a;
  animation: cutin-fade 0.5s 0.25s ease-out both;
}

.cutin--think .cutin__line {
  animation: cutin-slide 0.5s 0.35s ease-out both;
}

.cutin--think .cutin__word {
  color: #8fe9ff;
  font-size: 15px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-shadow: -1px 0 0 var(--ci-ink), 1px 0 0 var(--ci-ink), 0 -1px 0 var(--ci-ink), 0 1px 0 var(--ci-ink), 0 2px 0 var(--ci-ink);
  transform: none;
  animation: cutin-fade 0.6s 0.55s ease-out both;
}

.cutin--think .cutin__word i {
  display: inline-block;
  font-style: normal;
}

@keyframes cutin-think-open {
  from { opacity: 0; transform: scaleY(0.2); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes cutin-think-close {
  from { opacity: 1; transform: scaleY(1); }
  to { opacity: 0; transform: scaleY(0.4); }
}
@keyframes cutin-think-grid {
  to { background-position: -66px 0, 0 22px; }
}
@keyframes cutin-think-in {
  from { opacity: 0; transform: translateX(14%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cutin-think-zoom {
  from { scale: 1; }
  to { scale: 1.07; }
}
@keyframes cutin-think-focus {
  0%, 100% { opacity: 0.55; scale: 1.04; }
  50% { opacity: 1; scale: 1; }
}

/* --------------------------------------------------------------------------
   ゲーム中の「もどる」ボタン（HUD の左上）と、中断画面
   -------------------------------------------------------------------------- */
.game-hud__top {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.game-hud__top .game-hud__stage {
  flex: 1;
  min-width: 0;
}

.game-back {
  display: none;
  flex: none;
  gap: 3px;
  align-items: center;
  height: 22px;
  padding: 0 9px 0 6px;
  border: 1.5px solid rgb(255 255 255 / 70%);
  border-radius: 11px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-demibold);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.game-back span {
  width: 6px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.game.is-playing .game-back {
  display: inline-flex;
}

@media (hover: hover) {
  .game-back:hover {
    background: rgb(255 255 255 / 28%);
  }
}

.game-back:focus-visible {
  outline: 2px solid #ffec00;
  outline-offset: 2px;
}

.game-quit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: 280px;
  padding: 22px 18px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 #0f4bb0;
  text-align: center;
}

.game-quit__ttl {
  color: #1761d8;
  font-size: 20px;
  font-weight: var(--fw-demibold);
}

.game-quit__txt {
  margin-bottom: 6px;
  color: #555;
  font-size: 12px;
  line-height: 1.7;
}

/* 博士のメモ：右上の×（とじる） */
.game-memo__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 2px solid #c9b25a;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 0 #c9b25a;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.game-memo__close::before,
.game-memo__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2.5px;
  margin: -1.25px 0 0 -7px;
  border-radius: 2px;
  background: #7a5a00;
  transform: rotate(45deg);
}

.game-memo__close::after {
  transform: rotate(-45deg);
}

@media (hover: hover) {
  .game-memo__close:hover {
    transform: scale(1.1);
  }
}

.game-memo__close:active {
  box-shadow: 0 0 0 #c9b25a;
  transform: translateY(2px);
}

.game-memo__close:focus-visible {
  outline: 2px solid #1761d8;
  outline-offset: 2px;
}

/* ==========================================================================
   上級向けのしくみ：博士の集中力・つぎの製品・2つの素材・フィーバータイム
   ========================================================================== */

/* 博士の集中力ゲージ（上級ステージだけ表示） */
.game-focus {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
}

.game-focus[hidden] {
  display: none;
}

.game-focus__label {
  flex: none;
  width: 72px;
  font-size: 10px;
  font-weight: var(--fw-demibold);
  opacity: 0.9;
}

.game-focus__track {
  position: relative;
  flex: 1;
  height: 8px;
  margin-right: 36px;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(0 0 0 / 25%);
}

.game-focus__bar {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #b9a8ff, #8fe9ff);
  transform-origin: 0 50%;
  transition: transform 0.15s linear;
}

.game-focus.is-low .game-focus__bar {
  background: linear-gradient(90deg, #ff8a8a, #ff5a5a);
  animation: game-blink 0.6s steps(2) infinite;
}

.game-focus.is-up .game-focus__track {
  animation: game-focus-up 0.6s ease-out;
}

@keyframes game-focus-up {
  0% { box-shadow: 0 0 0 0 rgb(143 233 255 / 90%); }
  100% { box-shadow: 0 0 0 6px rgb(143 233 255 / 0%); }
}

/* 集中が切れたとき */
.game-focus__track::after {
  content: "集中切れ！";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd0d0;
  font-size: 8px;
  font-weight: var(--fw-demibold);
  line-height: 1;
  opacity: 0;
}

.game.is-focusout .game-focus__track {
  height: 12px;
  background: rgb(120 0 0 / 35%);
}

.game.is-focusout .game-focus__track::after {
  opacity: 1;
  animation: game-blink 0.8s steps(2) infinite;
}

.game-focus__label {
  white-space: nowrap;
}

/* つぎの製品 */
.game-next {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 6px 10px 0;
  padding: 3px 10px 3px 4px;
  border-radius: 10px;
  background: #eef4fc;
  color: #4a5a70;
  font-size: 11px;
}

.game-next[hidden] {
  display: none;
}

.game-next.is-in {
  animation: game-next-in 0.35s ease-out;
}

.game-next__label {
  flex: none;
  padding: 1px 7px;
  border-radius: 8px;
  background: #1761d8;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
}

.game-next__pic {
  flex: none;
  width: 34px;
  height: 26px;
  border-radius: 6px;
  background: #fff;
}

.game-next__pic svg {
  display: block;
  width: 100%;
  height: 100%;
}

.game-next b {
  overflow: hidden;
  font-weight: var(--fw-demibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-next em {
  flex: none;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 8px;
  background: #ffe3cf;
  color: #c4510a;
  font-size: 9px;
  font-style: normal;
  font-weight: var(--fw-demibold);
}

@keyframes game-next-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* 2つの素材の製品カード */
.game-card.is-mix {
  border-color: #ff9a5a;
  background:
    repeating-linear-gradient(-45deg, rgb(255 154 90 / 0%) 0 10px, rgb(255 154 90 / 8%) 10px 20px),
    #fff6ec;
}

.game-card__mix {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #ff7a3d;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  vertical-align: 2px;
}

.game-card__target {
  color: #d6400a;
  font-weight: var(--fw-demibold);
}

/* 博士のメモ：2つの素材 */
.game-memo__card--mix {
  --memo-c: #e5503a;
  --memo-shadow: #f8cfc5;
}

/* あそびかた：フィーバー */
.game-mini--fever {
  flex-direction: column;
  background: linear-gradient(135deg, #ff5a8a, #ffb02e);
}

.game-mini--fever em {
  color: #fff;
  font-size: 14px;
  font-style: italic;
  font-weight: var(--fw-demibold);
  text-shadow: 0 2px 0 #c43a5a;
  animation: game-fever-pulse 0.8s ease-in-out infinite;
}

.game-mini--fever i {
  position: relative;
  width: 60px;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(0 0 0 / 25%);
}

.game-mini--fever i span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #b9a8ff, #8fe9ff);
  transform-origin: 0 50%;
  animation: game-mini-time 3s linear infinite;
}

/* フィーバータイム */
.game-fever-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff;
  color: #ff3d6e;
  font-size: 11px;
  font-style: italic;
  font-weight: var(--fw-demibold);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.game-fever-badge b {
  color: #ff8a00;
  font-size: 13px;
}

.game-fever-badge span {
  position: relative;
  width: 38px;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: #ffe0e8;
}

.game-fever-badge span i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff3d6e, #ffb02e);
  transform-origin: 0 50%;
}

.game.is-fever .game-fever-badge {
  opacity: 1;
  transform: none;
  animation: game-fever-pulse 0.8s ease-in-out infinite;
}

.game.is-fever .game-think-badge {
  opacity: 0;
}

.game.is-fever .game-hud,
.game.is-fever.is-thinking .game-hud {
  background: linear-gradient(110deg, #ff3d6e, #ff8a00, #ffcf1a, #ff8a00, #ff3d6e);
  background-size: 300% 100%;
  animation: game-fever-hud 2s linear infinite;
}

.game.is-fever .game-lab {
  background:
    radial-gradient(circle, rgb(255 255 255 / 95%) 0 1.5px, transparent 2px) 0 0 / 34px 34px,
    radial-gradient(circle, rgb(255 200 0 / 85%) 0 1.5px, transparent 2px) 17px 17px / 34px 34px,
    linear-gradient(180deg, #ffe3ec 0%, #fff0d6 64%, #ffffff 66%, #ffe9d0 68%, #ffb08a 68.5%, #ffd2b0 100%);
  box-shadow: inset 0 0 0 3px #ff8a00;
  animation: game-fever-stars 1.6s linear infinite;
}

.game.is-fever .game-scan:not(:disabled) {
  background: linear-gradient(180deg, #ff6b8e 0%, #ff3d6e 100%);
  box-shadow: 0 4px 0 #b8204a;
  color: #fff;
}

@keyframes game-fever-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}

@keyframes game-fever-hud {
  to { background-position: 300% 0; }
}

@keyframes game-fever-stars {
  to { background-position: 0 34px, 17px 51px, 0 0; }
}

/* フィーバー中は、思考時間の暗い演出をやめる */
.game.is-fever .game-lab::after {
  opacity: 0 !important;
}

.game.is-fever.is-thinking .game-lab > * {
  filter: none !important;
}

/* ゲームの下のボタン（スタート画面に戻る／スペシャルにもどる） */
.gamepage__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 343px;
}

.gamepage__links .btn {
  cursor: pointer;
}

button.btn {
  border: 0;
  font-family: inherit;
}

button.btn.btn--secondary {
  border: 2px solid var(--btn-secondary-stroke);
}

/* --------------------------------------------------------------------------
   結果のシェア（js/share.js）
   -------------------------------------------------------------------------- */
.game-share {
  margin: 10px 0 2px;
  padding: 8px 8px 10px;
  border-radius: 14px;
  background: #eef5ff;
}

.game-share__label {
  color: var(--c-bl-03);
  font-size: 12px;
  font-weight: var(--fw-demibold);
}

.game-share__btns {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}

.game-share__btn {
  display: inline-flex;
  flex: 1 1 0;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--fw-demibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.game-share__btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.game-share__btn:active {
  transform: translateY(2px);
}

.game-share__btn--x {
  background: #000;
  box-shadow: 0 3px 0 #444;
}

.game-share__btn--line {
  background: #06c755;
  box-shadow: 0 3px 0 #04913e;
}

.game-share__btn--more,
.game-share__btn--copy {
  background: #2f74e6;
  box-shadow: 0 3px 0 #0f4bb0;
}

.game-share__btn.is-done {
  background: #ff8a00;
  box-shadow: 0 3px 0 #c76a00;
}

@media (hover: hover) {
  .game-share__btn:hover {
    filter: brightness(1.12);
  }
}

/* 結果カードが枠より高いときも上下が切れないように（中央寄せのまま、はみ出たらスクロール） */
.game-layer.is-end {
  align-items: flex-start;
}

.game-layer.is-end > .game-end {
  margin: auto 0;
}

/* ==========================================================================
   2026/11 画面デザインの変更（スキャン大作戦）— 参考画像（Figma）に合わせた寸法
   ・「つぎ」の製品は HUD のスコアの右
   ・スキャにゃんは台車を押して登場。製品は台車の上の丸い台にのせる
   ・思考時間のカットイン：青い帯＋「シンキングタイム！」＋紺のふきだし＋考える博士
   ・はかせメモは水色のタイル＋ノートのアイコン
   ========================================================================== */

/* ---- HUD：スコアの右に「つぎ」 ---- */
.game-hud {
  padding-bottom: 6px;
}

.game-hud__row {
  position: relative;
  align-items: center;
  margin-top: 9px;
}

.game-hud__row .game-score {
  flex: none;
  white-space: nowrap;
}

.game-hud__row .game-next {
  flex: 0 1 167px;
  gap: 5px;
  min-width: 118px;
  height: 34px;
  margin: 0 -2px 0 0;
  padding: 0 6px;
  border: 2px solid #f4f9ff;
  border-radius: 2px;
  background: #eef3fc;
  color: #657488;
  font-size: 11px;
}

.game-hud__row .game-next__label {
  display: grid;
  place-items: center;
  width: 35px;
  height: 20px;
  padding: 0;
  border-radius: 7px;
  background: #3d61d8;
  font-size: 10px;
}

.game-hud__row .game-next__pic {
  width: 35px;
  height: 30px;
  border-radius: 5px;
  background: #fff;
}

.game-hud__row .game-next b {
  min-width: 0;
  margin-left: 3px;
  font-weight: var(--fw-demibold);
}

.game-hud__row .game-next__label,
.game-hud__row .game-next__pic {
  flex: none;
}

.game-hud__row .game-next em {
  display: none;
}

/* コンボは「つぎ」の上にシールのように重ねる */
.game-hud__row .game-combo {
  position: absolute;
  top: -14px;
  right: 4px;
  z-index: 2;
  font-size: 13px;
  white-space: nowrap;
  transform: rotate(-4deg);
  pointer-events: none;
}

/* ---- 研究所：台車のスキャにゃん ---- */
/* 研究所の中の位置・大きさは、横幅 337px のときの値。幅がちがう画面では cqw（研究所の幅に対する割合）で同じ比率にする */
.game-lab {
  container-type: inline-size;
  /* 2026/11/07: スマホでゲーム画面を横に広げたときに、スキャにゃんなどだけが大きくならないよう、PC（横幅 337px）の大きさで止める。
     右側にあるもの（窓・考える博士など）は右からの位置にしている */
  --u: min(1cqw, 3.37px);
}

.game-cat {
  bottom: 3px;
  left: 4px;
  left: calc(1.19 * var(--u));
  width: 217px;
  width: calc(64.4 * var(--u));
}

/* 製品をのせる丸い台（黄色いふち） */
.game-carry {
  top: auto;
  bottom: 25px;
  bottom: calc(7.42 * var(--u));
  left: 0;
  display: grid;
  place-items: center;
  width: 124px;
  width: calc(36.8 * var(--u));
  height: 124px;
  height: calc(36.8 * var(--u));
  border: 4px solid #f5d518;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff calc(100% - 9px), #faf0b2 calc(100% - 8px));
  animation: none;
}

.game-carry__svg {
  width: 112px;
  width: calc(33.2 * var(--u));
  height: 84px;
  height: calc(24.9 * var(--u));
  filter: none;
}

/* 重なり順（思考時間）：帯 → 製品の丸い台 → スキャにゃん・台車 → タイトル・ふきだし
   カットインを1枚のまとまり（z-index）にせず、帯とタイトルを研究所の中で別々に重ねる */
.cutin--think {
  z-index: auto;
}

.cutin--think::before,
.cutin--think .cutin__band {
  z-index: 1;
}

.cutin--think .cutin__line,
.cutin--think .cutin__word {
  z-index: 3;
}

.game.has-thinkcut .game-cat {
  z-index: 2;
}

/* 丸い台はスキャにゃん・台車の画像より後ろ */
.game-cat img {
  position: relative;
  z-index: 1;
}

.game-carry {
  z-index: 0;
}

/* 帯の前に出ているスキャにゃんは暗くしない */
.game.has-thinkcut .game-lab > .game-cat {
  filter: none !important;
}

/* 思考時間の帯が出ているあいだは、研究所の光の輪は出さない */
.game.has-thinkcut .game-lab::after {
  opacity: 0;
  animation: none;
}

/* ---- 思考時間のカットイン ---- */
.cutin--think::before {
  background: rgb(40 30 120 / 44%);
  animation: cutin-fade 0.3s ease-out both;
}

/* 帯：研究所いっぱいの箱を、右下がりの帯の形に切り抜く（水色のふち＋青のグラデーション） */
.cutin--think .cutin__band {
  inset: 0;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  background: #8fe9ff;
  box-shadow: none;
  translate: none;
  rotate: none;
  clip-path: polygon(0 22px, 100% 38.7px, 100% 194.9px, 0 178.2px);
  animation: cutin-think-wipe 0.3s ease-out both;
}

.cutin--think .cutin__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4e83ff 0%, #485aff 100%);
  clip-path: polygon(0 24px, 100% 40.7px, 100% 192.9px, 0 176.2px);
}

.cutin--think.is-out .cutin__band {
  animation: cutin-fade 0.2s ease-in reverse both;
}

/* 博士の頭のまわりの集中線（js/cutin.js の SVG。先の丸い線が右回りにゆっくり回る） */
.cutin--think .cutin__focus {
  inset: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  clip-path: polygon(0 24px, 100% 40.7px, 100% 192.9px, 0 176.2px);
  opacity: 1;
  animation: cutin-fade 0.5s 0.2s ease-out both;
}

.cutin--think .cutin__focus svg {
  position: absolute;
  top: -18px;
  left: 125px;
  left: auto;
  right: calc(24.3 * var(--u) - 130px);
  width: 260px;
  height: 260px;
  overflow: visible;
  animation: cutin-rays-spin 14s linear infinite;
}

.cutin--think .cutin__focus path {
  fill: none;
  stroke: #67cdff;
  stroke-width: 3.5;
  stroke-linecap: round;
}

@keyframes cutin-rays-spin {
  to { transform: rotate(360deg); }
}

/* 考える博士（帯の形で切れる） */
.cutin--think .cutin__chara {
  top: 34px;
  right: auto;
  left: 201px;
  left: auto;
  right: calc(-1.4 * var(--u));
  width: 141px;
  width: calc(41.8 * var(--u));
  height: auto;
  rotate: none;
  /* 帯の内側（水色のふちの内側）で切る。座標は博士の箱の左上から */
  clip-path: polygon(-300px -14.9px, 300px 14.8px, 300px 167.1px, -300px 137.3px);
  animation: cutin-fade 0.35s 0.05s ease-out both;
}

.cutin--think .cutin__chara img,
.cutin--right.cutin--think .cutin__chara img {
  width: 100%;
  height: auto;
  transform: none;
  filter: drop-shadow(2.5px 0 0 #4539bd) drop-shadow(-2.5px 0 0 #4539bd) drop-shadow(0 2.5px 0 #4539bd) drop-shadow(0 -2.5px 0 #4539bd);
}

/* 「シンキングタイム！」：文字の形は画像（img/game/thinking-title.png。水色の文字・紫と紺の2重のふち）。
   文字は読み上げ用に残し、見た目は画像にする */
.cutin--think .cutin__word {
  position: absolute;
  top: 4px;
  left: 3px;
  z-index: 3;
  display: block;
  width: 160px;
  width: calc(47.5 * var(--u));
  height: auto;
  aspect-ratio: 160 / 87.5;
  margin: 0;
  overflow: hidden;
  background: url("/ctlab/img/game/thinking-title.png") no-repeat 0 0 / 100% 100%;
  color: transparent;
  font-size: 1px;
  text-shadow: none;
  transform: none;
  animation: cutin-stamp 0.34s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

/* 博士のふきだし：紺の地に金色の文字 */
.cutin--think .cutin__line {
  position: absolute;
  top: 5px;
  right: 2px;
  left: 145px;
  left: calc(100% - 57 * var(--u));
  z-index: 2;
  height: 26px;
  padding: 0 0 0 26px;
  border-radius: 0 13px 13px 0;
  background: #31298b;
  box-shadow: none;
  color: #f4c454;
  font-size: 14px;
  font-size: min(14px, calc(4.15 * var(--u)));
  font-style: italic;
  font-weight: var(--fw-demibold);
  line-height: 26px;
  text-shadow: none;
  white-space: nowrap;
  rotate: none;
  animation: cutin-slide 0.35s 0.2s ease-out both;
}

.cutin--think .cutin__line::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 10px;
  width: 14px;
  height: 15px;
  border: 0;
  background: #31298b;
  clip-path: polygon(0 0, 100% 0, 30% 100%);
}

@keyframes cutin-think-wipe {
  from { opacity: 0; transform: scaleY(0.3); }
  to { opacity: 1; transform: none; }
}

/* ---- 製品カード ---- */
.game-card {
  gap: 12px;
  min-height: 0;
  height: 98px;
  margin: 6px 8px 0;
  padding: 0 9px;
  border: 4px solid #f5d518;
  border-radius: 12px;
  background: #fdfbe0;
  box-shadow: inset 0 0 0 1px #f6d84d;
}

.game-card__pic {
  width: 71px;
  height: 65px;
  border-radius: 6px;
}

.game-card__name {
  font-size: 16px;
}

.game-card__tags {
  gap: 1px;
  font-size: 11.5px;
}

.game-card__tags span {
  min-width: 76px;
}

/* ---- 条件ボタン ---- */
.game-params {
  gap: 9px;
  padding: 7px 9.5px 0 9px;
}

.game-param {
  gap: 0;
}

.game-param__name {
  width: 64.5px;
  font-size: 12px;
}

.game-param__opts {
  gap: 5px;
}

.game-opt {
  min-height: 47px;
  padding: 3px 2px 0;
  border-width: 1.5px;
  border-radius: 8px;
}

.game-opt b {
  font-size: 16px;
}

.game-opt small {
  font-size: 9.5px;
}

.game-opt.is-on {
  border-color: #3b59d7;
  background: #3b59d7;
  box-shadow: 0 4px 0 #2a3aa6;
}

/* ---- はかせメモ（水色のタイル）とスキャンボタン ---- */
.game-actions {
  gap: 8px;
  align-items: stretch;
  padding: 13px 11px 14px 9px;
}

.game-memo-btn {
  position: relative;
  flex: none;
  width: 92px;
  height: 46px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #67cdff;
  transition: transform 0.12s ease;
}

.game-memo-btn img {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 52px;
  height: auto;
  translate: -50% 0;
  transition: transform 0.15s ease;
}

.game-memo-btn span {
  position: absolute;
  right: -2px;
  bottom: -6px;
  left: -2px;
  color: #2563eb;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}

@media (hover: hover) {
  .game-memo-btn:hover img {
    transform: rotate(-4deg) translateY(-2px);
  }
}

.game-memo-btn:active {
  transform: translateY(2px);
}

.game-scan {
  height: 51px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8ee3a 0%, #f6d81c 55%, #f4c505 100%);
  box-shadow: 0 4px 0 #d68a00;
  font-size: 22px;
}

.game-scan:active:not(:disabled) {
  box-shadow: 0 1px 0 #d68a00;
}

/* ---- あそびかたの小さな絵（台車のスキャにゃん） ---- */
.game-mini--carry img {
  left: 4px;
  width: 76px;
  animation: none;
}

.game-mini--carry span {
  top: auto;
  bottom: 12px;
  left: 10px;
  width: 30px;
  height: 22px;
}

/* ---- 製品カード：条件（素材・大きさ・見たいところ）を大きく ---- */
.game-card__body {
  align-self: center;
}

.game-card__name {
  font-size: 15px;
  line-height: 1.25;
}

.game-card__tags {
  gap: 0;
  margin-top: 3px;
  color: #1f2a3d;
  font-size: 14px;
  font-weight: var(--fw-demibold);
  line-height: 1.38;
}

.game-card__tags span {
  min-width: 88px;
  margin-right: 2px;
  color: #8a7a2a;
  font-size: 12.5px;
  font-weight: var(--fw-regular);
}

/* ---- 研究所の装置と博士（スキャにゃん・台車に合わせて大きく） ---- */
.game-nanotom {
  bottom: 46px;
  left: 0;
  width: 210px;
  height: 157.5px;
}

.game-hakase {
  right: -2px;
  bottom: 6px;
  width: 112px;
}

.game-lab::before {
  left: 226px;
}

/* ---- スキャン中：窓の中で製品が回転台にのって1回転・X線ランプ・装置の表示 ---- */
.game-lab.is-scanning .game-beam,
.game-lab.is-scanning .game-beam::after {
  display: none;
}

/* 装置の窓（nanotom の画像の窓の位置） */
.game-slot {
  top: 10.5%;
  left: 43.5%;
  width: 32%;
  height: 50%;
  overflow: hidden;
  border-radius: 3px;
}

/* 窓のガラス（中が少し見える）。スキャン中は中の照明がつく */
.game-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0%) 28%, rgb(255 255 255 / 45%) 36%, rgb(255 255 255 / 0%) 44%),
    rgb(150 162 178 / 30%);
  pointer-events: none;
}

.game-slot:empty::after {
  display: none;
}

.game-lab.is-scanning .game-slot {
  background: radial-gradient(ellipse at 50% 30%, rgb(255 253 240 / 70%), rgb(255 253 240 / 0%) 70%);
}

/* 回転台 */
.game-slot__stage {
  position: absolute;
  bottom: 8%;
  left: 20%;
  width: 60%;
  height: 9%;
  border-radius: 50%;
  background: linear-gradient(180deg, #a3a9b3, #6f7682);
  box-shadow: 0 2px 0 #565c66;
}

.game-slot__svg {
  position: absolute;
  bottom: 14%;
  left: 12%;
  width: 76%;
  height: 62%;
}

.game-lab.is-scanning .game-slot__svg {
  animation: game-turn var(--scan-sec, 2.8s) linear both;
}

@keyframes game-turn {
  from { transform: perspective(160px) rotateY(0deg); }
  to { transform: perspective(160px) rotateY(360deg); }
}

/* X線ランプ（右上の赤いランプ）はゆっくり点滅 */
.game-lab.is-scanning .game-nanotom > img:first-of-type {
  animation-duration: 0.9s;
}

.game-lab.is-scanning .game-nanotom > img + img {
  animation-duration: 0.9s;
}

/* 装置の表示（左上のパネル）：ふだんは READY、スキャン中は回転の角度と進みぐあい */
@property --scan-deg {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.game-lcd {
  position: absolute;
  top: 24%;
  left: 9%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  width: 30%;
  height: 15%;
  padding: 0 5px;
  white-space: nowrap;
  border: 2px solid #c9ced6;
  border-radius: 4px;
  background: #16222f;
  color: #7dffa8;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.game-lcd b::before {
  content: "READY";
}

.game-lcd i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgb(125 255 168 / 20%);
  overflow: hidden;
}

.game-lcd i::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: #7dffa8;
}

.game-lab.is-scanning .game-lcd b {
  counter-reset: scandeg var(--scan-deg);
  animation: game-lcd-deg var(--scan-sec, 2.8s) linear both;
}

.game-lab.is-scanning .game-lcd b::before {
  content: "SCAN " counter(scandeg) "°";
}

.game-lab.is-scanning .game-lcd i::before {
  animation: game-lcd-bar var(--scan-sec, 2.8s) linear both;
}

@keyframes game-lcd-deg {
  from { --scan-deg: 0; }
  to { --scan-deg: 360; }
}

@keyframes game-lcd-bar {
  from { width: 0; }
  to { width: 100%; }
}

/* 幅のせまいスマホ（〜359px）では、製品カードの条件が折り返さないよう少し小さく */
@media (max-width: 359px) {
  .game-card__pic {
    width: 56px;
  }

  .game-card__tags {
    font-size: 12.5px;
  }

  .game-card__tags span {
    min-width: 76px;
    font-size: 11.5px;
  }
}

/* ---- 製品：運んでいるあいだは台車の上にのせ、到着したらポンと浮かんで黄色い丸い台が出る ---- */
.game-carry {
  border: 0;
  background: none;
}

.game-carry::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid #f5d518;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff calc(100% - 9px), #faf0b2 calc(100% - 8px));
  opacity: 0;
  transform: scale(0.2);
}

.game-carry__svg {
  position: relative;
  z-index: 1;
  /* 台車の荷台の上（丸い台の中心から右下へずらし、小さく） */
  transform: translate(6px, 32px) scale(0.85);
  transform: translate(calc(1.8 * var(--u)), calc(9.6 * var(--u))) scale(0.85);
}

.game-cat.is-arrived .game-carry::before {
  animation: game-carry-ring 0.4s 0.14s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-cat.is-arrived .game-carry__svg {
  animation: game-carry-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

@keyframes game-carry-ring {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: none; }
}

@keyframes game-carry-pop {
  0% { transform: translate(calc(1.8 * var(--u)), calc(9.6 * var(--u))) scale(0.85); }
  55% { transform: translate(0, calc(-3.5 * var(--u))) scale(1.08); }
  100% { transform: none; }
}

/* ==========================================================================
   タイトル画面のオープニング（2026/11 サウンドロゴ動画 CTscanlab_soundlogo の右側の動きを参考に）
   0.15s 博士がポンと出る
   0.15s あんこうちゃんも同時にぴょんと出る
   0.6s  スキャにゃんが台車を押して、走ってくる向き（左上→右下）にびゅんと出てきてキュッと止まる
   0.6s  同時に装置・部品・星がまわりにポンと飛び出す
   4枚の画像（title-hakase / anko / cat / decor）は同じ大きさで、位置を合わせてある
   ========================================================================== */
.game-title__art {
  position: relative;
  width: calc(100% + 12px);
  max-width: 360px;
  aspect-ratio: 720 / 693;
  margin: -10px -6px 4px;
}

.game-title__art > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 拡大・縮小の中心（各キャラクターの足もと） */
.game-title__hakase { transform-origin: 56.8% 64%; }
.game-title__anko   { transform-origin: 74.5% 77%; }
.game-title__cat    { transform-origin: 48% 96%; }
.game-title__decor  { transform-origin: 52% 50%; }

@media all { /* スマホの「視覚効果を減らす」設定でも、タイトルのオープニングは動かす */
  .game-title__hakase {
    animation:
      title-pop 0.5s 0.15s both,
      title-sway 1.6s 0.7s ease-in-out both;
  }

  .game-title__anko {
    animation: title-hop-in 0.5s 0.15s both;
  }

  .game-title__cat {
    animation: title-run-in 0.5s 0.6s linear both;
  }

  .game-title__decor {
    animation: title-decor-in 0.45s 0.6s both;
  }
}

/* ポンと出る（小さな点から → 大きく → もどる） */
@keyframes title-pop {
  0%   { opacity: 0; scale: 0.05; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  15%  { opacity: 1; }
  60%  { scale: 1.1; animation-timing-function: ease-in-out; }
  82%  { scale: 0.97; animation-timing-function: ease-in-out; }
  100% { opacity: 1; scale: 1; }
}

/* 博士：ゆらゆら（右へ左へ少しかたむく） */
@keyframes title-sway {
  0%   { rotate: 0deg; }
  25%  { rotate: -3deg; }
  55%  { rotate: 2.5deg; }
  80%  { rotate: -1deg; }
  100% { rotate: 0deg; }
}

/* あんこうちゃん：下からぴょんと出る */
@keyframes title-hop-in {
  0%   { opacity: 0; scale: 0.3; translate: 0 12%; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  20%  { opacity: 1; }
  55%  { scale: 1.08; translate: 0 -5%; animation-timing-function: ease-in; }
  80%  { scale: 0.96 1.04; translate: 0 0; animation-timing-function: ease-out; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

/* スキャにゃん：走ってくる向き（左上→右下）にびゅんと出てきて、少し行きすぎてキュッと止まる（大きさは変えない）
   走っているあいだは前のめり → 止まるときに後ろへ少しのけぞって、もとにもどる */
@keyframes title-run-in {
  0%   { opacity: 0; translate: -20% -14%; rotate: 5deg; animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1); }
  8%   { opacity: 1; }
  48%  { translate: 1.6% 1.1%; rotate: 5deg; animation-timing-function: ease-out; }
  70%  { translate: 0.4% 0.3%; rotate: -3deg; animation-timing-function: ease-in-out; }
  86%  { translate: 0 0; rotate: 1deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* 走ってきた向きのスピード線（スキャにゃんのうしろ。先の細くなる手描き風の線） */
.game-title__dash {
  position: absolute;
  top: 40%;
  left: 0;
  width: 30%;
  height: auto;
  overflow: visible;
  rotate: 34deg;
  opacity: 0;
  pointer-events: none;
}

.game-title__dash path {
  fill: #fff;
}

/* 止まったときの土けむり（後ろの車輪のあたり） */
.game-title__dust {
  position: absolute;
  top: 82%;
  left: 21%;
  width: 23%;
  height: auto;
  overflow: visible;
  opacity: 0;
  transform-origin: 70% 90%;
  pointer-events: none;
}

.game-title__dust--s {
  top: 80%;
  left: 12%;
  width: 13%;
}

.game-title__puff {
  fill: #fdfcf6;
}

.game-title__puff-shade {
  fill: #d7e2f2;
}

@media all { /* スマホの「視覚効果を減らす」設定でも、タイトルのオープニングは動かす */
  .game-title__dash {
    animation: title-dash 0.32s 0.62s ease-out both;
  }

  .game-title__dust {
    animation: title-dust 0.55s 0.8s cubic-bezier(0.2, 0.7, 0.4, 1) both;
  }

  .game-title__dust--s {
    animation-delay: 0.86s;
  }
}

@keyframes title-dash {
  0%   { opacity: 0; translate: -18% 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; translate: 6% 0; }
}

/* もこっと出て、後ろへ流れながら消える */
@keyframes title-dust {
  0%   { opacity: 0; scale: 0.35; translate: 0 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; scale: 1.15; translate: -35% -18%; }
}

/* 装置・部品・星がまわりにポンと飛び出す */
@keyframes title-decor-in {
  0%   { opacity: 0; scale: 0.55; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  30%  { opacity: 1; }
  60%  { scale: 1.07; animation-timing-function: ease-in-out; }
  100% { opacity: 1; scale: 1; }
}

/* タイトル・ステージ選択・あそびかたの背景：放射状の模様の上の白い半透明の丸はなくす */
.game-layer.is-title,
.game-layer.is-select,
.game-layer.is-howto {
  background: repeating-conic-gradient(from 0deg at 50% 30%, #2a7cf0 0deg 10deg, #1f6fe5 10deg 20deg);
}


/* タイトルのオープニング：ゲーム画面が見えるまでは止めておく（js/game.js の waitTitleAnim） */
.game-title__art.is-wait > * {
  animation-play-state: paused !important;
}

/* ==========================================================================
   スマホ（〜767px）：ファーストビューでゲーム画面の大半が見えるように
   上のパンくずと「GAME」の見出しは出さない（下のパンくずは残す）
   ========================================================================== */
/* 2026/11/07: スマホも上のパンくず（白い帯・高さ 80px。右端にメニューボタン）を出す。ゲームはその下から */

/* 「GAME」の見出しは出さない（PC・スマホとも。読み上げ用には残す） */
.gamepage__head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   チュートリアル（ステージ1のはじめ）
   ・スポットライト：説明しているところ以外を暗くし、オレンジの太い枠で囲んで光らせる
   ・博士の案内ウィンドウ：説明しているところのすぐ上（入らないときは下）に、しっぽで指して出す
   ========================================================================== */
.game-spot {
  position: absolute;
  z-index: 8;
  border: 4px solid #ffb21f;
  border-radius: 14px;
  box-shadow:
    0 0 0 4px #fff,
    0 0 22px 8px rgb(255 190 40 / 85%),
    0 0 0 2000px rgb(6 18 52 / 66%);
  pointer-events: none;
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
  animation: game-spot-glow 0.8s ease-in-out infinite alternate;
}

.game-spot[hidden] {
  display: none;
}

.game-spot.is-in {
  animation: game-spot-in 0.35s ease-out, game-spot-glow 0.8s 0.35s ease-in-out infinite alternate;
}

/* 説明しているところは暗くしない（スポットライトの穴の中） */
.game.is-tutorial .is-coach-target {
  position: relative;
  outline: none;
  animation: none;
}

/* 押すボタン（正解）をぴょこぴょこ光らせる */
.game.is-tutorial .game-opt.is-coach-answer {
  border-color: #ff9a1f;
  background: #fff4dc;
  box-shadow: 0 0 0 3px #ffcf6b, 0 0 14px 4px rgb(255 170 30 / 70%);
  animation: game-coach-press 0.7s ease-in-out infinite alternate;
}

.game.is-tutorial .game-opt.is-coach-answer::after {
  content: "ここ！";
  position: absolute;
  top: 2px;
  right: 3px;
  padding: 1px 7px;
  border-radius: 8px;
  background: #ff7a00;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
  line-height: 1.5;
  white-space: nowrap;
}

.game.is-tutorial .game-opt.is-coach-answer {
  position: relative;
}

.game.is-tutorial .game-opt.is-on {
  animation: none;
}

/* スキャンボタンは押せるときの動きの代わりに強めに光らせる */
.game.is-tutorial .game-scan.is-coach-target:not(:disabled) {
  animation: game-coach-press 0.7s ease-in-out infinite alternate;
}

/* 博士の案内ウィンドウ */
.game-coach {
  position: absolute;
  right: 10px;
  left: 10px;
  z-index: 9;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 11px 10px 10px;
  border: 3px solid #ffb21f;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 0 #d98200, 0 10px 24px rgb(0 0 0 / 30%);
  transition: top 0.3s ease;
}

.game-coach[hidden] {
  display: none;
}

.game-coach.is-in {
  animation: game-coach-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* しっぽ（説明しているところを指す） */
.game-coach__tail {
  position: absolute;
  top: 100%;
  width: 22px;
  height: 14px;
  margin-top: 1px;
  background: #ffb21f;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  translate: -50% 0;
}

.game-coach__tail::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 4px;
  width: 14px;
  height: 10px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.game-coach.is-below .game-coach__tail {
  top: auto;
  bottom: 100%;
  margin: 0 0 1px;
  rotate: 180deg;
}

.game-coach__face {
  flex: none;
  width: 52px;
  height: 52px;
  border: 3px solid #ffd77a;
  border-radius: 50%;
  background: #fff7e0;
}

.game-coach__body {
  flex: 1;
  min-width: 0;
}

.game-coach__head {
  display: flex;
  gap: 6px;
  align-items: center;
}

.game-coach__label {
  padding: 1px 9px;
  border-radius: 8px;
  background: #ff9a1f;
  color: #fff;
  font-size: 10.5px;
  font-weight: var(--fw-demibold);
}

.game-coach__steps {
  color: #c27a14;
  font-size: 11px;
  font-weight: var(--fw-demibold);
}

.game-coach__text {
  margin-top: 4px;
  color: #1f2a3d;
  font-size: 13.5px;
  line-height: 1.6;
}

.game-coach__text b {
  color: #e8590c;
  font-weight: var(--fw-demibold);
}

.game-coach__btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 7px;
}

.game-coach__skip,
.game-coach__next {
  min-height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--fw-demibold);
  cursor: pointer;
}

.game-coach__skip {
  background: #eef3fc;
  color: #6b7a90;
}

.game-coach__next {
  background: linear-gradient(180deg, #ffb53a, #ff8a00);
  box-shadow: 0 3px 0 #c76a00;
  color: #fff;
  animation: game-coach-press 0.8s ease-in-out infinite alternate;
}

.game-coach__next[hidden] {
  display: none;
}

@keyframes game-coach-in {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

@keyframes game-spot-in {
  from { opacity: 0; scale: 1.12; }
  to { opacity: 1; scale: 1; }
}

@keyframes game-spot-glow {
  from { border-color: #ffb21f; }
  to { border-color: #ffe27a; }
}

@keyframes game-coach-press {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.05); }
}

/* ==========================================================================
   はかせメモの読みやすさ（2026/11）
   ・意味のまとまり（.ph）ごとに折り返し、まとまりの途中では改行しない
   ・文字がはみ出さないよう、ラベルは縮められるように・ボタン（ピル）は中の文字に合わせる
   ========================================================================== */
.game-memo .ph {
  display: inline-block;
  white-space: nowrap;
}

.game-memo__ttl {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  align-items: center;
  font-size: 13px;
  line-height: 1.5;
}

.game-memo__row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 6px 0;
}

.game-memo__label {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  word-break: keep-all;
}

.game-memo__pills {
  align-self: center;
}

.game-memo__pill {
  min-width: 48px;
  padding: 4px 7px;
  white-space: nowrap;
}

.game-memo__tip {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
}

.game-memo__tip::before {
  display: inline-block;
  margin-right: 2px;
}

/* 2つの素材：絵＋ひとことのルール */
.game-memo__row--rule {
  grid-template-columns: 38px minmax(0, 1fr);
}

.game-memo__rule {
  color: #333;
  font-size: 13px;
  font-weight: var(--fw-demibold);
  line-height: 1.55;
  word-break: keep-all;
}

.game-memo__rule em {
  color: var(--memo-c);
  font-style: normal;
}

.game-memo__rule strong {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--memo-c);
  color: #fff;
  font-weight: var(--fw-demibold);
}

.game-memo__note {
  font-size: 12.5px;
  line-height: 1.9;
}

/* せまいとき：ボタン（ピル）をラベルの下に置く */
.game-memo__card {
  container-type: inline-size;
}

/* ボタンが2つある行（素材）で、カードの幅がとてもせまいときだけ（Windows ではスクロールバーのぶん幅がせまくなる） */
@container (max-width: 214px) {
  .game-memo__row:has(.game-memo__pill + .game-memo__pill) {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .game-memo__row:has(.game-memo__pill + .game-memo__pill) .game-memo__pills {
    grid-row: 2;
    grid-column: 2;
    justify-content: flex-end;
  }

  .game-memo__row:has(.game-memo__pill + .game-memo__pill) .game-memo__pic {
    grid-row: 1 / span 2;
  }
}

/* はかせメモの色ラベル（「素材」「2つの素材」「いちばん重い素材」など）：
   文字がラベルの色の外にはみ出さないよう、ブロックにして高さを文字に合わせる */
.game-memo__ttl b,
.game-memo__rule strong {
  display: inline-block;
  padding: 2px 9px 3px;
  border-radius: 999px;
  line-height: 1.35;
  vertical-align: middle;
}

.game-memo__rule strong {
  margin: 1px 0;
  border-radius: 7px;
}

/* 色付きラベルの文字の上下位置：フォントによって文字が上に寄るので、
   文字の上下の余白を切りそろえて（text-box）、ラベルの中央に置く */
.game-memo__ttl b,
.game-memo__rule strong {
  padding: 5px 9px;
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  .game-memo__ttl b,
  .game-memo__rule strong {
    padding: 2px 9px 3px;
  }
}

/* 「ざっくり」「小さい」などのラベルは、行の上下中央に */
.game-memo__row:not(.game-memo__row--rule) .game-memo__label {
  grid-row: 1 / span 2;
  align-self: center;
}

@container (max-width: 214px) {
  .game-memo__row:has(.game-memo__pill + .game-memo__pill) .game-memo__label {
    grid-row: 1;
    align-self: end;
  }
}

/* 研究所の窓：CSS で描いていた窓をやめ、サイトの背景と同じ窓の絵（昼・夕方・夜）にする。
   残り時間に合わせて、夕方・夜の絵を少しずつ濃く重ねる（js/game.js の updateWindow） */
.game-lab::before {
  content: none;
}

.game-window {
  position: absolute;
  top: 14px;
  left: 222px;
  left: auto;
  right: calc(4.4 * var(--u));
  width: 100px;
  width: calc(29.7 * var(--u));
  aspect-ratio: 140 / 42;
}

.game-window img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.game-window__evening,
.game-window__night {
  opacity: 0;
  transition: opacity 0.6s linear;
}

/* ==========================================================================
   タイトルのオープニング：装置・部品・CT画像・星を1つずつポンと出す（2026/11 パーツ画像）
   キャラクターのまわりから、それぞれの場所へ飛び出して止まる。星はそのあともキラキラ
   ========================================================================== */
.game-title__part {
  transform-origin: var(--o);
}

.game-title__part--scanners { --o: 24.1% 21.1%; --d: 0.6s;  --fx: 8%; --fy: 10%; }
.game-title__part--part3d   { --o: 85.3% 29.9%; --d: 0.68s; --fx: -10%; --fy: 6%; }
.game-title__part--slices   { --o: 79.6% 47.5%; --d: 0.76s; --fx: -9%; --fy: 0%; }
.game-title__part--stars-l  { --o: 6.6% 48.5%; --d: 0.84s; --fx: 12%; --fy: 0%; }
.game-title__part--star-t   { --o: 76.9% 14.6%; --d: 0.9s;  --fx: -6%; --fy: 8%; }
.game-title__part--stars-r  { --o: 86.7% 55.2%; --d: 0.96s; --fx: -10%; --fy: -2%; }

@media all { /* スマホの「視覚効果を減らす」設定でも動かす（タイトルのオープニング） */
  .game-title__part {
    animation: title-part-in 0.45s var(--d) cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }

  .game-title__part--stars-l,
  .game-title__part--star-t,
  .game-title__part--stars-r {
    animation:
      title-part-in 0.45s var(--d) cubic-bezier(0.2, 0.8, 0.3, 1) both,
      title-twinkle 1.6s calc(var(--d) + 0.45s) ease-in-out infinite;
  }

  .game-title__part--star-t { animation-duration: 0.45s, 1.9s; }
  .game-title__part--stars-r { animation-duration: 0.45s, 1.4s; }
}

/* キャラクターの近くから飛び出して → 少し大きく → ぴたり */
@keyframes title-part-in {
  0%   { opacity: 0; scale: 0.2; translate: var(--fx) var(--fy); }
  35%  { opacity: 1; }
  65%  { scale: 1.12; translate: 0 0; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

/* 星：ゆっくりまたたく */
@keyframes title-twinkle {
  0%, 100% { scale: 1; rotate: 0deg; }
  50% { scale: 1.08; rotate: 6deg; }
}

/* タイトル：星のキラキラ（回転）や猫の登場で画像の外枠がはみ出し、横スクロールバーが出たり消えたりするのを防ぐ */
.game-layer.is-title {
  overflow-x: hidden;
}

/* ==========================================================================
   音のオン／オフ（js/sound.js）：ゲーム画面の右上。タイトル・会話・プレイ中のどこでも押せる
   ========================================================================== */
.game-sound {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 40;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 22px;
  padding: 0 8px 0 5px;
  border: 1.5px solid rgb(255 255 255 / 70%);
  border-radius: 11px;
  background: rgb(10 40 100 / 30%);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.game-sound svg {
  width: 15px;
  height: 15px;
}

.game-sound span {
  min-width: 2.1em;
  text-align: left;
}

.game-sound.is-on {
  border-color: #ffec00;
  background: #ffec00;
  color: #0f4bb0;
}

@media (hover: hover) {
  .game-sound:not(.is-on):hover {
    background: rgb(255 255 255 / 28%);
  }
}

.game-sound:focus-visible {
  outline: 2px solid #ffec00;
  outline-offset: 2px;
}

/* プレイ中はアイコンだけの丸いボタンにして、HUDの場所をとらないようにする */
.game.is-playing .game-sound {
  justify-content: center;
  width: 26px;
  padding: 0;
}

.game.is-playing .game-sound span {
  display: none;
}

/* 右上の音ボタンのぶん、ステージ名と思考時間・フィーバーの札を左へよける */
.game-hud__top {
  padding-right: 32px;
}

.game-think-badge,
.game-fever-badge {
  right: 44px;
}

/* ==========================================================================
   製品カード：2つの素材の製品は文字が長いので、カードからはみ出さないよう詰める
   （見出しと値を横にならべ、値が長いときは見出しの右側で折り返す）
   ========================================================================== */
.game-card__tags li {
  display: flex;
  align-items: baseline;
}

.game-card__tags span {
  flex: none;
}

.game-card__v {
  flex: 1;
  min-width: 0;
  font-style: normal;
}

.game-card__v small {
  font-size: 0.78em;
  letter-spacing: -0.02em;
}

.game-card.is-mix,
.game-card.is-thick {
  gap: 8px;
}

.game-card.is-mix .game-card__pic,
.game-card.is-thick .game-card__pic {
  width: 52px;
}

.game-card.is-mix .game-card__name,
.game-card.is-thick .game-card__name {
  font-size: 14px;
}

.game-card.is-mix .game-card__tags,
.game-card.is-thick .game-card__tags {
  font-size: 12.5px;
  line-height: 1.34;
}

.game-card.is-mix .game-card__tags span,
.game-card.is-thick .game-card__tags span {
  min-width: 72px;
  font-size: 11px;
}

@media (max-width: 359px) {
  .game-card.is-mix,
  .game-card.is-thick {
    gap: 6px;
    padding: 0 7px;
  }

  .game-card.is-mix .game-card__pic,
  .game-card.is-thick .game-card__pic {
    width: 42px;
  }

  .game-card.is-mix .game-card__name,
  .game-card.is-thick .game-card__name {
    font-size: 12.5px;
    letter-spacing: -0.02em;
  }

  .game-card.is-mix .game-card__mix,
  .game-card.is-thick .game-card__mix {
    margin-left: 3px;
    padding: 1px 4px;
  }

  .game-card.is-mix .game-card__tags,
  .game-card.is-thick .game-card__tags {
    font-size: 11.5px;
  }

  .game-card.is-mix .game-card__tags span,
  .game-card.is-thick .game-card__tags span {
    min-width: 64px;
    font-size: 10.5px;
  }
}

/* オンのまま来たけれど、まだ音が出ていない（どこかを押すと鳴りはじめる）ときは、ボタンをゆっくり点滅させて知らせる */
.game-sound.is-wait {
  animation: game-sound-wait 1.2s ease-in-out infinite;
}

@keyframes game-sound-wait {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 236 0 / 70%); }
  50% { box-shadow: 0 0 0 5px rgb(255 236 0 / 0%); }
}

/* オンのまま来て、まだ音が出ていないとき：ボタンの左に「タップで音が鳴るよ」のふきだし */
.game-sound.is-wait::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 0 rgb(15 75 176 / 35%);
  color: #0f4bb0;
  font-size: 10px;
  white-space: nowrap;
  content: "画面をタップすると音が鳴るよ";
  pointer-events: none;
  transform: translateY(-50%);
}

/* 博士のメモ：ぶあつい製品（ステージ4から） */
.game-memo__card--thick {
  --memo-c: #12917a;
  --memo-shadow: #c4ebe0;
}

/* 2026/11/07: ゲーム画面をほんの少し広く（343px → 359px）。スマホでは左右の余白を 16px → 8px に */
.game,
.gamepage__links {
  max-width: 359px;
}

@media (max-width: 767.98px) {
  .gamepage {
    padding-right: var(--space-8);
    padding-left: var(--space-8);
  }
}

/* 2026/11/07: スマホでゲーム画面を縮小するときは横に広げてから縮める（js/main.js）。念のため横スクロールが出ないように */
.gamepage {
  overflow-x: clip;
}

/* 2026/11/07: スマホでゲーム画面を横に広げたときは、研究所の中身（装置・スキャにゃん・博士など）を
   PCと同じ並び（横幅 337px）のまま真ん中に寄せる。広がったぶんは左右の端に均等に分ける（--dx） */
.game-lab {
  --dx: max(0px, (100cqw - 337px) / 2);
}

.game-nanotom {
  left: var(--dx);
}

.game-hakase {
  right: calc(-2px + var(--dx));
}

.game-think {
  right: calc(18px + var(--dx));
}

.game-cat {
  left: calc(1.19 * var(--u) + var(--dx));
}

.game-window {
  right: calc(4.4 * var(--u) + var(--dx));
}

.game-result {
  left: calc(8px + var(--dx));
}

.cutin--think .cutin__chara {
  right: calc(-1.4 * var(--u) + var(--dx));
}

.cutin--think .cutin__focus svg {
  right: calc(24.3 * var(--u) - 130px + var(--dx));
}

.cutin--think .cutin__line {
  left: calc(100% - 57 * var(--u) - var(--dx));
}

/* 2026/11/07: スマホでゲーム画面を横に広げたとき、タイトルのイラスト（最大 360px）が左に寄らないよう真ん中に置く
   （せまいときは今までどおり左右に 6px ずつはみ出させる） */
.game-title__art {
  margin-right: max(-6px, (100% - 360px) / 2);
  margin-left: max(-6px, (100% - 360px) / 2);
}

/* ==========================================================================
   2026/11/10 改善（Figma: ★LP_CTスキャン大作戦ゲーム / 改善案）
   ・HUD：上の段からステージ名を外し、下の段を「STAGE ／ SCORE（紺の箱）／ NEXT」に
   ・製品カードと条件の見出しを色分け（素材→電圧・フィルター＝青、大きさ→電流＝オレンジ、みたいところ→スキャン時間＝緑）
   ・ふりかえり：博士のアドバイスを先頭に。条件ごとの正解は条件の色、時間の使い方は円グラフ
   ========================================================================== */
.game {
  --gc-blue: #2a8ee6;
  --gc-orange: #ff6a13;
  --gc-green: #22a95c;
}

/* ---- HUD ---- */
.game-hud__top .game-hud__stage {
  visibility: hidden;
}

.game-hud {
  padding-bottom: 0;
}

.game-hud__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 6px;
  align-items: end;
  margin-top: 4px;
}

.game-stageno,
.game-hud__row .game-next {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  align-self: center;
  margin: 0;
  padding: 0 0 6px;
  border: 0;
  background: none;
  color: #fff;
  font-weight: var(--fw-demibold);
  line-height: 1;
}

.game-stageno span,
.game-hud__row .game-next__label {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-demibold);
  letter-spacing: 0.02em;
}

.game-stageno b {
  font-size: 24px;
  line-height: 1;
}

.game-hud__row .game-next {
  flex: none;
  width: auto;
  min-width: 0;
  height: auto;
}

.game-hud__row .game-next[hidden] {
  display: flex;
  visibility: hidden;
}

.game-hud__row .game-next__pic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border-radius: 3px;
  background: #fff;
}

.game-hud__row .game-next em {
  display: none;
}

/* SCORE：紺の箱（上だけ丸い）。研究所の上にのせる */
.game-hud__row .game-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 4px 10px 3px;
  border-radius: 24px 24px 0 0;
  background: #0b1238;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}

.game-score__label {
  margin: 0 !important;
  color: #4d8dff;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 1 !important;
}

.game.is-fever .game-score__label {
  color: #ff8a1f;
}

.game-score__nums {
  display: flex;
  gap: 4px;
  align-items: baseline;
  margin: 1px 0 0 !important;
  opacity: 1 !important;
}

.game-hud__row .game-score b {
  margin: 0;
  color: #ffec00;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.game-hud__row .game-score b.is-clear {
  color: #ffec00;
  text-shadow: 0 0 8px rgb(255 236 0 / 70%);
}

.game-score__norma {
  margin: 0 !important;
  color: #fff;
  font-size: 13px;
  opacity: 1 !important;
}

/* コンボは SCORE の箱の右上にシールのように */
.game-hud__row .game-combo {
  top: -12px;
  right: 56px;
}

/* ---- 製品カード ---- */
.game-card__name {
  color: #111;
  font-size: 16px;
}

.game-card__tags li.is-mat > span { color: var(--gc-blue); }
.game-card__tags li.is-size > span { color: var(--gc-orange); }
.game-card__tags li.is-detail > span { color: var(--gc-green); }

.game-card__tags span {
  font-weight: var(--fw-demibold);
}

.game-card__v {
  color: #1f2a3d;
}

/* ---- 条件の見出し ---- */
.game-param--v .game-param__name,
.game-param--f .game-param__name { color: var(--gc-blue); }
.game-param--i .game-param__name { color: var(--gc-orange); }
.game-param--t .game-param__name { color: var(--gc-green); }

/* ---- ふりかえり ---- */
.game-rv__advice {
  margin: 6px 0 6px;
  color: #111;
  font-size: 15px;
  font-weight: var(--fw-demibold);
}

.game-rv__box--talk > img {
  width: 44px;
  height: 44px;
}

.game-rv__box--talk > div {
  flex: 1;
  min-width: 0;
}

.game-rv__list--good {
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #d6fbd4;
}

.game-rv__list--good li {
  color: #2f6b45;
}

.game-rv__list--good li::before {
  content: "◎";
  color: #2fae67;
}

.game-rv-bars .is-weak .game-rv-bars__name::after {
  content: none;
}

.game-rv-bars li.is-v .game-rv-bars__name,
.game-rv-bars li.is-f .game-rv-bars__name { color: var(--gc-blue); }
.game-rv-bars li.is-i .game-rv-bars__name { color: var(--gc-orange); }
.game-rv-bars li.is-t .game-rv-bars__name { color: var(--gc-green); }

.game-rv-bars li.is-v .game-rv-bars__track span,
.game-rv-bars li.is-f .game-rv-bars__track span { background: #45a6ee; }
.game-rv-bars li.is-i .game-rv-bars__track span { background: var(--gc-orange); }
.game-rv-bars li.is-t .game-rv-bars__track span { background: linear-gradient(90deg, #5ad99a, #0fae6a); }

.game-rv-bars__num {
  color: #6b7686;
}

/* 時間の使い方（円グラフ） */
.game-rv__box--time {
  position: relative;
}

.game-rv__note {
  position: absolute;
  top: 13px;
  right: 12px;
  left: 112px;
  color: #8a94a3;
  font-size: 8.5px;
  line-height: 1.35;
  text-align: right;
}

.game-rv-pie {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 8px;
}

.game-rv-pie__chart {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 50%;
}

.game-rv-pie__legend {
  display: grid;
  flex: 1;
  gap: 7px;
  font-size: 12px;
}

.game-rv-pie__legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 6px;
  align-items: center;
}

.game-rv-pie__legend li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.game-rv-pie__legend .is-think::before { background: #6c5bd4; }
.game-rv-pie__legend .is-scan::before { background: #0b98de; }
.game-rv-pie__legend .is-other::before { background: #9aa7b8; }

.game-rv-pie__legend b {
  font-weight: var(--fw-regular);
  text-align: right;
}

/* 2026/11/11: 装置の「SCAN ○°」は js/game.js が data-deg に角度を入れる（CSS のカウンターより確実） */
.game-lab.is-scanning .game-lcd b::before {
  content: "SCAN " attr(data-deg) "°";
}

/* 2026/11/11: 台車にのせた製品が台車の画像の後ろに隠れないようにする
   丸い台（::before）→ スキャにゃん・台車の画像 → 製品 の順に重ねる
   （.game-carry 自身に z-index を付けると中身ごと台車の後ろに回ってしまうので、付けない） */
.game-carry {
  z-index: auto;
}

.game-carry::before {
  z-index: 0;
}

.game-cat img {
  z-index: 1;
}

.game-carry__svg {
  z-index: 2;
}