/* コードでゴー！ — 子ども向けなので 大きく・まるく・カラフルに */

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

/* display を指定した要素でも hidden 属性を必ず効かせる */
[hidden] {
  display: none !important;
}

/* ルビ（ふりがな） */
rt {
  font-size: 0.5em;
  opacity: 0.8;
}

/* ルビの分だけ行間に余裕を持たせる */
.goal-text,
.teach p,
.status,
.hint-box,
#modal-body,
.manabi,
.help-table td,
.world-desc {
  line-height: 2;
}


/* ── 同梱ゲームフォント（OFLライセンス・assets/fonts/ 参照） ──
   見出し=DotGothic16（ドット文字）／本文=M PLUS Rounded 1c（丸ゴシック）。
   サブセット済み（かな・英数全域＋ゲーム内で使う漢字）。無い字はシステムフォントへフォールバック */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('../assets/fonts/MPLUSRounded1c-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('../assets/fonts/MPLUSRounded1c-Bold.woff2') format('woff2');
  font-weight: 500 900;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/DotGothic16-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #eaf6ff;
  --panel: #ffffff;
  --ink: #2b3a4a;
  --accent: #ff8a3d;
  --accent-dark: #e06a1b;
  --green: #37b26c;
  --floor: #e9f7d9;
  --floor-line: #cfe9b6;
  --radius: 16px;
}

html {
  font-size: 16px;
}

body {
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDGothic', 'Yu Gothic', 'Meiryo', sans-serif;
  background: linear-gradient(180deg, #d9efff 0%, var(--bg) 40%);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ── サイドの自社おしらせ枠（ハウス広告） ─────────────────
   広い画面でだけ表示（中央 main は max 1080px。両脇に十分な余白があるときのみ）。
   狭い画面＝プレイ用タブレット等では出さない（プレイ中の集中を妨げない）。 */
.side-rail {
  position: fixed;
  top: 96px;
  width: 176px;
  z-index: 5;
  display: none;
}

.rail-left { left: 20px; }
.rail-right { right: 20px; }

@media (min-width: 1500px) {
  .side-rail { display: block; }
}

.rail-tag {
  font-size: 0.72rem;
  font-weight: bold;
  color: #9aa9b7;
  letter-spacing: 0.1em;
  margin: 0 0 6px 6px;
}

.house-ad {
  display: block;
  background: var(--panel);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(43, 58, 74, 0.12);
  transition: transform 0.15s, border-color 0.15s;
}

.house-ad:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.ad-emoji { font-size: 2.6rem; line-height: 1.1; }
.ad-body { font-size: 0.82rem; color: #5a6c7d; line-height: 1.9; margin-top: 8px; }
.ad-body b { color: var(--accent-dark); }
.ad-cta { margin-top: 10px; font-size: 0.82rem; font-weight: 800; color: var(--accent-dark); }

/* 教室広告: 実ブランドのロゴ（ロックアップ）＋水色〜青のトーン */
.ad-akiba {
  background: linear-gradient(180deg, #eaf7ff, #ffffff);
}
.ad-akiba:hover { border-color: #45c2f0; }
.ad-akiba-logo {
  display: block;
  width: 88%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 2px auto 8px;
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(43, 58, 74, 0.14);
}

/* E-Space広告: e-space.app のブランド（ティールの立方体ロゴ＋ブルー基調） */
.ad-espace { background: linear-gradient(180deg, #f4f8ff, #ffffff); }
.ad-espace-mark {
  display: block;
  width: 52px;
  height: 52px;
  margin: 2px auto 6px;
  object-fit: contain;
}
.ad-espace .ad-cta { color: #4f7dff; }
.ad-espace:hover { border-color: #4f7dff; }
.ad-espace-logo {
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: #1a2138;
  margin: 0 0 2px;
}
.ad-espace-logo::first-letter { color: #1eb6a0; } /* ロゴのティールに合わせる */

.rail-note {
  text-align: center;
  font-size: 0.78rem;
  color: #8395a6;
  line-height: 1.8;
  margin-top: 12px;
}

/* ── フッター（運営情報） ─────────────────────── */
.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px 24px;
  font-size: 0.82rem;
  color: #5a6c7d;
  line-height: 2;
  text-align: center;
}

.app-footer a {
  color: #2b6cb0;
  font-weight: bold;
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

.app-footer small {
  font-size: 0.72rem;
  color: #8395a6;
}

/* 法務リンク（保護者向け・小さく控えめに） */
.footer-legal {
  display: flex;
  gap: 14px;
  font-size: 0.72rem;
}
.footer-legal a {
  color: #8395a6;
  font-weight: normal;
}

header.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}

.app-header h1 {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: transform 0.1s, filter 0.1s;
}
#app-logo:hover { filter: brightness(1.08); }
#app-logo:active { transform: scale(0.97); }
#app-logo:focus-visible { outline: 3px solid #ffd76a; outline-offset: 2px; }

.header-logo {
  height: 46px;
  width: auto;
  display: block;
}

/* ── ミドルコース（コードを書く）のダークコンソール基調 ─────────
   テキストモード版ロゴに合わせて、基調（背景・ヘッダー・タイトル画面・
   フッターと、背景に直接載る文字）だけ夜のコードランドにする。
   パネル・カードの中身は明るいまま＝子どもの可読性を優先し全画面ダーク化はしない。
   切り替えは app.js の updateBrandLogo()（プロフィールのコースに連動） */
body.logo-skin-code,
body.logo-skin-code[data-screen] { /* 「モード別の世界観」セクションの背景より優先し、夜で統一 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cpath d='M26 14h8v8h8v8h-8v8h-8v-8h-8v-8h8z' fill='%23142038'/%3E%3Crect x='96' y='34' width='12' height='12' transform='rotate(45 102 40)' fill='%231b2444'/%3E%3Crect x='60' y='92' width='7' height='7' fill='%23132a30'/%3E%3Cpath d='M118 108h7v7h7v7h-7v7h-7v-7h-7v-7h7z' fill='%231c2040'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0a1020 0%, #0e1730 40%);
  background-repeat: repeat, no-repeat;
  background-size: 150px 150px, auto;
}
body.logo-skin-code .app-header .subtitle { color: #8ea6c9; }
body.logo-skin-code .rail-tag { color: #5a6f92; }
body.logo-skin-code .rail-note { color: #8ea6c9; }
body.logo-skin-code .app-footer,
body.logo-skin-code .app-footer small,
body.logo-skin-code .app-footer a,
body.logo-skin-code .footer-legal a { color: #7f92ad; }
/* 背景に直接載る見出し・説明文 */
body.logo-skin-code .world h2,
body.logo-skin-code .play-top h2,
body.logo-skin-code .play-top h2 .subtitle,
body.logo-skin-code .zukan-count,
body.logo-skin-code .words-lead { color: #dfe8f6; }
body.logo-skin-code .world-desc,
body.logo-skin-code .opt-label,
body.logo-skin-code .atelier-scratch-note { color: #8ea6c9; }
body.logo-skin-code .words-count { color: #c3b48c; }
/* パネル・カードは純白でなく青みがかった白＋青系の影＋薄い外周で夜に馴染ませる
   （中身の文字色はそのまま＝可読性は維持） */
body.logo-skin-code { --panel: #f6f8fc; }
body.logo-skin-code .panel {
  border: 1px solid rgba(109, 178, 255, 0.28);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}
body.logo-skin-code .mode-card {
  border-color: #3a4d75;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 12px 20px rgba(0, 0, 0, 0.3);
}
body.logo-skin-code .stage-card {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}
/* ホーム: カード群を中央に（右側の空きを解消） */
body.logo-skin-code .mode-cards { margin-inline: auto; }
/* タイトル画面: 中央の視覚密度を上げる（ロゴとビットを少し大きく） */
body.logo-skin-code .title-logo img { width: min(600px, 92vw); }
body.logo-skin-code .title-hero .hero-img {
  transform: scale(1.18);
  transform-origin: bottom center;
}
body.logo-skin-code .title-hero { margin-top: 12px; }
body.logo-skin-code .title-start { margin-top: 14px; }
/* タイトル画面: 夜のコードランド */
body.logo-skin-code .title-sky {
  background:
    radial-gradient(circle at 82% 14%, rgba(77, 150, 255, 0.16), transparent 45%),
    linear-gradient(#0a1020 0%, #101a34 55%, #1a2a4a 100%);
  border-color: #3d85f0;
}
body.logo-skin-code .title-cloud { opacity: 0.14; filter: brightness(0.6); }
body.logo-skin-code .title-ground { filter: brightness(0.4) saturate(0.7); }
body.logo-skin-code .title-presents,
body.logo-skin-code .title-tag { color: #6db2ff; }
body.logo-skin-code .title-copy { color: #7f92ad; }
body.logo-skin-code .title-logo img { filter: none; }

.app-header .subtitle {
  font-size: 0.85rem;
  color: #5a6c7d;
}

.app-header .spacer {
  flex: 1;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.icon-btn {
  background: var(--panel);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(43, 58, 74, 0.15);
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 20px 48px;
  /* body(flex縦) の子が中身の最小幅で膨らまないように（スマホ幅の要） */
  min-width: 0;
  width: 100%;
}

/* ── ステージ選択 ─────────────────────────── */
.world {
  margin-bottom: 28px;
  /* すみっこキャラ（.world-bug）の絶対配置の基準にする */
  position: relative;
}

.world h2 {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.world-desc {
  font-size: 0.85rem;
  color: #5a6c7d;
  margin-bottom: 10px;
}

.stage-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stage-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 168px;
  text-align: left;
  box-shadow: 0 3px 8px rgba(43, 58, 74, 0.12);
  transition: transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-card:hover {
  transform: translateY(-3px);
}

.stage-card .stage-num {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-weight: bold;
  width: 34px;
  text-align: center;
  padding: 2px 0;
}

.stage-card.cleared .stage-num {
  background: var(--green);
}

.stage-card .stage-title {
  font-weight: bold;
  font-size: 0.95rem;
}

.stage-card .stage-stars {
  color: #f5b301;
  letter-spacing: 2px;
}

/* ロック中のステージ・レッスン（フリーミアム） */
.stage-card.locked {
  opacity: 0.7;
  background: #eef2f6;
}

.stage-card.locked .stage-num {
  background: #9fb0c0;
}

.stage-card.locked .stage-stars {
  color: #8395a6;
  font-size: 0.75rem;
  letter-spacing: 0;
}

.home-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  max-width: 720px;
}

/* 補助メニューのボタンは幅をそろえて整列（モバイルで幅バラバラを防ぐ）。
   flex にするとルビ要素が個別アイテムになり途中で折り返すため、
   通常のインライン流し＋中央寄せにする。高さは同じ行でグリッドが自動でそろえる。 */
.home-actions .btn {
  margin: 0;
  padding: 14px 14px;
  text-align: center;
  line-height: 1.7;
}

/* クリア証明書は達成のごほうび＝目立たせて全幅に */
.home-actions #btn-certificate {
  grid-column: 1 / -1;
}

.plan-text {
  font-size: 0.92rem;
  line-height: 2.1;
  margin: 10px 0;
}

.plan-sub {
  font-size: 0.82rem;
  color: #5a6c7d;
}

.plan-row {
  margin-top: 6px;
}

/* がんばりレポート */
.report-summary {
  background: #eef7ee;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: bold;
  line-height: 2.2;
  margin-bottom: 14px;
}

.report-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.report-section h3 {
  font-size: 0.95rem;
  margin-bottom: 6px;
  line-height: 2;
}

.report-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-row {
  display: flex;
  justify-content: space-between;
  background: #f4f8fb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  line-height: 1.9;
}

.report-stars {
  color: #f5b301;
  letter-spacing: 2px;
}

/* ── プレイ画面 ─────────────────────────── */
.play-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.play-top h2 {
  font-size: 1.1rem;
}

.play-top .stars {
  color: #f5b301;
  letter-spacing: 2px;
  font-size: 1.05rem;
}

.btn {
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(43, 58, 74, 0.18);
}

.btn-plain {
  background: var(--panel);
  color: var(--ink);
}

.btn-run {
  background: var(--green);
  color: #fff;
  font-size: 1.15rem;
  padding: 12px 26px;
}

.btn-run:hover {
  background: #2c9a5b;
}

body.running .btn-run {
  opacity: 0.5;
  pointer-events: none;
}

.play-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px) {
  .play-grid {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 3px 10px rgba(43, 58, 74, 0.12);
}

.goal-text {
  font-size: 0.95rem;
  margin-bottom: 12px;
  background: #fff6e8;
  border-radius: 10px;
  padding: 8px 12px;
}

#board-holder {
  display: flex;
  justify-content: center;
}

#board {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--cell) - 1px), var(--floor-line) calc(var(--cell) - 1px), var(--floor-line) var(--cell)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--cell) - 1px), var(--floor-line) calc(var(--cell) - 1px), var(--floor-line) var(--cell)),
    var(--floor);
  border: 3px solid var(--floor-line);
  border-radius: 8px;
}

#board .cell {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.62);
  line-height: 1;
}

#board .cell.wall {
  background: #b98764;
}

#board .cell.goal {
  background: #fff3b0;
}

#board .cell.gem {
  transition: transform 0.25s, opacity 0.25s;
}

#board .cell.gem.got {
  transform: scale(1.6);
  opacity: 0;
}

#robot {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  left: 0;
  top: 0;
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell)));
  transition: transform 0.26s ease;
  z-index: 5;
}

#robot.no-anim,
#robot.no-anim .arrow-wrap {
  transition: none;
}

#robot .body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.66);
  line-height: 1;
}

#robot .body svg {
  display: block;
}

#robot .arrow-wrap {
  position: absolute;
  inset: 0;
  transition: transform 0.2s ease;
}

#robot .arrow {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--cell) * 0.28);
  color: var(--accent-dark);
}

#robot.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -5px; }
  50% { margin-left: 5px; }
  75% { margin-left: -3px; }
}

.status {
  min-height: 1.4em;
  margin-top: 10px;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.status.bad {
  color: #d43f3f;
  font-weight: bold;
}

.status.warn {
  color: #b07a00;
}

/* ── エディタがわ ─────────────────────────── */
.teach {
  background: #eef7ff;
  border: 2px solid #bcdcf5;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.teach h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.teach h3 code {
  background: #2b3a4a;
  color: #aef3c1;
  border-radius: 6px;
  padding: 2px 8px;
}

.teach p {
  font-size: 0.88rem;
}

.teach pre {
  margin-top: 8px;
  background: #263238;
  color: #e8f5e9;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  overflow-x: auto;
}

/* ── エディタ切り替えタブ（ブロック ⇔ コード） ─────────── */
.editor-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.tab {
  background: #e4ecf3;
  color: #55677a;
  border-radius: 12px 12px 4px 4px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
}

.tab.active {
  background: var(--accent);
  color: #fff;
}

/* ── ブロックエディタ（Scratch 風・タップで組み立て） ────── */
.block-btn {
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 0.95rem;
  font-weight: bold;
  border: none;
  border-bottom: 4px solid rgba(0, 0, 0, 0.18);
  color: #fff;
}

.block-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.block-cmd {
  background: #4c97ff; /* Scratch の「うごき」ブルー系 */
}

.block-loop {
  background: #ffab19; /* 「せいぎょ」オレンジ系 */
}

.block-if {
  background: #40bf4a;
}

.block-workspace {
  background: #f4f8fb;
  border: 2px dashed #c9d7e2;
  border-radius: 12px;
  padding: 10px;
  min-height: 180px;
  max-height: 380px;
  overflow-y: auto;
}

.block-list {
  border: 2px dashed transparent;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  min-height: 40px;
}

.block-list.active {
  border-color: var(--accent);
  background: #fff7ef;
}

.block-list-label {
  font-size: 0.72rem;
  color: #8395a6;
  line-height: 1.8;
}

.block {
  border-radius: 10px;
  color: #fff;
  padding: 6px 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  touch-action: none; /* タッチでのドラッグ＆ドロップ用（スクロールは枠の余白で） */
  cursor: grab;
}

/* 実行中ブロックのハイライト */
.block.executing {
  outline: 4px solid #ffd54f;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(255, 213, 79, 0.5), 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* ドラッグ＆ドロップ */
.block.drag-src {
  opacity: 0.35;
}

.block-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: 0.9;
  transform: rotate(2deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.drop-indicator {
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  margin: 2px 4px;
}

.block .block-list {
  background: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
}

.block .block-list.active {
  background: #fff7ef;
}

.block-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.block-title {
  flex: 1;
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1.9;
}

.loop-n {
  display: inline-block;
  background: #fff;
  color: #b06f00;
  border-radius: 8px;
  padding: 0 10px;
  margin: 0 2px;
}

.loop-step {
  background: rgba(255, 255, 255, 0.9);
  color: #55677a;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  font-weight: bold;
}

.block-del {
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-weight: bold;
}

.block-code-view {
  margin-top: 10px;
}

.block-code-view summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: #40556a;
  line-height: 2;
}

.block-code-view pre {
  background: #263238;
  color: #e8f5e9;
  border-radius: 10px;
  padding: 12px;
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-x: auto;
}

.palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.chip {
  background: #f0f4f8;
  border: 2px solid #d5dfe8;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.85rem;
}

.chip:hover {
  border-color: var(--accent);
}

#editor {
  width: 100%;
  min-height: 220px;
  background: #263238;
  color: #e8f5e9;
  caret-color: #ffd54f;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 1rem;
  line-height: 1.7;
  resize: vertical;
}

body.running #editor {
  opacity: 0.6;
  pointer-events: none;
}

.editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.hint-box {
  margin-top: 12px;
  background: #fff9db;
  border: 2px dashed #f2d675;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

/* ── モーダル ─────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 45, 60, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}

.modal-card {
  background: var(--panel);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

#modal-emoji {
  font-size: 3rem;
}

#modal-title {
  font-size: 1.4rem;
  margin: 6px 0;
}

#modal-stars {
  color: #f5b301;
  font-size: 1.8rem;
  letter-spacing: 6px;
  min-height: 1em;
}

#modal-body {
  margin: 10px 0;
  font-size: 0.92rem;
  white-space: pre-wrap;
}

.manabi {
  background: #eef7ee;
  border: 2px solid #bfe3c0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  text-align: left;
  margin: 12px 0;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-next {
  background: var(--accent);
  color: #fff;
}

/* ── プロフィール ─────────────────────────── */
.screen-title {
  font-size: 1.3rem;
  margin: 10px 0 16px;
  line-height: 2;
}

.profile-chip {
  padding: 8px 14px;
  font-size: 0.9rem;
}

/* ヘッダーの「ゲーム素材」（デザインキット＝素材ショップへの導線） */
.kit-shop-chip {
  padding: 8px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.kit-shop-chip .pix-icon {
  vertical-align: -3px;
}

.profile-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.profile-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 3px 8px rgba(43, 58, 74, 0.12);
  transition: transform 0.15s;
}

.profile-card:hover {
  transform: translateY(-3px);
}

.profile-avatar {
  font-size: 2.2rem;
}

.profile-card-wrap {
  position: relative;
}

.profile-card-wrap .profile-card {
  padding-right: 34px;
}

.profile-edit-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #f0f4f8;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  opacity: 0.85;
}

.profile-edit-btn:hover {
  background: #fff3e6;
}

/* 着せ替え（ビットのいろ） */
.skin-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skin-btn {
  background: #f0f4f8;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 76px;
}

.skin-btn.selected {
  border-color: var(--accent);
  background: #fff3e6;
}

.skin-btn.locked {
  opacity: 0.65;
}

.skin-btn svg {
  display: block;
}

.skin-name {
  font-size: 0.78rem;
  font-weight: bold;
  color: #55677a;
}

/* バッジ獲得トースト */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: #2b3a4a;
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 60;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  line-height: 1.8;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* レポートのバッジ一覧 */
.report-badges {
  grid-column: 1 / -1;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.badge-cell {
  background: #fff8e0;
  border: 2px solid #f2d675;
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}

.badge-cell.locked {
  background: #f0f2f5;
  border-color: #dfe4ea;
  opacity: 0.75;
}

.badge-emoji { font-size: 2rem; line-height: 1.2; }
.badge-name { font-weight: 900; font-size: 0.85rem; line-height: 1.7; }
.badge-desc { font-size: 0.72rem; color: #5a6c7d; line-height: 1.6; }

/* プロフィール編集の危険操作（削除） */
.danger-zone {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 2px dashed #e6d5d5;
  text-align: right;
}

.btn-danger {
  background: #e05252;
  color: #fff;
}

.btn-danger:hover {
  background: #c73e3e;
}

.profile-form {
  max-width: 520px;
}

.profile-form h3 {
  margin-bottom: 10px;
  line-height: 2;
}

.form-label {
  font-size: 0.88rem;
  color: #5a6c7d;
  margin: 10px 0 6px;
}

.avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-btn {
  background: #f0f4f8;
  border: 3px solid transparent;
  border-radius: 12px;
  font-size: 1.6rem;
  width: 52px;
  height: 52px;
}

.avatar-btn.selected {
  border-color: var(--accent);
  background: #fff3e6;
}

/* コース選択（プロフィール作成時） */
.course-pick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.course-btn {
  flex: 1;
  min-width: 180px;
  background: #f0f4f8;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.course-btn.selected {
  border-color: var(--accent);
  background: #fff3e6;
}

.course-emoji {
  font-size: 1.8rem;
}

.course-name {
  font-weight: bold;
  line-height: 2;
}

.course-sub {
  font-size: 0.75rem;
  color: #8395a6;
}

.course-badge {
  font-size: 0.85rem;
}

.profile-row {
  display: flex;
  gap: 10px;
}

.profile-row input {
  flex: 1;
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 10px 14px;
  border: 2px solid #d5dfe8;
  border-radius: 12px;
}

.profile-row input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ルビ付き疑似プレースホルダ（placeholder 属性はルビ不可のため input に重ねる） */
.input-wrap {
  position: relative;
  flex: 1;
  display: flex;
}

.input-placeholder {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa9b7;
  pointer-events: none;
  line-height: 1.3;
}

/* ── レベル表示 ─────────────────────────────── */
.level-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border-radius: 14px;
  padding: 12px 18px;
  margin: -6px 0 18px;
  max-width: 720px;
  box-shadow: 0 3px 8px rgba(43, 58, 74, 0.1);
}

.level-robot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 76px;
  height: 82px;
}

.level-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.level-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-badge {
  background: #6c5ce7;
  color: #fff;
  font-weight: bold;
  border-radius: 999px;
  padding: 4px 14px;
}

.level-title {
  font-weight: bold;
  line-height: 2;
}

.level-bar {
  flex: 1;
  min-width: 120px;
  height: 12px;
  background: #e4ecf3;
  border-radius: 999px;
  overflow: hidden;
}

.level-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6c5ce7, #a55eea);
  border-radius: 999px;
  transition: width 0.4s;
}

.level-next {
  font-size: 0.8rem;
  color: #5a6c7d;
  line-height: 2;
}

.profile-level {
  background: #efeaff;
  color: #6c5ce7;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 10px;
}

.levelup {
  background: linear-gradient(90deg, #efeaff, #fdeff5);
  border: 2px solid #c9b8f5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 2;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.levelup-robot {
  flex: 0 0 auto;
}

.levelup-text {
  flex: 1;
}

/* ── スコアアタック・ランキング ─────────────────── */
.score-status {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2;
  color: #b03a3a;
}

.score-card .stage-num {
  background: #6c5ce7;
}

/* スコアアタックの じかん・レベル選択 */
.score-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 2px 0 14px;
}
.opt-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.opt-label {
  font-weight: 800;
  font-size: 0.9rem;
  color: #5a6c7d;
  margin-right: 2px;
}
.opt-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 6px 15px;
  border-radius: 999px;
  border: 2px solid #d7e0ea;
  background: #fff;
  color: #5a6c7d;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s, color 0.12s;
}
.opt-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.opt-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.duel-card .stage-num {
  background: #e0559b;
}

.score-overlay .ov-player {
  font-size: 1.6rem;
  font-weight: 900;
  color: #e0559b;
  line-height: 1.6;
}

.ranking-panel {
  max-width: 640px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f8fb;
  border-radius: 12px;
  padding: 10px 14px;
}

.ranking-row.top3 {
  background: #fff8e0;
  border: 2px solid #f2d675;
}

.rank-place {
  width: 44px;
  font-weight: bold;
  font-size: 1.05rem;
}

.rank-name {
  flex: 1;
  font-weight: bold;
}

.rank-detail {
  font-size: 0.78rem;
  color: #5a6c7d;
  line-height: 2;
}

.rank-score {
  font-weight: bold;
  font-size: 1.05rem;
  color: #e07b1b;
}

/* ランキング大画面（観客）モード */
#btn-bigrank-exit { display: none; }

body.bigscreen .app-header,
body.bigscreen .app-footer,
body.bigscreen .side-rail,
body.bigscreen #btn-bigrank,
body.bigscreen #btn-ranking-back {
  display: none;
}

body.bigscreen #btn-bigrank-exit { display: inline-block; }

body.bigscreen main { padding: 20px 40px; }

body.bigscreen .ranking-panel {
  max-width: 1100px;
}

body.bigscreen #screen-ranking h2 {
  font-size: 2.4rem;
}

body.bigscreen .ranking-row {
  padding: 18px 26px;
  gap: 18px;
}

body.bigscreen .rank-place {
  width: 90px;
  font-size: 2.2rem;
}

body.bigscreen .rank-name {
  font-size: 1.8rem;
}

body.bigscreen .rank-detail {
  font-size: 1.1rem;
}

body.bigscreen .rank-score {
  font-size: 2rem;
}

/* おうちでもあそべる（URL/QR）パネル */
.takehome-panel {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.takehome-lead {
  font-size: 0.95rem;
  line-height: 2;
  margin-bottom: 16px;
}

.takehome-qr {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

.qr-placeholder {
  width: 200px;
  height: 200px;
  border: 3px dashed #cfd8e0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8395a6;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.9;
}

.takehome-url {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 1.15rem;
  font-weight: bold;
  color: #2b6cb0;
  background: #eef4fb;
  border-radius: 12px;
  padding: 12px 16px;
  word-break: break-all;
}

.takehome-note {
  font-size: 0.9rem;
  line-height: 2;
  margin-top: 16px;
}

.takehome-note a {
  color: #2b6cb0;
  font-weight: bold;
}

/* ── そつぎょうテスト（クイズ） ─────────────────── */
.quiz-card .stage-num {
  background: #2b9348;
}

.quiz-card.quiz-passed .stage-num {
  background: #f5b301;
}

.quiz-panel {
  max-width: 680px;
  margin: 0 auto;
}

.quiz-progress {
  font-size: 0.9rem;
  color: #5a6c7d;
  line-height: 2;
}

.quiz-scoreboard {
  font-size: 0.85rem;
  color: #2b9348;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 8px;
}

.quiz-question {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 2.2;
  margin-bottom: 10px;
}

.quiz-code {
  background: #263238;
  color: #e8f5e9;
  border-radius: 10px;
  padding: 12px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: 12px;
}

.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-choice {
  background: #f0f4f8;
  border: 2px solid #d5dfe8;
  border-bottom-width: 4px;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1.05rem;
  font-weight: bold;
  text-align: left;
  line-height: 1.9;
  color: var(--ink);
}

.quiz-choice:hover:not(:disabled) {
  border-color: var(--accent);
}

.quiz-choice:disabled {
  cursor: default;
  opacity: 0.9;
}

.quiz-choice.correct {
  background: #d8f3dc;
  border-color: #2b9348;
}

.quiz-choice.wrong {
  background: #ffd6d6;
  border-color: #e05252;
}

.quiz-feedback {
  margin-top: 14px;
  background: #f7fbff;
  border: 2px solid #cfe3f5;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.quiz-feedback-mark {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2;
}

.quiz-feedback-mark.is-ok {
  color: #2b9348;
}

.quiz-feedback-mark.is-ng {
  color: #e05252;
}

.quiz-exp {
  font-size: 0.92rem;
  line-height: 2;
  margin: 8px 0 12px;
  text-align: left;
}

/* ── ホーム（モード選択） ─────────────────────── */
.mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 720px;
}

.mode-card {
  background: var(--panel);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(43, 58, 74, 0.14);
  transition: transform 0.15s;
}

.mode-card:hover {
  transform: translateY(-4px);
}

.mode-emoji {
  font-size: 3rem;
}

.mode-name {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 2;
}

.mode-desc {
  font-size: 0.85rem;
  color: #5a6c7d;
  line-height: 2;
}

.mode-progress {
  background: #eef7ee;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--green);
}

/* ── タイピング道場 ─────────────────────────── */
.typing-panel {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* スコアアタックの「よーい・カウントダウン」オーバーレイ */
.score-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.score-overlay .ov-emoji {
  font-size: 5rem;
  animation: bob 1s ease-in-out infinite;
}

.score-overlay .ov-msg {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.8;
  color: var(--ink);
}

.score-overlay .ov-count {
  font-size: 8rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  animation: pop 0.9s ease-out;
}

.score-overlay .ov-count.go {
  font-size: 5rem;
  color: var(--green);
}

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

@keyframes pop {
  0% { transform: scale(2); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
}

.ime-warning {
  background: #fff2f0;
  border: 2px solid #f5b7ae;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.88rem;
  line-height: 2;
  margin-bottom: 10px;
}

.typing-kana {
  min-height: 2.2em;
  font-size: 1.05rem;
  line-height: 2;
  color: #40556a;
}

.typing-target {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 2rem;
  letter-spacing: 2px;
  margin: 8px 0 4px;
  min-height: 1.5em;
  word-break: break-all;
}

.typing-target .done {
  color: #b9c6d2;
}

.typing-target .now {
  color: var(--accent-dark);
  border-bottom: 4px solid var(--accent);
  animation: blink 1s infinite;
}

.typing-target .now.miss {
  color: #fff;
  background: #e05252;
  border-radius: 4px;
}

.typing-target .todo {
  color: var(--ink);
}

@keyframes blink {
  0%, 100% { border-bottom-color: var(--accent); }
  50% { border-bottom-color: transparent; }
}

.typing-progress {
  font-size: 0.9rem;
  color: #5a6c7d;
}

.shift-hint {
  min-height: 2em;
  font-size: 0.88rem;
  line-height: 2;
  color: #b07a00;
  font-weight: bold;
}

/* キーボードガイド（JIS 近似） */
.keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  user-select: none;
}

.kb-row {
  display: flex;
  gap: 6px;
}

.key {
  background: #f0f4f8;
  border: 2px solid #d5dfe8;
  border-bottom-width: 4px;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  color: #55677a;
}

.key.home {
  box-shadow: inset 0 -6px 0 -3px #c3d2df;
}

.key-shift {
  width: 76px;
}

.key-space {
  width: 240px;
}

.key.next {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(1px);
}

@media (max-width: 640px) {
  .key {
    width: 26px;
    height: 34px;
    font-size: 0.65rem;
  }
  .key-shift { width: 48px; }
  .key-space { width: 150px; }

  /* スマホ: ヘッダーをコンパクトに（タイトルの縦崩れ防止） */
  header.app-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .app-header h1 {
    font-size: 1.1rem;
    white-space: nowrap;
  }
  .app-header .subtitle { display: none; }
  .icon-btn { width: 36px; height: 36px; font-size: 1rem; }
  .profile-chip { font-size: 0.82rem; padding: 8px 12px; }
  .kit-shop-chip { font-size: 0.82rem; padding: 8px 10px; }
  main { padding: 8px 12px 40px; }
  .world-bug { width: 40px; height: 40px; top: 2px; right: 4px; }
}

/* ── つかいかたモーダル ─────────────────────── */
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
  margin-top: 10px;
}

.help-table th,
.help-table td {
  border-bottom: 1px solid #e2e8ee;
  padding: 7px 6px;
  vertical-align: top;
}

.help-table code {
  background: #f0f4f8;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ── ストーリー: ソースのかけら収集メーター ─────────────── */
.kakera-tracker {
  background: linear-gradient(135deg, #fff6e6, #ffeccc);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 26px;
}

.kakera-tracker h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.kakera-count {
  color: var(--accent-dark);
  font-weight: 900;
}

.kakera-slots {
  display: flex;
  gap: 8px;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 6px;
}

.kakera-slot {
  filter: grayscale(1) opacity(0.35);
  transition: transform 0.2s;
}

.kakera-slot.got {
  filter: none;
  transform: scale(1.08);
}

.kakera-badge {
  font-size: 1rem;
  vertical-align: middle;
}

/* メモリー（相棒）の導入セリフ */
.memori-line {
  background: #eef6ff;
  border-left: 4px solid #3d8bff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #2b4a6b;
  line-height: 1.9;
  margin-bottom: 10px;
}

/* ── ラスボス: グリッチ城 ─────────────── */
.boss-world {
  background: linear-gradient(135deg, #2b1a3a, #3a1f2e);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: #fff;
}

.boss-world h2 {
  color: #ffd6f0;
}

.boss-world .world-desc {
  color: #e6d3f0;
}

.boss-card {
  background: #4a2a5e;
  color: #fff;
  border: 2px solid #ff5db1;
}

.boss-card .stage-title,
.boss-card .stage-stars {
  color: #fff;
}

.boss-card .stage-num {
  background: #ff5db1;
}

.boss-card.locked {
  opacity: 0.75;
}

.boss-card.cleared {
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
}

/* ── 仲間（パーティー）ストリップ ─────────────── */
.party-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 8px 0 4px;
}

.party-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.party-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 58px;
  padding: 6px 2px;
  border-radius: 12px;
  background: #ffffffaa;
  border: 2px solid #f0d9b8;
  filter: grayscale(1) opacity(0.5);
  transition: transform 0.15s;
}

.party-member.joined {
  filter: none;
  border-color: var(--accent);
  background: #fff;
}

.party-member.joined:hover {
  transform: translateY(-2px);
}

.party-emoji {
  font-size: 1.5rem;
  line-height: 1.2;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.party-emoji .char-img,
.party-emoji svg { width: 40px; height: 40px; object-fit: contain; }

.party-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}

/* ── カットシーン（メモリー／グリッチの語り） ─────────────── */
.cutscene-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 14, 34, 0.82);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
}

.cutscene-stage {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.cutscene-portrait {
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  animation: cut-pop 0.25s ease;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 130px;
}
.cutscene-portrait .char-img { width: 128px; height: 128px; object-fit: contain; }
.cutscene-portrait svg { width: 116px; height: auto; }

.cutscene-portrait.villain {
  filter: drop-shadow(0 0 16px rgba(255, 60, 140, 0.85));
}

/* キャラのドット絵（quests 由来）共通 */
.char-img { display: inline-block; vertical-align: middle; object-fit: contain; }

/* ビット（quests hero・レベル連動ドット絵） */
.hero-img { display: inline-block; vertical-align: middle; object-fit: contain; image-rendering: auto; }
.cutscene-portrait .hero-img { width: 132px; height: 132px; }
.level-robot .hero-img,
.levelup-robot .hero-img { filter: drop-shadow(0 4px 8px rgba(15, 35, 56, 0.2)); }
#robot .body .hero-img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.skin-btn .hero-img { width: 48px; height: 48px; }
.cert-emblem .hero-img { filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.5)); }

@keyframes cut-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.cutscene-bubble {
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px 12px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cutscene-name {
  font-weight: 900;
  color: var(--accent-dark);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.cutscene-text {
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--ink);
  min-height: 2.6em;
}

.cutscene-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.cutscene-dots {
  display: flex;
  gap: 6px;
}

.cut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.cut-dot.on {
  background: #fff;
  transform: scale(1.2);
}

/* ── ボス戦: グリッチ HP バナー ─────────────── */
.boss-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #3a1030, #521436);
  border: 2px solid #ff5db1;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: #fff;
}

.boss-face {
  font-size: 2rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.boss-face .char-img { width: 48px; height: 48px; object-fit: contain; }
.boss-face.hit { animation: shake 0.3s; }

/* ボスのHP＝のこりバグ（直すと消える） */
.boss-bugs { display: flex; gap: 4px; margin-top: 5px; }
.mini-bug { width: 20px; height: 20px; object-fit: contain; transition: opacity 0.3s, transform 0.3s; }
.mini-bug.fixed { opacity: 0.18; filter: grayscale(1); transform: scale(0.8); }

/* デバッグ面のゴール文に添える小さなバグ */
.inline-bug { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }

.boss-meta {
  flex: 1;
}

.boss-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffd6f0;
  margin-bottom: 3px;
}

.boss-hp {
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
}

.boss-hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff3c8c, #ff8ac0);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.boss-hp-fill.low {
  background: linear-gradient(90deg, #ff2d2d, #ffb03c);
}

.boss-taunt {
  font-size: 0.78rem;
  color: #ffd6f0;
  max-width: 110px;
  line-height: 1.5;
}

/* かけら入手モーダルの見出し */
.kakera-get {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent-dark);
  margin-bottom: 6px;
  animation: cut-pop 0.3s ease;
}

/* ── 特訓（タイピング道場）の物語フレーミング ─────────────── */
.play-top h2 .subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: #7a8a99;
  margin-left: 4px;
}

/* コンパイ（賢者）の案内は緑みで、メモリー（青）と差別化 */
.compi-line {
  background: #eefaf0;
  border-left-color: #2b9348;
  color: #235c37;
}

/* ── 2台でせーの（あいことば・シード対戦） ─────────────── */
.seed-card .stage-num {
  background: #2b6cb0;
}

#seed-input {
  width: 100%;
  font-size: 1.2rem;
  padding: 10px 12px;
  border: 2px solid #cdd8e3;
  border-radius: 12px;
  text-align: center;
  margin: 6px 0 4px;
}

#seed-input:focus {
  outline: none;
  border-color: var(--accent);
}

.ov-sub {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: 4px;
}

.seed-score {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--accent-dark);
  line-height: 1.1;
  margin-bottom: 4px;
}

.seed-score span {
  font-size: 1.1rem;
  margin-left: 4px;
}

/* BGM オフのアイコンは少し薄く */
.icon-btn.off {
  opacity: 0.5;
}

/* 次の冒険（出生のなぞ）フックのカード */
.epilogue-card {
  background: linear-gradient(135deg, #1a2b4a, #3a2b5e);
  color: #fff;
  border: 2px solid #ffd36e;
}

.epilogue-card .stage-title,
.epilogue-card .stage-stars {
  color: #fff;
}

.epilogue-card .stage-num {
  background: #ffb03c;
}

/* 進捗レポートの「冒険の記録」物語ブロック */
.report-story {
  background: linear-gradient(135deg, #fff7e6, #eef6ff);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  line-height: 2;
}

.report-story p {
  margin: 4px 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.report-story b {
  color: var(--accent-dark);
}

.report-tags {
  font-size: 0.85rem;
  color: #235c37;
}

/* ── ワールド固有の背景ビジュアル（外部依存ゼロ・CSS＋絵文字） ─────────── */
#board-holder {
  position: relative;
  border-radius: 14px;
  padding: 10px;
  transition: background 0.4s ease;
  overflow: hidden;
}

/* 盤面のうしろに、その地方の情景（大きな絵文字）をうっすら */
#board-holder::before {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 2px;
  font-size: 3.4rem;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
#board-holder > #board { position: relative; z-index: 1; }

/* ワールド別の空（遠景は末尾の「リッチ化P1」セクションで雲・丘を重ねる） */
#board-holder[data-world="w1"] { background: linear-gradient(#bfe3f7 0%, #e3f4fd 60%, #d6efc9 100%); }
#board-holder[data-world="w2"] { background: linear-gradient(#b3dced 0%, #dff0f9 60%, #cfe9f2 100%); }
#board-holder[data-world="w3"] { background: linear-gradient(#a9d3e8 0%, #d5ecdb 55%, #bfe0b8 100%); }
#board-holder[data-world="w4"] { background: linear-gradient(#ffd9a8 0%, #ffeacb 55%, #ecd9b0 100%); }
#board-holder[data-world="w5"] { background: linear-gradient(#9d92bb 0%, #c3bad8 60%, #b1a6cb 100%); }
#board-holder[data-world="w6"] { background: linear-gradient(#ffe1b3 0%, #f8ecd2 60%, #eedfb8 100%); }
#board-holder[data-world="boss"] { background: linear-gradient(#1c1832 0%, #2f2950 65%, #3a3358 100%); }

/* 選択画面: 地方ごとに左アクセント */
.world[data-world="w1"] { border-left: 5px solid #7bc47f; padding-left: 10px; }
.world[data-world="w2"] { border-left: 5px solid #4aa3e0; padding-left: 10px; }
.world[data-world="w3"] { border-left: 5px solid #3f9d54; padding-left: 10px; }
.world[data-world="w4"] { border-left: 5px solid #a06fd6; padding-left: 10px; }
.world[data-world="w5"] { border-left: 5px solid #7a8a6a; padding-left: 10px; position: relative; }
/* バグの森の かわいいバグ（てんとう虫） */
.world-bug {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  pointer-events: none;
  animation: bug-wobble 2.4s ease-in-out infinite;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}
@keyframes bug-wobble {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .world-bug { animation: none; } }

/* ── クリア証明書（印刷/掲示用） ─────────────── */
.certificate {
  max-width: 720px;
  margin: 8px auto 24px;
  background: linear-gradient(180deg, #fffdf5, #fff7e6);
  border: 8px double #d4af37;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(43, 58, 74, 0.18);
}

.cert-inner {
  border: 2px solid #e3c869;
  border-radius: 8px;
  padding: 22px 26px 18px;
  text-align: center;
  color: #4a3a1a;
}

.cert-emblem svg { display: block; margin: 0 auto 4px; }

.cert-head {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #b8860b;
}

.cert-sub {
  font-size: 0.9rem;
  color: #8a6d2a;
  margin-bottom: 14px;
}

.cert-name {
  font-size: 1.7rem;
  font-weight: 900;
  color: #2b3a4a;
  border-bottom: 3px solid #d4af37;
  display: inline-block;
  padding: 4px 24px 6px;
  margin-bottom: 14px;
}

.cert-avatar { margin-right: 8px; }
.cert-dono { font-size: 1rem; font-weight: 700; color: #6a5a3a; }

.cert-body {
  font-size: 0.98rem;
  line-height: 2.1;
  max-width: 560px;
  margin: 0 auto 16px;
  text-align: left;
}

.cert-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cert-stats > div {
  background: #fff;
  border: 2px solid #e3c869;
  border-radius: 12px;
  padding: 8px 16px;
  min-width: 96px;
}

.cert-stats b { display: block; font-size: 1.3rem; color: #b8860b; }
.cert-stats span { font-size: 0.75rem; color: #6a5a3a; }

.cert-concepts {
  font-size: 0.85rem;
  color: #6a5a3a;
  margin-bottom: 18px;
  line-height: 2.2;
}

.cert-chip {
  display: inline-block;
  background: #fff4d6;
  border: 1px solid #e3c869;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 3px;
  font-weight: 700;
  color: #8a6d2a;
}

.cert-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  border-top: 1px dashed #d4af37;
  padding-top: 12px;
}

.cert-date { font-size: 0.85rem; color: #6a5a3a; }

.cert-issuer {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2b3a4a;
  line-height: 1.8;
  text-align: center;
}

.cert-game { color: var(--accent-dark); }

.cert-seal {
  width: 58px;
  height: 58px;
  border: 3px solid #d64545;
  border-radius: 50%;
  color: #d64545;
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
  flex-shrink: 0;
}

/* 印刷時は証明書だけ出す */
@media print {
  .app-header,
  .app-footer,
  .side-rail,
  .no-print,
  #toast,
  #cutscene {
    display: none !important;
  }
  body { background: #fff; }
  main { max-width: none; margin: 0; padding: 0; }
  .certificate { box-shadow: none; margin: 0 auto; }
}

/* ワールド6（じぶんのわざ／関数）の背景 */
#board-holder[data-world="w6"] { background: linear-gradient(160deg, #fff3e0, #ffe8cc); }
#board-holder[data-world="w6"]::before { content: '📜'; }
.world[data-world="w6"] { border-left: 5px solid #e0902b; padding-left: 10px; }

/* ── なぞのとびら（プログラミング謎解きゲート） ─────────────── */
.nazo-card {
  background: linear-gradient(135deg, #3a2b5e, #5e2b4a);
  color: #fff;
  border: 2px solid #ffd36e;
}
.nazo-card .stage-title,
.nazo-card .stage-stars { color: #fff; }
.nazo-card .stage-num { background: #ffb03c; }

.nazo-panel {
  max-width: 620px;
  margin: 0 auto;
}

.nazo-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.nazo-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e2e8ee;
  color: #8395a6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}
.nazo-dot.now { background: var(--accent); color: #fff; }
.nazo-dot.done { background: #2b9348; color: #fff; }

.nazo-theme {
  font-size: 0.85rem;
  color: #5a6c7d;
  line-height: 1.9;
  margin-bottom: 10px;
}

.nazo-q {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 10px;
}

.nazo-code {
  background: #1e2b3a;
  color: #d6e6ff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: 12px;
  white-space: pre;
}

.nazo-input {
  width: 100%;
  font-size: 1.2rem;
  padding: 12px 14px;
  border: 2px solid #cdd8e3;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 8px;
}
.nazo-input:focus { outline: none; border-color: var(--accent); }
.nazo-input.shake { animation: shake 0.4s; border-color: #e05a5a; }

.nazo-feedback {
  min-height: 1.8em;
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 8px;
}
.nazo-feedback.ok { color: #2b9348; font-weight: 700; }
.nazo-feedback.ng { color: #d64545; font-weight: 700; }

.nazo-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.nazo-hint {
  margin-top: 10px;
  background: #fff7e6;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  line-height: 1.9;
}

/* スタッフ設定行（つかいかたモーダル内） */
.staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line, #dbe6f0);
  font-size: 0.85rem;
  color: #5a6c7d;
}
.staff-row #btn-boss-style {
  font-size: 0.85rem;
  padding: 7px 14px;
}

/* グリッチ城に ふわふわ漂うエラーゴースト */
.boss-world { position: relative; }
.world-bug.boss-ghost {
  width: 52px;
  height: 52px;
  top: 10px;
  right: 16px;
  opacity: 0.9;
  animation: ghost-float 3.2s ease-in-out infinite;
}
@keyframes ghost-float {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-8px); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) { .world-bug.boss-ghost { animation: none; } }

/* ── (a) ビットの歩行アニメ（1歩ごとに ぴょこっ） ─────────────── */
#robot .body.hop .hero-img {
  animation: hero-hop 0.28s ease;
}
@keyframes hero-hop {
  0% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(-16%) scaleY(1.04); }
  70% { transform: translateY(2%) scaleY(0.96); }
  100% { transform: translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  #robot .body.hop .hero-img { animation: none; }
}

/* ── (b) クリア証明書の集合絵（ビット＋旅の仲間） ─────────────── */
.cert-party {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cert-party .char-img {
  filter: drop-shadow(0 3px 6px rgba(138, 109, 42, 0.35));
}
.cert-party .hero-img {
  margin: 0 4px;
}

/* ── (c) 大画面デモ: 応援バナー＋ライブ更新フラッシュ ─────────────── */
.bigrank-banner {
  display: none; /* ふだんは隠す。大画面モードでだけ出す */
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 4px auto 18px;
}
body.bigscreen .bigrank-banner { display: flex; }
.bigrank-banner .bigrank-text {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent-dark);
}
#bigrank-chars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
body.bigscreen .ranking-panel { max-width: 900px; margin: 0 auto; }

.ranking-list.flash {
  animation: rank-flash 0.9s ease;
}
@keyframes rank-flash {
  0% { background: #fff4d6; box-shadow: 0 0 0 4px var(--gold, #ffca3a); }
  100% { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .ranking-list.flash { animation: none; } }


/* ── オリジナルゲーム工房（Scratch 制作アドバイザー） ─────────── */
.mode-card.locked {
  /* カード全体を薄くせず、絵と説明だけ弱める（タイトルと解放条件は
     はっきり読めるように＝Codexデザインレビュー 2026-07-26） */
  background: #eef2f6;
}
.mode-card.locked .mode-emoji,
.mode-card.locked .mode-desc { opacity: 0.55; }
.mode-card.locked .mode-progress { font-weight: 800; }
.mode-atelier .mode-emoji { filter: none; }

.atelier-lead {
  max-width: 720px;
  background: #fff7e0;
  border: 2px dashed #ffb03c;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.9rem;
  line-height: 2;
}

/* 工房→Scratch の学習導線（外部リンク） */
.atelier-scratch {
  max-width: 720px;
  margin: 12px 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.atelier-scratch-btn {
  display: inline-block;
  text-decoration: none;
}
.atelier-scratch-note {
  font-size: 0.8rem;
  color: #5a6c7d;
  line-height: 1.8;
}
@media (max-width: 560px) {
  .atelier-scratch-btn { width: 100%; text-align: center; }
}

.atelier-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.atab {
  border: 2px solid #cdd8e3;
  background: #f2f6fa;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-weight: 900;
  font-size: 0.92rem;
  cursor: pointer;
}
.atab.on {
  background: #2b6cb0;
  border-color: #2b6cb0;
  color: #fff;
}
/* 工房が未解放のあいだは キット以外のタブをロック表示 */
.atab.locked {
  opacity: 0.55;
}
.atab.locked::after {
  content: ' 🔒';
}

.atelier-body { max-width: 760px; }
/* デザインキットタブは素材カードを4列ならべるため広くつかう */
.atelier-body.atelier-body-wide { max-width: 1080px; }

.atelier-note {
  background: #eef7ff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 2;
  margin-bottom: 14px;
}

/* デザインキット つかいかたガイド（ゲーム公式サイト風の1枚ページ）
   大きなビジュアル＋ちょっと斜めのバナー見出し＋短いコピー。
   様式だけの借用で、素材・配色はゴーゴービットのオリジナル */
.kit-guide-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 12px;
  font-size: 0.8rem;
}
.kitguide-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 35, 55, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
}
.kitguide-page {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 140px);
  border: 3px solid #2b3a4d;
  border-radius: 16px;
  padding: 22px 20px 26px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.kitguide-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #2b3a4d;
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.kitguide-hero-chars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
}
.kitguide-title {
  font-family: 'DotGothic16', 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  margin: 8px 0 4px;
  color: #23527c;
}
.kitguide-catch {
  font-size: 0.92rem;
  line-height: 2;
  margin: 0 0 6px;
}
.kitguide-sec {
  margin-top: 20px;
}
.kitguide-sec p {
  font-size: 0.88rem;
  line-height: 2;
  margin: 10px 4px 0;
  text-align: left;
}
.kitguide-banner {
  transform: rotate(-1.6deg);
  margin: 0 -4px;
}
.kitguide-banner.alt {
  transform: rotate(1.4deg);
}
.kitguide-banner span {
  display: inline-block;
  font-family: 'DotGothic16', 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.12rem;
  background: #ffd43b;
  border: 2px solid #2b3a4d;
  border-radius: 6px;
  padding: 5px 16px;
  box-shadow: 3px 3px 0 rgba(43, 58, 77, 0.25);
}
.kitguide-banner.alt span {
  background: #7ec9ff;
}
.kitguide-banner rt {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.kitguide-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.kitguide-chips .kchip {
  pointer-events: none;
}
.kitguide-img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.kitguide-img-big {
  width: 132px;
  height: 132px;
}
.kitguide-steps {
  list-style: none;
  counter-reset: kitguide;
  padding: 0;
  margin: 10px 0 0;
  text-align: left;
}
.kitguide-steps li {
  counter-increment: kitguide;
  font-size: 0.88rem;
  line-height: 1.9;
  padding: 7px 10px 7px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kitguide-steps li::before {
  content: counter(kitguide);
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ff8c42;
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kitguide-start {
  margin-top: 22px;
  font-size: 1.05rem;
  padding: 12px 28px;
}

/* つくりかたの順番 */
.atelier-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.atelier-steps li {
  background: #f7f9fc;
  border: 1px solid #e1e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.9;
}
.astep-num {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2b6cb0;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-weight: 900;
  font-size: 0.75rem;
  margin-right: 2px;
}

/* アイデアシート */
.idea-field {
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fff;
}
.idea-label { font-size: 1rem; line-height: 1.9; }
.idea-q {
  font-size: 0.85rem;
  color: #4a5d70;
  line-height: 2;
  margin: 2px 0 8px;
}
.idea-input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #cdd8e3;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.8;
  resize: vertical;
  background: #fbfdff;
}
.idea-input:focus {
  outline: none;
  border-color: #2b6cb0;
}
.idea-hints { margin-top: 6px; }
.idea-hints summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  color: #b06f00;
}
.idea-hints ul {
  margin: 6px 0 2px;
  padding-left: 20px;
  font-size: 0.82rem;
  line-height: 2;
  color: #5a4a20;
}
.idea-hints[open] {
  background: #fff9e8;
  border-radius: 10px;
  padding: 6px 10px;
}

.atelier-check {
  border: 2px solid #9ad0a5;
  background: #f2fbf4;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 16px 0;
}
.atelier-check-title { font-weight: 900; font-size: 0.9rem; line-height: 2; }
.atelier-check ul {
  margin: 4px 0 2px;
  padding-left: 6px;
  list-style: none;
  font-size: 0.85rem;
  line-height: 2.1;
}
.atelier-actions { margin-top: 14px; }

/* デザインのくふう */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.design-card {
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.design-head { font-size: 0.95rem; line-height: 1.9; }
.design-fig {
  width: 100%;
  border: 2px solid #e0e8f0;
  border-radius: 10px;
  background: #fff;
  margin: 2px 0 4px;
}
.design-tip {
  margin: 0;
  font-size: 0.83rem;
  line-height: 2;
  color: #3c4d5e;
}
.design-try {
  margin-top: auto;
  background: #eef7ff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 2;
  color: #23527c;
}

/* わざのレシピ（Scratch 風ブロック） */
.recipe {
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.recipe-head {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.9;
  list-style: none;
}
.recipe-head::-webkit-details-marker { display: none; }
.recipe-head::before { content: '▸ '; color: #2b6cb0; font-weight: 900; }
.recipe[open] .recipe-head::before { content: '▾ '; }
.recipe-use {
  display: block;
  font-size: 0.78rem;
  color: #5a6c7d;
  font-weight: 400;
  margin-left: 1.2em;
}
.recipe-body { padding: 0 14px 12px; }
.recipe-blocks {
  background: #f4f6f8;
  border-radius: 12px;
  padding: 12px;
  overflow-x: auto;
}
.sblock {
  display: table; /* 中身の幅にフィット（Scratch のブロックらしく） */
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.sblock-gap { height: 14px; }
/* Scratch 3.0 のカテゴリ色に合わせる */
.k-event { background: #ffbf00; color: #5a4200; }
.k-control { background: #ffab19; color: #5c3a00; }
.k-motion { background: #4c97ff; }
.k-looks { background: #9966ff; }
.k-sound { background: #cf63cf; }
.k-sensing { background: #5cb1d6; }
.k-data { background: #ff8c1a; }
.k-operator { background: #59c059; }

.recipe-think {
  margin-top: 10px;
  background: #fff4f0;
  border: 2px dashed #ff9d76;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 2;
}

/* デザインキット（Scratch 用素材の一覧） */
.kit-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 460px;
  margin: 0 auto 10px;
  background: #fbfdff;
  border: 2px solid #cdd8e3;
  border-radius: 999px;
  padding: 4px 8px 4px 12px;
  box-shadow: inset 0 1px 3px rgba(43, 108, 176, 0.1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kit-search:focus-within {
  border-color: #2b6cb0;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.16);
}
.kit-search-icon {
  display: flex;
  flex: none;
  opacity: 0.75;
  pointer-events: none;
}
.kit-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 1rem;
  color: #24405c;
}
.kit-search input:focus { outline: none; }
.kit-search input::placeholder { color: #9db2c6; }
.kit-clear {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #e2eaf2;
  color: #4a6076;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.kit-clear:hover { background: #cfdcea; }

.kit-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.kchip {
  border: 2px solid #cdd8e3;
  background: #f2f6fa;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-weight: 900;
  font-size: 0.82rem;
  cursor: pointer;
}
.kchip.on {
  background: #2b6cb0;
  border-color: #2b6cb0;
  color: #fff;
}
.kchip-n {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(43, 108, 176, 0.12);
  font-size: 0.72rem;
}
.kchip.on .kchip-n { background: rgba(255, 255, 255, 0.25); }

.kit-count {
  text-align: center;
  font-size: 0.82rem;
  color: #5a6c7d;
  margin: 0 0 12px;
}

/* おすすめパック（教室外向けのセット売りショーケース） */
.kit-packs {
  margin-bottom: 16px;
}
.kit-packs-head {
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 2;
  margin-bottom: 6px;
  color: #8a5a00;
}
.kit-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.kit-pack {
  border: 2px solid #ffd48a;
  background: #fffaf0;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kit-pack-name { font-size: 0.9rem; line-height: 1.9; }
.kit-pack-desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.9;
  color: #5a4a20;
}
.kit-pack-items {
  font-size: 1.05rem;
  letter-spacing: 2px;
  line-height: 1.6;
  background: #fff;
  border: 1px solid #f0e2c4;
  border-radius: 8px;
  padding: 4px 8px;
}
.kit-pack-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding-top: 2px;
}
.kit-pack-foot .btn { font-size: 0.8rem; padding: 6px 10px; margin-left: auto; }
.kit-pack-foot .kit-exchange { margin-left: auto; }
.kit-pack-foot .kit-buy { margin-left: 0; }
/* ほしこうかん（教室外の子のもう1つの入手ルート） */
.kit-star-balance {
  float: right;
  font-size: 0.82rem;
  background: #fff;
  border: 1px solid #ffd48a;
  border-radius: 999px;
  padding: 2px 12px;
  color: #8a5a00;
}
.kit-packs-hint {
  margin: 0 0 8px;
  font-size: 0.76rem;
  line-height: 1.9;
  color: #8a6d2f;
}
.kit-pack-owned { border-color: #7ecb8f; background: #f2fbf4; }
/* パックのカードはタップで中身ビューへ（カード全体がボタン。未解放でも見られる） */
.kit-pack-open { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.12s ease; }
.kit-pack-open:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(200, 140, 20, 0.2); }
.kit-pack-open:focus-visible { outline: 3px solid #ffd48a; outline-offset: 2px; }
.kit-pack-owned.kit-pack-open:hover { box-shadow: 0 4px 12px rgba(46, 139, 87, 0.18); }
.kit-pack-owned.kit-pack-open:focus-visible { outline-color: #7ecb8f; }
.kit-pack-open-hint {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 900;
  color: #1d7a4f;
}
/* 未解放カードの「中身を見る」案内（ボタンの並ぶ foot と別の行に出す） */
.kit-pack-peek { text-align: right; }
.kit-pack-peek .kit-pack-open-hint { color: #8a5a00; }
/* パック中身ビュー（そのパックの素材だけを表示する画面） */
.kit-packview-head { margin-bottom: 8px; }
.kit-pack-back { font-size: 0.82rem; }
.kit-packview-note { display: block; }
.kit-packview-title { font-size: 0.98rem; }
.kit-packview-desc {
  margin: 6px 0 0;
  font-size: 0.76rem;
  line-height: 1.9;
  color: #5a4a20;
}
.kit-owned {
  font-size: 0.8rem;
  font-weight: 900;
  color: #1d7a4f;
  background: #e9f9ef;
  border: 1px solid #b3e0c4;
  border-radius: 999px;
  padding: 4px 12px;
}
.kit-owned-mini { font-size: 0.7rem; padding: 3px 9px; }
/* 未解放パックの中身ビューのバッジ（おためし中） */
.kit-locked {
  font-size: 0.8rem;
  font-weight: 900;
  color: #8a5a00;
  background: #fff3d6;
  border: 1px solid #ffd48a;
  border-radius: 999px;
  padding: 4px 12px;
}
/* 未解放パックの中身ビューに出す こうかん・購入ボタンの行 */
.kit-packview-actions { margin-top: 8px; }
/* 自由にえらべる好きな素材パック: 画面下のカートバー（1こ以上えらぶと出る） */
.kit-cartbar {
  position: sticky;
  bottom: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 2px solid #ffd48a;
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.kit-cart-count { font-size: 0.85rem; color: #8a5a00; }
.kit-cart-emojis {
  letter-spacing: 2px;
  background: #fff;
  border: 1px solid #f0e2c4;
  border-radius: 8px;
  padding: 2px 8px;
}
.kit-cart-hint { font-size: 0.78rem; color: #8a5a00; }
.kit-cartbar .btn { font-size: 0.8rem; padding: 6px 10px; }
#kit-cart-clear { margin-left: auto; }
/* 購入確認モーダルに出す えらんだ素材の名前一覧 */
.kit-cart-names {
  margin: 6px 0;
  padding: 6px 10px;
  font-size: 0.78rem;
  line-height: 1.9;
  color: #5a4a20;
  background: #fffaf0;
  border: 1px solid #f0e2c4;
  border-radius: 8px;
}

/* ── そざいガチャ（docs/kit-gacha-design.md） ─────────────── */
/* キット画面の入口カード */
.kit-gacha {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #b9a7ff;
  background: #f4f0ff;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.kit-gacha-img { width: 56px; height: 56px; object-fit: contain; }
.kit-gacha-info { flex: 1; min-width: 0; }
.kit-gacha-info p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.9;
  color: #4a3f7a;
}
.kit-gacha .btn { font-size: 0.85rem; white-space: nowrap; }

/* 全画面の演出ステージ（暗転） */
.gacha-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 7, 24, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gacha-stage {
  position: relative;
  width: min(560px, 96vw);
  height: min(640px, 84vh);
  overflow: hidden;
  text-align: center;
  color: #fff;
  /* 生成画像（黒背景）と地続きにするため、ステージは真っ黒でぬりつぶす */
  background: #000;
  border-radius: 18px;
}
.gacha-close { position: absolute; top: 8px; right: 8px; z-index: 9; }
.gacha-intro {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
}
.gacha-hero { width: 190px; }
.gacha-title { margin: 0; font-size: 1.3rem; }
.gacha-note { margin: 0; font-size: 0.85rem; line-height: 2; color: #e8e2ff; }
.gacha-short { color: #ffd48a; }
.gacha-spin-btn { font-size: 1.05rem; padding: 12px 22px; }
.gacha-balance { margin: 0; font-size: 0.85rem; color: #ffd48a; }

/* 演出中のステージ */
.gacha-anim { position: absolute; inset: 0; }
.gacha-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 244, 200, 0.22), transparent 62%);
}
.gacha-machine {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 300px;
  max-height: 78%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: filter 0.4s ease;
  /* 黒背景画像の矩形の縁をスポットライトに溶かす（黒＝透明扱い） */
  mix-blend-mode: screen;
}
.gacha-zoomin { animation: gachaZoomIn 0.5s ease-out; }
@keyframes gachaZoomIn {
  from { transform: translate(-50%, -50%) scale(0.15); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.gacha-shake { animation: gachaShake 0.12s linear infinite; }
@keyframes gachaShake {
  0% { transform: translate(calc(-50% - 3px), -50%) rotate(-1.6deg); }
  50% { transform: translate(calc(-50% + 3px), -50%) rotate(1.6deg); }
  100% { transform: translate(calc(-50% - 3px), -50%) rotate(-1.6deg); }
}
.gacha-dim { filter: brightness(0.4); }
.gacha-star-fly {
  position: absolute;
  left: 50%;
  top: 34%;
  font-size: 2rem;
  pointer-events: none;
}
.gacha-star-fly.fly { animation: gachaStarFly 0.4s ease-in 3; }
@keyframes gachaStarFly {
  from { transform: translate(110px, -140px) scale(1.1); opacity: 1; }
  to { transform: translate(-10px, 0) scale(0.3); opacity: 0; }
}
.gacha-capsule {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 130px;
  transform: translateX(-50%);
  /* 色ちがいは同じ画像の hue-rotate（--hue は app.js が入れる） */
  filter: hue-rotate(var(--hue, 0deg));
  /* 黒背景画像なので screen 合成で地の黒に溶かす */
  mix-blend-mode: screen;
}
.gacha-drop { animation: gachaDrop 0.8s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes gachaDrop {
  0% { transform: translate(-50%, -170px) scale(0.55); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translate(-50%, 14px) scale(0.95); }
  80% { transform: translate(-50%, -18px) scale(1); }
  100% { transform: translate(-50%, 0) scale(1); }
}
.gacha-tremble {
  animation: gachaTremble 0.09s linear infinite;
  /* 光は画像自前のオーラに任せる（drop-shadow は不透明な矩形ごと光ってしまう） */
}
@keyframes gachaTremble {
  0% { transform: translate(calc(-50% - 2px), 0) rotate(-2deg); }
  50% { transform: translate(calc(-50% + 2px), -2px) rotate(2deg); }
  100% { transform: translate(calc(-50% - 2px), 0) rotate(-2deg); }
}
/* 虹カプセル・バーストは黒背景画像のまま screen 合成（黒＝すけて見える） */
.gacha-rainbow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 300px;
  max-width: 90%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.gacha-rainbow-pulse { animation: gachaPulse 0.8s ease-in-out infinite; }
@keyframes gachaPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.14); }
}
.gacha-skip {
  position: absolute;
  bottom: 10px;
  width: 100%;
  margin: 0;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
}

/* 結果発表 */
.gacha-result {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}
.gacha-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 140%;
  max-width: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: gachaBurstPop 1s ease-out forwards;
}
.gacha-burst.rare { animation-duration: 1.4s; }
@keyframes gachaBurstPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  20% { opacity: 1; }
  100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
}
.gacha-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  animation: gachaFlash 0.5s ease-out forwards;
}
@keyframes gachaFlash {
  from { opacity: 0.95; }
  to { opacity: 0; }
}
.gacha-card {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #333;
  border: 3px solid #ffd48a;
  border-radius: 16px;
  padding: 14px 18px;
  width: min(320px, 82vw);
  box-shadow: 0 0 44px rgba(255, 220, 120, 0.5);
  animation: gachaCardPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes gachaCardPop {
  from { transform: scale(0.2) rotate(-14deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.gacha-card-thumb { min-height: 130px; display: flex; align-items: center; justify-content: center; }
.gacha-card-thumb img { width: 140px; height: 140px; object-fit: contain; }
.gacha-card-emoji { font-size: 4.2rem; }
.gacha-got { margin: 6px 0 0; font-weight: 900; font-size: 0.95rem; line-height: 1.9; }
.gacha-card-note { margin: 2px 0 0; font-size: 0.74rem; line-height: 1.9; color: #8a6d2f; }
.gacha-again { position: relative; z-index: 2; display: flex; gap: 10px; }
/* にじいろカプセル（パックまるごと）の結果カード */
.gacha-card-rare {
  border-image: linear-gradient(120deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b980f0) 1;
  border-style: solid;
  box-shadow: 0 0 56px rgba(185, 128, 240, 0.65);
}
.gacha-pack-items {
  display: block;
  margin: 2px 0 4px;
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1.7;
}
.gacha-jackpot-note { font-size: 0.78rem; color: #d9c8ff; }
.kit-exchange[data-short] { opacity: 0.6; }
.kit-pack-tag {
  margin-right: auto;
  font-size: 0.72rem;
  font-weight: 900;
  color: #8a5a00;
  background: #fff3d6;
  border: 1px solid #ffd48a;
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.7;
}
.kit-grid {
  display: grid;
  /* 基本は1行4列。画面がせまくなったら3列→2列に自動で切りかわる */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .kit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .kit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kit-card {
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kit-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  font-size: 2.6rem;
  border-radius: 10px;
  /* 透過素材らしさを出す市松（チェッカー）背景 */
  background:
    repeating-conic-gradient(#eef3f8 0% 25%, #f9fbfd 0% 50%) 0 0 / 20px 20px;
  border: 1px solid #e8eef5;
  overflow: hidden;
}
.kit-thumb img {
  height: 68px;
  width: auto;
}
.kit-thumb-bg img { height: 100%; width: 100%; object-fit: cover; }
.kit-name {
  font-size: 0.9rem;
  line-height: 1.9;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.kit-format {
  flex: none;
  font-size: 0.68rem;
  font-weight: 900;
  color: #2b6cb0;
  background: #e7f1fb;
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}
.kit-desc {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.9;
  color: #3c4d5e;
}
/* コスチューム一覧（切りかえアニメーション用のコマ） */
.kit-costumes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 900;
  color: #4a6076;
  line-height: 1.8;
}
.kit-costume {
  font-weight: 400;
  background: #f2f6fa;
  border: 1px solid #dbe5ee;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
/* コスチューム名はプレビューボタン（タップでサムネイル切替・だれでも使える） */
button.kit-costume-btn {
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
button.kit-costume-btn:hover { background: #eef6fd; border-color: #b5d0e8; }
button.kit-costume-btn.on {
  background: #fff3d6;
  border-color: #f5c542;
  color: #8a5a00;
  font-weight: 900;
}
/* 解放ずみのときだけ出る、コスチューム1枚ずつのダウンロード ⬇
   （プレビューボタンの入れ子にせず、隣に置く実ボタン＝キーボードでも押せる） */
.kit-costume-set { display: inline-flex; align-items: center; }
.kit-costume-set .kit-costume-btn { border-radius: 999px 0 0 999px; border-right: none; }
button.kit-costume-dlx {
  font-size: 0.72rem;
  background: #f2f6fa;
  border: 1px solid #dbe5ee;
  border-radius: 0 999px 999px 0;
  padding: 1px 7px 1px 5px;
  color: #2b6cb0;
  font-weight: 900;
  cursor: pointer;
}
button.kit-costume-dlx:hover { background: #eef6fd; border-color: #b5d0e8; color: #17456e; }
/* プロフィール画面のプラン欄（アンロックコードの入口） */
.plan-panel { margin-top: 14px; }
.plan-panel h3 { margin: 0 0 6px; font-size: 0.95rem; }
.plan-status {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 2;
  color: #4a6076;
}

/* Google ログイン（スタッフ／保護者）の状態とログアウト（プロフィール画面） */
.google-account {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  margin-top: 8px;
}
.google-account .plan-status { margin: 4px 0 0; }
.google-account .btn { font-size: 0.85rem; }

/* 管理者メニュー（プロフィール画面・管理者モード中のみ） */
.admin-menu {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed #dbe5ee;
}
.admin-menu h4 { margin: 0 0 6px; font-size: 0.9rem; }
.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.admin-actions .btn { font-size: 0.85rem; }

/* 音素材の試聴ボタン（だれでも聞ける。再生中は ⏹ とめる 表示） */
button.kit-play {
  align-self: flex-start;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  color: #1d7a4f;
  background: #e9f9ef;
  border: 1px solid #b3e0c4;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
button.kit-play:hover { background: #d8f3e3; }
button.kit-play.playing {
  color: #a04a12;
  background: #fdf0e3;
  border-color: #eccb9e;
}
.kit-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
  padding-top: 4px;
}
.kit-foot .btn { font-size: 0.82rem; padding: 7px 12px; white-space: nowrap; }
.kit-price {
  margin-right: auto;
  font-weight: 900;
  color: #b06f00;
  font-size: 0.95rem;
}
.kit-price-note { font-size: 0.68rem; font-weight: 400; color: #8a6d2f; }
.kit-soon {
  font-size: 0.8rem;
  font-weight: 900;
  color: #5a6c7d;
  background: #eef2f6;
  border-radius: 999px;
  padding: 5px 12px;
}
.kit-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 18px 0;
  font-size: 0.9rem;
  color: #5a6c7d;
}
/* 購入案内モーダル内の規約リンク（保護者向け） */
.kit-legal-links {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
}
.kit-legal-links a { color: #5a7189; }
/* パック購入（Stripe）ボタン: 星こうかんと見分けがつく「おかいもの色」 */
.btn-buy {
  background: #f08a1d;
  color: #fff;
}
.btn-buy:hover { background: #d97a12; }
/* パックコード（購入特典）の入力欄: 案内モーダル内 */
.kit-code-block {
  display: block;
  margin-top: 10px;
  padding: 10px;
  background: #fff8ea;
  border: 1px solid #ffd48a;
  border-radius: 10px;
  font-size: 0.85rem;
}
.kit-code-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.kit-code-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 10px;
  border: 2px solid #ffd48a;
  border-radius: 8px;
  background: #fff;
}
.kit-code-row input:focus { outline: none; border-color: #f08a1d; }
.kit-code-row .btn { white-space: nowrap; }
.kit-code-msg {
  margin: 6px 0 0;
  min-height: 1.2em;
  font-size: 0.78rem;
  color: #8a5a00;
}

/* 画面では隠し、印刷（アイデアシート）でだけ出す */
.print-only { display: none; }

@media print {
  /* アイデアシート印刷: 質問と書いたことだけを紙にする */
  .print-only { display: block; }
  .idea-print-head {
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 12px;
  }
  .idea-print-sub { font-size: 0.8rem; font-weight: 400; color: #555; }
  .atelier-body { max-width: none; box-shadow: none; padding: 0; }
  .idea-field { break-inside: avoid; }
  .idea-input {
    border: none;
    border-bottom: 1.5px solid #999;
    border-radius: 0;
    background: #fff;
    min-height: 3.4em;
  }
}

@media (max-width: 640px) {
  .atab { padding: 7px 12px; font-size: 0.85rem; }
  .atelier-lead { font-size: 0.82rem; }
  .play-top .btn { white-space: nowrap; }
}

/* ── キャラ図鑑 ───────────────────────────── */
.zukan-count {
  max-width: 860px;
  margin: 4px 0 16px;
  font-weight: 900;
  color: var(--ink);
}
.zukan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  max-width: 900px;
}
.zukan-card {
  position: relative;
  background: var(--panel);
  border-radius: 18px;
  border-top: 6px solid #cdd8e3;
  padding: 16px 16px 18px;
  box-shadow: 0 4px 12px rgba(43, 58, 74, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.zukan-card.kind-hero { border-top-color: var(--accent); }
.zukan-card.kind-friend { border-top-color: var(--green); }
.zukan-card.kind-boss { border-top-color: #8a4dff; }
.zukan-card.kind-bug { border-top-color: #2fb6d8; }
.zukan-no {
  position: absolute;
  top: 8px;
  right: 12px;
  font: 900 0.72rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  color: #9fb0c0;
}
.zukan-face {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}
.zukan-face .char-img,
.zukan-face .char-emoji { width: 88px; height: 88px; }
.zukan-name {
  font-size: 1.2rem;
  font-weight: 900;
  margin-top: 6px;
  line-height: 1.2;
}
.zukan-en {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: #9fb0c0;
  font-weight: 700;
  margin-top: 2px;
}
.zukan-kind {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  margin: 8px 0 6px;
  background: #eef2f6;
  color: #5b6b7b;
}
.kind-hero .zukan-kind { background: #fff0e2; color: var(--accent-dark); }
.kind-friend .zukan-kind { background: #e6f6ec; color: #2c8f56; }
.kind-boss .zukan-kind { background: #efe6ff; color: #6a3bd0; }
.kind-bug .zukan-kind { background: #e2f6fb; color: #1f8fb0; }
.zukan-desc {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink);
  text-align: left;
}
.zukan-card.locked {
  border-top-color: #d6dee6;
  background: #eef2f6;
  color: #9fb0c0;
}
.zukan-card.locked .zukan-desc { text-align: center; color: #9fb0c0; }
.zukan-q {
  font-size: 3.4rem;
  font-weight: 900;
  color: #c3cfda;
}
@media (max-width: 640px) {
  .zukan-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .zukan-face { height: 80px; }
  .zukan-face .char-img, .zukan-face .char-emoji { width: 72px; height: 72px; }
  .zukan-name { font-size: 1.05rem; }
  .zukan-desc { font-size: 0.8rem; }
}

/* ══ リッチ化（フォント・ドット絵アイコン・DQ風ウィンドウ・盤面タイル） ══ */

/* 見出し・ゲーム的な要素はドット文字（DotGothic16）。ルビは読みやすい丸ゴのまま */
header h1,
.screen-title,
.play-top h2,
.world h2,
.kakera-tracker h2,
.mode-name,
.level-badge,
.level-title,
.stage-num,
.boss-taunt,
.cutscene-name,
.cutscene-text,
.cert-head,
.bigrank-text {
  font-family: 'DotGothic16', 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}
rt { font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: 0; }

/* ドット絵アイコン（OS絵文字の置き換え） */
.pix-icon { image-rendering: pixelated; vertical-align: -0.15em; }
.mode-emoji img {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(31, 46, 68, 0.15));
}

/* ボタンの「押し込み」立体感 */
.btn {
  box-shadow: 0 3px 0 rgba(31, 46, 68, 0.28);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(31, 46, 68, 0);
}
.mode-card {
  border: 2px solid #dde8f2;
  box-shadow: 0 6px 0 rgba(31, 46, 68, 0.16), 0 12px 20px rgba(43, 58, 74, 0.1);
}
.mode-card:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(31, 46, 68, 0.16);
}

/* ── カットシーン: DQ風ウィンドウ ── */
.cutscene-bubble {
  background: #101c33;
  border: 3px solid #f4f7fb;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px #101c33,
    0 12px 30px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px #101c33,
    inset 0 0 0 3px rgba(244, 247, 251, 0.4);
  padding: 14px 18px 10px;
}
.cutscene-name { color: #ffd43b; font-size: 1.02rem; }
.cutscene-text { color: #f4f7fb; min-height: 3.4em; }
.cutscene-text rt { color: #bcd0e8; opacity: 1; }
.cutscene-actions .btn-plain { background: rgba(244, 247, 251, 0.14); color: #f4f7fb; }

/* タイプライター表示（レイアウトを崩さない visibility 方式） */
.tw-hide { visibility: hidden; }
.cut-cursor {
  display: block;
  text-align: center;
  color: #ffd43b;
  font-size: 0.85rem;
  margin-top: 2px;
  animation: cur-blink 0.85s steps(1) infinite;
}
@keyframes cur-blink { 50% { opacity: 0; } }

/* ── 盤面: ワールド別ドット絵タイル ── */
#board {
  image-rendering: pixelated;
  border: 3px solid #2a3a52;
  border-radius: 6px;
  box-shadow: 0 5px 0 rgba(31, 46, 68, 0.22);
}
#board-holder[data-world="w1"] #board { background: url('../assets/pix/floor-w1.svg'); }
#board-holder[data-world="w2"] #board { background: url('../assets/pix/floor-w2.svg'); }
#board-holder[data-world="w3"] #board { background: url('../assets/pix/floor-w3.svg'); }
#board-holder[data-world="w4"] #board { background: url('../assets/pix/floor-w4.svg'); }
#board-holder[data-world="w5"] #board { background: url('../assets/pix/floor-w5.svg'); }
#board-holder[data-world="w6"] #board { background: url('../assets/pix/floor-w6.svg'); }
#board-holder[data-world="boss"] #board { background: url('../assets/pix/floor-boss.svg'); }
#board-holder[data-world] #board { background-size: var(--cell) var(--cell); }

#board .cell.wall {
  background: url('../assets/pix/wall-brick.svg') center / cover;
  image-rendering: pixelated;
}
#board-holder[data-world="boss"] .cell.wall { background-image: url('../assets/pix/wall-boss.svg'); }

#board .cell.goal {
  background: url('../assets/pix/flag-a.svg') center / 78% no-repeat;
  animation: flag-wave 0.7s steps(1) infinite;
}
@keyframes flag-wave { 50% { background-image: url('../assets/pix/flag-b.svg'); } }

#board .cell.gem {
  background: url('../assets/pix/gem.svg') center / 62% no-repeat;
  animation: gem-glint 1.6s ease-in-out infinite;
}
@keyframes gem-glint {
  50% { filter: brightness(1.45) drop-shadow(0 0 4px rgba(79, 216, 232, 0.8)); }
}
@media (prefers-reduced-motion: reduce) {
  #board .cell.goal, #board .cell.gem, .cut-cursor { animation: none; }
}


/* ══ リッチ化 P1（タイトル画面・遠景・紙吹雪・ホーム強化） ══ */

/* ── タイトル画面 ── */
#screen-title { margin: -8px 0 0; }
.title-sky {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: min(72vh, 640px);
  background: linear-gradient(#8fcdec 0%, #bfe3f7 45%, #e3f4fd 78%, #d6efc9 100%);
  border: 3px solid #2a3a52;
  box-shadow: 0 6px 0 rgba(31, 46, 68, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-cloud {
  position: absolute;
  width: 132px;
  height: 72px;
  background: url('../assets/pix/cloud-a.svg') no-repeat center / contain;
  image-rendering: pixelated;
  opacity: 0.95;
  animation: cloud-drift 46s linear infinite;
}
.title-cloud.c2 { width: 90px; top: 30%; animation-duration: 64s; animation-delay: -22s; background-image: url('../assets/pix/cloud-b.svg'); }
.title-cloud.c3 { width: 70px; top: 55%; animation-duration: 80s; animation-delay: -50s; background-image: url('../assets/pix/cloud-b.svg'); opacity: 0.7; }
.title-cloud.c1 { top: 9%; }
@keyframes cloud-drift {
  from { left: -160px; }
  to { left: 110%; }
}
.title-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background:
    url('../assets/pix/floor-w1.svg') repeat-x bottom / 40px 40px,
    url('../assets/pix/hills.svg') repeat-x bottom 34px center / 200px auto;
  image-rendering: pixelated;
  pointer-events: none;
}
.title-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 26px 16px 110px;
}
.title-presents { font-size: 0.82rem; font-weight: 700; color: #23527c; letter-spacing: 0.06em; }
.title-logo {
  margin-top: 14px;
  line-height: 0;
}
.title-logo img {
  width: min(520px, 86vw);
  height: auto;
  filter: drop-shadow(0 6px 0 rgba(31, 46, 68, 0.12));
}
.title-tag { font-family: 'DotGothic16', sans-serif; font-size: 1.02rem; color: #23527c; margin-top: 6px; }
.title-hero { margin-top: 18px; animation: title-bob 2.4s ease-in-out infinite; }
.title-hero .hero-img { filter: drop-shadow(0 8px 0 rgba(31, 46, 68, 0.18)); }
@keyframes title-bob { 50% { transform: translateY(-8px); } }
.title-start {
  margin-top: 20px;
  font-family: 'DotGothic16', sans-serif;
  font-size: 1.3rem;
  padding: 14px 34px;
  animation: start-blink 1.6s steps(1) infinite;
}
@keyframes start-blink { 50% { filter: brightness(1.18); } }
.title-copy { margin-top: 16px; font-size: 0.74rem; color: #3d5a75; }

/* ── 盤面の遠景（雲と丘。空のグラデは data-world 別に指定済み） ── */
#board-holder {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 20px 16px 46px;
  border: 2px solid rgba(42, 58, 82, 0.25);
}
#board-holder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url('../assets/pix/cloud-a.svg') no-repeat 10% 10% / 92px auto,
    url('../assets/pix/cloud-b.svg') no-repeat 82% 20% / 58px auto;
  image-rendering: pixelated;
  opacity: 0.9;
  pointer-events: none;
}
#board-holder::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: url('../assets/pix/hills.svg') repeat-x bottom / 148px auto;
  image-rendering: pixelated;
  opacity: 0.9;
  pointer-events: none;
}
#board { position: relative; z-index: 2; }
/* バグの森・巻物砂漠は雲を薄く、ボスは夜空＋城のシルエット */
#board-holder[data-world="w5"]::before,
#board-holder[data-world="w6"]::before { opacity: 0.4; }
#board-holder[data-world="boss"]::before {
  background:
    url('../assets/pix/star.svg') no-repeat 12% 18% / 14px auto,
    url('../assets/pix/star.svg') no-repeat 30% 8% / 10px auto,
    url('../assets/pix/star.svg') no-repeat 70% 12% / 12px auto,
    url('../assets/pix/star.svg') no-repeat 88% 26% / 9px auto;
  opacity: 0.85;
}
#board-holder[data-world="boss"]::after {
  background-image: url('../assets/pix/hills-boss.svg');
  height: 44px;
  opacity: 1;
}

/* ── 紙吹雪 ── */
#confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.conf {
  position: absolute;
  top: -14px;
  border-radius: 1px;
  animation: conf-fall linear forwards;
}
@keyframes conf-fall {
  to {
    transform: translateY(108vh) rotate(560deg);
    opacity: 0.85;
  }
}

/* ── ホーム: ステータスウィンドウ風レベルボックス＋アイコンの浮遊 ── */
.level-box {
  border: 3px solid #2a3a52;
  background: #fffef7;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #fff, 0 4px 0 rgba(31, 46, 68, 0.16);
}
.level-bar {
  border: 2px solid #2a3a52;
  background: #e7edf4;
  border-radius: 4px;
}
.level-bar-fill {
  background: repeating-linear-gradient(90deg, #37b26c 0 10px, #56cd8b 10px 20px);
  border-radius: 2px;
}
.mode-emoji img { animation: icon-bob 2.8s ease-in-out infinite; }
.mode-card:nth-of-type(2) .mode-emoji img { animation-delay: 0.45s; }
.mode-card:nth-of-type(3) .mode-emoji img { animation-delay: 0.9s; }
@keyframes icon-bob { 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .title-cloud, .title-hero, .title-start, .mode-emoji img, .conf { animation: none; }
}
@media (max-width: 640px) {
  .title-sky { min-height: 66vh; }
}


/* ══ リッチ化 P2（立ち絵演出・黒ワイプ・メダル・ウィンドウ統一） ══ */

/* ── カットシーンの立ち絵: 弾む登場＋グリッチは不気味に揺れ続ける ── */
.cutscene-portrait {
  animation: cut-enter 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cut-enter {
  from { transform: translateY(16px) scale(0.88); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.cutscene-portrait.villain {
  animation: cut-enter 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), villain-shake 2.4s ease-in-out 0.5s infinite;
}
@keyframes villain-shake {
  0%, 34%, 100% { transform: none; }
  6% { transform: translateX(-3px) rotate(-1.6deg); }
  12% { transform: translateX(3px) rotate(1.6deg); }
  18% { transform: translateX(-2px); }
  24% { transform: translateX(2px); }
}
.cutscene-name { animation: name-slide 0.3s ease; }
@keyframes name-slide {
  from { transform: translateX(-8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ── 画面遷移の暗転ワイプ ── */
#screen-wipe {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #101c33;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#screen-wipe.show {
  opacity: 1;
  transition: none;
}

/* ── バッジのメダル表示 ── */
.badge-emoji img { image-rendering: pixelated; }
.badge-cell {
  border: 2px solid #dfe4ea;
  border-radius: 14px;
}
.badge-cell:not(.locked) {
  border-color: #ffd43b;
  background: #fffdf2;
  box-shadow: 0 3px 0 rgba(184, 134, 11, 0.18);
}

/* ── ウィンドウ様式の統一（結果モーダル・クイズ・謎解き・ボス） ── */
.modal-card {
  border: 3px solid #2a3a52;
  box-shadow: inset 0 0 0 2px #fff, 0 14px 34px rgba(16, 28, 51, 0.4);
}
#modal-title, #modal-emoji { font-family: 'DotGothic16', 'M PLUS Rounded 1c', sans-serif; font-weight: 400; }
#modal-stars { font-family: 'DotGothic16', sans-serif; letter-spacing: 0.1em; }

.quiz-panel {
  border: 3px solid #2a3a52;
  box-shadow: inset 0 0 0 2px #fff, 0 5px 0 rgba(31, 46, 68, 0.16);
}

/* なぞのとびら: DQ風の紺ウィンドウに */
.panel.nazo-panel {
  background: #101c33;
  border: 3px solid #f4f7fb;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #101c33, inset 0 0 0 3px rgba(244, 247, 251, 0.4), 0 8px 22px rgba(16, 28, 51, 0.35);
  color: #f4f7fb;
}
.nazo-panel .nazo-q { color: #f4f7fb; }
.nazo-panel .nazo-theme { color: #ffd43b; font-family: 'DotGothic16', sans-serif; }
.nazo-panel .nazo-hint { color: #bcd0e8; }
.nazo-panel .nazo-code { border: 1px solid rgba(244, 247, 251, 0.25); }
.nazo-panel .nazo-feedback.ok { color: #7de3a0; }
.nazo-panel .nazo-feedback.ng { color: #ff9d92; }
.nazo-panel rt { color: #bcd0e8; opacity: 1; }
.nazo-panel .btn-plain { background: rgba(244, 247, 251, 0.14); color: #f4f7fb; }

/* ボス戦バナー: 紺ウィンドウ＋ピンクの敵アクセント */
.boss-banner {
  background: #180f2b;
  border: 3px solid #f4f7fb;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #180f2b, inset 0 0 0 3px rgba(255, 93, 177, 0.55);
}
.boss-banner .boss-name { font-family: 'DotGothic16', sans-serif; font-weight: 400; }
.boss-banner .boss-taunt { color: #ffb3d9; }

@media (prefers-reduced-motion: reduce) {
  .cutscene-portrait, .cutscene-portrait.villain, .cutscene-name { animation: none; }
}


/* ══ リッチ化 P3（ビットの生命感） ══ */

/* 立ち絵はいつも「呼吸」している（足元を支点に わずかに伸び縮み） */
.hero-img { transform-origin: 50% 100%; }
#robot .body .hero-img,
.level-robot .hero-img,
.title-hero .hero-img,
.cutscene-portrait .hero-img,
.cert-party .hero-img {
  animation: hero-breathe 2.3s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% { transform: none; }
  50% { transform: scaleY(0.955) scaleX(1.025); }
}
/* 歩行の ぴょこっ は呼吸より優先し、終わったら呼吸に戻る */
#robot .body.hop .hero-img {
  animation: hero-hop 0.28s ease, hero-breathe 2.3s ease-in-out 0.28s infinite;
}

/* 勝利ジャンプ（クリアの瞬間） */
#robot.cheer .body .hero-img {
  animation: hero-cheer 0.62s cubic-bezier(0.34, 1.3, 0.64, 1) 2;
}
@keyframes hero-cheer {
  0%, 100% { transform: none; }
  35% { transform: translateY(-42%) rotate(-7deg); }
  70% { transform: translateY(0) scaleY(0.9) scaleX(1.08); }
}

/* しょんぼり（失敗時。次の盤面描画でリセットされる） */
#robot.sad .body .hero-img {
  animation: hero-sad 0.9s ease forwards;
}
@keyframes hero-sad {
  to { transform: rotate(7deg) translateY(5%) scaleY(0.97); filter: saturate(0.72) brightness(0.94); }
}

/* なでなで（ホーム・タイトルでタップ） */
.hero-img.tickle { animation: hero-cheer 0.55s ease 1 !important; }
.level-robot { cursor: pointer; }
.title-hero { cursor: pointer; }

/* 吹き出し（ビットのひとこと） */
.robot-say {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(calc(-50% + var(--sx, 0px)));
  background: #fff;
  border: 2px solid #2a3a52;
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: #223a4e;
  z-index: 7;
  pointer-events: none;
  box-shadow: 0 2px 0 rgba(31, 46, 68, 0.2);
  animation: say-pop 0.18s ease;
}
.robot-say::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - var(--sx, 0px));
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: #2a3a52;
}
/* 盤面の上端では ロボットの下側に出す（しっぽも上向きに） */
.robot-say.below {
  bottom: auto;
  top: calc(100% + 5px);
}
.robot-say.below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #2a3a52;
}
@keyframes say-pop {
  from { transform: translateX(calc(-50% + var(--sx, 0px))) translateY(4px) scale(0.85); opacity: 0; }
  to { transform: translateX(calc(-50% + var(--sx, 0px))); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #robot .body .hero-img, .level-robot .hero-img, .title-hero .hero-img,
  .cutscene-portrait .hero-img, .cert-party .hero-img,
  #robot.cheer .body .hero-img, #robot.sad .body .hero-img, .hero-img.tickle {
    animation: none !important;
  }
}

/* ══════════════════ 生徒限定コンテンツ（教室ミッション・シークレット・専用レシピ） ══════════════════ */

/* ── 教室ミッション ─────────────────────────── */
.mode-missions .mode-name { color: #b35617; }
.mission-panel { text-align: center; }
.mission-lead {
  font-size: 0.92rem;
  margin: 2px 0 10px;
}
.mission-row {
  justify-content: center;
  margin-bottom: 4px;
}
.mission-row input {
  max-width: 220px;
  text-align: center;
  letter-spacing: 0.06em;
}
.mission-feedback {
  min-height: 1.4em;
  font-size: 0.88rem;
  color: #b35617;
  margin: 6px 0 0;
}
.mission-list { margin-top: 14px; }
.mission-card .mission-theme {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #ffe9d2;
  color: #b35617;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}
.mission-card.locked .mission-theme { background: #e8e8e8; color: #888; }

/* ── シークレットワールド「ゼロとイチの狭間」 ────────────── */
.secret-world {
  border-left: 5px solid #6b5bd6;
  padding-left: 10px;
  position: relative;
  background: linear-gradient(160deg, rgba(38, 32, 74, 0.06), rgba(107, 91, 214, 0.10));
  border-radius: 12px;
}
.secret-world h2 { color: #4a3fa8; }
.secret-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #4a3fa8;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
}
.secret-tag rt { color: #cfc8ff; }

/* 盤面テーマ: 0と1の狭間（ボス城の意匠を裏ダンジョン風に流用） */
#board-holder[data-world="w7"] {
  background: linear-gradient(#0d1026 0%, #23204a 60%, #2e2a56 100%);
}
#board-holder[data-world="w7"] #board { background: url('../assets/pix/floor-boss.svg'); }
#board-holder[data-world="w7"] .cell.wall { background-image: url('../assets/pix/wall-boss.svg'); }
#board-holder[data-world="w7"]::before {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 34% 14%, #b9c6ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 36%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 76% 18%, #d9e0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 42%, #b9c6ff 50%, transparent 51%);
  background-repeat: no-repeat;
  opacity: 0.9;
}
#board-holder[data-world="w7"]::after {
  background-image: url('../assets/pix/hills-boss.svg');
  opacity: 0.55;
}

/* ── 工房: 生徒専用レシピ ───────────────────── */
.recipe-member-head {
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 2px dashed #d7c9b2;
  font-weight: 800;
  color: #4a3fa8;
}
.recipe-member { border-left: 4px solid #6b5bd6; }
.recipe-course {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #ece8ff;
  color: #4a3fa8;
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
}
.recipe-js {
  margin: 10px 0 2px;
  border-radius: 8px;
  background: #101c33;
  border: 2px solid #2a3a52;
  overflow: hidden;
}
.recipe-js-head {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd76a;
  background: #182742;
}
.recipe-js-head rt { color: #c8b46a; }
.recipe-js pre {
  margin: 0;
  padding: 8px 12px;
  color: #d9e6ff;
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-x: auto;
}
.recipe-member-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 14px 10px;
  border-radius: 10px;
  border: 2px dashed #c9c9c9;
  background: #f5f3ef;
  color: #666;
  font-size: 0.88rem;
  text-align: center;
}
/* スプライト名ラベル（Scratch カテゴリ外の注記ブロック） */
.sblock.k-note {
  background: #f0f0f0;
  color: #555;
  border: 1.5px dashed #bbb;
  box-shadow: none;
}

@media (max-width: 640px) {
  .mission-row { flex-wrap: wrap; }
  .mission-row input { max-width: none; flex: 1; }
}

/* ── ランキングのタブ（この端末／教室のみんな） ────────────── */
.ranking-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}

/* ── プログラミングことばじてん ────────────────────── */
.words-lead {
  font-size: 0.92rem;
  margin: 4px 2px 12px;
}
.words-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 460px;
  margin: 0 auto 6px;
  background: #fffdf7;
  border: 2px solid #c9bfa8;
  border-radius: 999px;
  padding: 4px 8px 4px 12px;
  box-shadow: inset 0 1px 3px rgba(120, 100, 60, 0.12);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.words-search:focus-within {
  border-color: #e8912d;
  box-shadow: 0 0 0 3px rgba(232, 145, 45, 0.18);
}
.words-search-icon {
  display: flex;
  flex: none;
  opacity: 0.75;
  pointer-events: none;
}
.words-search-icon img { display: block; }
.words-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 1rem;
  color: #4a3a1c;
}
.words-search input:focus { outline: none; }
.words-search input::placeholder { color: #b3a583; }
.words-clear {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #ece4d2;
  color: #7a6a48;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.words-clear:hover { background: #ddd2ba; }
.words-count {
  text-align: center;
  font-size: 0.82rem;
  color: #9a8a63;
  margin: 0 0 14px;
}
.word-cat { margin-bottom: 18px; }
.word-cat-head {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: #6b4a12;
  border-bottom: 2px dashed #d7c9b2;
  padding-bottom: 4px;
}
.word-card {
  background: #fff;
  border: 2px solid #e2d9c6;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.word-card[open] { border-color: #e8912d; }
.word-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.word-head::-webkit-details-marker { display: none; }
.word-head::after {
  content: '▼';
  margin-left: auto;
  font-size: 0.7rem;
  color: #b9a985;
  transition: transform 0.15s;
}
.word-card[open] .word-head::after { transform: rotate(180deg); }
.word-emoji { font-size: 1.3rem; }
.word-term { font-size: 1.02rem; }
.word-body { padding: 0 14px 12px; }
.word-desc {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.85;
}
.word-example {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #101c33;
  border: 2px solid #2a3a52;
  color: #d9e6ff;
  font-size: 0.84rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.word-where {
  margin: 0;
  font-size: 0.82rem;
  color: #8a6d2f;
  background: #fdf6e3;
  border-radius: 8px;
  padding: 6px 10px;
}
.words-empty { text-align: center; padding: 18px 0; }

/* ── みんなのコードパワー（教室の協力メーター・端末単位） ────────── */
.classpower-box {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  /* カードの立体シャドウ（下6px）に食い込まないよう、正のマージンで離す */
  margin: 16px 0 18px;
  padding: 12px 18px;
  border: 3px solid #2a3a52;
  border-radius: 10px;
  background: #f2fbf4;
  box-shadow: inset 0 0 0 2px #fff, 0 4px 0 rgba(31, 46, 68, 0.16);
}
/* おうちの方へ（達成の節目に出す教室案内・非割り込み・閉じられる） */
.guardian-box {
  position: relative;
  max-width: 720px;
  margin: 16px 0 18px;
  padding: 16px 18px 18px;
  border: 2px solid #ffce8a;
  border-radius: 14px;
  background: #fff7ea;
  box-shadow: 0 3px 10px rgba(43, 58, 74, 0.1);
}
.guardian-head {
  margin: 0 0 6px;
  font-weight: bold;
  font-size: 0.95rem;
  color: #a15b17;
}
.guardian-body {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.9;
  color: #4a4133;
}
.guardian-cta {
  display: inline-block;
  text-decoration: none;
}
.guardian-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #b98a4e;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.guardian-close:hover { background: rgba(185, 138, 78, 0.15); }
@media (max-width: 560px) {
  .guardian-cta { display: block; text-align: center; }
}

.cp-icon { flex: 0 0 auto; display: flex; }
.cp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cp-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-title { color: #1f7a46; }
.cp-total {
  background: #37b26c;
  color: #fff;
  font-weight: bold;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.9rem;
}
.cp-trophies { display: flex; gap: 4px; margin-left: auto; }
.cp-trophy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px dashed #c3cdd6;
  background: #eef2f6;
  opacity: 0.45;
  filter: grayscale(1);
}
.cp-trophy.got { opacity: 1; filter: none; border-style: solid; }
.cp-trophy.got.cp-bronze { background: #e9c19a; border-color: #b5763c; }
.cp-trophy.got.cp-silver { background: #dfe6ec; border-color: #8fa2b3; }
.cp-trophy.got.cp-gold { background: #ffe08a; border-color: #d99e1b; }
.cp-trophy.got.cp-rainbow {
  background: linear-gradient(135deg, #ffb3ba, #ffdfba, #baffc9, #bae1ff);
  border-color: #a55eea;
}
.cp-bar {
  height: 12px;
  border: 2px solid #2a3a52;
  background: #e7edf4;
  border-radius: 4px;
  overflow: hidden;
}
.cp-bar-fill {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, #f4a934 0 10px, #ffc95e 10px 20px);
  border-radius: 2px;
  transition: width 0.4s;
}
.cp-next { font-size: 0.8rem; color: #5a6c7d; line-height: 1.8; }
.cp-note { color: #93a5b5; }

/* ── かけらリレー（クラス協力ミッション） ───────────────── */
.relay-world {
  border-left: 5px solid #f4a934;
  padding-left: 10px;
  margin-top: 22px;
}
.relay-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff1d6;
  color: #b35617;
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
.relay-frag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.frag-word {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: 8px;
  background: #2a3a52;
  color: #ffd43b;
  font-family: 'DotGothic16', monospace;
  font-size: 1.05em;
  letter-spacing: 2px;
}
.relay-final .stage-num { background: #fff1d6; }

/* クリア画面の「ことばのかけら」お披露目 */
.fragment-reveal {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff6d8;
  border: 2px dashed #e0b13e;
  font-size: 0.95rem;
}
.fragment-reveal .frag-word { font-size: 1.5rem; margin: 0 6px; }
.fragment-note {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: #8a6d2f;
}

/* ── コード予想バトル（大画面クイズ） ──────────────────── */
.yosou-lead { max-width: 720px; }
.yosou-entry { margin-top: 22px; }
.yosou-code-head { margin: 0 0 8px; font-size: 1rem; }
.yosou-code {
  background: #263238;
  color: #e8f5e9;
  border-radius: 10px;
  padding: 14px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-x: auto;
  margin-bottom: 12px;
  white-space: pre;
}
.coord-tag {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #2a3a52;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
#board .cell.yosou-hit {
  outline: 4px solid #ff8a3d;
  outline-offset: -4px;
  animation: yosou-hit-pulse 0.9s ease-in-out infinite;
  z-index: 2;
}
@keyframes yosou-hit-pulse {
  50% { outline-color: #ffd43b; }
}
.yosou-answer {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff6d8;
  border: 2px solid #e0b13e;
  font-size: 1rem;
  line-height: 1.9;
}
.yosou-answer-head {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #ff8a3d;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
.yosou-answer-cell {
  font-family: 'DotGothic16', monospace;
  font-size: 1.7rem;
  color: #b35617;
  margin-right: 4px;
  letter-spacing: 2px;
}
.yosou-answer-flavor { font-size: 0.92rem; }

/* 大画面（観客）モード: 予想バトルも ランキングと同じく chrome を隠して大きく */
#btn-yosou-big-exit { display: none; }
body.bigscreen #btn-yosou-big,
body.bigscreen #btn-yosou-back {
  display: none;
}
body.bigscreen #btn-yosou-big-exit { display: inline-block; }
body.bigscreen #screen-yosou h2 { font-size: 1.6rem; }
body.bigscreen .yosou-code { font-size: 1.5rem; line-height: 1.8; }
body.bigscreen #yosou-ask { font-size: 1.25rem; }
body.bigscreen .yosou-answer-cell { font-size: 2.4rem; }
body.bigscreen .coord-tag { font-size: 13px; }

/* ── 教室ラベル（秋葉原教室の生徒・端末単位） ───────────── */
.classroom-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #e3f4fd;
  border: 2px solid #27b6d6;
  color: #1a7d96;
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── つながるコード（アカウント連携） ───────────────── */
.link-section {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f0f6fb;
  border: 2px solid #d5e4ef;
  text-align: left;
}
.link-section h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #23527c;
}
.link-row { margin: 0; }
.link-code {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #2a3a52;
  text-align: center;
}
.link-code-digits {
  display: block;
  font-family: 'DotGothic16', monospace;
  font-size: 2.4rem;
  letter-spacing: 8px;
  color: #ffd43b;
}
.link-code-note {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #cfe0f2;
}

/* ══ ワクワク化（ゲーム公式サイト風の遊びごころ） ══════════════
   参考にしたのは「大きく・斜めに・ステッカーみたいに」という様式だけ。
   模様・配色はすべてゴーゴービットのオリジナル（ピクセル紙ふぶき） */

/* 背景: うっすらピクセル紙ふぶき（コードランドの星・宝石・ブロック） */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cpath d='M26 14h8v8h8v8h-8v8h-8v-8h-8v-8h8z' fill='%23d3ebfa'/%3E%3Crect x='96' y='34' width='12' height='12' transform='rotate(45 102 40)' fill='%23ffeccf'/%3E%3Crect x='60' y='92' width='7' height='7' fill='%23dcf1da'/%3E%3Cpath d='M118 108h7v7h7v7h-7v7h-7v-7h-7v-7h7z' fill='%23e8e2f9'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #d9efff 0%, var(--bg) 40%);
  background-repeat: repeat, no-repeat;
  background-size: 150px 150px, auto;
}

/* ヘッダーのタイトル: 白フチ＋ずらし影でロゴっぽく */
.app-header h1 {
  color: #23527c;
  text-shadow:
    2px 2px 0 #ffffff,
    4px 4px 0 rgba(35, 82, 124, 0.16);
}

/* 画面見出し: ちょっと斜めの黄色ステッカーバナー */
.screen-title {
  display: inline-block;
  background: #ffd43b;
  border: 2px solid #2b3a4d;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 1.15rem;
  transform: rotate(-1.2deg);
  box-shadow: 3px 3px 0 rgba(43, 58, 77, 0.22);
}

/* モードカード: ステッカー風（太フチ＋ずらし影＋交互にちょい傾き） */
.mode-card {
  border: 3px solid #2b3a4d;
  box-shadow: 6px 7px 0 rgba(43, 58, 77, 0.16), 0 12px 20px rgba(43, 58, 74, 0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.mode-cards .mode-card:nth-child(odd) { transform: rotate(-0.8deg); }
.mode-cards .mode-card:nth-child(even) { transform: rotate(0.8deg); }
.mode-cards .mode-card:hover {
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 8px 10px 0 rgba(43, 58, 77, 0.2), 0 16px 26px rgba(43, 58, 74, 0.1);
}
.mode-cards .mode-card:active {
  transform: translateY(2px) rotate(0deg);
  box-shadow: 3px 4px 0 rgba(43, 58, 77, 0.16);
}

/* モードカードごとのアクセント色（上フチのテープ） */
.mode-card { position: relative; overflow: hidden; }
.mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    #ffd43b 0 12px,
    #ffb03c 12px 24px
  );
}
#mode-typing::before {
  background: repeating-linear-gradient(-45deg, #7ec9ff 0 12px, #4aa3e8 12px 24px);
}
#mode-atelier::before {
  background: repeating-linear-gradient(-45deg, #b9e88f 0 12px, #8fd05e 12px 24px);
}
#mode-missions::before {
  background: repeating-linear-gradient(-45deg, #ffb3c8 0 12px, #ff8aa8 12px 24px);
}

/* みんなのコードパワー・お知らせ箱もステッカー寄りに */
.classpower-box {
  border: 2px solid #2b3a4d;
  box-shadow: 4px 5px 0 rgba(43, 58, 77, 0.14);
}

/* ══ モード別の世界観（画面ごとのテーマ背景） ══════════════
   showScreen() が body[data-screen] を切り替え、モードに入ると
   背景の模様と色があいさつ代わりに変わる。すべてオリジナルのピクセル模様 */

/* 🗺 コードの冒険: 旅の地図（羊皮紙に点線ルート・山・旗・足あと） */
body[data-screen='select'],
body[data-screen='play'],
body[data-screen='words'],
body[data-screen='nazo'] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cpath d='M100 60 L122 24 L144 60 Z' fill='%23ead9b6'/%3E%3Cpath d='M116 34 L122 24 L128 34 Z' fill='%23f7efdd'/%3E%3Crect x='30' y='20' width='4' height='26' fill='%23d9c9a6'/%3E%3Cpath d='M34 20 h18 l-6 6 6 6 h-18 z' fill='%23ffcf9b'/%3E%3Crect x='10' y='120' width='5' height='5' fill='%23e6d6b4'/%3E%3Crect x='24' y='132' width='5' height='5' fill='%23e6d6b4'/%3E%3Crect x='40' y='140' width='5' height='5' fill='%23e6d6b4'/%3E%3Crect x='58' y='144' width='5' height='5' fill='%23e6d6b4'/%3E%3Crect x='140' y='120' width='5' height='7' fill='%23e2d2af'/%3E%3Crect x='150' y='132' width='5' height='7' fill='%23e2d2af'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fdf3da 0%, #f9edd8 40%);
  background-repeat: repeat, no-repeat;
  background-size: 170px 170px, auto;
}

/* ⚡ ビットの特訓: 鍛錬の道場（いなずま・キーキャップ・手裏剣スター） */
body[data-screen='typing-select'],
body[data-screen='typing-play'],
body[data-screen='ranking'] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cpath d='M28 10 L16 34 h9 L20 58 L40 28 h-9 L36 10 Z' fill='%23dae8f7'/%3E%3Crect x='90' y='30' width='26' height='26' rx='4' fill='%23dbe7f6'/%3E%3Crect x='96' y='36' width='14' height='11' rx='2' fill='%23f3f8fd'/%3E%3Cpath d='M40 100 l5 10 10 5 -10 5 -5 10 -5 -10 -10 -5 10 -5 z' fill='%23e0eaf5'/%3E%3Crect x='120' y='110' width='6' height='6' fill='%23e3edf8'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #e4eefb 0%, #dde9f6 40%);
  background-repeat: repeat, no-repeat;
  background-size: 150px 150px, auto;
}

/* 💡 オリジナルゲーム工房: ひらめきの実験室（電球・歯車・絵の具・えんぴつ） */
body[data-screen='atelier'] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='28' cy='26' r='10' fill='%23ffe6ae'/%3E%3Crect x='24' y='36' width='8' height='6' fill='%23e8dcc0'/%3E%3Ccircle cx='110' cy='40' r='9' fill='%23dcdcf0'/%3E%3Crect x='106' y='26' width='8' height='6' fill='%23dcdcf0'/%3E%3Crect x='106' y='48' width='8' height='6' fill='%23dcdcf0'/%3E%3Crect x='96' y='36' width='6' height='8' fill='%23dcdcf0'/%3E%3Crect x='118' y='36' width='6' height='8' fill='%23dcdcf0'/%3E%3Ccircle cx='110' cy='40' r='3' fill='%23ffffff'/%3E%3Ccircle cx='40' cy='120' r='8' fill='%23cfe9c8'/%3E%3Ccircle cx='50' cy='126' r='6' fill='%23cfe9c8'/%3E%3Ccircle cx='33' cy='128' r='5' fill='%23cfe9c8'/%3E%3Cpath d='M120 108 l22 -22 6 6 -22 22 z' fill='%23ffd3de'/%3E%3Cpath d='M114 114 l6 -6 6 6 -8 4 z' fill='%23e9c9a8'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fffbef 0%, #fbf5ff 45%);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, auto;
}

/* 📜 教室ミッション: 作戦司令部（指令書・ほし印） */
body[data-screen='missions'] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect x='20' y='24' width='34' height='24' rx='4' fill='%23e0eddc'/%3E%3Crect x='26' y='31' width='22' height='3' fill='%23f2f8ef'/%3E%3Crect x='26' y='38' width='16' height='3' fill='%23f2f8ef'/%3E%3Cpath d='M104 96 l6 12 12 6 -12 6 -6 12 -6 -12 -12 -6 12 -6 z' fill='%23f8e6dc'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ecf5ea 0%, #e7f1e5 40%);
  background-repeat: repeat, no-repeat;
  background-size: 150px 150px, auto;
}