/* =========================================================
   nclToyTools ─ なつの セミのこえ
   夏の森テーマ スタイルシート（あきの むしのこえ の別バージョン・昼の配色）
   森の木々がたちならび、そこにセミがとまっている。
   ========================================================= */

:root {
  --sky-bg: linear-gradient(180deg, #6fc0ee 0%, #96d6f2 34%, #c6ecec 62%, #d7edba 82%, #bcd98f 100%);
  --panel-bg: rgba(255, 255, 255, 0.30);
  --panel-border: rgba(255, 255, 255, 0.62);
  --text-main: #2f4a24;
  --text-sub: #567041;
  --accent: #f4b53a;              /* なつの ひざしの色 */
  --accent-2: #3f8f4a;
  --leaf: #4f9a3f;
  --leaf-dark: #2c6b30;
  --bark: #7a5433;
  --bark-dark: #4f3420;
  --bark-light: #9a6f45;
  --shadow-soft: 0 12px 30px rgba(40, 60, 20, 0.22);
  --shadow-tile: 0 8px 16px rgba(40, 60, 20, 0.22);
  --radius-card: 24px;
  --radius-btn: 999px;
  --font-main: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  position: fixed;
  inset: 0;
  font-family: var(--font-main);
  color: var(--text-main);
  background: var(--sky-bg);
  background-attachment: fixed;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, p { margin: 0; }
button { font-family: inherit; }

/* hidden 属性を確実に効かせる（.forest-card 等が display:flex を持つと
   作者CSSがUAの [hidden]{display:none} に勝ってしまい、ビューが隠れないため）。 */
[hidden] { display: none !important; }

/* =========================================================
   夏の飾り（背景装飾・操作不可）
   ========================================================= */
.day-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.day-decor .sun {
  position: absolute;
  top: 4vh;
  right: 6vw;
  font-size: clamp(48px, 10vw, 92px);
  filter: drop-shadow(0 0 26px rgba(255, 210, 110, 0.7));
  animation: floaty 9s ease-in-out infinite;
}
.day-decor .cloud {
  position: absolute;
  font-size: clamp(30px, 7vw, 58px);
  opacity: 0.9;
  animation: drift 26s linear infinite;
}
.day-decor .c1 { top: 12vh; left: -12%; animation-delay: 0s; }
.day-decor .c2 { top: 24vh; left: -12%; animation-delay: 9s; font-size: clamp(38px, 9vw, 72px); }
.day-decor .c3 { top: 7vh;  left: -12%; animation-delay: 17s; }
.day-decor .leaf {
  position: absolute;
  font-size: clamp(20px, 4vw, 34px);
  opacity: 0.8;
  animation: leaffall 12s linear infinite;
}
.day-decor .l1 { left: 18vw; animation-delay: 0s; }
.day-decor .l2 { left: 54vw; animation-delay: 4s; }
.day-decor .l3 { left: 82vw; animation-delay: 8s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(128vw); }
}
@keyframes leaffall {
  0%   { transform: translateY(-8vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(108vh) rotate(320deg); opacity: 0; }
}

/* =========================================================
   レイアウト
   ========================================================= */
#app {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.glass-card {
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- コンパクトなトップバー＋ハンバーガーメニュー ---- */
.topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 9px 16px;
}
.topbar .title {
  font-size: clamp(15px, 3.6vw, 20px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-main);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-main);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.6); }
.menu-btn:active { transform: scale(0.94); }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  z-index: 30;
  width: min(268px, 82vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(247, 253, 240, 0.96);
  border: 1.5px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.menu[hidden] { display: none; }
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(120, 160, 90, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.menu-item:hover { background: rgba(255, 255, 255, 0.95); }
.menu-item:active { transform: scale(0.98); }
.menu-views {
  display: flex;
  gap: 6px;
  background: rgba(80, 130, 60, 0.14);
  border-radius: 999px;
  padding: 5px;
}
.menu-views .view-btn { flex: 1; }

/* ---- アイコングリッド（いちらん） ---- */
.grid-card {
  padding: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cicada-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: clamp(14px, 3.5vw, 26px) clamp(10px, 3vw, 20px);
  justify-items: center;
}

.cicada-tile {
  appearance: none;
  border: none;
  background: none;
  padding: 4px;
  width: 100%;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-main);
  -webkit-tap-highlight-color: transparent;
}

.tile-icon {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 22%, rgba(255, 255, 255, 0.45), transparent 60%),
    linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: var(--shadow-tile), inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -8px 14px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.14s ease;
}
.tile-icon .cicada-img,
.tile-icon .cicada-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}
.tile-icon .cicada-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  padding: 8px;
  text-align: center;
}

/* 実録音の目じるし（右上の小さなマイク） */
.tile-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.cicada-tile:hover .tile-icon { transform: translateY(-4px) scale(1.03); }
.cicada-tile:active .tile-icon { transform: translateY(-1px) scale(0.95); }
.cicada-tile:focus-visible { outline: none; }
.cicada-tile:focus-visible .tile-icon {
  box-shadow: var(--shadow-tile), 0 0 0 4px rgba(244, 181, 58, 0.85);
}

.tile-name {
  font-weight: 800;
  font-size: clamp(13px, 3.2vw, 16px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tile-kanji {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: -3px;
}

.tile-icon.wiggle { animation: wiggle 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes wiggle {
  0%   { transform: scale(0.95); }
  30%  { transform: scale(1.08) rotate(-4deg); }
  55%  { transform: scale(1.02) rotate(4deg); }
  75%  { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

.tile-bubble {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translate(-50%, -6px) scale(0.7);
  background: rgba(255, 255, 255, 0.97);
  color: #3f5a2a;
  font-weight: 800;
  font-size: clamp(11px, 2.6vw, 14px);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(30, 50, 10, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tile-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.97);
  border-bottom: 0;
}
.tile-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ---- 合唱ボタン ---- */
.chorus-row { display: flex; justify-content: center; flex: 0 0 auto; }
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-weight: 800;
  border-radius: var(--radius-btn);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-chorus {
  font-size: clamp(16px, 4vw, 19px);
  color: #3a2a1e;
  background: linear-gradient(145deg, #ffe39a, #ffbf49);
  padding: 14px 26px;
  box-shadow: 0 6px 0 rgba(180, 120, 40, 0.5), var(--shadow-soft);
}
.btn-chorus:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-chorus:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(180, 120, 40, 0.5); }

/* 読み込み失敗時の簡易メッセージ */
body.load-error #app::before {
  content: '😢 うまく よみこめなかったみたい。さいしんの Chrome / Safari で ためしてね。';
  display: block;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid var(--panel-border);
  border-radius: var(--radius-card);
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .day-decor .sun,
  .day-decor .cloud,
  .day-decor .leaf,
  .tile-icon.wiggle { animation: none; }
  .tile-icon, .menu-btn, .btn-chorus { transition: none; }
}

/* =========================================================
   表示きりかえ（もり / いちらん）
   ========================================================= */
.view-btn {
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-sub);
  background: transparent;
  border-radius: var(--radius-btn);
  padding: 8px 16px;
  transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.view-btn[aria-pressed="true"] {
  color: #35521f;
  background: linear-gradient(145deg, #eaf7cf, #c6e79a);
  box-shadow: 0 2px 8px rgba(60, 90, 30, 0.2);
}
.view-btn:active { transform: scale(0.96); }

/* =========================================================
   もりビュー（森の木にセミがとまる）
   ========================================================= */
.forest-card {
  padding: 8px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.forest {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #79c4ef 0%, #a5daf1 30%, #cdecdf 55%, #a9d47f 78%, #7fb257 100%);
  box-shadow: inset 0 2px 12px rgba(20, 60, 20, 0.22);
  touch-action: manipulation;
}

/* 木もれ日（斜めの光の帯） */
.forest-rays {
  position: absolute;
  inset: -10% -10% 0 -10%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255, 250, 210, 0.5) 24%, transparent 30%),
    linear-gradient(115deg, transparent 42%, rgba(255, 250, 210, 0.38) 48%, transparent 55%),
    linear-gradient(115deg, transparent 66%, rgba(255, 250, 210, 0.3) 71%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* お日さま（もりビューの中・タップできる） */
.forest-sun {
  position: absolute;
  top: 6%;
  left: 8%;
  width: clamp(44px, 12vw, 66px);
  height: clamp(44px, 12vw, 66px);
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(circle at 42% 38%, #fffdf0, #ffe27a 52%, #ffc23e 100%);
  box-shadow: 0 0 30px 10px rgba(255, 214, 110, 0.6), 0 0 70px 24px rgba(255, 214, 110, 0.28);
  pointer-events: auto;
  cursor: pointer;
}
.forest-sun:hover { filter: brightness(1.05); }
.forest-sun.poke { animation: sun-poke 0.5s ease-out; }
@keyframes sun-poke {
  0% { transform: scale(1); } 30% { transform: scale(1.14); }
  60% { transform: scale(0.97); } 100% { transform: scale(1); }
}

/* 林冠（上部の葉のシルエット） */
.canopy-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  display: block;
  pointer-events: none;
}
.canopy-far { height: 30%; fill: #86c05a; opacity: 0.7; z-index: 2; }
.canopy-mid { height: 26%; fill: #4f9a3f; opacity: 0.92; z-index: 5; }
.canopy-near { height: 20%; fill: #2f6b30; opacity: 0.96; z-index: 8; }

/* 木の幹（縦にならぶ・セミがとまる） */
.trunk-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.trunk {
  position: absolute;
  top: 10%;
  bottom: -2%;
  width: clamp(40px, 11vw, 78px);
  transform: translateX(-50%);
  border-radius: 40% 40% 0 0 / 8% 8% 0 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 255, 255, 0.16) 34%, rgba(255, 255, 255, 0.1) 52%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(92deg, var(--bark) 0 7px, var(--bark-dark) 7px 11px, var(--bark-light) 11px 15px),
    linear-gradient(180deg, var(--bark-light), var(--bark) 40%, var(--bark-dark));
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(30, 40, 10, 0.2);
}
.trunk::after { /* 幹のこけ・つや */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 30% at 30% 80%, rgba(90, 140, 60, 0.28), transparent 70%);
}

/* 森の地面 */
.forest-floor {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 16%;
  z-index: 6;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(120, 170, 80, 0.5), transparent 60%),
    linear-gradient(180deg, #6f9d48 0%, #567c37 60%, #3f5f28 100%);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cicada-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none; /* すき間は背面の太陽などへ素通し。セミだけ受ける */
}

/* 1匹のセミ（木にとまる・タップできる） */
.cicada {
  position: absolute;
  top: 0; left: 0;
  width: calc(clamp(58px, 16vw, 104px) * var(--s, 1));
  margin: 0; padding: 0;
  border: none; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  will-change: transform;
  transform: translate(-50%, -50%);
}
.cicada-face {
  display: block;
  width: 100%;
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 42%;
  /* ふだんは木にとまって じっとしている（動くのは鳴いているときだけ）。 */
}
.cicada-face .cicada-img,
.cicada-face .cicada-fallback {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 5px rgba(20, 30, 10, 0.4));
}
.cicada-face .cicada-fallback {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--c1, #8a5), var(--c2, #563));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cicada:focus-visible { outline: none; }
.cicada:focus-visible .cicada-face {
  filter: drop-shadow(0 0 0 4px rgba(244, 181, 58, 0.9));
}

/* 鳴いているとき: はねを小刻みにふるわせる */
.cicada.singing .cicada-face { animation: buzz 0.09s linear infinite; }
@keyframes buzz {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translate(0, 0) scaleY(1); }
  25%      { transform: rotate(var(--rot, 0deg)) translate(-0.6px, 0.4px) scaleY(1.03); }
  75%      { transform: rotate(var(--rot, 0deg)) translate(0.6px, -0.4px) scaleY(0.98); }
}

/* 鳴き声の吹き出し（セミの上に出る） */
.cicada-bubble {
  position: absolute;
  left: 50%;
  bottom: 92%;
  transform: translate(-50%, 6px) scale(0.7);
  background: rgba(255, 255, 255, 0.97);
  color: #3f5a2a;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
  padding: 5px 11px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(30, 50, 10, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
.cicada-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.97);
  border-bottom: 0;
}
.cicada-bubble.show {
  opacity: 1;
  transform: translate(-50%, -4px) scale(1);
}
/* 吹き出しの中: 名前（小さめ）＋ 鳴き声（大きめ） */
.cicada-bubble .bubble-name {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #6f8a4f;
  line-height: 1.15;
}
.cicada-bubble .bubble-voice {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

/* 舞う木の葉（もりビューの中・タップできる） */
.leaf-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}
.forest-leaf {
  position: absolute;
  font-size: clamp(16px, 3.4vw, 26px);
  opacity: 0.85;
  pointer-events: auto;
  cursor: pointer;
  animation: leaf-drift var(--dur, 11s) linear var(--d, 0s) infinite;
  filter: drop-shadow(0 2px 3px rgba(20, 40, 10, 0.25));
}
@keyframes leaf-drift {
  0%   { transform: translateY(-12%) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(560%) translateX(var(--sx, 20px)) rotate(340deg); opacity: 0; }
}

/* はじけるキラめき（太陽＝金／葉＝緑） */
.sparkle-burst {
  position: absolute;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 12;
}
.sparkle-burst.gold { --bc: #ffe6a0; }
.sparkle-burst.green { --bc: #bff06a; }
.sparkle-burst::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bc, #ffe6a0);
  animation: burst-ring 0.6s ease-out forwards;
}
.sparkle-burst::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--bc, #ffe6a0) 60%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: burst-core 0.5s ease-out forwards;
}
@keyframes burst-ring {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(3.4); opacity: 0; }
}
@keyframes burst-core {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* 動きをへらす設定 */
@media (prefers-reduced-motion: reduce) {
  .cicada-face { animation: none; }
  .cicada.singing .cicada-face { animation: none; }
  .forest-leaf { animation: none; }
  .forest-sun.poke { animation: none; }
  .sparkle-burst::before, .sparkle-burst::after { animation-duration: 0.01s; }
  .view-btn, .cicada { transition: none; }
}

/* =========================================================
   クレジット・出典（モーダル）
   ========================================================= */
.credits-modal {
  width: min(440px, 92vw);
  max-height: 82vh;
  padding: 0;
  border: 1.5px solid var(--panel-border);
  border-radius: 18px;
  background: #f6fbec;
  color: var(--text-main);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.credits-modal::backdrop {
  background: rgba(30, 50, 20, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.credits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(120, 160, 90, 0.35);
}
.credits-head h2 { font-size: 17px; font-weight: 800; }
.credits-close {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(120, 160, 90, 0.4);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-main);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.credits-close:hover { background: #fff; }
.credits-body {
  padding: 14px 16px 18px;
  overflow-y: auto;
  max-height: calc(82vh - 58px);
  font-size: 13px;
  line-height: 1.7;
  -webkit-user-select: text;
  user-select: text;
}
.credits-body h3 {
  font-size: 12px;
  color: var(--text-sub);
  margin: 14px 0 6px;
  font-weight: 800;
}
.credits-body h3:first-child { margin-top: 0; }
.credits-body ul { margin: 0; padding-left: 1.1em; }
.credits-body li { margin: 5px 0; }
.credits-body a { color: var(--accent-2); font-weight: 800; }
.credits-note { color: var(--text-sub); }