:root {
  color-scheme: light;
  /* iPhone の したの ホームバー(と ブラウザの バー)が かぶさる ぶん。
     JS からも --safe-bottom を よんで、めぐるの がめんの たかさを きめる */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  /* iPhone の ブラウザは バーの ぶんだけ 100vh が みえている たかさより
     おおきく なる。dvh なら いま みえている ぶんに あう(ふるい ブラウザは
     うえの 100vh の まま) */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 20%, #ffe1f0 0%, #d6c8ff 60%, #b3a4f7 100%);
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  padding: 20px;
  /* したの ボタンが ホームバーに かくれない ように */
  padding-bottom: max(20px, var(--safe-bottom));
  transition: background 0.6s ease;
}

/* 「たび」で えらんだ 地域ごとの、デバイスの まわりの けしき。
   本体・がめんの いろ(「いろ」きのう)とは べつの レイヤーなので
   どのテーマと くみあわせても かならず 見わけが つく */
body.region-sea { background: radial-gradient(circle at 50% 20%, #cdeaff 0%, #6ec6e8 60%, #2f8fc7 100%); }
body.region-snow { background: radial-gradient(circle at 50% 20%, #ffffff 0%, #dbe9f5 55%, #9fb8d9 100%); }
body.region-city { background: radial-gradient(circle at 50% 20%, #f5e6ff 0%, #b8a6d9 55%, #4a4066 100%); }
body.region-countryside { background: radial-gradient(circle at 50% 20%, #fef6d0 0%, #cbe6a0 55%, #7fae5a 100%); }
body.region-forest { background: radial-gradient(circle at 50% 20%, #e3f3d6 0%, #a3cf85 55%, #4f7a3d 100%); }
body.region-desert { background: radial-gradient(circle at 50% 20%, #fff3d6 0%, #f0c877 55%, #d99a4e 100%); }
body.region-mountain { background: radial-gradient(circle at 50% 20%, #edf1e8 0%, #9fb39a 55%, #596c57 100%); }
body.region-deepsea { background: radial-gradient(circle at 50% 20%, #18345f 0%, #0b1f3b 58%, #03101f 100%); }
body.region-river_lake { background: radial-gradient(circle at 50% 20%, #dff7ef 0%, #83c8ba 55%, #3b7f74 100%); }
body.region-jungle { background: radial-gradient(circle at 50% 20%, #d8f6c8 0%, #61aa68 55%, #245b3a 100%); }

.device {
  width: 340px;
  /* ほんたいが みえている たかさを こえない ように する。こえると
     iPhone では したの パッドや ボタンが がめんの そとに おしだされる */
  max-height: calc(100dvh - 20px - max(20px, var(--safe-bottom)));
  background: linear-gradient(160deg, #ff9ecb 0%, #ff7ab8 45%, #f45fa8 100%);
  border-radius: 50% 50% 40px 40px / 35% 35% 40px 40px;
  padding: 28px 24px 20px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.25),
    inset 0 -8px 15px rgba(0, 0, 0, 0.1),
    inset 0 8px 15px rgba(255, 255, 255, 0.35);
  position: relative;
  z-index: 1;
}

/* 「たび」で いまいる地域の まわりを かざる、絵柄の レイヤー。
   デバイスの うしろがわ(z-index: 0)に ひろがり、地域ごとに ちがう
   絵文字が やわらかく ただよう(applyRegion() が 地域が かわった ときだけ
   つくりなおす) */
.region-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.region-decor-item {
  position: absolute;
  line-height: 1;
  opacity: 0.5;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
  animation: region-decor-float ease-in-out infinite alternate;
}

@keyframes region-decor-float {
  0% { transform: translateY(0) rotate(-6deg); }
  100% { transform: translateY(-14px) rotate(6deg); }
}

/* きせつの いろ・くうきかん(はる/なつ/あき/ふゆ)を あらわす、からだの
   いちばん したの タイントレイヤー。region-decor(z-index:0)の さらに
   したに ひろがるので、地域の けしきだけを やわらかく そめ、デバイス
   じたい(不透明)には えいきょうしない。じっさいの グラデーションは
   JS(applySeasonVisuals())が いろちがいの ぶんだけ せっていする */
.season-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  transition: background 1.2s ease;
}

/* きせつの はいけいエフェクト(はなびら・おちば・ゆき など)。region-decor
   と おなじ z-index の レイヤーで、デバイスの うしろがわに ひろがる。
   こちらは「つねに ゆっくり うごきつづける」えんしゅつなので、region-decor
   の ふわふわ うかぶ アニメーションとは べつに、上から したへ ゆっくり
   ながれおちる うごきを もたせてある */
.season-bg-fx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* きせつの ぜんけいエフェクト。デバイス(z-index:1)より further 手前に
   ひろがり、そとの けしき→ハード→えきしょうを またいで ながれる、
   ただ1まいの とうめいレイヤー。pointer-events:none で ボタン/タップの
   はんていを いっさい うばわない。おおくの オーバーレイ(z-index:5〜6)
   より したなので、それらが ひらいている あいだは じどうに かくれる */
.season-front-fx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
}

/* ミニゲーム中・だいじな オーバーレイが ひらいている あいだは、しさが
   だいじな ばめんの じゃまを しないよう ぜんけいエフェクトを けす
   (はいけいエフェクトは デバイスの うしろがわに かくれたままなので
   そのままで もんだいない) */
.season-front-fx.suppressed {
  opacity: 0;
}

.season-fx-item {
  position: absolute;
  top: -10%;
  line-height: 1;
  will-change: transform;
  animation-name: season-fx-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.season-bg-fx .season-fx-item {
  opacity: 0.55;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

.season-front-fx .season-fx-item {
  opacity: 0.35;
}

body.region-deepsea .season-fx-item {
  top: auto;
  bottom: -10%;
  animation-name: deepsea-bubble-rise;
}
@keyframes deepsea-bubble-rise {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--drift, 12px), -55vh); }
  100% { transform: translate(0, -115vh); }
}

/* した(-10%)から したの がめん外(110vh ぶん おりる)まで、ゆっくり
   ながれおちながら すこし よこに ゆれて かいてんする。よこの ゆれは
   ようそごとの --drift カスタムプロパティ(JSで らんすうに せってい)で
   すこしずつ ちがう みちすじに 見えるようにしてある */
@keyframes season-fx-fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--drift, 12px), 55vh) rotate(180deg); }
  100% { transform: translate(0, 115vh) rotate(360deg); }
}

/* きせつが かわった しゅんかんだけ、すこし つよめに ちる バーストよう
   ようそ。season-fx-item より はやく・おおきく うごき、アニメーション
   おわりに JS(el.remove())で とりのぞかれる、その場かぎりの えんしゅつ */
.season-burst-item {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  animation-name: season-burst-pop;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes season-burst-pop {
  0% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(var(--drift, 20px), var(--fall, 60vh)) scale(1) rotate(200deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .season-fx-item,
  .season-burst-item {
    animation: none;
    display: none;
  }
}

/* なかまは左右2列ずつに並べ、全員分の高さを確保する。
   本体の回転には巻き込まず、吹き出しや操作ボタンに重ねない。 */
.companion-side {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.companion-side.left {
  grid-column: 1;
  direction: rtl;
}

.companion-side.right {
  grid-column: 3;
}

.companion-chip-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}

/* こいびと/けっこんあいてを、なかまとは くべつして 本体キャラの ひだりうえに
   くっつけて 表示する。ハートで かこんで なかまの丸チップとは ちがう みための
   モチーフにし、けっこんずみなら ゆびわを そえる。
   仲間の人数にかかわらず、中央の本体を基準に配置する。 */
.partner-companion {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}

.partner-companion.hidden {
  display: none;
}

.partner-companion .partner-heart {
  font-size: 12px;
  line-height: 1;
}

.partner-companion .partner-emoji {
  position: relative;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25));
}

.partner-companion .partner-ring {
  position: absolute;
  bottom: -3px;
  right: -6px;
  font-size: 12px;
  line-height: 1;
}

.device-top {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffe066;
  box-shadow: 0 0 6px 2px rgba(255, 224, 102, 0.4);
}

.lamp.sick {
  background: #ff4d4d;
  box-shadow: 0 0 8px 3px rgba(255, 77, 77, 0.7);
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% { opacity: 0.2; }
}

.name-plate {
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.screen-frame {
  background: #3a2b26;
  border-radius: 16px;
  padding: 10px;
  box-shadow: inset 0 0 0 3px #5a4238;
}

.screen {
  position: relative;
  background: #9bd68d;
  border-radius: 10px;
  padding: 12px 14px 10px;
  font-family: "Courier New", monospace;
  color: #16330f;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  image-rendering: pixelated;
}

/* Home colors and motifs are defined in design.css. */
.screen.dead {
  background: #b9b9b9;
  color: #333;
}

.screen.sick {
  background: #a9bd7a;
  animation: sick-pulse 1.6s ease-in-out infinite;
}

@keyframes sick-pulse {
  0%, 100% { background: #a9bd7a; }
  50% { background: #8fae63; }
}

.screen-normal,
.minigame-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* スマホの ブラウザは、すばやい れんだタップを ダブルタップズームの
   ジェスチャーと かんちがいして、タップが とりこぼされたり がめんが
   かってに 拡大されたり することが ある。ミニゲーム全体で その ジェス
   チャー判定じたいを 無効にしておくことで、タップの はんのうを 安定させる
   (基本の あんぜんに タップできる きょどう だけに しぼる manipulation。
   ドラッグそうさが ひつような キャッチ/バブルポップの フィールドは、
   より 詳細な セレクターの touch-action: none が 優先される) */
.minigame-overlay {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.screen-normal.hidden,
.minigame-overlay.hidden {
  display: none;
}

.status-row {
  display: flex;
  /* 所持金の桁が増えても、本体を画面幅より押し広げない。 */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ねんれい と そだち は この ゲームの 中心の かずな ので すこし 大きく、
   しゅぞく名は のこりの はばで おりかえさずに つめて 見せる */
.status-row > #ageLabel,
.status-row > #sodachiLabel {
  font-size: 12px;
  flex: 0 0 auto;
}
.status-row > #moneyLabel { flex: 0 0 auto; }
/* しゅぞく名は じぶんの行で まるごと 見せる(ながい 名まえが おおいので) */
.stage-name-row {
  font-size: 10.5px;
  font-weight: bold;
  opacity: 0.9;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* いまいる地域(たび)・こいびと(きゅうあい)が いるときだけ 出す、
   ちいさな 補足の 行 */
.sub-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: bold;
  opacity: 0.8;
  margin-top: 2px;
  gap: 4px;
}

.sub-status-row.hidden {
  display: none;
}

/* 「せかい」の じょうたい(きせつ→地域)を まとめた、2だん表示の ブロック。
   ステータス行(年齢/おかね/せいちょう)や こいびと表示(#partnerLabel、
   space-between で 右がわ)とは 別レイヤーなので 重ならない */
.world-status {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  gap: 1px;
}

#partnerLabel:empty {
  display: none;
}

.pet-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 110px;
  padding: 12px 0 0;
}

.pet-area:has(.companion-chip-small) { padding-top: 20px; }

.badges {
  position: absolute;
  top: -4px;
  right: 6px;
  font-size: 16px;
  display: flex;
  gap: 2px;
}

/* いままでに たどりついた 4つの クリアパターンの あかし。
   一生のあいだ 積みあがっていく きろくなので「はじめから」しても消えない */
.ending-badges {
  position: absolute;
  top: -4px;
  left: 6px;
  font-size: 15px;
  display: flex;
  gap: 2px;
}

.ending-badge {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.pet {
  position: relative;
  display: inline-block;
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.15));
}

/* 仲間の左右列はメイン画面専用。ムービーの .pet は単独の1体。 */
#pet {
  display: inline-grid;
  grid-template-columns: 51px auto 51px;
  align-items: center;
  column-gap: 4px;
}

/* 恋人・装備の段も中央セルの高さに含める。本体だけを動かすので、
   26体（旧セーブは28体）の仲間がいても配置が回転しない。 */
.pet-core {
  grid-column: 2;
  position: relative;
  display: inline-flex;
  justify-content: center;
  min-width: 82px;
}

.pet-core:has(.partner-companion:not(.hidden), .pet-accessory:not(.hidden)) {
  padding-top: 44px;
}

.pet #petSprite {
  animation: idle-float 3.2s ease-in-out infinite;
  transform-origin: center;
}

@media (max-width: 360px) {
  body { padding: 12px 8px; }
}

/* 装備は中央セルの右上にそえる。恋人とは別の位置を確保する。 */
.pet-accessory {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25));
}

.pet-accessory.hidden {
  display: none;
}

@keyframes idle-float {
  0%, 50%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-4deg) scale(0.93); }
  75% { transform: rotate(4deg) scale(0.93); }
}

.pet.idle-perk #petSprite {
  animation: idle-perk 0.5s ease;
}

@keyframes idle-perk {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  30% { transform: translateY(-6px) rotate(5deg) scale(0.93); }
  60% { transform: translateY(-2px) rotate(-4deg) scale(0.94); }
}

.pet.bounce #petSprite {
  animation: bounce 0.5s ease;
}

/* うれしい・たのしい・かなしい・おこった、それぞれ違うモーション -
   お世話の結果に応じて emotePet() が付け外しする一時クラス */
.pet.emote-happy #petSprite {
  animation: emote-happy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emote-happy {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  30% { transform: translateY(-10px) rotate(-8deg) scale(0.87); }
  55% { transform: translateY(-4px) rotate(6deg) scale(0.92); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

.pet.emote-fun #petSprite {
  animation: emote-fun 0.7s ease-in-out;
}

@keyframes emote-fun {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-2px) rotate(0deg) scale(0.68); }
  40% { transform: translateY(-6px) rotate(190deg) scale(0.68); }
  75% { transform: translateY(-2px) rotate(360deg) scale(0.68); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}

.pet.emote-sad #petSprite {
  animation: emote-sad 0.7s ease-in-out;
}

@keyframes emote-sad {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(5px) rotate(-4deg) scale(0.94); }
  70% { transform: translateY(3px) rotate(3deg) scale(0.95); }
}

.pet.emote-angry #petSprite {
  animation: emote-angry 0.5s ease-in-out;
}

@keyframes emote-angry {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-3px, 0) rotate(-4deg) scale(0.92); }
  40% { transform: translate(3px, 0) rotate(4deg) scale(0.92); }
  60% { transform: translate(-2px, 0) rotate(-3deg) scale(0.94); }
  80% { transform: translate(2px, 0) rotate(3deg) scale(0.94); }
}

/* きゅうあい せいこう じの、うっとり ゆれる モーション */
.pet.emote-love #petSprite {
  animation: emote-love 0.9s ease-in-out;
}

@keyframes emote-love {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-8px) rotate(-6deg) scale(0.9); }
  40% { transform: translateY(-4px) rotate(6deg) scale(0.9); }
  60% { transform: translateY(-8px) rotate(-5deg) scale(0.92); }
  80% { transform: translateY(-2px) rotate(4deg) scale(0.94); }
}

.emote-particle {
  position: absolute;
  top: 12%;
  left: 50%;
  font-size: 20px;
  pointer-events: none;
  animation: emote-particle-rise 0.9s ease-out forwards;
}

@keyframes emote-particle-rise {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--drift, 0px)), -52px) scale(1.1); opacity: 0; }
}

.screen.sleeping .pet {
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.15)) brightness(0.85);
}
.screen.sleeping #petSprite { animation: idle-sleep 3.6s ease-in-out infinite; }

@keyframes idle-sleep {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(0deg); }
}

.screen.sick .pet {
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.15)) grayscale(0.5) sepia(0.3) hue-rotate(60deg) saturate(1.6);
}
.screen.sick #petSprite { animation: sick-wobble 1.4s ease-in-out infinite; }

@keyframes sick-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg) scale(0.94); }
  75% { transform: rotate(4deg) scale(0.94); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.poop-row {
  font-size: 18px;
  margin-top: 4px;
  min-height: 22px;
  letter-spacing: 2px;
}

.profile-scroll {
  flex: 1;
  overflow-y: auto;
}

.profile-section {
  margin-bottom: 10px;
  font-size: 11px;
}

.profile-section.hidden {
  display: none;
}

.profile-hint {
  font-size: 10px;
  opacity: 0.85;
  margin-bottom: 6px;
  line-height: 1.5;
}

.profile-hint.hidden {
  display: none;
}

.profile-code-btn {
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: bold;
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
  color: #6b3654;
  cursor: pointer;
}

.profile-code-box {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  font-size: 9px;
  font-family: monospace;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  resize: none;
  box-sizing: border-box;
}

.naoto-greeting-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
}

.profile-code-box.hidden {
  display: none;
}

.profile-guest-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.profile-code-input {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.profile-code-error {
  font-size: 9px;
  color: #b3261e;
  margin-top: 4px;
}

.profile-code-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.profile-code-actions.hidden {
  display: none;
}

.profile-code-copy-btn {
  background: linear-gradient(160deg, #eaf6ff, #cdeaff);
  color: #1f5c80;
}

.profile-code-copy-msg {
  font-size: 9px;
  color: #2e7d32;
  font-weight: bold;
}

.profile-code-copy-msg.hidden {
  display: none;
}

.profile-code-clear-btn {
  flex: 0 0 auto;
  background: linear-gradient(160deg, #f2f2f2, #dcdcdc);
  color: #555;
}

.profile-code-error.hidden {
  display: none;
}

#guestStatus {
  margin-top: 8px;
}

.duel-role-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.duel-role-row .profile-code-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 11px;
}

.duel-progress {
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 6px;
  text-align: center;
}

.duel-lie-coin-row {
  font-size: 10px;
  text-align: center;
  margin-bottom: 6px;
  color: #6b3654;
  font-weight: bold;
}

.duel-lie-coin-row.hidden {
  display: none;
}

.duel-honest-btn {
  background: linear-gradient(160deg, #eefbea, #cdf0c4);
  color: #2f7a2f;
}

.duel-lie-btn {
  background: linear-gradient(160deg, #2a2438, #4a3f63);
  color: #ffe27a;
}

.duel-lie-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.duel-lie-flash {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffe27a;
  background: linear-gradient(160deg, #2a2438, #4a3f63);
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
  animation: duel-lie-flash-pop 1.1s ease-out forwards;
  pointer-events: none;
}

.duel-lie-flash.hidden {
  display: none;
}

@keyframes duel-lie-flash-pop {
  0% { opacity: 0; transform: scale(0.8); }
  25% { opacity: 1; transform: scale(1.05); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.duel-question-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.duel-question-nav-row .duel-progress {
  flex: 1;
  margin-bottom: 0;
}

.duel-back-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: bold;
  background: linear-gradient(160deg, #f2f2f2, #dcdcdc);
  color: #555;
  cursor: pointer;
}

.duel-back-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.duel-choice-current {
  box-shadow: 0 0 0 2px #6b3654 inset;
}

.duel-review-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.duel-review-row:active {
  border-color: #6b3654;
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
}

.duel-review-row-emoji {
  font-size: 20px;
  flex-shrink: 0;
}

.duel-review-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.duel-review-row-q {
  font-size: 10px;
  font-weight: bold;
}

.duel-review-row-detail,
.duel-review-row-pub {
  font-size: 9px;
  opacity: 0.75;
}

.duel-review-row-edit {
  font-size: 14px;
  flex-shrink: 0;
}

.duel-review-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 6px;
}

.duel-review-actions .duel-secondary-btn {
  flex: 1;
}

.duel-secondary-btn {
  background: linear-gradient(160deg, #f2f2f2, #dcdcdc);
  color: #555;
}

.duel-danger-btn {
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: bold;
  background: linear-gradient(160deg, #ffdcdc, #ffb3b3);
  color: #8a1f1f;
  cursor: pointer;
}

.duel-confirm-row {
  background: rgba(255, 220, 220, 0.5);
  border: 2px solid rgba(138, 31, 31, 0.25);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
}

.duel-confirm-row.hidden {
  display: none;
}

.duel-confirm-text {
  font-size: 9px;
  margin-bottom: 6px;
}

.duel-confirm-buttons {
  display: flex;
  gap: 6px;
}

.duel-confirm-buttons button {
  flex: 1;
}

.duel-abandon-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: none;
  background: none;
  color: #8a1f1f;
  font-size: 9px;
  text-decoration: underline;
  cursor: pointer;
}

.duel-abandon-btn.hidden {
  display: none;
}

.duel-guess-row {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.duel-guess-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.duel-guess-row-emoji {
  font-size: 20px;
}

.duel-guess-row-text {
  font-size: 11px;
  font-weight: bold;
  flex: 1;
}

.duel-guess-row-pub {
  font-size: 10px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.duel-guess-row-buttons {
  display: flex;
  gap: 6px;
}

.duel-guess-btn {
  flex: 1;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  cursor: pointer;
  font-family: inherit;
}

.duel-guess-btn.selected {
  border-color: #6b3654;
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
  color: #6b3654;
}

.duel-guess-row-testimony {
  font-size: 10px;
  font-style: italic;
  opacity: 0.75;
  margin-bottom: 6px;
}

.duel-guess-row-confidence {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.duel-confidence-btn {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 4px;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.5);
  color: #555;
  cursor: pointer;
  font-family: inherit;
}

.duel-confidence-btn.selected {
  border-color: #d98a3a;
  background: linear-gradient(160deg, #fff3e0, #ffdca8);
  color: #8a5a1a;
  font-weight: bold;
}

.duel-testimony-hint {
  font-size: 9px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.duel-testimony-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.duel-testimony-chip {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.6);
  color: #555;
  cursor: pointer;
  font-family: inherit;
}

.duel-testimony-chip.selected {
  border-color: #6b3654;
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
  color: #6b3654;
  font-weight: bold;
}

.duel-suspicion-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.duel-suspicion-row:active {
  border-color: #6b3654;
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
}

.duel-suspicion-row-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

.duel-suspicion-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.duel-suspicion-row-q {
  font-size: 11px;
  font-weight: bold;
}

.duel-suspicion-row-pub {
  font-size: 9px;
  opacity: 0.75;
}

.duel-suspicion-row-pick {
  font-size: 18px;
  flex-shrink: 0;
}

.duel-reveal-running {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  color: #6b3654;
}

.duel-reveal-pub {
  font-size: 11px;
  margin-top: 6px;
}

.duel-reveal-testimony {
  font-size: 10px;
  font-style: italic;
  opacity: 0.8;
  margin-top: 4px;
}

.duel-reveal-testimony.hidden {
  display: none;
}

.duel-reveal-guess {
  font-size: 11px;
  margin-top: 8px;
  font-weight: bold;
}

.duel-reveal-outcome {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

.duel-reveal-outcome.hidden {
  display: none;
}

.duel-reveal-points {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #6b3654;
}

.duel-question-card {
  background: linear-gradient(160deg, #fff8fb, #ffe4f1);
  border: 2px solid #6b3654;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  margin-bottom: 10px;
}

.duel-question-emoji {
  font-size: 40px;
  line-height: 1.1;
}

.duel-question-text {
  font-size: 13px;
  font-weight: bold;
  color: #6b3654;
  margin-top: 6px;
}

.duel-question-shown {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 6px;
}

.duel-question-shown.hidden {
  display: none;
}

.duel-choice-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duel-choice-row .mg-choice-btn {
  text-align: center;
  font-size: 13px;
  padding: 10px;
}

.duel-result-title {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 6px;
}

.duel-result-score {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #6b3654;
  margin-bottom: 8px;
}

#duelRevealStage.hidden,
#duelFinalStage.hidden {
  display: none;
}

.duel-result-desc {
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 10px;
  white-space: pre-line;
}

.duel-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-left: 4px solid transparent;
}

.duel-result-row.correct {
  border-left-color: #4a9d4a;
}

.duel-result-row.wrong {
  border-left-color: #c76f6f;
}

.duel-result-row-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

.duel-result-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.duel-result-row-question {
  font-size: 11px;
  font-weight: bold;
}

.duel-result-row-detail {
  font-size: 9px;
  opacity: 0.75;
  line-height: 1.4;
}

.duel-result-row-mark {
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.duel-result-row.correct .duel-result-row-mark {
  color: #2f7a2f;
}

.duel-result-row.wrong .duel-result-row-mark {
  color: #a83f3f;
}

#guestStatus .profile-code-btn {
  margin-top: 6px;
}

.profile-section-title {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 6px;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.profile-label {
  opacity: 0.7;
  flex-shrink: 0;
  white-space: nowrap;
}

.profile-row > span:last-child {
  text-align: right;
}

.profile-value-with-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.profile-help-btn {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: inherit;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.profile-help-btn.hidden {
  display: none;
}

.profile-traits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-trait-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-trait-label {
  width: 62px;
  flex-shrink: 0;
  font-size: 10px;
}

.profile-trait-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.profile-trait-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff9ecb, #c77dff);
  border-radius: 4px;
}

.profile-partner-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.profile-partner-emoji {
  font-size: 24px;
}

.profile-partner-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-partner-name {
  font-weight: bold;
}

.profile-partner-detail {
  font-size: 9px;
  opacity: 0.75;
}

.profile-empty {
  font-size: 10px;
  opacity: 0.7;
}

/* プロフィールの「なかま」いちらん。パートナーカードより コンパクトに、
   1ぎょうに emoji・なまえ・きずな度バーを ならべる(最大10たいぶん
   スクロールで見られる) */
.profile-companion-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.profile-companion-emoji {
  font-size: 16px;
  flex-shrink: 0;
}

.profile-companion-name {
  width: 82px;
  flex-shrink: 0;
  font-size: 9px;
}

.bars {
  margin-top: 6px;
}

.bar-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}

.bar-label {
  font-size: 10px;
  font-weight: bold;
  width: 62px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.bar-value {
  font-size: 10px;
  font-weight: bold;
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.4s ease, background 0.4s ease;
  background: #2e7d32;
}

.bar-fill.low {
  background: #e65100;
}

.bar-fill.critical {
  background: #c62828;
}

/* 元気バーだけ、ほかのバー(0.4sのすばやい変化)より ずっと ゆっくりした
   width遷移に する。tick()は3秒おきにしか 元気の 数値を 更新しないが、
   このtransitionが ほぼ その間隔ぶん(2.6秒)かけて 滑らかに おいつくので、
   「しばらく なにも おきない→急に ジャンプする」という 段階的な 見た目
   ではなく、寝ている あいだ ずっと ぐんぐん 回復しつづけている ように 見える */
.bar-fill.energy {
  transition: width 2.6s linear, background 0.4s ease;
}

.bars.meters {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.bar-fill.evo {
  background: #9e9d24;
}

.bar-fill.evo.high {
  background: #ffd600;
  box-shadow: 0 0 6px rgba(255, 214, 0, 0.8);
}

.bar-fill.devo {
  background: #6a1b9a;
}

.bar-fill.devo.high {
  background: #aa00ff;
  box-shadow: 0 0 6px rgba(170, 0, 255, 0.8);
}

/* 「いのち」は はんてんひょうじ(のこりが おおいほど バーが ながい)。
   じゅうぶん あるうちは おちついた みどり、へってくると あかい 警告に なる */
.bar-fill.death {
  background: #4a9a5e;
}

.bar-fill.death.low {
  background: #d50000;
  animation: death-meter-pulse 0.8s ease-in-out infinite;
}

@keyframes death-meter-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(213, 0, 0, 0.6); }
  50% { box-shadow: 0 0 10px rgba(213, 0, 0, 1); }
}

.bar-fill.transform {
  background: #00897b;
}

.bar-fill.transform.high {
  background: #1de9b6;
  box-shadow: 0 0 6px rgba(29, 233, 182, 0.8);
}

.bar-fill.goal {
  background: linear-gradient(90deg, #ffd23f, #ff5ea8, #4fc3f7);
}

.bar-fill.goal.high {
  background: linear-gradient(90deg, #ffd23f, #ff5ea8, #4fc3f7, #c77dff);
  box-shadow: 0 0 6px rgba(255, 210, 63, 0.85);
  animation: goal-meter-shimmer 1.4s linear infinite;
}

@keyframes goal-meter-shimmer {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}

/* メイン育成画面のキャラクター会話。システム通知(.message)とは分離する */
.speech-bubble {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: min(88%, 270px);
  margin: 5px auto 0;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid rgba(22, 51, 15, 0.82);
  border-radius: 11px;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.35;
  font-weight: bold;
  text-align: left;
  z-index: 4;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: rgba(255, 255, 255, 0.96);
  border-left: 2px solid rgba(22, 51, 15, 0.82);
  border-top: 2px solid rgba(22, 51, 15, 0.82);
  transform: translateX(-50%) rotate(45deg);
}

.speech-bubble.hidden { display: none; }
.speech-speaker { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.speech-text { min-width: 0; overflow-wrap: anywhere; }
.speech-bubble[data-kind='partner'] { border-style: double; }
.speech-bubble[data-kind='companion'] { border-style: dashed; }

.message {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  min-height: 16px;
  text-align: center;
  font-weight: bold;
}

/* あいてむ画面の「ごほうび」いちらん */
.shop-item.reward-item.locked {
  opacity: 0.55;
}



/* お世話の続きをそのまま見て操作できるよう、画面全体をふさぐパネルではなく
   上に かぶさる ちいさな バナーとして表示する(下のキャラ・ステータス・
   ボタンは常に見えたまま操作できる。クリックを奪わないよう pointer-events
   も切っておく) */
.story-flash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10, 15, 10, 0.82);
  border-radius: 10px 10px 0 0;
  padding: 8px 12px;
  text-align: center;
  animation: story-fade 0.5s ease-out;
  pointer-events: none;
}

.story-flash.hidden {
  display: none;
}

.story-flash-emoji {
  font-size: 26px;
  flex-shrink: 0;
  animation: impact-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.story-flash-text {
  color: #fefefe;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes story-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.game-clear-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  overflow: hidden;
  /* tier 0 (ふつうクリア): あたたかい 夕焼けいろの グラデーション */
  background: linear-gradient(120deg, #ff9a6c, #ffd23f, #ffb385, #ff9a6c);
  background-size: 300% 300%;
  animation: game-clear-bg 4s ease infinite;
}

.game-clear-overlay.hidden {
  display: none;
}

/* 中央から はじけとぶ おいわいパーティクル(.ending-particle)は
   position:absoluteのため、指定しないと 文字より 上に かさなって
   しまう。文字がわ を かならず 手前に 出して 読みやすくする */
.game-clear-confetti,
.game-clear-title,
.game-clear-badges,
.game-clear-subtitle,
.game-clear-desc {
  position: relative;
  z-index: 1;
}

.game-clear-confetti {
  font-size: 22px;
  animation: game-clear-bounce 0.9s ease-in-out infinite;
}

.game-clear-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #d6336c, 0 4px 8px rgba(0, 0, 0, 0.35);
  animation: game-clear-bounce 0.9s ease-in-out infinite;
}

.game-clear-subtitle {
  font-size: 16px;
  font-weight: bold;
  color: #fffbe6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.game-clear-desc {
  margin-top: 4px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.6;
  color: #16330f;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 8px 10px;
}

.game-clear-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.game-clear-freeplay-btn {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  background: #fff;
  color: #6b3654;
  font-weight: bold;
  font-size: 11px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.game-clear-freeplay-btn:active {
  transform: scale(0.95);
}

.game-clear-freeplay-btn.hidden {
  display: none;
}

.game-clear-badge {
  font-size: 10px;
  font-weight: bold;
  color: #6b3654;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

@keyframes game-clear-bg {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes game-clear-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.08); }
}

/* 各エンディング段階(getEndingTier())ごとに、背景の配色・題名の動き・
   演出の派手さを ぜんぶ 変えて、それぞれ ちがう キャラクターを もたせる。
   tier-1 = ずかんコンプリート(しぜん・ずかんの みどり)
   tier-2 = じっせきコンプリート(ひょうしょうしきの きんいろ)
   tier-3 = PERFECT CLEAR(すべてが そろった ぎんがの ごうか演出) */

.game-clear-overlay.tier-1 {
  background: linear-gradient(120deg, #1b5e20, #66bb6a, #26a69a, #a5d6a7, #1b5e20);
  background-size: 300% 300%;
  animation-duration: 3s;
  box-shadow: inset 0 0 0 3px #a5d6a7, 0 0 14px 2px rgba(165, 214, 167, 0.6);
}

.game-clear-overlay.tier-2 {
  background: linear-gradient(120deg, #b8860b, #ffd54f, #ff8f00, #ffe082, #b8860b);
  background-size: 300% 300%;
  animation-duration: 1.6s;
  box-shadow: inset 0 0 0 3px #ffe082, 0 0 16px 3px rgba(255, 193, 7, 0.6);
}

/* 表彰式のような ライトが すーっと横切る スポットライト演出 */
.game-clear-overlay.tier-2::before {
  content: '';
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
  animation: spotlight-sweep 1.6s linear infinite;
  pointer-events: none;
}

.game-clear-overlay.tier-3 {
  background: linear-gradient(120deg, #ff5ea8, #ffd23f, #55e6a5, #4fc3f7, #c77dff, #ff5ea8);
  background-size: 400% 400%;
  animation-duration: 0.8s;
  box-shadow: inset 0 0 0 4px #ffd700, 0 0 22px 5px rgba(255, 215, 0, 0.8);
}

/* きんいろの わくの まわりを 虹色の リングが ぐるぐる まわる、
   いちばん ごうかな tier のための かざりわく */
.game-clear-overlay.tier-3::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  z-index: -1;
  background: conic-gradient(from 0deg, #ff5ea8, #ffd23f, #55e6a5, #4fc3f7, #c77dff, #ff5ea8);
  animation: ending-ring-spin 2.2s linear infinite;
}

.game-clear-overlay.tier-1 .game-clear-title {
  color: #f1fff2;
  text-shadow: 0 2px 0 #1b5e20, 0 0 12px #c8e6c9, 0 4px 8px rgba(0, 0, 0, 0.35);
  animation: game-clear-sway 1.8s ease-in-out infinite;
}

.game-clear-overlay.tier-2 .game-clear-title {
  text-shadow: 0 2px 0 #e65100, 0 0 16px #fff8, 0 4px 8px rgba(0, 0, 0, 0.35);
  animation: game-clear-bounce 0.7s ease-in-out infinite;
}

.game-clear-overlay.tier-3 .game-clear-title {
  font-size: 32px;
  color: #fff;
  /* 4方向の黒フチで、うしろの にぎやかな 背景に まぎれないよう くっきり
     読めるように しつつ、金色の グロウで はなやかさを たす */
  text-shadow:
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000,
    -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    0 0 16px #ffd700, 0 4px 10px rgba(0, 0, 0, 0.5);
  animation: game-clear-bounce 0.6s ease-in-out infinite;
}

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

@keyframes spotlight-sweep {
  0% { transform: translateX(-45%) rotate(0deg); }
  100% { transform: translateX(45%) rotate(0deg); }
}

@keyframes ending-ring-spin {
  to { transform: rotate(360deg); }
}

/* エンディング画面いっぱいに飛びちる おいわいパーティクル
   (spawnEndingCelebration()がtierごとに数・種類・うごきを変えて生成する) */
.ending-particle {
  position: absolute;
  top: -8%;
  left: 50%;
  font-size: 22px;
  pointer-events: none;
  will-change: transform, opacity;
}

.ending-particle.fall {
  animation: ending-fall linear forwards;
}

.ending-particle.sway {
  animation: ending-sway linear forwards;
}

.ending-particle.burst {
  top: 50%;
  animation: ending-burst ease-out forwards;
}

@keyframes ending-fall {
  0% { transform: translate(-50%, -10%) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--drift, 0px)), 340%) rotate(var(--spin, 180deg)); opacity: 0; }
}

@keyframes ending-sway {
  0% { transform: translate(-50%, -10%) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(calc(-50% + var(--drift, 30px)), 150%) rotate(var(--spin, 90deg)); }
  100% { transform: translate(calc(-50% - var(--drift, 30px)), 340%) rotate(calc(var(--spin, 90deg) * -1)); opacity: 0; }
}

@keyframes ending-burst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.15); opacity: 0; }
}

/* --- transformation choice --- */

.transform-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  background: linear-gradient(160deg, #26c6da, #00897b);
}

.transform-overlay.hidden {
  display: none;
}

.transform-title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #00695c, 0 3px 6px rgba(0, 0, 0, 0.35);
}

.transform-choices {
  display: flex;
  gap: 10px;
}

.transform-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
  font-weight: bold;
  font-size: 11px;
  color: #16330f;
  cursor: pointer;
}

.transform-choice-btn:active {
  transform: scale(0.95);
}

.transform-choice-emoji {
  font-size: 30px;
}

.transform-skip-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.5);
  font-weight: bold;
  font-size: 10px;
  color: #fff;
  cursor: pointer;
}

.transform-skip-btn:active {
  transform: scale(0.95);
}

/* --- ずかん --- */

.dex-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 10px;
  background: #f4ead2;
  color: #16330f;
}

.dex-overlay.hidden {
  display: none;
}

.dex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dex-title {
  font-size: 14px;
  font-weight: 900;
}

.dex-progress {
  font-size: 11px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.dex-close-btn {
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  padding: 0;
  background: rgba(0, 0, 0, 0.12);
  color: #16330f;
  font-weight: bold;
  cursor: pointer;
}

.dex-scroll {
  flex: 1;
  overflow-y: auto;
}

.dex-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dex-row {
  display: grid;
  /* 8段階を4列×2段で表示し、PNGの幅で右端が見切れるのを防ぐ。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.dex-section-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
  padding-top: 8px;
  border-top: 2px dashed rgba(22, 51, 15, 0.25);
}

.dex-section-title {
  font-size: 13px;
  font-weight: bold;
}

.companion-dex-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 4px;
}

.dex-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 5px;
  padding: 2px 1px;
  background: rgba(255, 255, 255, 0.6);
}

.dex-cell.locked {
  opacity: 0.5;
}

.dex-cell.tappable {
  cursor: pointer;
}

.dex-cell.tappable:active {
  transform: scale(0.94);
  background: rgba(255, 255, 255, 0.95);
}

.dex-cell-emoji {
  font-size: 14px;
}

.dex-cell-label {
  font-size: 6px;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
}

/* --- じっせき --- */

.ach-grid {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 達成ずみ/未達成は、内容を隠す(❓)のではなく カードの いろで しめす。
   達成ずみ = 金いろの トロフィーカード、未達成 = グレーの ロックカード */
.ach-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 6px 8px;
  border: 2px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.ach-cell.known {
  background: linear-gradient(135deg, #fff6d9, #ffe27a);
  border-color: #ffc400;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4);
}

.ach-cell.locked {
  background: rgba(120, 120, 120, 0.15);
  border-color: rgba(120, 120, 120, 0.3);
}

.ach-cell-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

.ach-cell.locked .ach-cell-emoji {
  filter: grayscale(1);
  opacity: 0.7;
}

.ach-cell-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ach-cell-label {
  font-size: 10px;
  font-weight: bold;
}

.ach-cell.locked .ach-cell-label,
.ach-cell.locked .ach-cell-desc {
  color: #616161;
}

.ach-cell-desc {
  font-size: 8px;
  opacity: 0.8;
}

/* --- アイテム選択(つかいきりアイテムの えらぶ画面)で じっせき/図鑑/
   地域カードを タップできるようにする ときだけ つく かかざり --- */
.ach-cell.pickable {
  cursor: pointer;
}

.ach-cell.pickable:active {
  transform: scale(0.97);
}

/* --- いろ選択 --- */

.theme-scroll {
  flex: 1;
  overflow-y: auto;
}

.theme-section {
  margin-bottom: 10px;
}

.theme-section-title {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 6px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  font-family: inherit;
}

.theme-swatch-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.theme-swatch.selected .theme-swatch-circle {
  border-color: #ffc400;
  box-shadow: 0 0 0 2px #ffc400, inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

.theme-swatch-label {
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
}

.theme-swatch.locked,
.theme-swatch:disabled {
  cursor: default;
}

.theme-swatch.locked .theme-swatch-circle {
  background: rgba(120, 120, 120, 0.25) !important;
  filter: grayscale(1);
  opacity: 0.7;
}

.theme-swatch.locked .theme-swatch-label {
  color: #616161;
}

/* --- アイテム(ショップ) --- */

.shop-item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: inherit;
}

/* こうにゅうずみかどうかが 文字を よまなくても ひとめで わかるよう、
   バッジと カードぜんたいの いろあいの りょうほうで しめす。そうびちゅう
   (.equipped)は さらに ゴールドで うわがきされる */
.shop-item-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 11px;
  line-height: 1;
}

.shop-item.owned {
  border-color: #4a9d4a;
  background: linear-gradient(135deg, #edfbe9, #cdf0c4);
}

.shop-item.owned .shop-item-status {
  color: #2f7a2f;
  font-weight: bold;
}

.shop-item-emoji {
  font-size: 26px;
  line-height: 1;
}

.shop-item-label {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

.shop-item-desc {
  font-size: 9px;
  color: #4a6b4f;
  text-align: center;
  line-height: 1.35;
}

.shop-item-status {
  font-size: 9px;
  color: #616161;
}

.shop-item.equipped {
  border-color: #ffc400;
  background: linear-gradient(135deg, #fff6d9, #ffe27a);
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4);
}

.shop-item.equipped .shop-item-status {
  color: #8a6d00;
  font-weight: bold;
}

/* なおとの〜(NAOTO_ITEMS)の みかいほう表示、つかいきりアイテムの
   いま つかえない(available()を みたさない)表示、どちらも おなじ
   グレーアウトを つかう */
.shop-item.locked,
.shop-item:disabled {
  opacity: 0.55;
  cursor: default;
}

/* --- ほんたい・がめんの いろテーマ --- */

/* --- minigames --- */

.mg-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 6px;
  gap: 6px;
}

/* のこり時間(games.js の mgTimerHud)。ヘッダーの さいごに 小さく おく。
   のこり わずかは ⏳ の きごうと こい いろで しらせる(いろだけに たよらない) */
.mg-header:has(> .mg-timer) > :first-child {
  margin-right: auto;
}

.mg-timer {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mg-timer.low {
  color: #b3261e;
}

.mg-title {
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  font-weight: bold;
  margin-bottom: 6px;
}

.mg-hint {
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.88;
  margin-top: 4px;
}

/* せんたく式ミニゲームきょうつうの せいかい/ふせいかい ひょうじ
   (revealAndProceed() さんしょう)。いろだけに たよらず、⭕/❌/✓の
   きごうでも つたわる ようにしてある */
.mg-reveal-correct,
.mg-reveal-incorrect {
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mg-reveal-correct {
  background: #d9f2c4 !important;
  border-color: #6fae5f !important;
  box-shadow: 0 0 0 2px #6fae5f inset;
}

.mg-reveal-incorrect {
  background: #ffd9d3 !important;
  border-color: #d9534f !important;
  box-shadow: 0 0 0 2px #d9534f inset;
}

.mg-reveal-mark {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  z-index: 3;
}

/* かるい 誤操作フィードバック(flashMistake() さんしょう)。ゲームは
   とめず、まちがえた ことだけ 一しゅん つたえる */
.mg-mistake-flash {
  position: relative;
  animation: mg-fight-shake 0.25s ease;
  background: #ffd9d3 !important;
}

@keyframes mg-pose-confused {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-14deg) scale(0.8); }
  70% { transform: rotate(10deg) scale(0.86); }
}

@keyframes mg-catch-pop {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.7); opacity: 0; }
}

@keyframes mg-hole-hit-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.mg-tap-btn {
  /* おしっぱなし中に 指が すこし うごいても、ブラウザが スクロールと
     みなして pointercancel を なげない ように(manipulation だと パンが
     ゆるされ、iOS で おしっぱなしが とぎれる) */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
  border: none;
  border-radius: 10px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: bold;
  color: #6b3654;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.mg-tap-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.mg-choice-btn {
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: bold;
  color: #6b3654;
  text-align: left;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.mg-choice-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

@keyframes impact-fade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes impact-pop {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mg-beat-pulse {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.15); }
  100% { transform: scale(0.7); }
}

@keyframes mg-bubble-rise {
  0% { bottom: -10%; opacity: 1; }
  90% { opacity: 1; }
  100% { bottom: 105%; opacity: 0.6; }
}

@keyframes mg-bubble-pop-anim {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes mg-jump-approach {
  0% { left: calc(100% - 36px); }
  100% { left: 46px; }
}

/* 判定後、しょうがいぶつが プレイヤーの したを とおりすぎて
   画面外へ ぬける えんしゅつ(判定タイミングそのものは かえない) */
@keyframes mg-jump-exit {
  0% { left: 46px; }
  100% { left: -40px; }
}

@keyframes mg-road-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 34px; }
}

@keyframes mg-fight-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.mg-fight-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
}

@keyframes mg-runner-scroll {
  0% { background-position: 0 0; }
  100% { background-position: -34px 0; }
}

@keyframes mg-shooter-explode {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

@keyframes mg-shooter-bullet-fly {
  0% { bottom: 30px; opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}

.buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.buttons button {
  background: linear-gradient(160deg, #fff0f7, #ffd3ea);
  border: none;
  border-radius: 12px;
  padding: 8px 4px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ♾️ ボタンだけ アイコンも span に なっている ので、アイコン側は
   ボタン本体の 文字サイズの まま(ラベルの ちいさい 文字に しない) */
.buttons button > span#infiniteBtnIcon {
  display: block;
  font-size: 20px;
  margin-top: 0;
  color: inherit;
}

.buttons button span {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  color: #6b3654;
  font-weight: bold;
}

.buttons button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.buttons button.hidden {
  display: none;
}

/* ================================================================
   第3段階B: あたらしい操作たいけんの ミニゲーム7しゅるい
   ================================================================ */

/* ドラッグ&ドロップ きょうつう(ケーキ/おべんとう) */

.mg-cake-stage,
.mg-bento-stage {
  position: relative;
  flex: 1;
  min-height: 150px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0.85) 34%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 42%, rgba(255, 214, 231, 0.9) 0, rgba(255, 214, 231, 0.9) 40%, rgba(255, 214, 231, 0) 42%),
    linear-gradient(160deg, #ffe7c2, #ffd3ea 60%, #cfe9ff);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(120, 60, 90, 0.18);
}
.mg-bento-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.45) 44%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(160deg, #f4e2c4, #e8c99a);
}

.mg-cake-base {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  pointer-events: none;
}

.mg-drop-target {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(107, 54, 84, 0.35);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  pointer-events: none;
}

.mg-drop-target.active {
  border-color: #ff5ea8;
  box-shadow: 0 0 0 4px rgba(255, 94, 168, 0.25);
  animation: mg-target-pulse 0.9s ease-in-out infinite;
}

@keyframes mg-target-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

.mg-drop-target.filled {
  border-style: solid;
  border-color: #6fae5f;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: mg-target-pop 0.35s ease-out;
}
@keyframes mg-target-pop {
  0% { transform: translate(-50%, -50%) scale(0.7); }
  60% { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.mg-drop-target.wrong {
  border-color: #d9534f;
}

.mg-bento-preview {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mg-drag-tray {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 0 2px;
  min-height: 48px;
}

.mg-drag-tray.hidden {
  display: none;
}

.mg-drag-item {
  font-size: 30px;
  line-height: 1;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.1s ease;
  background: linear-gradient(160deg, #ffffff, #ffe6f2);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.1);
}

.mg-drag-item.dragging {
  z-index: 50;
  transform: scale(1.25);
  cursor: grabbing;
}

@keyframes mg-bobber-idle {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(4px); }
}

@keyframes mg-bobber-bite {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  50% { transform: translate(-50%, -50%) translateY(10px) scale(1.15); }
}

/* ================================================================
   ねんれい / そだち の あたらしい しくみ ぶんの ひょうじ
   ================================================================ */

/* 1さいごとの ちいさな トースト - 操作を とめずに ながれる */
.birthday-toast {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  animation: birthday-pop 1.2s ease-out;
}
@keyframes birthday-pop {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* おわかれの まえぶれ - がめんが すこし くらくなる */
.screen.dying { filter: brightness(0.78) saturate(0.7); }

/* そだち100 の にじの オーラ */
.screen.rainbow-aura #pet {
  filter: drop-shadow(0 0 8px rgba(255, 120, 200, 0.85))
          drop-shadow(0 0 16px rgba(120, 200, 255, 0.7));
}

/* さいごの じかん の おびと ボタン */
.farewell-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(255, 250, 225, 0.2), rgba(255, 236, 179, 0.92));
  font-size: 10.5px;
  z-index: 7;
}
.farewell-bar button {
  font: inherit;
  font-size: 11px;
  font-weight: bold;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  background: #ff9800;
  color: #fff;
  cursor: pointer;
}
.farewell-bar button:active { transform: translateY(1px); }

/* 人生の きろくカード */
.life-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(12, 20, 14, 0.92);
  color: #f2f6f0;
  z-index: 20;
  overflow-y: auto;
}
.life-card-overlay.gold { box-shadow: inset 0 0 0 3px #e0b45c; }
.life-card-overlay.rainbow {
  box-shadow: inset 0 0 0 3px transparent;
  border-image: linear-gradient(90deg, #ff8ab8, #ffd76f, #8de8c0, #8ec4ff) 1;
  outline: 3px solid transparent;
  background-image: linear-gradient(rgba(12, 20, 14, 0.92), rgba(12, 20, 14, 0.92)),
                    linear-gradient(90deg, #ff8ab8, #ffd76f, #8de8c0, #8ec4ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
.life-card { width: 100%; max-width: 260px; text-align: center; line-height: 1.7; }
.lifecard-title { font-size: 20px; font-weight: bold; }
.lifecard-age { font-size: 15px; font-weight: bold; margin-bottom: 4px; }
.lifecard-ren-memory { margin: 7px 0 8px; padding: 7px 5px; border: 1px solid rgba(255, 215, 105, 0.45); border-radius: 9px; background: rgba(255, 255, 255, 0.07); }
.lifecard-ren-caption { font-size: 11px; font-weight: bold; margin-bottom: 5px; }
.lifecard-ren-stages { display: flex; align-items: center; justify-content: center; gap: 2px; }
.lifecard-ren-stage { min-width: 34px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.lifecard-ren-stage .character-visual { width: 30px; height: 30px; }
.lifecard-ren-stage .character-asset { width: 30px; height: 30px; image-rendering: pixelated; }
.lifecard-ren-stage small { font-size: 6.5px; line-height: 1.1; white-space: nowrap; }
.lifecard-ren-arrow { font-size: 8px; opacity: 0.6; }
.lifecard-ren-message { margin-top: 5px; font-size: 8.5px; line-height: 1.55; }
.lifecard-line { font-size: 10.5px; opacity: 0.92; }
.lifecard-badges {
  font-size: 11px;
  font-weight: bold;
  color: #ffd76f;
  margin: 6px 0;
  line-height: 1.9;
}
.lifecard-sep { height: 1px; background: rgba(255, 255, 255, 0.25); margin: 8px 0 6px; }
.lifecard-log { font-size: 10px; text-align: left; opacity: 0.85; }
.lifecard-log span { display: inline-block; min-width: 34px; opacity: 0.7; }
.life-card-next {
  font: inherit;
  font-size: 11.5px;
  font-weight: bold;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  background: #7ed08e;
  color: #12301c;
  cursor: pointer;
  flex: 0 0 auto;
}

/* きけんな そうさ(「はじめから」と「完全リセット」を はっきり わける) */
.danger-zone { border-top: 2px dashed rgba(200, 60, 60, 0.45); padding-top: 10px; }
.danger-note { font-size: 9.5px; opacity: 0.75; margin: 3px 0 10px; line-height: 1.6; }
.restart-btn, .wipe-btn {
  font: inherit; font-size: 11px; font-weight: bold; width: 100%;
  border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.restart-btn { background: #7ed08e; color: #12301c; }
.wipe-btn { background: #f3d6d6; color: #8e2020; border: 1px solid #d78a8a; }
.wipe-overlay {
  position: absolute; inset: 0; z-index: 30; display: flex;
  align-items: center; justify-content: center; padding: 12px;
  background: rgba(20, 8, 8, 0.9);
}
.wipe-box {
  background: #fff8f8; color: #3a1414; border-radius: 12px;
  padding: 14px; width: 100%; max-width: 250px; text-align: center;
}
.wipe-title { font-weight: bold; font-size: 13px; margin-bottom: 8px; }
.wipe-body { font-size: 10.5px; line-height: 1.9; text-align: left; margin-bottom: 8px; }
.wipe-warn { font-size: 10px; color: #a02020; font-weight: bold; line-height: 1.7; margin-bottom: 10px; }
.wipe-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.wipe-cancel, .wipe-next {
  font: inherit; font-size: 11px; font-weight: bold; border: 0;
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
}
.wipe-cancel { background: #ddd; color: #333; }
.wipe-next { background: #d05050; color: #fff; }
.wipe-hold {
  position: relative; overflow: hidden; font: inherit; font-size: 11.5px;
  font-weight: bold; width: 100%; border: 0; border-radius: 8px;
  padding: 12px 10px; background: #e8b7b7; color: #6b1414; cursor: pointer;
  touch-action: none; user-select: none;
}
#wipeHoldFill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: #c03030; transition: width 0.1s linear;
}
.wipe-hold-text { position: relative; z-index: 1; }

/* このプロジェクトには はんようの .hidden ルールが ない ので、
   あたらしく ついかした ようそにも それぞれ ひょうじ/ひひょうじを かく */
.birthday-toast.hidden,
.farewell-bar.hidden,
.life-card-overlay.hidden,
.wipe-overlay.hidden,
#infiniteBtn.hidden {
  display: none !important;
}

/* ④ずかんクリア / ⑤パーフェクトクリア の おいわい画面を とじる ボタン */
.game-clear-close-btn {
  font: inherit;
  font-size: 11px;
  font-weight: bold;
  border: 0;
  border-radius: 999px;
  padding: 7px 20px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  cursor: pointer;
}
.game-clear-close-btn.hidden { display: none !important; }

/* ★ 監査で 見つかった hidden漏れ。このプロジェクトには はんようの
   .hidden ルールが ない ので、display を もつ ようそは 1つずつ
   .hidden を かかなければ「クラスは ついているのに 消えない」に なる。
   - .bars.meters (#lifeMeterRow) … ♾️ で いのち/せいちょう/おとろえの
     行が 消えていなかった
   - .duel-choice-row … うそつきしょうぶで A/B の れつと
     本音/うその れつが 同時に 出ていた */
#lifeMeterRow.hidden,
.duel-choice-row.hidden,
.world-date-hint.hidden,
.ending-badge-tip.hidden,
.companion-invite-overlay.hidden { display: none !important; }

/* そだち90 の きんいろオーラ。そだち100 の 虹オーラ(.rainbow-aura)と
   おなじ しくみ(#pet の drop-shadow)で、いろだけ ひかえめな きんいろ */
.screen.legend-aura #pet {
  filter: drop-shadow(0 0 7px rgba(255, 210, 90, 0.9))
          drop-shadow(0 0 14px rgba(255, 170, 40, 0.55));
  animation: legend-aura-pulse 3.4s ease-in-out infinite;
}

@keyframes legend-aura-pulse {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}

/* デートボタンの「いま おせない 理由」 */
.world-date-hint {
  margin: 4px 2px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3, #6b6b6b);
}

.profile-code-btn.blocked {
  opacity: 0.62;
}

/* ゴールバッジを タップしたら なんの しるしか わかるように する */
.ending-badge {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  cursor: pointer;
  /* タップできる ようそなので、スマホの ゆびでも おせる おおきさを
     かくほする(みための 大きさは かえずに、あたり判定だけ ひろげる) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  margin: -8px;
}

.ending-badge-tip {
  position: absolute;
  top: 16px;
  left: 6px;
  z-index: 6;
  max-width: 190px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(10, 15, 10, 0.88);
  color: #fefefe;
  font-size: 10.5px;
  line-height: 1.45;
  pointer-events: none;
}

/* ================================================================
   デート - 3択 + ちいさな映画のようなカットシーン
   ================================================================ */
.date-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(9, 8, 14, 0.78);
  animation: story-fade 0.24s ease-out;
}

.date-overlay.hidden,
.date-card.hidden,
.date-movie.hidden,
.date-movie-close.hidden,
.date-movie-skip.hidden { display: none !important; }

.date-card {
  width: 100%;
  max-width: 270px;
  padding: 15px 13px 12px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(160deg, #fff8fb, #ffe3ee);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}

.date-kicker {
  font-size: 10px;
  color: #9d4b68;
  font-weight: 700;
}

.date-title {
  margin: 3px 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: #5e2740;
}

.date-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.date-choice-btn {
  min-height: 82px;
  border: 0;
  border-radius: 12px;
  padding: 8px 5px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 0 rgba(105,45,69,.16);
  color: #5e2740;
  font-family: inherit;
  cursor: pointer;
}

.date-choice-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(105,45,69,.16); }
.date-choice-emoji { display:block; font-size: 27px; margin-bottom: 5px; }
.date-choice-label { display:block; font-size: 9.5px; line-height: 1.25; font-weight: 800; }

.date-reward-confirm {
  scroll-margin-block: 8px;
  overflow-wrap: anywhere;
}
.date-reward-confirm .date-title { font-size: 15px; line-height: 1.5; }
.date-reward-count { margin: 8px 0 12px; font-size: 12px; color: #75435a; }
.date-reward-actions { display: grid; gap: 8px; }
.date-reward-btn {
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 12px;
  background: #954b70;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  cursor: pointer;
}
.date-reward-btn.secondary { background: #fff; color: #5e2740; }
.date-reward-btn:focus-visible,
.date-reward-confirm .date-cancel-btn:focus-visible { outline: 3px solid #5e2740; outline-offset: 2px; }
.date-reward-confirm .date-cancel-btn { min-height: 40px; font-size: 12px; }

.date-cancel-btn,
.date-movie-skip,
.date-movie-close {
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
}

.date-cancel-btn {
  margin-top: 10px;
  padding: 7px 13px;
  background: rgba(94,39,64,.1);
  color: #75435a;
  font-size: 10px;
}

.date-movie {
  width: 100%;
  max-width: 286px;
  text-align: center;
  /* Keep a small inset when scrollIntoView rounds fractional panel positions. */
  scroll-margin-block: 8px;
}

.date-movie-scene {
  position: relative;
  min-height: 228px;
  overflow: hidden;
  border-radius: 12px;
  border-top: 18px solid #08080a;
  border-bottom: 18px solid #08080a;
  padding: 18px 12px 16px;
  background: linear-gradient(180deg, #7e9fce 0%, #f6c987 52%, #496c52 53%, #294431 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.date-movie-scene[data-plan='sunset'] { background: linear-gradient(180deg,#735aa8 0%,#ff9b6f 48%,#f6cc75 64%,#493b48 65%,#25202a 100%); }
.date-movie-scene[data-plan='star'] { background: radial-gradient(circle at 70% 18%,#fff 0 1px,transparent 2px), radial-gradient(circle at 24% 28%,#fff 0 1px,transparent 2px), linear-gradient(180deg,#10132f,#30336b 58%,#16221d 59%); }
.date-movie-scene[data-plan='rain'] { background: repeating-linear-gradient(105deg,rgba(255,255,255,.16) 0 2px,transparent 2px 17px), linear-gradient(180deg,#667b8c,#9aabb5 55%,#52625b 56%); }
.date-movie-scene[data-plan='nap'] { background: linear-gradient(180deg,#8ed1ed,#d7f2ff 48%,#9ccf6a 49%,#6ea24b); }
.date-movie-scene.special-reward,
.date-movie-scene[data-plan='special'] {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 24%, rgba(255,244,165,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 10%, rgba(255,196,226,.9) 0 2px, transparent 3px),
    linear-gradient(180deg,#6f4ca7 0%,#df7eb5 46%,#ffc987 70%,#56466f 100%);
  box-shadow: 0 0 0 2px rgba(255,226,132,.75), 0 10px 34px rgba(0,0,0,.56), 0 0 26px rgba(255,173,221,.32);
}
.date-movie-scene.special-reward .date-movie-heart { font-size: 30px; animation-duration: .9s; }
.date-movie-scene.special-reward {
  position: relative;
  animation: rewardMovieGlow 2.2s ease-in-out infinite alternate;
}
.date-movie-scene.special-reward::before {
  content: 'とくべつなおもいで';
  /* タイトルが折り返しても、バッジと同じ行に重ならないようにする。 */
  position: relative;
  display: table;
  max-width: 100%;
  margin: 0 auto 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff8d6;
  background: rgba(82,39,100,.58);
  border: 1px solid rgba(255,231,143,.82);
  box-shadow: 0 0 16px rgba(255,223,132,.35);
}
.date-movie-scene.anniversary-major {
  animation: anniversaryGlow 3s ease-in-out infinite alternate;
}
.date-movie-scene.anniversary-major .date-movie-heart {
  font-size: 28px;
}
@keyframes rewardMovieGlow {
  from { filter: saturate(1) brightness(1); transform: scale(1); }
  to { filter: saturate(1.12) brightness(1.07); transform: scale(1.008); }
}
@keyframes anniversaryGlow {
  from { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  to { box-shadow: 0 10px 36px rgba(0,0,0,.5), 0 0 26px rgba(255,224,150,.3); }
}
.date-movie-scene.special-reward .date-movie-sparkles { font-size: 15px; color: rgba(255,244,181,.95); }

.date-movie-sparkles {
  position: absolute;
  inset: 6px 0 auto;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  letter-spacing: 3px;
  animation: date-sparkle 1.8s ease-in-out infinite;
}

.date-movie-place {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 2px 3px rgba(0,0,0,.7);
}

.date-movie-actors {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  min-height: 68px;
}

.date-movie-actor {
  font-size: 49px;
  line-height: 1;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.35));
  animation: date-actor-walk 1.2s ease-in-out infinite alternate;
}

.date-movie-actor.partner { animation-delay: .2s; }
.date-movie-heart {
  align-self: center;
  color: #ff608c;
  font-size: 20px;
  text-shadow: 0 0 8px #fff;
  animation: date-heart 1s ease-in-out infinite;
}

.date-movie-caption {
  position: relative;
  z-index: 1;
  margin: 18px auto 0;
  min-height: 42px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(8,8,12,.78);
  color: #fff;
  font-size: 10.5px;
  line-height: 1.55;
  font-weight: 700;
}

.date-movie-caption.beat { animation: date-caption-in .32s ease-out; }

.date-movie-actions {
  display: flex;
  justify-content: center;
  min-height: 34px;
  margin-top: 8px;
}

.date-movie-skip {
  padding: 7px 14px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 10px;
}

.date-movie-close {
  padding: 8px 16px;
  background: linear-gradient(160deg,#ff8eb3,#ff5f91);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(116,35,65,.35);
}

@keyframes date-actor-walk {
  from { transform: translateY(1px) rotate(-2deg); }
  to { transform: translateY(-7px) rotate(2deg); }
}
@keyframes date-heart {
  0%,100% { transform: scale(.85); opacity:.65; }
  50% { transform: scale(1.25); opacity:1; }
}
@keyframes date-caption-in {
  from { opacity:0; transform: translateY(5px); }
  to { opacity:1; transform: translateY(0); }
}
@keyframes date-sparkle {
  0%,100% { opacity:.35; transform: translateX(-4px); }
  50% { opacity:1; transform: translateX(4px); }
}

/* ================================================================
   なかまからの さそい - 通常操作を はっきり 中断する せんよう演出
   ================================================================ */
.companion-invite-overlay {
  position: absolute;
  inset: 0;
  /* さいごの じかんの おび(7)より うえ、人生記録カード(20)や
     完全リセット(30)より したに おく。「もっと 大事な がめん」を
     ぜったいに ふさがない ための じゅんばん */
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(8, 12, 8, 0.72);
  animation: story-fade 0.28s ease-out;
}

.companion-invite-card {
  width: 100%;
  max-width: 250px;
  padding: 16px 14px 14px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(165deg, #fffdf5, #ffeccd);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.companion-invite-emoji {
  font-size: 62px;
  line-height: 1;
  animation: companion-invite-bounce 0.9s ease-in-out infinite;
}

@keyframes companion-invite-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}

.companion-invite-title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #4a3416;
}

.companion-invite-flavor {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #6b5433;
}

.companion-invite-actions {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.companion-invite-btn {
  border: none;
  border-radius: 9px;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.companion-invite-btn.play {
  background: linear-gradient(160deg, #ffd166, #f9a03f);
  color: #4a3416;
}

.companion-invite-btn.later {
  background: #ece5d8;
  color: #6b5433;
  font-weight: 600;
  font-size: 12px;
  padding: 9px;
}

.companion-invite-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* レアなかまの さそいは、ふつうの なかまとは あきらかに ちがう
   よぞらの いろに して「なにか へんな ものが きた」感を 出す */
.companion-invite-overlay.rare {
  background: radial-gradient(circle at 50% 40%, rgba(60, 40, 110, 0.78), rgba(6, 6, 20, 0.9));
}

.companion-invite-overlay.rare .companion-invite-card {
  background: linear-gradient(165deg, #2a2450, #443a7a);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 22px rgba(180, 150, 255, 0.45);
}

.companion-invite-overlay.rare .companion-invite-title { color: #ffe9a8; }
.companion-invite-overlay.rare .companion-invite-flavor { color: #d8d2f5; }
.companion-invite-overlay.rare .companion-invite-emoji {
  filter: drop-shadow(0 0 10px rgba(200, 170, 255, 0.9));
}
.companion-invite-overlay.rare .companion-invite-btn.later {
  background: #3b3466;
  color: #cfc8ee;
}

/* まだ であっていない れんくんが こうほに まぎれた ときの「？？？」ボタン */
.transform-choice-btn.mystery {
  background: linear-gradient(160deg, #2f2a4a, #4a4270);
  color: #ffe9a8;
}

.transform-choice-btn.mystery .transform-choice-emoji {
  filter: drop-shadow(0 0 8px rgba(255, 220, 130, 0.9));
}

/* つかえない つかいきりアイテムの「理由」は 目に つく いろに する */
.shop-item.locked .shop-item-status {
  color: #b3402f;
}

/* ================================================================
   ずかんの「くわしい」がめん(§28)
   ================================================================ */
.dex-detail-overlay {
  position: absolute;
  inset: 0;
  /* ずかん(6)の うえ。ずかんを ひらいている ときにしか 出ない */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 8, 0.7);
  animation: story-fade 0.22s ease-out;
}

.dex-detail-overlay.hidden { display: none !important; }

.dex-detail-card {
  position: relative;
  width: 100%;
  max-width: 258px;
  padding: 18px 15px 15px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(168deg, #fffdf7, #f3ecdc);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}

.dex-detail-overlay.rare .dex-detail-card {
  background: linear-gradient(168deg, #fff9e8, #ffeab4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42), 0 0 20px rgba(255, 200, 90, 0.6);
}

.dex-detail-close {
  position: absolute;
  top: 6px;
  right: 6px;
}

.dex-detail-emoji {
  font-size: 66px;
  line-height: 1;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.15));
}

.dex-detail-label {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #3f3524;
  line-height: 1.4;
}

.dex-detail-meta {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: normal;
  color: #8a7c5f;
}

.dex-detail-desc {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.14);
  font-size: 12px;
  line-height: 1.75;
  color: #574a33;
  text-align: left;
}

.dex-detail-transform-btn {
  margin-top: 13px;
  width: 100%;
  border: none;
  border-radius: 9px;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: #3f3524;
  background: linear-gradient(160deg, #ffe08a, #ffc14d);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.dex-detail-transform-btn.hidden { display: none !important; }

.dex-detail-transform-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
/* そだち70/80 の セクションと そだち50 の デートボタンも、とどくまで
   かくして おく。このプロジェクトには はんようの .hidden ルールが ない ので、
   ここでも 1つずつ 明示的に とじる */
.profile-code-btn.hidden,
.theme-section.hidden,
.dex-section-divider.hidden,
.companion-dex-row.hidden { display: none !important; }

/* とくべつな たびさきの けしき。ほしぞらの ていりゅうじょは よふけの あお、
   きおくの みずうみは しろっぽい もや。どちらも ふつうの 8地域とは
   あきらかに ちがう 空気に なるよう、いろの ふりはばを おおきくとる */
body.region-star_stop { background: radial-gradient(circle at 50% 18%, #2b2f5e 0%, #171a38 55%, #05060f 100%); }
body.region-memory_lake { background: radial-gradient(circle at 50% 20%, #f2fbff 0%, #cfe3ec 55%, #8ba7b5 100%); }

@keyframes mg-p3-hit { 0%,100%{transform:translateX(0)} 33%{transform:translateX(-5px)} 66%{transform:translateX(5px)} }

@keyframes mg-fp-glow{from{filter:drop-shadow(0 5px 4px rgba(0,0,0,.5))}to{filter:drop-shadow(0 0 15px rgba(255,210,70,.95))}}

#capSlider{width:90%;margin:10px auto;display:block}

/* mobile minigame input audit */
.mg-road,.mg-shooter-arena,.mg-p3-scene,.mg-capture3d,.mg-adventure-field,
.mg-swipe-lane,.mg-drag-item,.mg-rank3d-card,.mg-retropet-buttons button {
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

#mgSurfRide.ready{animation:mg-surf-ready .45s ease-in-out infinite alternate;transform:scale(1.04)}

@keyframes mg-surf-ready{from{box-shadow:0 0 0 rgba(255,255,255,0)}to{box-shadow:0 0 18px rgba(255,255,255,.95)}}

/* 暫定5ゴールアート。正式キャラデザイン確定後は画像5枚だけ差し替える。 */
.game-clear-overlay {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 8px 10px 12px;
}
.game-clear-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: 54%;
  object-fit: contain;
  border-radius: 8px;
  image-rendering: pixelated;
  box-shadow: 0 2px 8px rgba(0,0,0,.32);
  flex: 0 1 auto;
}
.game-clear-overlay .game-clear-confetti {
  font-size: 16px;
}
.game-clear-overlay .game-clear-title {
  font-size: 21px;
}
.game-clear-overlay.tier-3 .game-clear-title {
  font-size: 24px;
}
.game-clear-overlay .game-clear-subtitle {
  font-size: 11px;
}
.game-clear-overlay .game-clear-desc {
  margin-top: 1px;
  line-height: 1.45;
  padding: 6px 8px;
}

/* falling block puzzle */
.mg-falling-wrap{display:flex;justify-content:center;margin:6px 0}
.mg-falling-board{display:grid;grid-template-columns:repeat(8,24px);grid-template-rows:repeat(14,24px);gap:2px;padding:7px;border-radius:14px;background:#17191d;box-shadow:inset 0 0 18px rgba(0,0,0,.75);touch-action:none}
.mg-falling-board span{width:24px;height:24px;border-radius:4px;background:#292d34;box-sizing:border-box}
.mg-falling-board span.fixed{background:linear-gradient(#d0d4dc,#8c93a1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.mg-falling-board span.active{background:linear-gradient(#fff4a3,#e8b84c);box-shadow:0 0 8px rgba(255,220,90,.65),inset 0 0 0 2px rgba(255,255,255,.45)}
.mg-falling-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.mg-falling-controls .mg-tap-btn{min-width:58px;min-height:46px}
#fbDrop{min-width:88px}

.mg-pinball-controls{display:flex;justify-content:center;gap:14px;margin-top:9px}.mg-pinball-controls .mg-tap-btn{min-width:100px;min-height:48px}

@keyframes mg-haunt-glow{from{filter:drop-shadow(0 5px 4px rgba(0,0,0,.5))}to{filter:drop-shadow(0 0 18px rgba(255,240,120,1))}}

@keyframes mg-ab-player-lunge{0%{transform:translateX(-50%) scale(1)}45%{transform:translate(-50%,-38px) scale(1.22)}100%{transform:translateX(-50%) scale(1)}}
@keyframes mg-ab-slash{0%{opacity:0;transform:scaleX(.15) rotate(-12deg)}35%{opacity:1}100%{opacity:0;transform:scaleX(1.18) rotate(7deg)}}
@keyframes mg-ab-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-20deg)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(18deg)}}
@keyframes mg-ab-screen-hit{0%,100%{filter:none}35%{filter:brightness(1.55);transform:translateX(-3px)}65%{transform:translateX(3px)}}

/* ================================================================
   Character Renderer
   1形態1PNGを基本に、未制作/読込失敗時はemojiへ自動フォールバック。
   ================================================================ */
.character-visual{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  line-height:1;
  position:relative;
}
.character-asset{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  user-select:none;
  -webkit-user-drag:none;
}
.character-emoji-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.character-visual.has-asset .character-emoji-fallback{display:none}
.character-visual.has-asset.asset-failed .character-asset{display:none}
.character-visual.has-asset.asset-failed .character-emoji-fallback{display:inline-flex}
.character-hero{width:82px;height:82px;font-size:62px}
.character-detail{width:104px;height:104px;font-size:76px}
.character-thumb{width:42px;height:42px;font-size:30px}
.character-medium{width:56px;height:56px;font-size:40px}
.character-companion{width:24px;height:24px;font-size:18px}

#petSprite{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#petSprite > .character-visual{pointer-events:none}
.dex-cell-emoji .character-visual,
.transform-choice-emoji .character-visual,
.profile-partner-emoji .character-visual{margin:auto}

@media (max-width:420px){
  .character-hero{width:76px;height:76px;font-size:58px}
  .character-detail{width:92px;height:92px;font-size:68px}
  .character-thumb{width:38px;height:38px;font-size:28px}
}

/* ================================================================
   canvasミニゲーム きょうつう(ピンボール・3Dめいろ・レース など)
   ================================================================ */
.mg-canvas-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 22px rgba(0,0,0,.35);background:#101820;touch-action:none;-webkit-user-select:none;user-select:none;line-height:0}
.mg-canvas{display:block;width:100%;touch-action:none;-webkit-tap-highlight-color:transparent}
.mg-climb-meter{position:relative;height:22px;margin:10px 8px 6px;border:2px solid #496557;border-radius:6px;background:#e8eee4;overflow:hidden}
.mg-climb-target{position:absolute;top:0;bottom:0;background:#76b878;border-inline:2px solid #275e39}
.mg-climb-marker{position:absolute;top:0;bottom:0;width:4px;transform:translateX(-2px);background:#263b36}
.mg-climb-choice{text-align:center;font-size:12px;font-weight:700;color:var(--text-color,#304d3a);line-height:1.5}
.mg-hold-btn.mg-held,.mg-tap-btn.mg-holding{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15);filter:brightness(.93)}
.mg-pinball-controls{display:flex;justify-content:center;gap:8px;margin-top:9px}
.mg-pinball-controls .mg-tap-btn{flex:1 1 0;min-width:0;min-height:52px;padding:10px 4px;white-space:nowrap}
.mg-pinball-controls .mg-launch-btn{background:linear-gradient(160deg,#fff6d6,#ffd98a);color:#6b4a12}
.mg-pinball-controls .mg-launch-btn:disabled{opacity:.45}

.mg-action-boss-controls .mg-tap-btn,.mg-crane-controls .mg-tap-btn,.mg-falling-controls .mg-tap-btn,.mg-road-controls .mg-tap-btn,.mg-shooter-controls .mg-tap-btn{flex:1 1 0;min-width:0;max-width:120px;padding:10px 4px;white-space:nowrap}
.mg-action-boss-controls,.mg-crane-controls,.mg-falling-controls{gap:8px}

/* 3D(レイキャスト)ビュー きょうつう の そうさボタン */
.mg-fp-controls{display:grid;grid-template-columns:1fr 1.45fr 1fr 1fr;gap:6px;margin-top:8px}
.mg-fp-controls .mg-tap-btn{min-width:0;min-height:52px;padding:8px 2px;font-size:13px;white-space:nowrap;overflow:hidden}
.mg-fp-controls .mg-tap-btn.primary{background:linear-gradient(160deg,#fff6d6,#ffd98a);color:#6b4a12}

/* レース・リズム・たまころがし・ガンナー */
.mg-race-controls,.mg-rhythm-controls,.mg-gunner-controls{display:flex;gap:8px;margin-top:8px}
.mg-race-controls .mg-tap-btn,.mg-rhythm-controls .mg-tap-btn,.mg-gunner-controls .mg-tap-btn{flex:1 1 0;min-width:0;min-height:54px;padding:8px 2px;white-space:nowrap;font-size:15px}
.mg-race-controls .mg-tap-btn.primary,.mg-gunner-controls .mg-tap-btn.primary{background:linear-gradient(160deg,#ffe3e3,#ff9c9c);color:#7a1f1f}
.mg-rhythm-controls .mg-tap-btn{font-size:18px;min-height:60px}
.mg-tilt-dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.mg-tilt-dpad .mg-tap-btn{min-width:0;min-height:46px;padding:6px 2px;font-size:16px}
.mg-gunner-controls .mg-tap-btn.primary{flex:1.7 1 0}

/* 落ちものパズルの ボタン: 上だん=移動と回転、下だん=さげる/いっきに */
.mg-falling-controls{display:grid!important;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.mg-falling-controls .mg-tap-btn{max-width:none;min-height:48px;padding:8px 2px;font-size:14px}
.mg-falling-controls #fbLeft,.mg-falling-controls #fbRight,.mg-falling-controls #fbRotate{grid-column:span 2}
.mg-falling-controls #fbSoft,.mg-falling-controls #fbDrop{grid-column:span 3}
.mg-falling-controls .fb-rotate{background:linear-gradient(160deg,#fff6d6,#ffd98a);color:#6b4a12}
.mg-falling-controls .fb-hard{background:linear-gradient(160deg,#ffe3e3,#ff9c9c);color:#7a1f1f}

@keyframes mg-adv-gem{from{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}to{box-shadow:inset 0 0 10px rgba(255,255,255,.95)}}

/* ================================================================
   ゴール後の がめん(おいわい画面・人生記録カード)を ながれの なかに 置く
   ================================================================
   以前は position:absolute で ふつうの がめんに かぶせていたため、なかみが
   がめんより たかいと したが 見きれ、おわかれバーとも かさなっていた。
   screen-normal と いれかわる ふつうの ブロックに して、たかさは なかみで きめる */
.game-clear-overlay{position:relative;inset:auto;min-height:250px;justify-content:flex-start;overflow:hidden;padding:8px 10px 12px;gap:5px;box-sizing:border-box}
.game-clear-art{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;flex:0 0 auto;image-rendering:auto;background:rgba(255,255,255,.25)}
.game-clear-overlay .game-clear-title{font-size:20px;line-height:1.25;padding:0 4px}
.game-clear-overlay .game-clear-subtitle{font-size:14px}
.game-clear-desc{width:100%;box-sizing:border-box;font-size:11px}
.game-clear-badges{width:100%}
.game-clear-close-btn,.game-clear-freeplay-btn{position:relative;z-index:1;min-height:36px}
.life-card-overlay{position:relative;inset:auto;min-height:250px;justify-content:flex-start;overflow:visible;padding:12px 10px 14px;border-radius:8px;box-sizing:border-box}
.life-card{max-width:100%;word-break:break-word}
.lifecard-line{line-height:1.6;margin:2px 0}
.lifecard-log{line-height:1.5;margin:2px 0;padding-left:36px;text-indent:-36px}
.lifecard-log span{text-indent:0;min-width:34px}
.life-card-next{position:relative;z-index:1;margin-top:6px;min-height:38px}

@keyframes mg-stack-land{0%{transform:translateY(-6px) scaleX(1.04)}60%{transform:translateY(1px) scaleX(.98)}100%{transform:none}}
/* かくとう・タワーディフェンスの ボタン */
.mg-fight-controls{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.mg-fight-controls .mg-tap-btn{min-width:0;min-height:50px;padding:6px 2px;font-size:13px;white-space:nowrap}
.mg-fight-controls #sfLeft,.mg-fight-controls #sfRight{grid-column:span 1;font-size:18px}
.mg-fight-controls #sfPunch,.mg-fight-controls #sfKick{grid-column:span 2}
.mg-fight-controls #sfGuard{grid-column:span 6;min-height:44px;background:linear-gradient(160deg,#e3f0ff,#9cc7ff);color:#12406b}
.mg-fight-controls .punch{background:linear-gradient(160deg,#fff6d6,#ffd98a);color:#6b4a12}
.mg-fight-controls .kick{background:linear-gradient(160deg,#ffe3e3,#ff9c9c);color:#7a1f1f}
.mg-td-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.mg-td-controls .mg-tap-btn{min-width:0;min-height:44px;padding:6px 2px;font-size:13px;white-space:nowrap}
.mg-td-controls .mg-tap-btn.sel{box-shadow:0 0 0 3px #ffd23f inset,0 3px 0 rgba(0,0,0,.15)}
.mg-td-controls .primary{grid-column:span 3;background:linear-gradient(160deg,#ffe3e3,#ff9c9c);color:#7a1f1f}
.mg-tilt-dpad #rgPotion,.mg-tilt-dpad #rgWait{font-size:12px}

/* --- 2026-09-09: ヒント文が みじかい メッセージに かわると ミニゲームの
   たかさが かわって canvas が うえしたに ずれ、タップ位置が くるう。
   ヒント欄は さいてい 3行ぶん たかさを たもつ --- */
.mg-hint{min-height:4.5em}

/* ================= ミニゲームの きろく(じこベスト/ランク) ================= */

/* ゲームが おわった 直後に、ふつうの がめんの うえに ぽんと 出る けっかカード。
   ランクの 文字いろで S/A/B/C/D を ひと目で わかるように する */
.mg-result-toast {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 30, 20, 0.86);
  color: #fff;
  padding: 6px 12px 6px 8px;
  border-radius: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: mg-result-pop 3.6s ease-out forwards;
}
.mg-result-toast.hidden { display: none; }
.mg-result-toast .mg-retry-btn {
  pointer-events: auto;
  margin-left: 4px;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  min-height: 32px;
  font-size: 11px;
  font-weight: 900;
  color: #1d2b1d;
  background: linear-gradient(180deg, #fff6b0, #ffd76a);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.mg-result-toast .mg-retry-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.mg-result-toast .mg-result-body { display: flex; flex-direction: column; gap: 1px; }
.mg-result-toast .mg-result-score { font-size: 12px; font-weight: 900; }
.mg-result-toast .mg-result-sub { font-size: 9px; opacity: 0.9; }
.mg-result-toast .mg-result-sub.new-best { color: #ffe27a; font-weight: bold; }
@keyframes mg-result-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.92); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  16% { transform: translate(-50%, 0) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* ランクの まる。いちらんと けっかカードで 共通 */
.mg-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.mg-rank.rank-S { background: linear-gradient(135deg, #ffd54a, #ff9800); box-shadow: 0 0 6px rgba(255, 200, 0, 0.7); }
.mg-rank.rank-A { background: linear-gradient(135deg, #ff7b9c, #e53957); }
.mg-rank.rank-B { background: linear-gradient(135deg, #64b5f6, #1e6fd9); }
.mg-rank.rank-C { background: linear-gradient(135deg, #81c784, #2e8b57); }
.mg-rank.rank-D { background: linear-gradient(135deg, #b0b0b0, #7a7a7a); }
.mg-rank.rank-none { background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.45); text-shadow: none; font-size: 11px; }

/* ================= じっせき > ゲームきろく タブ ================= */
.ach-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.ach-tab {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.08);
  color: #16330f;
  cursor: pointer;
}
.ach-tab.active {
  background: #16330f;
  color: #fff;
}
.ach-grid.hidden { display: none; }

.game-list-hint {
  font-size: 9px;
  opacity: 0.75;
  text-align: center;
}
.game-section-title {
  font-size: 11px;
  font-weight: 900;
  margin: 6px 0 0;
  padding-left: 2px;
}
.game-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-radius: 8px;
  padding: 6px 8px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #fffdf5, #fff1cf);
  border-color: rgba(255, 196, 0, 0.35);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.2s ease;
}
.game-cell:active { transform: scale(0.97); }
.game-cell.unplayed {
  background: rgba(120, 120, 120, 0.12);
  border-color: rgba(120, 120, 120, 0.25);
}
.game-cell.spotlight { border-color: #ff9800; box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.35); }
.game-cell-emoji { font-size: 22px; flex-shrink: 0; width: 26px; text-align: center; }
.game-cell-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.game-cell-label { font-size: 10px; font-weight: bold; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.game-cell-desc { font-size: 9px; line-height: 1.4; opacity: 0.85; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.game-cell-tag {
  font-size: 7px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}
.game-cell-tag.now { background: #ff9800; color: #fff; }
.game-cell-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  min-width: 34px;
}
.game-cell-best { font-size: 9px; font-weight: bold; font-variant-numeric: tabular-nums; }
.game-cell-plays { font-size: 7px; opacity: 0.7; }

/* ================= ゲームを とちゅうで やめる ================= */

/* がめんと したの ボタンの あいだの すきまに うかぶ、たかさ 0 の レイヤー。
   レイアウトを いっさい うごかさない(canvas の いちが ずれない)ように
   height: 0 で おき、なかみだけ 絶対配置で うかせる */
.mg-quit {
  position: relative;
  height: 0;
  z-index: 5;
}
.mg-quit.hidden { display: none; }
.mg-quit-inner {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.mg-quit-btn,
.mg-quit-yes,
.mg-quit-no {
  border: none;
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  font-family: inherit;
}
.mg-quit-btn {
  background: rgba(40, 20, 35, 0.78);
  color: #fff;
}
.mg-quit-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.mg-quit-btn.hidden { display: none; }
.mg-quit-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(40, 20, 35, 0.9);
  color: #fff;
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  white-space: nowrap;
}
.mg-quit-confirm.hidden { display: none; }
.mg-quit-ask { font-size: 10px; font-weight: bold; }
.mg-quit-yes { background: #e53957; color: #fff; padding: 3px 10px; }
.mg-quit-no { background: #fff; color: #16330f; padding: 3px 10px; }

/* ================= はじめての ゲームの せつめいカード ================= */
.mg-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px 14px;
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.mg-intro-badge {
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: #ff9800;
  padding: 2px 10px;
  border-radius: 999px;
}
.mg-intro-emoji { font-size: 44px; line-height: 1.1; }
.mg-intro-name { font-size: 16px; font-weight: 900; }
.mg-intro-genre { font-size: 10px; font-weight: bold; opacity: 0.75; }
.mg-intro-desc { font-size: 11px; font-weight: bold; }
.mg-intro-controls {
  font-size: 10px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 8px 10px;
  max-width: 280px;
}
.mg-intro-controls-title { font-weight: 900; margin-bottom: 2px; }
.mg-intro-demo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: 90px;
  margin: 2px auto 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.mg-intro-start { min-width: 160px; min-height: 48px; font-size: 15px; margin-top: 6px; }
.mg-intro-note { font-size: 9px; opacity: 0.7; }

/* ================= ゲームきろく: ならびかえ と きょうのチャレンジ ================= */
.game-list-sorts { display: flex; gap: 4px; flex-wrap: wrap; }
.game-list-sort {
  border: none; border-radius: 999px; padding: 4px 9px; font-size: 9px; font-weight: bold;
  background: rgba(0, 0, 0, 0.08); color: #16330f; cursor: pointer; font-family: inherit;
}
.game-list-sort.active { background: #16330f; color: #fff; }
.daily-card {
  border-radius: 10px; padding: 7px 8px; border: 2px solid #ffb300;
  background: linear-gradient(135deg, #fff8dc, #ffe9a8);
  box-shadow: 0 2px 6px rgba(255, 179, 0, 0.35);
}
.daily-card.done { border-color: #9ccc65; background: linear-gradient(135deg, #f1f8e9, #dcedc8); box-shadow: none; }
.daily-head { font-size: 10px; font-weight: 900; margin-bottom: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; }
.daily-streak { font-size: 9px; background: #ff7043; color: #fff; padding: 1px 7px; border-radius: 999px; }
/* Reward copy needs its own width; controls must not squeeze it at 320px. */
.daily-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px; }
.daily-card .game-cell-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.daily-status { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.daily-score { font-size: 10px; font-weight: bold; }
.daily-start { min-height: 34px; padding: 4px 12px; font-size: 11px; }

/* じどうバックアップ(セーブの 3世代) */
.save-snap-title {
  margin-top: 10px;
  font-size: 11px;
  font-weight: bold;
  color: #6b3654;
}
.save-snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(107, 54, 84, 0.25);
}
.save-snap-label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  line-height: 1.4;
  color: #4a2b3c;
}
.save-snap-btn {
  flex: none;
  white-space: nowrap;
}
.save-snap-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ゲームきろく: まとめカード・ジャンルの しんちょく・ランクの いろ */
.records-summary {
  border-radius: 10px; padding: 8px 9px;
  background: linear-gradient(135deg, #fffdf5, #f3ecff);
  border: 2px solid rgba(110, 80, 160, 0.25);
  display: flex; flex-direction: column; gap: 5px;
}
.records-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.records-title { font-size: 11px; font-weight: 900; }
.records-headline { font-size: 9px; font-weight: bold; color: #5a3d8a; background: rgba(255, 255, 255, 0.7); padding: 2px 8px; border-radius: 999px; }
.records-row { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.records-label { width: 44px; flex-shrink: 0; font-weight: bold; opacity: 0.8; white-space: nowrap; }
.records-num { flex-shrink: 0; min-width: 44px; text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
.records-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; }
.records-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7fd0ff, #5a8dff); transition: width 0.4s ease; }
.rank-bar-seg { display: block; height: 100%; }
.rank-bar-seg.seg-S { background: linear-gradient(135deg, #ffd54a, #ff9800); }
.rank-bar-seg.seg-A { background: linear-gradient(135deg, #ff7b9c, #e53957); }
.rank-bar-seg.seg-B { background: linear-gradient(135deg, #64b5f6, #1e6fd9); }
.rank-bar-seg.seg-C { background: linear-gradient(135deg, #81c784, #2e8b57); }
.rank-bar-seg.seg-D { background: linear-gradient(135deg, #b0b0b0, #7a7a7a); }
.rank-bar-seg.seg-none { background: rgba(0, 0, 0, 0.06); }
.records-ranks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 10px; font-weight: bold; }
.rank-count { display: inline-flex; align-items: center; gap: 3px; }
.records-ranks .mg-rank { width: 18px; height: 18px; font-size: 10px; }
.mg-rank.mini { width: 14px; height: 14px; font-size: 8px; vertical-align: middle; }
.game-section-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.game-section-meta { font-size: 9px; font-weight: bold; opacity: 0.75; display: inline-flex; align-items: center; gap: 2px; }
.game-cell.accent-S { border-color: rgba(255, 170, 0, 0.75); background: linear-gradient(135deg, #fffdf0, #ffefb8); }
.game-cell.accent-A { border-color: rgba(229, 57, 87, 0.45); }
.game-cell.accent-B { border-color: rgba(30, 111, 217, 0.4); }
.game-cell.accent-C { border-color: rgba(46, 139, 87, 0.4); }
.game-cell.accent-D { border-color: rgba(120, 120, 120, 0.4); background: linear-gradient(135deg, #fbfaf6, #f1efe8); }
.game-cell-record { min-width: 40px; }

/* じっせき: まとめカード・だんかい・NEW */
.ach-summary { margin-bottom: 2px; }
.records-bar-fill.ach-fill { background: linear-gradient(90deg, #ffd54a, #ff9800); }
.ach-tier-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.ach-tier-chip { font-size: 9px; font-weight: bold; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(110, 80, 160, 0.2); }
.ach-tier-chip.done { background: linear-gradient(135deg, #fff6d9, #ffe27a); border-color: #ffc400; }
.ach-mini-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 9px; }
.ach-mini-title { font-weight: bold; opacity: 0.8; margin-right: 2px; }
.ach-mini { padding: 1px 6px; border-radius: 999px; background: rgba(255, 196, 0, 0.25); font-weight: bold; }
.ach-mini.new { background: #ff7043; color: #fff; }
.ach-mini.goal { background: rgba(0, 0, 0, 0.08); }
.ach-new { font-size: 7px; font-weight: 900; color: #fff; background: #ff7043; padding: 1px 5px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }

/* じかんたいの いろは本体の背面に置き、文字のコントラストを保つ。
   よるは あお、ゆうがたは オレンジ、あさは きいろ。ゲーム中は はずす */
.time-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 1.2s ease, opacity 0.6s ease;
}
.time-tint.suppressed { opacity: 0; }
body[data-time="night"] .time-tint { background: linear-gradient(180deg, rgba(14, 20, 70, 0.3), rgba(18, 24, 72, 0.18)); }
body[data-time="evening"] .time-tint { background: linear-gradient(180deg, rgba(255, 140, 60, 0.16), rgba(120, 60, 120, 0.12)); }
body[data-time="morning"] .time-tint { background: linear-gradient(180deg, rgba(255, 240, 170, 0.14), rgba(255, 235, 150, 0.04)); }

/* てんきの えんしゅつ(あめ・ゆき・くも・ひざし・よるの ほし)。
   season-front-fx と おなじ そう(z=2)で、ゲームや メニュー中は けす */
.weather-fx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.weather-fx.suppressed { display: none; }
.wx-drop {
  position: absolute;
  top: -12%;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(160, 200, 255, 0), rgba(110, 165, 255, 0.75));
  animation: wx-rain linear infinite;
}
@keyframes wx-rain {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-28px, 122vh); }
}
.wx-flake {
  position: absolute;
  top: -8%;
  line-height: 1;
  color: #fff;
  opacity: 0.85;
  text-shadow: 0 0 5px rgba(140, 170, 255, 0.7);
  animation: season-fx-fall linear infinite;
}
.wx-cloud {
  position: absolute;
  line-height: 1;
  opacity: 0.6;
  animation: wx-cloud linear infinite;
}
@keyframes wx-cloud {
  0% { transform: translateX(-24vw); }
  100% { transform: translateX(124vw); }
}
.wx-sun {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 130, 0.6), rgba(255, 200, 80, 0.18) 45%, transparent 70%);
  animation: wx-sun 6s ease-in-out infinite alternate;
}
@keyframes wx-sun {
  0% { transform: scale(0.94); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 1; }
}
.wx-spark {
  position: absolute;
  line-height: 1;
  opacity: 0;
  animation: wx-spark ease-in-out infinite;
}
@keyframes wx-spark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.85; transform: scale(1.1); }
}
.wx-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #fff;
  animation: wx-star ease-in-out infinite alternate;
}
@keyframes wx-star {
  0% { opacity: 0.15; }
  100% { opacity: 1; }
}
.wx-moon {
  position: absolute;
  top: 6%;
  right: 6%;
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 200, 0.7));
}
@media (prefers-reduced-motion: reduce) {
  .wx-drop, .wx-flake, .wx-cloud, .wx-spark, .wx-star, .wx-sun { animation: none; }
  .wx-drop, .wx-flake { display: none; }
}

/* せかい がめんの「いまの せかい」カード */
.world-now-card {
  border-radius: 12px;
  padding: 9px 10px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #f4fbff, #eef3ff);
  border: 1px solid rgba(80, 110, 170, 0.25);
  font-size: 12px;
  line-height: 1.5;
}
.world-now-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.world-now-chip { background: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 2px 9px; font-weight: bold; font-size: 12px; }
.world-now-title { font-weight: 900; font-size: 12px; margin-right: 2px; }
.world-now-effects { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.world-now-effect { display: flex; gap: 6px; align-items: flex-start; }
.world-now-effect .icon { flex: none; }
.world-now-games { margin-top: 4px; font-size: 11px; }
.world-now-games .up { color: #1d7a3c; font-weight: bold; }
.world-now-games .down { color: #8a4a1d; }

/* ずかん: まとめ と しゅぞくごとの 見出し */
.dex-summary { margin-bottom: 8px; }
.records-bar-fill.dex-fill { background: linear-gradient(90deg, #8fd694, #2e8b57); }
.records-bar-fill.dex-fill-rare { background: linear-gradient(90deg, #ffd54a, #ff7b9c); }
.dex-next { font-size: 10px; font-weight: bold; color: #2e5d3a; }
.dex-line-block { border-radius: 8px; padding: 3px 4px; background: rgba(255, 255, 255, 0.35); }
.dex-line-block.unknown { background: rgba(0, 0, 0, 0.04); }
.dex-line-head { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: bold; margin-bottom: 2px; }
.dex-line-name { flex: none; min-width: 52px; }
.dex-line-rare { font-size: 8px; color: #b8860b; }
.dex-line-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.dex-line-fill { display: block; height: 100%; background: linear-gradient(90deg, #8fd694, #2e8b57); }
.dex-line-count { flex: none; font-variant-numeric: tabular-nums; opacity: 0.8; }

/* たび: 地域カード */
#travelRegionGrid.theme-grid, #travelSpecialGrid.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.theme-swatch.travel-card {
  align-items: stretch;
  text-align: left;
  gap: 4px;
  padding: 6px 7px;
  border-radius: 10px;
  border: 2px solid rgba(22, 51, 15, 0.15);
  background: rgba(255, 255, 255, 0.55);
}
.theme-swatch.travel-card.visited { border-color: rgba(46, 139, 87, 0.45); }
.theme-swatch.travel-card.selected { background: #dcece1; border-color: #2e8b57; }
.theme-swatch.travel-card:disabled { cursor: default; }
.travel-card-head { display: flex; align-items: center; gap: 6px; }
.travel-card-head .theme-swatch-circle { flex: none; }
.travel-card-title { font-size: 11px; font-weight: bold; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.travel-card-tag { font-size: 8px; padding: 1px 6px; border-radius: 999px; background: rgba(46, 139, 87, 0.18); color: #2e5d3a; }
.travel-card-tag.now { background: #2e8b57; color: #fff; }
.travel-card-lines { display: flex; flex-direction: column; gap: 1px; font-size: 8.5px; line-height: 1.35; opacity: 0.85; }

/* たいよう・つき・ほし・くも は、ペットの ステージに かさなる わくの なか */
.wx-sky {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  border-radius: 14px;
}
.wx-sky .wx-star { width: 2px; height: 2px; }

/* いっしょうの ねんぴょう */
.life-timeline { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.life-timeline-row { display: grid; grid-template-columns: 38px 18px 1fr; gap: 4px; align-items: start; font-size: 10px; line-height: 1.4; }
.life-timeline-age { font-weight: bold; color: #6b3654; white-space: nowrap; }
.life-timeline-icon { text-align: center; }
.life-timeline-text { min-width: 0; overflow-wrap: anywhere; }
.life-timeline-empty { font-size: 10px; opacity: 0.7; }
.life-timeline-head { font-size: 11px; font-weight: bold; margin: 2px 0 4px; }
.lifecard-timeline { max-height: 150px; overflow-y: auto; text-align: left; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.lifecard-timeline .life-timeline-age { color: inherit; opacity: 0.85; }
.lifecard-code { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.lifecard-code .profile-code-input { width: 100%; font-size: 8px; }
.past-life { border-radius: 8px; padding: 4px 6px; margin-top: 4px; background: rgba(255, 255, 255, 0.5); font-size: 10px; }
.past-life summary { cursor: pointer; font-weight: bold; }
.past-life .life-timeline { margin: 4px 0 6px; }
.life-code-card { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(107, 54, 84, 0.25); }
.life-code-head { font-size: 11px; font-weight: bold; }
.life-code-line { font-size: 10px; opacity: 0.85; }
/* エラーのきろく */
.error-log summary { list-style: revert; cursor: pointer; }
.error-log-row { display: grid; grid-template-columns: 62px 56px 1fr; gap: 4px; font-size: 9px; line-height: 1.35; padding: 2px 0; border-bottom: 1px dashed rgba(107, 54, 84, 0.2); }
.error-log-time, .error-log-where { opacity: 0.75; white-space: nowrap; }
.error-log-msg { min-width: 0; overflow-wrap: anywhere; font-family: monospace; }

/* ================= シールちょう ================= */
.sticker-tabs { margin-bottom: 6px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: thin; }
.sticker-tabs .ach-tab { flex: 0 0 58px; font-size: 11px; min-height: 38px; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; }
.sticker-tabs .ach-tab small { font-size: 9px; opacity: 0.75; }
.sticker-page-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sticker-page-controls label { font-size: 10px; font-weight: bold; white-space: nowrap; }
.sticker-page-controls select { flex: 1 1 150px; min-width: 0; min-height: 36px; border: 1px solid rgba(107, 54, 84, 0.22); border-radius: 9px; background: rgba(255,255,255,0.84); padding: 4px 8px; font: inherit; color: inherit; }
.sticker-page-controls .profile-code-btn { margin: 0; min-height: 36px; }
.sticker-page-controls .profile-code-btn:disabled { opacity: 0.5; }
.sticker-page-hint { margin: 2px 0 6px; }
.sticker-board-wrap { position: relative; margin-bottom: 8px; }
.sticker-board {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.12);
  background: #fff8e8;
}
.sticker-board-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; opacity: 0.5; pointer-events: none; }
.sticker-placed {
  position: absolute;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.sticker-placed::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.sticker-placed .character-visual { width: 44px; height: 44px; font-size: 32px; }
.sticker-placed .care-icon { width: 36px; height: 36px; }
.sticker-placed.selected::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff8fb8; }
.sticker-tools { display: flex; gap: 4px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.sticker-tools button { min-width: 42px; min-height: 36px; border: none; border-radius: 10px; background: #fff; font-size: 15px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); cursor: pointer; font-family: inherit; }
.sticker-tools button:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.sticker-tools.hidden { display: none; }
.sticker-tasks { display: flex; flex-direction: column; gap: 4px; }
.sticker-task { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); font-size: 10px; font-weight: bold; }
.sticker-task.done { opacity: 0.6; }
.sticker-task.done span:nth-child(2) { text-decoration: line-through; }
.sticker-pack-controls { display: grid; grid-template-columns: 1fr; gap: 6px; }
.sticker-pack-controls label { font-size: 10px; font-weight: bold; margin-top: 2px; }
.sticker-pack-controls select { width: 100%; min-height: 38px; border: 1px solid rgba(107,54,84,.22); border-radius: 9px; background: rgba(255,255,255,.84); padding: 5px 8px; font: inherit; color: inherit; }
.sticker-pack-controls .profile-code-btn,
.sticker-page-action .profile-code-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin: 0; }
.sticker-pack-controls .profile-code-btn:disabled { opacity: 0.5; cursor: default; }
.sticker-pack-controls .care-icon { width: 14px; height: 14px; }
.sticker-page-action { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(107,54,84,.12); }
.sticker-pack-result { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.sticker-pack-result.hidden { display: none; }
.sticker-pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 9px;
  font-weight: bold;
  min-width: 70px;
  animation: stickerPop 0.5s ease both;
}
.sticker-pack-card:nth-child(2) { animation-delay: 0.15s; }
.sticker-pack-card:nth-child(3) { animation-delay: 0.3s; }
.sticker-pack-card.rarity-rare { box-shadow: 0 0 0 2px #e0b45c, 0 2px 6px rgba(0, 0, 0, 0.15); }
.sticker-pack-card.rarity-uncommon { box-shadow: 0 0 0 2px #9ec5ff, 0 2px 6px rgba(0, 0, 0, 0.15); }
.sticker-pack-card .badge-new { color: #e0457b; }
.sticker-pack-card .badge-dup { color: #6b7a99; }
.sticker-pack-rarity { font-size: 8px; opacity: 0.7; }
@keyframes stickerPop { from { transform: scale(0.4) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sticker-pack-card { animation: none; } }
.sticker-export { margin-top: 8px; text-align: center; }
.sticker-export.hidden { display: none; }
.sticker-export img { max-width: 100%; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.sticker-owned-count { font-weight: normal; font-size: 10px; opacity: 0.8; margin-left: 4px; }
.sticker-filter { margin-bottom: 6px; flex-wrap: wrap; }
.sticker-filter .ach-tab { font-size: 10px; min-height: 32px; padding: 4px 2px; flex: 1 1 28%; }
.sticker-tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.sticker-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: none;
  border-radius: 8px;
  padding: 4px 2px;
  min-height: 66px;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}
.sticker-cell:active { transform: scale(0.96); }
.sticker-cell.locked { opacity: 0.45; cursor: default; }
.sticker-cell.used { opacity: 0.6; }
.sticker-cell .sticker-cell-art { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 26px; line-height: 1; }
.sticker-cell .character-visual { width: 36px; height: 36px; font-size: 26px; }
.sticker-cell .care-icon { width: 30px; height: 30px; }
.sticker-cell-label { font-size: 7px; font-weight: bold; line-height: 1.15; text-align: center; overflow: hidden; max-height: 2.3em; word-break: break-all; }
.sticker-cell-count { position: absolute; top: 1px; right: 2px; font-size: 8px; font-weight: 900; background: #ffd76a; border-radius: 999px; padding: 0 4px; }
.sticker-cell-used { font-size: 7px; color: #6b7a99; }
.sticker-cell.rarity-rare { box-shadow: inset 0 0 0 1px #e0b45c; }
.sticker-cell.rarity-uncommon { box-shadow: inset 0 0 0 1px #9ec5ff; }
.sticker-cell.new::after { content: 'NEW'; position: absolute; top: 1px; left: 3px; font-size: 7px; color: #e0457b; font-weight: 900; }
.menu-grid #stickerBtn { background: #fff4d6; color: #8a6a1e; }

/* ================= ミニゲームの そうさ配置(親指の とどく したがわに) =================
   ゲーム画面の すぐ したに ボタンが あると、がめんの まんなかを おす ことに
   なって おしまちがえる。せつめい(mg-hint)の つぎに くる そうさブロックを
   がめんの したに よせ、ボタンも すこし 大きく する */
.minigame-overlay > .mg-hint + .mg-race-controls,
.minigame-overlay > .mg-hint + .mg-tilt-dpad,
.minigame-overlay > .mg-hint + .mg-gunner-controls,
.minigame-overlay > .mg-hint + .mg-fp-controls,
.minigame-overlay > .mg-hint + .mg-falling-controls,
.minigame-overlay > .mg-hint + .mg-td-controls,
.minigame-overlay > .mg-hint + .mg-rhythm-controls,
.minigame-overlay > .mg-hint + .mg-pinball-controls,
.minigame-overlay > .mg-hint + .mg-fight-controls {
  margin-top: auto;
  padding-top: 8px;
  padding-bottom: 10px;
}
/* :has が つかえる ブラウザでは、せつめいも ボタンと いっしょに したへ
   (ゲーム画面 → あき → せつめい → ボタン の ならび)。つかえない ときは
   うえの ルールで ボタンだけ したに いく */
.minigame-overlay > .mg-hint:has(+ .mg-race-controls, + .mg-tilt-dpad, + .mg-gunner-controls, + .mg-fp-controls, + .mg-falling-controls, + .mg-td-controls, + .mg-rhythm-controls, + .mg-pinball-controls, + .mg-fight-controls) {
  margin-top: auto;
  padding-top: 6px;
}
.mg-race-controls, .mg-tilt-dpad, .mg-gunner-controls, .mg-fp-controls, .mg-falling-controls,
.mg-td-controls, .mg-rhythm-controls, .mg-pinball-controls, .mg-fight-controls, .mg-hold-btn, button[data-key], button[data-hold] {
  touch-action: none;
}
.mg-tilt-dpad .mg-tap-btn { min-height: 54px; font-size: 18px; }
.mg-race-controls .mg-tap-btn, .mg-gunner-controls .mg-tap-btn { min-height: 58px; }
.mg-fp-controls .mg-tap-btn { min-height: 56px; }

/* ================= そうさブロックの ならべかえ(ハンドル ひだり・メイン みぎ) ================= */
.mg-race-controls.mg-split { display: grid; grid-template-columns: 1fr 1fr 1.7fr; grid-template-areas: "l r p"; gap: 8px; }
.mg-race-controls.mg-split [data-pos="l"] { grid-area: l; }
.mg-race-controls.mg-split [data-pos="r"] { grid-area: r; }
.mg-race-controls.mg-split [data-pos="p"] { grid-area: p; min-height: 64px; font-size: 16px; }
.mg-gunner-controls.mg-split-dpad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: ". u . p" "l d r p";
  gap: 6px;
}
.mg-gunner-controls.mg-split-dpad .mg-tap-btn { min-height: 48px; }
.mg-gunner-controls.mg-split-dpad [data-pos="u"] { grid-area: u; }
.mg-gunner-controls.mg-split-dpad [data-pos="l"] { grid-area: l; }
.mg-gunner-controls.mg-split-dpad [data-pos="d"] { grid-area: d; }
.mg-gunner-controls.mg-split-dpad [data-pos="r"] { grid-area: r; }
.mg-gunner-controls.mg-split-dpad [data-pos="p"] { grid-area: p; min-height: 100px; font-size: 16px; }

/* ================= ？そうさ(ゲーム中の せつめい) ================= */
.mg-help-btn {
  border: none; border-radius: 999px; font-size: 10px; font-weight: bold; padding: 4px 10px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); font-family: inherit; margin-right: 6px;
  background: rgba(255, 255, 255, 0.92); color: #4a2a3d;
}
.mg-help-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.mg-help {
  position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 10, 20, 0.45); border-radius: 10px;
}
.mg-help.hidden { display: none; }
.mg-help-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 300px;
  padding: 14px 12px 12px; border-radius: 16px; background: #fffaf2; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.mg-help-title { font-size: 15px; font-weight: 900; }
.mg-help-text { font-size: 11px; line-height: 1.6; font-weight: bold; }
.mg-help-note { font-size: 9px; opacity: 0.7; }
.mg-help-close { min-width: 140px; min-height: 44px; }

/* ================= タッチパッド(トラックパッド型) ================= */
.mg-pad-row { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.mg-pad {
  position: relative;
  flex: 1 1 auto;
  min-height: 92px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.12);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  cursor: grab;
}
.mg-pad.active { background: rgba(255, 255, 255, 0.24); }
.mg-pad-label { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-size: 9px; font-weight: bold; opacity: 0.55; pointer-events: none; }
.mg-pad-dot {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.16); opacity: 0.55; pointer-events: none;
  transition: opacity 0.15s;
}
.mg-pad.active .mg-pad-dot { opacity: 1; }
.mg-pad-key { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; top: 0; border: 0; padding: 0; }
.mg-pad-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; min-width: 92px; }
.mg-pad-actions .mg-tap-btn { flex: 1 1 0; min-width: 92px; min-height: 42px; padding: 6px 4px; font-size: 14px; white-space: nowrap; }
.mg-pad-actions .mg-tap-btn:only-child { min-height: 92px; }
.mg-pad-actions.wide { min-width: 120px; }
.minigame-overlay > .mg-hint + .mg-pad-row, .minigame-overlay > .mg-hint + .mg-pad { margin-top: auto; padding-top: 8px; padding-bottom: 10px; }
.minigame-overlay > .mg-hint:has(+ .mg-pad-row, + .mg-pad) { margin-top: auto; padding-top: 6px; }
.minigame-overlay > .mg-pad-row { touch-action: none; }

/* ================= クイックモード ================= */
.qk-header { align-items: center; }
.qk-timebar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.18); margin: 4px 0 6px; overflow: hidden; }
.qk-timefill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd23f, #ff8a3d); border-radius: 3px; }
.qk-wrap { position: relative; }
.qk-cue {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--qk-cue-size, 40px); font-weight: 900; color: #fff; letter-spacing: 0.04em; pointer-events: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 0, 0, 0.35);
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 70%);
}
.qk-cue.pop { animation: qkPop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes qkPop { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); opacity: 1; } }
/* ○/✕ は うえの バッジ。全面の いろは うすくして、ゲームの さいごの 絵(せいこう・しっぱいの うごき)を 見せる */
.qk-flash {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8px;
  pointer-events: none; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.qk-flash.ok { background: rgba(70, 200, 120, 0.18); }
.qk-flash.ng { background: rgba(230, 70, 90, 0.2); }
.qk-badge { display: flex; align-items: center; gap: 6px; padding: 2px 16px 4px; border-radius: 999px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); animation: qkFlash 0.5s ease both; }
.qk-flash.ok .qk-badge { background: rgba(46, 170, 96, 0.92); }
.qk-flash.ng .qk-badge { background: rgba(214, 52, 74, 0.92); }
.qk-flash .qk-ok, .qk-flash .qk-ng { font-size: 56px; line-height: 1; }
.qk-flash small { font-size: 18px; }
@keyframes qkFlash { from { transform: scale(0.7); opacity: 0; } 30% { transform: scale(1.05); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.qk-final {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(20, 24, 40, 0.78); color: #fff; font-weight: 900; text-align: center;
}
.qk-final-title { font-size: 22px; }
.qk-final-big { font-size: 48px; line-height: 1; }
.qk-final-big small { font-size: 20px; opacity: 0.8; }
.qk-final-sub { font-size: 13px; opacity: 0.9; }
.qk-hint { min-height: 2.6em; }
.quick-card .daily-head { display: flex; align-items: center; gap: 6px; }
.menu-grid #quickBtn .menu-emoji { font-size: 22px; line-height: 1; }
.qk-cue.hidden, .qk-flash.hidden, .qk-final.hidden { display: none; }
.quick-card .daily-head .quick-list-toggle { margin-left: auto; font-size: 11px; font-weight: bold; padding: 5px 10px; border: none; border-radius: 999px; background: #ff8fb8; color: #fff; font-family: inherit; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); cursor: pointer; }
.quick-card .daily-head .quick-list-toggle:active { transform: translateY(1px); box-shadow: none; }
.quick-solo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.quick-solo-start { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.8); font-family: inherit; color: inherit; cursor: pointer; text-align: left; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }
.quick-solo-start:active { transform: translateY(1px); }
.quick-solo-cue { font-size: 12px; font-weight: 900; }
.quick-solo-motif { font-size: 9px; opacity: 0.7; }
.quick-solo-best { font-size: 10px; font-weight: bold; color: #e0457b; }

/* ================= めぐる ================= */
.meguru-section { padding-bottom: 0; }
.meguru-enter-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #fff2c8, #ffd9a3); color: #4a3418; font-family: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
}
.meguru-enter-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16); }
.meguru-enter-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.meguru-enter-icon .care-icon, .meguru-enter-icon .ui-icon { width: 30px; height: 30px; }
.meguru-enter-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meguru-enter-title { font-size: 15px; font-weight: 900; }
.meguru-enter-sub { font-size: 10px; opacity: 0.8; }
.mg-meguru-header { align-items: center; }
.mg-meguru-header .care-icon, .mg-meguru-header .ui-icon { width: 16px; height: 16px; vertical-align: -3px; }
.mgr-wrap { position: relative; }
.mgr-banner {
  position: absolute; left: 10px; right: 10px; top: 18%; text-align: center; pointer-events: none;
  font-size: 17px; font-weight: 900; line-height: 1.3; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.6);
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  animation: qkPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.mgr-banner.hidden { display: none; }
/* めぐる: たんさく がめんが しゅやく。ヘッダー・ヒント・パッドは ほそく・こぶりに(おしやすさは たもつ) */
.meguru-overlay { gap: 0; }
.meguru-overlay .mg-meguru-header { margin-bottom: 4px; font-size: 11px; line-height: 1.2; gap: 6px; }
.meguru-overlay .mg-meguru-header > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meguru-overlay .mg-meguru-header > span:first-child { flex: 1 1 auto; min-width: 0; }
/* ヒントは 1ぎょうだと ほそい がめんで おしりが 「…」で きれていた。
   2ぎょうまで おりかえして さいごまで 見せる(3ぎょうめは かくす) */
/* たかさを 2ぎょうぶんで こていする。ばしょの なまえが あとから アタマに
   つく(「【えきまえ】…」)と ぎょうが ふえて、たんさく がめんが はみ出して
   ボタンが 見きれていた */
.mgr-hint { min-height: 2.6em; margin-top: 4px; font-size: 11px; line-height: 1.3; padding: 0 4px; transition: opacity 0.18s ease;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.meguru-overlay .mg-pad-row { margin-top: 6px; gap: 6px; }
/* その ばで いみの ない ボタンは **ほんとうに けす**。これが なかったので
   「のる」が どこでも 出て いた(class は ついて いたが、けす きまりが なかった) */
.meguru-overlay .mg-tap-btn.hidden { display: none; }
/* こえて いる あいだの ロックを 目でも わかる ように する */
.meguru-overlay .mg-tap-btn:disabled,
.meguru-overlay .mgr-map-btn:disabled { opacity: 0.45; cursor: default; }
.meguru-overlay .mg-pad { min-height: 112px; }
.meguru-overlay .mg-pad-actions { min-width: 88px; gap: 5px; }
.meguru-overlay .mg-pad-actions .mg-tap-btn { min-width: 88px; min-height: 34px; padding: 4px 4px; font-size: 13px; }
.mgr-wrap .mg-canvas { border-radius: 16px; }
/* .mg-canvas-wrap は line-height: 0(canvas の すきま けし)。そのままだと
   なかの もじの ぎょうの たかさが 0 に なり、overflow: hidden で もじが
   見きれる。ここで はっきり ぎょうの たかさを あたえる */
.mgr-spot { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 11px; line-height: 1.45; font-weight: bold; pointer-events: none; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-spot.hidden { display: none; }
/* 3D v2(2026-10-01): ランドマークを はじめて 見つけた とき、toast の かわりに 左上の 名まえを 1.6 秒 だけ 静かに 強調 */
.mgr-spot.mgr-spot-found { animation: mgr-spot-found 1.6s ease-out 1; }
@keyframes mgr-spot-found { 0% { background: rgba(255, 236, 160, 0.78); color: #3a2a10; } 100% { background: rgba(0, 0, 0, 0.42); color: #fff; } }

/* ===== めぐる: みつけた しらせ(はっけん つうち) =====
   おび(.mgr-banner)は 地域の おしらせ せんよう。ばしょの はっけんは ここ。
   いちを 上と下で わけて いる ので、2つが かさなって よめなく ならない。
   ちず ボタン(みぎした)より 上に おき、なぞる パッドにも かからない。
   pointer-events は 出さない ので、出て いる あいだ も あるける(§17) */
.mgr-found { position: absolute; left: 8px; right: 8px; bottom: 46px; z-index: 4;
  display: flex; justify-content: center; pointer-events: none;
  animation: qkPop 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.mgr-found.hidden { display: none; }
.mgr-found-card { display: flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 6px 12px; border-radius: 14px; background: rgba(22, 22, 28, 0.74); color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32); }
.mgr-found-icon { font-size: 16px; line-height: 1.2; flex: 0 0 auto; }
.mgr-found-icon.hidden { display: none; }
.mgr-found-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mgr-found-title { font-size: 14px; font-weight: 900; line-height: 1.3;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.mgr-found-sub { font-size: 10px; line-height: 1.3; opacity: 0.82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-found-sub.hidden { display: none; }
/* 地区(ちずが ひろがる)と みち(せかいの ちず)は いろで みわけ が つく */
.mgr-found-zone .mgr-found-card { background: rgba(26, 38, 30, 0.76); }
.mgr-found-link .mgr-found-card { background: rgba(22, 34, 52, 0.78); box-shadow: 0 0 0 1px rgba(150, 196, 255, 0.5), 0 3px 10px rgba(0, 0, 0, 0.32); }
/* とくべつな はっけん(ひみつ・おおきな めじるし)だけ すこし つよく。
   それでも がめんは ふさがない・ボタンも 出さない */
.mgr-found-strong { bottom: 52px; }
.mgr-found-strong .mgr-found-card { padding: 8px 14px; }
.mgr-found-strong .mgr-found-title { font-size: 16px; }
.mgr-found-landmark .mgr-found-card { background: rgba(48, 36, 16, 0.82);
  box-shadow: 0 0 0 2px rgba(255, 216, 130, 0.9), 0 4px 14px rgba(0, 0, 0, 0.35); }
.mgr-found-secret .mgr-found-card { background: linear-gradient(150deg, rgba(58, 34, 74, 0.9), rgba(30, 26, 58, 0.9));
  box-shadow: 0 0 0 2px rgba(214, 178, 255, 0.92), 0 4px 16px rgba(0, 0, 0, 0.4); }
/* しらせが 出て いる あいだ は した の そうさ せつめいを よわめる。
   けさない(なぞりかたを わすれた ひとが こまる)が、目は しらせへ 行く(§16) */
/* セレクタが ながい りゆう: world-scene.css の
   「.world-mode .minigame-overlay :is(...,.mg-hint,...) { opacity: 1 }」が
   あとから よみこまれ、みじかい .mgr-hint-quiet では まけて しまう。
   ここは いちばん つよい ところで きめる(めぐるの ヒント だけ) */
.minigame-overlay .mgr-hint.mgr-hint-quiet,
.world-mode .minigame-overlay .mgr-hint.mgr-hint-quiet { opacity: 0.38; }
@media (prefers-reduced-motion: reduce) { .mgr-found { animation: none; } }
.mgr-env { opacity: 0.85; margin-left: 2px; }
.meguru-overlay .mg-meguru-header > span:nth-child(2) { opacity: 0.8; }
@media (max-height: 700px) {
  .meguru-overlay .mg-pad { min-height: 96px; }
  .meguru-overlay .mg-pad-actions .mg-tap-btn { min-height: 30px; font-size: 12px; }
}

/* Short landscape: keep the existing 220px world and put input beside it.
   Scope to active exploration; other games and portrait keep their layout. */
@media (min-width: 560px) and (max-height: 500px) and (orientation: landscape) {
  .world-mode .device.ui-game-active:has(#meguruOverlay:not(.hidden) #mgrCanvas) {
    width: min(100%, 960px); max-width: 960px; grid-template-rows: minmax(0, 1fr); gap: 0;
  }
  .world-mode .device.ui-game-active:has(#meguruOverlay:not(.hidden) #mgrCanvas) > .device-header { display: none; }
  .world-mode .device.ui-game-active:has(#meguruOverlay:not(.hidden) #mgrCanvas) .screen { padding: 4px; }
  #meguruOverlay.meguru-overlay:not(.hidden):has(#mgrCanvas) {
    display: grid; grid-template-columns: minmax(0, 1fr) 184px;
    grid-template-rows: auto 1fr; column-gap: 8px; align-content: start;
  }
  #meguruOverlay > .mg-meguru-header { grid-column: 1; grid-row: 1; }
  #meguruOverlay > .mgr-wrap { grid-column: 1; grid-row: 2; align-self: start; }
  #meguruOverlay > .mgr-hint {
    grid-column: 2; grid-row: 1; margin: 0; padding: 0; min-height: 0;
  }
  #meguruOverlay > .mg-pad-row {
    grid-column: 2; grid-row: 2; flex-direction: column; margin: 0; padding: 4px 0 0;
    align-self: start; gap: 6px;
  }
  /* Keep the old row's measured height: canvas sizing subtracts offsetHeight.
     Grow the real hit element into the free space below, then move actions by
     the same 20px. Their visible 6px gap remains; world dimensions stay fixed. */
  #meguruOverlay .mg-pad { flex: none; width: 100%; min-height: 120px; margin-bottom: -20px; }
  #meguruOverlay .mg-pad-actions { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 4px; position: relative; top: 20px; }
  #meguruOverlay .mg-pad-actions .mg-tap-btn { min-height: 44px; min-width: 56px; }
}

/* ===== めぐるの ちず(あるいた きろく) ===== */
/* たんさく がめんの みぎした に 小さく おく。ならびの たかさは ふやさない */
.mgr-map-btn { position: absolute; right: 8px; bottom: 8px; z-index: 3;
  padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(24, 24, 30, 0.56); color: #fff; font-size: 12px; font-weight: bold;
  line-height: 1.2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.mgr-map-btn:active { transform: translateY(1px); }
/* ちずに なにか ふえた ときだけ そっと ひかる(ポップアップは ふやさない) */
.mgr-map-new { box-shadow: 0 0 0 2px rgba(255, 226, 138, 0.95), 0 2px 8px rgba(0, 0, 0, 0.3); }

/* ちずは たんさく がめん ぜんたいに かぶせる。かぶせる もとに なる ように
   めぐるの overlay 自体を position: relative に して おく */
.meguru-overlay { position: relative; }
.mgr-map { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column;
  background: #f8f2e3; color: #544530; padding: 8px 8px 10px; gap: 6px; }
.mgr-map-dark { background: #171c31; color: #d5def4; }
/* くらい 地域(しんかい・ほしぞら・きおくのみずうみ)でも ボタンの 字が よめる ように */
.mgr-map-dark .mg-tap-btn { background: #2b3352; color: #e8eeff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.mgr-map-dark .mg-tap-btn.primary { background: linear-gradient(160deg, #5b6aa8, #3d4878); color: #fff; }
.mgr-map-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; line-height: 1.25; min-height: 16px; }
.mgr-map-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-map-prog { flex: 0 0 auto; font-size: 11px; opacity: 0.85; white-space: nowrap; }
.mgr-map-body { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 10px; overflow: hidden; }
.mgr-map-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.mgr-map-tip { position: absolute; left: 8px; top: 8px; max-width: 78%; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11px; line-height: 1.45; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mgr-map-tip.hidden { display: none; }
.mgr-map-bar { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mgr-map-bar .mg-tap-btn { min-height: 44px; padding: 8px 6px; font-size: 14px; }
.mgr-map-zoom { flex: 0 0 auto; min-width: 56px; font-size: 18px; }
.mgr-map-close { flex: 1 1 auto; }
.mgr-map-world { flex: 1 1 auto; }
.mgr-map-world.hidden { display: none; }
@media (max-height: 640px) {
  .mgr-map { padding: 6px 6px 8px; gap: 4px; }
  .mgr-map-bar .mg-tap-btn { min-height: 40px; }
}