/* ============================================================
   中学英単語マスター スタイルシート
   スマホ優先・大きなタップ領域・やさしい配色
   ============================================================ */

:root {
  --bg: #dbeafe;
  --bg-grad: linear-gradient(160deg, #cfe6ff 0%, #e4d9ff 55%, #ffe1ec 100%);
  --card: #ffffff;
  --text: #2b3245;
  --sub: #7a8299;
  --primary: #4f7cff;
  --primary-dark: #3a63e0;
  --accent: #ff8fab;
  --correct: #35c281;
  --correct-bg: #e3f9ef;
  --wrong: #ff6b6b;
  --wrong-bg: #ffecec;
  --star: #ffc93c;
  --star-off: #dfe3ee;
  --radius: 22px;
  --shadow: 0 6px 18px rgba(60, 80, 140, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ゆっくり色が動くワクワク背景 */
@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body {
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  background: linear-gradient(150deg, #cfe6ff 0%, #e4d9ff 40%, #ffe1ec 70%, #d9f5ff 100%);
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: bgShift 24s ease infinite;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* 背景にふわふわ浮かぶ雲・星・風船 */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-decor span {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.5;
  animation: floatUp linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
@keyframes floatUp {
  0%   { transform: translateY(105vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(-15vh) translateX(30px) rotate(12deg); }
}
.bg-decor span:nth-child(1) { left: 6%;  font-size: 2.8rem; animation-duration: 26s; animation-delay: 0s; }
.bg-decor span:nth-child(2) { left: 22%; font-size: 1.6rem; animation-duration: 19s; animation-delay: -6s; }
.bg-decor span:nth-child(3) { left: 44%; font-size: 2.4rem; animation-duration: 30s; animation-delay: -12s; }
.bg-decor span:nth-child(4) { left: 64%; font-size: 3rem;   animation-duration: 23s; animation-delay: -3s; }
.bg-decor span:nth-child(5) { left: 80%; font-size: 1.5rem; animation-duration: 17s; animation-delay: -9s; }
.bg-decor span:nth-child(6) { left: 90%; font-size: 2.2rem; animation-duration: 28s; animation-delay: -15s; }

#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .bg-decor span { animation: none; opacity: 0.3; }
}

/* ---------- 共通パーツ ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,0.8);
  padding: 20px;
  margin-bottom: 16px;
}

/* ヒーロー(飛び回る英単語の上にタイトル) */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  /* 下は「旅の景色」(丘・地面・なかま)のぶん あけてある */
  padding: 10px 12px 70px;
  margin-bottom: 12px;
  /* ⚠️ 空を明るくしすぎると、上にのる白い文字が読めなくなる。
     実測: 明るい版だと しょうごうのコントラストが 1.36(ほぼ読めない)だった。
     **文字がのる上70%は濃いまま**にして、明るい地平線は 丘にかくれる下だけにしてある */
  background: linear-gradient(180deg, #4a7ae6 0%, #5b8cff 30%, #6b97ff 62%, #93bdfb 76%, #cfe4ff 90%, #eaf3ff 100%);
  box-shadow: 0 8px 20px rgba(90, 80, 200, 0.35), inset 0 2px 0 rgba(255,255,255,0.25);
}

/* ============================================================
   🏞️ ホームの「旅の景色」(v2.61.4)
   ユーザー指摘「文字ばかりで楽しさより勉強感が強い」への答え。
   **飾りではなく進み具合を映す絵**にしてある:
   ・--warm(0〜1・JSが渡す)が上がるほど 丘と地面に色がもどる
     = ストーリー「ことばを取りもどす旅」そのもの
   ・丘の上に立つのは **自分が集めたなかま**(0ひきなら 💤 で眠っている)
   文字(タイトル・チップ・しょうごう)は position:relative で この絵の上にのせる
   ============================================================ */
.hero-scene {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden; border-radius: 24px;
}
.hsc-sun {
  position: absolute; right: 18px; top: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe0 0 38%, #ffe066 64%, #ffc32e 100%);
  box-shadow: 0 0 20px 7px rgba(255, 224, 130, 0.5);
}
.hsc-cloud {
  position: absolute; height: 13px; border-radius: 99px;
  background: rgba(255,255,255,0.62);
}
.hsc-cloud::before, .hsc-cloud::after {
  content: ""; position: absolute; bottom: 2px;
  border-radius: 50%; background: inherit;
}
.hsc-cloud::before { left: 18%; width: 17px; height: 17px; }
.hsc-cloud::after  { right: 20%; width: 12px; height: 12px; }
.hsc-cloud.c1 { left: 8%;  top: 20px; width: 58px; animation: hscDrift 26s linear infinite; }
.hsc-cloud.c2 { left: 52%; top: 44px; width: 44px; opacity: 0.5;
                animation: hscDrift 34s linear infinite reverse; }
.hsc-cloud.c3 { left: 26%; top: 66px; width: 34px; opacity: 0.38;
                animation: hscDrift 44s linear infinite; }
@keyframes hscDrift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(22px); }
  100% { transform: translateX(0); }
}
/* 丘と地面。**色は --warm で決まる** ─ ここが「世界に色がもどる」の見せ場 */
.hsc-hill, .hsc-ground {
  filter: saturate(calc(0.12 + var(--warm, 1) * 1.0))
          brightness(calc(0.84 + var(--warm, 1) * 0.2));
  transition: filter 0.6s ease;
}
.hsc-hill { position: absolute; bottom: 26px; border-radius: 50% 50% 0 0; }
.hsc-hill.a { left: -10%; width: 72%; height: 46px;
              background: linear-gradient(180deg, #9fdc7a, #6cbb4e); }
.hsc-hill.b { right: -12%; width: 66%; height: 34px;
              background: linear-gradient(180deg, #8ed06c, #58a840); }
.hsc-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(180deg, #7cc457 0%, #62ac42 44%, #4f9436 100%);
}
/* 集めたなかまが 丘の上に立つ */
.hsc-pal {
  position: absolute; bottom: 24px;
  font-size: 1.3rem; line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.28));
  animation: hscHop 3.4s ease-in-out infinite;
}
.hsc-pal.p0 { left: 9%;  animation-delay: 0s; }
.hsc-pal.p1 { left: 26%; animation-delay: 0.5s; }
.hsc-pal.p2 { left: 43%; animation-delay: 1s; }
.hsc-pal.p3 { left: 60%; animation-delay: 1.5s; }
.hsc-pal.p4 { left: 77%; animation-delay: 2s; }
/* まだ1ひきもいないときは「眠っている」ことを見せる(ストーリーどおり) */
.hsc-pal.asleep { opacity: 0.5; animation: none; font-size: 1.05rem; }
@keyframes hscHop {
  0%, 82%, 100% { transform: translateY(0); }
  88%           { transform: translateY(-6px); }
  94%           { transform: translateY(0); }
}
/* 文字は景色の上にのせる */
.hero > .app-title, .hero > .hero-fly, .hero > .hero-status, .hero > .hero-rank {
  position: relative; z-index: 1;
}
/* 景色は動かさなくても絵として成立するので、色と形はそのまま残す */
@media (prefers-reduced-motion: reduce) {
  .hsc-cloud, .hsc-pal { animation: none !important; }
}
/* タイトルの下の帯を、英単語が流れる(タイトルには重ならない) */
.hero-fly {
  position: relative;
  height: 52px;
  margin-top: 6px;
  overflow: hidden;
  pointer-events: none;
}
@keyframes flyBob {
  0%   { transform: translateY(var(--y0)) rotate(-6deg); }
  50%  { transform: translateY(var(--y1)) rotate(6deg); }
  100% { transform: translateY(var(--y0)) rotate(-6deg); }
}
.fly-word {
  position: absolute;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.25);
  white-space: nowrap;
  animation: flyBob ease-in-out infinite;
}
.fw0 { top: 14px; left: 3%;  font-size: 1.25rem; --y0: 0px;  --y1: -8px; animation-duration: 3.2s; animation-delay: -0.2s; }
.fw1 { top: 20px; left: 16%; font-size: 0.95rem; --y0: 2px;  --y1: 10px; animation-duration: 4.1s; animation-delay: -1.4s; }
.fw2 { top: 8px;  left: 28%; font-size: 1.45rem; --y0: -2px; --y1: 8px;  animation-duration: 3.6s; animation-delay: -0.8s; }
.fw3 { top: 22px; left: 42%; font-size: 1.05rem; --y0: 0px;  --y1: -10px;animation-duration: 4.4s; animation-delay: -2.1s; }
.fw4 { top: 12px; left: 54%; font-size: 1.15rem; --y0: 3px;  --y1: -6px; animation-duration: 3.9s; animation-delay: -1s; }
.fw5 { top: 20px; left: 66%; font-size: 1.3rem;  --y0: -3px; --y1: 9px;  animation-duration: 3.4s; animation-delay: -2.6s; }
.fw6 { top: 10px; left: 79%; font-size: 1rem;    --y0: 0px;  --y1: -9px; animation-duration: 4.2s; animation-delay: -0.5s; }
.fw7 { top: 22px; left: 90%; font-size: 1.1rem;  --y0: 2px;  --y1: 7px;  animation-duration: 3.7s; animation-delay: -1.8s; }

@keyframes titlePop {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.app-title {
  position: relative;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 800;
  padding: 16px 0 4px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow:
    0 2px 0 #5a3fd0, 0 3px 0 #4a30c0,
    2px 4px 8px rgba(30,20,90,0.5);
  animation: titlePop 3.5s ease-in-out infinite;
}
.hero .app-subtitle { position: relative; color: #fff; opacity: 0.92; margin-bottom: 6px; }
.app-subtitle {
  text-align: center;
  color: #5566aa;
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

/* ゲーム機ふうの立体ボタン(押すと沈む) */
.btn {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 18px;
  font-size: 1.08rem;
  font-weight: 800;
  text-align: center;
  transition: transform 0.08s, box-shadow 0.08s;
  position: relative;
}
.btn-primary {
  background: linear-gradient(180deg, #6a97ff, #4f7cff);
  color: #fff;
  box-shadow: 0 5px 0 #3a5fd0, 0 8px 14px rgba(79, 124, 255, 0.4);
}
.btn-accent {
  background: linear-gradient(180deg, #ffa06b, #ff7eb0);
  color: #fff;
  box-shadow: 0 5px 0 #e05a8a, 0 8px 14px rgba(255, 143, 171, 0.4);
}
.btn-primary:active, .btn-accent:active {
  transform: translateY(4px) scale(1);
  box-shadow: 0 1px 0 #3a5fd0, 0 2px 6px rgba(79, 124, 255, 0.3);
}
.btn-ghost {
  background: #fff;
  color: var(--primary);
  border: 2px solid #cddbff;
  box-shadow: 0 4px 0 #dbe4fb;
}
.btn-ghost:active { transform: translateY(3px) scale(1); box-shadow: 0 1px 0 #dbe4fb; }
.btn-sub {
  background: #eef1f9;
  color: var(--text);
  font-size: 0.95rem;
  box-shadow: 0 3px 0 #dde2ef;
}
.btn-sub:active { transform: translateY(2px) scale(1); box-shadow: 0 1px 0 #dde2ef; }
.btn + .btn { margin-top: 12px; }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* 目立つスタートボタン(ゆれて注目させる) */
@keyframes heroWiggle {
  0%, 92%, 100% { transform: translateY(0) rotate(0deg); }
  94% { transform: translateY(-3px) rotate(-1.5deg); }
  97% { transform: translateY(-3px) rotate(1.5deg); }
}
.btn-hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px;
  font-size: 1.3rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffd045, #ff9a3d);
  color: #7a3b00;
  box-shadow: 0 6px 0 #e07a1e, 0 10px 20px rgba(255, 150, 40, 0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  animation: heroWiggle 4s ease-in-out infinite;
}
.btn-hero:active { transform: translateY(5px) scale(1); box-shadow: 0 1px 0 #e07a1e; animation: none; }
.hero-btn-sub { font-size: 0.85rem; font-weight: 800; opacity: 0.85; }
.hero-btn-main { font-size: 1.15rem; font-weight: 800; }
.hero-sub { text-align: center; font-size: 0.8rem; color: #5566aa; font-weight: 700; margin: 8px 0 0; }

.section-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: #4a5478;
  margin: 20px 4px 10px;
}

/* ---------- ホーム画面(v2.16 わかりやすさ重視の作り直し) ---------- */

/* ヒーローの中に今の状態を小さくまとめて表示 */
.hero-status {
  position: relative;
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px;
}
.hero-status .hs-item {
  /* 白の半透明だと空の明るさしだいで白文字が沈む。**濃い色の半透明**にして
     空の色にかかわらず白文字が浮くようにする(v2.62.0) */
  background: rgba(23, 42, 102, 0.42);
  color: #fff; font-weight: 800; font-size: 0.82rem;
  padding: 4px 12px; border-radius: 99px;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.hero-status .hs-item b { font-size: 0.95rem; }
.hero-status .hs-item.streak { background: rgba(255,180,60,0.9); color: #7a3b00; text-shadow: none; }
/* 🎖️ しょうごう(v2.61.0)。**チップの列に混ぜない** ─
   混ぜるとせまい画面で名前を隠すはめになり、いちばん見せたい相手に見えなくなる。
   専用の1行にすれば どの幅でも名前がそのまま出る */
.hero-rank {
  /* 空の明るいあたりにのるので、**チップと同じ濃い下地**を敷いて白文字を確実に読ませる
     (下地なしだと実測コントラスト2.29。下地ありで4.4) */
  width: fit-content;
  margin: 6px auto 0;
  padding: 3px 13px;
  border-radius: 99px;
  background: rgba(23, 42, 102, 0.42);
  backdrop-filter: blur(2px);
  font-size: 0.86rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(16, 30, 78, 0.6);
  letter-spacing: 0.02em;
}

/* きろく画面の しょうごうカード */
.rank-card {
  margin-top: 12px;
  background: linear-gradient(135deg, #fff6e0, #ffeaf3);
  border: 2px solid #ffdca8;
  border-radius: 18px;
  padding: 14px 16px;
  text-align: center;
}
.rank-card .rank-now { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rank-card .rank-icon { font-size: 1.8rem; line-height: 1; }
.rank-card .rank-title { font-size: 1.15rem; font-weight: 800; color: #a05a10; }
.rank-card .rank-now small { display: block; width: 100%; font-size: 0.72rem; color: var(--sub); font-weight: 700; }
.rank-card .rank-next { margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--sub); }
.rank-card .rank-next b { color: #a05a10; }

/* ① きょうやること(いちばん大きく目立たせる) */
.today-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,0.8);
  padding: 16px;
  margin-bottom: 8px;
}
.today-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.today-title { font-weight: 800; font-size: 1.02rem; }
.today-count { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
/* 目標を10個のマルで表示(あと何個かがひと目でわかる) */
.goal-dots { display: flex; gap: 5px; margin-bottom: 8px; }
.goal-dot {
  flex: 1; height: 14px; border-radius: 99px;
  background: #e6eaf5;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.08);
  transition: background 0.3s, transform 0.3s;
}
.goal-dot.done {
  background: linear-gradient(180deg, #ffd45e, #ff9f43);
  box-shadow: 0 2px 5px rgba(255,160,60,0.5);
  transform: scale(1.06);
}
.today-msg { font-size: 0.82rem; color: var(--sub); font-weight: 700; margin-bottom: 8px; }
.today-msg.done { color: #d98a00; font-weight: 800; }
.today-sub { font-size: 0.74rem; color: var(--sub); font-weight: 700; margin-bottom: 12px; text-align: right; }

/* きょうのミッション(ひとつずつ ごほうびがあり、3つそろうと おまけ) */
/* 🎯 きょうのミッション(v2.61.4で絵カードに)。
   ⬜＋文章の行が3つ並ぶと「宿題リスト」に見える、というユーザー指摘への答え。
   **絵を主役にして、言葉は最小に**(まなぶ / ふくしゅう / あそぶ) */
.mission-grid {
  /* **minmax(0,1fr) にすること。** ただの 1fr だと中身の長さでカバ幅が変わり、
     3枚の大きさがそろわない(実測 92/118/86px になった) */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 10px;
}
.mission-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7f9ff, #eef2fd);
  border: 2px solid #e4eaf8;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.mission-card .mc-icon {
  position: relative;
  font-size: 1.85rem; line-height: 1.05;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}
/* すんだ印。⬜/✅ を並べるのではなく、**絵の上にスタンプ**する */
.mission-card .mc-check {
  position: absolute; right: -7px; bottom: -2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #26b673; color: #fff;
  font-size: 0.72rem; font-weight: 900; line-height: 19px; text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mission-card .mc-name { font-size: 0.84rem; font-weight: 800; color: #46506b; }
.mission-card .mc-sub {
  font-size: 0.62rem; font-weight: 700; color: #8b93a8;
  text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mission-card .mc-prize { font-size: 0.66rem; font-weight: 800; color: #7b8496; margin-top: 1px; }
.mission-card.done {
  background: linear-gradient(180deg, #e6faf0, #d2f4e4);
  border-color: #a9e6c8;
}
.mission-card.done .mc-check { transform: scale(1); }
.mission-card.done .mc-name { color: #1d8a5c; }
.mission-card.done .mc-prize { color: #3aa877; }
.mission-card.done .mc-icon { filter: drop-shadow(0 2px 3px rgba(30,140,90,0.3)); }
.mission-note {
  font-size: 0.72rem; font-weight: 700; color: #8b93a8;
  text-align: center; margin: -4px 0 8px;
}
@media (prefers-reduced-motion: reduce) {
  .mission-card, .mission-card .mc-check { transition: none; }
}


/* 🎫 ゲームチケット */
.ticket-chip {
  display: inline-block;
  margin-left: 6px; padding: 1px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.28);
  font-size: 0.78rem;
}
.ticket-row {
  text-align: center; font-size: 1.2rem;
  margin: 6px 0 10px;
  letter-spacing: 2px;
}
.ticket-row .ticket-num {
  font-size: 0.9rem; font-weight: 800; color: #8a5a20;
  margin-left: 6px; vertical-align: middle;
}
/* v2.51.0: 「さっき遊んだね」で選べなくする仕組みは廃止した(.just-played / .gp-note も削除)。
   同じゲームを続けて遊びたい子を止めない ─ 直前とちがうゲームを引くのは 🎲おまかせ だけ */

/* 大きな行動ボタン(復習・学習・ゲーム) */
.big-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 10px;
  color: #fff;
  transition: transform 0.08s, box-shadow 0.08s;
}
.big-btn:last-child { margin-bottom: 0; }
.big-btn .bb-emoji { font-size: 1.9rem; flex-shrink: 0; }
.big-btn .bb-text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.big-btn .bb-text b { font-size: 1.08rem; font-weight: 800; }
.big-btn .bb-text small { font-size: 0.76rem; opacity: 0.92; font-weight: 700; }
.big-btn .bb-arrow { font-size: 1.1rem; opacity: 0.85; }
.big-btn:active { transform: translateY(4px); }
/* 復習(いちばん優先・脈打って気づかせる) */
@keyframes reviewGlow {
  0%, 100% { box-shadow: 0 5px 0 #e0662f, 0 8px 18px rgba(255,150,80,0.45); }
  50%      { box-shadow: 0 5px 0 #e0662f, 0 10px 26px rgba(255,150,80,0.75); }
}
.big-btn.review {
  background: linear-gradient(180deg, #ffc247, #ff8a4c);
  box-shadow: 0 5px 0 #e0662f, 0 8px 18px rgba(255,150,80,0.45);
  animation: reviewGlow 1.8s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.big-btn.review:active { box-shadow: 0 1px 0 #e0662f; animation: none; }
/* 学習 */
.big-btn.start {
  background: linear-gradient(180deg, #6a97ff, #4f7cff);
  box-shadow: 0 5px 0 #3a5fd0, 0 8px 16px rgba(79,124,255,0.4);
}
.big-btn.start:active { box-shadow: 0 1px 0 #3a5fd0; }
/* ゲーム */
.big-btn.game {
  background: linear-gradient(180deg, #b06ee8, #8b5cf6);
  box-shadow: 0 5px 0 #6d43c9, 0 8px 16px rgba(139,92,246,0.35);
}
.big-btn.game:active { box-shadow: 0 1px 0 #6d43c9; }
/* まだ今日の学習をしていないときのゲームボタン(押せるが、押すと学習に案内される) */
.big-btn.dim {
  background: linear-gradient(180deg, #c3c9dc, #a8b0c8);
  box-shadow: 0 5px 0 #8f97b0, 0 6px 12px rgba(0,0,0,0.12);
}
.big-btn.dim:active { box-shadow: 0 1px 0 #8f97b0; }
/* 🔁 きょうの単語をもう一度(復習が出ていない日の②) */
.big-btn.recap {
  background: linear-gradient(180deg, #7fd48a, #4fb862);
  box-shadow: 0 5px 0 #3a9149, 0 8px 16px rgba(79,184,98,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.big-btn.recap:active { box-shadow: 0 1px 0 #3a9149; }

/* 🕵️ ぬきうちチェック(復習も ふりかえりも無い日だけ出る。2語だけの短いやつ) */
.big-btn.surprise {
  background: linear-gradient(180deg, #4fd1c5, #2bb3a3);
  box-shadow: 0 5px 0 #1f8c80, 0 8px 16px rgba(43,179,163,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.big-btn.surprise:active { box-shadow: 0 1px 0 #1f8c80; }

/* ---------- 🛡️ おやすみの盾 / この7日間(v2.45) ---------- */

.hero-status .hs-item.shield { background: rgba(120,200,255,0.92); color: #10456b; text-shadow: none; }

/* 盾をつかったことは、ごまかさずに知らせる */
.shield-note {
  background: linear-gradient(180deg, #e8f6ff, #d3ecff);
  border: 2px solid #8fcdf5;
  border-radius: 16px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 0.84rem; font-weight: 800; color: #10456b;
  text-align: center; line-height: 1.5;
}

.week-card { padding: 14px 16px; margin-bottom: 8px; }
.week-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.week-title { font-weight: 800; font-size: 0.95rem; }
.week-streak { font-size: 0.82rem; font-weight: 800; color: var(--sub); }
.week-streak b { color: #ff8a3d; font-size: 1.05rem; }
.week-strip { display: flex; gap: 5px; }
.wk-cell {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0 5px;
  border-radius: 12px;
  background: #eef1f7;
  border: 2px solid transparent;
}
.wk-cell .wk-lab { font-size: 0.66rem; font-weight: 800; color: #98a1bb; }
.wk-cell .wk-mark { font-size: 0.95rem; line-height: 1; min-height: 1em; }
.wk-cell.done { background: linear-gradient(180deg, #fff0cf, #ffd9a1); }
.wk-cell.done .wk-lab { color: #a8641b; }
.wk-cell.shielded { background: linear-gradient(180deg, #e8f6ff, #cfe9ff); }
.wk-cell.shielded .wk-lab { color: #3c7ba8; }
.wk-cell.today { border-color: var(--primary); }
.week-note { font-size: 0.72rem; color: var(--sub); font-weight: 700; margin-top: 8px; line-height: 1.5; }

/* ---------- ★3ボーナス(v2.46) ---------- */

/* レベル一覧: ★3にすれば 🎫 がもらえるレベルの目印 */
.star-chance {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: linear-gradient(180deg, #fff1c9, #ffe08a);
  border: 1.5px solid #f0c04a;
  color: #8a6015;
  font-size: 0.68rem; font-weight: 800;
}
/* クリア画面のおしらせ */
.star-ticket {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff3d0, #ffdf9a);
  border: 2px solid #f0bf45;
  color: #7c5510;
  font-size: 0.9rem; font-weight: 800;
  line-height: 1.5;
}
.star-ticket b { font-size: 1.1rem; }

/* ---------- 🔑 ことばの鍵・ボスのとびら(v2.53) ---------- */
.gate-card { padding: 22px 18px; }
@keyframes gateDoor {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
.gate-door { font-size: 3.2rem; line-height: 1.1; animation: gateDoor 2.6s ease-in-out infinite; }
.gate-title { font-weight: 800; font-size: 1.05rem; margin: 4px 0 6px; }
.gate-keys { font-size: 1.1rem; font-weight: 800; color: #8a6015; margin-top: 12px; }
.gate-keys b { font-size: 2rem; color: #d98a00; }
.gate-keys .gate-of { color: var(--sub); font-size: 0.9rem; }
/* 鍵のたまりぐあい。必要ライン(80%)に印を立てて「あとどれだけ」を見せる */
.gate-track {
  position: relative;
  height: 16px; margin: 8px 0 6px;
  border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #e6eaf5 0 6px, #dde2ef 6px 12px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);
}
.gate-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #ffd45e, #ff9f43);
  box-shadow: 0 0 8px rgba(255,170,60,0.6);
  transition: width 0.6s ease;
}
.gate-need-mark {
  position: absolute; top: -2px; bottom: -2px; width: 3px;
  margin-left: -1.5px; z-index: 2;
  background: #3aa877;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
}
.gate-left { font-size: 0.9rem; font-weight: 800; color: #3aa877; margin-bottom: 12px; }

/* ---------- 📖 ものがたり「ことばを取りもどす旅」(v2.52) ---------- */

/* はじまりのお話(初回だけ・スキップ可) */
.story-screen {
  background: linear-gradient(180deg, #1e2145 0%, #35306b 55%, #5a3f7a 100%);
  border-radius: var(--radius);
  padding: 30px 20px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  color: #fff;
}
.story-art { line-height: 1; }

/* ============================================================
   お話の場面(v2.56.0)
   絵文字を2つ並べるだけでは物語が始まる感じがしない、というユーザー指摘への対応。
   **同じ部品(ことばのカード=.sc-word / なかま=.sc-pal / 丘=.sc-hill)が
   3枚を通して「色がある → 奪われる → もどる」と変化していく**のがねらい。
   絵文字は「置くだけ」で、動かすところはCSSで描いている(v2.51.3の教訓)
   ============================================================ */
.story-scene {
  position: relative;
  height: 156px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14), 0 8px 18px rgba(0,0,0,0.4);
}
/* --- 共通の部品 --- */
.sc-hill { position: absolute; bottom: 0; border-radius: 50% 50% 0 0; }
.sc-hill.a { left: -12%; width: 74%; height: 48px; }
.sc-hill.b { right: -14%; width: 68%; height: 38px; }
/* ことばのカード(英単語) */
.sc-word {
  position: absolute;
  padding: 3px 9px; border-radius: 99px;
  font-family: "Segoe UI", Verdana, sans-serif;
  font-size: 0.64rem; font-weight: 800; white-space: nowrap;
}
.sc-word.w1 { left: 8%;  top: 16%; }
.sc-word.w2 { left: 39%; top: 8%; }
.sc-word.w3 { left: 60%; top: 30%; }
.sc-word.w4 { left: 20%; top: 42%; }
/* なかま */
.sc-pal { position: absolute; bottom: 9px; font-size: 1.35rem; }
.sc-pal.p1 { left: 12%; }
.sc-pal.p2 { left: 37%; }
.sc-pal.p3 { left: 60%; }

/* ---------- 1枚目: 名前があった、色のある世界 ---------- */
.sc1 { background: linear-gradient(180deg, #7ecbff 0%, #bfe9ff 54%, #9fdc7e 54%, #6cc154 100%); }
.sc1 .sc-hill.a { background: #62b84c; }
.sc1 .sc-hill.b { background: #52a63e; }
.sc-sun {
  position: absolute; right: 16px; top: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffbc9, #ffd44d 62%, #ffab2e);
  box-shadow: 0 0 20px 7px rgba(255,214,90,0.65);
  animation: scSun 4s ease-in-out infinite;
}
@keyframes scSun { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.sc-cloud {
  position: absolute; height: 12px; border-radius: 99px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.45);
}
.sc-cloud.c1 { left: 12%; top: 18%; width: 30px; animation: scDrift 9s linear infinite; }
.sc-cloud.c2 { left: 58%; top: 10%; width: 22px; animation: scDrift 13s linear infinite reverse; }
@keyframes scDrift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.sc1 .sc-word {
  background: #fff; color: #2a4c8f;
  box-shadow: 0 2px 5px rgba(0,0,0,0.22);
  animation: scFloat 3.2s ease-in-out infinite;
}
.sc1 .sc-word.w2 { animation-delay: 0.5s; }
.sc1 .sc-word.w3 { animation-delay: 1s; }
.sc1 .sc-word.w4 { animation-delay: 1.6s; }
@keyframes scFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sc1 .sc-pal { animation: scHop 2.4s ease-in-out infinite; }
.sc1 .sc-pal.p2 { animation-delay: 0.4s; }
.sc1 .sc-pal.p3 { animation-delay: 0.8s; }
@keyframes scHop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }

/* ---------- 2枚目: ことばを食べるものに奪われる ---------- */
.sc2 { background: linear-gradient(180deg, #10152e 0%, #1e1838 52%, #2a2142 52%, #191430 100%); }
.sc2 .sc-hill.a { background: #241d3d; }
.sc2 .sc-hill.b { background: #1c1733; }
/* 影だけの巨体(正体は伏せる。brightness(0)でシルエットにする) */
.sc-shadow {
  position: absolute; right: 8px; bottom: 2px; font-size: 3.6rem; line-height: 1;
  filter: brightness(0) drop-shadow(0 0 14px rgba(150,60,220,0.85));
  animation: scLoom 3s ease-in-out infinite;
}
@keyframes scLoom {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.07) translateY(-4px); }
}
.sc-eye {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #ff4d6d; box-shadow: 0 0 9px 3px rgba(255,60,90,0.95);
  animation: scEye 2.4s ease-in-out infinite;
}
/* 影(y96〜154・中心x255)の顔の高さに合わせてある。影の大きさを変えたらここも直すこと */
.sc-eye.l { right: 52px; bottom: 40px; }
.sc-eye.r { right: 33px; bottom: 40px; }
@keyframes scEye { 0%,100% { opacity: 1; } 46% { opacity: 1; } 50% { opacity: 0.15; } 54% { opacity: 1; } }
/* ことばが色を失って吸いこまれていく */
.sc2 .sc-word {
  background: #3f3b55; color: #8b90a8; box-shadow: none;
  animation: scSuck 3.4s ease-in infinite;
}
.sc2 .sc-word.w2 { animation-delay: 1.1s; }
.sc2 .sc-word.w3 { animation-delay: 2.2s; }
@keyframes scSuck {
  0%   { transform: translate(0,0) scale(1); opacity: 0.9; }
  70%  { transform: translate(60px, 24px) scale(0.6); opacity: 0.35; }
  100% { transform: translate(96px, 34px) scale(0.2); opacity: 0; }
}
.sc2 .sc-pal { filter: grayscale(1) brightness(0.7); opacity: 0.6; }
.sc-zzz {
  position: absolute; left: 20%; bottom: 32px; font-size: 0.9rem; opacity: 0.7;
  animation: scZzz 3s ease-in-out infinite;
}
@keyframes scZzz {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 0.8; }
  100% { transform: translateY(-16px); opacity: 0; }
}

/* ---------- 3枚目: きみが ことばを取りもどす ---------- */
.sc3 { background: linear-gradient(105deg, #14183a 0%, #2c2458 34%, #6a4fb5 62%, #ffcf8f 100%); }
.sc3 .sc-hill.a { background: #3a2f68; }
.sc3 .sc-hill.b { background: #7a5aa8; }
/* 右から差しこむ光 */
.sc-dawn {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 62%, rgba(255,226,150,0.75) 0, rgba(255,226,150,0) 46%);
  animation: scDawn 3.6s ease-in-out infinite;
}
@keyframes scDawn { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }
.sc-hero {
  position: absolute; left: 14px; bottom: 8px; font-size: 2.7rem; line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255,220,130,0.95));
  animation: scHero 2.4s ease-in-out infinite;
}
@keyframes scHero {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-7px) rotate(3deg); }
}
/* ことばが色を取りもどして もどってくる */
.sc3 .sc-word {
  background: #fff; color: #2a4c8f;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 12px rgba(255,220,130,0.7);
  animation: scReturn 3.4s ease-out infinite;
}
.sc3 .sc-word.w2 { animation-delay: 1s; }
.sc3 .sc-word.w3 { animation-delay: 2s; }
@keyframes scReturn {
  0%   { transform: translate(70px, 26px) scale(0.25); opacity: 0; }
  35%  { transform: translate(24px, 10px) scale(0.9); opacity: 1; }
  100% { transform: translate(0,0) scale(1); opacity: 1; }
}
.sc-spark { position: absolute; font-size: 0.85rem; animation: scSpark 2.2s ease-in-out infinite; }
.sc-spark.s1 { right: 22%; top: 22%; }
.sc-spark.s2 { right: 10%; top: 52%; animation-delay: 0.7s; }
.sc-spark.s3 { right: 34%; top: 66%; animation-delay: 1.3s; }
@keyframes scSpark {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.35; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}
.sc3 .sc-pal { animation: scHop 2s ease-in-out infinite; }
.story-text {
  margin: 18px 6px 20px;
  font-size: 0.95rem; font-weight: 700; line-height: 1.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.story-text b { color: #ffd35e; }
.story-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
.story-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.story-dot.on { background: #ffd35e; transform: scale(1.25); }
.story-screen .btn-sub { background: rgba(255,255,255,0.16); color: #fff; box-shadow: none; }

/* 結果画面にそえる 1行のお話 */
.story-line {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(120,90,200,0.12);
  border: 1.5px dashed #a88bd6;
  font-size: 0.82rem; font-weight: 700; color: #4a3f7a;
  line-height: 1.6;
}

/* 🌍 世界のようす(取りもどしたことば) */
.world-card { padding: 13px 16px; margin-bottom: 8px; }
.world-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 7px;
}
.world-title { font-weight: 800; font-size: 0.92rem; }
.world-num { font-size: 0.8rem; font-weight: 800; color: var(--sub); }
.world-num b { color: #3aa877; font-size: 1.1rem; }
.world-track {
  height: 12px; border-radius: 99px; overflow: hidden;
  /* 左は色がもどった土地、右はまだ眠っている(灰色) */
  background: repeating-linear-gradient(90deg, #dfe3ee 0 6px, #d5d9e6 6px 12px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);
}
.world-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7fd48a, #4fc0d8 55%, #b06ee8);
  box-shadow: 0 0 8px rgba(90,200,150,0.5);
  transition: width 0.6s ease;
}
.world-note { font-size: 0.74rem; color: var(--sub); font-weight: 700; margin-top: 7px; line-height: 1.5; }

/* ---------- 📅 あしたのおたのしみ(v2.45) ---------- */

.tomorrow-card {
  padding: 13px 16px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #f3f0ff, #e8e3ff);
  border: 2px solid #cfc5f7;
}
.tm-title { font-weight: 800; font-size: 0.92rem; color: #5b45a8; margin-bottom: 6px; }
.tm-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.tm-list li {
  font-size: 0.83rem; font-weight: 700; color: #4a4370; line-height: 1.45;
}
.tm-list li b { color: #2f2857; }

/* ゲームがロックされているときの案内カード */
.lock-card { padding: 22px 18px; margin-bottom: 14px; }
.lock-emoji { font-size: 2.6rem; line-height: 1.2; }
.lock-title { font-weight: 800; font-size: 1.05rem; margin: 4px 0 6px; }

/* ② 学年えらび(横3つのタイル) */
.grade-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grade-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px;
  border-radius: 18px;
  color: #fff;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.12);
  transition: transform 0.1s;
}
.grade-tile:active { transform: translateY(3px); }
.grade-tile { position: relative; overflow: hidden; }

/* 🗺️ 学年えらびを「3つの土地」の絵に(v2.61.4)。
   「中1 0%」と文字と数字だけのボタンだったので、旅の土地に見えるようにした。
   中1=草原(お日さま) / 中2=海(なみ) / 中3=山(ゆきの峰)。
   絵はタイルの背景として敷き、名前と%リングはその上にのせる */
.gt-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gt-art i { position: absolute; display: block; }
.gt-name, .gt-ring { position: relative; z-index: 1; }

/* --- 中1: 草原 --- */
.grade-tile.g1 { background: linear-gradient(180deg, #6fd0ff 0%, #a7e6ff 52%, #8fd870 52%, #58ac41 100%); }
.g1 .ga-orb {                       /* お日さま */
  right: 10px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe0 0 40%, #ffe066 66%, #ffc32e 100%);
  box-shadow: 0 0 12px 4px rgba(255,224,130,0.55);
}
.g1 .ga-a { left: -18%; bottom: 28%; width: 70%; height: 34px; border-radius: 50% 50% 0 0;
            background: #7cc457; }
.g1 .ga-b { right: -20%; bottom: 30%; width: 66%; height: 26px; border-radius: 50% 50% 0 0;
            background: #6ab84a; }
.g1 .ga-c { left: 0; right: 0; bottom: 0; height: 26%;
            background: linear-gradient(180deg, #64b246, #4d9134); }

/* --- 中2: 海 --- */
.grade-tile.g2 { background: linear-gradient(180deg, #8ab6ff 0%, #bcd8ff 46%, #4aa6e8 46%, #1f6fb8 100%); }
.g2 .ga-orb {                       /* 白い雲 */
  left: 10px; top: 9px; width: 26px; height: 10px; border-radius: 99px;
  background: rgba(255,255,255,0.75);
}
.g2 .ga-a { left: -10%; bottom: 34%; width: 60%; height: 14px; border-radius: 50%;
            background: rgba(255,255,255,0.5); }
.g2 .ga-b { right: -10%; bottom: 22%; width: 66%; height: 12px; border-radius: 50%;
            background: rgba(255,255,255,0.38); }
.g2 .ga-c { left: -6%; bottom: 6%; width: 62%; height: 11px; border-radius: 50%;
            background: rgba(255,255,255,0.3); }

/* --- 中3: 山 --- */
.grade-tile.g3 { background: linear-gradient(180deg, #6a63c8 0%, #a58bd8 44%, #8a7fc4 44%, #5b5090 100%); }
.g3 .ga-orb {                       /* まるい月 */
  right: 11px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf0 0 46%, #ffeeb8 100%);
  box-shadow: 0 0 12px 4px rgba(255,245,200,0.45);
}
/* 峰は三角(clip-path)。てっぺんだけ白い雪 */
.g3 .ga-a { left: 4%; bottom: 22%; width: 54%; height: 40px; background: #4a4174;
            clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g3 .ga-b { right: 2%; bottom: 22%; width: 46%; height: 30px; background: #574d84;
            clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g3 .ga-c { left: 0; right: 0; bottom: 0; height: 24%;
            background: linear-gradient(180deg, #4a4174, #362f5c); }
.g3 .ga-a::after {
  content: ""; position: absolute; left: 34%; top: 0; width: 32%; height: 34%;
  background: #eef0ff; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.gt-name { font-weight: 800; font-size: 1.15rem; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
/* 達成率をドーナツ状のリングで表示 */
.gt-ring {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,0.3) 0);
  position: relative;
}
.gt-ring::before {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: rgba(0,0,0,0.18);
}
.gt-pct { position: relative; font-size: 0.78rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* ③ あつめる・きろく(小さめタイル) */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #fff;
  border: 2px solid #e8ecf7;
  border-radius: 16px;
  padding: 12px 4px;
  box-shadow: 0 4px 0 #e2e8f7;
  transition: transform 0.1s, box-shadow 0.1s;
}
.menu-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 #e2e8f7; }
.menu-tile .mt-emoji { font-size: 1.7rem; line-height: 1.2; }
.menu-tile .mt-name { font-weight: 800; font-size: 0.85rem; }
.menu-tile .mt-sub { font-size: 0.7rem; color: var(--sub); font-weight: 700; }
.menu-tile.alert { border-color: #ffc9c9; background: #fff7f7; }

/* ホーム最下部のバージョン表記(タップで最新版チェック) */
.version-line {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 8px;
  background: transparent;
  color: #96a0bd;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  border-radius: 99px;
  transition: color 0.2s, background 0.2s;
}
.version-line:active { background: rgba(255,255,255,0.5); }
.version-line.checking { color: var(--primary); }
.version-line.ok { color: #1d8a5c; background: rgba(227,249,239,0.8); }
.version-line.update {
  color: #fff;
  background: linear-gradient(135deg, #ff9838, #ff5e62);
  font-size: 0.8rem;
  padding: 10px;
  box-shadow: 0 3px 10px rgba(255,120,40,0.35);
}

/* ゲームであそぶ: ゲーム選択メニュー */
.game-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.game-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 3px solid #e4e9f5;
  border-radius: 20px;
  padding: 20px 10px;
  box-shadow: 0 4px 0 #dbe4fb;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}
.game-pick-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #dbe4fb; }
.game-pick-btn .gp-emoji { font-size: 2.6rem; line-height: 1; }
.game-pick-btn .gp-name { font-weight: 800; font-size: 0.95rem; }
.game-pick-btn.omakase {
  border-color: #ffd88a;
  background: linear-gradient(135deg, #fff7e6, #ffeccc);
  box-shadow: 0 4px 0 #f0d090;
}
.game-pick-btn.omakase:active { box-shadow: 0 1px 0 #f0d090; }

.back-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.back-btn {
  background: #fff;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sub);
  box-shadow: var(--shadow);
}
.screen-title { font-size: 1.1rem; font-weight: 800; }

/* ---------- ペンギン ---------- */
.penguin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
@keyframes penguinBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
/* 🐧 マスコット(v2.61.4でCSS描画に)。
   絵文字だと端末ごとに形がちがい、手をふらせることもできなかった。
   **部品はすべて .penguin-face の中の絶対配置**。動きを止めても
   ちゃんとペンギンの形で立っているように、姿勢は通常のCSSで作ること
   (アニメの中だけに姿勢を書かない ─ v2.61.2の教訓) */
.penguin-face {
  position: relative;
  width: 56px; height: 60px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18));
  animation: penguinBob 2.2s ease-in-out infinite;
}
.penguin-face > span { position: absolute; }
/* からだ(黒い部分) */
.pg-body {
  left: 6px; top: 2px; width: 44px; height: 52px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(160deg, #4a5570 0%, #2f3852 55%, #232b40 100%);
}
/* おなか(白い部分) */
.pg-belly {
  left: 15px; top: 16px; width: 26px; height: 36px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, #ffffff 0%, #f2f5ff 70%, #e4e9f8 100%);
}
/* 目(まばたきする) */
.pg-eye {
  top: 19px; width: 7px; height: 7px; border-radius: 50%;
  background: #161b2c;
  animation: pgBlink 4.4s ease-in-out infinite;
}
.pg-eye.l { left: 16px; }
.pg-eye.r { left: 33px; }
.pg-eye::after {   /* 光 */
  content: ""; position: absolute; left: 1.5px; top: 1px;
  width: 2.5px; height: 2.5px; border-radius: 50%; background: #fff; opacity: 0.9;
}
/* くちばし */
.pg-beak {
  left: 23px; top: 27px; width: 10px; height: 8px;
  background: linear-gradient(180deg, #ffb347, #ff9017);
  border-radius: 42% 42% 60% 60%;
}
/* ほっぺ */
.pg-cheek {
  top: 28px; width: 7px; height: 4.5px; border-radius: 50%;
  background: #ff9ec0; opacity: 0.65;
}
/* ほっぺは**白い顔の内側**に置く(外へ出すと黒いからだの上でピンクの点が浮く) */
.pg-cheek.l { left: 16px; }
.pg-cheek.r { right: 16px; }
/* つばさ。**右手だけ振る**(左は自然に下ろしたまま) */
.pg-wing {
  top: 20px; width: 11px; height: 26px;
  background: linear-gradient(160deg, #3d4763, #262e46);
  border-radius: 60% 40% 50% 50%;
}
.pg-wing.l { left: 1px;  transform-origin: 70% 12%; transform: rotate(10deg); }
.pg-wing.r { right: 1px; transform-origin: 30% 12%; transform: rotate(-18deg);
             animation: pgWave 2.6s ease-in-out infinite; }
/* あし */
.pg-foot {
  bottom: 0; width: 15px; height: 8px; border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #ffb347, #f08a12);
}
.pg-foot.l { left: 11px; }
.pg-foot.r { right: 11px; }
@keyframes pgBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.12); }
}
@keyframes pgWave {
  0%, 62%, 100% { transform: rotate(-18deg); }
  72%           { transform: rotate(-46deg); }
  82%           { transform: rotate(-6deg); }
  92%           { transform: rotate(-36deg); }
}
/* 動きを止めても、**通常のCSSで姿勢を作ってある**のでペンギンの形のまま立っている
   (アニメの中だけに姿勢を書かない ─ v2.61.2の教訓) */
@media (prefers-reduced-motion: reduce) {
  .penguin-face, .pg-eye, .pg-wing.r { animation: none !important; }
}
.penguin-bubble {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 11px 16px;
  font-size: 0.94rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  flex: 1;
}
.penguin-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: #fff;
}

/* ---------- ホーム ---------- */
@keyframes reviewPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(255, 150, 80, 0.4); }
  50%      { transform: scale(1.02); box-shadow: 0 8px 26px rgba(255, 150, 80, 0.6); }
}
.review-banner {
  background: linear-gradient(135deg, #ffc247, #ff7eb0);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(255, 150, 80, 0.4);
  animation: reviewPulse 2s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.review-banner .rb-title { font-weight: 800; font-size: 1.08rem; }
.review-banner .rb-count { font-size: 1.8rem; font-weight: 800; }
.review-banner button {
  margin-top: 8px;
  width: 100%;
  background: rgba(255,255,255,0.92);
  color: #e0662f;
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
  font-size: 1rem;
}

.goal-bar-wrap { margin-top: 6px; }
.goal-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--sub);
  font-weight: 700;
}

.grade-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
  width: 100%;
  text-align: left;
  transition: transform 0.12s, box-shadow 0.12s;
}
.grade-row:active { transform: scale(0.98); }
.grade-badge {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.12);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.grade-badge.g1 { background: linear-gradient(135deg, #4facfe, #38d9c3); }
.grade-badge.g2 { background: linear-gradient(135deg, #7a5cff, #b06ab3); }
.grade-badge.g3 { background: linear-gradient(135deg, #ff8fab, #ff6b6b); }
.grade-info { flex: 1; }
.grade-name { font-weight: 800; }
.grade-pct { font-size: 0.8rem; color: var(--sub); font-weight: 700; }
.grade-arrow { color: var(--sub); font-size: 1.4rem; }

.progress-track {
  height: 12px;
  background: #e6eaf5;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 5px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #4facfe, #7a5cff);
  transition: width 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
  overflow: hidden;
}
/* 進捗バーに動くしましま模様 */
@keyframes stripeMove { from { background-position: 0 0; } to { background-position: 28px 0; } }
.progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 75%, transparent 75%);
  background-size: 20px 20px;
  animation: stripeMove 0.7s linear infinite;
}
.progress-fill.goal { background: linear-gradient(90deg, #ffb84d, #ff8fab); }

.home-links { display: flex; gap: 10px; margin-top: 4px; }
.home-links .btn { margin-top: 0; padding: 12px 6px; font-size: 0.88rem; border-radius: 14px; }

/* ---------- レベル一覧 ---------- */
.level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 10px;
  text-align: left;
}
.level-row { transition: transform 0.12s; }
.level-row:active { transform: scale(0.98); }
.level-row.locked-look { opacity: 0.85; }
.level-num {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #dfe7ff);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}
.level-num.done {
  background: linear-gradient(135deg, #7ee0b0, #35c281);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.level-main { flex: 1; }
.level-title { font-weight: 800; font-size: 0.98rem; }
.level-meta { font-size: 0.75rem; color: var(--sub); font-weight: 700; }
.level-stars { font-size: 1.1rem; letter-spacing: 2px; }
.star-on { color: var(--star); filter: drop-shadow(0 1px 1px rgba(255,180,40,0.5)); }
.star-off { color: var(--star-off); }

/* ---------- 学習カード ---------- */
.session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.session-quit {
  background: #fff;
  color: var(--sub);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.session-timer {
  font-weight: 800;
  color: var(--sub);
  font-size: 0.9rem;
  background: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 64px;
  text-align: center;
}
.session-progress { flex: 1; }

.phase-label {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
  background: #eef2ff;
  border-radius: 99px;
  padding: 5px 14px;
  display: inline-block;
  margin: 0 auto 12px;
}
.phase-label-wrap { text-align: center; }

.word-card {
  text-align: center;
  padding: 26px 20px;
  background: radial-gradient(circle at 50% 20%, #fbfcff, #eef3ff);
}
@keyframes emojiBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-10px) scale(1.08); }
  60%      { transform: translateY(0) scale(1); }
}
.word-emoji {
  font-size: 4.6rem;
  line-height: 1.2;
  display: inline-block;
  animation: emojiBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.12));
}
.word-en {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 4px 0 2px;
  font-family: "Segoe UI", "Verdana", sans-serif;
}
.word-pos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f3fa;
  border-radius: 99px;
  padding: 4px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sub);
  margin: 6px 0;
}
.word-ja { font-size: 1.5rem; font-weight: 800; margin: 6px 0 14px; }
.word-example {
  background: #f7f9ff;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.word-ex-en { font-size: 1.02rem; font-weight: 700; font-family: "Segoe UI", "Verdana", sans-serif; }
.word-ex-ja { font-size: 0.85rem; color: var(--sub); font-weight: 700; }
.word-speak-hint {
  font-size: 0.82rem;
  color: var(--sub);
  font-weight: 700;
  margin-bottom: 14px;
}
.speak-btn {
  background: #eef2ff;
  color: var(--primary);
  border-radius: 99px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 6px;
}
/* 「まず発音を聞いてね」と気づかせる脈打ち */
@keyframes speakPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,124,255,0.45); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(79,124,255,0); }
}
.speak-btn.pulse { animation: speakPulse 1.3s ease-out infinite; }
/* 最初の音声が鳴っている間は発音ボタンも押せない(音の重なり・早送りを防ぐ) */
.speak-btn.locked, .speak-btn.locked:disabled {
  background: #eef0f6;
  color: #a8b0c5;
  cursor: default;
  animation: none;
}

/* 連打ぼうし: 発音を聞くか少し待つまで「次へ」は押せない */
.btn.locked, .btn.locked:disabled {
  background: #dfe4f0;
  color: #98a1b8;
  box-shadow: 0 4px 0 #cdd4e4;
  cursor: default;
  opacity: 1;
  font-size: 0.95rem;
}
.btn.locked:active { transform: none; }

/* ---------- クイズ ---------- */
.quiz-question { text-align: center; padding: 22px 20px 16px; }
.quiz-type-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  background: #fff0f5;
  display: inline-block;
  border-radius: 99px;
  padding: 3px 12px;
  margin-bottom: 8px;
}
.quiz-word {
  font-size: 2rem;
  font-weight: 800;
  font-family: "Segoe UI", "Verdana", sans-serif;
}
.quiz-word.ja { font-family: inherit; font-size: 1.7rem; }
.quiz-sound-btn {
  font-size: 2.6rem;
  background: #eef2ff;
  width: 84px; height: 84px;
  border-radius: 50%;
  margin: 6px auto;
  display: flex; align-items: center; justify-content: center;
}
.quiz-ask { font-size: 0.9rem; color: var(--sub); font-weight: 700; }

.choices { display: grid; gap: 11px; }
.choice-btn {
  background: #fff;
  border: 2px solid #e4e9f5;
  border-radius: 16px;
  padding: 16px 14px;
  font-size: 1.08rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 3px 0 #e4e9f5;
  transition: background 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.08s;
}
.choice-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #e4e9f5; }
.choice-btn.en { font-family: "Segoe UI", "Verdana", sans-serif; }
.choice-btn.correct {
  background: var(--correct-bg);
  border-color: var(--correct);
  color: #1d8a5c;
}
.choice-btn.wrong {
  background: var(--wrong-bg);
  border-color: var(--wrong);
  color: #d13c3c;
}
.choice-btn:disabled { cursor: default; transform: none; }

.feedback {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  min-height: 34px;
  padding-top: 8px;
}
.feedback.ok { color: var(--correct); }
.feedback.ng { color: var(--wrong); }

/* ---------- クリア画面 ---------- */
@keyframes clearCardIn {
  0%   { transform: scale(0.85) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
.clear-card {
  text-align: center;
  padding: 30px 20px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #fff9e8, #ffffff 60%);
  animation: clearCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes clearTitlePop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.clear-title {
  font-size: 2rem; font-weight: 800; margin-bottom: 4px;
  animation: clearTitlePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
/* 星が1つずつポンッと出る */
@keyframes starPop {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  70% { transform: scale(1.3) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.clear-stars { font-size: 2.4rem; letter-spacing: 4px; margin: 8px 0; }
.clear-stars .star-on, .clear-stars .star-off { display: inline-block; animation: starPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.clear-stars span:nth-child(1) { animation-delay: 0.3s; }
.clear-stars span:nth-child(2) { animation-delay: 0.45s; }
.clear-stars span:nth-child(3) { animation-delay: 0.6s; }
.clear-stars span:nth-child(4) { animation-delay: 0.75s; }
.clear-stars span:nth-child(5) { animation-delay: 0.9s; }
.clear-stats {
  display: flex;
  flex-wrap: wrap;          /* ボス戦は項目が4つあるので折り返す */
  justify-content: center;
  gap: 14px 24px;
  margin: 14px 0 6px;
}
.clear-stat .cs-label { font-size: 0.78rem; color: var(--sub); font-weight: 700; }
.clear-stat .cs-value { font-size: 1.4rem; font-weight: 800; }

@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(340px) rotate(320deg); opacity: 0; }
}
.confetti {
  position: absolute;
  top: 0;
  font-size: 1.2rem;
  animation: confetti-fall 2.6s ease-in forwards;
  pointer-events: none;
}

/* ---------- 記録・苦手 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,0.8);
  padding: 16px;
  text-align: center;
  border: 2px solid #f0f3fb;
}
.stat-box .sb-label { font-size: 0.78rem; color: var(--sub); font-weight: 700; }
.stat-box .sb-value { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.stat-box .sb-unit { font-size: 0.85rem; font-weight: 700; color: var(--sub); }

.weak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.weak-word { font-weight: 800; font-size: 1.05rem; font-family: "Segoe UI", "Verdana", sans-serif; }
.weak-ja { font-size: 0.82rem; color: var(--sub); font-weight: 700; }
.weak-count {
  background: var(--wrong-bg);
  color: var(--wrong);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- 設定 ---------- */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #eef0f6;
  font-weight: 700;
}
.setting-row:last-child { border-bottom: none; }
.setting-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }

/* ---------- 🛠️ 動作確認モード(デバッグ) ---------- */

/* かくしコマンドの当たり判定。ふだんはただの文字に見せる */
.dbg-line { user-select: none; }
.dbg-hit { display: inline-block; padding: 2px 4px; cursor: default; -webkit-tap-highlight-color: transparent; }

/* ONのあいだは必ず見えるようにして、気づかないまま有効にならないようにする */
.debug-banner {
  display: block; width: 100%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 2px dashed #b06ab3;
  background: repeating-linear-gradient(45deg, #f6ecff 0 10px, #efe0fb 10px 20px);
  color: #6b3a86;
  font-size: 0.8rem; font-weight: 800; text-align: center;
}
.debug-banner:active { transform: translateY(2px); }
.debug-card { border: 2px dashed #b06ab3; background: linear-gradient(180deg, #faf3ff, #f2e6fb); }
.debug-card .setting-title { color: #6b3a86; }

.toggle {
  width: 52px; height: 30px;
  border-radius: 99px;
  background: #dfe3ee;
  position: relative;
  transition: background 0.2s;
}
.toggle.on { background: var(--correct); }
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on::after { left: 25px; }

.note { font-size: 0.78rem; color: var(--sub); font-weight: 700; margin-top: 8px; }

.center { text-align: center; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }

/* ---------- ゲーム演出 (v2.0) ---------- */

/* カードのふわっと登場 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .choices, .grade-row, .level-row { animation: fadeUp 0.28s ease both; }

/* プレイヤーカード */
.player-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: linear-gradient(135deg, #3a3f66, #5a4b8f);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* プレイヤーカードにキラッと光が走る */
@keyframes cardSheen { 0% { left: -60%; } 60%, 100% { left: 130%; } }
.player-card::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  animation: cardSheen 5s ease-in-out infinite;
}
.player-card .goal-label { color: #d6d9f0; }
@keyframes lvBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(255, 180, 60, 0.5); }
  50%      { transform: scale(1.06); box-shadow: 0 4px 16px rgba(255, 180, 60, 0.8); }
}
.player-lv {
  min-width: 62px; height: 62px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffd54c, #ff9f68);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.7rem;
  color: #7a4b00;
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  animation: lvBadgePulse 2.4s ease-in-out infinite;
  z-index: 1;
}
.player-info { z-index: 1; }
/* 連続日数チップ */
@keyframes streakGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(255, 120, 40, 0.4); }
  50%      { box-shadow: 0 4px 20px rgba(255, 120, 40, 0.7); }
}
.streak-chip {
  text-align: center;
  font-weight: 800;
  font-size: 0.92rem;
  color: #fff;
  background: linear-gradient(135deg, #ff9838, #ff5e62);
  border-radius: 99px;
  padding: 9px 18px;
  margin: 0 auto 12px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 3px 12px rgba(255, 120, 40, 0.4);
  animation: streakGlow 1.8s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.player-lv-label { font-size: 0.8rem; margin-right: 2px; }
.player-info { flex: 1; }
.player-sub { font-size: 0.78rem; font-weight: 700; color: #cdd5ec; margin-top: 4px; }

.progress-fill.xpfill {
  background: linear-gradient(90deg, #ffc93c, #ff9f68);
  position: relative;
  overflow: hidden;
}
@keyframes shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.progress-fill.xpfill::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shine 2.2s ease-in-out infinite;
}

.home-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.home-links .btn { margin-top: 0; }

/* まちがえたときのシェイク */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.shake { animation: shake 0.4s ease; }

/* コンボ */
@keyframes comboPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 復習・苦手たいじの進み具合(終わりが見えるとがんばれる) */
.review-progress {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 8px;
  min-height: 20px;
}
.rv-dots { display: flex; gap: 5px; }
.rv-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px #d5deef;
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
}
.rv-dot.done {
  background: linear-gradient(180deg, #7ee0b0, #35c281);
  box-shadow: inset 0 0 0 2px #2aa76c, 0 0 6px rgba(53,194,129,0.6);
  transform: scale(1.1);
}
.rv-msg {
  font-size: 0.8rem; font-weight: 800; color: #e0662f;
  white-space: nowrap;
}

/* コンボ表示は「出す/消す」で画面がズレないよう、場所は常に確保しておく
   (display を切りかえると下の要素が動いてしまうので visibility を使う) */
.combo-chip.hidden { visibility: hidden; animation: none; }
.combo-chip {
  text-align: center;
  font-weight: 800;
  color: #e0662f;
  background: #fff3e6;
  border: 2px solid #ffc93c;
  border-radius: 99px;
  padding: 5px 16px;
  margin: 0 auto 10px;
  width: fit-content;
  animation: comboPop 0.3s ease both;
}

/* XPフロート */
@keyframes xpFloat {
  0%   { transform: translateY(6px); opacity: 0; }
  30%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}
.xp-float {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #f59e0b;
  animation: xpFloat 1.4s ease forwards;
}
.xp-summary {
  margin: 8px 0 4px;
  font-weight: 800;
  color: #f59e0b;
  font-size: 1.05rem;
}

/* スペル並べかえ */
.quiz-type-label.spell { color: #b06ab3; background: #f7ecff; }
.spell-slots {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin: 14px 0 10px;
}
.spell-slot {
  width: 34px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 4px solid #cdd8f7;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.5rem; font-weight: 800; color: var(--primary);
}
.spell-slot.filled { border-bottom-color: var(--primary); }
.spell-slots.correct .spell-slot { color: var(--correct); border-bottom-color: var(--correct); }
.spell-slots.wrong .spell-slot { color: var(--wrong); border-bottom-color: var(--wrong); }
.spell-letters {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 9px; margin-bottom: 10px;
}
.letter-btn {
  width: 50px; height: 54px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e4e9f5;
  box-shadow: 0 4px 0 #dbe4fb;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s;
}
.letter-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #dbe4fb; }
.letter-btn.used { opacity: 0.25; box-shadow: none; cursor: default; }
.spell-back { width: auto; padding: 8px 18px; font-size: 0.85rem; margin-bottom: 4px; }

/* あなうめ問題 */
.quiz-sentence {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "Segoe UI", "Verdana", sans-serif;
  margin: 6px 0;
  line-height: 1.7;
}
.blank {
  color: var(--primary);
  border-bottom: 3px solid var(--primary);
  padding: 0 4px;
  letter-spacing: 2px;
}

/* たまご・なかま */
@keyframes eggWobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
.egg-emoji {
  font-size: 3.4rem;
  animation: eggWobble 1s ease-in-out infinite;
  display: inline-block;
}
@keyframes friendPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.friend-emoji {
  font-size: 4rem;
  animation: friendPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  display: inline-block;
}
.friend-rarity { font-weight: 800; font-size: 0.9rem; letter-spacing: 1px; }
.friend-name { font-weight: 800; font-size: 1.25rem; }

/* NEWバッジ共通 */
@keyframes newBadgeIn {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}
@keyframes newBadgePulse {
  0%, 100% { transform: scale(1) rotate(-8deg); }
  50%      { transform: scale(1.1) rotate(-8deg); }
}
.new-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff5e7a, #ff8a3d);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 5px 14px;
  border-radius: 99px;
  box-shadow: 0 3px 10px rgba(255, 90, 90, 0.5);
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
  animation: newBadgeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             newBadgePulse 1.1s ease-in-out 0.4s infinite;
}
/* たまご開封演出: 絵文字の右上にNEWバッジを乗せる */
.friend-emoji-wrap { position: relative; display: inline-block; }
.friend-emoji-wrap .new-badge {
  position: absolute;
  top: -10px;
  right: -22px;
  z-index: 2;
}
/* ずかんカード用の小さいNEWバッジ */
.new-badge.small {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 0.6rem;
  padding: 2px 7px;
  box-shadow: 0 2px 6px rgba(255, 90, 90, 0.5);
}
/* プレイヤーカードのインライン表示用 */
.new-badge.tiny {
  font-size: 0.66rem;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 2px;
}
/* ホームメニューのボタンにつく赤い通知ドット */
.new-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff4d5e;
  box-shadow: 0 0 0 2px #fff;
  margin-left: 4px;
  vertical-align: top;
  animation: newBadgePulse 1.1s ease-in-out infinite;
}
.egg-card { padding: 18px; }
/* 🎯 ミッション3つ達成のごほうび(ふつうのたまごと見わけがつくように金色) */
.egg-card.mission-egg {
  background: linear-gradient(180deg, #fff6dc, #ffe9b0);
  border: 2px solid #f0c04a;
}
.egg-card.mission-egg .note { color: #8a6015; }
/* 🌈 ずかんコンプリートの でんせつのたまご(一生に一度) */
.egg-card.legend-egg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff3d6, #ffe0f0 45%, #dcefff);
  border: 3px solid #ff8a3d;
  box-shadow: var(--shadow), 0 0 22px rgba(255, 150, 80, 0.45);
}
.egg-card.legend-egg .note { color: #8a4a15; }
.egg-card.legend-egg .egg-emoji { animation: legendPulse 1.1s ease-in-out infinite; }
@keyframes legendPulse {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50%      { transform: scale(1.14) rotate(4deg); }
}

/* ずかん */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.coll-item {
  position: relative;
  background: #f7f9ff;
  border: 2px solid #e4e9f5;
  border-radius: 14px;
  padding: 8px 4px;
  text-align: center;
}
.coll-item.locked { opacity: 0.55; filter: grayscale(1); }
.coll-item.coll-new { box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.35); }
.coll-emoji { font-size: 1.9rem; line-height: 1.3; }
.coll-name { font-size: 0.62rem; font-weight: 700; color: var(--sub); }
.coll-rarity { font-size: 0.62rem; font-weight: 800; color: #a8b0c5; }

/* 🧩 なかまのかけら(v2.57.0) */
.shard-bar {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f3f0ff, #e9e3fb);
  border: 2px solid #cfc5f7;
}
.shard-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.shard-title { font-weight: 800; font-size: 0.86rem; color: #5b45a8; }
.shard-num { font-size: 0.78rem; font-weight: 800; color: var(--sub); }
.shard-num b { color: #7c4fd0; font-size: 1.15rem; }
.shard-track {
  height: 10px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,0.75);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);
}
.shard-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #b06ee8, #7c4fd0);
  transition: width 0.5s ease;
}
.shard-note { font-size: 0.72rem; font-weight: 700; color: #5b4a86; margin-top: 6px; line-height: 1.55; }
/* かけらが足りている枠は「むかえる」ボタンになる */
@keyframes buyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,79,208,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(124,79,208,0); }
}
.coll-item.buyable {
  opacity: 1; filter: none; cursor: pointer;
  border-color: #7c4fd0;
  background: linear-gradient(180deg, #f6f1ff, #e6dcfb);
  animation: buyPulse 1.8s ease-out infinite;
}
.coll-item.buyable .coll-emoji { filter: none; }
.coll-item.buyable .coll-name { color: #5b45a8; font-weight: 800; }
.coll-item.buyable .coll-rarity { color: #7c4fd0; }
.coll-item.buyable:active { transform: translateY(2px); }

/* 学年ごとの章(v2.55.0)。まだ行っていない学年は「💤」で伏せる */
.coll-section { margin-top: 14px; }
.coll-section:first-of-type { margin-top: 6px; }
.coll-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 5px; border-bottom: 2px solid #eef1f7;
}
.coll-sec-name { font-weight: 800; font-size: 0.9rem; }
.coll-sec-num { font-size: 0.78rem; font-weight: 800; color: var(--sub); }
.coll-item.sleeping { opacity: 0.45; filter: none; }
.coll-item.sleeping .coll-emoji { filter: grayscale(1); }

/* 👑 でんせつのなかま(ぜんぶそろうとあらわれる)。
   「すごいことが起こるかも」で終わらせず、**待っている枠を見せる** */
.legend-row { margin-top: 16px; border-top: 2px dashed #e4e9f5; padding-top: 12px; }
.legend-label { font-size: 0.78rem; font-weight: 800; color: #8a6015; }
.legend-label small { font-weight: 700; color: var(--sub); }
.legend-row .coll-grid { grid-template-columns: repeat(4, 1fr); }
.coll-item.legend-item {
  background: linear-gradient(135deg, #fff3d6, #ffe0f0 50%, #dcefff);
  border-width: 2px;
}
/* そろっていないときは伏せるが、金の枠だけは見せる(ボスと同じで「正体は伏せる」) */
.coll-item.locked.legend-item { opacity: 0.75; filter: none; border-color: #f0c04a; }
.coll-item.locked.legend-item .coll-emoji { filter: grayscale(0.2); }
/* まだ行っていない学年のでんせつ枠(v2.61.3)。
   .coll-item.sleeping(0.45)より .coll-item.locked.legend-item(0.75)のほうが
   詳細度が高いので、**明示的に上書きしないと「解放ずみだが未入手」と見分けがつかない**。
   その学年のなかま(💤・grayscale(1))と同じくらい伏せて、存在だけ見せる */
.coll-item.locked.legend-item.sleeping { opacity: 0.5; border-color: #e6d3a0; }
.coll-item.locked.legend-item.sleeping .coll-emoji { filter: grayscale(0.85); }
/* そろったら「割ってね」と光る */
.coll-item.legend-item.ready { animation: legendPulse 1.2s ease-in-out infinite; }

.hero-status .hs-item.legend {
  background: linear-gradient(90deg, #ffd35e, #ff9f43);
  color: #6b3800; text-shadow: none;
}

/* 実績 */
.badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.badge-row.unlocked { opacity: 1; }
.badge-icon {
  font-size: 1.7rem;
  width: 44px; height: 44px;
  background: #f0f3fa;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.badge-row.unlocked .badge-icon { background: #fff3d6; }
.badge-main { flex: 1; }
.badge-name { font-weight: 800; font-size: 0.95rem; }
.badge-desc { font-size: 0.75rem; color: var(--sub); font-weight: 700; }
.badge-date { font-size: 0.72rem; color: var(--sub); font-weight: 700; }

/* レベルアップのお知らせ(上から出てくる小さなバナー)
   画面をおおうと、ゲーム中に何も見えなくなってしまうので出しかたを変えた */
@keyframes lvBannerIn {
  0%   { transform: translate(-50%, -150%) scale(0.85); opacity: 0; }
  60%  { transform: translate(-50%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
@keyframes lvBannerOut {
  to { transform: translate(-50%, -150%) scale(0.9); opacity: 0; }
}
.levelup-banner {
  position: fixed;
  left: 50%;
  top: calc(16px + var(--slot, 0) * 56px);
  transform: translate(-50%, -150%);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border-radius: 99px;
  background: linear-gradient(135deg, #ffd45e, #ff9ec4);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,150,60,0.5), inset 0 2px 0 rgba(255,255,255,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;   /* お知らせの下のボタンも押せるようにする */
  animation: lvBannerIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             lvBannerOut 0.4s ease 1.7s forwards;
}
/* しょうごうが変わった回だけ、色と長さを変えて主役にする */
.levelup-banner.rank-up {
  background: linear-gradient(135deg, #ffd45e, #a78bfa);
  padding: 11px 24px;
  animation: lvBannerIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             lvBannerOut 0.4s ease 2.5s forwards;
}
.levelup-banner.rank-up .lv-burst { font-size: 1.6rem; }
.levelup-banner .lv-burst { font-size: 1.3rem; }
.levelup-banner .lv-text { font-weight: 800; font-size: 0.92rem; }
.levelup-banner .lv-num {
  font-weight: 800; font-size: 1.15rem;
  font-family: "Segoe UI", "Verdana", sans-serif;
}
@media (prefers-reduced-motion: reduce) {
  .levelup-banner { animation: none !important; transform: translate(-50%, 0); }
}

/* 実績トースト */
.toast {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: #2b3245;
  color: #ffe9a8;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 12px 22px;
  border-radius: 99px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.show { top: 18px; }

/* ---------- アクションミニゲーム (v2.2) ---------- */
.game-prompt {
  text-align: center;
  font-size: 1.02rem;
  font-weight: 800;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.game-prompt b {
  color: var(--primary);
  font-size: 1.5em; /* お題の単語は大きく読みやすく */
  font-family: "Segoe UI", "Verdana", sans-serif;
  padding: 0 2px;
}
.game-stage {
  position: relative;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(#eaf3ff, #f6ecff);
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255,255,255,0.5);
  margin-bottom: 10px;
  touch-action: manipulation;
  user-select: none;
}
/* ゲームごとの世界観 */
.stage-mole {  /* もぐらたたき: 草原(お日さま・丘・草のしま模様) */
  background:
    radial-gradient(circle at 86% 13%, #fff3a8 0 20px, rgba(255,243,168,0.55) 22px, rgba(255,243,168,0) 34px),
    radial-gradient(130% 62% at 16% 50%, #bde8a2 0 40%, rgba(0,0,0,0) 41%),
    radial-gradient(130% 58% at 84% 48%, #b0e196 0 40%, rgba(0,0,0,0) 41%),
    repeating-linear-gradient(94deg, rgba(255,255,255,0.07) 0 7px, rgba(20,80,20,0.05) 7px 14px),
    linear-gradient(#a9dcff 0%, #d9f1ff 33%, #93d16e 33%, #67b447 100%);
}
/* ゆっくり流れる雲 */
@keyframes cloudDrift {
  0%   { transform: translateX(-12%); }
  100% { transform: translateX(112%); }
}
.stage-mole::before {
  content: "☁️";
  position: absolute; top: 8px; left: 0;
  font-size: 1.6rem; opacity: 0.9;
  animation: cloudDrift 26s linear infinite;
  pointer-events: none;
}
.stage-mole::after {
  content: "☁️";
  position: absolute; top: 30px; left: 0;
  font-size: 1.1rem; opacity: 0.75;
  animation: cloudDrift 38s linear infinite;
  animation-delay: -14s;
  pointer-events: none;
}
.stage-jump {  /* ジャンプキャッチ: 青空と太陽 */
  background: linear-gradient(#7ec8ff 0%, #a9ddff 42%, #d3f0ff 68%, #e8f8e6 100%);
}
/* お日さま(CSSで描いた やわらかい光) */
@keyframes sunGlow {
  0%, 100% { box-shadow: 0 0 22px 10px rgba(255,236,150,0.65); }
  50%      { box-shadow: 0 0 30px 16px rgba(255,236,150,0.85); }
}
.stage-jump::before {
  content: "";
  position: absolute; top: 14px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf0, #ffe066 62%, #ffc93c);
  animation: sunGlow 4s ease-in-out infinite;
  pointer-events: none;
}
/* 流れる雲 */
@keyframes jumpCloud {
  0%   { transform: translateX(120%); }
  100% { transform: translateX(-140%); }
}
.stage-jump::after {
  content: "☁️     ☁️        ☁️";
  position: absolute; top: 26px; left: 0; right: 0;
  font-size: 1.5rem; opacity: 0.85;
  white-space: nowrap;
  animation: jumpCloud 30s linear infinite;
  pointer-events: none;
}
.stage-shoot { /* シューティング: 星空 */
  background: radial-gradient(circle at 50% 20%, #3a3b7a, #1c1d3e 80%);
  background-color: #1c1d3e;
}
.stage-shoot::before {
  content: "⭐ ✨ 🌟 ⭐ ✨ 🌟 ⭐ ✨";
  position: absolute; inset: 0;
  font-size: 0.7rem; color: #fff; opacity: 0.5;
  letter-spacing: 30px; line-height: 46px; padding: 8px;
  word-spacing: 20px;
  pointer-events: none;
}
.stage-crane { /* たんごキャッチャー: ゲームセンターの筐体 */
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 8px, rgba(0,0,0,0.05) 8px 16px),
    linear-gradient(#ffc0dd 0%, #ffd7a8 45%, #bcd6ff 100%);
}
.stage-sound { /* サウンドキャッチ: 水の中 */
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.45) 0 30%, rgba(255,255,255,0) 60%),
    linear-gradient(#7fd4f5 0%, #3fa9dd 45%, #1c6fa8 100%);
}

/* ============================================================
   サウンドキャッチ(v2.28) 聞こえた単語のあわをタップ
   ============================================================ */
.sea { position: absolute; inset: 0; overflow: hidden; }
/* 水中にさしこむ光 */
@keyframes rayShift {
  0%, 100% { opacity: 0.35; transform: translateX(0) skewX(-14deg); }
  50%      { opacity: 0.6;  transform: translateX(10px) skewX(-10deg); }
}
.sea-ray {
  position: absolute; top: -20%; width: 46px; height: 150%;
  background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0));
  filter: blur(6px);
  animation: rayShift 6s ease-in-out infinite;
  pointer-events: none;
}
.sea-ray.r1 { left: 16%; }
.sea-ray.r2 { left: 62%; width: 30px; animation-delay: -3s; }
/* 泳ぐ魚(にぎやかし) */
@keyframes fishSwim {
  0%   { transform: translateX(-40px) scaleX(1); }
  49%  { transform: translateX(330px) scaleX(1); }
  50%  { transform: translateX(330px) scaleX(-1); }
  99%  { transform: translateX(-40px) scaleX(-1); }
  100% { transform: translateX(-40px) scaleX(1); }
}
.sea-fish {
  position: absolute; font-size: 1.4rem; opacity: 0.75;
  animation: fishSwim 18s linear infinite;
  pointer-events: none;
}
.sea-fish.f1 { top: 34%; }
.sea-fish.f2 { top: 76%; font-size: 1.1rem; animation-duration: 25s; animation-delay: -8s; }
.sea-penguin {
  position: absolute; left: 8px; bottom: 2px;
  font-size: 2.2rem;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
  pointer-events: none;
}

/* 操作ボタン(あわと重ならないよう、いちばん下に横ならびで置く) */
.sound-controls {
  position: absolute; left: 50%; bottom: 8px;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.sound-play {
  background: rgba(255,255,255,0.92);
  border: none; border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem; font-weight: 800; color: #14618f;
  white-space: nowrap;
  box-shadow: 0 4px 0 #b5dcf0, 0 6px 12px rgba(0,0,0,0.2);
}
.sound-play:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #b5dcf0; }
.sound-play.hint {
  background: rgba(255,247,219,0.95); color: #8a5a20;
  box-shadow: 0 4px 0 #e6c68a, 0 6px 12px rgba(0,0,0,0.2);
}
.sound-play.hint:active:not(:disabled) { box-shadow: 0 0 0 #e6c68a; }
.sound-play:disabled { opacity: 0.55; box-shadow: none; }

/* ヒントの吹き出し */
@keyframes hintPop {
  0%   { transform: translateX(-50%) scale(0.7); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.06); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.sound-hint {
  position: absolute; left: 50%; bottom: 54px;
  transform: translateX(-50%);
  max-width: 94%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #14618f; font-weight: 800; font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  opacity: 0;
  z-index: 3; pointer-events: none;
}
.sound-hint b { color: #d1610a; font-family: "Segoe UI", "Verdana", sans-serif; }
.sound-hint.show { opacity: 1; animation: hintPop 0.32s cubic-bezier(.2,1.4,.5,1); }

/* あわ */
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.03); }
}
.bubble {
  position: absolute;
  width: 40%; height: 92px;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.9) 0 12%, rgba(255,255,255,0.25) 26%, rgba(255,255,255,0.06) 55%),
    rgba(255,255,255,0.16);
  box-shadow: inset 0 -6px 12px rgba(255,255,255,0.35), 0 4px 10px rgba(0,0,0,0.18);
  animation: bubbleFloat 3.4s ease-in-out infinite;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.bubble-word {
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.05rem; font-weight: 800; color: #10405c;
  text-shadow: 0 1px 2px rgba(255,255,255,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.bubble.long .bubble-word { font-size: 0.78rem; }
.bubble:active { filter: brightness(1.1); }
@keyframes bubblePop {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.35); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.bubble.popped { animation: bubblePop 0.4s ease-out forwards; pointer-events: none; }
@keyframes bubbleMiss {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(0.9) translateX(-5px); }
  60%  { transform: scale(0.85) translateX(5px); }
  100% { transform: scale(0.7); opacity: 0.15; }
}
.bubble.miss { animation: bubbleMiss 0.5s ease-out forwards; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sea-ray, .sea-fish, .bubble, .sound-hint.show { animation: none !important; }
  .bubble.popped { opacity: 0; }
  .bubble.miss { opacity: 0.15; }
}

.stage-sentence { /* えいぶんパズル: 線路のある草原 */
  background:
    radial-gradient(circle at 84% 16%, #fff3a8 0 18px, rgba(255,243,168,0) 30px),
    linear-gradient(#bfe4ff 0%, #dcf2ff 42%, #b8e29a 42%, #93cf74 100%);
}
.stage-judge { /* ○×ジャッジ: シンプルなクイズ台 */
  background: linear-gradient(160deg, #e8f1ff 0%, #f3e9ff 55%, #ffeef4 100%);
}

/* ============================================================
   えいぶんパズル(v2.43) 単語の車両を正しい順につないで発車させる
   ============================================================ */
.train-area {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 8px 10px;
}
.train {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  width: 100%;
  will-change: transform;
}
/* 完成したら発車！
   🚂(.loco)は編成のいちばん**左**にいるので、進む向きも**左**。
   右へ動かすと機関車がうしろ向きに引きずられる形になってしまう。
   タイミング関数は linear にして、**加速はキーフレームの間かくで作る**こと。
   以前は cubic-bezier(.5,0,.75,0) を使っていたが、制御点のyが両方0のため
   ほとんどの時間その場に止まって最後に一瞬で消え、「進まないで消える」ように見えていた */
@keyframes trainDepart {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(4%); }     /* ぐっと ためる */
  35%  { transform: translateX(-12%); }   /* ゆっくり動き出す */
  60%  { transform: translateX(-45%); }
  100% { transform: translateX(-165%); }  /* 加速して画面の外へ */
}
@keyframes locoChug {                     /* 発車中は機関車が上下にはずむ */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-4deg); }
}
.train.go { animation: trainDepart 1.6s linear forwards; }
.train.go .loco { animation: locoChug 0.28s ease-in-out infinite; }
.loco { font-size: 2rem; line-height: 1; }
.train-slots { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.car-slot {
  display: flex; align-items: center; justify-content: center;
  min-width: 52px; height: 40px;
  padding: 0 8px;
  border-radius: 8px;
  border: 2px dashed #8fa3c4;
  background: rgba(255,255,255,0.65);
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 0.95rem; font-weight: 800; color: #24406e;
  white-space: nowrap;
}
.car-slot.filled {
  border-style: solid; border-color: #4f7cff;
  background: linear-gradient(#ffffff, #e8f0ff);
  box-shadow: 0 2px 0 #b9caf0;
}
.car-slot.pop { animation: slotPop 0.22s ease-out; }
.car-slot.ok { border-color: var(--correct); background: linear-gradient(#e8fff4, #b9f5d8); color: #146c47; }
.car-slot.ng { border-color: var(--wrong); background: linear-gradient(#fff0f0, #ffd0d0); color: #b03434; animation: slotNg 0.26s ease-in-out 2; }
/* 線路 */
.rail-line {
  width: 100%; height: 8px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, #a98253 0 6px, rgba(0,0,0,0) 6px 14px),
    linear-gradient(#8d8d97, #6f6f7d);
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
/* えらぶ車両 */
.car-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.car {
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(#ffffff, #dfe9ff);
  color: #23406e;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1rem; font-weight: 800;
  box-shadow: 0 4px 0 #9fb6e4, 0 5px 8px rgba(0,0,0,0.15);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.car:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #9fb6e4; }
.car.used { opacity: 0; pointer-events: none; transform: translateY(-8px); }

/* ============================================================
   ○×ジャッジ(v2.43) 合っているか まちがっているかを2択で即答
   ============================================================ */
.judge-area {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 12px;
}
.judge-card {
  width: 100%;
  background: #fff;
  border: 3px solid #dfe6f5;
  border-radius: 18px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: 0 5px 0 #d5deef, 0 6px 12px rgba(60,80,140,0.16);
  transition: border-color 0.2s, background 0.2s;
}
.judge-card.ok { border-color: var(--correct); background: linear-gradient(#f0fff8, #d9f7e8); }
.judge-card.ng { border-color: var(--wrong); background: linear-gradient(#fff2f2, #ffdede); animation: shake 0.4s ease; }
.judge-en {
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.9rem; font-weight: 800; color: #2f6bff;
  word-break: break-all;
}
.judge-eq { font-size: 1rem; font-weight: 800; color: var(--sub); margin: 2px 0; }
.judge-ja { font-size: 1.5rem; font-weight: 800; color: #b0521f; }
.judge-streak { font-size: 0.85rem; font-weight: 800; color: #e0662f; min-height: 20px; }
.judge-streak.dim { color: var(--sub); }
.judge-btns { display: flex; gap: 14px; width: 100%; }
.judge-btn {
  flex: 1;
  padding: 16px 0;
  border-radius: 18px;
  border: none;
  font-size: 2.2rem; line-height: 1;
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.judge-btn.maru { background: linear-gradient(180deg, #a8e6c2, #4fc98a); box-shadow: 0 5px 0 #2f9e6a; }
.judge-btn.batsu { background: linear-gradient(180deg, #ffb3b3, #ff7a7a); box-shadow: 0 5px 0 #d34b4b; }
.judge-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.judge-btn.hit { filter: brightness(1.15); transform: scale(1.06); }
.judge-btn.miss { filter: grayscale(0.5); opacity: 0.6; }
.judge-btn:disabled { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .train, .train .loco, .car-slot.pop, .car-slot.ng, .judge-card.ng,
  .jet, .jet-flame, .jet.fire, .jet.fire .jet-muzzle { animation: none !important; transition: none !important; }
  /* お話の場面は**動かさなくても絵として成立する**ので、止めるだけでよい。
     ただし「動いた先」を前提にしている2枚は、止まった位置がおかしくならないよう見えかたを整える */
  .story-scene * { animation: none !important; }
  .sc2 .sc-word { opacity: 0.55; }
  .sc3 .sc-word { opacity: 1; }
  /* 動かさないが、うすくもしない。車両が緑(.car-slot.ok)になるので正解は伝わる */
  .train.go { transform: none; }
}

.stage-build { /* スペルビルダー: 木の工作机 */
  background:
    repeating-linear-gradient(93deg, rgba(255,255,255,0.10) 0 12px, rgba(120,80,40,0.06) 12px 26px),
    linear-gradient(#ffeccd 0%, #ffd9a8 55%, #f0c088 100%);
}

/* ============================================================
   スペルビルダー(v2.27) 文字ブロックを順にタップして単語を作る
   ============================================================ */
.build-area {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 8px 10px 8px;
}
.build-top {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
}
.build-say {
  background: #fff; border: 2px solid #e0b579; border-radius: 999px;
  padding: 5px 14px; font-size: 0.85rem; font-weight: 800; color: #8a5a20;
  box-shadow: 0 3px 0 #e0b579;
}
.build-say:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.build-count { font-size: 0.8rem; font-weight: 800; color: #8a5a20; }
.build-count b { font-size: 1.1rem; }

/* ヒントの吹き出し */
@keyframes buildHintPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.build-hint {
  max-width: 100%;
  min-height: 0;
  padding: 0; opacity: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #8a5a20; font-weight: 800; font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 5px rgba(120,80,40,0.2);
  transition: opacity 0.2s;
}
.build-hint.show { padding: 5px 14px; opacity: 1; }
.build-hint.pop { animation: buildHintPop 0.3s cubic-bezier(.2,1.4,.5,1); }
.build-hint b { color: #d1610a; font-family: "Segoe UI", "Verdana", sans-serif; font-size: 1.05rem; }
.build-hint b.build-model { font-size: 1.25rem; letter-spacing: 1px; }

/* ============================================================
   たんご工場(v2.34) 文字を投入口に入れると 完成品が出てくる
   ============================================================ */
.factory {
  position: relative;
  width: 100%;
  padding: 5px 7px 0;
  border-radius: 14px;
  background: linear-gradient(#b9c2d4 0%, #96a2ba 45%, #7d8aa4 100%);
  border: 2px solid #6b7690;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 4px 8px rgba(0,0,0,0.25);
}
/* 機械の上部: 投入口・ランプ・歯車 */
.fac-head {
  display: flex; align-items: center; gap: 8px;
  height: 20px; margin-bottom: 4px;
}
/* 投入口(ここに文字が吸いこまれる) */
.fac-chute {
  position: relative;
  width: 46px; height: 15px;
  border-radius: 4px;
  background: linear-gradient(#59637c, #39415a);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.chute-hole {
  position: absolute; left: 5px; right: 5px; top: 4px; height: 7px;
  border-radius: 3px;
  background: #1c2233;
}
@keyframes chuteIn {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(0.55); }
  100% { transform: scaleY(1); }
}
.fac-chute.in .chute-hole { animation: chuteIn 0.22s ease-out; }
/* 進みぐあいのランプ */
.fac-lamps { display: flex; gap: 4px; flex: 1; }
.fac-lamps .lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5e6880;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  transition: background 0.2s, box-shadow 0.2s;
}
.fac-lamps .lamp.on {
  background: radial-gradient(circle at 35% 30%, #fff2a8, #ffbe22);
  box-shadow: 0 0 7px rgba(255,200,60,0.95);
}
@keyframes lampFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fac-lamps .lamp.flash { animation: lampFlash 0.3s ease-in-out 4; }
/* 歯車 */
.fac-gear {
  font-size: 1.1rem; line-height: 1;
  transition: transform 0.25s cubic-bezier(.3,1.3,.5,1);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
/* 完成品が出てくるショーケース(スペル欄の「上」に置く) */
.fac-display {
  position: relative;
  height: 38px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: #37405c;
  border: 2px solid #262d44;
  overflow: visible;
}
/* できあがる前の「？」 */
.fac-slotmark {
  font-size: 1.3rem; font-weight: 800;
  color: rgba(255,255,255,0.3);
  letter-spacing: 2px;
  transition: opacity 0.2s;
}
.fac-display.filled .fac-slotmark { opacity: 0; }
/* できた瞬間、ケースの中が明るくなる */
.fac-display.filled {
  background: #ffd35e;
  border-color: #d79a17;
}
/* 動いているときの機械のふるえ */
@keyframes facTick {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(2px); }
}
.factory.tick { animation: facTick 0.16s ease-out; }
@keyframes facWork {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  45% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
}
.factory.working { animation: facWork 0.28s ease-in-out 3; }
/* 完成品(その単語の絵文字)がショーケースにあらわれる */
@keyframes facProduct {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-25deg); opacity: 0; }
  50%  { transform: translate(-50%, -50%) scale(1.35) rotate(8deg); opacity: 1; }
  75%  { transform: translate(-50%, -50%) scale(1.05) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.15) rotate(0deg); opacity: 1; }
}
.fac-product {
  position: absolute; left: 50%; top: 50%;
  font-size: 2.3rem; line-height: 1;
  z-index: 4; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
  animation: facProduct 0.75s cubic-bezier(.2,1.5,.5,1) forwards;
}
/* 投入口へ飛んでいく文字 */
.fly-letter {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.3rem; font-weight: 800;
  color: #5c3d12;
  background: linear-gradient(#fff3d6, #f3c88a);
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  z-index: 5; pointer-events: none;
  transition: transform 0.2s cubic-bezier(.4,0,.7,1), opacity 0.2s ease-in;
}

/* 解答らん(機械の窓)。ぼかしを使わず、フラットな一色＋くっきりした縁にする */
.build-slots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  padding: 7px 8px;
  background: #eef1f7;
  border: 2px solid #8f9ab4;
  border-radius: 10px;
  min-height: 54px;
  width: 100%;
}
.bslot {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 40px;
  border-radius: 8px;
  border: 2px dashed #d3a877;
  background: rgba(255,255,255,0.5);
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.35rem; font-weight: 800; color: #6b4a1e;
}
.build-slots.small .bslot { width: 28px; height: 34px; font-size: 1.1rem; }
.build-slots.tiny .bslot  { width: 23px; height: 29px; font-size: 0.95rem; border-radius: 6px; }
.bslot.filled, .bslot.fixed {
  border-style: solid; border-color: #b98a4f;
  background: linear-gradient(#fffaf0, #ffe6bd);
  box-shadow: 0 2px 0 #c99a5e;
}
.bslot.fixed { opacity: 0.75; }
@keyframes slotPop {
  0%   { transform: scale(0.6) translateY(-8px); }
  60%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.bslot.pop { animation: slotPop 0.22s ease-out; }
.bslot.ok {
  border-color: var(--correct);
  background: linear-gradient(#e3f9ef, #b6f0d3);
  box-shadow: 0 2px 0 #35c281;
}
@keyframes slotNg {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.bslot.ng {
  border-color: var(--wrong);
  background: linear-gradient(#ffecec, #ffd0d0);
  animation: slotNg 0.26s ease-in-out 2;
}

/* 文字ブロック */
.build-letters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
  width: 100%;
}
.bletter {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(#fff3d6, #f3c88a);
  color: #5c3d12;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.3rem; font-weight: 800;
  box-shadow: 0 4px 0 #c9994f, 0 5px 8px rgba(0,0,0,0.18);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* 長い単語でも文字ブロックが1段に収まるサイズ(8個＋すきま が横幅にちょうど入る) */
.build-letters.small { gap: 5px; }
.build-letters.small .bletter { width: 35px; height: 38px; font-size: 1.1rem; }
.build-letters.tiny { gap: 5px; }
.build-letters.tiny .bletter  { width: 34px; height: 36px; font-size: 1.05rem; }
.bletter:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #c9994f; }
.bletter.used { opacity: 0; pointer-events: none; transform: translateY(-10px); }

.build-undo {
  margin-top: auto;
  background: rgba(255,255,255,0.85);
  border: 2px solid #d3a877; border-radius: 999px;
  padding: 6px 18px; font-size: 0.85rem; font-weight: 800; color: #8a5a20;
  box-shadow: 0 3px 0 #d3a877;
}
.build-undo:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.build-undo:disabled { opacity: 0.4; box-shadow: none; }

@keyframes buildBurst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
.build-burst {
  position: absolute; left: 50%; top: 42%;
  font-size: 3rem; pointer-events: none;
  animation: buildBurst 0.7s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .bslot.pop, .bslot.ng, .build-burst, .build-hint.pop,
  .factory.tick, .factory.working, .fac-chute.in .chute-hole,
  .fac-lamps .lamp.flash { animation: none !important; }
  /* 完成品は動かさずに、その場に出す */
  .fac-product { animation: none !important; transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  .fly-letter { transition: none !important; opacity: 0; }
}

/* たんごリバーシ */
.rev-score {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; margin-bottom: 6px; padding: 0 6px;
}
.rev-side.p1 { color: #2f6bff; }
.rev-side.p2 { color: #ff5e3d; }
.rev-vs { font-size: 0.8rem; color: var(--sub); font-weight: 700; }
.rev-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: 240px; margin: 0 auto 10px; padding: 8px;
  background: linear-gradient(135deg, #2f9e63, #1f6b42);
  border-radius: 16px;
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255,255,255,0.18);
}
.rev-cell {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  border: none; padding: 0;
}
.rev-cell.legal {
  background: rgba(255,255,255,0.32);
  animation: revLegalPulse 1.1s ease-in-out infinite;
  cursor: pointer;
}
@keyframes revLegalPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,241,150,0.6); }
  50%      { box-shadow: inset 0 0 0 4px rgba(255,241,150,1); }
}
.rev-stone {
  width: 78%; height: 78%; border-radius: 50%; display: block;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.3);
}
.rev-stone.p1 { background: radial-gradient(circle at 35% 30%, #8fb4ff, #2f6bff); }
/* p2は暖色(赤)のため同じサイズでも大きく見える膨張色効果があるので、
   彩度とコントラストをp1に近づけて視覚的な大きさを揃える */
.rev-stone.p2 { background: radial-gradient(circle at 35% 30%, #e59a86, #d4503a); }
@keyframes revFlip {
  0%   { transform: rotateY(0deg) scale(0.6); }
  60%  { transform: rotateY(180deg) scale(1.18); }
  100% { transform: rotateY(360deg) scale(1); }
}
.rev-stone.flip { animation: revFlip 0.5s ease; }
.rev-hint {
  text-align: center; font-weight: 800; color: var(--primary);
  background: #eef2ff; border-radius: 99px; padding: 9px 18px;
  width: fit-content; max-width: 100%; margin: 0 auto;
}
/* iPhone等の小さい画面でも4つの選択肢がスクロールなしで見えるよう、
   盤面やクイズパネルをコンパクトにしている */
.rev-quiz { padding: 10px 14px; }
.rev-quiz-q { text-align: center; font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.rev-quiz-q b { color: var(--primary); font-size: 1.3em; font-family: inherit; }
.rev-quiz .choices { gap: 7px; }
.rev-quiz .choice-btn { padding: 11px 12px; font-size: 0.95rem; }
.rev-result-score { font-size: 1.3rem; font-weight: 800; margin: 8px 0; }

/* ============================================================
   スピードマッチ(v2.35 見た目を強化)
   カードテーブルの上に、英語カード(青)と日本語カード(橙)を並べる
   ============================================================ */
.match-board {
  position: relative;
  border-radius: 20px;
  padding: 10px 10px 12px;
  margin-bottom: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #dff0ff 0%, #e9e6ff 50%, #ffe7f2 100%);
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255,255,255,0.6);
}
/* そろったペアの数(まるで見えるゲージ) */
.match-progress {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 9px; padding: 0 2px;
}
.mp-pip {
  flex: 1; height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 2px rgba(60,80,140,0.2);
  transition: background 0.3s, box-shadow 0.3s;
}
.mp-pip.on {
  background: linear-gradient(90deg, #7ee0b0, #35c281);
  box-shadow: 0 0 7px rgba(53,194,129,0.7);
}
.mp-count { font-size: 0.72rem; font-weight: 800; color: #5a6580; white-space: nowrap; }

/* 左右の列を同じ行グリッドに載せて、英語カードと日本語カードの高さを必ず揃える */
.match-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;      /* どの行も同じ高さ */
  gap: 8px 9px;
}
.match-card {
  position: relative;
  padding: 14px 8px 14px 10px;
  min-height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  background: linear-gradient(#ffffff, #f7faff);
  border: 2px solid #dfe6f5;
  box-shadow: 0 4px 0 #d5deef, 0 5px 9px rgba(60,80,140,0.16);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.3s, background 0.15s;
  overflow: hidden;
}
.mc-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 左はしの色おび＋種類の目じるし(A / あ) */
.mc-tag {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; color: #fff;
  writing-mode: horizontal-tb;
}
.match-card.en { font-family: "Segoe UI", "Verdana", sans-serif; color: #2f6bff; padding-left: 22px; }
.match-card.ja { color: #b0521f; padding-left: 22px; }
.match-card.en .mc-tag { background: linear-gradient(#7ea8ff, #4f7cff); }
.match-card.ja .mc-tag { background: linear-gradient(#ffb877, #f08a3c); }
.match-card:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #d5deef; }
/* 選択中のカードは大きく光る */
@keyframes matchPicked {
  0%, 100% { box-shadow: 0 0 0 3px rgba(79,124,255,0.5), 0 4px 0 #3a5fd0; }
  50%      { box-shadow: 0 0 0 7px rgba(79,124,255,0.22), 0 4px 0 #3a5fd0; }
}
.match-card.picked {
  background: linear-gradient(180deg, #6a97ff, #4f7cff);
  color: #fff; border-color: #4f7cff;
  animation: matchPicked 1s ease-in-out infinite;
  transform: translateY(-2px);
}
.match-card.picked .mc-tag { background: rgba(255,255,255,0.3); }
/* 当たった瞬間ポンッと光る */
@keyframes matchHit {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.match-card.hit {
  animation: matchHit 0.35s ease;
  border-color: var(--correct);
  background: linear-gradient(#e8fff4, #b9f5d8);
  color: #1d8a5c;
  box-shadow: 0 0 0 3px rgba(53,194,129,0.35), 0 4px 0 #7fd8ae;
}
.match-card.miss {
  border-color: var(--wrong);
  background: linear-gradient(#fff0f0, var(--wrong-bg));
  color: #d13c3c;
  animation: shake 0.4s ease;
}
/* そろったカードは「済み」の見た目にして、残りが目立つようにする */
.match-card.done {
  opacity: 0.45;
  background: linear-gradient(#eef3ee, #e2ebe4);
  border-color: #cfdcd2;
  box-shadow: none;
  color: #7d8c83;
  cursor: default;
}
.match-card.done .mc-tag { background: #b6c4bb; }
.match-card.done .mc-text { text-decoration: line-through; }
/* コンボ表示はマッチ用に大きめ */
.combo-chip.match-combo { font-size: 1.05rem; padding: 7px 20px; }

/* 残り時間バー */
.time-track {
  height: 6px;
  background: #edf0f7;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
}
.time-fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff6b6b, #ffc93c, #35c281);
  transition-property: width;
  transition-timing-function: linear;
}

/* ============================================================
   もぐらたたき(v2.26 グラフィック刷新)
   絵はすべてCSSで描いている(画像ファイルなし)
   構造: .mole-hole > .hole-pit(穴) / .mole(もぐら+プラカード) / .hole-rim(手前の土)
   ============================================================ */
.mole-field {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px; padding: 12px 10px;
}
.mole-hole {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
}
/* せまい画面では、右はしの穴でふりかぶり(12時)のハンマーが
   ステージ(overflow:hidden)からはみ出して切れる。左右の余白を足して逃がす。
   ※ ハンマーの位置は「穴の中央＋46px」なので、**穴が細くなっても命中位置はずれない**
   実測の右切れ(余白を足す前 → 足したあと):
     320px 11px → -1px ・ 375px 2px → -6px ・ 400px超は もともと切れない */
@media (max-width: 420px) {
  .mole-field { padding: 12px 16px; }
}
@media (max-width: 359px) {
  .mole-field { padding: 12px 28px; }
}
/* 穴のあな(奥の暗いところ) */
.hole-pit {
  position: absolute; bottom: 4px; left: 50%;
  width: 84%; height: 30px;
  margin-left: -42%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #2b1b12 0 55%, #4a2f1f 100%);
  box-shadow: 0 3px 0 rgba(255,255,255,0.25);
  z-index: 1;
}
/* 手前の土のふち(ここにもぐらが隠れる) */
.hole-rim {
  position: absolute; bottom: 0; left: 50%;
  width: 94%; height: 24px;
  margin-left: -47%;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(#c08b5c 0%, #a06f45 55%, #8a5c37 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.25);
  z-index: 4;
  pointer-events: none;
}
/* 出てきた瞬間の土ぼこり */
@keyframes dustRing {
  0%   { transform: translateX(-50%) scale(0.4); opacity: 0.85; }
  100% { transform: translateX(-50%) scale(1.5); opacity: 0; }
}
.hole-dust {
  position: absolute; bottom: 2px; left: 50%;
  width: 84%; height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.75);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.mole-hole.dust .hole-dust { animation: dustRing 0.45s ease-out forwards; }

/* --- もぐら本体 --- */
.mole {
  position: relative; z-index: 3;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 0 0 6px;
  transform: translateY(120%);
  /* 引っこんでいる間は透明にする(下の段の穴に かぶって見えないように) */
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.16s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mole.up { transform: translateY(0); opacity: 1; }

/* 単語のプラカード(もぐらが持っている看板) */
.mole-sign {
  position: relative;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 8px;
  background: linear-gradient(#fffdf4, #ffeec9);
  border: 2px solid #d9a86a;
  box-shadow: 0 2px 3px rgba(0,0,0,0.22);
  z-index: 2;
}
.mole-sign::after { /* 看板の棒 */
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 5px; height: 9px; margin-left: -2.5px;
  background: #b9814c; border-radius: 2px;
}
.sign-text {
  display: block;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 0.85rem; font-weight: 800; color: #4a3418;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mole.long .sign-text { font-size: 0.72rem; }   /* 10.6px だと小さすぎた(v2.77.1) */

/* からだ */
.mole-body {
  position: relative;
  width: 58px; height: 54px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 28%, #a5765a 0 30%, #7d523a 62%, #5d3b28 100%);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,0.28), inset 0 4px 6px rgba(255,255,255,0.22), 0 3px 5px rgba(0,0,0,0.3);
}
@keyframes moleWiggle {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-2px); }
}
.mole.up .mole-body { animation: moleWiggle 1.5s ease-in-out infinite; }
/* 耳 */
.mole-ear {
  position: absolute; top: -3px;
  width: 15px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8c5f45, #5d3b28);
}
.mole-ear.l { left: 1px; }
.mole-ear.r { right: 1px; }
/* 目(白いハイライト入り) */
.mole-eye {
  position: absolute; top: 17px;
  width: 10px; height: 12px;
  border-radius: 50%;
  background: #2b1d16;
  box-shadow: inset 2px -2px 0 rgba(255,255,255,0.15);
}
.mole-eye::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #fff;
}
.mole-eye.l { left: 12px; }
.mole-eye.r { right: 12px; }
/* 鼻 */
.mole-nose {
  position: absolute; top: 29px; left: 50%;
  width: 15px; height: 11px; margin-left: -7.5px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(#ffb3c6, #ff8fab);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2);
}
.mole-nose::after { /* 口 */
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 12px; height: 6px; margin-left: -6px;
  border-bottom: 2px solid rgba(43,29,22,0.6);
  border-radius: 0 0 50% 50%;
}
/* ほっぺ */
.mole-cheek {
  position: absolute; top: 30px;
  width: 9px; height: 6px; border-radius: 50%;
  background: rgba(255,140,170,0.5);
}
.mole-cheek.l { left: 6px; }
.mole-cheek.r { right: 6px; }
/* おなか */
.mole-belly {
  position: absolute; bottom: 0; left: 50%;
  width: 30px; height: 18px; margin-left: -15px;
  border-radius: 50% 50% 40% 40%;
  background: rgba(232,196,150,0.75);
}

/* --- たたいたとき --- */
@keyframes moleSquash {
  0%   { transform: scaleY(1) scaleX(1) translateY(0); }
  35%  { transform: scaleY(0.5) scaleX(1.35) translateY(14px); }
  100% { transform: scaleY(0.62) scaleX(1.25) translateY(12px); }
}
.mole.whacked .mole-body { animation: moleSquash 0.3s ease-out forwards; }
.mole.whacked .mole-eye { height: 3px; border-radius: 2px; top: 21px; background: #2b1d16; }
.mole.whacked .mole-eye::after { display: none; }
.mole.whacked .mole-sign {
  background: linear-gradient(#d7ffe9, #a9f0c9);
  border-color: var(--correct);
}
@keyframes moleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-4deg); }
  75% { transform: translateX(6px) rotate(4deg); }
}
.mole.wrong .mole-body { animation: moleShake 0.32s ease-in-out 2; }
.mole.wrong .mole-sign { background: linear-gradient(#ffe3e3, #ffc9c9); border-color: var(--wrong); }

/* ハンマー・ヒット演出
   絵文字の 🔨 はフォントによって「頭」と「柄」がどこにあるか違うので、
   transform-origin をどこに置いても**柄のほうが飛んでいく**ように見えてしまう(ユーザー指摘)。
   そこでCSSで描き、**持ち手(柄のいちばん上)を回転の中心**にして、
   その先についたヘッドが弧をえがいて下へ振り下ろされるようにしてある。
   → 中心は必ず .mole-hammer の transform-origin(= 持ち手)。ヘッドは下端に置くこと */
/* 振りの向き: 時計でいう **12時 → 9時 の反時計回り**(戻りの動きは入れない。v2.61.1)。
   ヘッドは上から左へ弧をえがいて落ち、もぐらの**頭の上**に当たる。
   (以前は 3時 → 6時 の時計回りで、横からぶつかって もぐらの横顔を叩いていた・ユーザー指摘)
   ・ハンマーは真下向き(6時)で描いてあるので rotate(180deg)=12時 / rotate(90deg)=9時
   ・**数字が減る向き = 反時計回り**。180 → 90 と減らすこと */
/* v2.61.1: **角度は最初から最後まで減りつづける**(= ずっと反時計回り)。
   前は命中のあと 94deg → 152deg と**増やして**いた ＝ 9時から11時へ時計回りに振りもどす動きで、
   消えかけとはいえ0.1秒はっきり見えており、全体では「振って戻る」往復運動になっていた(ユーザー指摘)。
   **ここに増える方向の数字を書かないこと。** はねかえりを足したくなっても、それは時計回りになる。
   当たった手ごたえは 💥バースト・かけ声・星のはじけ(JS側)が受けもっている。
   角度の差を 24 → 30 → 36 と広げてあるので、振り下ろしながら加速して命中する。
   **12時より右へふりかぶらせないこと。** .game-stage は overflow:hidden なので、
   右はしの穴では 12時より右に傾けたぶんだけハンマーが切れる
   (実測375px: 186deg で8px切れ / 180deg なら2px。旧版の188degは約9px切れていた) */
@keyframes hammerSwing {
  0%   { transform: rotate(180deg); opacity: 0; }  /* 12時。ここから始める */
  12%  { transform: rotate(180deg); opacity: 1; }  /* 12時のまま すっと現れる */
  30%  { transform: rotate(156deg); opacity: 1; }  /* 11時 */
  44%  { transform: rotate(126deg); opacity: 1; }  /* 10時 */
  58%  { transform: rotate(90deg);  opacity: 1; }  /* 9時 = もぐらの頭に命中 */
  72%  { transform: rotate(87deg);  opacity: 1; }  /* 振りぬく(止めずに、そのまま先へ) */
  100% { transform: rotate(84deg);  opacity: 0; }  /* 9時のまま消える。**戻さない** */
}
/* 手(回転の中心)は もぐらの**頭の高さで、右どなり**に置く。
   こうすると 9時(真横)まで振り下ろしたときに、ヘッドがちょうど もぐらの頭の上に来る。
   ・くわしい数字は下の .mole-hammer のコメントを見ること(46px)
   ・実測(v2.61.1で再確認): もぐらの頭(からだの上)は y=79・耳は y=76・
     命中時のヘッドは y=64〜100(中心82)・中心x=61 でもぐらの中心とぴったり合う */
.mole-hammer {
  position: absolute;
  /* 持ち手からヘッド中心までは 46px。中心を「穴の中央＋46px」に置くと、
     9時まで振り下ろしたときヘッドが**穴の中央=もぐらの真上**にそろう。
     46 より長くすると、右はしの穴でハンマーがステージからはみ出して切れる */
  left: calc(50% + 46px); top: 78px;
  width: 36px; height: 62px;
  margin-left: -18px;
  transform-origin: 50% 4px; /* = 持ち手のいちばん上(手でにぎるところ) */
  z-index: 6; pointer-events: none;
  /* ease-out だと出はじめが速すぎて振り下ろしが目で追えないので、
     加速はキーフレームの角度差でつけ、時間は linear にする(v2.49.1の電車と同じ考え) */
  animation: hammerSwing 0.48s linear forwards;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.35));
}
/* 柄: 中心(手)から下へのびる */
.hm-handle {
  position: absolute; left: 50%; top: 2px;
  width: 7px; height: 42px; margin-left: -3.5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #7d4f28 0%, #d9a86f 42%, #b07c42 70%, #6f4522 100%);
}
/* ヘッド: 柄の先(下端)につく金属のかたまり。ここがモグラの頭に当たる */
.hm-head {
  position: absolute; left: 50%; top: 40px;
  width: 36px; height: 20px; margin-left: -18px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f4f7fc 0%, #c6cede 38%, #98a2b6 72%, #737e93 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -3px 0 rgba(0,0,0,0.2);
}
@keyframes moleBurst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
.mole-burst {
  position: absolute; left: 50%; top: 52%;
  font-size: 2.4rem; z-index: 5; pointer-events: none;
  animation: moleBurst 0.5s ease-out forwards;
}
@keyframes moleHitText {
  0%   { transform: translate(-50%, 0) scale(0.5) rotate(-8deg); opacity: 0; }
  30%  { transform: translate(-50%, -14px) scale(1.15) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -34px) scale(1) rotate(-8deg); opacity: 0; }
}
.mole-hit-text {
  position: absolute; left: 50%; top: 26%;
  font-size: 0.9rem; font-weight: 800; white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 0 #e0662f, 0 0 8px rgba(255,180,60,0.9);
  z-index: 6; pointer-events: none;
  animation: moleHitText 0.75s ease-out forwards;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce) {
  .mole.up .mole-body, .stage-mole::before, .stage-mole::after,
  .mole-hammer, .mole-burst, .mole-hit-text, .mole-hole.dust .hole-dust,
  .mole.wrong .mole-body {
    animation: none !important;
  }
  .mole-hammer, .mole-burst, .mole-hit-text { opacity: 1; }
  /* ⚠️ ハンマーは **回転をアニメーションだけで作っている** ので、animation を切ると
     回転がまるごと消えて **真下向き(6時)・もぐらの46px右・頭より39px下** に立つ。
     もぐらに当たっていない棒が0.8秒じっと出るだけになり、
     「iPhoneとPCで動きがちがう」の正体がこれだった(v2.61.2・ユーザー指摘)。
     動きは止めてよいが、**姿勢は命中のかたち(9時)で止めること**。
     → ここを消したり、.mole-hammer の transform を触るときは必ずセットで見直す */
  .mole-hammer { transform: rotate(90deg); }
}

/* ジャンプでよけろ */
/* ============================================================
   ジャンプキャッチ(v2.31 見た目を強化)
   遠くの丘 → 地面(草＋土) → ブロック → ペンギン(影つき) の重ねかた
   ============================================================ */
.run-stage { position: absolute; inset: 0; }
/* 遠くの丘(奥行きを出す)。ゆっくり左へ流れる＝遠いものほど遅い(パララックス) */
@keyframes hillScroll { to { background-position: -170px bottom; } }
.run-hills {
  position: absolute; left: 0; right: 0; bottom: 40px; height: 92px;
  background-image: radial-gradient(58% 104% at 50% 100%, #9fd98a 0 99%, rgba(0,0,0,0) 100%);
  background-size: 170px 92px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  opacity: 0.85;
  animation: hillScroll 3.4s linear infinite;
  pointer-events: none;
}
/* 地面(土のつぶつぶ＋草のふち)。カードと同じ速さで左へ流れる＝走っている感じが出る */
@keyframes groundScroll { to { background-position: -60px 0, -90px 0, 0 0; } }
.run-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.22) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 62% 66%, rgba(0,0,0,0.10) 0 2px, rgba(0,0,0,0) 3px),
    linear-gradient(#c69c6d 0%, #ab7f52 55%, #966c42 100%);
  background-size: 60px 40px, 90px 40px, auto;
  background-repeat: repeat-x, repeat-x, no-repeat;
  animation: groundScroll 0.48s linear infinite;
}
@keyframes grassScroll { to { background-position: -18px 0; } }
.run-ground .grass {
  position: absolute; left: 0; right: 0; top: -7px; height: 12px;
  background-image: repeating-linear-gradient(90deg, #74c257 0 9px, #62b148 9px 18px);
  background-size: 18px 12px;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.28);
  animation: grassScroll 0.144s linear infinite;
}
/* スピード線(空を横切って、速さを目で感じさせる) */
@keyframes speedLine {
  0%   { transform: translateX(0) scaleX(0.4); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translateX(-420px) scaleX(1.3); opacity: 0; }
}
.speed-line {
  position: absolute; right: -60px;
  width: 56px; height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
  animation: speedLine 1.1s linear infinite;
  pointer-events: none;
}
.speed-line.l1 { top: 26%; animation-duration: 1.0s; }
.speed-line.l2 { top: 45%; width: 40px; animation-duration: 1.35s; animation-delay: -0.5s; }
.speed-line.l3 { top: 62%; width: 68px; animation-duration: 0.85s; animation-delay: -0.25s; }

/* --- ペンギン(その場で待ちかまえて、タップでジャンプ) --- */
.runner {
  position: absolute; bottom: 40px;
  width: 54px; margin-left: -27px;
  z-index: 2;
}
.runner-shadow {
  position: absolute; left: 50%; bottom: -4px;
  width: 34px; height: 10px; margin-left: -17px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  filter: blur(1px);
  transition: transform 0.16s ease, opacity 0.16s ease;
}
/* その場で待っているときの、ゆっくりした ひざの屈伸 */
@keyframes idleBob {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-3px) scaleY(1.03); }
}
.runner-body {
  display: block; text-align: center;
  font-size: 2.6rem; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
  transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.runner.idle .runner-body { animation: idleBob 1.1s ease-in-out infinite; }
.runner.jumping .runner-body {
  animation: none !important;
  transform: translateY(-104px) rotate(-14deg) scale(1.05);
}
.runner.jumping .runner-shadow { transform: scale(0.45); opacity: 0.3; }
/* 着地の砂ぼこり */
@keyframes landPuff {
  0%   { transform: translateX(-50%) scale(0.3); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(1.8); opacity: 0; }
}
.runner.land::after {
  content: "";
  position: absolute; left: 50%; bottom: -6px;
  width: 40px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  animation: landPuff 0.38s ease-out forwards;
  pointer-events: none;
}
/* --- 流れてくる単語カード ---
   文字を読ませたいので「横に等速でながれる」だけにして、上下のゆれは付けない。
   位置は JS が transform: translate3d() で指定する(なめらか＆文字がにじまない) */
.wcard {
  position: absolute; bottom: 118px; left: 0;
  min-width: 84px; max-width: 46%;
  padding: 10px 14px;
  background: linear-gradient(#ffffff 0%, #f1f6ff 100%);
  border: 3px solid #6aa4ff;
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(30,60,120,0.25), inset 0 -3px 0 rgba(40,80,160,0.08);
  text-align: center;
  will-change: transform;
  backface-visibility: hidden;   /* 動いている間も文字をくっきり保つ */
}
/* カードの上のリング(ひもで下がっている感じ) */
.wcard::before {
  content: "";
  position: absolute; left: 50%; top: -9px;
  width: 12px; height: 12px; margin-left: -6px;
  border: 3px solid #6aa4ff;
  border-radius: 50%;
  background: #eaf2ff;
}
.wcard-face {
  display: block;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1.25rem; font-weight: 800;
  color: #23406e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.5px;
}
.wcard.long .wcard-face { font-size: 0.95rem; }
/* 新しいお題の単語に入れかわったカードは、一瞬ふくらんで知らせる */
@keyframes wcardSwap {
  0%   { box-shadow: 0 6px 12px rgba(30,60,120,0.25); }
  35%  { box-shadow: 0 0 0 4px rgba(120,190,255,0.9), 0 6px 12px rgba(30,60,120,0.25); }
  100% { box-shadow: 0 6px 12px rgba(30,60,120,0.25); }
}
.wcard.swap { animation: wcardSwap 0.4s ease-out; }
/* キャッチ成功: 緑に光ってはじける */
@keyframes wcardGrab {
  0%   { opacity: 1; }
  30%  { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 0; filter: brightness(1.5); }
}
.wcard.grab {
  background: linear-gradient(#ffffff, #c9ffe4);
  border-color: #2f9e6a;
  animation: wcardGrab 0.45s ease-out forwards;
}
.wcard.grab .wcard-face { color: #146c47; }
/* ハズレ: 赤くなって回転しながら落ちる */
@keyframes wcardFall {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.wcard.hit { background: linear-gradient(#fff0f0, #ffc9c9); border-color: #e06060; }
.wcard.hit .wcard-face { color: #b03434; }
.wcard.broken {
  animation: wcardFall 0.7s ease-in forwards;
  transition: margin-top 0.7s ease-in, rotate 0.7s ease-in;
  margin-top: 170px;
  rotate: 38deg;
}
/* キャッチしたときに はじける星 */
@media (prefers-reduced-motion: reduce) {
  .runner-body, .runner.land::after, .wcard.swap,
  .run-hills, .run-ground, .run-ground .grass,
  .stage-jump::before, .stage-jump::after { animation: none !important; }
  .wcard.broken { animation: none !important; opacity: 0.12; margin-top: 0; rotate: 0deg; }
  .speed-line { display: none; }
}

/* ============================================================
   正解したときに星がはじけ飛ぶ演出(全ゲーム共通)
   中心から円をえがくように飛び散る。大きさ・角度・回転はバラバラ
   ============================================================ */
@keyframes starBurst {
  0%   { transform: translate(-50%, -50%) scale(0.25) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--sz)) rotate(var(--rot));
    opacity: 0;
  }
}
.star-p {
  position: absolute;
  font-size: 1.25rem; line-height: 1;
  z-index: 6; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  animation: starBurst 0.85s cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
}
/* 動きをおさえる設定のときは、止まった星が置かれるだけになって
   かえって分かりにくいので、いっさい出さない(JS側でも作らない) */
@media (prefers-reduced-motion: reduce) {
  .star-p { display: none !important; }
}

/* シューティングの弾 */
.bullet {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffc93c);
  box-shadow: 0 0 12px #ffc93c, 0 0 4px #fff;
  transform: translate(-50%, -50%);
  transition: left 0.16s linear, top 0.16s linear;
  pointer-events: none;
  z-index: 3;
}

/* シューティング */
.shoot-field { position: absolute; inset: 0; }
.ufo {
  position: absolute;
  padding: 11px 15px;
  background: radial-gradient(circle at 50% 30%, #9a7cff, #4f7cff);
  color: #fff; font-weight: 800; font-size: 0.95rem;
  border-radius: 50% / 60%;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(79, 124, 255, 0.5);
  transition: transform 0.2s, opacity 0.3s;
}
.ufo.boom { background: #ffb84d; transform: scale(1.5); opacity: 0; }
.ufo.miss { background: var(--wrong); }
.ufo.gone { transform: translateY(-120px) scale(0.5) rotate(20deg); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease; pointer-events: none; }
/* ---------- 自機: 戦闘機(CSSだけで描く。絵文字🛰️をやめた) ---------- */
.jet {
  position: absolute; left: 50%; bottom: 6px;
  width: 56px; height: 48px;
  transform: translateX(-50%);
  animation: jetHover 2.4s ease-in-out infinite;
  pointer-events: none; /* 下まで降りてきたUFOのタップを機体がさえぎらないように */
}
@keyframes jetHover {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
/* 機体のシルエット(機首・前翼・主翼・尾翼)をひと筆で切り出す */
.jet-hull {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #5d739a 0%, #cddcf6 26%, #ffffff 46%, #bccdea 62%, #63799e 100%);
  clip-path: polygon(
    50% 0%, 59% 14%, 59% 34%,
    100% 60%, 100% 72%, 59% 62%,
    59% 80%, 74% 95%, 74% 100%,
    26% 100%, 26% 95%, 41% 80%,
    41% 62%, 0% 72%, 0% 60%,
    41% 34%, 41% 14%
  );
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
}
/* コックピット(青いガラス) */
.jet-canopy {
  position: absolute; left: 50%; top: 13px;
  width: 11px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #cdf0ff 0%, #4f9ae8 55%, #2b5fae 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
/* エンジンの炎 */
@keyframes jetFlame {
  from { transform: scaleY(0.7); opacity: 0.75; }
  to   { transform: scaleY(1.25); opacity: 1; }
}
.jet-flame {
  position: absolute; bottom: -7px;
  width: 7px; height: 13px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(180deg, #fffbcc 0%, #ffcb45 35%, #ff7a2f 70%, rgba(255,110,40,0) 100%);
  transform-origin: top center;
  animation: jetFlame 0.16s ease-in-out infinite alternate;
}
.jet-flame.l { left: calc(50% - 9px); }
.jet-flame.r { left: calc(50% + 2px); }
/* 発射のときだけ機首が光る */
.jet-muzzle {
  position: absolute; left: 50%; top: -6px;
  width: 16px; height: 16px;
  transform: translateX(-50%) scale(0.2);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffe27a 45%, rgba(255,200,60,0) 72%);
  opacity: 0;
}
@keyframes jetFire {
  0%   { transform: translateX(-50%) translateY(0); }
  25%  { transform: translateX(-50%) translateY(5px); }  /* 反動でしずむ */
  100% { transform: translateX(-50%) translateY(0); }
}
@keyframes jetMuzzle {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.2); }
  30%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.6); }
}
.jet.fire { animation: jetFire 0.22s ease-out; }
.jet.fire .jet-muzzle { animation: jetMuzzle 0.22s ease-out; }

/* ============================================================
   たんごキャッチャー(v2.35 見た目を強化)
   ゲームセンターの筐体・ガラス・レール・3本づめアーム・ガチャカプセル
   ============================================================ */
.crane-stage { position: absolute; inset: 0; }
/* 上のマーキー(電飾つき看板) */
@keyframes mqBulb {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255,220,120,0.95); background: #ffe98a; }
  50%      { box-shadow: 0 0 3px 1px rgba(255,220,120,0.5);  background: #ffb84d; }
}
.crane-marquee {
  position: absolute; top: 4px; left: 8px; right: 8px; height: 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px;
  background: linear-gradient(#ff8fb8, #e5578f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.2);
  z-index: 4;
}
.mq-text {
  font-size: 0.72rem; font-weight: 800; color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.mq-bulb {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffe98a;
  animation: mqBulb 1.1s ease-in-out infinite;
}
.mq-bulb:last-child { animation-delay: 0.55s; }
/* ガラスケース */
.crane-glass {
  position: absolute; top: 28px; left: 8px; right: 8px; bottom: 8px;
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(190,220,255,0.12) 45%, rgba(255,255,255,0.05) 100%);
  box-shadow: inset 0 0 26px rgba(120,140,255,0.25), inset 0 2px 0 rgba(255,255,255,0.7);
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
/* ガラスの反射 */
.glass-shine {
  position: absolute; top: -30%; left: -20%;
  width: 46px; height: 180%;
  background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  transform: rotate(18deg);
  filter: blur(2px);
}
.glass-shine::after {
  content: ""; position: absolute; left: 62px; top: 0;
  width: 16px; height: 100%;
  background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0));
}
/* レール */
.crane-rail {
  position: absolute; top: 36px; left: 12%; right: 12%;
  height: 7px; border-radius: 4px;
  background: linear-gradient(#e4e9f5, #97a3bf 60%, #6f7b96);
  box-shadow: 0 2px 3px rgba(0,0,0,0.25);
  z-index: 3;
}
.rail-bolt {
  position: absolute; top: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8e9ab6 70%, #5e6a86);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.rail-bolt.l { left: -13px; }
.rail-bolt.r { right: -13px; }
.claw-unit {
  position: absolute; top: 36px;
  width: 44px;
  transform: translateX(-50%);
  z-index: 3;
}
/* レールを走る台車 */
.trolley {
  position: absolute; top: -7px; left: 50%;
  width: 26px; height: 12px; margin-left: -13px;
  border-radius: 4px;
  background: linear-gradient(#ffd66e, #f0a01d);
  border: 2px solid #c07f10;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
/* ロープ(降ろすとのびる) */
.claw-unit::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 3px; height: 16px; margin-left: -1.5px;
  background: linear-gradient(90deg, #6d7994, #aab4cb, #6d7994);
  transition: height 0.4s ease;
}
.claw-unit.down::before { height: 156px; }
/* アーム本体 */
.claw {
  position: absolute; top: 14px; left: 50%;
  width: 40px; height: 15px; margin-left: -20px;
  background: linear-gradient(#e7ecf7 0%, #9aa6c2 45%, #5a6480 100%);
  border-radius: 7px 7px 3px 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: top 0.4s ease;
}
.claw-unit.down .claw { top: 154px; }
/* アームのつめ(左右＋まん中の3本) */
.claw::before, .claw::after, .claw-mid {
  content: ""; position: absolute; top: 11px;
  width: 6px; height: 24px;
  background: linear-gradient(90deg, #a8b3cc, #59637e);
  border-radius: 3px 3px 4px 4px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.claw::before { left: 2px;  transform-origin: top center; transform: rotate(26deg); }
.claw::after  { right: 2px; transform-origin: top center; transform: rotate(-26deg); }
.claw-mid     { left: 50%; margin-left: -3px; transform-origin: top center; height: 20px; }
.claw.closed::before { transform: rotate(6deg); }
.claw.closed::after  { transform: rotate(-6deg); }
/* 景品が乗っている床 */
.crane-floor {
  position: absolute; left: 11px; right: 11px; bottom: 11px; height: 20px;
  border-radius: 0 0 9px 9px;
  background: repeating-linear-gradient(90deg, #d9c3a5 0 10px, #cbb294 10px 20px);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 取り出し口(床の中におさめて、カプセルと重ならないようにする) */
.crane-chute {
  position: absolute; left: 15px; bottom: 12px;
  display: flex; align-items: center; gap: 5px;
  z-index: 3;
}
.chute-mouth {
  display: block;
  width: 42px; height: 15px;
  border-radius: 5px;
  background: linear-gradient(#2a3049, #454f6b);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.4);
}
.chute-tag {
  font-size: 0.55rem; font-weight: 800; color: #7b5a2a;
  letter-spacing: 0.5px;
}
/* カプセル(ガチャ風: 上が透明・下が色つき) */
.capsule-row { position: absolute; left: 0; right: 0; bottom: 30px; height: 56px; z-index: 1; }
/* v2.63.0: カプセルは**押せるもの**になった(タップして取りに行かせる)。
   押せると分からないと、昔のように「アームが来るのを待つもの」に見えてしまうので、
   カーソル・押しこみ・ふわりと呼吸する動きで「押せる」と伝える */
.capsule {
  position: absolute; bottom: 0;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: capBreathe 2.6s ease-in-out infinite;
  min-width: 58px; max-width: 22%;
  padding: 17px 8px 9px;
  border-radius: 50% 50% 44% 44%;
  color: #3a3a4a; font-weight: 800;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 1rem; text-align: center;
  white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0 44%, var(--cc, #ffd45e) 44% 100%);
  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,0.12),
    inset 0 2px 0 rgba(255,255,255,0.9),
    0 3px 7px rgba(0,0,0,0.22);
}
/* カプセルのつなぎ目 */
.capsule::after {
  content: ""; position: absolute; left: 0; right: 0; top: 44%;
  height: 2px;
  background: rgba(0,0,0,0.12);
}
/* 光の反射 */
.capsule::before {
  content: ""; position: absolute; left: 22%; top: 14%;
  width: 30%; height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  transform: rotate(-20deg);
}
.cap-word { position: relative; z-index: 2; }
/* 押したとき ちょっと沈む。
   **`animation: none` を一緒に書くこと** ─ アニメーションは transform を上書きするので、
   ふわりを止めないと押しこみが1pxも見えない */
.capsule:active { animation: none; transform: translateX(-50%) translateY(3px) scale(0.97); }
/* 「押せるよ」のふわり。4つが同時だとうるさいので ずらす */
@keyframes capBreathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.capsule:nth-of-type(2) { animation-delay: 0.35s; }
.capsule:nth-of-type(3) { animation-delay: 0.7s; }
.capsule:nth-of-type(4) { animation-delay: 1.05s; }
/* .held と .slip は このあとの行に**専用のアニメーション**があるので、
   ここで止めるのは .taken(つかんだ直後・まだ専用の演出が始まっていない一瞬)だけ。
   順番に頼らないよう、止める対象と カーソルを分けて書いてある */
.capsule.taken { animation: none; }
.capsule.held, .capsule.slip, .capsule.taken { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .capsule { animation: none !important; }
}
.capsule.long { font-size: 0.72rem; }
/* アームにつかまれた状態: アームの子になり、ツメの真下にぶら下がる
   (アームが上下すると、そのまま一緒に動く) */
@keyframes capsuleGrip {
  0%   { transform: translateX(-50%) scale(1); }
  45%  { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}
.capsule.held {
  top: 22px; bottom: auto; left: 50%;
  z-index: 4;
  animation: capsuleGrip 0.3s ease-out;
}
@keyframes capsuleSlip {
  0%   { transform: translate(-50%, -34px); }
  55%  { transform: translate(-50%, -44px); }
  100% { transform: translate(-50%, 0); }
}
.capsule.slip { animation: capsuleSlip 0.75s ease; }

@media (prefers-reduced-motion: reduce) {
  .mq-bulb { animation: none !important; }
}

/* ============================================================
   ボス戦(5レベルごとの関門)
   ============================================================ */

/* --- レベル一覧のチャプター見出し --- */
.chapter-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin: 18px 2px 8px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #55607a;
}
.chapter-head .ch-name {
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 0 2px 6px rgba(60,80,140,0.12);
}
.chapter-head .ch-prog { font-size: 0.76rem; color: var(--sub); }
.chapter-head.locked .ch-name { background: rgba(255,255,255,0.6); color: var(--sub); }

.level-num.lock { background: linear-gradient(135deg, #eceff7, #dde2ee); color: #9aa3b8; }

/* --- レベル一覧のボスの行 --- */
.boss-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 4px 0 6px;
  background: linear-gradient(135deg, #3b3f5c, #2a2d44);
  color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,0.22), 0 8px 18px rgba(40,20,60,0.28);
  transition: transform 0.1s, box-shadow 0.1s;
}
.boss-row .level-meta { color: rgba(255,255,255,0.78); }
.boss-row:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.22); }
.boss-row .boss-avatar {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, var(--bc, #ff7a59), rgba(0,0,0,0.35));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);
}
.boss-row .boss-go { font-size: 1.2rem; }
/* 挑戦できる状態: 赤く脈打って気づかせる */
@keyframes bossReady {
  0%, 100% { box-shadow: 0 5px 0 #8a2a2a, 0 8px 18px rgba(255,80,80,0.35); }
  50%      { box-shadow: 0 5px 0 #8a2a2a, 0 10px 28px rgba(255,80,80,0.75); }
}
.boss-row.ready {
  background: linear-gradient(135deg, #ff6a5e, #c9304a);
  animation: bossReady 1.6s ease-in-out infinite;
}
.boss-row.ready .boss-avatar { animation: bossIdle 1.2s ease-in-out infinite; }
.boss-row.cleared { background: linear-gradient(135deg, #4f6b53, #35503c); }
.boss-row.wait { background: linear-gradient(135deg, #6d7288, #565b70); opacity: 0.75; }
/* まだ正体を知らないボス: ❔を暗く沈ませて「なぞ」の感じを出す */
.boss-row.unknown .boss-avatar {
  background: radial-gradient(circle at 50% 40%, #4a5066, #23283a);
  color: rgba(255,255,255,0.55);
  text-shadow: 0 0 12px rgba(255,255,255,0.25);
}
.boss-row.ready.unknown .boss-avatar { color: rgba(255,255,255,0.85); }
.boss-row:disabled { cursor: default; }

/* --- ボス登場画面 --- */
@keyframes warnBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes bossAppear {
  0%   { transform: scale(0.3) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.boss-intro {
  position: relative;
  text-align: center;
  border-radius: var(--radius);
  padding: 20px 16px 18px;
  margin-bottom: 14px;
  color: #fff;
  background: radial-gradient(circle at 50% 30%, var(--bc, #ff7a59) 0%, #2a2d44 70%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.boss-intro .bi-warn {
  font-weight: 800; font-size: 1.05rem; letter-spacing: 1px;
  animation: warnBlink 0.9s ease-in-out infinite;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.boss-intro .bi-boss {
  font-size: 5rem; line-height: 1.2;
  animation: bossAppear 0.7s cubic-bezier(.2,1.4,.5,1) both;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.boss-intro .bi-name { font-size: 1.4rem; font-weight: 800; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
/* はじめて会うボス: まっ黒なシルエットで登場し、途中でバッと正体があらわれる */
@keyframes bossRevealFig {
  0%   { transform: scale(0.3) rotate(-14deg); opacity: 0;   filter: brightness(0); }
  30%  { transform: scale(1.1) rotate(6deg);   opacity: 1;   filter: brightness(0); }
  62%  { transform: scale(1.05) rotate(-3deg);              filter: brightness(0); }
  70%  { transform: scale(1.35) rotate(4deg);               filter: none; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1;   filter: none; }
}
@keyframes bossRevealName {
  0%, 55%  { opacity: 0; transform: translateY(6px); }
  75%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 1; transform: translateY(0); }
}
.boss-intro.first .bi-boss { animation: bossRevealFig 1.15s cubic-bezier(.2,1.2,.5,1) both; }
.boss-intro.first .bi-name { animation: bossRevealName 1.15s ease both; }
.boss-intro .bi-sub { font-size: 0.8rem; opacity: 0.9; font-weight: 700; }
.boss-intro .bi-clear { margin-top: 6px; font-size: 0.85rem; font-weight: 800; }

.boss-rule { padding: 14px 16px; }
.boss-rule .br-line {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.88rem; font-weight: 700;
  padding: 5px 0;
}
.boss-rule .br-i { font-size: 1.1rem; flex-shrink: 0; }

/* たたかうボタン(赤い立体ボタン) */
.btn-boss {
  background: linear-gradient(180deg, #ff7a6b, #e03a4e);
  color: #fff;
  box-shadow: 0 5px 0 #a5202f, 0 8px 16px rgba(224,58,78,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-boss:active { transform: translateY(4px); box-shadow: 0 1px 0 #a5202f; }

/* ホームの「ボス戦にちょうせん」ボタン */
.big-btn.boss {
  background: linear-gradient(180deg, #ff7a6b, #d92f45);
  box-shadow: 0 5px 0 #a5202f, 0 8px 18px rgba(217,47,69,0.4);
  animation: bossReady 1.6s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.big-btn.boss:active { box-shadow: 0 1px 0 #a5202f; animation: none; }

/* --- バトル画面のヘッダー --- */
.boss-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.boss-head-title { font-weight: 800; font-size: 0.85rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.boss-hearts { font-size: 1.1rem; letter-spacing: 1px; white-space: nowrap; }
.boss-hearts .heart { display: inline-block; }
.boss-hearts .heart.broken { opacity: 0.75; }
@keyframes heartBreak {
  0%   { transform: scale(1.6) rotate(0deg); }
  40%  { transform: scale(1.3) rotate(-12deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.boss-hearts .heart.breaking { animation: heartBreak 0.5s ease; }

/* --- バトル画面のアリーナ --- */
.boss-arena {
  position: relative;
  border-radius: var(--radius);
  padding: 10px 14px 0;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #3a3f5f 0%, #262a41 60%, #1e2134 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.boss-arena.rage { background: linear-gradient(180deg, #5d2a3a 0%, #3a1e2e 60%, #2a1524 100%); }
.boss-name-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  color: #fff; font-weight: 800; font-size: 0.9rem;
}
.boss-name-row .rage-tag {
  font-size: 0.7rem; background: #ff4d5e; border-radius: 999px;
  padding: 1px 8px; margin-left: 4px;
}
.boss-hp-num { font-size: 0.8rem; font-family: "Segoe UI", Verdana, sans-serif; opacity: 0.9; }
.boss-hp-track {
  height: 14px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  overflow: hidden;
  margin: 5px 0 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.boss-hp-track { position: relative; }
.boss-hp-fill {
  position: relative; z-index: 2;
  height: 100%;
  background: linear-gradient(90deg, #7ce8a4, #35c281);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(.2,.9,.3,1), background 0.4s;
}
.boss-hp-fill.low { background: linear-gradient(90deg, #ffb15e, #ff5252); }
/* 削ったぶんが少し遅れて追いかける白いバー(格闘ゲーム風・手ごたえUP) */
.boss-hp-ghost {
  position: absolute; left: 0; top: 0; z-index: 1;
  height: 100%;
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  transition: width 0.7s ease 0.35s;
}

.boss-stage {
  position: relative;
  height: 116px;
}
@keyframes bossIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.03); }
}
.boss-fig {
  position: absolute; top: 6px; left: 50%;
  margin-left: -34px;
  width: 68px; text-align: center;
  font-size: 3.6rem; line-height: 1.1;
  animation: bossIdle 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
}
.boss-arena.rage .boss-fig { animation-duration: 0.7s; filter: drop-shadow(0 0 12px rgba(255,60,60,0.85)); }
@keyframes bossHurt {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-10px) scale(1.08); }
  40%  { transform: translateX(9px) scale(0.95); }
  60%  { transform: translateX(-6px); }
  100% { transform: translateX(0) scale(1); }
}
.boss-fig.hurt { animation: bossHurt 0.5s ease; filter: drop-shadow(0 0 14px rgba(255,90,90,0.95)) brightness(1.6); }
@keyframes bossLunge {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(46px) scale(1.25); }
  100% { transform: translateY(0) scale(1); }
}
.boss-fig.lunge { animation: bossLunge 0.55s ease; }

/* こちらのペンギン */
.boss-hero {
  position: absolute; left: 10px; bottom: 4px;
  font-size: 2.4rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}
@keyframes heroAttack {
  0%   { transform: translate(0, 0) rotate(0deg); }
  40%  { transform: translate(90px, -46px) rotate(-20deg) scale(1.15); }
  70%  { transform: translate(60px, -20px) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.boss-hero.attack { animation: heroAttack 0.55s cubic-bezier(.3,1.2,.5,1); }
@keyframes heroDamaged {
  0%, 100% { transform: translateX(0); opacity: 1; }
  25%      { transform: translateX(-12px); opacity: 0.4; }
  55%      { transform: translateX(8px); opacity: 1; }
  80%      { transform: translateX(-4px); opacity: 0.5; }
}
.boss-hero.damaged { animation: heroDamaged 0.6s ease; }

.boss-combo {
  position: absolute; right: 8px; bottom: 6px;
  background: linear-gradient(180deg, #ffcf5e, #ff9a3c);
  color: #7a3c00;
  font-weight: 800; font-size: 0.85rem;
  border-radius: 999px; padding: 2px 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* こうげきのエフェクト */
.fx-layer { position: absolute; inset: 0; pointer-events: none; }
@keyframes fxSlash {
  0%   { transform: translate(-50%, -50%) scale(0.4) rotate(-25deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.1) rotate(15deg); opacity: 0; }
}
.fx-slash {
  position: absolute; top: 42px; left: 50%;
  font-size: 2.6rem;
  animation: fxSlash 0.6s ease-out forwards;
}
.fx-slash.crit { font-size: 3.4rem; }
@keyframes dmgFloat {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  25%  { transform: translate(-50%, -18px) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -62px) scale(1); opacity: 0; }
}
.dmg-float {
  position: absolute; top: 30px; left: 62%;
  font-weight: 800; font-size: 1.5rem;
  color: #fff36b;
  font-family: "Segoe UI", Verdana, sans-serif;
  text-shadow: 0 2px 0 #b34a00, 0 0 10px rgba(255,220,60,0.8);
  animation: dmgFloat 0.9s ease-out forwards;
}
.dmg-float.crit { font-size: 2rem; color: #fff; text-shadow: 0 2px 0 #d81e3f, 0 0 14px rgba(255,80,120,0.9); }

/* --- ひっさつゲージ --- */
.gauge-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 5px 2px 7px;
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem; font-weight: 800;
}
.gauge-pips { display: flex; gap: 5px; }
.gauge-pips .pip {
  width: 26px; height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  transition: background 0.25s, box-shadow 0.25s;
}
.gauge-pips .pip.on {
  background: linear-gradient(90deg, #ffe98a, #ffb020);
  box-shadow: 0 0 8px rgba(255,200,60,0.9);
}
@keyframes gaugeFull {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.gauge-row.full { color: #ffe07a; animation: gaugeFull 0.7s ease-in-out infinite; }

/* --- 画面フラッシュ(クリティカル・ひっさつ・とどめ) --- */
@keyframes flashOut {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}
.battle-flash {
  position: fixed; inset: 0; z-index: 60;
  background: #fff;
  pointer-events: none;
  animation: flashOut 0.24s ease-out forwards;
}
.battle-flash.strong { animation-duration: 0.42s; background: radial-gradient(circle, #fff 40%, #ffe9a8 100%); }
/* 当たった瞬間に一瞬だけ画面が寄る(ヒットストップ) */
@keyframes impactZoom {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.boss-arena.impact { animation: impactZoom 0.26s ease-out; }

/* --- コンボでペンギンがつよくなる(見た目) --- */
@keyframes auraPulse {
  0%, 100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)) drop-shadow(0 0 6px var(--au)); }
  50%      { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)) drop-shadow(0 0 16px var(--au)); }
}
.boss-hero.aura3 { --au: rgba(255,170,60,0.95); animation: auraPulse 0.9s ease-in-out infinite; }
.boss-hero.aura5 { --au: rgba(120,220,255,1); animation: auraPulse 0.6s ease-in-out infinite; }

/* --- ひっさつわざ(連打タイム) --- */
.mash-screen {
  text-align: center;
  border-radius: var(--radius);
  padding: 16px 14px 18px;
  background: radial-gradient(circle at 50% 35%, var(--bc, #ff7a59) 0%, #221a3a 72%);
  box-shadow: var(--shadow);
  color: #fff;
  overflow: hidden;
}
@keyframes mashTitleIn {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.mash-title {
  font-size: 1.5rem; font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  animation: mashTitleIn 0.45s cubic-bezier(.2,1.5,.5,1) both;
}
.mash-sub { font-size: 0.85rem; font-weight: 700; opacity: 0.92; margin-bottom: 4px; }
/* 連打中もボスのHPバーを出す(1タップごとに減るのが見える) */
.mash-hp {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px;
  font-size: 0.78rem; font-weight: 800;
}
.mash-hp-label { opacity: 0.9; }
.mash-screen .boss-hp-track { margin: 4px 0 2px; }
.mash-screen .boss-hp-fill { transition: width 0.08s linear; }
.mash-stage { position: relative; height: 130px; }
@keyframes mashIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.04); }
}
.mash-boss {
  position: absolute; left: 50%; top: 8px;
  margin-left: -40px; width: 80px;
  font-size: 4.2rem; line-height: 1.1;
  animation: mashIdle 1s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
@keyframes mashHit {
  0%   { transform: translate(0,0) scale(1); }
  30%  { transform: translate(-7px, 3px) scale(0.92); filter: brightness(2.2); }
  100% { transform: translate(0,0) scale(1); }
}
.mash-boss.hit { animation: mashHit 0.14s ease-out; }
/* 倒しきったとき: はじけて消える */
@keyframes mashBlast {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  35%  { transform: scale(1.45) rotate(10deg); opacity: 1; }
  100% { transform: scale(0.25) rotate(-45deg); opacity: 0; }
}
.mash-boss.blasted { animation: mashBlast 0.9s ease-in forwards; }
/* まだ倒せていないとき: よろめくだけで、消えない */
@keyframes mashStagger {
  0%   { transform: translateX(0) rotate(0deg) scale(1); }
  20%  { transform: translateX(-10px) rotate(-9deg) scale(1.06); filter: brightness(1.8); }
  45%  { transform: translateX(8px) rotate(7deg) scale(0.97); }
  70%  { transform: translateX(-4px) rotate(-3deg) scale(1.02); }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}
.mash-boss.staggered { animation: mashStagger 0.7s ease-out; }
@keyframes mashPop {
  0%   { transform: scale(0.4); opacity: 0; }
  35%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1.8) translateY(-22px); opacity: 0; }
}
.mash-pop { position: absolute; font-size: 1.7rem; animation: mashPop 0.55s ease-out forwards; }
/* 1発ごとのダメージ数字(連続で入っているのが目で見える) */
@keyframes mashHitDmg {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  25%  { transform: translate(-50%, -14px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -46px) scale(0.95); opacity: 0; }
}
.mash-hit-dmg {
  position: absolute;
  font-family: "Segoe UI", Verdana, sans-serif;
  font-size: 1.25rem; font-weight: 800;
  color: #fff36b;
  text-shadow: 0 2px 0 #b34a00, 0 0 8px rgba(255,220,60,0.8);
  animation: mashHitDmg 0.6s ease-out forwards;
}
/* 5ヒットごとの「◯HIT!」 */
@keyframes hitCountPop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.mash-hitcount {
  position: absolute; left: 50%; top: 50%;
  font-family: "Segoe UI", Verdana, sans-serif;
  font-size: 2rem; font-weight: 900;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,200,60,0.95), 0 3px 0 #c2263c;
  opacity: 0; pointer-events: none;
}
.mash-hitcount.pop { animation: hitCountPop 0.7s ease-out forwards; }
.mash-count { font-size: 1rem; font-weight: 800; }
.mash-count b { font-size: 2.1rem; color: #ffe07a; font-family: "Segoe UI", Verdana, sans-serif; }
.mash-dmg { color: #ffe07a; font-family: "Segoe UI", Verdana, sans-serif; }
.mash-track {
  height: 10px; margin: 8px 0 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px; overflow: hidden;
}
.mash-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ffe98a, #ff8a3c);
  transition: width linear;
}
@keyframes mashBtnPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 0 #a5202f, 0 10px 22px rgba(255,90,90,0.5); }
  50%      { transform: scale(1.04); box-shadow: 0 6px 0 #a5202f, 0 14px 30px rgba(255,90,90,0.75); }
}
.mash-btn {
  width: 100%;
  padding: 22px 16px;
  border-radius: 20px;
  font-size: 1.5rem; font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #ff8a6b, #e03a4e);
  box-shadow: 0 6px 0 #a5202f, 0 10px 22px rgba(255,90,90,0.5);
  animation: mashBtnPulse 0.5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mash-btn:active { transform: translateY(5px) scale(0.99); box-shadow: 0 1px 0 #a5202f; animation: none; }
.mash-btn:disabled { background: linear-gradient(180deg, #9aa0b5, #6d7488); box-shadow: 0 4px 0 #555b6e; animation: none; }
.mash-screen.done .mash-title { animation: mashTitleIn 0.4s cubic-bezier(.2,1.5,.5,1) both; font-size: 1.7rem; }

/* --- とどめ(K.O.) --- */
.ko-screen {
  position: relative;
  height: 62vh; min-height: 340px;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 45%, var(--bc, #ff7a59) 0%, #1a1630 70%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* いったん ためて(しゃがんで) → 空のかなたへ吹っ飛んでいく */
@keyframes koFly {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  10%  { transform: translate(-50%, -42%) scale(1.25, 0.8) rotate(-8deg); opacity: 1; }  /* ためる */
  18%  { transform: translate(-54%, -52%) scale(0.9, 1.25) rotate(-18deg); opacity: 1; } /* のびる */
  55%  { transform: translate(120%, -260%) scale(0.4) rotate(420deg); opacity: 1; }
  85%  { transform: translate(330%, -620%) scale(0.12) rotate(760deg); opacity: 0.9; }
  100% { transform: translate(430%, -820%) scale(0.04) rotate(900deg); opacity: 0; }
}
.ko-boss {
  position: absolute; left: 50%; top: 45%;
  font-size: 5rem;
  animation: koFly 1.6s cubic-bezier(.55,.06,.68,.19) forwards; /* だんだん加速して飛び去る */
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
}
/* 飛んでいったあとに残る すじ雲 */
@keyframes koTrail {
  0%   { transform: rotate(-56deg) scaleX(0); opacity: 0; }
  25%  { transform: rotate(-56deg) scaleX(1); opacity: 0.9; }
  60%  { transform: rotate(-56deg) scaleX(1); opacity: 0.5; }
  100% { transform: rotate(-56deg) scaleX(1); opacity: 0; }
}
.ko-trail {
  position: absolute; left: 50%; top: 45%;
  width: 72%; height: 7px;
  border-radius: 99px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.85));
  filter: blur(1.5px);
  animation: koTrail 1.5s ease-out 0.25s both;
  pointer-events: none;
}
/* 遠くの空で キラーン */
@keyframes koTwinkle {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.7) rotate(25deg); opacity: 1; }
  70%  { transform: scale(1.1) rotate(45deg); opacity: 1; }
  100% { transform: scale(0.3) rotate(70deg); opacity: 0; }
}
.ko-twinkle {
  position: absolute; right: 9%; top: 9%;
  font-size: 1.7rem;
  animation: koTwinkle 0.9s ease-out 1.15s both;
  pointer-events: none;
}
@keyframes koStamp {
  0%   { transform: translate(-50%, -50%) scale(3.4) rotate(-18deg); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.04) rotate(-8deg); opacity: 1; }
}
.ko-stamp {
  position: absolute; left: 50%; top: 50%;
  font-size: 3.6rem; font-weight: 900;
  font-family: "Segoe UI", Verdana, sans-serif;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(255,220,90,0.95), 0 5px 0 #c2263c;
  animation: koStamp 0.5s cubic-bezier(.2,1.6,.4,1) 0.45s both;
}
@keyframes koBurst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(2.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; }
}
.ko-burst {
  position: absolute; left: 50%; top: 45%;
  font-size: 4rem;
  animation: koBurst 0.9s ease-out 0.1s both;
}

@keyframes arenaShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}
.boss-arena.shake { animation: arenaShake 0.5s ease; }

/* --- 出題エリア --- */
.boss-q {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 16px 12px;
  margin-bottom: 10px;
  text-align: center;
}
.boss-q .quiz-word { margin: 0 0 2px; font-size: 1.9rem; }
.boss-q .quiz-ask { margin-top: 2px; }
/* 選択肢もすこしコンパクトに(iPhone SE でも4つ目まで見えるように) */
.boss-q ~ .choices { gap: 8px; }
.boss-q ~ .choices .choice-btn { padding: 12px 12px; font-size: 1.02rem; }
.boss-timer {
  height: 8px;
  background: #eef1f8;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.boss-timer-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ffd45e, #ff7a59);
  border-radius: 999px;
  transition: width linear;
}

/* --- しょうり / はいぼく --- */
@keyframes bossBlast {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  40%  { transform: scale(1.3) rotate(12deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(-40deg); opacity: 0.15; }
}
.boss-win .bw-boss {
  position: relative;
  font-size: 3.6rem; line-height: 1.2;
  display: inline-block;
  animation: bossBlast 1.4s ease forwards;
}
@keyframes burstPop {
  0%   { transform: scale(0.2); opacity: 0; }
  35%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.boss-win .bw-burst {
  position: absolute; left: 50%; top: 50%;
  margin: -28px 0 0 -28px;
  font-size: 3.4rem;
  animation: burstPop 1s ease-out 0.25s both;
}
.unlock-line {
  margin-top: 10px;
  font-weight: 800;
  color: #1d8a5c;
  background: var(--correct-bg);
  border-radius: 14px;
  padding: 8px 12px;
}
.boss-lose .bl-boss {
  font-size: 3.4rem; line-height: 1.2;
  filter: grayscale(0.15);
  animation: bossIdle 1.6s ease-in-out infinite;
}
.boss-lose .bl-hp { font-weight: 800; font-size: 0.92rem; margin-bottom: 6px; }
.boss-lose .boss-hp-track { max-width: 240px; margin: 0 auto 10px; }

/* せの低い画面(iPhone SE など)ではバトル画面をさらにコンパクトに */
@media (max-height: 720px) {
  .boss-stage { height: 88px; }
  .boss-fig { font-size: 3rem; margin-left: -28px; width: 56px; }
  .boss-hero { font-size: 2rem; }
  .boss-arena { padding: 8px 12px 0; }
  .boss-q { padding: 8px 14px 10px; }
  .boss-q .quiz-word { font-size: 1.6rem; }
  .boss-q ~ .choices .choice-btn { padding: 10px 12px; font-size: 0.98rem; }
  .boss-q .quiz-type-label { font-size: 0.7rem; }
}

/* 動きが苦手な人向け(端末の設定を尊重する) */
@media (prefers-reduced-motion: reduce) {
  .boss-fig, .boss-intro .bi-boss, .boss-row.ready, .big-btn.boss,
  .boss-hero.attack, .boss-fig.hurt, .boss-fig.lunge, .boss-arena.shake,
  .boss-win .bw-boss, .boss-lose .bl-boss, .boss-intro .bi-warn,
  .boss-arena.impact, .boss-hero.aura3, .boss-hero.aura5, .gauge-row.full,
  .mash-btn, .mash-boss, .mash-boss.staggered, .mash-title, .ko-boss, .ko-stamp, .ko-burst,
  .boss-intro.first .bi-boss, .boss-intro.first .bi-name, .mash-hitcount.pop {
    animation: none !important;
  }
  /* 飛んでいく演出は動きそのものなので、動きをおさえる設定では出さない */
  .ko-trail, .ko-twinkle { display: none; }
  /* 数字は動かさずに出す(連打の手ごたえは残す) */
  .mash-hit-dmg { animation: none !important; transform: translate(-50%, -18px); opacity: 1; }
  /* 光の点滅が苦手な人もいるので、フラッシュは出さない */
  .battle-flash { display: none; }
  .ko-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg); }
  .ko-boss { opacity: 1; transform: translate(-50%, -50%); }
}

@media (min-width: 600px) {
  #app { padding-top: 32px; }
  .word-en { font-size: 2.8rem; }
}

/* ============================================================
   v2.64.0 — ことばの冒険ノート
   学習・ごほうび・保存データのしくみは引き継ぎ、見た目を統一。
   ホームは広い画面で2列、小さい画面で1列。ゲーム盤面の寸法や
   タイミング用アニメーションには触れず、共通UIのみを上書きする。
   ============================================================ */
:root {
  --bg: #f7f8ef;
  --bg-grad: #f7f8ef;
  --card: #fffef9;
  --text: #203c42;
  --sub: #65766f;
  --primary: #187968;
  --primary-dark: #10594e;
  --accent: #e77f5d;
  --correct: #208565;
  --correct-bg: #e1f3e8;
  --wrong: #c65043;
  --wrong-bg: #fff0e9;
  --star: #f2bc37;
  --star-off: #d9e0d8;
  --radius: 22px;
  --shadow: 0 4px 0 #dce4d8;
  --line: #dce4d9;
  --ink-line: #254940;
  --yellow: #f8ce58;
  --soft-green: #e9f2de;
}

body {
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(#cad5bd 0.75px, transparent 0.75px);
  background-size: 20px 20px;
  background-attachment: scroll;
  animation: none;
  line-height: 1.65;
}
.bg-decor { display: none; }
#app { max-width: 560px; padding: 28px 20px 56px; }
#app:has(.home-shell) { max-width: 1160px; padding: 30px 28px 48px; }
button, input, select { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #e3a727;
  outline-offset: 4px;
}
button { touch-action: manipulation; }
.card { border: 2px solid var(--line); box-shadow: var(--shadow); }
.note { color: var(--sub); }

/* 旅のヘッダー */
.adventure-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 0 2px 25px; margin-bottom: 24px;
  border-bottom: 2px solid var(--line);
}
.adventure-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 55px; height: 59px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #edf3dc; border: 2px solid var(--ink-line);
  border-radius: 17px; box-shadow: 0 3px 0 #bbcfad; transform: rotate(-5deg);
}
.brand-mark .penguin-face { width: 42px; height: 46px; min-width: 42px; margin: 0; animation: none; transform: rotate(5deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.4; }
.brand-copy small { color: var(--primary); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.14em; }
.brand-copy strong { font-size: 1.32rem; font-weight: 900; letter-spacing: 0.025em; }
.adventure-status { display: flex; align-items: center; gap: 14px; }
.adventure-level {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 6px 11px; background: #edf3df; border: 1.5px solid #cbdcbb;
  border-radius: 11px; font-size: 0.84rem; font-weight: 900;
}
.adventure-level b { font-size: 1.14rem; margin-left: 4px; }
.adventure-xp { min-width: 120px; font-size: 0.63rem; font-weight: 800; color: var(--sub); }
.adventure-xp .progress-track { height: 8px; margin-top: 5px; background: #e1e8d9; box-shadow: none; }
.adventure-xp .progress-fill { background: var(--primary); box-shadow: none; }
.adventure-streak {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  min-height: 42px; padding: 7px 12px; background: #fff2d4;
  border: 1.5px solid #edd5a1; border-radius: 12px;
  font-size: 0.77rem; font-weight: 800; color: #82541f;
}
.adventure-streak b { font-size: 1.04rem; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 24px; align-items: start; }
.home-main, .home-side { min-width: 0; }
.home-main > *, .home-side > * { min-width: 0; }
.home-main > .card, .home-main > .today-card, .home-side > .card { margin-bottom: 22px; }

/* きょうの冒険へ。大きな入口を一つ、景色といっしょに */
.adventure-hero {
  position: relative; isolation: isolate; min-height: 336px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; background: #e8f0d8;
  border: 2px solid var(--ink-line); border-radius: 25px;
  box-shadow: 0 5px 0 #c7d5b8; margin-bottom: 26px;
}
.adventure-hero-copy { position: relative; z-index: 2; width: 62%; padding: 31px 0 24px 29px; }
.adventure-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em;
  border: 1px solid #c4d5ad; border-radius: 6px; background: #f6f9e9; color: #516a3c;
  margin-bottom: 13px;
}
.adventure-hero h1 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 900; line-height: 1.42; letter-spacing: 0.025em; }
.adventure-hero h1 em { font-style: normal; color: var(--primary); }
.adventure-hero-copy > p { color: #51634d; font-size: 0.77rem; font-weight: 700; line-height: 1.85; margin: 12px 0 19px; }
.adventure-start { width: 100%; max-width: 275px; }
.adventure-start .big-btn.start {
  min-height: 64px; margin: 0; padding: 12px 15px; gap: 11px;
  background: var(--primary); color: #fffdf1;
  border: 2px solid var(--primary-dark); border-radius: 14px;
  box-shadow: 0 4px 0 var(--primary-dark); animation: none;
}
.adventure-start .big-btn.start .bb-emoji { font-size: 1.4rem; }
.adventure-start .big-btn.start .bb-text b { font-size: 0.96rem; }
.adventure-start .big-btn.start .bb-text small { font-size: 0.63rem; color: #d8eee2; }
.adventure-start .big-btn.start .bb-arrow { opacity: 1; }
.adventure-art { position: absolute; z-index: 1; top: 0; right: 0; width: 46%; height: 100%; pointer-events: none; }
.adventure-hero-foot {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 16px; width: 100%; padding: 12px 25px;
  background: #f1f6e5; border-top: 1.5px solid #c6d8b2;
  color: #566d43; font-size: 0.67rem; font-weight: 800;
}
.adventure-hero-foot b { color: var(--text); }

/* タップして始める3つのミッション */
.today-card { border: 2px solid var(--line); padding: 23px; border-radius: 22px; box-shadow: var(--shadow); }
.today-head { gap: 10px; align-items: center; margin-bottom: 14px; }
.today-title { font-size: 1.08rem; font-weight: 900; letter-spacing: 0.015em; }
.today-count { font-size: 0.72rem; background: #eaf1df; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.today-msg { font-size: 0.78rem; margin-bottom: 14px; line-height: 1.6; }
.today-msg.done { color: #8d6016; }
.today-sub { color: var(--sub); }
.goal-dots { gap: 6px; margin-bottom: 9px; }
.goal-dot { height: 9px; background: #e4eadb; box-shadow: none; }
.goal-dot.done { background: #e6b83f; box-shadow: none; transform: none; }
.mission-grid { gap: 11px; margin-bottom: 15px; }
.mission-card {
  position: relative; padding: 17px 5px 13px; min-width: 0; min-height: 147px; gap: 5px;
  background: #f3f6e9; border: 2px solid #d6e1c7; border-radius: 16px;
  box-shadow: 0 3px 0 #d6e1c7; color: var(--text); text-align: center;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}
.mission-card.mission-review { background: #fff0e7; border-color: #edcfc1; box-shadow: 0 3px 0 #edcfc1; }
.mission-card.mission-game { background: #fff6d9; border-color: #e9d7a2; box-shadow: 0 3px 0 #e9d7a2; }
.mission-card .mc-icon { font-size: 2rem; line-height: 1.2; filter: none; margin-bottom: 3px; }
.mission-card .mc-name { font-size: 0.9rem; font-weight: 900; color: var(--text); }
.mission-card .mc-sub { font-size: 0.63rem; color: #6b7666; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
.mission-card .mc-prize { font-size: 0.61rem; color: #6b7666; }
.mission-card .mc-check { border: 2px solid #fffdf4; background: var(--primary); width: 22px; height: 22px; line-height: 18px; box-shadow: none; }
.mission-card.done { background: #e5f1e5; border-color: #8dbc9a; box-shadow: 0 3px 0 #8dbc9a; }
.mission-card.done .mc-name, .mission-card.done .mc-prize { color: #256647; }
.mission-card.done .mc-icon { filter: none; }
.mission-note { margin: 0 0 14px; font-size: 0.68rem; color: #72806c; }
.today-card .big-btn { min-height: 59px; padding: 11px 14px; margin-bottom: 13px; border-radius: 13px; }
.today-card .big-btn .bb-emoji { font-size: 1.35rem; }
.today-card .big-btn .bb-text b { font-size: 0.87rem; }
.today-card .big-btn .bb-text small { font-size: 0.66rem; }
.today-card .big-btn.review { background: #fff0e7; color: #8a452d; border: 2px solid #eac7b4; box-shadow: 0 3px 0 #eac7b4; animation: none; }
.today-card .big-btn.recap { background: #eff4e5; color: #466438; border: 2px solid #d6e0c6; box-shadow: 0 3px 0 #d6e0c6; }
.today-card .big-btn.surprise { background: #edf5f0; color: #2b6758; border: 2px solid #c9ddd0; box-shadow: 0 3px 0 #c9ddd0; animation: none; }
.today-card .big-btn.dim { background: #f0f2e9; color: #63715e; border: 2px solid #dbe0d1; box-shadow: 0 3px 0 #dbe0d1; }

/* あそぶ場所は、ノートにはさんだ3枚の絵カード */
.adventure-worlds { padding-top: 2px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.section-heading h2 { font-size: 1.08rem; font-weight: 900; }
.section-heading small { font-size: 0.67rem; font-weight: 700; color: var(--sub); }
.home-shell .grade-pick { gap: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-shell .grade-tile {
  --world-color: #416e40; --world-soft: #ecf4df;
  align-items: stretch; gap: 2px; padding: 101px 14px 12px; min-width: 0;
  background: #fffef9; border: 2px solid #d2dec8; color: var(--text);
  border-radius: 18px; box-shadow: 0 4px 0 #d2dec8; text-align: left;
}
.home-shell .grade-tile.g2 { --world-color: #347d8a; --world-soft: #e8f4f4; border-color: #c9ddda; box-shadow: 0 4px 0 #c9ddda; }
.home-shell .grade-tile.g3 { --world-color: #966844; --world-soft: #fbefdf; border-color: #e4d6bd; box-shadow: 0 4px 0 #e4d6bd; }
.home-shell .gt-art { height: 88px; border-bottom: 2px solid #d2dec8; background: #d5edcb; }
.home-shell .g1 .gt-art { background: #d9efdb; }
.home-shell .g1 .ga-orb { width: 25px; height: 25px; background: #f6cf59; box-shadow: none; right: 20px; top: 12px; }
.home-shell .g1 .ga-a { width: 83%; height: 48px; bottom: 9%; background: #aecb83; }
.home-shell .g1 .ga-b { width: 83%; height: 40px; bottom: 0; background: #82ad6d; }
.home-shell .g1 .ga-c { height: 16%; background: #669858; }
.home-shell .g2 .gt-art { background: #d7efed; border-color: #c9ddda; }
.home-shell .g2 .ga-orb { width: 41px; height: 13px; top: 17px; left: 20px; background: #fffdf3; }
.home-shell .g2 .ga-a { left: -12%; bottom: -12px; width: 80%; height: 56px; background: #7dc7c5; }
.home-shell .g2 .ga-b { right: -14%; bottom: -9px; width: 87%; height: 47px; background: #54a7ad; }
.home-shell .g2 .ga-c { left: -10%; bottom: -14px; width: 81%; height: 36px; background: #39878f; }
.home-shell .g3 .gt-art { background: #f4e6cd; border-color: #e4d6bd; }
.home-shell .g3 .ga-orb { width: 25px; height: 25px; background: #f7c667; box-shadow: none; right: 18px; top: 10px; }
.home-shell .g3 .ga-a { width: 59%; height: 68px; bottom: 3%; left: -1%; background: #849483; }
.home-shell .g3 .ga-b { width: 61%; height: 47px; bottom: 3%; right: -7%; background: #acac88; }
.home-shell .g3 .ga-c { height: 10%; background: #788971; }
.home-shell .g3 .ga-a::after { background: #fffdf2; }
.home-shell .gt-name { text-shadow: none; font-size: 1rem; font-weight: 900; line-height: 1.5; }
.gt-caption { position: relative; z-index: 1; color: var(--sub); font-size: 0.63rem; font-weight: 700; line-height: 1.5; }
.gt-bottom { display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 11px; }
.home-shell .gt-ring { width: 37px; height: 37px; background: conic-gradient(var(--world-color) calc(var(--pct) * 1%), var(--world-soft) 0); }
.home-shell .gt-ring::before { inset: 4px; background: #fffef9; }
.home-shell .gt-pct { color: var(--world-color); font-size: 0.58rem; font-weight: 900; text-shadow: none; }
.gt-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--world-soft); color: var(--world-color); font-size: 1rem; font-weight: 900; }

/* あいぼうと記録 */
.companion-card {
  position: relative; overflow: hidden; padding: 23px 22px 17px;
  background: #fffef8; border: 2px solid var(--ink-line); border-radius: 23px;
  box-shadow: 0 5px 0 #dce3cb; margin-bottom: 25px; text-align: center;
}
.companion-top { text-align: left; }
.companion-top small { color: var(--primary); font-size: 0.6rem; letter-spacing: 0.13em; font-weight: 900; }
.companion-top h2 { font-size: 1.15rem; font-weight: 900; line-height: 1.7; margin-top: 3px; }
.companion-portrait {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 150px; height: 135px; border-radius: 50%; background: #f8edc2;
  margin: 17px auto 16px; padding-bottom: 6px;
}
.companion-portrait::before, .companion-portrait::after { content: "✦"; position: absolute; color: #d4a83b; font-size: 1.45rem; }
.companion-portrait::before { left: -8px; top: 20px; transform: rotate(-15deg); }
.companion-portrait::after { right: -7px; bottom: 23px; font-size: 1rem; }
.companion-portrait .penguin-face { width: 100px; height: 110px; min-width: 100px; margin: 0; }
.companion-bubble {
  position: relative; border: 1.5px solid #e1e7d7; background: #f7f8ef;
  border-radius: 13px; padding: 11px 8px; margin-bottom: 17px;
  color: #5c7050; font-size: 0.73rem; font-weight: 800; line-height: 1.7;
}
.companion-bubble::before {
  content: ""; position: absolute; top: -7px; left: calc(50% - 6px);
  width: 11px; height: 11px; background: #f7f8ef; border-left: 1.5px solid #e1e7d7;
  border-top: 1.5px solid #e1e7d7; transform: rotate(45deg);
}
.companion-collection {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 49px; width: 100%; padding: 10px 12px;
  border: 2px solid #c4a23c; border-radius: 12px; background: var(--yellow);
  box-shadow: 0 3px 0 #c4a23c; font-size: 0.77rem; font-weight: 900; color: #5b481e;
}
.companion-collection b { font-size: 0.76rem; background: #fff4c7; border-radius: 7px; padding: 2px 6px; }
.companion-badges { display: block; min-height: 44px; width: 100%; margin-top: 9px; padding: 9px; border-radius: 10px; background: transparent; color: #657256; font-size: 0.72rem; font-weight: 800; }
.home-side .week-card, .home-side .world-card { padding: 18px 17px; border-radius: 19px; }
.week-head { gap: 8px; margin-bottom: 13px; align-items: center; }
.week-title { font-size: 0.89rem; font-weight: 900; }
.week-streak { font-size: 0.68rem; }
.week-streak b { color: #a5692f; font-size: 0.95rem; }
.week-strip { gap: 4px; }
.wk-cell { min-width: 0; padding: 7px 0; gap: 6px; background: #f1f4e9; border-radius: 9px; }
.wk-cell .wk-lab { color: #76836b; font-size: 0.59rem; }
.wk-cell .wk-mark { color: #a6b197; font-size: 0.77rem; }
.wk-cell.done { background: #fff0b4; }
.wk-cell.done .wk-lab { color: #826121; }
.wk-cell.shielded { background: #e4f1ec; }
.wk-cell.shielded .wk-lab { color: #386a62; }
.wk-cell.today { border-color: #a7bf88; }
.week-note { font-size: 0.63rem; line-height: 1.8; margin-top: 11px; }
.world-head { gap: 6px; }
.world-title { font-size: 0.86rem; font-weight: 900; }
.world-num { font-size: 0.67rem; white-space: nowrap; }
.world-num b { color: var(--primary); font-size: 0.95rem; }
.world-track { height: 9px; background: #e4eadb; box-shadow: none; }
.world-fill { background: #7aa26a; box-shadow: none; }
.world-note { font-size: 0.64rem; line-height: 1.8; margin-top: 10px; }
.home-tools { gap: 8px; }
.home-tools .menu-tile { min-height: 79px; padding: 11px 3px 8px; gap: 4px; border: 1.5px solid var(--line); border-radius: 12px; background: #fffef8; box-shadow: 0 3px 0 var(--line); }
.home-tools .menu-tile .mt-emoji { font-size: 1.2rem; }
.home-tools .menu-tile .mt-name { font-size: 0.63rem; }
.home-tools .menu-tile .mt-sub { font-size: 0.58rem; }
.home-tools .menu-tile.alert { background: #fff1e8; border-color: #eacaba; }
.version-line { color: #728067; font-size: 0.63rem; min-height: 44px; margin-top: 13px; }

/* 学習画面・一覧も同じノートの中で */
.btn { border: 2px solid transparent; border-radius: 14px; min-height: 50px; font-size: 1rem; }
.btn-primary { background: var(--primary); border-color: var(--primary-dark); box-shadow: 0 4px 0 var(--primary-dark); }
.btn-accent { background: #f3ba45; color: #624318; border-color: #c89430; box-shadow: 0 4px 0 #c89430; }
.btn-ghost { background: #fffef9; color: var(--primary); border-color: #cbdccd; box-shadow: 0 3px 0 #cbdccd; }
.btn-sub { background: #edf1e6; color: #506647; border-color: #d6dfcc; box-shadow: 0 3px 0 #d6dfcc; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-dark); }
.btn-accent:active { transform: translateY(3px); box-shadow: 0 1px 0 #c89430; }
.btn-ghost:active, .btn-sub:active { transform: translateY(2px); box-shadow: 0 1px 0 #cbdccd; }
.big-btn.start { background: var(--primary); border: 2px solid var(--primary-dark); box-shadow: 0 4px 0 var(--primary-dark); }
.big-btn.game { background: #f8ce58; color: #624b1d; border: 2px solid #c4a23c; box-shadow: 0 4px 0 #c4a23c; }
.big-btn.recap { background: #e3eed7; color: #426335; border: 2px solid #bcd0a6; box-shadow: 0 4px 0 #bcd0a6; }
.back-row { gap: 13px; margin-bottom: 22px; }
.back-btn, .session-quit { min-height: 44px; padding: 8px 13px; background: #fffef9; border: 2px solid #d5dfce; color: #4d6844; box-shadow: 0 3px 0 #d5dfce; border-radius: 12px; }
.screen-title { font-size: 1.11rem; line-height: 1.5; }
.session-head { gap: 11px; margin-bottom: 19px; }
.session-timer { background: #fff9dc; color: #896321; border: 1.5px solid #e4d4a4; box-shadow: none; }
.progress-track { background: #e4eadb; box-shadow: inset 0 1px 0 #d3ddc8; height: 12px; }
.progress-fill { background: #519676; box-shadow: none; }
.progress-fill::after { display: none; }
.progress-fill.goal { background: #e8b946; }
.progress-fill.xpfill { background: #64a38b; box-shadow: none; }
.phase-label { color: var(--primary); letter-spacing: 0.03em; }
.penguin-bubble { background: #fffef9; border-color: #d5dfcc; color: #54674b; box-shadow: 0 3px 0 #dbe3d1; }
.word-card { background: #fffef9; padding: 29px 23px 23px; border-color: #cbdac1; }
.word-en { color: #215e55; letter-spacing: 0.025em; }
.word-pos { background: #edf2e6; color: #526b46; }
.word-example { background: #f2f5eb; border: 1px solid #e0e8d6; border-radius: 13px; padding: 14px 16px; }
.word-ex-en { line-height: 1.6; }
.word-ex-ja { margin-top: 4px; line-height: 1.65; }
.speak-btn, .quiz-sound-btn { background: #e6f0dc; color: #3f6847; border: 2px solid #c8dabb; box-shadow: 0 3px 0 #c8dabb; min-height: 44px; }
.quiz-question { padding: 26px 22px 23px; }
.quiz-type-label { color: #407653; background: #eaf2e1; }
.quiz-type-label.spell { color: #8a6427; background: #fff2d6; }
.quiz-word { color: #23594f; overflow-wrap: anywhere; }
.choices { gap: 13px; }
.choice-btn { min-height: 59px; background: #fffef9; color: var(--text); border: 2px solid #d2ddc9; border-radius: 15px; box-shadow: 0 4px 0 #d2ddc9; }
.choice-btn:active:not(:disabled) { box-shadow: 0 1px 0 #d2ddc9; }
.choice-btn.correct { background: #dff0df; color: #21603b; border-color: #65a276; box-shadow: 0 4px 0 #65a276; }
.choice-btn.wrong { background: #ffede2; color: #ac4c35; border-color: #d8967b; box-shadow: 0 4px 0 #d8967b; }
.grade-row, .level-row, .weak-row, .badge-row { border: 2px solid var(--line); background: #fffef9; box-shadow: var(--shadow); }
.level-row { padding: 15px; border-radius: 18px; margin-bottom: 14px; }
.level-main, .grade-info, .badge-main { min-width: 0; }
.level-num { background: #edf3e3; border: 1.5px solid #d5e3c5; color: #597546; box-shadow: none; }
.level-num.done { background: #60a07a; border-color: #43875e; color: #fff; text-shadow: none; }
.level-meta { line-height: 1.65; }
.grade-badge.g1 { background: #649d72; }
.grade-badge.g2 { background: #4e9aab; }
.grade-badge.g3 { background: #cb965e; }
.game-pick { gap: 13px; }
.game-pick-btn { background: #fffef9; border: 2px solid #d3dfca; box-shadow: 0 4px 0 #d3dfca; border-radius: 18px; padding: 21px 12px; min-height: 119px; }
.game-pick-btn .gp-name { font-size: 0.9rem; }
.game-pick-btn.omakase { background: #fff3ce; border-color: #e2ca88; box-shadow: 0 4px 0 #e2ca88; color: #785a24; }
.stat-box { border-color: var(--line); background: #fffef9; box-shadow: var(--shadow); }
.stat-box .sb-value { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.setting-row { border-bottom-color: #e2e8d9; min-height: 63px; gap: 15px; }
.setting-row > :first-child { min-width: 0; }
.toggle { flex-shrink: 0; min-height: 44px; height: 44px; width: 66px; background: #dbe3d2; }
.toggle::after { width: 32px; height: 32px; top: 6px; left: 6px; }
.toggle.on::after { left: 28px; }
.coll-item { border: 2px solid #dce4d4; border-radius: 15px; background: #fffef8; box-shadow: 0 3px 0 #dce4d4; padding: 13px 4px; }
.coll-item.coll-new { border-color: #d69e39; box-shadow: 0 3px 0 #d69e39; background: #fff7db; }
.coll-item.buyable { border-color: #c6d9b8; background: #eef5e4; box-shadow: 0 3px 0 #c6d9b8; }
.coll-item.buyable .coll-name, .coll-item.buyable .coll-rarity { color: #567545; }
.coll-name { color: #627157; line-height: 1.6; }
.badge-icon { background: #eef2e7; }
.badge-row.unlocked .badge-icon { background: #fff0bd; }
.egg-card { background: #fffbed; border-color: #e4d5a2; }
.egg-card.mission-egg { background: #fff5d8; border-color: #dfc177; }
.egg-card.legend-egg { background: #fff0dd; border-color: #ddbc79; }

/* ゲーム中の絶対座標とは切り離した、装飾UIだけの押し心地 */
@media (hover: hover) {
  .adventure-start .big-btn.start:hover { background: #126c5b; transform: translateY(-2px); box-shadow: 0 6px 0 var(--primary-dark); }
  .mission-card:hover, .home-shell .grade-tile:hover, .companion-collection:hover, .home-tools .menu-tile:hover { transform: translateY(-3px); }
  .companion-badges:hover { background: #f1f4e9; }
  .choice-btn:hover:not(:disabled) { border-color: #7a9e68; background: #f7faef; }
  .choice-btn.correct:hover { background: #dff0df; }
  .choice-btn.wrong:hover { background: #ffede2; }
}
.adventure-start .big-btn.start:active, .mission-card:active, .home-shell .grade-tile:active,
.companion-collection:active, .home-tools .menu-tile:active { transform: translateY(3px); box-shadow: none; }

@media (max-width: 1000px) {
  .home-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
  .adventure-hero-copy { padding-left: 23px; width: 66%; }
  .adventure-hero h1 { font-size: 1.8rem; }
  .adventure-hero-copy > p { font-size: 0.72rem; }
  .today-card { padding: 19px; }
  .adventure-status { gap: 9px; }
  .home-shell .grade-tile { padding-left: 11px; padding-right: 11px; }
  .companion-card { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 899px) {
  #app:has(.home-shell) { max-width: 680px; padding: 24px 24px 44px; }
  .home-layout { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .adventure-header { flex-wrap: wrap; gap: 18px; padding-bottom: 20px; margin-bottom: 23px; }
  .adventure-brand { flex: 1; }
  .adventure-status { gap: 10px; }
  .adventure-xp { display: none; }
  .home-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .home-side .companion-card { grid-row: span 2; margin-bottom: 0; }
  .home-side > .card { margin-bottom: 0; }
  .home-tools { grid-column: 1 / -1; }
  .home-side .version-line { grid-column: 1 / -1; margin-top: -5px; }
  .adventure-hero-copy { width: 61%; padding-left: 29px; }
  .adventure-hero h1 { font-size: 2.05rem; }
  .adventure-hero-copy > p { font-size: 0.76rem; }
  .adventure-start { max-width: 278px; }
}
@media (max-width: 640px) {
  #app { padding: 20px 16px 40px; }
  #app:has(.home-shell) { padding: 21px 17px 35px; }
  .adventure-header { gap: 15px; margin-bottom: 19px; padding-bottom: 17px; }
  .brand-mark { width: 47px; height: 51px; border-radius: 14px; }
  .brand-mark .penguin-face { width: 36px; height: 40px; min-width: 36px; }
  .adventure-brand { gap: 10px; }
  .brand-copy small { font-size: 0.52rem; }
  .brand-copy strong { font-size: 1.1rem; }
  .adventure-status { width: 100%; justify-content: space-between; gap: 9px; }
  .adventure-xp { display: block; flex: 1; min-width: 60px; max-width: 180px; }
  .adventure-level { font-size: 0.72rem; padding: 4px 9px; min-height: 34px; }
  .adventure-level b { font-size: 0.96rem; }
  .adventure-streak { font-size: 0.68rem; padding: 4px 10px; min-height: 34px; }
  .adventure-streak b { font-size: 0.9rem; }
  .adventure-hero { border-radius: 21px; min-height: 312px; margin-bottom: 23px; }
  .adventure-hero-copy { width: 66%; padding: 24px 0 24px 21px; }
  .adventure-eyebrow { font-size: 0.52rem; margin-bottom: 13px; padding: 3px 7px; letter-spacing: 0.075em; }
  .adventure-hero h1 { font-size: 1.75rem; line-height: 1.45; letter-spacing: 0.015em; }
  .adventure-hero-copy > p { font-size: 0.65rem; margin: 10px 0 17px; line-height: 1.85; }
  .adventure-start .big-btn.start { min-height: 58px; padding: 10px 11px; gap: 7px; border-radius: 12px; }
  .adventure-start .big-btn.start .bb-text b { font-size: 0.8rem; }
  .adventure-start .big-btn.start .bb-text small { font-size: 0.56rem; }
  .adventure-start .big-btn.start .bb-emoji { font-size: 1.1rem; }
  .adventure-start .big-btn.start .bb-arrow { font-size: 0.92rem; }
  .adventure-art { width: 47%; right: -7%; }
  .adventure-hero-foot { padding: 10px 15px; font-size: 0.57rem; gap: 4px 9px; }
  .today-card { padding: 19px 15px; border-radius: 20px; }
  .today-title { font-size: 0.96rem; }
  .today-count { font-size: 0.65rem; padding: 3px 7px; }
  .today-msg { font-size: 0.69rem; }
  .mission-grid { gap: 8px; }
  .mission-card { min-height: 137px; padding: 14px 3px 11px; border-radius: 13px; gap: 5px; }
  .mission-card .mc-icon { font-size: 1.78rem; }
  .mission-card .mc-name { font-size: 0.8rem; }
  .mission-card .mc-sub { font-size: 0.58rem; }
  .mission-card .mc-prize { font-size: 0.55rem; }
  .mission-note { font-size: 0.58rem; }
  .section-heading { gap: 8px; margin-bottom: 12px; }
  .section-heading h2 { font-size: 0.99rem; }
  .section-heading small { font-size: 0.6rem; }
  .home-shell .grade-pick { gap: 9px; }
  .home-shell .grade-tile { border-radius: 15px; padding: 88px 9px 11px; }
  .home-shell .gt-art { height: 76px; }
  .home-shell .gt-name { font-size: 0.86rem; }
  .gt-caption { font-size: 0.56rem; }
  .gt-bottom { margin-top: 9px; }
  .home-shell .gt-ring { width: 33px; height: 33px; }
  .home-shell .gt-pct { font-size: 0.53rem; }
  .gt-arrow { width: 23px; height: 23px; font-size: 0.8rem; }
  .home-side { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-side .companion-card { grid-row: auto; }
  .companion-card { padding: 20px 22px 15px; }
  .companion-top { text-align: center; }
  .companion-top h2 { font-size: 1.1rem; }
  .companion-portrait { margin: 14px auto; }
  .companion-bubble { max-width: 300px; margin: 0 auto 16px; }
  .companion-collection { max-width: 310px; margin: 0 auto; }
  .companion-badges { max-width: 310px; margin: 8px auto 0; }
  .home-side .week-card, .home-side .world-card { padding: 19px; }
  .week-title { font-size: 0.94rem; }
  .wk-cell { padding: 9px 0; }
  .wk-cell .wk-lab { font-size: 0.67rem; }
  .wk-cell .wk-mark { font-size: 0.92rem; }
  .week-note, .world-note { font-size: 0.7rem; }
  .home-tools .menu-tile { min-height: 80px; }
  .home-tools .menu-tile .mt-name { font-size: 0.74rem; }
  .home-tools .menu-tile .mt-sub { font-size: 0.62rem; }
}
@media (max-width: 380px) {
  #app:has(.home-shell) { padding-left: 12px; padding-right: 12px; }
  .brand-copy strong { font-size: 1.04rem; }
  .adventure-hero-copy { width: 70%; padding-left: 17px; }
  .adventure-hero h1 { font-size: 1.5rem; }
  .adventure-hero-copy > p { font-size: 0.6rem; }
  .adventure-hero { min-height: 292px; }
  .adventure-art { right: -11%; width: 49%; }
  .adventure-start .big-btn.start .bb-text b { font-size: 0.74rem; }
  .adventure-start .big-btn.start .bb-text small { font-size: 0.5rem; }
  .adventure-start .big-btn.start .bb-emoji { font-size: 0.9rem; }
  .today-card { padding-left: 12px; padding-right: 12px; }
  .today-title { font-size: 0.86rem; }
  .mission-card .mc-name { font-size: 0.74rem; }
  .mission-card .mc-sub { font-size: 0.53rem; }
  .mission-card .mc-prize { font-size: 0.51rem; }
  .home-shell .grade-pick { gap: 7px; }
  .home-shell .grade-tile { padding-left: 7px; padding-right: 7px; }
  .section-heading small { font-size: 0.52rem; }
  .gt-caption { font-size: 0.51rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .mission-card, .home-shell .grade-tile, .companion-collection, .home-tools .menu-tile { transition: none; }
  .companion-portrait .penguin-face { animation: none; }
}

/* v2.64.0: 固定ピクセルで描いたマスコットを部品ごと崩さず拡大 */
.brand-mark .penguin-face { width: 56px; height: 60px; min-width: 56px; scale: 0.73; }
.companion-portrait { align-items: center; padding: 10px 0 0; }
.companion-portrait .penguin-face { width: 56px; height: 60px; min-width: 56px; scale: 1.7; }
.companion-portrait > span { position: absolute; right: 5px; top: 13px; color: #cda439; font-size: 1rem; }
.companion-label { display: block; font-size: 0.65rem; color: #7b836b; }
.companion-badges { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.companion-badges b { font-size: 0.67rem; }
.companion-legend { font-size: 0.65rem; color: #89602e; padding-top: 6px; }
.adventure-level { gap: 10px; min-height: 42px; background: #fffef8; border-color: var(--line); }
.adventure-level b { margin: 0; font-size: 0.89rem; }
.adventure-xp { position: relative; display: block; width: 86px; min-width: 0; height: 7px; background: #e4ebdb; overflow: hidden; border-radius: 99px; }
.adventure-xp i { display: block; height: 100%; border-radius: inherit; background: #75a16b; }
.adventure-eyebrow i { width: 6px; height: 6px; background: #6e965a; border-radius: 50%; }
.mc-step { position: absolute; left: 9px; top: 7px; color: #8e9e7d; font-size: 0.53rem; font-weight: 900; font-family: "Trebuchet MS", sans-serif; }
.mission-review .mc-step { color: #ba9885; }
.mission-game .mc-step { color: #bca366; }
.today-goal { padding: 12px 13px 4px; border-top: 1px solid #e4eadb; background: #fafbf5; border-radius: 0 0 10px 10px; margin-bottom: 6px; }
.today-goal .today-sub { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 0.65rem; }
.today-goal .today-sub b { color: #617846; }
.today-goal + .big-btn { margin-top: 15px; }
.home-tools { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid #d8e2cf; }
.home-tools > button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 9px; min-height: 48px; padding: 11px 5px; border-bottom: 1px solid #d8e2cf; background: transparent; color: #55684b; font-size: 0.73rem; font-weight: 800; text-align: left; }
.home-tools > button b { color: #819271; font-size: 0.65rem; white-space: nowrap; }
.adventure-footer { padding-top: 36px; text-align: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.025em; color: #829075; }

/* CSSだけで描く「ことばの島」。画像通信なしで動作する */
.adventure-art { top: 11px; right: -4%; width: 46%; height: calc(100% - 54px); }
.adv-sun { position: absolute; top: 19px; right: 21%; width: 44px; height: 44px; background: #f5ca58; border: 2px solid #dfb750; border-radius: 50%; box-shadow: 0 0 0 10px #f1df9e50; }
.adv-cloud { position: absolute; width: 62px; height: 15px; background: #fbfcec; border-radius: 50px; }
.adv-cloud::before, .adv-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; bottom: 3px; }
.adv-cloud::before { width: 24px; height: 23px; left: 12px; }
.adv-cloud::after { width: 20px; height: 18px; right: 9px; }
.adv-cloud.c1 { left: 12%; top: 39px; transform: scale(0.8); }
.adv-cloud.c2 { right: -8px; top: 100px; transform: scale(0.7); }
.adv-island { position: absolute; left: -4%; bottom: 14px; width: 95%; height: 109px; border-radius: 50%; background: #65975d; border-bottom: 13px solid #b9a377; box-shadow: 0 8px 0 #e6d6ab, 0 16px 0 -4px #d2dabc; filter: saturate(calc(0.5 + var(--warm, 1) * 0.5)); }
.adv-island::before { content: ""; position: absolute; inset: 5px 7px 3px; border-radius: 50%; border: 1px dashed #bcd59b; }
.adv-hill { position: absolute; border-radius: 70% 70% 0 0; }
.adv-hill.back { width: 62%; height: 88px; left: 7%; top: -47px; background: #9fbc77; transform: rotate(-7deg); }
.adv-hill.front { width: 65%; height: 66px; right: 1%; top: -24px; background: #81a963; transform: rotate(9deg); }
.adv-path { position: absolute; z-index: 1; top: 13px; left: 25%; width: 53%; height: 39px; border: 14px solid #e9dfa9; border-left-color: transparent; border-top-color: transparent; border-radius: 20% 80% 75% 10%; transform: rotate(5deg); }
.adv-tree { position: absolute; width: 5px; height: 32px; background: #7f7f4b; border-radius: 3px; }
.adv-tree::before { content: ""; position: absolute; left: -13px; bottom: 17px; width: 30px; height: 42px; border-radius: 55% 55% 45% 45%; background: #426f43; box-shadow: inset -8px 0 0 #365e38; }
.adv-tree.t1 { top: -40px; left: 18%; transform: rotate(-7deg); }
.adv-tree.t2 { top: -24px; right: 14%; transform: scale(0.77) rotate(8deg); }
.adv-tree.t2::before { background: #547d4b; }
.adv-flag { position: absolute; top: -61px; right: 25%; height: 47px; width: 4px; border-radius: 2px; background: #8b8154; transform: rotate(8deg); }
.adv-flag::after { content: ""; position: absolute; top: 1px; left: 4px; width: 24px; height: 19px; background: #dc895e; clip-path: polygon(0 0, 100% 13%, 75% 53%, 100% 100%, 0 91%); }
.adv-penguin { position: absolute; z-index: 4; left: 37%; bottom: 81px; width: 56px; height: 60px; transform: scale(2.05); transform-origin: center bottom; }
.adv-penguin .penguin-face { filter: drop-shadow(0 4px 1px #3c654127); }
.home-shell .pg-body { background: #314b4c; }
.home-shell .pg-wing { background: #2b4445; }
.home-shell .pg-belly { background: #fffdf0; }
.home-shell .pg-beak, .home-shell .pg-foot { background: #eab444; }
.home-shell .pg-cheek { background: #e49380; }
.adv-word { position: absolute; z-index: 5; padding: 4px 10px; border: 1.5px solid #7b9771; border-radius: 8px; color: #547746; background: #fffef5; box-shadow: 0 3px 0 #c2cfae; font-size: 0.9rem; font-weight: 900; line-height: 1.4; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.adv-word.w1 { left: 9%; top: 88px; transform: rotate(-12deg); }
.adv-word.w2 { right: 3%; bottom: 118px; transform: rotate(10deg); background: #fff0bf; color: #88703b; border-color: #c3aa67; box-shadow: 0 3px 0 #decd94; font-size: 0.75rem; }
.adv-pals { position: absolute; z-index: 5; left: 8%; right: 12%; bottom: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.adv-pal { font-size: 1.1rem; line-height: 1; filter: drop-shadow(0 2px 1px #35583833); }
.adv-sleep { font-size: 0.75rem; font-weight: 800; letter-spacing: 4px; color: #d7e3bc; }
.adv-spark { position: absolute; z-index: 5; color: #e7b343; font-size: 1.1rem; }
.adv-spark.s1 { left: 17%; top: 136px; transform: rotate(-10deg); }
.adv-spark.s2 { right: 19%; top: 72px; font-size: 0.77rem; }
@media (hover: hover) {
  .home-tools > button:hover { background: #eff3e6; }
}
@media (max-width: 1000px) and (min-width: 900px) {
  .adv-penguin { transform: scale(1.8); left: 35%; bottom: 81px; }
  .adv-word.w1 { left: 1%; font-size: 0.76rem; }
  .adv-word.w2 { right: 7%; font-size: 0.66rem; }
}
@media (max-width: 899px) {
  .adventure-xp { display: block; width: 63px; }
  .adventure-level { gap: 8px; }
}
@media (max-width: 640px) {
  .brand-mark .penguin-face { width: 56px; height: 60px; min-width: 56px; scale: 0.64; }
  .adventure-status { width: auto; }
  .adventure-level { min-height: 36px; gap: 0; }
  .adventure-xp { display: none; }
  .adventure-hero { min-height: 320px; }
  .adventure-hero-copy { width: 100%; padding: 23px 19px 23px; }
  .adventure-hero h1 { font-size: 1.7rem; line-height: 1.5; }
  .adventure-hero-copy > p { width: 64%; font-size: 0.66rem; margin-top: 12px; }
  .adventure-start { width: 63%; max-width: 255px; }
  .adventure-art { top: 108px; right: -7%; width: 47%; height: calc(100% - 153px); }
  .adv-sun { width: 27px; height: 27px; top: -29px; right: 23%; box-shadow: 0 0 0 6px #f1df9e50; }
  .adv-cloud.c1 { top: -29px; left: 1%; transform: scale(0.58); }
  .adv-cloud.c2 { display: none; }
  .adv-island { height: 69px; bottom: 13px; width: 100%; border-bottom-width: 8px; box-shadow: 0 6px 0 #e6d6ab, 0 11px 0 -3px #d2dabc; }
  .adv-hill.back { height: 53px; top: -27px; }
  .adv-hill.front { height: 38px; top: -16px; }
  .adv-path { top: 9px; border-width: 9px; height: 25px; }
  .adv-tree.t1 { top: -30px; left: 13%; transform: scale(0.56); }
  .adv-tree.t2 { top: -16px; right: 20%; transform: scale(0.5); }
  .adv-flag { top: -37px; right: 21%; transform: scale(0.7) rotate(8deg); }
  .adv-penguin { left: 29%; bottom: 47px; transform: scale(1.45); }
  .adv-word.w1 { top: 2px; left: 0; font-size: 0.64rem; padding: 3px 7px; }
  .adv-word.w2 { display: none; }
  .adv-pals { gap: 5px; bottom: 28px; left: 2%; right: 9%; }
  .adv-pal { font-size: 0.8rem; }
  .adv-spark.s1 { left: 10%; top: 49px; font-size: 0.8rem; }
  .adv-spark.s2 { right: 28%; top: -5px; font-size: 0.7rem; }
  .today-goal { padding-left: 9px; padding-right: 9px; }
  .adventure-footer { padding-top: 20px; font-size: 0.58rem; }
}
@media (max-width: 460px) {
  .adventure-header { column-gap: 10px; }
  .adventure-streak { padding-left: 6px; padding-right: 6px; gap: 3px; }
  .adventure-level { padding-left: 7px; padding-right: 7px; }
  .adventure-level b { font-size: 0.73rem; }
  .adventure-status { gap: 6px; }
  .brand-copy strong { font-size: 0.92rem; }
  .brand-copy small { font-size: 0.47rem; letter-spacing: 0.04em; }
  .brand-mark { width: 39px; height: 44px; border-radius: 12px; }
  .brand-mark .penguin-face { scale: 0.55; }
  .adventure-brand { gap: 8px; }
  .adventure-hero h1 { font-size: 1.57rem; }
  .adventure-hero-copy > p { font-size: 0.64rem; }
  .adventure-hero { min-height: 310px; }
}
@media (max-width: 380px) {
  .adventure-header { row-gap: 12px; }
  .adventure-status { margin-left: auto; }
  .brand-copy strong { font-size: 0.9rem; }
  .adventure-streak { font-size: 0.62rem; }
  .adventure-streak b { font-size: 0.8rem; }
  .adventure-hero h1 { font-size: 1.45rem; }
  .adventure-hero-copy { width: 100%; padding-left: 16px; padding-right: 15px; }
  .adventure-hero-copy > p { font-size: 0.58rem; }
  .adventure-art { right: -9%; width: 49%; top: 109px; }
  .adventure-start { width: 64%; }
  .adv-penguin { transform: scale(1.3); bottom: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; opacity: 1; transform: none; }
  .adventure-art .penguin-face { animation: none; }
}

/* v2.64.0: 初回の物語と、小さい画面でも読める補助ラベル */
.story-screen { background: #264849; border: 2px solid #1b3538; box-shadow: 0 5px 0 #b9cabc; border-radius: 24px; }
.story-text { font-size: 1rem; line-height: 1.95; }
.story-text b { color: #f6d275; }
.story-screen .btn-sub { background: #3d6060; border-color: #67817a; color: #fffdf2; }
.adventure-complete { padding: 12px; border-radius: 12px; background: #f7f5cc; border: 2px solid #cfbe77; color: #79602d; font-size: 0.81rem; font-weight: 800; }
.adventure-start .big-btn.start .bb-text b { font-size: max(15px, 0.96rem); }
.adventure-start .big-btn.start .bb-text small { font-size: 11px; line-height: 1.5; margin-top: 3px; }
.mission-card .mc-name { font-size: max(13px, 0.9rem); }
.mission-card .mc-sub, .mission-card .mc-prize { font-size: 11px; line-height: 1.45; }
.mission-card { min-height: 156px; }
.adventure-hero-copy > p { font-size: max(11px, 0.77rem); }
.adventure-hero-foot { font-size: 11px; }
.companion-label, .gt-caption, .today-goal .today-sub, .section-heading small { font-size: 11px; }
.companion-top small { font-size: 10px; }
.companion-bubble { font-size: 12px; }
.companion-collection, .companion-collection b, .companion-badges, .companion-badges b { font-size: 12px; }
.week-note, .world-note { font-size: 11px; }
.home-tools > button { font-size: 12px; }
.home-tools > button b { font-size: 11px; }
.today-card .big-btn .bb-text small { font-size: 11px; }
.home-shell .gt-pct { font-size: 10px; }
@media (max-width: 640px) {
  .adventure-hero { min-height: 332px; }
  .adventure-hero-copy > p { margin-bottom: 15px; line-height: 1.75; }
  .adventure-start .big-btn.start .bb-text b { font-size: 15px; }
  .adventure-start .big-btn.start .bb-text small { font-size: 11px; }
  .mission-card { min-height: 154px; }
  .mission-card .mc-name { font-size: 13px; }
  .mission-card .mc-sub, .mission-card .mc-prize { font-size: 11px; }
  .mission-card .mc-prize { margin-top: auto; }
  .home-shell .gt-name { font-size: 14px; }
  .gt-caption { min-height: 34px; font-size: 11px; }
  .section-heading { flex-wrap: wrap; gap: 2px 10px; }
  .section-heading h2 { font-size: 16px; }
  .section-heading small { font-size: 11px; }
  .today-msg { font-size: 11px; }
  .today-count { font-size: 11px; }
  .today-goal .today-sub { font-size: 11px; }
  .adventure-hero-foot { font-size: 10px; }
  .adventure-art { top: 146px; height: calc(100% - 195px); }
  .adventure-hero { min-height: 366px; }
}

/* 最初に目にする物語も、ホームと同じ紙のカードにそろえる。 */
.story-screen { background: var(--card); border: 2px solid var(--line); border-radius: 24px; padding: 24px 18px; box-shadow: var(--shadow); }
.story-text { color: var(--text); }
.story-dot.on { background: var(--primary); }
@media (max-width: 640px) {
  .adventure-art .adv-word { display: none; }
  .adventure-start .bb-emoji { display: none; }
}
/* ============================================================
   v2.65.0 — ペンギン先生。スカーフとことばのバッグを持つ相棒。
   160×176の原画を56×60に縮小し、既存の各画面の外枠を維持する。
   すべてCSS。気分はdata-mood、拡大は外枠のscaleで管理する。
   ============================================================ */
.penguin-face { animation: none; filter: none; isolation: isolate; }
.pen-art { position: absolute; top: 0; left: 0; width: 160px; height: 176px; transform: scale(0.34); transform-origin: top left; pointer-events: none; }
.pen-pose { position: relative; width: 160px; height: 176px; transform: rotate(-3deg); transform-origin: 50% 92%; animation: penBreathe 5s ease-in-out infinite; }
.pen-pose > span { position: absolute; display: block; box-sizing: border-box; }
.pen-shadow { left: 33px; top: 164px; width: 100px; height: 10px; border-radius: 50%; background: #284d4724; filter: blur(2px); }
.pen-body { left: 27px; top: 19px; width: 108px; height: 145px; border: 3px solid #254452; border-radius: 49% 49% 44% 44% / 42% 42% 51% 51%; background: linear-gradient(120deg, #54788a 0%, #365d70 38%, #244759 80%); box-shadow: inset 4px 1px 0 #71919b66, inset -4px -3px 0 #16394966; }
.pen-body::before { content: ""; position: absolute; left: 16px; top: 7px; width: 33px; height: 9px; border-radius: 50%; background: #b1d2d02e; transform: rotate(-22deg); }
.pen-tuft { left: 73px; top: 9px; width: 18px; height: 27px; border-radius: 80% 10% 50% 20%; background: #365b6d; border-left: 3px solid #254452; transform: rotate(-14deg); }
.pen-tuft::before { content: ""; position: absolute; width: 14px; height: 22px; left: -11px; top: 4px; border-radius: 80% 10% 50% 20%; background: #446b7c; transform: rotate(-26deg); }
.pen-belly { left: 46px; top: 85px; width: 72px; height: 69px; border-radius: 46% 48% 45% 45%; background: linear-gradient(120deg, #fffdf2 35%, #ebe6ce); box-shadow: inset -3px -4px 0 #d1d7c84d; }
.pen-mask { left: 40px; top: 42px; width: 82px; height: 71px; border-radius: 46% 46% 45% 45%; background: linear-gradient(120deg, #fffef5 40%, #f2efdc); }
.pen-mask::before { content: ""; position: absolute; left: 33px; top: -2px; width: 17px; height: 13px; border-radius: 0 0 65% 65%; background: #365c6e; }
.pen-eye { top: 64px; width: 14px; height: 19px; border-radius: 48%; background: linear-gradient(130deg, #234454, #122c3b); box-shadow: 0 2px 0 #dcdccb; transform-origin: center; animation: penBlink 5.6s ease-in-out infinite; }
.pen-eye.left { left: 52px; }
.pen-eye.right { left: 98px; }
.pen-eye::before { content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 6px; background: #fff; border-radius: 50%; }
.pen-eye::after { content: ""; position: absolute; right: 2px; bottom: 3px; width: 3px; height: 3px; background: #8ebdbb; border-radius: 50%; }
.pen-cheek { top: 85px; width: 17px; height: 9px; border-radius: 50%; background: radial-gradient(ellipse, #eea292 30%, #edb49b75 75%); }
.pen-cheek.left { left: 43px; transform: rotate(10deg); }
.pen-cheek.right { left: 104px; transform: rotate(-10deg); }
.pen-beak { left: 71px; top: 83px; width: 24px; height: 16px; border: 2px solid #dc8b36; border-radius: 45% 45% 60% 60%; background: linear-gradient(#ffd579, #f5b34c); box-shadow: 0 2px 0 #d9c5a06b; }
.pen-beak::before { content: ""; position: absolute; left: 5px; top: 1px; width: 9px; height: 3px; background: #ffedaf; border-radius: 50%; }
.pen-mouth { position: absolute; left: 3px; top: 5px; width: 14px; height: 5px; border-bottom: 2px solid #ae6a2d; border-radius: 0 0 60% 60%; }
.pen-feet { top: 152px; width: 40px; height: 17px; border: 2px solid #d08c3c; border-radius: 55% 55% 40% 40%; background: linear-gradient(155deg, #ffd07b, #eda843); box-shadow: inset 1px 3px 0 #ffdf9680; }
.pen-feet.left { left: 32px; transform: rotate(-10deg); }
.pen-feet.right { left: 90px; transform: rotate(8deg); }
.pen-feet::after { content: ""; position: absolute; width: 1px; height: 4px; bottom: 2px; left: 12px; background: #d28b3660; box-shadow: 9px 0 #d28b3660; }
.pen-bag { left: 12px; top: 107px; width: 37px; height: 44px; border: 3px solid #9c704d; border-radius: 9px 9px 12px 12px; background: linear-gradient(110deg, #dcac70, #bd8758); transform: rotate(-9deg); box-shadow: inset 2px 2px 0 #edc891; }
.pen-bag::before { content: ""; position: absolute; left: 1px; top: 0; width: 29px; height: 16px; border-bottom: 2px solid #9c704d; border-radius: 4px 4px 8px 8px; background: #e9bd83; }
.pen-bag::after { content: ""; position: absolute; left: 13px; top: 12px; width: 6px; height: 8px; border-radius: 2px; background: #997449; box-shadow: inset 0 2px #f1d298; }
.pen-book { left: 18px; top: 96px; width: 26px; height: 26px; border: 3px solid #48796e; border-left-width: 5px; border-radius: 3px; background: repeating-linear-gradient(0deg, #fff8dc 0 3px, #e4d8b8 3px 4px); transform: rotate(-12deg); }
.pen-scarf-tail { left: 104px; top: 112px; width: 21px; height: 30px; border: 2px solid #b45140; border-top: 0; border-radius: 3px 5px 2px 4px; background: linear-gradient(100deg, #eb8867, #cf624c); transform: rotate(-17deg); }
.pen-scarf-tail::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 5px; height: 2px; background: #fbd1a6; box-shadow: 0 3px #fbd1a650; }
.pen-scarf { left: 35px; top: 105px; width: 94px; height: 18px; border: 2px solid #b65342; border-radius: 30% 30% 42% 42%; background: linear-gradient(#f39a78, #de7559); transform: rotate(-3deg); box-shadow: 0 3px 0 #21445128; }
.pen-scarf::before { content: ""; position: absolute; left: 8px; right: 16px; top: 3px; border-top: 1px dashed #ffdcacbb; }
.pen-knot { left: 104px; top: 106px; width: 19px; height: 20px; border: 2px solid #b65342; border-radius: 7px; background: #ef9974; transform: rotate(8deg); }
.pen-wing { width: 25px; height: 58px; border: 3px solid #234553; border-radius: 65% 45% 55% 65%; background: linear-gradient(100deg, #4b7280, #2b4e5d); box-shadow: inset 2px 0 0 #72989b66; }
.pen-wing.left { left: 23px; top: 95px; height: 47px; transform: rotate(-17deg); transform-origin: 70% 12%; }
.pen-wing.right { left: 117px; top: 94px; transform: rotate(-145deg); transform-origin: 50% 12%; animation: penWave 5s ease-in-out infinite; }
.pen-badge { left: 106px; top: 110px; width: 14px; height: 14px; background: #ffe3a0; clip-path: polygon(50% 0, 62% 34%, 100% 38%, 72% 61%, 80% 100%, 50% 79%, 18% 100%, 28% 62%, 0 38%, 38% 34%); }
@keyframes penBreathe { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-2px); } }
@keyframes penBlink { 0%,43%,49%,100% { transform: scaleY(1); } 46% { transform: scaleY(.12); } }
@keyframes penWave { 0%,65%,100% { transform: rotate(-145deg); } 73%,89% { transform: rotate(-128deg); } 81%,95% { transform: rotate(-157deg); } }
/* 表情を状態に結びつける。動きなしでも「喜ぶ／見守る」の違いは残る。 */
.penguin-face[data-mood="listen"] .pen-pose { transform: rotate(4deg); animation: none; }
.penguin-face[data-mood="listen"] .pen-wing.right { transform: rotate(18deg); animation: none; }
.penguin-face[data-mood="encourage"] .pen-pose { transform: rotate(-7deg); animation: none; }
.penguin-face[data-mood="encourage"] .pen-wing.right { transform: rotate(-90deg); animation: none; }
.penguin-face[data-mood="cheer"] .pen-eye { top: 68px; height: 12px; border-top: 4px solid #234454; border-radius: 60% 60% 0 0; background: none; box-shadow: none; animation: none; }
.penguin-face[data-mood="cheer"] .pen-eye::before, .penguin-face[data-mood="cheer"] .pen-eye::after { display: none; }
.penguin-face[data-mood="cheer"] .pen-cheek { opacity: 1; width: 19px; }
.penguin-face[data-mood="cheer"] .pen-wing.left { transform: rotate(135deg); }
.penguin-face[data-mood="cheer"] .pen-wing.right { transform: rotate(-135deg); animation: none; }
.penguin-face[data-mood="cheer"] .pen-beak { height: 19px; border-radius: 40% 40% 60% 60%; }
.penguin-face[data-mood="cheer"] .pen-mouth { top: 5px; height: 7px; border: none; background: #a46636; border-radius: 20% 20% 60% 60%; }
.penguin-face[data-mood="cheer"] .pen-pose { animation: penHappy .65s ease-in-out 2; transform: rotate(-3deg); }
@keyframes penHappy { 0%,100% { transform: translateY(0) rotate(-3deg); } 45% { transform: translateY(-8px) rotate(3deg); } }
/* ホームでは表情が読める大きさに。外枠の座標はゲームから独立。 */
.companion-portrait { width: 170px; height: 163px; padding: 0; border: 1px solid #edd999; background: radial-gradient(ellipse at 45% 36%, #fff8df, #f6e8ac); box-shadow: inset 0 2px 0 #fff9df; overflow: visible; transition: box-shadow .2s; }
.companion-portrait .penguin-face { scale: 2.2; margin-top: 0; }
.companion-portrait:hover { box-shadow: inset 0 2px 0 #fff9df, 0 0 0 5px #f5e3a855; }
.companion-portrait:active { transform: scale(.97); }
.pen-talk-hint { display: block; text-align: center; color: #85794b; font-size: 11px; margin: -1px 0 14px; }
.companion-bubble { min-height: 64px; display: flex; align-items: center; justify-content: center; }
.adv-penguin { transform: scale(2.55); }
.adv-penguin .penguin-face { filter: none; }
@media (max-width: 1050px) and (min-width: 641px) { .adv-penguin { transform: scale(2.2); } }
@media (max-width: 640px) { .adv-penguin { transform: scale(1.8); } }
@media (max-width: 380px) { .adv-penguin { transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .pen-pose, .pen-eye, .pen-wing, .penguin-face[data-mood] .pen-pose { animation: none !important; }
  .companion-portrait { transition: none; }
}
/* 絵だけを入れ替える。ジャンプの外枠と移動量は従来どおり。 */
.runner-body { position: relative; height: 41.6px; }
.runner-body .penguin-face { position: absolute; left: -1px; bottom: 0; scale: .7; transform-origin: 50% 100%; }
.runner-body .pen-shadow { display: none; }
.sea-penguin { width: 44px; height: 54px; }
.sea-penguin .penguin-face { position: absolute; left: -6px; bottom: 0; scale: .78; transform-origin: 50% 100%; }
.boss-hero { width: 56px; height: 60px; }
.boss-hero .penguin-face { scale: .95; transform-origin: 50% 100%; }
.sc-hero { width: 50px; height: 54px; }
.sc-hero .penguin-face { scale: .9; transform-origin: 0 100%; }


/* ============================================================
   🧱 ブロック・ピクセル UI(v2.66.0)
   ユーザー指摘「ChatGPTに見た目を良くしてもらったがイマイチ。マイクラやロブロックスの
   ようにゲームっぽく、できるだけ文字を使わないで」→ 3案からユーザーが「ブロック・ピクセル」を選択。
   方針:
   ・**この節はファイルの最後に置く**(あとに書いたものが勝つ = 既存の部品を上書きする)。
     ゲームのステージ(.game-stage 内)はさわらない。
   ・背景は明るい砂岩、HUD/ホットバー/景色の枠だけ暗い土。既存の濃い文字色が読めなくなる事故を防ぐ
   ・アイコンは**すべて CSS 内の SVG data-URI のドット絵**(.px-ico)。画像ファイル・外部フォント・通信なし
   ・文字は「数字」と「3〜4文字のラベル」まで。文章はペンギンのセリフだけ
   ・ボタンは石ブロック: 3px の濃い縁 + 内側のベベル + 下に 6px の厚み。押すと沈む
   ============================================================ */
:root {
  --blk-ink: #1f160e;          /* いちばん濃い輪郭 */
  --blk-dirt: #6b4a2b;         /* 土 */
  --blk-dirt-d: #3f2a16;
  --blk-sand: #e8dcc0;         /* 背景(砂岩) */
  --blk-paper: #f7efdc;        /* パネル */
  --blk-paper-d: #d9cba6;
  --blk-stone: #8d8d8d;        /* 石ボタン */
  --blk-stone-l: #c6c6c6;
  --blk-stone-d: #575757;
  --blk-grass: #5bc043;
  --blk-grass-d: #2f7a25;
  --blk-gold: #ffd23f;
  --blk-gold-d: #b8871a;
  --blk-water: #3d8bff;
  --blk-text: #2a2118;
  --px: 3px;                   /* ドット絵1マスの大きさ */
}
/* 背景: 砂岩のドット模様。ふわふわ背景と流れる色はやめる */
body {
  background: var(--blk-sand);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%),
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 8px 8px;
  animation: none;
  color: var(--blk-text);
}
.bg-decor { display: none; }
#app { padding: 12px 12px 40px; }
body.has-hotbar #app { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* ---- ドット絵アイコン ---- */
.px-ico {
  display: inline-block; flex-shrink: 0;
  width: calc(var(--px) * 10); height: calc(var(--px) * 10);
  background-size: 100% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
  vertical-align: middle;
}
.px-ico.xl { --px: 5px; } .px-ico.lg { --px: 4px; } .px-ico.sm { --px: 2.4px; } .px-ico.xs { --px: 2px; }

/* ---- パネル(紙) ---- */
.pxl {
  background: var(--blk-paper);
  border: 4px solid var(--blk-ink);
  border-radius: 0;
  box-shadow: inset 4px 4px 0 #fffaf0, inset -4px -4px 0 var(--blk-paper-d), 0 6px 0 var(--blk-ink);
  padding: 12px;
  margin-bottom: 14px;
}
.pxnum { font-family: "Segoe UI", "Verdana", sans-serif; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---- 石ボタン ---- */
.pxb {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blk-stone);
  color: #fff;
  border: 3px solid var(--blk-ink);
  border-radius: 0;
  box-shadow: inset 3px 3px 0 var(--blk-stone-l), inset -3px -3px 0 var(--blk-stone-d), 0 6px 0 var(--blk-ink);
  font: inherit; font-weight: 900; letter-spacing: .04em;
  text-shadow: 2px 2px 0 rgba(0,0,0,.55);
  padding: 10px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s, box-shadow .06s;
}
.pxb:active { transform: translateY(4px); box-shadow: inset 3px 3px 0 var(--blk-stone-l), inset -3px -3px 0 var(--blk-stone-d), 0 2px 0 var(--blk-ink); }
.pxb.g { background: var(--blk-grass); box-shadow: inset 3px 3px 0 #9ae87f, inset -3px -3px 0 var(--blk-grass-d), 0 6px 0 var(--blk-ink); }
.pxb.g:active { box-shadow: inset 3px 3px 0 #9ae87f, inset -3px -3px 0 var(--blk-grass-d), 0 2px 0 var(--blk-ink); }
.pxb.y { background: var(--blk-gold); color: var(--blk-text); text-shadow: 1px 1px 0 rgba(255,255,255,.6); box-shadow: inset 3px 3px 0 #ffe88f, inset -3px -3px 0 var(--blk-gold-d), 0 6px 0 var(--blk-ink); }
.pxb.y:active { box-shadow: inset 3px 3px 0 #ffe88f, inset -3px -3px 0 var(--blk-gold-d), 0 2px 0 var(--blk-ink); }
.pxb.b { background: var(--blk-water); box-shadow: inset 3px 3px 0 #8fc2ff, inset -3px -3px 0 #1f4f9e, 0 6px 0 var(--blk-ink); }
.pxb.b:active { box-shadow: inset 3px 3px 0 #8fc2ff, inset -3px -3px 0 #1f4f9e, 0 2px 0 var(--blk-ink); }
.pxb.r { background: #e8443a; box-shadow: inset 3px 3px 0 #ff8a80, inset -3px -3px 0 #8e1f18, 0 6px 0 var(--blk-ink); }
.pxb.r:active { box-shadow: inset 3px 3px 0 #ff8a80, inset -3px -3px 0 #8e1f18, 0 2px 0 var(--blk-ink); }
.pxb.wide { width: 100%; min-height: 50px; margin-bottom: 14px; }

/* ---- スロット(インベントリのマス) ---- */
.slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  aspect-ratio: 1 / 1;
  background: #8a8a8a;
  border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 #5a5a5a, inset -3px -3px 0 #b9b9b9;
  color: #fff; font: inherit; font-weight: 900;
  padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.slot .n { position: absolute; right: 4px; bottom: 1px; font-size: .78rem; text-shadow: 2px 2px 0 var(--blk-ink); font-family: "Segoe UI", Verdana, sans-serif; line-height: 1.2; }
.slot .badge { position: absolute; left: -6px; top: -6px; }
.slot.on { background: var(--blk-grass); box-shadow: inset 3px 3px 0 var(--blk-grass-d), inset -3px -3px 0 #9ae87f; }
.slot.gold { background: var(--blk-gold); box-shadow: inset 3px 3px 0 var(--blk-gold-d), inset -3px -3px 0 #ffe88f; }
.slot.empty { opacity: .45; }
.slot .lab { font-size: .62rem; letter-spacing: .02em; text-shadow: 1px 1px 0 var(--blk-ink); line-height: 1; }

/* ============ HUD(いちばん上) ============ */
.hud {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  margin: -12px -12px 12px;         /* 画面の左右いっぱいに */
  background: var(--blk-dirt-d);
  border-bottom: 4px solid var(--blk-ink);
  box-shadow: inset 0 -4px 0 #2a1a0c;
  color: #fff;
}
.hud .hud-pen { width: 42px; height: 46px; position: relative; flex-shrink: 0; }
.hud .hud-pen .penguin-face { scale: .75; transform-origin: 0 0; position: absolute; left: 0; top: 0; filter: none; animation: none; }
.hud .hud-lv { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hud .hud-lvn { font-weight: 900; font-size: .82rem; text-shadow: 2px 2px 0 var(--blk-ink); letter-spacing: .04em; }
.hud .xpbar { display: block; height: 12px; background: #1b1b1b; border: 2px solid var(--blk-ink); box-shadow: inset 0 0 0 1px #4d4d4d; position: relative; overflow: hidden; }
.hud .xpbar i { display: block; height: 100%; background: var(--blk-grass); box-shadow: inset 0 3px 0 #9ae87f; }
.hud .xpbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.35) 9px 11px); }
.hud .hud-chip { display: flex; align-items: center; gap: 3px; font-weight: 900; font-size: .92rem; text-shadow: 2px 2px 0 var(--blk-ink); font-family: "Segoe UI", Verdana, sans-serif; }
/* きょうの10語 = ハート10個(数字ではなく絵で見せる) */
.hearts { display: flex; gap: 2px; justify-content: center; margin: 0 0 10px; }
.hearts .px-ico { --px: 1.9px; }
.hearts .px-ico.off { filter: grayscale(1) brightness(.55); }

/* ============ 旅の景色(ブロック版) ============ */
.blk-scene {
  position: relative; height: 168px; overflow: hidden;
  border: 4px solid var(--blk-ink); box-shadow: 0 6px 0 var(--blk-ink);
  margin-bottom: 12px;
  background: linear-gradient(180deg, #4f96f0 0%, #79b7ff 46%, #b9dcff 100%);
  --warm: 1;
}
.bs-sun { position: absolute; right: 18px; top: 16px; width: 22px; height: 22px; background: var(--blk-gold); box-shadow: 0 0 0 3px #ffe88f, 0 0 0 5px rgba(255,220,100,.35); }
.bs-cloud { position: absolute; width: 10px; height: 10px; background: #fff; box-shadow: 8px -8px 0 #fff, 16px -8px 0 #fff, 24px 0 0 #fff, 32px 0 0 #fff, 16px -16px 0 #fff, 8px 0 0 #fff, 16px 0 0 #fff; opacity: .95; }
.bs-cloud.c1 { left: 10%; top: 50px; animation: bsDrift 30s linear infinite; }
.bs-cloud.c2 { left: 58%; top: 32px; opacity: .8; animation: bsDrift 42s linear infinite reverse; }
@keyframes bsDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
/* 丘と地面はブロック。--warm で色がもどる(=ストーリー「ことばを取りもどす旅」) */
.bs-hill, .bs-ground { position: absolute; filter: saturate(calc(.15 + var(--warm) * 1)) brightness(calc(.82 + var(--warm) * .22)); }
.bs-hill { bottom: 34px; height: 44px; background: var(--blk-grass); box-shadow: inset 0 6px 0 #7fdc62, inset 0 -14px 0 var(--blk-dirt); }
.bs-hill.a { left: -6px; width: 46%; clip-path: polygon(0 100%, 0 40%, 18% 40%, 18% 12%, 46% 12%, 46% 0, 74% 0, 74% 22%, 100% 22%, 100% 100%); }
.bs-hill.b { right: -6px; width: 38%; height: 32px; clip-path: polygon(0 100%, 0 46%, 30% 46%, 30% 0, 70% 0, 70% 26%, 100% 26%, 100% 100%); }
.bs-ground {
  left: 0; right: 0; bottom: 0; height: 36px;
  background: var(--blk-dirt);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.14) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.14) 75%),
    linear-gradient(45deg, rgba(0,0,0,.14) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.14) 75%);
  background-size: 12px 12px, 12px 12px; background-position: 0 0, 6px 6px;
  border-top: 10px solid var(--blk-grass);
  box-shadow: inset 0 3px 0 #7fdc62;
}
.bs-flag { position: absolute; right: 22px; bottom: 34px; }
.bs-pen { position: absolute; left: 10px; bottom: 32px; width: 56px; height: 60px; }
.bs-pen .penguin-face { scale: 1.5; transform-origin: 0 100%; filter: none; animation: none; }
.bs-pals { position: absolute; left: 110px; right: 64px; bottom: 38px; display: flex; gap: 6px; align-items: flex-end; font-size: 1.25rem; line-height: 1; }
.bs-pals span { filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); animation: bsHop 3.2s ease-in-out infinite; }
.bs-pals span:nth-child(2) { animation-delay: .4s; } .bs-pals span:nth-child(3) { animation-delay: .8s; }
.bs-pals span:nth-child(4) { animation-delay: 1.2s; } .bs-pals span:nth-child(5) { animation-delay: 1.6s; }
.bs-pals .zz { font-size: .9rem; color: #fff; text-shadow: 1px 1px 0 var(--blk-ink); animation: none; opacity: .8; filter: none; }
@keyframes bsHop { 0%,84%,100% { transform: translateY(0); } 90% { transform: translateY(-6px); } 96% { transform: translateY(0); } }
/* 取りもどしたことば: 左上の小さなバー(地図アイコン＋数字だけ) */
.bs-world { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; background: rgba(31,22,14,.72); border: 2px solid var(--blk-ink); color: #fff; font-weight: 900; font-size: .78rem; font-family: "Segoe UI", Verdana, sans-serif; }
.bs-world .bar { width: 64px; height: 8px; background: #1b1b1b; border: 2px solid #000; }
.bs-world .bar i { display: block; height: 100%; background: var(--blk-gold); }

/* ============ 出発ボタン ============ */
.blk-play { width: 100%; min-height: 66px; font-size: 1.15rem; gap: 12px; margin-bottom: 12px; }
.blk-play .lv { font-size: 1.1rem; }
.blk-play .lv .pxnum { font-size: 1.4rem; }

/* ============ ミッション(3つのマス) ============ */
.blk-missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.blk-missions .slot { aspect-ratio: auto; padding: 12px 4px 8px; gap: 6px; background: var(--blk-paper); color: var(--blk-text); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 5px 0 var(--blk-ink); }
.blk-missions .slot:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 2px 0 var(--blk-ink); }
.blk-missions .slot .lab { font-size: .76rem; color: var(--blk-text); text-shadow: none; font-weight: 900; }
.blk-missions .slot .prize { display: flex; gap: 3px; align-items: center; min-height: 20px; }
.blk-missions .slot .prize .px-ico { --px: 2px; }
.blk-missions .slot.done { background: #cfeec4; box-shadow: inset 3px 3px 0 #e8ffdf, inset -3px -3px 0 #8fc47c, 0 5px 0 var(--blk-ink); }
.blk-missions .slot .stamp { position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; background: var(--blk-grass); border: 3px solid var(--blk-ink); display: none; align-items: center; justify-content: center; }
.blk-missions .slot.done .stamp { display: flex; }
.blk-missions .slot .stamp .px-ico { --px: 1.8px; }
/* 3つそろうと → ミニマス3つ＋たまご */
.blk-bonus { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; }
.blk-bonus .mini { width: 16px; height: 16px; border: 2px solid var(--blk-ink); background: #8a8a8a; box-shadow: inset 2px 2px 0 #5a5a5a; }
.blk-bonus .mini.on { background: var(--blk-grass); box-shadow: inset 2px 2px 0 var(--blk-grass-d); }
.blk-bonus .arrow { font-weight: 900; color: var(--blk-text); }
.blk-bonus .px-ico { --px: 2.2px; }

/* ============ 学年(3つの土地) ============ */
.blk-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.blk-worlds .land {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  height: 104px; padding: 8px 4px;
  border: 3px solid var(--blk-ink); border-radius: 0; box-shadow: 0 5px 0 var(--blk-ink);
  color: #fff; font: inherit; font-weight: 900; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.blk-worlds .land:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blk-ink); }
.blk-worlds .land .nm { position: relative; font-size: 1.05rem; text-shadow: 2px 2px 0 var(--blk-ink); letter-spacing: .06em; }
.blk-worlds .land .bar { position: relative; width: 80%; height: 8px; background: rgba(0,0,0,.55); border: 2px solid var(--blk-ink); }
.blk-worlds .land .bar i { display: block; height: 100%; background: var(--blk-gold); }
.blk-worlds .land .art { position: absolute; inset: 0; pointer-events: none; }
/* 草原: 空＋草ブロック */
.land.g1 { background: linear-gradient(180deg, #79b7ff 0 52%, var(--blk-grass) 52% 64%, var(--blk-dirt) 64%); }
.land.g1 .art::before { content: ""; position: absolute; left: 10%; top: 24%; width: 30%; height: 28%; background: #7fdc62; clip-path: polygon(0 100%, 0 50%, 35% 50%, 35% 0, 70% 0, 70% 30%, 100% 30%, 100% 100%); }
.land.g1 .art::after { content: ""; position: absolute; right: 10px; top: 8px; width: 12px; height: 12px; background: var(--blk-gold); box-shadow: 0 0 0 2px #ffe88f; }
/* 海: 空＋水ブロック */
.land.g2 { background: linear-gradient(180deg, #a8d3ff 0 44%, var(--blk-water) 44% 100%); }
.land.g2 .art::before { content: ""; position: absolute; left: 0; right: 0; top: 44%; height: 6px; background: repeating-linear-gradient(90deg, #8fc2ff 0 10px, transparent 10px 20px); }
.land.g2 .art::after { content: ""; position: absolute; left: 0; right: 0; top: 60%; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 10px, #2456b8 10px 20px); }
/* 山: 夜空＋石ブロック(てっぺんは雪) */
.land.g3 { background: linear-gradient(180deg, #2b3a7a 0 48%, #6e6e6e 48% 100%); }
.land.g3 .art::before { content: ""; position: absolute; left: 14%; top: 18%; width: 40%; height: 40%; background: #8d8d8d; clip-path: polygon(0 100%, 0 60%, 25% 60%, 25% 30%, 50% 30%, 50% 0, 75% 0, 75% 30%, 100% 30%, 100% 100%); box-shadow: inset 0 6px 0 #ffffff; }
.land.g3 .art::after { content: ""; position: absolute; right: 12px; top: 10px; width: 10px; height: 10px; background: #fff3c0; box-shadow: 0 0 0 2px rgba(255,243,192,.35); }

/* ============ インベントリ(持ちもの) ============ */
.blk-inv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.blk-inv .slot .px-ico { --px: 2.8px; }
.blk-inv .slot .n { font-size: .74rem; }
.blk-inv .slot .badge .px-ico { --px: 1.6px; }

/* ============ ペンギン(NPCのセリフ) ============ */
.blk-npc { display: flex; align-items: center; gap: 10px; padding: 10px; }
.blk-npc .who { width: 76px; height: 82px; position: relative; flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.blk-npc .who .penguin-face { scale: 1.35; transform-origin: 0 0; position: absolute; left: 2px; top: 2px; filter: none; animation: none; }
.blk-npc .who:active { transform: translateY(2px); }
.blk-npc .say {
  flex: 1; min-height: 56px; display: flex; align-items: center;
  background: #fff; border: 3px solid var(--blk-ink); padding: 8px 10px;
  font-weight: 800; font-size: .9rem; line-height: 1.45; color: var(--blk-text);
  box-shadow: inset -3px -3px 0 #e6dcc0; position: relative;
}
.blk-npc .say::before { content: ""; position: absolute; left: -9px; top: 22px; width: 9px; height: 9px; background: #fff; border-left: 3px solid var(--blk-ink); border-bottom: 3px solid var(--blk-ink); transform: rotate(45deg); }

/* ============ 週の足あと(7マス) ============ */
.blk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.blk-week .slot { aspect-ratio: 1 / 1; background: #6d6d6d; box-shadow: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #9a9a9a; border-width: 2px; cursor: default; }
.blk-week .slot .px-ico { --px: 2.2px; }
.blk-week .slot.today { outline: 3px solid var(--blk-gold); outline-offset: -3px; }
.blk-week .slot .d { position: absolute; left: 3px; top: 0; font-size: .58rem; color: #ddd; text-shadow: 1px 1px 0 #000; }

/* ============ ホットバー(下のナビ) ============ */
.hotbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; justify-content: center; gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--blk-dirt-d);
  border-top: 4px solid var(--blk-ink);
  box-shadow: inset 0 4px 0 #8a6640;
}
.hotbar .hb {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #8a8a8a; border: 3px solid var(--blk-ink); border-radius: 0;
  box-shadow: inset 3px 3px 0 #5a5a5a, inset -3px -3px 0 #b9b9b9;
  cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; padding: 0;
}
.hotbar .hb .px-ico { --px: 3.2px; }
.hotbar .hb.on { outline: 4px solid #fff; outline-offset: -1px; background: #a0a0a0; }
.hotbar .hb:active { transform: translateY(2px); }
.hotbar .hb .dot { position: absolute; right: 4px; top: 4px; width: 10px; height: 10px; background: #e8443a; border: 2px solid var(--blk-ink); animation: hbBlink 1.2s steps(2) infinite; }
@keyframes hbBlink { 50% { opacity: .2; } }

/* ============ 既存の共通部品をブロック風に上書き ============ */
.card { background: var(--blk-paper); border: 4px solid var(--blk-ink); border-radius: 0; box-shadow: inset 4px 4px 0 #fffaf0, inset -4px -4px 0 var(--blk-paper-d), 0 6px 0 var(--blk-ink); }
.back-row { margin-bottom: 14px; }
.back-btn { background: var(--blk-stone); color: #fff; border: 3px solid var(--blk-ink); border-radius: 0; box-shadow: inset 3px 3px 0 var(--blk-stone-l), inset -3px -3px 0 var(--blk-stone-d), 0 5px 0 var(--blk-ink); font-weight: 900; text-shadow: 2px 2px 0 rgba(0,0,0,.55); padding: 8px 12px; transition: transform .06s, box-shadow .06s; }
.back-btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 var(--blk-stone-l), inset -3px -3px 0 var(--blk-stone-d), 0 2px 0 var(--blk-ink); }
.screen-title { font-weight: 900; letter-spacing: .04em; color: var(--blk-text); text-shadow: 2px 2px 0 rgba(255,255,255,.75); }
.section-label { font-weight: 900; color: var(--blk-text); text-shadow: 1px 1px 0 rgba(255,255,255,.7); }
.big-btn, .btn { border-radius: 0; border: 3px solid var(--blk-ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.28), 0 6px 0 var(--blk-ink); text-shadow: 2px 2px 0 rgba(0,0,0,.45); font-weight: 900; }
.big-btn:active, .btn:active { transform: translateY(4px); box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.28), 0 2px 0 var(--blk-ink); }
.menu-tile, .stat-box, .coll-item, .level-row, .badge-row, .game-card, .tomorrow-card, .week-card, .world-card, .gate-card, .lock-card, .egg-card {
  border-radius: 0; border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.7), inset -3px -3px 0 rgba(0,0,0,.12), 0 4px 0 var(--blk-ink);
}
.choice-btn { border-radius: 0; border: 3px solid var(--blk-ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.8), inset -3px -3px 0 rgba(0,0,0,.14), 0 5px 0 var(--blk-ink); font-weight: 900; }
.choice-btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 rgba(255,255,255,.8), inset -3px -3px 0 rgba(0,0,0,.14), 0 2px 0 var(--blk-ink); }
.toast, .levelup-banner { border-radius: 0; border: 3px solid var(--blk-ink); box-shadow: 0 5px 0 var(--blk-ink); }
.chapter-head { color: var(--blk-text); font-weight: 900; }
.session-head { color: var(--blk-text); }
.session-quit { border-radius: 0; border: 3px solid var(--blk-ink); box-shadow: 0 4px 0 var(--blk-ink); font-weight: 900; }
.version-line { color: #6b5a44; font-size: .7rem; text-align: center; display: block; width: 100%; background: none; border: 0; padding: 8px 0 0; font-family: "Segoe UI", Verdana, sans-serif; }

/* ---- 動きを減らす ---- */
@media (prefers-reduced-motion: reduce) {
  .bs-cloud, .bs-pals span, .hotbar .hb .dot { animation: none !important; }
  .pxb, .back-btn, .big-btn, .btn, .choice-btn, .slot, .blk-worlds .land { transition: none; }
}
.px-ico.home{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='3'%20y='1'%20width='4'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='2'%20y='2'%20width='6'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='1'%20y='3'%20width='8'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='0'%20y='4'%20width='10'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='1'%20y='5'%20width='8'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='6'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='3'%20y='6'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='5'%20y='6'%20width='4'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='7'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='3'%20y='7'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='5'%20y='7'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='6'%20y='7'%20width='2'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='8'%20y='7'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='8'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='6'%20y='8'%20width='2'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='8'%20y='8'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='9'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='6'%20y='9'%20width='2'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='8'%20y='9'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3C/svg%3E")}
.px-ico.book{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='1'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='13'%20y='1'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='3'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='11'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='13'%20y='2'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='3'%20width='3'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='3'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='3'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='11'%20y='3'%20width='3'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='3'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='4'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='4'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='4'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='4'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='5'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='5'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='5'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='5'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='3'%20y='6'%20width='3'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='6'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='6'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='10'%20y='6'%20width='3'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='13'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='6'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='7'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='7'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='7'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='7'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='8'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='3'%20y='8'%20width='3'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='6'%20y='8'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='8'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='8'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='10'%20y='8'%20width='3'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='13'%20y='8'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='8'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='9'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='9'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='9'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='9'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='9'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='10'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='10'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='3'%20y='10'%20width='3'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='6'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='10'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='10'%20y='10'%20width='3'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='13'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='10'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='10'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='11'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='11'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='11'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='11'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='11'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='11'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='11'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='12'%20width='6'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='7'%20y='12'%20width='2'%20height='1'%20fill='%232456b8'/%3E%3Crect%20x='9'%20y='12'%20width='6'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='15'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='13'%20width='12'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='14'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='14'%20width='12'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.review{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='9'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='0'%20width='1'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='11'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='1'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='12'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='9'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='2'%20width='3'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='13'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='13'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='14'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='13'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='14'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='3'%20y='5'%20width='7'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='5'%20width='3'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='13'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='3'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='6'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='12'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='3'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='7'%20width='1'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='11'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='13'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='3'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='8'%20width='1'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='10'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='12'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='13'%20y='8'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='15'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='9'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='9'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='12'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='13'%20y='9'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='15'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='10'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='10'%20width='3'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='10'%20width='7'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='13'%20y='10'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='15'%20y='10'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='11'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='11'%20width='13'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='15'%20y='11'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='12'%20width='13'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='15'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='13'%20width='3'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='13'%20width='9'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='14'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='14'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='14'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='15'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='15'%20width='1'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='15'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.game{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='1'%20width='8'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='0'%20y='2'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='3'%20y='2'%20width='4'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='7'%20y='2'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='8'%20y='2'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='1'%20y='3'%20width='3'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='4'%20y='3'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='7'%20y='3'%20width='1'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='8'%20y='3'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='0'%20y='4'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='2'%20y='4'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='3'%20y='4'%20width='4'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='7'%20y='4'%20width='1'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='8'%20y='4'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='0'%20y='5'%20width='10'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='1'%20y='6'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='7'%20y='6'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='1'%20y='7'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='7'%20y='7'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3C/svg%3E")}
.px-ico.egg{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='1'%20width='4'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='10'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='2'%20width='6'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='11'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='5'%20y='3'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='3'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='12'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='4'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='4'%20y='4'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='6'%20y='4'%20width='7'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='13'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='5'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='4'%20y='5'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='5'%20width='8'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='13'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='6'%20width='12'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='14'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='7'%20width='12'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='14'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='8'%20width='11'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='13'%20y='8'%20width='1'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='14'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='9'%20width='11'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='13'%20y='9'%20width='1'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='14'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='10'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='10'%20width='10'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='12'%20y='10'%20width='2'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='14'%20y='10'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='11'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='11'%20width='8'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='11'%20y='11'%20width='2'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='13'%20y='11'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='12'%20width='8'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='11'%20y='12'%20width='2'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='13'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='13'%20width='6'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='10'%20y='13'%20width='2'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='12'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='14'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='14'%20width='4'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='9'%20y='14'%20width='2'%20height='1'%20fill='%23d9cdb4'/%3E%3Crect%20x='11'%20y='14'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='15'%20width='6'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.trophy{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='10'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='1'%20width='10'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='2'%20width='6'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='8'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='3'%20width='6'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='8'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='4'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='2'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='4'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='4'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='5'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='5'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='5'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='6'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='7'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='8'%20width='6'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='8'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='9'%20width='8'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.gear{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='9'%20y='0'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='1'%20width='7'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='1'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='13'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='2'%20width='7'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='9'%20y='2'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='13'%20y='2'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='14'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='3'%20width='7'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='9'%20y='3'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='13'%20y='3'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='14'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='4'%20width='7'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='4'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='13'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='5'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='5'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='6'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='6'%20width='8'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='7'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='3'%20y='7'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='7'%20width='8'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='15'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='8'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='3'%20y='8'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='8'%20width='8'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='15'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='9'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='9'%20width='8'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='10'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='10'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='11'%20width='6'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='11'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='12'%20y='11'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='12'%20width='6'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='8'%20y='12'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='12'%20y='12'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='14'%20y='12'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='13'%20width='6'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='8'%20y='13'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='12'%20y='13'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='14'%20y='13'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='14'%20width='6'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='14'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='12'%20y='14'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='15'%20width='4'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.chart{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='8'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='1'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='4'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='2'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='3'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='6'%20y='3'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='3'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='4'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='4'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='6'%20y='4'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='4'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='5'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='2'%20y='5'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='5'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='6'%20y='5'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='5'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='6'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='2'%20y='6'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='6'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='6'%20y='6'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='6'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='7'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='2'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='7'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='6'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='7'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='8'%20width='10'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='0'%20y='9'%20width='10'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.sprout{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='1'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='1'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='9'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='4'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='5'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='2'%20width='4'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='3'%20width='6'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='8'%20y='3'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='4'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='4'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='4'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='5'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='6'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='6'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='8'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='9'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='2'%20y='8'%20width='5'%20height='1'%20fill='%238b5a2b'/%3E%3Crect%20x='7'%20y='8'%20width='2'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='9'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='9'%20width='6'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='8'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.heart{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='1'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='3'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='1'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='2'%20width='4'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='4'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='2'%20width='4'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='0'%20y='3'%20width='10'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='0'%20y='4'%20width='10'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='8'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='6'%20width='6'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='8'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='7'%20width='4'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='7'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='8'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='6'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='9'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.star{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='3'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='2'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='2'%20width='4'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='2'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='3'%20width='10'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='8'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='5'%20width='6'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='8'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='6'%20width='6'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='8'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='3'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='4'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='7'%20width='3'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='9'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='2'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='8'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='9'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='9'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.sword{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='0'%20width='2'%20height='1'%20fill='%237fe3ff'/%3E%3Crect%20x='9'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='1'%20width='3'%20height='1'%20fill='%237fe3ff'/%3E%3Crect%20x='9'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='2'%20width='3'%20height='1'%20fill='%237fe3ff'/%3E%3Crect%20x='8'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='3'%20width='3'%20height='1'%20fill='%237fe3ff'/%3E%3Crect%20x='7'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='3'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='4'%20width='3'%20height='1'%20fill='%237fe3ff'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='2'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='5'%20width='2'%20height='1'%20fill='%237fe3ff'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='3'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='4'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='2'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='3'%20y='7'%20width='2'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='5'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='2'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='8'%20width='2'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='6'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='9'%20width='2'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='2'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='9'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.ticket{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='1'%20width='8'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='8'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='2'%20y='3'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='5'%20y='3'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='7'%20y='3'%20width='2'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='3'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='4'%20y='4'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='5'%20y='4'%20width='4'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='4'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='6'%20y='5'%20width='3'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='9'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='2'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='3'%20y='6'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='5'%20y='6'%20width='1'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='6'%20y='6'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='8'%20y='6'%20width='1'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='9'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='8'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='9'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='8'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.flag{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='0'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='0'%20width='6'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='1'%20width='6'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='8'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='2'%20width='7'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='3'%20width='8'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='4'%20width='7'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='5'%20width='6'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='8'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='6'%20width='6'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='2'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='9'%20width='3'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='3'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.shield{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='10'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='1'%20y='1'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='1'%20width='5'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='1'%20y='2'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='2'%20width='5'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='1'%20y='3'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='3'%20width='5'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='0'%20y='4'%20width='10'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='1'%20y='5'%20width='8'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='1'%20y='6'%20width='8'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='2'%20y='7'%20width='6'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='3'%20y='8'%20width='4'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='4'%20y='9'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3C/svg%3E")}
.px-ico.flame{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='3'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='0'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='5'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='6'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='2'%20width='3'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='6'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='2'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='3'%20width='5'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='7'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='3'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='3'%20y='4'%20width='3'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='6'%20y='4'%20width='3'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='2'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='3'%20y='5'%20width='5'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='8'%20y='5'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='2'%20y='6'%20width='2'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='4'%20y='6'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='6'%20width='2'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='8'%20y='6'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='2'%20y='7'%20width='2'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='4'%20y='7'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='7'%20width='2'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='8'%20y='7'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='9'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='8'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='3'%20y='8'%20width='1'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='4'%20y='8'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='8'%20width='1'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='7'%20y='8'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='8'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='9'%20width='1'%20height='1'%20fill='%23e8443a'/%3E%3Crect%20x='4'%20y='9'%20width='3'%20height='1'%20fill='%23ff8a2a'/%3E%3Crect%20x='7'%20y='9'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.play{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='1'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='2'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='6'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='3'%20width='6'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='4'%20width='7'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='5'%20width='7'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='9'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='6'%20width='6'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='7'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='6'%20y='7'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='8'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='4'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='9'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.lock{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='0'%20width='4'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='7'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='1'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='1'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='8'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='2'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='4'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='2'%20width='2'%20height='1'%20fill='%239aa3ad'/%3E%3Crect%20x='8'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='8'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='8'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='3'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='4'%20y='5'%20width='2'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='6'%20y='5'%20width='3'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='3'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='4'%20y='6'%20width='2'%20height='1'%20fill='%231f2430'/%3E%3Crect%20x='6'%20y='6'%20width='3'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='8'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='8'%20width='8'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='9'%20y='8'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='9'%20width='8'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.check{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='8'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='1'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='2'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='6'%20y='3'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='8'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='5'%20y='4'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='7'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='5'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='2'%20y='5'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='5'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='6'%20width='4'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='5'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='7'%20width='2'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='4'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.shard{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='6'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='2'%20width='4'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='7'%20y='2'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='3'%20width='6'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='8'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='4'%20width='8'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='5'%20width='6'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='8'%20y='5'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='6'%20width='4'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='7'%20y='6'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='7'%20width='2'%20height='1'%20fill='%23c364ff'/%3E%3Crect%20x='6'%20y='7'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='8'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.crown{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='0'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='3'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='1'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='9'%20y='1'%20width='1'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='2'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='2'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='2'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='2'%20width='2'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='8'%20y='2'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='3'%20width='3'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='4'%20y='3'%20width='2'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%23241a10'/%3E%3Crect%20x='7'%20y='3'%20width='3'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='4'%20width='10'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='5'%20width='10'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='6'%20width='10'%20height='1'%20fill='%23ffd23f'/%3E%3Crect%20x='0'%20y='7'%20width='10'%20height='1'%20fill='%23d99a1c'/%3E%3Crect%20x='0'%20y='8'%20width='10'%20height='1'%20fill='%23241a10'/%3E%3C/svg%3E")}
.px-ico.map{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='10'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='1'%20width='4'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='5'%20y='1'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='2'%20width='5'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='6'%20y='2'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='8'%20y='2'%20width='1'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='3'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='2'%20y='3'%20width='3'%20height='1'%20fill='%235bc043'/%3E%3Crect%20x='5'%20y='3'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='7'%20y='3'%20width='2'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='4'%20width='6'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='6'%20y='4'%20width='3'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='9'%20y='4'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='5'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='5'%20y='5'%20width='3'%20height='1'%20fill='%233d8bff'/%3E%3Crect%20x='8'%20y='5'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='6'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='2'%20y='6'%20width='3'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='5'%20y='6'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='7'%20width='1'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='1'%20y='7'%20width='5'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='6'%20y='7'%20width='4'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='8'%20width='2'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='2'%20y='8'%20width='3'%20height='1'%20fill='%235a3a19'/%3E%3Crect%20x='5'%20y='8'%20width='5'%20height='1'%20fill='%23f6f1e6'/%3E%3Crect%20x='0'%20y='9'%20width='10'%20height='1'%20fill='%23f6f1e6'/%3E%3C/svg%3E")}

/* ---- v2.66.0 追加分: 見えかたがアニメに依存していた部品と、ブロック化もれの部品 ---- */
/* .card/.level-row などは fadeUp(不透明度0→1)で出していた。アニメが走らない環境
   (動きを減らす設定・非表示タブ)では**不透明度0のまま = 中身が見えない**。
   姿勢をアニメだけで作らない(v2.61.2の教訓)。動きを減らす設定では素直に出す */
@media (prefers-reduced-motion: reduce) {
  .card, .choices, .grade-row, .level-row { animation: none !important; opacity: 1; }
}
.game-pick-btn { background: var(--blk-paper); border: 3px solid var(--blk-ink); border-radius: 0; box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 5px 0 var(--blk-ink); font-weight: 900; }
.game-pick-btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 2px 0 var(--blk-ink); }
.weak-row, .grade-row { border-radius: 0; border: 3px solid var(--blk-ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.7), inset -3px -3px 0 rgba(0,0,0,.12), 0 4px 0 var(--blk-ink); }
.level-row .level-num, .badge-row .badge-icon { border-radius: 0; }
.ticket-row { font-weight: 900; }

/* ============================================================
   👓 読みやすさの手直し(v2.66.1)
   ユーザー指摘「文字の読みにくいところなどデザインの改善が必要なところを修正して」。
   全画面の文字の色と背景色から**コントラスト比を自動計測**して、基準未満をつぶした。
   (基準: WCAG の本文 4.5 / 大きい文字 3.0。ブロックのアイコンは縁取りで対応)
   ・白文字のボタンの地色を濃くした(石3.32→5.33 / 草2.32→4.63 / 水3.31→5.11 / 赤3.95→5.19)
   ・白文字には**ドット風の縁取り**(4方向の影)。明るい地の上でも字の形が崩れない
   ・薄い文字(--sub)を 紙の上で 3.35→5.8 に。「ロック中」「未入手」も**文字は薄くしない**(絵だけ薄くする)
   ・11px未満の文字をなくした(曜日 9.3px・ずかんの名前 9.9px など)
   ============================================================ */
:root {
  --sub: #595244;                 /* 紙の上で 5.8 */
  --star-off: #9c907b;            /* 空の星は「絵」なので 3.0 以上 */
  --blk-stone: #6b6b6b; --blk-stone-l: #a3a3a3; --blk-stone-d: #3e3e3e;
  --blk-grass-btn: #35852a;
  --blk-water-btn: #2a6ad4;
  --blk-red-btn: #c9362c;
  /* 白文字の縁取り(ドット風)。text-shadow を4方向に置いて1pxの黒い輪郭をつくる */
  --ol: -1.5px 0 0 var(--blk-ink), 1.5px 0 0 var(--blk-ink), 0 -1.5px 0 var(--blk-ink), 0 1.5px 0 var(--blk-ink), 2px 2px 0 var(--blk-ink);
}

/* ---- ボタンの地色(白文字が読める濃さ)＋縁取り ---- */
.pxb, .back-btn { text-shadow: var(--ol); }
.pxb.g { background: var(--blk-grass-btn); box-shadow: inset 3px 3px 0 #6cc45a, inset -3px -3px 0 #22591a, 0 6px 0 var(--blk-ink); }
.pxb.g:active { box-shadow: inset 3px 3px 0 #6cc45a, inset -3px -3px 0 #22591a, 0 2px 0 var(--blk-ink); }
.pxb.b { background: var(--blk-water-btn); box-shadow: inset 3px 3px 0 #6c9ff0, inset -3px -3px 0 #183f86, 0 6px 0 var(--blk-ink); }
.pxb.b:active { box-shadow: inset 3px 3px 0 #6c9ff0, inset -3px -3px 0 #183f86, 0 2px 0 var(--blk-ink); }
.pxb.r { background: var(--blk-red-btn); box-shadow: inset 3px 3px 0 #ee7a70, inset -3px -3px 0 #7a1d17, 0 6px 0 var(--blk-ink); }
.pxb.r:active { box-shadow: inset 3px 3px 0 #ee7a70, inset -3px -3px 0 #7a1d17, 0 2px 0 var(--blk-ink); }
.pxb.y { text-shadow: none; }
.big-btn, .btn:not(.btn-sub) { text-shadow: var(--ol); }

/* ---- 数字(持ちもの・HUD・土地) ---- */
.slot { background: #6e6e6e; box-shadow: inset 3px 3px 0 #4a4a4a, inset -3px -3px 0 #9a9a9a; }
.slot .n { font-size: .92rem; right: 3px; bottom: 0; text-shadow: var(--ol); }
/* 空のマスは**絵だけ**薄くする。数字「0」まで薄くすると読めない(実測1.87) */
.slot.empty { opacity: 1; }
.slot.empty .px-ico { opacity: .45; filter: grayscale(1); }
.hud .hud-lvn, .hud .hud-chip, .bs-world, .blk-worlds .land .nm, .hotbar .hb { text-shadow: var(--ol); }
.blk-worlds .land .nm { font-size: 1.12rem; }
.bs-world { font-size: .84rem; }

/* ---- 小さすぎた文字(11px未満) ---- */
.blk-week .slot .d { font-size: .7rem; font-weight: 900; color: #fff; text-shadow: var(--ol); left: 3px; top: 1px; }
.wk-lab { font-size: .74rem; font-weight: 800; color: var(--sub); }
.week-streak { font-size: .78rem; }
.star-chance { font-size: .76rem; }
.coll-name { font-size: .72rem; line-height: 1.2; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; color: var(--blk-text); }
.coll-rarity { font-size: .7rem; font-weight: 900; }
.shard-note small, .shard-bar small { font-size: .72rem; }

/* ---- ずかん: まだ会っていない枠は「？」の絵だけ薄く、文字は読める濃さ ---- */
.coll-item.locked { opacity: 1; background: #ece3cc; }
.coll-item.locked .coll-emoji { opacity: .5; }
.coll-item.locked .coll-name, .coll-item.locked .coll-rarity { color: #6b6353; }
.coll-item.sleeping { opacity: 1; }
.coll-item.sleeping .coll-emoji { opacity: .4; }

/* ---- 実績: ロック中も説明は読める(何をすればもらえるかが目標になる) ---- */
.badge-row { opacity: 1; background: #efe7d3; }
.badge-row .badge-desc { color: var(--sub); font-size: .8rem; }
.badge-row:not(.unlocked) .badge-icon { filter: grayscale(1); opacity: .55; }
.badge-row:not(.unlocked) .badge-name { color: #4a4336; }
.badge-row.unlocked { background: #fffbe8; box-shadow: inset 4px 0 0 var(--blk-gold), inset 3px 3px 0 rgba(255,255,255,.7), inset -3px -3px 0 rgba(0,0,0,.12), 0 4px 0 var(--blk-ink); }

/* ---- 学習カード: 読み上げ中の表示も読める濃さに ---- */
.speak-btn.locked { opacity: 1; background: #d9d2c0; color: #4a4336; text-shadow: none; }
.speak-btn.locked * { text-shadow: none; color: #4a4336; }

/* ---- ミッションの完了スタンプ: 白地に縁取りつきのチェック(緑の上に緑で見えなかった) ---- */
.blk-missions .slot .stamp { background: #fff; }
.blk-missions .slot .prize .px-ico { --px: 2.4px; }
.blk-bonus .px-ico { --px: 2.6px; }

/* ---- キーボード操作で、いまどこにいるかが見えるように ---- */
.pxb:focus-visible, .slot:focus-visible, .hotbar .hb:focus-visible, .blk-worlds .land:focus-visible,
.back-btn:focus-visible, .big-btn:focus-visible, .btn:focus-visible, .choice-btn:focus-visible,
.game-pick-btn:focus-visible, .level-row:focus-visible, .blk-npc .who:focus-visible {
  outline: 3px solid var(--blk-gold); outline-offset: 2px;
}

/* ---- 1回目の計測で残ったもの(元のルールのほうが詳細度が高かった箇所) ---- */
.speak-btn.locked, .speak-btn.locked:disabled { opacity: 1; background: #d9d2c0; color: #4a4336; border-color: #b9ad92; box-shadow: 0 3px 0 #b9ad92; text-shadow: none; }
.wk-cell .wk-lab { font-size: .74rem; font-weight: 900; color: var(--sub); }
.wk-cell.done .wk-lab { color: #7a4a0e; }
.wk-cell.shielded .wk-lab { color: #24506e; }
.week-streak, .week-streak b { color: #8a4a0c; }
.btn-sub { color: #3a4d31; }
.weak-count { color: #a3231b; }
.ticket-row .ticket-num { color: #6b4312; }
.legend-label small { font-size: .74rem; }
/* 星はドットの縁取りで「絵」としてくっきり(金の星は白地で1.7しかなかった) */
.star-on, .star-off { text-shadow: var(--ol); }
.star-on { filter: none; }
/* でんせつ枠: 枠ごと薄くせず、絵だけ薄くする(文字「???」「でんせつ」は読める濃さ) */
.coll-item.locked.legend-item, .coll-item.locked.legend-item.sleeping { opacity: 1; }
.coll-item.locked.legend-item .coll-emoji { opacity: .75; }
.coll-item.locked.legend-item.sleeping .coll-emoji { opacity: .4; }
.coll-item.locked.legend-item .coll-rarity { color: #7a5410 !important; }
/* 景色の「z z z」(まだなかまがいない) */
.bs-pals .zz { opacity: 1; text-shadow: var(--ol); font-weight: 900; }
/* ---- ステージ一覧・設定の残り ---- */
/* #resetData の赤い文字は v2.67.3 で .btn-sub.danger(赤いブロック＋白い縁取り文字)に置きかえ */
.level-num.done { background: #3d7a55; }
/* ボスの行: 白文字がのるので地を濃く、説明も半透明にしない */
.boss-row.ready { background: linear-gradient(135deg, #cf3d33, #9e2338); }
.boss-row.wait { opacity: 1; background: linear-gradient(135deg, #5a5e70, #44485a); }
.boss-row .level-meta { color: #fff; }
.boss-row .level-title, .boss-row .level-meta { text-shadow: var(--ol); }
/* ずかんの名前: 6文字までは1行に収める(11.5pxだと「けろっぴょ／ん」と1文字だけ落ちた) */
.coll-item { padding: 8px 2px; }
.coll-name { font-size: .7rem; letter-spacing: -.04em; }
.coll-grid { gap: 6px; }
.card:has(.coll-grid) { padding: 14px 12px; }
/* 7〜8文字の名前は2行に。1文字だけ落ちないよう、行の長さをそろえる(対応していない端末では通常の折り返し) */
.coll-name { text-wrap: balance; }
/* 「ミス0／回」のように1文字だけ落ちないよう、ひとまとまりごとに折り返す */
.nw { white-space: nowrap; }
/* ボスの行もブロックの形に(ここだけ角が丸く残っていた) */
.boss-row { border-radius: 0; border: 3px solid var(--blk-ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.18), inset -3px -3px 0 rgba(0,0,0,.25), 0 5px 0 var(--blk-ink); }
.boss-row:active:not(:disabled) { box-shadow: inset 3px 3px 0 rgba(255,255,255,.18), inset -3px -3px 0 rgba(0,0,0,.25), 0 1px 0 var(--blk-ink); }
.boss-row .boss-face, .boss-row .level-num { border-radius: 0; }

/* ============================================================
   🧭 わかりやすさ優先(v2.67.0)
   ユーザー指摘「文字が少なすぎて、初めて見たら何が何だか分からない。逆に使いづらい。
   使いやすさを最優先で」→ ブロックの見た目はそのまま、**すべてに言葉のラベル**をつけた。
   ルール: ①ボタンは「何をするか」を太字で、「どこ/何が起きるか」を小さく2行目に
          ②マスは「なんのマスか」を必ず書く ③押せるものは押せる形(厚み)＋「みる ›」
          ④見出し(きょうのミッション・ステージをえらぶ・もちもの・この7日間)で区切る
   ============================================================ */

/* ---- 🐧 絵文字のペンギン(外枠は 56×60 のまま。置き場所の座標を変えないため) ---- */
.penguin-face.emoji-pen { position: relative; width: 56px; height: 60px; filter: none; animation: none; }
.emoji-pen > .pe-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: 46px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.18));
  transform-origin: 50% 100%;
  animation: peBob 2.4s ease-in-out infinite;
}
.emoji-pen > .pe-mood {
  position: absolute; right: -6px; top: -4px;
  font-size: 20px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* 👋(wave)のマークは v2.67.3 で削除(ユーザー指摘「ペンギンの近くの手のイラストはいらない」)。
   ふだんの顔(wave)はマークなし。よろこぶ🎉・はげます💪は残す */
.emoji-pen[data-mood="cheer"] > .pe-mood::after { content: "🎉"; }
.emoji-pen[data-mood="encourage"] > .pe-mood::after { content: "💪"; }
.emoji-pen[data-mood="cheer"] > .pe-body { animation: peHop .9s ease-in-out infinite; }
@keyframes peBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes peHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
/* ゲーム・物語の中ではマーク(🎉など)を出さない(動きのじゃまになる) */
.runner-body .emoji-pen > .pe-mood, .sea-penguin .emoji-pen > .pe-mood, .boss-hero .emoji-pen > .pe-mood, .sc-hero .emoji-pen > .pe-mood { display: none; }

/* ---- HUD(ラベルつき) ---- */
.hud2 {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: -12px -12px 12px;
  background: var(--blk-dirt-d); border-bottom: 4px solid var(--blk-ink); box-shadow: inset 0 -4px 0 #2a1a0c;
  color: #fff;
}
.hud2 .hud-pen { width: 42px; height: 46px; position: relative; flex-shrink: 0; }
.hud2 .hud-pen .penguin-face { scale: .75; transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.hud2 .hud-pen .pe-mood { display: none; }
.hud2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hud2-lv { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; text-shadow: var(--ol); line-height: 1.2; }
.hud2-lv b { font-size: 1rem; font-family: "Segoe UI", Verdana, sans-serif; }
.hud2-lv span { font-size: .78rem; font-weight: 800; }
.hud2 .xpbar { display: block; height: 10px; background: #1b1b1b; border: 2px solid var(--blk-ink); position: relative; overflow: hidden; }
.hud2 .xpbar i { display: block; height: 100%; background: var(--blk-grass); box-shadow: inset 0 3px 0 #9ae87f; }
.hud2-sub { font-size: .72rem; font-weight: 700; color: #f1e6cc; }
.hud2-chips { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.hud2-chip { display: flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 800; white-space: nowrap; text-shadow: var(--ol); }
.hud2-chip b { font-size: .95rem; font-family: "Segoe UI", Verdana, sans-serif; }

/* ---- 景色の下の説明 ---- */
.blk-scene { margin-bottom: 6px; }
.scene-cap { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .78rem; font-weight: 800; color: var(--blk-text); }
.scene-cap .sc-bar { flex: 1; height: 10px; background: #3a2c1c; border: 2px solid var(--blk-ink); }
.scene-cap .sc-bar i { display: block; height: 100%; background: var(--blk-gold); }
.scene-cap b { font-family: "Segoe UI", Verdana, sans-serif; white-space: nowrap; }

/* ---- ペンギンのセリフ ---- */
.blk-npc .say { font-size: .92rem; }

/* ---- いちばん大きいボタン(2行) ---- */
.play2 { width: 100%; min-height: 68px; justify-content: flex-start; gap: 12px; padding: 10px 14px; margin-bottom: 12px; text-align: left; }
.play2 .p2-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.play2 .p2-text b { font-size: 1.15rem; letter-spacing: .04em; }
.play2 .p2-text small { font-size: .78rem; font-weight: 700; letter-spacing: 0; text-shadow: 1px 1px 0 rgba(0,0,0,.45); }
.pxb.y.play2 .p2-text small { text-shadow: none; }

/* ---- 見出し ---- */
.sec2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 2px 8px; }
.sec2 h2 { font-size: 1rem; font-weight: 900; color: var(--blk-text); letter-spacing: .04em; }
.sec2 > span { font-size: .78rem; font-weight: 800; color: var(--sub); display: flex; align-items: center; gap: 3px; }
.new2 { font-style: normal; background: #c9362c; color: #fff; padding: 1px 8px; border: 2px solid var(--blk-ink); font-size: .74rem; }

/* ---- ミッション(名前・何をするか・もらえるもの) ---- */
.m2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m2 {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 4px 8px; font: inherit; color: var(--blk-text);
  background: var(--blk-paper); border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 5px 0 var(--blk-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m2:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 2px 0 var(--blk-ink); }
.m2 .m2-name { font-size: .9rem; font-weight: 900; }
.m2 .m2-what { font-size: .74rem; font-weight: 700; color: var(--sub); text-align: center; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.m2 .m2-prize { font-size: .72rem; font-weight: 800; color: #5a3d12; display: flex; align-items: center; gap: 2px; }
.m2 .stamp { position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; background: #fff; border: 3px solid var(--blk-ink); display: none; align-items: center; justify-content: center; }
.m2 .stamp .px-ico { --px: 1.8px; }
.m2.done { background: #cfeec4; box-shadow: inset 3px 3px 0 #e8ffdf, inset -3px -3px 0 #8fc47c, 0 5px 0 var(--blk-ink); }
.m2.done .stamp { display: flex; }
.m2.done .m2-what { color: #1f6b2c; font-weight: 900; }
.m2-bonus { display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; margin: 10px 0 4px; font-size: .78rem; font-weight: 800; color: var(--sub); }

/* ---- 学年(土地)に名前と%を ---- */
.blk-worlds .land { height: 124px; gap: 3px; }
.blk-worlds .land .cap, .blk-worlds .land .pct { position: relative; font-size: .7rem; font-weight: 800; text-shadow: var(--ol); letter-spacing: 0; }

/* ---- もちもの(名前・数・押せるものは「みる ›」) ---- */
.i2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.i2 {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px 8px; font: inherit; color: var(--blk-text);
  background: #efe7d3; border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.6), inset -3px -3px 0 rgba(0,0,0,.08);
}
.i2 .i2-name { font-size: .78rem; font-weight: 900; }
.i2 .i2-val { font-size: 1rem; font-weight: 900; font-family: "Segoe UI", Verdana, sans-serif; }
.i2.tap { background: var(--blk-paper); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 5px 0 var(--blk-ink); }
.i2.tap:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 2px 0 var(--blk-ink); }
.i2 .i2-go { font-size: .72rem; font-weight: 900; color: #1f55b3; }
.i2.zero .px-ico { opacity: .45; filter: grayscale(1); }
.hint2 { font-size: .74rem; font-weight: 700; color: var(--sub); text-align: center; line-height: 1.5; margin: 8px 4px 0; }

/* ---- この7日間 ---- */
.w2-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.w2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 0 6px; background: #6e6e6e; border: 2px solid var(--blk-ink); box-shadow: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #9a9a9a; }
.w2 .w2-d { font-size: .7rem; font-weight: 900; color: #fff; text-shadow: var(--ol); white-space: nowrap; }
.w2 .px-ico { --px: 2.2px; }
.w2 .w2-no { height: 22px; line-height: 22px; font-weight: 900; color: #d6d6d6; }
.w2.on { background: #3d7a55; box-shadow: inset 2px 2px 0 #2c5a3e, inset -2px -2px 0 #5f9e78; }
.w2.today { outline: 3px solid var(--blk-gold); outline-offset: -3px; }

/* ---- ホットバーに言葉 ---- */
.hotbar { gap: 4px; }
.hotbar .hb { width: 64px; height: 62px; flex-direction: column; gap: 2px; }
.hotbar .hb .px-ico { --px: 2.6px; }
.hotbar .hb .hb-lab { font-size: .7rem; font-weight: 900; color: #fff; text-shadow: var(--ol); line-height: 1.1; white-space: nowrap; }
body.has-hotbar #app { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .emoji-pen > .pe-body, .emoji-pen > .pe-mood::after { animation: none !important; }
  .m2, .i2 { transition: none; }
}
/* 文章の入る箱は flex にしない(<b> や <wbr> ごとに文字が分解されて縦に割れる) */
.blk-npc .say { display: block; }
.m2 .m2-what { display: block; word-break: keep-all; overflow-wrap: anywhere; }
.w2 .w2-no { color: #f4f4f4; }

/* v2.67.1: とびら画面の「特訓するともらえるもの」 */
.gate-reward { margin: -4px 0 12px; font-size: .8rem; font-weight: 800; color: var(--sub); text-align: center; }
.gate-reward b { color: var(--blk-text); }
/* とびら画面のカギの数(金色の文字は紙の上で2.4しかなかった) */
.gate-keys, .gate-keys b { color: #7a4a0c; }
.gate-left, .gate-left b { color: #1f6b2c; }   /* 元の緑のまま濃く(赤だと「だめ」に見える) */

/* ============================================================
   📖 はじまりのお話もブロックの見た目に(v2.67.3)
   ユーザー指摘「はじまりの物語の背景も他の画面に合わせて」。
   お話の画面だけ v2.64 の丸い白カード＋なめらかなグラデーションの絵のまま残っていた。
   → 外枠は .card と同じ紙のパネル、場面の絵はホームの景色(.blk-scene)と同じ
     「四角い太陽・ドットの雲・段々の丘・草ブロックの地面」で描き直す。
   3枚で「色がある → 色を失う → 色がもどる」は、同じ部品の色だけを変えて見せる
   (地面は .story-scene::before。子要素より先に描かれるので、なかまや影の後ろになる)
   ============================================================ */
.story-screen {
  background: var(--blk-paper); color: var(--blk-text);
  border: 4px solid var(--blk-ink); border-radius: 0;
  box-shadow: inset 4px 4px 0 #fffaf0, inset -4px -4px 0 var(--blk-paper-d), 0 6px 0 var(--blk-ink);
  padding: 14px 12px 18px;
}
.story-scene {
  height: 168px; border-radius: 0;
  border: 4px solid var(--blk-ink); box-shadow: 0 6px 0 var(--blk-ink);
  --hill: var(--blk-grass); --hill-top: #7fdc62; --dirt: var(--blk-dirt);
}
.story-scene::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  background-color: var(--dirt);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.14) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.14) 75%),
    linear-gradient(45deg, rgba(0,0,0,.14) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.14) 75%);
  background-size: 12px 12px, 12px 12px; background-position: 0 0, 6px 6px;
  border-top: 9px solid var(--hill); box-shadow: inset 0 3px 0 var(--hill-top);
}
/* 丘は段々のブロック(ホームの .bs-hill と同じ形) */
.story-scene .sc-hill {
  bottom: 32px; border-radius: 0;
  background: var(--hill); box-shadow: inset 0 6px 0 var(--hill-top);
}
.story-scene .sc-hill.a { left: -6px; width: 46%; height: 44px; clip-path: polygon(0 100%, 0 40%, 18% 40%, 18% 12%, 46% 12%, 46% 0, 74% 0, 74% 22%, 100% 22%, 100% 100%); }
.story-scene .sc-hill.b { right: -6px; left: auto; width: 38%; height: 32px; clip-path: polygon(0 100%, 0 46%, 30% 46%, 30% 0, 70% 0, 70% 26%, 100% 26%, 100% 100%); }
/* ことばのカード: 四角いふだ(10.2px → 11.5px) */
.story-scene .sc-word {
  border-radius: 0; border: 2px solid var(--blk-ink);
  padding: 2px 7px; font-size: .72rem; font-weight: 900;
}
.story-scene .sc-pal { bottom: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }

/* 1枚目: 色のある世界(ホームの景色と同じ空) */
.sc1 { background: linear-gradient(180deg, #4f96f0 0%, #79b7ff 46%, #b9dcff 100%); }
.sc1 .sc-hill.a, .sc1 .sc-hill.b { background: var(--hill); }
.sc1 .sc-word { background: #fff; color: #1f4f9e; box-shadow: 0 3px 0 rgba(31,22,14,.45); }
.story-scene .sc-sun {
  right: 18px; top: 16px; width: 22px; height: 22px; border-radius: 0;
  background: var(--blk-gold); box-shadow: 0 0 0 3px #ffe88f, 0 0 0 5px rgba(255,220,100,.35);
}
.story-scene .sc-cloud {
  width: 10px; height: 10px; border-radius: 0; background: #fff; opacity: .95;
  box-shadow: 8px -8px 0 #fff, 16px -8px 0 #fff, 24px 0 0 #fff, 32px 0 0 #fff, 16px -16px 0 #fff, 8px 0 0 #fff, 16px 0 0 #fff;
}
.story-scene .sc-cloud.c1 { left: 26%; top: 56px; }
.story-scene .sc-cloud.c2 { left: 64%; top: 30px; opacity: .8; }

/* 2枚目: 色を失った夜(丘も地面も灰色に) */
.sc2 { background: linear-gradient(180deg, #0f1430 0%, #1e1a40 60%, #2b2450 100%); --hill: #55596a; --hill-top: #6c7184; --dirt: #34303c; }
.sc2 .sc-hill.a, .sc2 .sc-hill.b { background: var(--hill); }
.sc2 .sc-word { background: #4a475c; color: #c9cbd8; border-color: #0b0a14; box-shadow: none; }
.sc2 .sc-shadow { bottom: 18px; }
.sc2 .sc-eye { border-radius: 0; }
.sc2 .sc-eye.l { bottom: 56px; }
.sc2 .sc-eye.r { bottom: 56px; }
.sc2 .sc-zzz { bottom: 58px; }

/* 3枚目: 夜明け。右から光がさして、色がもどってくる */
.sc3 { background: linear-gradient(180deg, #2c2458 0 28%, #4a3a8c 28% 50%, #a86bb5 50% 70%, #ffb27a 70% 100%); --hill: #4fa83a; --hill-top: #7fdc62; }
.sc3 .sc-hill.a, .sc3 .sc-hill.b { background: var(--hill); }
.sc3 .sc-dawn { background: radial-gradient(circle at 88% 70%, rgba(255,226,150,.8) 0, rgba(255,226,150,0) 46%); }
.sc3 .sc-word { background: #fff; color: #1f4f9e; box-shadow: 0 3px 0 rgba(31,22,14,.45), 0 0 10px rgba(255,220,130,.8); }
.story-scene .sc-hero { bottom: 30px; }

/* 文章: 紙の上で読める色に(金色の太字は紙の上で1.4しかなかった) */
.story-text { color: var(--blk-text); text-shadow: none; font-weight: 800; margin: 20px 4px 16px; }
.story-text b { color: #7a4a0c; background: linear-gradient(transparent 62%, #ffe27a 62%); padding: 0 1px; }
/* ページの点: 四角いブロック */
.story-dots { gap: 8px; }
.story-dot { width: 12px; height: 12px; border-radius: 0; background: #c9bd9e; border: 2px solid var(--blk-ink); }
.story-dot.on { background: var(--blk-gold); transform: none; }
.sc3 .sc-pal.p1 { left: 30%; }   /* ペンギン(左はし)と重ならないように */
@media (prefers-reduced-motion: reduce) {
  .sc2 .sc-word { opacity: .85; }   /* 動かないときは 灰色のふだ として読める濃さに(.55 だと 2.8) */
}

/* ============================================================
   🪨 サブのボタン(.btn-sub)は石ブロック＋白い縁取り文字に(v2.67.3)
   ユーザー指摘「設定画面の『きろくを読みこむ』『動作確認モードを終わる』などの文字に影が付いていて
   読みづらい。ほかの文字と同じように縁取りにして」。
   明るい地に濃い文字＋右下に濃い影(2px 2px)で、文字が二重ににじんで見えていた。
   → 同じ画面の「← ホーム」「鳴らしてみる」(.back-btn)と同じ石ブロックにして、白い文字＋4方向の縁取り(--ol)。
   消す・終わる系(.danger)は赤いブロック。HTML の style="color:…" はやめた(白い文字を上書きしてしまう)
   お話の「とばす」も同じ(古い .story-screen .btn-sub の上書きが残っているので並べて書く)
   ============================================================ */
.btn-sub, .story-screen .btn-sub {
  background: var(--blk-stone); color: #fff; border-color: var(--blk-ink);
  box-shadow: inset 3px 3px 0 var(--blk-stone-l), inset -3px -3px 0 var(--blk-stone-d), 0 6px 0 var(--blk-ink);
  text-shadow: var(--ol);
}
.btn-sub:active, .story-screen .btn-sub:active { box-shadow: inset 3px 3px 0 var(--blk-stone-l), inset -3px -3px 0 var(--blk-stone-d), 0 2px 0 var(--blk-ink); }
.btn-sub.danger { background: var(--blk-red-btn); color: #fff; box-shadow: inset 3px 3px 0 #ee7a70, inset -3px -3px 0 #7a1d17, 0 6px 0 var(--blk-ink); }
.btn-sub.danger:active { box-shadow: inset 3px 3px 0 #ee7a70, inset -3px -3px 0 #7a1d17, 0 2px 0 var(--blk-ink); }

/* ============================================================
   🛡️ きろくを守る(v2.67.4)
   ホームのおしらせ(.keep2)・ホーム画面に追加のやりかた(.guide-*)・はりつけ(.paste-area)
   ============================================================ */
.keep2 { padding: 10px 12px 12px; margin: 0 0 12px; }
.keep2.warn { background: #fff4c9; box-shadow: inset 4px 4px 0 #fffbe6, inset -4px -4px 0 #e6cf7a, 0 6px 0 var(--blk-ink); }
.keep2-head { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--blk-text); }
.keep2 p { margin: 6px 0 10px; font-size: .82rem; font-weight: 700; line-height: 1.55; color: var(--blk-text); }
.keep2 p b { color: #8a2a12; }
.keep2-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.keep2-btns .pxb { padding: 8px 12px; font-size: .88rem; margin-bottom: 4px; }
.keep2-later {
  margin-left: auto; background: none; border: 0; padding: 6px 4px;
  font: inherit; font-size: .8rem; font-weight: 800; color: var(--sub);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.guide-card { text-align: left; }
.guide-icon { display: block; margin: 2px auto 8px; width: 64px; height: 64px; border: 3px solid var(--blk-ink); image-rendering: pixelated; border-radius: 14px; }
.guide-lead { font-size: .92rem; font-weight: 800; line-height: 1.6; text-align: center; margin: 0 0 12px; }
.guide-steps { list-style: none; counter-reset: gstep; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.guide-steps li {
  counter-increment: gstep; position: relative;
  padding: 10px 10px 10px 48px; background: #fff; border: 3px solid var(--blk-ink);
  font-size: .9rem; line-height: 1.5;
}
.guide-steps li::before {
  content: counter(gstep); position: absolute; left: 8px; top: 9px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--blk-gold); border: 3px solid var(--blk-ink);
  font-family: "Segoe UI", Verdana, sans-serif; font-weight: 900; color: var(--blk-text);
}
.guide-steps li small { display: block; margin-top: 3px; font-size: .78rem; font-weight: 700; color: var(--sub); }
.guide-steps li .btn { margin: 8px 0 2px; }
.guide-ok { display: block; font-weight: 900; color: #1f6b2c; }
.guide-ok[hidden] { display: none; }   /* display:block が hidden 属性に勝ってしまうので */
.ios-share { width: 18px; height: 22px; vertical-align: -4px; color: #1f55b3; }

.setting-sub { margin: 14px 0 6px; font-size: .85rem; font-weight: 900; color: var(--blk-text); }
.keep-ok { color: #1f6b2c; font-weight: 800; }
.paste-area {
  display: block; width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 10px;
  font: 16px/1.4 ui-monospace, Consolas, monospace;   /* 16px 未満だと iPhone が勝手に拡大する */
  background: #fff; color: var(--blk-text); border: 3px solid var(--blk-ink); border-radius: 0; resize: vertical;
}

/* ============================================================
   🔥 れんぞく正解ゲージ(v2.68.0)
   学習中のヘッダーにあった「経過時間の時計」を置きかえたもの。
   時計は数が増えるだけで意味が伝わらず、急がせるだけだった(ユーザー指摘)。
   進みぐあいは まんなかの「あと◯問」があるので、ここは**正確さをほめる場所**にする。
   5つ たまると「ひっさつ」(+20XP)。まちがえると 0 にもどる
   ============================================================ */
.session-combo {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 8px 6px; min-width: 78px;
  background: var(--blk-paper); color: var(--blk-text);
  border: 3px solid var(--blk-ink); border-radius: 0;
  box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d);
}
.session-combo .cm-top { display: flex; align-items: center; gap: 3px; line-height: 1; font-size: .8rem; }
.session-combo .cm-n { font-family: "Segoe UI", Verdana, sans-serif; font-size: 1.05rem; font-weight: 900; }
.session-combo .cm-pips { display: flex; gap: 3px; }
.session-combo .cm-pips i {
  display: block; width: 9px; height: 9px;
  background: #c9bd9e; border: 2px solid var(--blk-ink);
}
.session-combo .cm-pips i.on { background: var(--blk-gold); box-shadow: inset 0 2px 0 #ffe88f; }
.session-combo .cm-lab { font-size: .7rem; font-weight: 800; color: var(--sub); white-space: nowrap; line-height: 1.1; }
/* 5つたまった瞬間: 金色に光って「ひっさつ！」 */
.session-combo.burst { background: var(--blk-gold); animation: cmBurst .5s ease; }
.session-combo.burst .cm-lab { color: #6b4a05; }
.session-combo.burst .cm-pips i.on { background: #fff6c9; }
@keyframes cmBurst { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* まちがえたとき: 0にもどる */
.session-combo.miss { animation: cmMiss .4s ease; }
@keyframes cmMiss { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .session-combo.burst, .session-combo.miss { animation: none; }
}

/* 🔤 たんご工場(スペル)のヒントを大きく(v2.68.1・ユーザー指摘「まちがえたときのヒントの文字が小さい」)
   もとは 0.82rem の1行で、長いヒントは「…」で切れていた。2行になってよいことにして大きくする */
.build-hint {
  font-size: 1rem; line-height: 1.45; color: #7a4a0c;
  white-space: normal; overflow: visible; text-overflow: clip;
  max-width: 96%; border-radius: 14px;
}
.build-hint.show { padding: 8px 14px; }
.build-hint b { font-size: 1.25rem; }
/* おてほんの単語は **1行のまま**大きくする。
   吹き出しの高さは まわりの配置で決まっていて伸びないので、block にして2行にすると下が隠れた */
.build-hint b.build-model { display: inline; font-size: 1.6rem; letter-spacing: 2px; vertical-align: -1px; }

/* ⭕ 正解の丸(v2.68.1・ユーザー要望「正解したときの丸を画面いっぱいに」)
   中が空いた輪っかなので、下の問題・選択肢は見えたまま。0.7秒で消える */
.big-circle {
  position: fixed; inset: 0; z-index: 1200; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.big-circle::before {
  content: "";
  width: min(84vw, 84vh); height: min(84vw, 84vh);
  border: min(8vw, 8vh) solid #2f9e44;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(31,22,14,.55), inset 0 0 0 4px rgba(31,22,14,.55), 0 0 40px rgba(47,158,68,.45);
  animation: bigCircleIn .75s cubic-bezier(.2,1.4,.5,1) forwards;
}
@keyframes bigCircleIn {
  0%   { transform: scale(.35); opacity: 0; }
  22%  { transform: scale(1.06); opacity: .95; }
  45%  { transform: scale(1); opacity: .95; }
  100% { transform: scale(1); opacity: 0; }
}
/* 動きを減らす設定のときは、ふわっと出して ふわっと消えるだけにする */
@media (prefers-reduced-motion: reduce) {
  .big-circle::before { animation: bigCircleFade .75s linear forwards; }
  @keyframes bigCircleFade { 0% { opacity: 0; } 15% { opacity: .95; } 55% { opacity: .95; } 100% { opacity: 0; } }
}

/* 🔓 とびらがひらいたときの行(v2.68.2) */
.gate-left.open, .gate-left.open b { color: #7a4a0c; }

/* ============================================================
   📏 ホーム上半分の余白づめ(v2.69.0)
   「きょうのミッション」を **スクロールなしで押せる**ようにするための調整。
   文字の大きさは変えない(v2.67.0の「小さくして詰める」失敗をくり返さないため)。
   余白だけを削って、高さ667pxのiPhone(SE/8)でもミッションが画面に入るようにしてある
   ============================================================ */
.hud2 { margin-bottom: 10px; }
.blk-npc { padding: 8px 10px; }
.play2 { min-height: 64px; margin-bottom: 10px; }
.sec2 { margin: 12px 2px 6px; }
/* 画面の縦が短い端末(iPhone SE 第1世代など・高さ640px以下)では、もう少しだけ詰める。
   3枚のミッションを完全に入れるのは無理なので、**カードが見えはじめる**ところまでを目標にする */
@media (max-height: 640px) {
  .blk-npc { padding: 6px 8px; gap: 8px; }
  .blk-npc .who { width: 60px; height: 66px; }
  .blk-npc .who .penguin-face { scale: 1.1; }
  .blk-npc .say { min-height: 46px; }
  .play2 { min-height: 56px; margin-bottom: 8px; }
  .sec2 { margin: 8px 2px 5px; }
}

/* ============================================================
   🧩 ホームをまとめる(v2.70.0)
   ・「つづきから」「きょうの復習」の大ボタンをやめ、ミッションの3枚に「何をするか」を書いて1つに
   ・ペンギンのセリフは旅の景色の中の吹き出しに。景色の中のペンギンが「話しかける」ボタン
   ・これで景色を上にもどしても、幅375px・高さ667pxでミッションがスクロールなしで押せる
   ============================================================ */
/* 景色の中の吹き出し(空の上に置く。丘のてっぺんは下から78pxなので、その上におさめる) */
.blk-scene { overflow: visible; }
.blk-scene .bs-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bs-say {
  position: absolute; left: 8px; top: 8px; right: 62px; z-index: 3;
  background: #fff; border: 3px solid var(--blk-ink); padding: 6px 9px;
  font-size: .84rem; font-weight: 800; line-height: 1.4; color: var(--blk-text);
  box-shadow: inset -3px -3px 0 #e6dcc0, 0 4px 0 var(--blk-ink);
}
.bs-say b { color: #1f55b3; }
/* 吹き出しの しっぽ(左下・ペンギンの方へ) */
.bs-say::after { content: ""; position: absolute; left: 22px; bottom: -9px; width: 10px; height: 10px; background: #fff; border-right: 3px solid var(--blk-ink); border-bottom: 3px solid var(--blk-ink); transform: rotate(45deg); }
/* 景色のペンギンを「話しかける」ボタンに */
.blk-scene .bs-pen { z-index: 2; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.blk-scene .bs-pen:active { transform: translateY(2px); }
.blk-scene .bs-pen:focus-visible { outline: 3px solid var(--blk-gold); outline-offset: 2px; }

/* ミッションのカード: 何をするか(太字)＋どこ(小さく) */
.m2 { padding: 10px 4px 8px; gap: 2px; }
.m2 .m2-act { font-size: .86rem; font-weight: 900; color: var(--blk-text); text-align: center; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; word-break: keep-all; }
.m2 .m2-act > span { display: inline; }   /* 文字と <wbr> を1つの部品にまとめる(flex に直接置くと折り返せない) */
.m2 .m2-what { min-height: 1.3em; font-size: .72rem; }
.m2.wait .m2-act { color: var(--sub); font-weight: 800; }
.m2.done .m2-act { color: #1f6b2c; }
.m2.done .m2-what { min-height: 0; }

@media (max-height: 640px) {
  /* 縦が短い端末: 景色を低くして、ミッションが画面に入るようにする */
  .blk-scene { height: 132px; }
  .bs-hill { bottom: 28px; height: 34px; }
  .bs-ground { height: 30px; }
  .bs-pen { bottom: 26px; }
  .bs-pals { bottom: 32px; }
  .bs-say { font-size: .8rem; padding: 5px 8px; }
}

/* ============================================================
   🏷️ ホームの見出しをはっきりさせる(v2.70.1)
   ・「きょうのミッション」「ステージをえらぶ」などの見出しが、ただの太字で本文と区別がつきにくかった(ユーザー指摘)
   ・濃い土色の札(ふだ)に明るい文字 + その下に1本線。「ここから新しい区切り」がひと目で分かる
   ・先頭に絵文字(🎯🗺️🎒📅)。ほかの画面の題(🎮 ゲームであそぶ など)と同じ書きかた
   ・右側の情報(0/3 クリア など)は札の外・線の上に置いたまま
   ============================================================ */
.sec2 { align-items: flex-end; gap: 10px; margin: 16px 0 10px; border-bottom: 3px solid var(--blk-dirt-d); }
.sec2 h2 {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .95rem; font-weight: 900; letter-spacing: .06em; line-height: 1;
  color: #fff7e6; background: var(--blk-dirt-d);
  padding: 7px 12px 6px 10px; margin-bottom: -3px;
  border: 3px solid var(--blk-ink); border-bottom: 0;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.16);
}
.sec2 h2 i { font-style: normal; font-size: 1rem; line-height: 1; }
.sec2 > span { padding-bottom: 5px; font-size: .78rem; font-weight: 800; color: var(--blk-text); }
.sec2 > span:empty { display: none; }
.hud2 { margin-bottom: 10px; }
@media (max-height: 640px) {
  .sec2 { margin: 10px 0 6px; }
  .sec2 h2 { padding: 5px 10px 4px 8px; font-size: .9rem; }
}

/* ============================================================
   🔗 出口リンク(v2.70.1) ─ ホームのいちばん下から kamipen.com へ
   ・「兄妹順番ルーレット」と同じ役割のリンク。見た目はこのアプリの石ブロックに合わせる
   ・外部サイトへ出ることが分かるように「ひらく」と ›(矢印)を書く。新しいタブで開く
   ============================================================ */
.site-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 10px 0 6px; padding: 10px 12px; text-decoration: none;
  background: var(--blk-paper); color: var(--blk-text);
  border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 5px 0 var(--blk-ink);
}
.site-link:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 2px 0 var(--blk-ink); }
.site-link .sl-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.site-link .sl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.site-link .sl-title { font-size: .82rem; font-weight: 900; line-height: 1.4; color: var(--blk-text); }
.site-link .sl-sub { font-size: .72rem; font-weight: 800; color: #6b5a44; }
.site-link .sl-arrow { font-size: 1.3rem; font-weight: 900; color: var(--blk-text); flex-shrink: 0; }

/* ============================================================
   🧩 ダブったら「かけらにする／のこす」をえらぶ(v2.71.0)
   ・割った画面: いちばん上が「かけらにする」(おすすめ)、下が「のこす」
   ・ずかん: のこした子には 左上に 🧩マーク。タップで かけらに
   ・かけらの枠: 「のこした なかま Nひき ／ ぜんぶ かけらに +Mこ」
   ============================================================ */
.dupe-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dupe-choice .btn { width: 100%; margin: 0; }
.dupe-sub { font-size: .76rem; font-weight: 700; color: #5a4a2c; line-height: 1.55; }
.dupe-full { font-size: .84rem; font-weight: 800; color: #7a3b12; background: #fff1d6; border: 2px solid #e2b86a; padding: 8px 10px; line-height: 1.5; }
.dupe-done { font-size: .92rem; font-weight: 800; color: var(--blk-text); background: #f3ecff; border: 2px solid #b9a6ec; padding: 10px 12px; line-height: 1.6; }
.dupe-done small { font-size: .76rem; font-weight: 700; color: #4f3f7a; }

.coll-item.has-spare { cursor: pointer; }
.coll-item.has-spare:active { transform: translateY(2px); }
.coll-item.has-spare:focus-visible { outline: 3px solid #7c4fd0; outline-offset: 2px; }
.spare-badge {
  position: absolute; top: -8px; left: -6px; z-index: 2;
  font-size: .8rem; line-height: 1; padding: 3px 4px;
  background: #fff; border: 2px solid #7c4fd0; border-radius: 99px;
}

.spare-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 2px dashed #cfc5f7; }
.spare-txt { flex: 1; min-width: 0; font-size: .82rem; font-weight: 800; color: #3f2f6e; line-height: 1.5; }
.spare-txt small { display: block; font-size: .72rem; font-weight: 700; color: #4f3f7a; }
.spare-all {
  flex-shrink: 0; min-height: 44px; padding: 6px 12px;
  font: inherit; font-size: .76rem; font-weight: 800; line-height: 1.35; color: #fff;
  background: #6b46c1; border: 3px solid var(--blk-ink); box-shadow: 0 4px 0 var(--blk-ink);
  cursor: pointer;
}
.spare-all b { font-size: .9rem; }
.spare-all:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blk-ink); }
.spare-all:disabled { background: #5f5f5f; cursor: default; }   /* #8d8d8d だと白い文字が 3.3:1 で読みにくかった(v2.72.0) */

/* 見出しの札は1行で。右の説明は ちぢんで折り返す(v2.71.0。幅320pxで「ステージをえ／らぶ」と割れていた) */
.sec2 h2 { white-space: nowrap; flex-shrink: 0; }
.sec2 > span { min-width: 0; text-align: right; justify-content: flex-end; flex-wrap: wrap; line-height: 1.35; }

/* ============================================================
   🧩 かけらにする窓(v2.72.0)── 「1ぴきだけ」か「ぜんぶ」かを えらぶ
   ・下から出る窓(スマホで親指がとどく)。ホットバー(900)より上、トースト(1200)より下
   ============================================================ */
.spare-sheet {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.ss-backdrop { position: absolute; inset: 0; background: rgba(31, 22, 14, .6); }
.ss-panel {
  position: relative; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 10px; text-align: center;
  padding: 16px; background: var(--blk-paper); color: var(--blk-text);
  border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--blk-paper-d), 0 6px 0 var(--blk-ink);
}
.ss-emoji { font-size: 3rem; line-height: 1; }
.ss-title { font-size: 1.1rem; font-weight: 900; }
.ss-lead { margin: 0; font-size: .92rem; font-weight: 800; line-height: 1.55; }
.ss-lead small { font-size: .8rem; font-weight: 700; color: #5a4a2c; }
.ss-note { margin: 0; font-size: .8rem; font-weight: 800; color: #7a3b12; line-height: 1.5; }
.ss-panel .btn { width: 100%; margin: 0; }
.ss-panel .btn b { font-size: 1rem; }
/* 「ぜんぶ」は、かけらの枠の「ぜんぶ かけらに」と同じ むらさき。「1ぴきだけ」(金)と ひと目で分ける */
.ss-panel .btn.ss-all {
  background: #6b46c1; color: #fff; border: 3px solid var(--blk-ink);
  box-shadow: inset 3px 3px 0 #8f6ee0, inset -3px -3px 0 #4a2e8f, 0 6px 0 var(--blk-ink);
  text-shadow: var(--ol);
}
.ss-panel .btn.ss-all:active { box-shadow: inset 3px 3px 0 #8f6ee0, inset -3px -3px 0 #4a2e8f, 0 2px 0 var(--blk-ink); }

/* ============================================================
   🧸 たんごキャッチャーの ぬいぐるみの山(v2.73.0)
   ・カプセルの うしろに ぬいぐるみを積んで、本物のクレーンゲームの中みたいにする
   ・背景なので押せない・読み上げない。カプセル(取るもの)より 小さく・うすくして 目立たせない
   ・重なり順: 奥の壁 → 山(ここ) → カプセル → 床 → ガラス → レール・アーム
   ============================================================ */
.stage-crane .crane-prizes {
  position: absolute; left: 11px; right: 11px; top: 30px; bottom: 11px;
  z-index: 1; pointer-events: none; overflow: hidden;
  border-radius: 10px;
  /* 奥の壁: 水玉の ついたての色 */
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 2.5px) 0 0 / 22px 22px,
    linear-gradient(#fbe3f0, #efe3ff 60%, #e6ecff);
}
/* 山(ぬいぐるみが たまっている ふくらみ)を3段。おくほど高く・うすく */
.prize-heap { position: absolute; border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.prize-heap.t0 { left: -10%; right: -10%; bottom: 6px; height: 96px;
  background: radial-gradient(ellipse at 50% 20%, #ffd3e6, #f3a9c9 70%); box-shadow: inset 0 6px 10px rgba(255,255,255,.5); }
.prize-heap.t1 { left: -4%; right: -4%; bottom: 40px; height: 108px; opacity: .9;
  background: radial-gradient(ellipse at 50% 25%, #ffe2c2, #f5c08e 75%); }
.prize-heap.t2 { left: 2%; right: 2%; bottom: 76px; height: 112px; opacity: .8;
  background: radial-gradient(ellipse at 50% 25%, #e3d6ff, #c6b3f2 75%); }
.plush {
  position: absolute; line-height: 1;
  transform: translateX(-50%) rotate(var(--r, 0deg));
  filter: drop-shadow(0 2px 1px rgba(80, 40, 90, .25));
}
/* おくの段は うすく・色を落として「うしろにある」ように。まえの段(カプセルの すきま)は そのまま */
.plush.t1 { opacity: .85; filter: saturate(.9) drop-shadow(0 1px 1px rgba(80, 40, 90, .2)); }
.plush.t2 { opacity: .65; filter: saturate(.7) drop-shadow(0 1px 1px rgba(80, 40, 90, .15)); }
/* すみに プレゼントの箱(ぬいぐるみ以外の景品) */
.prize-box {
  position: absolute; right: 30%; bottom: 178px;
  width: 24px; height: 20px; border-radius: 3px;
  background: #7fc8ff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.15);
  transform: rotate(-8deg); opacity: .85;
}
.box-ribbon {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; background: #ff7aa8;
}
.box-ribbon::after {
  content: ""; position: absolute; left: -7px; right: -7px; top: -5px; height: 6px;
  border-radius: 50%; background: #ff7aa8;
}
/* 上の看板「PRIZE CATCHER」: 明るいピンクに白い文字で 2.1:1 と読みにくかった → 濃いピンクにして、文字も少し大きく(v2.73.0) */
.stage-crane .crane-marquee { background: linear-gradient(#c93a70, #a52a5a); }
.stage-crane .mq-text { font-size: .8rem; text-shadow: 0 1px 1px rgba(0,0,0,.35); }

/* 取り出し口の「GET!」は 8.8px で小さすぎた → 11.5px(v2.73.0) */
.stage-crane .chute-tag { font-size: .72rem; }

/* ============================================================
   ✨ きんいろチャンス(v2.74.0)── ステージぜんたいが金色に光る(正解の的だけを光らせると答えがばれる)
   ============================================================ */
.game-stage.golden {
  box-shadow: inset 0 0 0 4px #ffcf33, 0 0 0 3px #a87a00, 0 0 18px 4px rgba(255, 200, 40, .7);
}
.game-stage.golden::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 236, 140, .95) 1.5px, transparent 2px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(255, 255, 255, .95) 1px, transparent 1.6px) 19px 13px / 46px 46px;
  opacity: .6;
  animation: goldTwinkle 1.1s ease-in-out infinite alternate;
}
@keyframes goldTwinkle { from { opacity: .3; } to { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .game-stage.golden::after { animation: none; } }
/* .golden-badge は v2.78.1 で廃止(お題の中に入れると画面がずれるため、トーストにした) */
.feedback .gold-get { color: #7a4f00; font-weight: 900; }
.feedback .gold-miss { font-size: .82rem; font-weight: 700; }

/* ============================================================
   🃏 ことばカード(v2.74.0)
   しろ → どう → ぎん → きん → にじ。**一度ついた色は戻らない**。忘れたら ほこり(.dusty)
   ============================================================ */
.coll-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.coll-tab {
  flex: 1; min-height: 44px; font: inherit; font-size: .92rem; font-weight: 900; cursor: pointer;
  color: var(--blk-text); background: var(--blk-paper);
  border: 3px solid var(--blk-ink); box-shadow: 0 4px 0 var(--blk-ink);
}
.coll-tab.on { background: var(--blk-dirt-d); color: #fff7e6; }
.coll-tab:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--blk-ink); }

.wc-head { padding: 12px; }
.wc-count { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.wc-chip {
  font-size: .82rem; font-weight: 800; color: var(--blk-text);
  padding: 3px 9px; background: #fffdf7; border: 2px solid #d9cdb4; border-radius: 99px;
}
.wc-chip.t-bronze { border-color: #a8652f; }
.wc-chip.t-silver { border-color: #7d8a9c; }
.wc-chip.t-gold { border-color: #c99416; background: #fff6d6; }
.wc-chip.t-rainbow { border-color: #a46bff; background: #f6efff; }
.wc-how { margin: 8px 0 0; text-align: center; font-size: .8rem; font-weight: 700; color: #4f4026; line-height: 1.55; }
.wc-dustnote { margin: 8px 0 0; padding: 6px 8px; font-size: .82rem; font-weight: 800; color: #3f3322; background: #ece6dc; line-height: 1.5; }
.wc-grades { display: flex; gap: 6px; margin: 2px 0 10px; }
.wc-gtab {
  flex: 1; min-height: 44px; font: inherit; font-size: .88rem; font-weight: 900; cursor: pointer;
  color: var(--blk-text); background: #fffdf7; border: 2px solid var(--blk-ink);
}
.wc-gtab small { display: block; font-size: .72rem; font-weight: 700; }
.wc-gtab.on { background: #fff1c2; box-shadow: inset 0 -4px 0 #c99416; }

.wc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wc-grid.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.wcard2 {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 80px; padding: 12px 4px 8px; font: inherit; text-align: center;
  color: var(--blk-text); background: #fffdf7;
  border: 3px solid #d9cdb4; border-radius: 8px; box-shadow: 0 3px 0 rgba(31, 22, 14, .25);
}
.wcard2:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 22, 14, .25); }
.wcard2:focus-visible { outline: 3px solid #4f7cff; outline-offset: 2px; }
.wc-en { font-family: "Segoe UI", "Verdana", sans-serif; font-size: 1rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.wcard2.long .wc-en { font-size: .8rem; }
.wc-ja { font-size: .72rem; font-weight: 700; color: #4f4026; line-height: 1.3; }
.wc-medal { position: absolute; top: 2px; right: 3px; font-size: .8rem; line-height: 1; }
.wc-pips { font-size: .72rem; line-height: 1; color: #7a5600; letter-spacing: 1px; }
.wc-grid.mini .wcard2 { min-height: 64px; padding: 10px 2px 6px; }
.wc-grid.mini .wc-en { font-size: .82rem; }
.wc-grid.mini .wcard2.long .wc-en { font-size: .72rem; }   /* 10.9px だと小さすぎた(v2.77.1) */
.wc-grid.mini .wc-ja { display: none; }

.wcard2.t-bronze { border-color: #a8652f; background: linear-gradient(#f9e2cc, #fffaf3 55%); }
.wcard2.t-silver { border-color: #7d8a9c; background: linear-gradient(#e4eaf2, #fbfcfe 55%); }
.wcard2.t-gold {
  border-color: #c99416; background: linear-gradient(#ffe38a, #fffaf0 60%);
  box-shadow: 0 3px 0 rgba(140, 100, 0, .45), 0 0 8px rgba(255, 200, 40, .45);
}
.wcard2.t-rainbow {
  border-color: transparent;
  background:
    linear-gradient(#fffdf7, #fffdf7) padding-box,
    linear-gradient(135deg, #ff5e7a, #ffb13d, #ffe14d, #5bd07a, #4fa8ff, #a46bff) border-box;
  box-shadow: 0 3px 0 rgba(90, 60, 150, .4), 0 0 10px rgba(164, 107, 255, .45);
}
/* ほこり: 色は そのまま、上に 灰色のつぶ。文字は読めるように うすく */
.wc-dust {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(105, 95, 85, .38) 1.2px, transparent 1.7px) 0 0 / 9px 9px,
    radial-gradient(circle, rgba(105, 95, 85, .28) 1px, transparent 1.5px) 4px 5px / 11px 11px,
    rgba(190, 180, 165, .3);
}
.wcard2.dusty .wc-medal { filter: grayscale(.7); }

.cardups { text-align: center; }
.cu-title { font-size: .98rem; font-weight: 900; line-height: 1.55; }
.cu-more { margin: 0 0 8px; font-size: .8rem; font-weight: 700; }
.cardups .btn { width: 100%; margin: 4px 0 0; }

/* 結果画面の読みやすさ(v2.74.0。結果画面をはじめて監査に入れて見つかった)
   ・「💰 かくとくXP」: 明るいオレンジ #f59e0b が紙色の上で 1.9:1 → こい こがね色
   ・たまごの「🎓 中1のなかまが入っているよ」: 10.4px → 11.5px */
.xp-summary { color: #7a4f00; }
.egg-card .note small { font-size: .72rem; }

/* 🥚 かけらで むかえた子を ひらく窓(v2.75.0)。えらんだ時点では だれか分からない */
.rv-egg { font-size: 3.4rem; line-height: 1; animation: rvWobble 1.4s ease-in-out infinite; }
@keyframes rvWobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .rv-egg { animation: none; } }
.ss-panel .friend-emoji { font-size: 3.6rem; line-height: 1; }
.ss-panel .friend-rarity { font-size: .92rem; font-weight: 900; }
/* 「❓ むかえる」のマスは、だれが来るか ひみつ(v2.75.0) */
.coll-item.buyable .buy-secret {
  position: absolute; top: -8px; left: -4px; z-index: 2;
  font-size: .7rem; font-weight: 900; color: #fff; background: #6b46c1;   /* 11.2px 未満にしない */
  border: 2px solid var(--blk-ink); border-radius: 99px; padding: 1px 6px;
}


/* 「✕ やめる」「✕ にげる」は1行のまま(ボス戦は題が長く、幅375pxで「にげ／る」と割れていた・v2.75.1) */
.session-quit { white-space: nowrap; }

/* 🏆 実績を 組ごとに分ける(v2.76.0。40種を ただ並べると どこまで来たか分からない) */
.badge-sec { margin: 0 0 18px; }
.badge-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding: 7px 12px 6px 10px;
  font-size: .92rem; font-weight: 900; line-height: 1.3;
  color: #fff7e6; background: var(--blk-dirt-d); border: 3px solid var(--blk-ink);
}
.badge-sec-head b { font-size: .86rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   🐾 相棒(v2.77.0)── ずかんで えらんだ子が ホームの景色で となりに立つ
   ============================================================ */
.bs-pals .bs-buddy { position: relative; font-size: 1.5rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.bs-pals .bs-buddy i { position: absolute; top: -8px; right: -8px; font-size: .7rem; font-style: normal; }
.coll-item.is-buddy { box-shadow: 0 0 0 3px #6b46c1, 0 3px 0 rgba(31,22,14,.25); }
.buddy-badge {
  position: absolute; bottom: -6px; right: -4px; z-index: 2;
  font-size: .8rem; line-height: 1; padding: 2px 4px;
  background: #fff; border: 2px solid #6b46c1; border-radius: 99px;
}
.buddy-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 2px dashed #cfc5f7;
}
.buddy-row.none { justify-content: center; }
.buddy-face { font-size: 1.8rem; line-height: 1; }
.buddy-txt { font-size: .84rem; font-weight: 800; color: #3f2f6e; line-height: 1.5; }
.buddy-txt small { display: block; font-size: .74rem; font-weight: 700; color: #4f3f7a; }

/* ============================================================
   🎨 学年でゲームの景色が変わる(v2.77.0)
   中1 = 昼の草原 / 中2 = 夕暮れの海 / 中3 = 夜空
   ・地の色は**中間の明るさまで**にする(ゲーム内の文字は白い札や色つきカプセルの上に乗るので、
     地を暗くしすぎると読みにくくなる。読みやすさ監査に 3学年ぶん入れてある)
   ・ステージの外側(.game-stage)と、ゲームごとの部品の色だけを差しかえる
   ============================================================ */
.game-stage.g-g2 { background: linear-gradient(#ffe9cf, #cfe9ff); }
.game-stage.g-g3 { background: linear-gradient(#dcd6ff, #cfe2ff); }

/* 🔨 もぐらたたき: 草原 → 砂浜 → 星空の丘 */
.g-g2 .mole-field { background: linear-gradient(#ffd9a8 0 62%, #f3c98b 62%); }
.g-g3 .mole-field { background: linear-gradient(#b9b2ee 0 62%, #8e86c9 62%); }
.g-g2 .hole-rim { background: #d8a765; }
.g-g3 .hole-rim { background: #6f66a8; }

/* 🦘 ジャンプキャッチ: 丘の色と空の色 */
.g-g2 .run-hills { filter: hue-rotate(-28deg) saturate(1.1); }
.g-g3 .run-hills { filter: hue-rotate(200deg) saturate(.85) brightness(.95); }
.g-g2 .run-ground .grass { background: #f0c07a; }
.g-g3 .run-ground .grass { background: #9a93d6; }

/* 🚀 シューティング: 空 → 夕焼け → 宇宙(ただし明るさは残す) */
.g-g2 .shoot-field { background: linear-gradient(#ffd8a8, #ffeccd); }
.g-g3 .shoot-field { background: linear-gradient(#cfc7f5, #e7e2ff); }

/* 🎯 たんごキャッチャー: 中の壁と山の色 */
.g-g2 .crane-prizes { background:
  radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 2.5px) 0 0 / 22px 22px,
  linear-gradient(#ffe3c7, #ffeede 60%, #e6f4ff); }
.g-g3 .crane-prizes { background:
  radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 2.5px) 0 0 / 22px 22px,
  linear-gradient(#e0d8ff, #eee9ff 60%, #dbe7ff); }
.g-g2 .prize-heap.t0 { background: radial-gradient(ellipse at 50% 20%, #ffd7b0, #f0ab6f 70%); }
.g-g2 .prize-heap.t1 { background: radial-gradient(ellipse at 50% 25%, #ffeec2, #f3d98e 75%); }
.g-g2 .prize-heap.t2 { background: radial-gradient(ellipse at 50% 25%, #cfe6ff, #a9c8ef 75%); }
.g-g3 .prize-heap.t0 { background: radial-gradient(ellipse at 50% 20%, #ded3ff, #b3a4ec 70%); }
.g-g3 .prize-heap.t1 { background: radial-gradient(ellipse at 50% 25%, #cfe0ff, #9fb6e8 75%); }
.g-g3 .prize-heap.t2 { background: radial-gradient(ellipse at 50% 25%, #ffd9ef, #e7a9cd 75%); }
.g-g2 .crane-marquee { background: linear-gradient(#c96a2a, #a5501c); }
.g-g3 .crane-marquee { background: linear-gradient(#5b46b8, #3f2f8a); }

/* ============================================================
   📖 章のものがたり(v2.77.0)── 章のはじまりと、ボスを倒したあと
   ・はじまりのお話(.story-scene)と同じ作りで、**色と小物だけ**を土地ごとに差しかえる
   ・lit(色がもどった)では 空と丘があざやかになり、ことばの札が白く光る
   ============================================================ */
.area-card { text-align: center; padding: 16px 14px; }
.area-eyebrow { font-size: .78rem; font-weight: 800; color: #6b5a44; letter-spacing: .06em; }
.area-name { font-size: 1.3rem; font-weight: 900; color: var(--blk-text); margin: 2px 0 10px; }
.area-line { margin: 12px 0 14px; font-size: .95rem; font-weight: 800; line-height: 1.7; color: var(--blk-text); }
.area-card .btn { width: 100%; margin: 0; }
.area-scene {
  position: relative; height: 150px; overflow: hidden;
  border: 3px solid var(--blk-ink);
  background: linear-gradient(var(--sky), #ffffff);
  filter: saturate(.3) brightness(.95);   /* 名前を うしなった土地は 色があせている */
  transition: filter .5s ease;
}
.area-scene.lit { filter: saturate(1.25) brightness(1.06); }   /* ことばが もどると 色がかえる */
.ar-sun { position: absolute; top: 14px; right: 18px; width: 26px; height: 26px; border-radius: 50%; background: #ffe36a; box-shadow: 0 0 0 6px rgba(255,227,106,.35); }
.ar-cloud { position: absolute; height: 12px; border-radius: 99px; background: rgba(255,255,255,.9); }
.ar-cloud.c1 { top: 24px; left: 16px; width: 48px; }
.ar-cloud.c2 { top: 44px; left: 96px; width: 34px; }
.ar-hill { position: absolute; bottom: 26px; border-radius: 50% 50% 0 0; background: var(--hill); }
.ar-hill.a { left: -12%; width: 62%; height: 58px; }
.ar-hill.b { right: -10%; width: 58%; height: 46px; opacity: .85; }
.ar-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: #6b4a2b; box-shadow: inset 0 3px 0 rgba(255,255,255,.18); }
.ar-motif { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.ar-word {
  position: absolute; padding: 2px 7px; font-size: .72rem; font-weight: 800;   /* 11px未満にしない */
  font-family: "Segoe UI", Verdana, sans-serif; color: #6b6b6b;
  background: rgba(255,255,255,.55); border: 2px solid rgba(0,0,0,.18);
}
.area-scene.lit .ar-word { color: #2a2118; background: #fff; border-color: var(--blk-ink); }
.ar-word.w1 { top: 60px; left: 14px; }
.ar-word.w2 { top: 86px; right: 16px; }
.ar-word.w3 { top: 36px; right: 58px; }
@media (prefers-reduced-motion: reduce) { .area-scene { transition: none; } }
/* 🐾 相棒は ペンギンのとなりに ちいさく出る(v2.77.0) */
.penguin { position: relative; }
.pen-buddy { font-size: 1.35rem; line-height: 1; margin: 0 2px 0 -4px; align-self: flex-end; filter: drop-shadow(0 2px 1px rgba(0,0,0,.25)); }

/* ============================================================
   📏 ゲームのお題は 高さを固定する(v2.78.1・ユーザー指摘)
   お題の日本語は単語しだいで 1行になったり2行になったりするので、
   そのたびに下のステージが上下に動いていた。**2行ぶんの高さで固定**して、文は真ん中にそろえる。
   ・中の文は <span> 1つにまとめてある(flex の直下に文を置くと、行の折り返し位置が変わるため)
   ・とても長いお題は .long で少しだけ小さくして、2行に収める
   ============================================================ */
/* お題の枠じたいを すこし小さめにして、**2行ぶんの高さで固定**する。
   高さを固定するぶん 場所を食うので、字と余白を詰めて 前より背が高くならないようにしてある */
.game-prompt { font-size: .95rem; padding: 10px 12px; }
.game-prompt b { font-size: 1.36em; }
.gp-box { min-height: 4.4rem; display: flex; align-items: center; justify-content: center; }
.game-prompt.long { font-size: .86rem; }
.game-prompt.long b { font-size: 1.28em; }
/* 背の低い画面(iPhone SEなど)では、お題もステージも すこし詰めて 1画面に収める */
@media (max-height: 640px) {
  .game-prompt { padding: 8px 10px; margin-bottom: 8px; }
  .gp-box { min-height: 4rem; }
  .game-stage { height: 286px; }
}
/* 🔥 ジャンプキャッチのコンボ札は ステージの中に浮かせる(v2.78.1)。
   お題の上に置くと、出ていないときも 40px ぶん場所を取り、背の低い画面でステージの下がはみ出していた */
.combo-chip.in-stage { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4; margin: 0; }

/* ============================================================
   📅 きょうのゲーム と 🏆 じこベスト(v2.80.0)
   ============================================================ */
.today-game {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 14px; padding: 12px 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--blk-text);
  background: #fff3c4; border: 4px solid var(--blk-ink); border-radius: 0;
  box-shadow: inset 3px 3px 0 #fffbe6, inset -3px -3px 0 #e8c869, 0 5px 0 var(--blk-ink);
}
.today-game:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #fffbe6, inset -3px -3px 0 #e8c869, 0 2px 0 var(--blk-ink); }
.today-game:focus-visible { outline: 3px solid var(--blk-water); outline-offset: 3px; }
.tg-emoji { font-size: 2.5rem; line-height: 1; flex: none; white-space: nowrap; }
.tg-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tg-eyebrow { font-size: .78rem; font-weight: 900; color: #6b4312; letter-spacing: .04em; }
.tg-name { font-size: 1.12rem; font-weight: 900; }
.tg-rule { font-size: .88rem; font-weight: 800; color: #5a3c0e; }
.tg-arrow { font-size: 1.1rem; font-weight: 900; color: #6b4312; flex: none; }
.today-game-note {
  margin: 0 0 14px; padding: 10px 12px; text-align: center; line-height: 1.6;
  font-size: .88rem; font-weight: 800; color: var(--blk-text);
  background: #fff3c4; border: 3px dashed #b8871a;
}
/* えらぶ画面のタイル: きょうのゲームに札、じこベストを下に */
.game-pick-btn { position: relative; }
.game-pick-btn.today { background: #fff7d6; }
.gp-today {
  position: absolute; top: -3px; right: -3px; padding: 2px 8px;
  font-size: .75rem; font-weight: 900; color: #fff; background: #b4471d; border: 3px solid var(--blk-ink);
}
.gp-best { font-size: .78rem; font-weight: 800; color: #5f4a2c; }
/* 結果画面 */
.rule-line, .best-line { margin-top: 8px; padding: 6px 10px; font-size: .9rem; font-weight: 800; color: #4a3a26; background: #fffaf0; border: 2px solid #d9cba6; }
.rule-line.got { color: #5a3c0e; background: #fff3c4; border-color: #b8871a; }
.best-line small { display: block; margin-top: 2px; font-size: .78rem; color: #5f4a2c; }
.best-line s { color: #6b5a44; }
.best-line.new { position: relative; font-size: 1rem; color: #7a2c0c; background: #ffe9a8; border: 3px solid #b8871a; animation: bestPop .5s ease both; }
@keyframes bestPop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .best-line.new { animation: none; } }
/* お知らせ(トースト)は 2行に折り返す(v2.80.0)。1行で「…」と切っていたので、
   スマホでは きんいろチャンスの「+20XP」が見えていなかった */
.toast { width: max-content; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.5; }
/* ゲームのチケットが0まいの画面の 大ボタン(v2.80.0)。明るい だいだい・赤のグラデーションに白い字で、
   読みやすさの基準(4.5)に届いていなかった(1.6 / 2.5)。色みは そのまま、濃さだけ上げる */
.big-btn.review { background: linear-gradient(#b4521d, #963f13); box-shadow: 0 4px 0 #6e2d0b; }
.big-btn.review:active { box-shadow: 0 1px 0 #6e2d0b; }
.big-btn.boss { background: linear-gradient(#b8322a, #93231d); }
.big-btn.review .bb-text small, .big-btn.boss .bb-text small { opacity: 1; }
.best-line .nw { white-space: nowrap; }   /* 「120 → 220XP」は 1つのまとまりで折り返す */

/* ============================================================
   🆕 学年でふえるゲーム(v2.81.0): えらぶ画面の NEW と 🔒、レベル結果の お知らせ
   ============================================================ */
.gp-new {
  position: absolute; top: -3px; left: -3px; padding: 2px 7px;
  font-size: .75rem; font-weight: 900; color: #fff; background: #2a6ad4; border: 3px solid var(--blk-ink);
}
.game-pick-btn.locked { cursor: default; background: #e9e2cf; box-shadow: inset 3px 3px 0 #f4eedd, inset -3px -3px 0 #cdbf9c, 0 5px 0 var(--blk-ink); }
.game-pick-btn.locked:active { transform: none; }
.game-pick-btn.locked .gp-emoji { filter: grayscale(1); opacity: .75; }
.game-pick-btn.locked .gp-name { color: #4a3a26; }
.gp-lock { font-size: .75rem; font-weight: 800; line-height: 1.4; color: #4a3a26; text-align: center; }
.new-game-line {
  margin-top: 10px; padding: 8px 10px; text-align: center; line-height: 1.6;
  font-size: .92rem; font-weight: 800; color: #1d3f7a; background: #e3efff; border: 3px solid #2a6ad4;
}
.new-game-line b { display: block; font-size: 1.1rem; }
.new-game-line small { display: block; font-size: .78rem; color: #2a4a7a; }

/* ============================================================
   🏄 なみのりランナー(v2.81.0・中2で解放)── 夕暮れの海(中1=昼 / 中3=夜にも合わせる)
   ・`.game-stage.g-g2` が背景を上書きするので、`.game-stage.stage-surf` で指定する
   ============================================================ */
.game-stage.stage-surf { background: linear-gradient(#ffb070 0%, #ffd9a0 23%, #3a86c8 24%, #23609e 100%); }
.game-stage.stage-surf.g-g1 { background: linear-gradient(#8fd0ff 0%, #d9f0ff 23%, #3aa0e0 24%, #1f74b8 100%); }
.game-stage.stage-surf.g-g3 { background: linear-gradient(#2a2c66 0%, #5a4f9a 23%, #24508e 24%, #142f5e 100%); }
.surf-sea { position: absolute; inset: 0; overflow: hidden; }
.surf-sun { position: absolute; top: 6%; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 0 8px rgba(255, 229, 138, .35); }
.g-g3 .surf-sun { background: #fff6d6; box-shadow: 0 0 0 6px rgba(255, 246, 214, .25); width: 34px; height: 34px; margin-left: -17px; }
.surf-isle { position: absolute; top: calc(24% - 12px); height: 12px; border-radius: 50% 50% 0 0; background: #4f7a3a; }
.surf-isle.isle-a { left: 8%; width: 70px; }
.surf-isle.isle-b { right: 10%; width: 46px; height: 9px; top: calc(24% - 9px); }
.g-g3 .surf-isle { background: #23314f; }
.surf-water { position: absolute; left: 0; right: 0; top: 24%; bottom: 0; overflow: hidden; }
.surf-lanes { position: absolute; inset: 0; width: 100%; height: 100%; }
.surf-lanes line { stroke: rgba(255, 255, 255, .4); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 10 8; }
.surf-stripe {
  position: absolute; left: 10%; right: 10%; top: 0; height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .5); opacity: 0;
  animation: surfStripe 2.4s linear infinite;
}
.surf-stripe.s2 { animation-delay: .8s; }
.surf-stripe.s3 { animation-delay: 1.6s; }
@keyframes surfStripe {
  0% { transform: translateY(0) scaleX(.35); opacity: 0; }
  20% { opacity: .55; }
  100% { transform: translateY(240px) scaleX(1.25); opacity: 0; }
}
.surf-gates {
  position: absolute; left: 6px; right: 6px; top: 20%; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  transform-origin: 50% 0; transform: translate3d(0, 0, 0) scale(.5); will-change: transform;
}
.surf-gate { position: relative; height: 54px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.surf-gate:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sg-pole { position: absolute; bottom: 0; width: 9px; height: 40px; background: repeating-linear-gradient(#e8473a 0 8px, #fff 8px 16px); border: 2px solid #1f160e; }
.sg-pole.l { left: 4px; }
.sg-pole.r { right: 4px; }
.sg-sign {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  min-width: calc(100% - 4px); width: max-content; padding: 5px 4px;
  font-family: "Segoe UI", Verdana, sans-serif; font-size: 1rem; font-weight: 800; line-height: 1.2;
  color: #1f2a44; background: #fffdf5; border: 3px solid #1f160e; white-space: nowrap; text-align: center;
}
.surf-gate.long .sg-sign { font-size: .8rem; }
.surf-gate.xlong .sg-sign { font-size: .7rem; letter-spacing: -.02em; }   /* 11px未満にしない */
.surf-gate.pass .sg-sign { background: #c9f2c0; border-color: #1f6a2a; }
.surf-gate.out { opacity: .35; cursor: default; }
.surf-gate.out .sg-sign { text-decoration: line-through; }
.surf-rider { position: absolute; bottom: 8px; width: 70px; height: 72px; transform: translateX(-50%); transition: left .2s ease-out; z-index: 3; pointer-events: none; }
.surf-wake { position: absolute; bottom: 0; left: 50%; width: 76px; height: 16px; margin-left: -38px; border-radius: 50%; background: rgba(255, 255, 255, .6); animation: surfWake .5s ease-in-out infinite alternate; }
@keyframes surfWake { from { transform: scaleX(.85); opacity: .5; } to { transform: scaleX(1.05); opacity: .8; } }
.surf-board { position: absolute; bottom: 5px; left: 4px; right: 4px; height: 13px; border-radius: 50%; background: linear-gradient(90deg, #ffcf3f, #ff7a4a); border: 2px solid #1f160e; }
.surf-pen { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%) scale(.85); transform-origin: 50% 100%; }
.surf-rider.hop { animation: surfHop .5s ease-out; }
.surf-rider.wipe { animation: surfWipe .8s ease-in-out; }
@keyframes surfHop { 0%, 100% { margin-bottom: 0; } 45% { margin-bottom: 26px; } }
@keyframes surfWipe { 0%, 100% { rotate: 0deg; } 30% { rotate: -28deg; } 60% { rotate: 18deg; } }
@media (prefers-reduced-motion: reduce) {
  .surf-stripe, .surf-wake, .surf-rider.hop, .surf-rider.wipe { animation: none; }
}

/* ============================================================
   🌠 ほしくずし(v2.81.0・中3で解放)── 夜空のブロックくずし
   ============================================================ */
.game-stage.stage-brick {
  background: radial-gradient(120% 70% at 50% 110%, #4a3f8f 0, rgba(74, 63, 143, 0) 60%), linear-gradient(#0f1436, #1f2660 70%, #2d2f78);
  touch-action: none;   /* 指でバーを動かすあいだ 画面がスクロールしないように */
}
.brick-sky { position: absolute; inset: 0; pointer-events: none; }
.bs-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: bsTwinkle 1.8s ease-in-out infinite alternate; }
@keyframes bsTwinkle { from { opacity: .25; } to { opacity: .9; } }
.brick-field { position: absolute; inset: 0; }
.brick {
  position: absolute; border-radius: 3px; background: var(--bc);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.brick.r0 { --bc: #ff8fb1; }
.brick.r1 { --bc: #ffcf5c; }
.brick.r2 { --bc: #7fe0c4; }
.brick.r3 { --bc: #8fb6ff; }
.brick.star {
  --bc: linear-gradient(#fff0a0, #ffc21a);
  display: flex; align-items: center; justify-content: center; font-size: .82rem; line-height: 1;
  box-shadow: 0 0 9px 2px rgba(255, 214, 64, .75), inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(160, 110, 0, .35);
}
.stage-brick.assist .brick.star { animation: brickCall .55s ease-in-out infinite alternate; }
@keyframes brickCall { from { box-shadow: 0 0 6px 1px rgba(255, 214, 64, .6); } to { box-shadow: 0 0 16px 6px rgba(255, 236, 140, 1); } }
.brick.new { animation: brickNew .5s ease-out; }
@keyframes brickNew { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.brick.pop { animation: brickPop .3s ease-out forwards; }
@keyframes brickPop { to { transform: scale(1.5); opacity: 0; } }
.brick-paddle {
  position: absolute; left: 0; top: 0; height: 12px; border-radius: 99px;
  background: linear-gradient(#f4f8ff, #9fb7ff); box-shadow: 0 0 10px rgba(160, 190, 255, .85);
  transition: width .25s ease-out;
}
.brick-ball {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #fff, #ffe9a8 60%, #ffc94a); box-shadow: 0 0 10px 2px rgba(255, 236, 160, .85);
}
.stage-brick.fire .brick-ball { background: radial-gradient(circle at 35% 35%, #fff6c8, #ff9a3c 55%, #e5481e); box-shadow: 0 0 14px 5px rgba(255, 120, 40, .9); }
.brick-hint {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 4px 12px; font-size: .82rem; font-weight: 800; color: #fff; background: rgba(10, 14, 40, .78); border-radius: 99px;
}
.brick-hint.hidden, .brick-power.hidden, .brick-quiz.hidden { display: none; }
.brick-power {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 4; white-space: nowrap; pointer-events: none;
  padding: 6px 14px; font-size: 1rem; font-weight: 900; color: #5a3c0e; background: #fff3c4; border: 3px solid #1f160e;
}
.brick-power.pop { animation: powerPop .35s ease-out; }
@keyframes powerPop { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.brick-quiz {
  position: absolute; inset: 0; z-index: 6; padding: 14px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  background: rgba(8, 11, 34, .72);
}
.bq-title { font-size: 1.05rem; font-weight: 900; color: #ffe680; }
.bq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bq-btn {
  min-height: 58px; padding: 10px 6px; cursor: pointer;
  font-family: "Segoe UI", Verdana, sans-serif; font-size: 1.05rem; font-weight: 800; color: #1f2a44; overflow-wrap: anywhere;
  background: #fffdf5; border: 3px solid #1f160e; border-radius: 0; box-shadow: 0 4px 0 #1f160e;
}
.bq-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f160e; }
.bq-btn.long { font-size: .85rem; }
.bq-btn.right { background: #c9f2c0; }
.bq-btn.wrong { background: #ffd0cc; }
.bq-btn:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .bs-star, .stage-brick.assist .brick.star, .brick.new, .brick-power.pop { animation: none; }
}
.session-head .phase-label { word-break: keep-all; overflow-wrap: anywhere; letter-spacing: 0; padding: 5px 10px; }   /* 「｜」のところで折り返す(v2.81.0) */
@media (max-width: 360px) { .session-head .phase-label { font-size: .74rem; padding: 4px 7px; } }   /* 320px幅でも2行までに収める */

/* ============================================================
   🥇 ゲームのメダル と 🌌 毎回かわる面(v2.82.0)
   ============================================================ */
.medal-line, .stage-line { margin-top: 8px; padding: 6px 10px; font-size: .9rem; font-weight: 800; color: #4a3a26; background: #fffaf0; border: 2px solid #d9cba6; }
.medal-line small, .stage-line small { display: block; margin-top: 2px; font-size: .78rem; color: #5f4a2c; }
.medal-line.new { font-size: 1rem; color: #7a2c0c; background: #ffe9a8; border: 3px solid #b8871a; animation: bestPop .5s ease both; }
.stage-line.new { color: #1d3f7a; background: #e3efff; border: 3px solid #2a6ad4; animation: bestPop .5s ease both; }
.stage-line.new small { color: #2a4a7a; }
.gp-stage { font-size: .75rem; font-weight: 800; color: #2a4a7a; }
@media (prefers-reduced-motion: reduce) { .medal-line.new, .stage-line.new { animation: none; } }
/* ほしくずし: 5段目の色 */
.brick.r4 { --bc: #c9a6ff; }

/* 🌊 なみのりランナーの うみ(かざりは 門より うしろ = z-index 1 まで) */
.sc-palm { position: absolute; left: calc(8% + 18px); top: calc(24% - 40px); font-size: 26px; line-height: 1; z-index: 1; }
.sc-whale { position: absolute; right: 9%; top: calc(24% - 10px); font-size: 26px; line-height: 1; z-index: 1; }
.sc-spout { position: absolute; left: 4px; top: -14px; width: 10px; height: 14px; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.85); animation: scSpout 1.6s ease-out infinite; }
@keyframes scSpout { 0% { transform: scaleY(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1.2) translateY(-6px); opacity: 0; } }
.sc-rainbow {
  position: absolute; left: 50%; top: 1%; width: 180px; height: 70px; margin-left: -90px; z-index: 0; opacity: .7;
  border-radius: 180px 180px 0 0;
  background: radial-gradient(circle at 50% 100%, transparent 50%, #ff6b6b 50% 56%, #ffb347 56% 62%, #ffe76b 62% 68%, #7ee08a 68% 74%, #6bb8ff 74% 80%, #a98bff 80% 86%, transparent 86%);
}
.sc-dolphin { position: absolute; left: -40px; top: 38%; font-size: 26px; line-height: 1; z-index: 1; animation: scDolphin 5s linear infinite; }
@keyframes scDolphin {
  0% { transform: translate(0, 0) rotate(-20deg); }
  25% { transform: translate(110px, -34px) rotate(0deg); }
  50% { transform: translate(220px, 0) rotate(25deg); }
  75%, 100% { transform: translate(440px, 30px) rotate(25deg); opacity: 0; }
}
.surf-sea.course-ice .surf-water { background: linear-gradient(#8fd0f0, #4a9ccf); }
.sc-ice { position: absolute; z-index: 1; height: 12px; border-radius: 45%; background: #fff; box-shadow: inset 0 -3px 0 #cfe6f5; }
.sc-ice.a { left: 5%; top: 40%; width: 44px; }
.sc-ice.b { right: 6%; top: 55%; width: 54px; }
.sc-ice.c { left: 8%; top: 78%; width: 36px; }
.sc-seal { position: absolute; right: calc(6% + 14px); top: calc(55% - 20px); font-size: 22px; line-height: 1; z-index: 1; }
.surf-sea.course-night { background: linear-gradient(#171a4a 0%, #3a3477 23%, #1d3f7a 24%, #0e244e 100%); }
.course-night .surf-sun { background: #fff6d6; box-shadow: 0 0 0 6px rgba(255, 246, 214, .25); width: 32px; height: 32px; margin-left: -16px; }
.course-night .surf-isle { background: #1f2b47; }
.sc-stars {
  position: absolute; left: 0; right: 0; top: 0; height: 24%; z-index: 0;
  background:
    radial-gradient(circle, #fff 1px, transparent 1.6px) 0 0 / 34px 22px,
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px) 17px 11px / 46px 30px;
}
@media (prefers-reduced-motion: reduce) { .sc-spout, .sc-dolphin { animation: none; } .sc-dolphin { left: 20%; } }