/* まなぶんワールド — 見た目のきまり（UI-15：チープ NG）
   調査：ref/research-2026-10-13-korea.md・visual.md
   ・色は 基本1（空色）＋パステル4＋押すボタンだけ濃いオレンジ
   ・光は上から。影は「厚み（ぼかしなし）＋やわらかい落ち影」の2段で全部そろえる
   ・部品は丸い形だけ（UI-10）。タップは 88px 以上（UI-03）
   ・見出しはゲームロゴ風（白い太縁＋濃い外縁＋押し出し影） */
:root {
  --sky: #4aa8ff; --sky-d: #2f7fd6; --sky-l: #dff0ff;
  --cta: #ff8a2a; --cta-d: #d9640c; --cta-l: #ffb46b;
  --peach: #ffd9c7; --peach-d: #f0a98a;
  --mint: #c9f2e3; --mint-d: #7ccfb2;
  --lav: #e3dcff; --lav-d: #a99be8;
  --butter: #fff0b8; --butter-d: #e9c85c;
  --ink: #4b3a33; --ink2: #8a7469; --paper: #fffdf8; --line: #6b4a3a;
  --ok: #3fcf7a; --ok-d: #24a35a;
  --night: #2a2f5c;
  --tap: 88px;
  --r-l: 36px; --r-m: 26px; --r-s: 18px;
  --drop: 0 10px 24px rgba(40, 60, 110, .18);
  --font-logo: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-q: "Klee One", "Hiragino Mincho ProN", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; color: var(--ink); background: #bfe3ff;
  font-family: var(--font-ui); font-weight: 700;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; overscroll-behavior: none; overflow: hidden;
}
img { -webkit-user-drag: none; user-select: none; }
#bg { position: fixed; inset: 0; background: center / cover no-repeat; transition: background-image .4s ease; }
#bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--c-white-0) 55%, rgba(255,255,255,.25)); }
#app {
  position: fixed; inset: 0;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  display: flex; flex-direction: column;
}
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; animation: enter .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- ロゴ風の見出し ---- */
.logo {
  font-family: var(--font-logo); font-weight: 900; color: var(--c-white); margin: 0; line-height: 1.2; letter-spacing: .03em;
  /* 縁取りは影を円く重ねて作る（どのブラウザでも同じに見える） */
  text-shadow: 5.0px 0.0px 0 var(--line), 4.6px 1.9px 0 var(--line), 3.5px 3.5px 0 var(--line), 1.9px 4.6px 0 var(--line), 0.0px 5.0px 0 var(--line), -1.9px 4.6px 0 var(--line), -3.5px 3.5px 0 var(--line), -4.6px 1.9px 0 var(--line), -5.0px 0.0px 0 var(--line), -4.6px -1.9px 0 var(--line), -3.5px -3.5px 0 var(--line), -1.9px -4.6px 0 var(--line), -0.0px -5.0px 0 var(--line), 1.9px -4.6px 0 var(--line), 3.5px -3.5px 0 var(--line), 4.6px -1.9px 0 var(--line), 0 8px 0 var(--line), 0 12px 18px rgba(40,30,80,.25);
}
.logo.xl { font-size: 76px; text-shadow: 7.0px 0.0px 0 var(--line), 6.7px 2.2px 0 var(--line), 5.7px 4.1px 0 var(--line), 4.1px 5.7px 0 var(--line), 2.2px 6.7px 0 var(--line), 0.0px 7.0px 0 var(--line), -2.2px 6.7px 0 var(--line), -4.1px 5.7px 0 var(--line), -5.7px 4.1px 0 var(--line), -6.7px 2.2px 0 var(--line), -7.0px 0.0px 0 var(--line), -6.7px -2.2px 0 var(--line), -5.7px -4.1px 0 var(--line), -4.1px -5.7px 0 var(--line), -2.2px -6.7px 0 var(--line), -0.0px -7.0px 0 var(--line), 2.2px -6.7px 0 var(--line), 4.1px -5.7px 0 var(--line), 5.7px -4.1px 0 var(--line), 6.7px -2.2px 0 var(--line), 0 10px 0 var(--line), 0 16px 22px rgba(40,30,80,.25); }
.logo.l { font-size: 48px; }
.logo.m { font-size: 34px; text-shadow: 4.0px 0.0px 0 var(--line), 3.7px 1.5px 0 var(--line), 2.8px 2.8px 0 var(--line), 1.5px 3.7px 0 var(--line), 0.0px 4.0px 0 var(--line), -1.5px 3.7px 0 var(--line), -2.8px 2.8px 0 var(--line), -3.7px 1.5px 0 var(--line), -4.0px 0.0px 0 var(--line), -3.7px -1.5px 0 var(--line), -2.8px -2.8px 0 var(--line), -1.5px -3.7px 0 var(--line), -0.0px -4.0px 0 var(--line), 1.5px -3.7px 0 var(--line), 2.8px -2.8px 0 var(--line), 3.7px -1.5px 0 var(--line), 0 6px 0 var(--line), 0 9px 12px rgba(40,30,80,.2); }
.logo .c1 { color: var(--c-yellow); } .logo .c2 { color: #7fe0ff; } .logo .c3 { color: #ffa0c8; } .logo .c4 { color: #9ff07a; }

/* ---- 立体ボタン（上が明るく、下に厚み。押すと沈む） ---- */
.btn {
  --c: var(--cta); --cd: var(--cta-d); --cl: var(--cta-l);
  min-height: var(--tap); min-width: var(--tap); padding: 0 34px; border: none; border-radius: 999px; cursor: pointer;
  font: 900 30px var(--font-logo); color: var(--c-white); letter-spacing: .03em;
  background: linear-gradient(180deg, var(--cl) 0%, var(--c) 45%, var(--c) 100%);
  box-shadow: var(--sh-btn-hi), 0 7px 0 var(--cd), var(--drop);
  text-shadow: 0 2px 0 var(--cd);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(6px); box-shadow: inset 0 3px 0 var(--c-white-45), 0 1px 0 var(--cd), 0 4px 10px rgba(40,60,110,.15); }
.btn.white { --c: var(--c-white); --cd: var(--edge-w); --cl: var(--c-white); color: var(--ink); text-shadow: none; }
.btn.sky { --c: var(--sky); --cd: var(--sky-d); --cl: #8fd0ff; }
.btn.small { min-height: 68px; font-size: 22px; padding: 0 24px; }
.round {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: linear-gradient(var(--c-white), #f4ede6); box-shadow: var(--sh-hi), 0 6px 0 var(--edge-w), var(--drop);
  display: grid; place-items: center; font: 900 34px var(--font-logo); color: var(--line);
}
.round:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge-w); }
.round img { width: 62%; height: 62%; object-fit: contain; }

/* ---- クレイ調のカード ---- */
.card {
  background: var(--paper); border-radius: var(--r-l);
  box-shadow: var(--sh-hi), inset 0 -6px 0 rgba(107, 74, 58, .06), 0 8px 0 var(--c-line-12), var(--drop);
}
.pill {
  background: var(--c-white-92); border-radius: 999px; padding: 8px 20px 8px 10px; font: 900 26px var(--font-logo);
  box-shadow: inset 0 2px 0 var(--c-white), var(--sh-edge), var(--drop); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink);
}
.pill img { width: 44px; height: 44px; object-fit: contain; }
.pill .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--butter); }

.topbar { display: flex; align-items: center; gap: 14px; min-height: var(--tap); position: relative; z-index: 2; }
.topbar .grow { flex: 1; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }

/* ---- タイトル ---- */
.title-chars { display: flex; align-items: flex-end; gap: 18px; }
.title-chars img { width: 210px; height: 210px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 10px rgba(40,60,110,.25)); }

/* ---- 子どもを選ぶ・タマゴ ---- */
.kids { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.kid-card { width: 290px; padding: 18px 16px 22px; border: none; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .1s; }
.kid-card:active { transform: translateY(6px); }
.kid-card .face { width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, var(--c-white) 0 45%, var(--sky-l) 46% 100%); }
.kid-card .face img { width: 92%; height: 92%; object-fit: contain; }
.kid-card .name { font: 900 34px var(--font-logo); }
.egg-card { width: 250px; }
.egg-card .pair { display: flex; align-items: flex-end; justify-content: center; height: 170px; }
.egg-card .pair img:first-child { width: 150px; height: 150px; object-fit: contain; }
.egg-card .pair img.sil { width: 90px; height: 120px; object-fit: contain; filter: brightness(0) opacity(.18); margin-left: -16px; }

/* ---- ホーム（ロビー型） ---- */
.lobby { flex: 1; display: grid; grid-template-columns: 1.05fr 1.6fr; gap: 26px; min-height: 0; margin-top: 10px; }
.stage-buddy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; }
.stage-buddy .glow { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--c-white-95) 0%, var(--c-white-55) 35%, var(--c-white-0) 68%); }
.stage-buddy .buddy { position: relative; width: min(100%, 340px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 14px rgba(40,60,110,.28)); }
.stage-buddy .pedestal { width: 78%; height: 38px; margin-top: -30px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, var(--c-white) 0%, #e8f3ff 55%, #b9d6f2 100%); box-shadow: 0 8px 0 #9cbfe3, var(--drop); }
.bubble { position: relative; background: var(--c-white); border-radius: 28px; padding: 14px 22px; font-size: 23px; line-height: 1.45; box-shadow: var(--sh-edge-5), var(--drop); margin-bottom: 16px; max-width: 100%; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 28px; height: 28px; background: var(--c-white); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 8px 0; }
.grow-box { width: 100%; padding: 14px 18px; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 18px; white-space: nowrap; }
.meter { width: 100%; height: 22px; background: #efe5d9; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }
.meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(#a8f07f, #4cc95a); box-shadow: inset 0 3px 0 rgba(255,255,255,.5); }
.future { display: flex; align-items: center; gap: 6px; color: var(--ink2); white-space: nowrap; }
.future img { width: 46px; height: 46px; object-fit: contain; filter: brightness(0) opacity(.22); }

.lobby-right { display: flex; flex-direction: column; gap: 18px; min-height: 0; justify-content: center; }
.goal { padding: 12px 22px; display: flex; align-items: center; gap: 14px; font: 900 24px var(--font-logo); }
.goal .stars { display: flex; gap: 4px; }
.goal .stars img { width: 44px; height: 44px; }
.goal .stars img.off { filter: grayscale(1) opacity(.35); }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 56px; }
.mode-card {
  position: relative; border: none; cursor: pointer; border-radius: var(--r-l); padding: 110px 10px 22px; min-height: 250px; color: var(--c-white); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  font: 900 25px var(--font-logo); white-space: nowrap; text-shadow: 0 3px 0 rgba(0,0,0,.18);
  background: linear-gradient(180deg, var(--cl), var(--c) 55%); box-shadow: inset 0 4px 0 var(--c-white-45), 0 9px 0 var(--cd), var(--drop);
  transition: transform .08s;
}
.mode-card:active { transform: translateY(7px); box-shadow: inset 0 4px 0 var(--c-white-40), 0 2px 0 var(--cd); }
.mode-card .ico { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.2)); }
.mode-card .desc { font: 700 17px var(--font-ui); white-space: nowrap; opacity: .95; text-shadow: none; }
.mode-card .tag { position: absolute; top: 12px; right: 12px; background: var(--c-white); color: var(--cta-d); font: 900 15px var(--font-logo); border-radius: 999px; padding: 5px 12px; text-shadow: none; box-shadow: 0 3px 0 var(--c-black-12); }
.m-catch { --c: #36a7f0; --cd: #1f7cc0; --cl: #7fcbff; }
.m-rhythm { --c: #a46cf0; --cd: #7a45c4; --cl: #cba6ff; }
.m-boss { --c: #f26a4f; --cd: var(--c-outline-red); --cl: #ffa48d; }
.dock { display: flex; gap: 22px; justify-content: flex-end; margin-top: 6px; }
.dock button { border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 900 18px var(--font-logo); color: var(--c-white); text-shadow: 3.0px 0.0px 0 var(--line), 2.6px 1.5px 0 var(--line), 1.5px 2.6px 0 var(--line), 0.0px 3.0px 0 var(--line), -1.5px 2.6px 0 var(--line), -2.6px 1.5px 0 var(--line), -3.0px 0.0px 0 var(--line), -2.6px -1.5px 0 var(--line), -1.5px -2.6px 0 var(--line), -0.0px -3.0px 0 var(--line), 1.5px -2.6px 0 var(--line), 2.6px -1.5px 0 var(--line); }
.dock .base { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--c-white), #e9f3ff 60%, #c3dcf5); box-shadow: var(--sh-hi), 0 7px 0 #9cbfe3, var(--drop); }
.dock .base img { width: 74px; height: 74px; object-fit: contain; }
.dock button:active .base { transform: translateY(5px); box-shadow: 0 2px 0 #9cbfe3; }

/* ---- あそぶ画面 ---- */
.play { flex: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px 22px; min-height: 0; }
.play > .topbar { grid-column: 1 / -1; }
.play > .stage { grid-column: 1; grid-row: 2; }
.play > .qbox { grid-column: 2; grid-row: 2; align-self: center; max-height: 100%; overflow: auto; }
.play .choices { grid-template-columns: repeat(min(var(--n, 4), 2), 1fr); }
.play .choices.n3 .choice:last-child { grid-column: 1 / -1; }
.choice.long { font-size: 32px; white-space: nowrap; }
@media (orientation: portrait) {
  .play { grid-template-columns: 1fr; grid-template-rows: auto minmax(260px, .8fr) auto; }
  .play > .stage, .play > .qbox { grid-column: 1; grid-row: auto; }
  .play .choices { grid-template-columns: repeat(var(--n, 4), 1fr); }
}
.track { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 8px 18px; }
.track i { width: 28px; height: 28px; border-radius: 50%; background: #efe5d9; box-shadow: var(--sh-sink); display: block; }
.track i.done { background: radial-gradient(circle at 40% 35%, #fff6b0, #ffc93a 60%, #e9a20f); box-shadow: 0 2px 0 #c98a0a; }
.track i.now { background: var(--cta); box-shadow: 0 0 0 5px rgba(255,138,42,.3); }
.stage { position: relative; min-height: 0; }
.actor { position: absolute; transition: transform .35s ease, opacity .35s ease; }
.actor img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 10px rgba(30,40,80,.3)); }
.actor .shadow { position: absolute; left: 15%; right: 15%; bottom: -4px; height: 18px; border-radius: 50%; background: rgba(30,40,80,.22); filter: blur(4px); z-index: -1; }
.nameplate { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); padding: 8px 26px; border-radius: 999px; background: var(--c-white-92); font: 900 24px var(--font-logo); box-shadow: var(--sh-edge), var(--drop); white-space: nowrap; }
.hpbar { position: absolute; top: 6px; left: 6%; right: 6%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; z-index: 2; }
.hpbar .bar { height: 36px; border-radius: 999px; background: rgba(255,255,255,.9); padding: 5px; box-shadow: 0 5px 0 var(--c-black-25), 0 8px 16px var(--c-black-25); }
.hpbar .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(#ff9a8a, #f04a3a); box-shadow: var(--sh-hi-40); transition: width .45s ease; }
.hpbar .lbl { font: 900 28px var(--font-logo); text-align: center; color: var(--c-white); text-shadow: 3.0px 0.0px 0 var(--line), 2.6px 1.5px 0 var(--line), 1.5px 2.6px 0 var(--line), 0.0px 3.0px 0 var(--line), -1.5px 2.6px 0 var(--line), -2.6px 1.5px 0 var(--line), -3.0px 0.0px 0 var(--line), -2.6px -1.5px 0 var(--line), -1.5px -2.6px 0 var(--line), -0.0px -3.0px 0 var(--line), 1.5px -2.6px 0 var(--line), 2.6px -1.5px 0 var(--line); white-space: nowrap; }
.ball { position: absolute; width: 74px; height: 74px; z-index: 3; }
.ball img { width: 100%; height: 100%; object-fit: contain; }

/* 問題のボード（場面の中の白いボード・홈런型） */
.qbox {
  position: relative; background: var(--paper); border-radius: var(--r-l); padding: 18px 22px 20px;
  border: 6px solid var(--c-white); outline: 4px solid var(--c-line-12);
  box-shadow: 0 10px 0 var(--c-line-15), 0 18px 30px var(--c-shade-25);
  display: flex; flex-direction: column; gap: 14px;
}
.qtext { font-family: var(--font-q); font-size: 40px; line-height: 1.45; text-align: center; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; color: var(--ink); }
.qtext .big { font-size: 62px; }
.qvisual { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 56px; }
.qvisual svg { max-height: 200px; width: auto; }
.speak-btn { position: absolute; top: 10px; left: 10px; width: 66px !important; height: 66px !important; }
.choices { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 16px; }
.choice {
  --c: #fff4e0; --cd: #e3c9a3;  /* 答えは どれも クリーム（#345・位置ごとの 色を やめた）。押した・正解の 時だけ 色 */
  min-height: 124px; border: none; border-radius: var(--r-m); cursor: pointer; color: var(--ink);
  font: 600 44px var(--font-q); line-height: 1.2; padding: 8px; text-align: center;
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c) 38%); box-shadow: var(--sh-hi), 0 8px 0 var(--cd), 0 12px 16px rgba(40,60,110,.15);
  display: flex; align-items: center; justify-content: center; transition: transform .08s;
}
.choice:active { transform: translateY(6px); box-shadow: var(--sh-hi), 0 2px 0 var(--cd); }
.choice.dim { opacity: .3; pointer-events: none; }
.choice.right { --c: #b9f5cf; --cd: var(--ok-d); animation: bounce .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.choice.beat { animation: beat .2s ease; }
@keyframes beat { 50% { transform: scale(1.05); } }
.choice svg { width: 92px; height: 92px; }
.hint { background: #fff6cf; border: 3px dashed #f2cf6b; border-radius: 22px; padding: 10px 18px; font-size: 23px; text-align: center; }

/* 演出 */
.fx { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; z-index: 5; }
.fx > div { white-space: nowrap; font: 900 50px var(--font-logo); color: var(--c-white); text-shadow: 6.0px 0.0px 0 var(--line), 5.7px 1.9px 0 var(--line), 4.9px 3.5px 0 var(--line), 3.5px 4.9px 0 var(--line), 1.9px 5.7px 0 var(--line), 0.0px 6.0px 0 var(--line), -1.9px 5.7px 0 var(--line), -3.5px 4.9px 0 var(--line), -4.9px 3.5px 0 var(--line), -5.7px 1.9px 0 var(--line), -6.0px 0.0px 0 var(--line), -5.7px -1.9px 0 var(--line), -4.9px -3.5px 0 var(--line), -3.5px -4.9px 0 var(--line), -1.9px -5.7px 0 var(--line), -0.0px -6.0px 0 var(--line), 1.9px -5.7px 0 var(--line), 3.5px -4.9px 0 var(--line), 4.9px -3.5px 0 var(--line), 5.7px -1.9px 0 var(--line), 0 9px 0 var(--line); text-align: center; line-height: 1.2; }
.pop { animation: pop .8s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 30% { transform: scale(1.12); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1) translateY(-20px); opacity: 0; } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.shake { animation: shake .45s ease; }
@keyframes shake { 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
.hop { animation: hop .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 50% { transform: translateY(-34px) scale(1.04, .96); } }
.trip { animation: trip .6s ease; }
@keyframes trip { 30% { transform: rotate(-22deg) translateY(10px); } 60% { transform: rotate(8deg); } }
.hit { animation: hit .4s ease; }
@keyframes hit { 25% { transform: translateX(18px); filter: brightness(1.8); } 50% { transform: translateX(-10px); } }
.breathe { animation: breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.02, .985) translateY(1px); } }
.float { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* ずかん・ごほうび */
.panel { flex: 1; min-height: 0; padding: 18px; display: flex; flex-direction: column; }
.scroll { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 4px 6px 24px; }
.series-h { font: 900 26px var(--font-logo); margin: 6px 0 0; display: flex; align-items: center; gap: 10px; }
.series-h small { font-size: 18px; color: var(--ink2); }
.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.dex-card { border-radius: var(--r-m); padding: 10px 10px 12px; text-align: center; font: 900 19px var(--font-logo); background: linear-gradient(var(--c-white), #f7f1ea); box-shadow: inset 0 2px 0 var(--c-white), var(--sh-edge-5); }
.dex-card .pic { height: 130px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 60%, var(--c-white) 0 40%, var(--sky-l) 41%); margin-bottom: 6px; }
.dex-card .pic img { width: 120px; height: 120px; object-fit: contain; }
.dex-card.none .pic img { filter: brightness(0) opacity(.16); }
.dex-card.none { color: var(--ink2); }
.dex-card.rare { box-shadow: 0 0 0 4px var(--c-yellow), 0 5px 0 #e9b20f; }
.dex-card.rare .pic { background: radial-gradient(circle at 50% 60%, #fffbe0 0 40%, #ffe9a3 41%); }
.reward { padding: 14px 20px; display: flex; align-items: center; gap: 16px; font: 900 26px var(--font-logo); }
.reward > img { width: 72px; height: 72px; object-fit: contain; }
.reward .grow { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.reward .cost { font-size: 20px; color: var(--ink2); display: flex; align-items: center; gap: 4px; }
.reward .cost img { width: 28px; height: 28px; }

/* おしまい・ねむい */
.result { padding: 26px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 900px; }
.result-stars { display: flex; gap: 6px; }
.result-stars img { width: 84px; height: 84px; }
.result-stars img.off { filter: grayscale(1) opacity(.3); }
.caught { display: flex; gap: 14px; }
.caught > div { text-align: center; font: 900 18px var(--font-logo); }
.caught img { width: 120px; height: 120px; object-fit: contain; }
.feel { display: flex; gap: 18px; }
.feel .round { width: 104px; height: 104px; font-size: 56px; }
.feel .round.on { background: linear-gradient(#fff6c4, var(--c-yellow)); box-shadow: var(--sh-hi), 0 6px 0 #e9b20f; }
.sleep { background: linear-gradient(var(--night), #4b4f8a); color: var(--c-white); border-radius: var(--r-l); }
.sleep img { filter: brightness(.75) saturate(.8); }

/* 大人の設定（落ち着いた見た目・UI-42） */
.adult { font-family: -apple-system, "Hiragino Sans", sans-serif; font-weight: 500; color: #222; background: #f6f6f6; border-radius: 24px; padding: 20px; overflow-y: auto; flex: 1; }
.adult h2 { font-size: 20px; margin: 24px 0 8px; }
.adult h2:first-child { margin-top: 0; }
.adult label { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 17px; flex-wrap: wrap; }
.adult input, .adult select { font: inherit; font-size: 17px; padding: 10px 12px; border-radius: 10px; border: 1px solid #ccc; background: var(--c-white); min-height: 44px; }
.adult button.a { font-size: 16px; padding: 10px 16px; border-radius: 10px; background: var(--c-white); border: 1px solid #bbb; min-height: 44px; }
.adult button.a.p { background: #2b6cb0; color: var(--c-white); border-color: #2b6cb0; }
.adult table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--c-white); }
.adult td, .adult th { border-bottom: 1px solid #e5e5e5; padding: 8px; text-align: left; }
.adult .note { color: #666; font-size: 14px; }
.keypad { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
.keypad button { height: 80px; border-radius: 22px; border: none; background: linear-gradient(var(--c-white), #f4ede6); box-shadow: var(--sh-hi), 0 5px 0 var(--edge-w); font: 900 32px var(--font-logo); color: var(--ink); }
.keypad button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge-w); }

/* 縦向き・小さい画面 */
@media (orientation: portrait), (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .stage-buddy { flex-direction: row; gap: 14px; align-items: center; }
  .stage-buddy .glow, .stage-buddy .pedestal { display: none; }
  .stage-buddy .buddy { width: 200px; }
  .stage-buddy .bubble { margin: 0; }
  .grow-box { display: none; }
  .logo.xl { font-size: 56px; }
  .qtext { font-size: 34px; } .qtext .big { font-size: 52px; }
  .choice { font-size: 36px; min-height: 104px; }
}
@media (max-width: 640px) {
  .modes { grid-template-columns: 1fr; padding-top: 40px; gap: 52px; }
  .choices { grid-template-columns: repeat(2, 1fr); }
}

/* 色違い（レア）・段階の大きさ */
img.rare { filter: hue-rotate(150deg) saturate(1.25) drop-shadow(0 0 14px #ffe07a) !important; }
.s1 { transform: scale(.78); transform-origin: 50% 100%; } .s2 { transform: scale(.9); transform-origin: 50% 100%; } .s3 { transform: none; }

/* リズム：ビートで光る輪とコンボ */
.beatring { position: absolute; left: 50%; top: 40%; width: min(62%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--c-white-55) 0 38%, rgba(255,255,255,.12) 39% 62%, var(--c-white-0) 63%);
  box-shadow: 0 0 0 10px var(--c-white-35), 0 0 40px rgba(255,180,255,.8); display: grid; place-items: center; }
.beatring img { width: 52%; height: 52%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(80,30,120,.35)); }
.beatring.on { animation: ring .22s ease-out; }
@keyframes ring { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 16px rgba(255,255,255,.6), 0 0 70px rgba(255,200,255,1); } 100% { transform: translate(-50%, -50%) scale(1); } }
.combo { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); padding: 8px 24px; border-radius: 999px; background: linear-gradient(#fff6c4, var(--c-yellow)); box-shadow: 0 5px 0 #e9b20f, 0 8px 16px var(--c-black-25); font: 900 26px var(--font-logo); color: var(--ink); white-space: nowrap; }
.combo.zero { opacity: 0; }

/* ===== 文字と画面構成のきまり（harness/typography.md TY-*）=====
   ここより上の値より、このきまりを優先する */
:root {
  --t-title: 72px; --t-h1: 44px; --t-h2: 32px; --t-q: 34px; --t-q4: 40px;
  --t-c: 36px; --t-cn: 64px; --t-body: 26px; --t-btn: 30px; --t-label: 22px; --t-min: 18px;
}
@media (orientation: portrait) {
  :root { --t-title: 60px; --t-h1: 40px; --t-h2: 30px; --t-q: 32px; --t-q4: 36px; --t-c: 34px; --t-cn: 56px; }
}
/* TY-E 改行：文節（.ph）の途中で割らない。iOS Safari でも効く方法 */
.qtext, .hint, .bubble, .explain, .desc-text { line-break: strict; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.ph { display: inline-block; white-space: nowrap; }  /* 文節の中（「<大きい字>」の など）でも割らない：Safari は要素の境目で割ることがある */
/* TY-A 文字の段階 */
.logo.xl { font-size: var(--t-title); }
.h1 { display: inline-block; font: 800 var(--t-h1)/1.3 var(--font-logo); letter-spacing: .04em; color: var(--ink); margin: 0; white-space: nowrap;
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 8px 32px; box-shadow: var(--sh-edge-5), var(--drop); }
.h2, .series-h { font: 800 var(--t-h2)/1.35 var(--font-logo); letter-spacing: .02em; white-space: nowrap; }
.qtext { font: 600 var(--t-q)/1.6 var(--font-ui); letter-spacing: .05em; }
.qtext .big { font-size: calc(var(--t-q) * 1.6); font-weight: 800; letter-spacing: .02em; }
.young .qtext { font: 700 var(--t-q4)/1.5 var(--font-ui); letter-spacing: .06em; }
.qtext.kanji .big { font-family: var(--font-q); }   /* 字の形を学ぶ問題だけ Klee One（TY-A） */
.choice { font: 700 var(--t-c)/1.3 var(--font-ui); letter-spacing: .02em; white-space: nowrap; }
.choice.num { font: 800 var(--t-cn)/1 var(--font-logo); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.choice.long { font-size: calc(var(--t-c) * .86); }
.choice.kanji { font-family: var(--font-q); font-weight: 600; }
.hint, .bubble, .explain { font: 600 var(--t-body)/1.7 var(--font-ui); letter-spacing: .05em; }
.btn { font-size: var(--t-btn); white-space: nowrap; min-height: 96px; }
.btn.small { font-size: var(--t-label); min-height: 72px; }
.pill, .nameplate { font-size: var(--t-label); }
.mode-card { font-size: 28px; }
.mode-card .desc { font-size: var(--t-min); }
.mode-card .tag, .dock button, .dex-card, .caught > div, .reward .cost { font-size: var(--t-min); }
.grow-box { font-size: var(--t-min); }
/* TY-H2 下の縁 64px にボタンを置かない（幼児は手のひらを下の縁に置く） */
#app { padding-bottom: max(64px, env(safe-area-inset-bottom)); }
/* TY-H3 ずかん・ごほうびは上の帯へ（右下の角に置かない） */
.lobby-right .dock { justify-content: flex-start; }
/* 問題画面：選択肢がいつも下の縁から 64px 以上離れる（TY-H2）・数字の選択肢は大きく */
.play .choice { min-height: 120px; }

/* ===== 演出のきまり（harness/feel.md FX-*）===== */
/* まちがい：左右に ±6px を3往復・灰色の縁（赤くしない・FX-C2） */
.choice.wrong { animation: wrongShake .3s ease; box-shadow: inset 0 0 0 4px #b9b2ab, 0 8px 0 #cfc6bc; }
@keyframes wrongShake { 0%,100% { transform: translateX(0); } 16% { transform: translateX(-6px); } 33% { transform: translateX(6px); } 50% { transform: translateX(-6px); } 66% { transform: translateX(6px); } 83% { transform: translateX(-3px); } }
/* 正解：0 沈む → 60 1.12 に弾む → 150ms で戻る（FX-C1） */
.choice.right { animation: rightPop .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes rightPop { 0% { transform: scale(.92); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.choice.reveal { animation: reveal 1s ease 1; }
@keyframes reveal { 50% { box-shadow: 0 0 0 8px rgba(63,207,122,.45), 0 8px 0 var(--ok-d); } }
.hint.pop-in { animation: popIn .25s cubic-bezier(.2,1.4,.4,1); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.fx .gray { color: #e9e4de; }
/* ダメージ数字：上へ 40px・1.4→1.0・700ms で消える（FX-C4） */
.dmg { position: absolute; transform: translate(-50%, 0); pointer-events: none; z-index: 6; font: 900 46px var(--font-logo); color: var(--c-white);
  text-shadow: 5.0px 0.0px 0 var(--c-outline-red), 4.6px 1.9px 0 var(--c-outline-red), 3.5px 3.5px 0 var(--c-outline-red), 1.9px 4.6px 0 var(--c-outline-red), 0.0px 5.0px 0 var(--c-outline-red), -1.9px 4.6px 0 var(--c-outline-red), -3.5px 3.5px 0 var(--c-outline-red), -4.6px 1.9px 0 var(--c-outline-red), -5.0px 0.0px 0 var(--c-outline-red), -4.6px -1.9px 0 var(--c-outline-red), -3.5px -3.5px 0 var(--c-outline-red), -1.9px -4.6px 0 var(--c-outline-red), -0.0px -5.0px 0 var(--c-outline-red), 1.9px -4.6px 0 var(--c-outline-red), 3.5px -3.5px 0 var(--c-outline-red), 4.6px -1.9px 0 var(--c-outline-red), 0 6px 0 #8a2a1a; animation: dmgUp .72s ease-out forwards; white-space: nowrap; }
.dmg.big { font-size: 72px; color: #ffe66b; }
@keyframes dmgUp { 0% { transform: translate(-50%, 0) scale(1.4); opacity: 1; } 30% { transform: translate(-50%, -14px) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }
/* HP バー：白い残像が 300ms 遅れて減る */
.hpbar .bar { position: relative; }
.hpbar .bar i { position: absolute; left: 5px; top: 5px; bottom: 5px; height: auto; border-radius: 999px; }
.hpbar .bar i.ghost { background: var(--c-white); transition: width .5s ease; }
.hpbar .bar i.cur { background: linear-gradient(#ff9a8a, #f04a3a); box-shadow: var(--sh-hi-40); transition: width .12s linear; }
.ball { width: 74px; height: 74px; z-index: 4; }
/* 進化（FX-C6） */
.evolve { position: relative; width: 420px; height: 420px; display: grid; place-items: center; }
.evolve img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .breathe, .float, .bob { animation: none; } }

/* ===== 被り 0・はみ出し 0（TY-H8）===== */
/* 「きょうの おすすめ」はアイコンと重ねない：名前の上の流れに置く */
.mode-card .tag { position: static; order: -1; margin-bottom: 4px; }
/* おしまいの画面：iPad 横 820px の高さに収める */
.result { padding: 18px 32px; gap: 10px; }
.result-stars img { width: 64px; height: 64px; }
.caught img { width: 88px; height: 88px; }
.feel .round { width: 88px; height: 88px; }
.screen.center.result-screen { gap: 10px; justify-content: center; }

/* ===== 対戦・捕獲画面の構図（harness/typography.md TY-J・ポケモン各世代などの実測）===== */
.play { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
@media (orientation: portrait) { .play { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 40fr) minmax(0, 60fr); } }
.stage { container-type: size; }
.actor { transition: none; }
.actor img { filter: drop-shadow(0 10px 8px var(--c-shade-25)); }
/* 台座：足元の楕円（足は必ずこの中心・TY-J2） */
.actor .shadow { left: 2%; right: 2%; bottom: 1%; height: 13%; border-radius: 50%; filter: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(30,40,60,.38) 0 45%, rgba(30,40,60,.18) 60%, rgba(255,255,255,.18) 72%, var(--c-white-0) 74%); }
/* 相棒：手前・大きい・右を向く（TY-J3・J4）。向きは scale で反転（動きの translate と別に効く） */
.actor.a-buddy { width: 50cqh; left: calc(30% - 25cqh); bottom: calc(18% - 3cqh); z-index: 2; }
.actor.a-buddy img { scale: 1 1; }  /* UI-75：相棒の絵は 元から右向きにそろえた */
.actor.a-buddy img[src*="img/mon"] { scale: -1 1; }  /* モンスターの絵は 左向きなので反転 */
/* 通常の相手：奥・相棒の約 0.75 倍 */
.actor.a-enemy { width: 38cqh; left: calc(68% - 19cqh); bottom: calc(50% - 2.4cqh); z-index: 1; }
/* ボス：場面の高さの 68%・上の端に少しかかってよい */
.actor.a-boss { width: 68cqh; left: calc(62% - 34cqh); bottom: calc(46% - 4cqh); z-index: 1; }
/* 名前と HP は場面の左上（相手から離れた対角・TY-J5）、コンボは右上 */
.nameplate { left: 4%; top: 3%; transform: none; z-index: 3; }
.hpbar { left: 4%; right: auto; top: 3%; width: 45%; z-index: 3; }
.hpbar .lbl { text-align: left; }
.combo { left: auto; right: 4%; top: 3%; transform: none; }
.beatring { left: 66%; top: 38%; width: 46cqh; }
/* ボスの腕と HP バーが重ならないように（TY-H8） */
.actor.a-boss { left: calc(66% - 34cqh); }
.hpbar { width: 36%; }
/* 問題文の行：スピーカーと文を横に並べる（重ねない・TY-H8） */
.qrow { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.qrow .speak-btn { position: static; flex: none; width: 72px !important; height: 72px !important; }
.qrow .qtext { flex: 1; }
.qrow:has(.speak-btn) .qtext { padding-right: 72px; }  /* 文を画面の真ん中にそろえる */
/* ずかん：タブ＋4枚を1画面に（スクロールなし・TY-H4） */
.dex-tabs { display: flex; gap: 16px; justify-content: center; margin: 16px 0 24px; flex-wrap: wrap; }
.dex-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-content: center; }
.dex-grid .dex-card { padding: 16px 16px 20px; font-size: var(--t-label); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dex-grid .dex-card .pic { width: 100%; height: auto; aspect-ratio: 1; }
.dex-grid .dex-card .pic img { width: 88%; height: 88%; }
.rare-tag { font-size: var(--t-min); background: var(--c-yellow); border-radius: 999px; padding: 2px 12px; }
@media (orientation: portrait) { .dex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (orientation: portrait) {
  .dex-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dex-grid { align-content: start; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .dex-grid .dex-card { min-height: 0; }
  .dex-grid .dex-card .pic { aspect-ratio: auto; flex: 1; min-height: 0; }
}
@media (orientation: portrait) { .title-chars { gap: 8px; } .title-chars img { width: 176px; height: 176px; } }

/* ===== ずかんのカード：絵は枠の中に収め、名前と別の段（TY-H8・TY-H9）===== */
.dex-grid .dex-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; overflow: hidden; min-height: 0; }
.dex-grid .dex-card .pic { height: 100%; width: 100%; min-height: 0; aspect-ratio: auto; display: grid; place-items: center; overflow: hidden; margin: 0; }
.dex-grid .dex-card .pic img { width: auto; height: auto; max-width: 86%; max-height: 86%; object-fit: contain; }
.dex-grid { grid-auto-rows: minmax(0, min(46vh, 340px)); }
@media (orientation: portrait) {
  .dex-grid { grid-auto-rows: auto; grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
/* メニューのアイコンは止める（TY-H10）。動くのは押した時だけ */
.mode-card .ico { animation: none !important; }
.mode-card:active .ico { transform: translateX(-50%) scale(.94); }

/* ===== 文字の見た目の高さを絵とそろえる（TY-H9）=====
   丸ゴシックは上下の余白が均等でないので、文字の上下の余白を切って中央に置く（Safari 18.2+・Chrome 133+） */
.pill, .btn, .tag, .h1, .nameplate, .combo, .goal, .dex-tabs .btn, .rare-tag, .mode-card, .dock button { text-box: trim-both cap alphabetic; }
.pill { line-height: 1; padding-top: 10px; padding-bottom: 10px; }
.pill .num { display: inline-block; line-height: 1; }

/* ===== DC-38 対戦・捕獲の構図：上＝場面の窓・下＝問題（ポケモン DS 型・ref/research-2026-10-13-battle-ui.md） ===== */
body:has(.play) #bg { filter: blur(14px) saturate(.85) brightness(.9); transform: scale(1.06); }
.progbar { flex: 1; height: 28px; border-radius: 999px; background: var(--c-white-92); padding: 6px; box-shadow: var(--sh-edge), var(--drop); }
.progbar i { display: block; height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(var(--c-amber-l), var(--c-orange)); box-shadow: inset 0 3px 0 var(--c-white-45); transition: width .4s cubic-bezier(.2,.8,.3,1); }
.play.m-catch, .play.m-boss, .play.m-rhythm, .play.m-spot { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; }
.play.m-catch > .stage, .play.m-boss > .stage, .play.m-rhythm > .stage, .play.m-spot > .stage { grid-column: 1; grid-row: 2; border-radius: 28px; border: 6px solid var(--c-white); overflow: hidden;
  background-position: center 62%; background-size: cover; background-repeat: no-repeat; box-shadow: var(--sh-edge-8), 0 16px 28px rgba(30,40,80,.22); }
.play.m-catch > .qbox, .play.m-boss > .qbox, .play.m-rhythm > .qbox, .play.m-spot > .qbox { grid-column: 1; grid-row: 3; align-self: stretch; max-height: none; overflow: visible;
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; gap: 24px; padding: 16px 24px; }
.play.m-catch .choices, .play.m-boss .choices, .play.m-rhythm .choices, .play.m-spot .choices { grid-template-columns: repeat(min(var(--n, 4), 2), 1fr); }
.play .choices.n2, .play .choices.n3 { grid-template-columns: repeat(var(--n), 1fr); }
.play .choices.n3 .choice:last-child { grid-column: auto; }
.play .choice { min-height: 104px; }
.play .qvisual svg { max-height: 160px; }
@media (orientation: portrait) {
  .play.m-catch, .play.m-boss, .play.m-rhythm, .play.m-spot { grid-template-rows: auto minmax(0, 40fr) minmax(0, 60fr); }
  .play.m-catch > .qbox, .play.m-boss > .qbox, .play.m-rhythm > .qbox, .play.m-spot > .qbox { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .play .choice { min-height: 120px; }
}
/* 場面の中：相棒は手前・左下で画面の端にかかる後ろ姿、相手は奥・右の台座の上（大きさの比 約 1.6〜2） */
.play.m-catch .actor.a-buddy, .play.m-boss .actor.a-buddy { width: 78cqh; left: calc(20% - 39cqh); bottom: -14cqh; z-index: 2; }
.play:is(.m-catch, .m-boss) .actor.a-buddy img { scale: 1 1; }
.play:is(.m-catch, .m-boss) .actor.a-buddy img.front { scale: -1 1; }
.play:is(.m-catch, .m-boss) .actor.a-buddy .shadow { display: none; }
.play.m-catch .actor.a-enemy { width: 44cqh; left: calc(70% - 22cqh); bottom: 22cqh; z-index: 1; }
.play.m-boss .actor.a-boss { width: 74cqh; left: calc(60% - 37cqh); bottom: 12cqh; z-index: 1; }
/* 奥の台座（草の楕円）：足元を置く場所をはっきりさせる */
.play:is(.m-catch, .m-boss) .actor:is(.a-enemy, .a-boss) .shadow { left: -18%; right: -18%; bottom: -3%; height: 16%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--c-white-55), rgba(120,170,90,.55) 55%, rgba(40,70,40,.35) 100%); filter: none; }
/* 相手の板：名前＋ゲージを1枚に・場面の右上（相手の上） */
.foe-plate { position: absolute; top: 14px; right: 16px; z-index: 3; min-width: 280px; max-width: 34%; padding: 10px 18px 12px; border-radius: 18px;
  background: rgba(255,255,255,.94); box-shadow: 0 5px 0 rgba(107,74,58,.18), 0 10px 18px rgba(30,40,80,.2); display: flex; flex-direction: column; gap: 8px; }
.foe-plate .nm { font: 800 24px var(--font-logo); color: var(--ink); white-space: nowrap; text-box: trim-both cap alphabetic; }
.foe-plate .pips { display: flex; gap: 8px; }
.foe-plate .pips i { flex: 1; height: 18px; border-radius: 999px; background: var(--c-track); box-shadow: var(--sh-sink); transition: background .2s; }
.foe-plate .pips i.on { background: linear-gradient(#bdf3ff, #2bb6e8); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 10px rgba(43,182,232,.6); }
.foe-plate .bar { position: relative; height: 22px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.foe-plate .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.foe-plate .bar i.ghost { background: var(--c-white); transition: width .5s ease; }
.foe-plate .bar i.cur { background: linear-gradient(#ff9a8a, #f04a3a); box-shadow: var(--sh-hi-40); transition: width .12s linear; }
.play.m-catch .combo, .play.m-boss .combo { left: 16px; right: auto; top: 14px; }
/* 技（系統ごと・FX-C）：炎・風・光線・星 */
.tech { position: absolute; z-index: 4; pointer-events: none; will-change: transform, opacity; }
.tech.fire { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7c2 0%, #ffd24a 30%, var(--c-fire) 62%, rgba(255,60,0,0) 72%); }
.tech.wind { width: 96px; height: 96px; border-radius: 50%; border: 10px solid transparent; border-top-color: #e8fbff; border-right-color: #9fe6ff; filter: drop-shadow(0 0 6px #bdf3ff); }
.tech.beam { height: 34px; border-radius: 999px; transform-origin: 0 50%; background: linear-gradient(#e9fdff, #5fe1ff 45%, #1aa7e6); box-shadow: 0 0 18px #7fe8ff, 0 0 36px rgba(95,225,255,.6); }
.tech.star { width: 60px; height: 60px; background: #ffe066; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); filter: drop-shadow(0 0 8px #fff3a0); }
.hitspark { position: absolute; z-index: 5; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none;
  background: var(--c-white); clip-path: polygon(50% 0,58% 36%,92% 14%,66% 44%,100% 52%,64% 60%,84% 94%,52% 68%,40% 100%,38% 64%,6% 84%,30% 54%,0 40%,34% 38%,14% 8%,44% 32%); }

/* DC-39 リズム：場面の中央に相棒・右に拍の輪。拍の目印は場面の下（選択肢のすぐ上）で、点が左から寄って輪に重なる */
.play.m-rhythm .actor.a-buddy { width: 62cqh; left: calc(30% - 31cqh); bottom: 72px; }
.play.m-rhythm .beatring { left: 68%; top: 44%; width: 52cqh; }
.beatlane { position: absolute; left: 6%; right: 6%; bottom: 14px; height: 48px; z-index: 3; border-radius: 999px; background: var(--c-white-75); box-shadow: inset 0 2px 4px var(--c-black-12); }
.beatlane .tgt { position: absolute; right: 18px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 5px solid #a46cf0; box-sizing: border-box; }
.beatlane .dot { position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--c-white), #cba6ff 60%, #8a52e0); }
.beatlane .tgt.on { animation: ring .22s ease-out; }
.play.m-rhythm .combo { left: auto; right: 16px; top: 14px; }
.play.m-rhythm .fx-pop, .play.m-rhythm .fxtext { top: auto; }

/* 横向きの場面を広く（2026-10-13 本人「iPad の横で上の段がすごく狭い」・台帳 #74）
   場面は画面の高さの 52% 以上：選択肢は横1列（5字以上の言葉がある時だけ 2×2）。低い画面（mini・Safari のバーあり）は詰める */
@media (orientation: landscape) {
  .play.m-catch, .play.m-boss, .play.m-rhythm, .play.m-spot { grid-template-rows: auto minmax(52%, 1fr) auto; gap: 12px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); padding: 12px 20px; gap: 20px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choices { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choice { min-height: 104px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choices.two .choice { min-height: 80px; }
  .play .qvisual svg { max-height: 132px; }
}
@media (orientation: landscape) and (max-height: 780px) {
  .play > .topbar { min-height: 56px; }
  .play > .topbar .round { width: 56px !important; height: 56px !important; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choice { min-height: 88px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choices.two .choice { min-height: 72px; }
  .play .qtext { font-size: 34px; }
  .play .qvisual svg { max-height: 112px; }
}
.play.m-boss .actor.a-boss { width: 88cqh; left: calc(60% - 44cqh); bottom: 6cqh; }
@media (orientation: landscape) {
  /* 文と図は横に並べる（下の段を低くして場面を広く） */
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox > div:first-child { flex-direction: row !important; align-items: center; justify-content: center; gap: 16px !important; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox .qrow { flex: 1 1 auto; min-width: 0; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox .qvisual { flex: none; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .choice.long { font-size: 28px; }
}
@media (orientation: landscape) {
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox > div:first-child { flex-wrap: wrap; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox .qrow { flex: 1 1 300px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox .qvisual svg { width: auto; height: auto; max-height: 112px; }
}
@media (orientation: landscape) {
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .qrow:has(.speak-btn) .qtext { padding-right: 0; justify-content: flex-start; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox:has(.qvisual) { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) .qtext { gap: 0 12px; line-height: 1.4; }
}

/* 並べ方の使い分け（横向き）：.side＝左右／.stack＝上下（上に問題・下に選択肢を横1列） */
@media (orientation: landscape) {
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.stack { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.stack .qtext { justify-content: center; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.stack .choices { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.stack .choice { min-height: 88px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.stack .choice.long { font-size: 30px; }
}
/* 色を当てる：ボタンそのものを答えの色に（文字・絵なし） */
.choice.paint { background: var(--c); box-shadow: inset 0 4px 0 var(--c-white-35), 0 8px 0 color-mix(in srgb, var(--c) 65%, var(--c-black)), 0 12px 16px rgba(40,60,110,.15); }
.choice.paint:active { box-shadow: inset 0 4px 0 var(--c-white-35), 0 2px 0 color-mix(in srgb, var(--c) 65%, var(--c-black)); }
/* 絵の選択肢は白いボタンに（ボタンの色で迷わせない） */
.choice.pic { --c: #ffffff; --cd: #e2d8cc; }
@media (orientation: landscape) {
  .play.m-catch, .play.m-boss, .play.m-rhythm, .play.m-spot { grid-template-rows: auto minmax(40%, 1fr) auto; }
  /* 図のある問題：左に文と大きい図（縦に積む）・右に選択肢 2×2 */
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig > div:first-child { flex-direction: column !important; flex-wrap: nowrap; gap: 8px !important; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qrow { flex: none; width: 100%; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qtext { justify-content: center; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qvisual svg { max-height: 170px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .choice { min-height: 80px; }
}
@media (orientation: landscape) and (max-height: 780px) {
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qvisual svg { max-height: 150px; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .choice { min-height: 72px; }
}
.play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qvisual svg { height: 150px; width: auto; max-height: none; }
@media (orientation: landscape) and (min-height: 781px) { .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qvisual svg { height: 170px; } }
/* 4歳の選択肢はいつも 120px 以上（TY-F2） */
.play .qbox.young .choice { min-height: 120px !important; }
@media (orientation: portrait) {
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qvisual svg { height: 150px; width: auto; max-height: none; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .choice { min-height: 96px; }
}
/* 文の高さのずれ 0（2026-10-13 本人「問題の文章がズレてる」・TY-H9・台帳 #82）
   大きい字の文節とほかの文節を、箱の真ん中ではなく字の下の線（ベースライン）でそろえる */
.qtext, .hint, .bubble { align-items: baseline; align-content: center; }
.qtext .ph, .hint .ph, .bubble .ph { vertical-align: baseline; }

/* ===== なかまパズル（DC-40）：横＝左におだい・右に盤／縦＝上におだい・下に盤 ===== */
.play.m-puzzle { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.play.m-puzzle > .topbar { grid-column: 1 / -1; }
.play.m-puzzle > .qbox { grid-column: 1; grid-row: 2; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px 24px; text-align: center; }
.play.m-puzzle > .stage { grid-column: 2; grid-row: 2; display: grid; place-items: center; border-radius: 28px; border: 6px solid var(--c-white); overflow: hidden;
  background-position: center; background-size: cover; box-shadow: var(--sh-edge-8), 0 16px 28px rgba(30,40,80,.22); }
@media (orientation: portrait) {
  .play.m-puzzle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .play.m-puzzle > .qbox { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; padding: 16px 24px; }
  .play.m-puzzle > .stage { grid-column: 1; grid-row: 3; }
}
.odai-lbl { font: 800 22px var(--font-ui); color: var(--ink-2, #8a6d5c); letter-spacing: .1em; text-box: trim-both cap alphabetic; }
.odai-num { font: 900 96px/1 var(--font-logo); color: var(--ink); text-box: trim-both cap alphabetic; }
.odai-l { display: block; text-wrap: wrap; }  /* まとまりごとに 1行・中は 文節の 間を 残す（見直し役：間が 消えていた）。inline-block だと 幅が ちぢんで 1語ずつ 折れた */
.odai-txt { font: 600 26px/1.6 var(--font-ui); color: var(--ink); max-width: 15em; line-break: strict; word-break: keep-all; }
.odai-pics { display: flex; gap: 8px; }
.odai-pics img { width: 72px; height: 72px; object-fit: contain; }
.odai-pips { display: flex; gap: 10px; }
.odai-pips i { width: 28px; height: 28px; border-radius: 50%; background: var(--c-track); box-shadow: var(--sh-sink); display: block; }
.odai-pips i.on { background: radial-gradient(circle at 40% 35%, #fff6b0, #ffc93a 60%, #e9a20f); box-shadow: 0 2px 0 #c98a0a; }
.pboard { position: relative; border-radius: 24px; background: var(--c-white-55); box-shadow: inset 0 2px 8px var(--c-black-12); touch-action: none; user-select: none; -webkit-user-select: none; }
.ptile { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); padding: 5px; transition: transform .28s cubic-bezier(.3,.9,.4,1.15); }
.ptile::before { content: ""; position: absolute; inset: 5px; border-radius: 34%;
  background: radial-gradient(circle at 35% 28%, var(--c-white) 0%, var(--jc) 45%, color-mix(in srgb, var(--jc) 78%, var(--line)) 100%);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), 0 4px 0 rgba(107,74,58,.18); }
.ptile > * { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.ptile b { font: 800 calc(var(--s) * .3)/1 var(--font-ui); color: var(--ink); white-space: nowrap; }
.ptile b.sm { font-size: calc(var(--s) * .24); }
.ptile.pic img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.ptile.sel::before { box-shadow: 0 0 0 5px var(--c-white), 0 0 0 9px var(--c-orange), 0 4px 0 rgba(107,74,58,.18); }
.ptile.sel { z-index: 2; }
.ptile.glow::before { animation: pglow 1.2s ease 2; }
@keyframes pglow { 50% { box-shadow: 0 0 0 6px #fff6b0, 0 0 24px 8px #ffd84d; } }
.plink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.plink polyline { fill: none; stroke: var(--c-orange); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
/* モードが4つになったので 2×2（ホームの作り直し DC-37 までの並べ方） */
.m-puzzle { --c: #2fb88a; --cd: #1d8a66; --cl: #7fe0bd; }
.modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 18px; padding-top: 40px; }
.modes .mode-card { min-height: 0; padding: 68px 10px 16px; }
.modes .mode-card .ico { width: 112px; height: 112px; top: -44px; }
.play.m-puzzle > .stage { position: relative; }
.pboard { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
/* ハート（DC-42）：上の帯の右。減ったハートは色を抜く（赤いバツは使わない） */
.topbar .hearts { display: flex; gap: 4px; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--c-white-92); box-shadow: var(--sh-edge), var(--drop); }
.topbar .hearts img { width: 40px; height: 40px; object-fit: contain; transition: filter .3s, opacity .3s; }
.topbar .hearts img.off { filter: brightness(0) invert(1) drop-shadow(2px 0 0 #d9c6b2) drop-shadow(-2px 0 0 #d9c6b2) drop-shadow(0 2px 0 #d9c6b2) drop-shadow(0 -2px 0 #d9c6b2); opacity: 1; }  /* まだ＝白い 中身に ふち（空の 入れ物・#347。灰色は「なくした」に 見える） */
.lose-screen { gap: 20px; }
.lose-face { width: 200px; height: 200px; object-fit: contain; filter: saturate(.7); }
.review-play { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; }
.review-play > .qbox { grid-column: 1; grid-row: 2; align-self: center; }
/* 拍の目印は自分の位置のまま光る（大きな輪の動き＝真ん中寄せの移動つき を使わない・台帳 #92） */
.beatlane .tgt.on { animation: tgtpulse .22s ease-out; }
@keyframes tgtpulse { 40% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(255,255,255,.7), 0 0 24px rgba(164,108,240,.9); } }
/* ホームの吹き出しは光より手前（2026-10-13 本人「文字の吹き出しが後ろにあって違和感」・台帳 #93） */
.stage-buddy .bubble { z-index: 3; color: var(--ink); }
.stage-buddy .glow { z-index: 0; }
.stage-buddy .buddy { position: relative; z-index: 1; } .stage-buddy .pedestal { position: relative; z-index: 0; }  /* 土台は 足の 下（足に かぶせない・#354・R4） */
/* ホームの台：つるつるの円盤をやめ、草原になじむ やわらかい影（台帳 #94） */
.stage-buddy .pedestal { height: 40px; margin-top: -26px; background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.5) 0%, rgba(110,160,80,.38) 55%, rgba(40,70,40,0) 72%); box-shadow: none; }

/* ===== 入口2つ（DC-42）：ぼうけん（主役）／ゲーム ===== */
.modes.entries { grid-template-columns: minmax(0, 1fr); gap: 52px; padding-top: 48px; }
.modes.entries .mode-card { padding: 30px 24px 26px 190px; min-height: 150px; align-items: flex-start; justify-content: center; font-size: 34px; text-align: left; }
.modes.entries .mode-card .ico { left: 28px; top: 50%; transform: translateY(-50%); width: 140px; height: 140px; }
.modes.entries .mode-card .desc { font-size: 20px; }
.m-adv { --c: var(--c-orange); --cd: #d16f0c; --cl: #ffc77a; }
.m-adv { box-shadow: inset 0 4px 0 var(--c-white-45), 0 9px 0 var(--cd), 0 0 0 8px rgba(255,214,120,.55), var(--drop); }  /* 光は止めておく（TY-H10） */
@keyframes advglow { 50% { box-shadow: inset 0 4px 0 rgba(255,255,255,.45), 0 9px 0 var(--cd), 0 0 0 8px rgba(255,214,120,.55), var(--drop); } }
.m-game { --c: #36a7f0; --cd: #1f7cc0; --cl: #7fcbff; }
.game-modes { flex: 1; align-content: center; max-width: 900px; margin: 0 auto; width: 100%; }

/* ===== 冒険のマップ ===== */
.world-screen { gap: 12px; }
.map-wrap { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.map { position: relative; aspect-ratio: 3 / 2; width: min(100cqw, 150cqh); border-radius: 28px; border: 6px solid var(--c-white); background-size: cover; background-position: center;
  box-shadow: var(--sh-edge-8), 0 16px 28px var(--c-shade-25); }
.node { position: absolute; translate: -50% -50%; width: 88px; height: 88px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center; font: 900 36px var(--font-logo); color: var(--c-white);
  background: radial-gradient(circle at 40% 30%, var(--c-amber-l), var(--c-orange) 60%, #d16f0c); box-shadow: 0 6px 0 #a8560a, 0 10px 16px rgba(0,0,0,.3); text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.node.boss { width: 104px; height: 104px; background: radial-gradient(circle at 40% 30%, #ff9a8a, #f04a3a 60%, #a8261a); box-shadow: 0 6px 0 #7a1a10, 0 10px 16px rgba(0,0,0,.3); }
.node .num img { width: 64px; height: 64px; object-fit: contain; display: block; }
.node.locked { background: radial-gradient(circle at 40% 30%, #e8e2da, #b9b0a6 60%, #8a8178); box-shadow: 0 6px 0 #6e665e, 0 10px 16px var(--c-black-25); color: rgba(255,255,255,.85); }
.node.locked .num img { filter: grayscale(1) opacity(.6); }
.node.next { animation: nodepulse 1.4s ease-in-out infinite; }
@keyframes nodepulse { 50% { box-shadow: 0 6px 0 #a8560a, 0 0 0 10px rgba(255,255,255,.75), 0 0 30px 10px rgba(255,214,120,.9); } }
.node .nstars { position: absolute; left: 50%; top: 100%; translate: -50% 4px; display: flex; gap: 2px; padding: 4px 8px; border-radius: 999px; background: var(--c-white-92); }
.node .nstars img { width: 22px; height: 22px; }
.node .nstars img.off { filter: grayscale(1); opacity: .35; }
.node .lockmsg { position: absolute; left: 50%; top: 100%; translate: -50% 6px; white-space: nowrap; font: 800 18px var(--font-ui); color: var(--ink); background: var(--c-white-95); padding: 6px 12px; border-radius: 999px; text-shadow: none; }
.new-wear { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.new-wear img { width: 56px; height: 56px; object-fit: contain; }
body:has(.world-screen) #bg { filter: blur(16px) brightness(.85) saturate(.8); transform: scale(1.08); }
/* 吹き出しの影は しっぽまで同じ形でつける（box-shadow は四角だけ・drop-shadow は形に沿う）（2026-10-13 本人「しっぽに影がない」・台帳 #103） */
.bubble { box-shadow: none; filter: drop-shadow(0 5px 0 var(--c-line-12)) drop-shadow(0 8px 14px rgba(40,60,110,.16)); }
/* iPad の Safari：すばやい2回タップで拡大されて、画面の右が切れる（2026-10-13 本人「ハートも切れてる？」・台帳 #105）
   user-scalable=no は iOS では効かないため、タップの拡大を止める */
html, body, button, .choice, .pboard, .node { touch-action: manipulation; }
/* やめる？のモーダル（台帳 #104） */
.modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(40,30,60,.45); padding: 24px; animation: enter .2s ease-out; }
.modal { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 48px; max-width: 640px; text-align: center; }
.modal-txt { font: 600 26px/1.7 var(--font-ui); color: var(--ink); line-break: strict; word-break: keep-all; text-wrap: balance; }
.modal-btns { display: flex; gap: 24px; }
/* 技の絵（台帳 #98）：炎・ビームは のびる、風・星は飛ぶ、当たった時の絵 */
.tech2 { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.tech2 img { width: 100%; height: 100%; display: block; }
.tech2.stream { transform-origin: 0 50%; }
.tech2.stream img { object-fit: fill; filter: drop-shadow(0 0 10px rgba(255,255,255,.6)); }
.tech2.fly img, .tech2.hit img { object-fit: contain; }
.tech2.hit { z-index: 5; }
/* 必殺技のボタン：場面の右下・光る（押せる時だけ出る） */
.special-btn { position: absolute; right: 20px; bottom: 20px; z-index: 6; min-height: 96px; padding: 0 36px; border: none; border-radius: 999px; cursor: pointer;
  font: 900 32px var(--font-logo); color: var(--c-white); background: linear-gradient(180deg, var(--c-amber-l), var(--c-fire)); box-shadow: inset 0 4px 0 rgba(255,255,255,.5), 0 8px 0 #c2560a, 0 0 0 8px rgba(255,214,120,.6), 0 0 32px 12px rgba(255,180,60,.7);
  text-shadow: 0 3px 0 rgba(0,0,0,.2); animation: spbtn 1s ease-in-out infinite; }
@keyframes spbtn { 50% { transform: scale(1.06); } }
.special-btn:active { transform: translateY(6px); }
/* 大写し（カットイン） */
.cutin { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: grid; align-items: center; overflow: hidden; }
.cutin .cut-bg { position: absolute; inset: 18% 0; background: url(../img/fx/special.webp) center / cover; clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); animation: cutbg .25s ease-out both; box-shadow: 0 0 0 100vmax rgba(20,10,40,.55); }
.cutin .cut-face { position: absolute; left: 6%; top: 50%; width: min(46vh, 420px); height: auto; translate: 0 -50%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); animation: cutface .35s cubic-bezier(.2,.9,.3,1.2) both; }
.cutin .cut-name { position: absolute; right: 6%; top: 50%; translate: 0 -50%; font: 900 64px var(--font-logo); color: var(--c-white); white-space: nowrap; animation: cutname .35s .12s cubic-bezier(.2,.9,.3,1.2) both;
  text-shadow: 4px 0 0 var(--line), -4px 0 0 var(--line), 0 4px 0 var(--line), 0 -4px 0 var(--line), 3px 3px 0 var(--line), -3px 3px 0 var(--line), 3px -3px 0 var(--line), -3px -3px 0 var(--line), 0 8px 0 var(--c-black-25); }
.cutin.out { opacity: 0; transition: opacity .25s; }
@keyframes cutbg { from { transform: scaleY(0); } }
@keyframes cutface { from { transform: translateX(-120%); } }
@keyframes cutname { from { transform: translateX(80%) scale(1.4); opacity: 0; } }
@media (orientation: portrait) { .cutin .cut-name { font-size: 48px; right: 4%; } .cutin .cut-face { width: min(34vh, 320px); } }
/* 字間の分だけ文字の頭にも すき間を足して、左右の余白をそろえる（字間は最後の文字の後ろにも付くため）
   2026-10-13 本人「文字とこの余白 ちゃんとルールを守って」・台帳 #107・TY-H9 */
.h1 { text-indent: .04em; }
.h2, .series-h, .choice { text-indent: .02em; }
.btn { text-indent: .03em; }
.odai-lbl { text-indent: .1em; }
/* 「おだい」：字間の分を後ろから引いて真ん中に（台帳 #107） */
.odai-lbl { text-indent: 0; margin-right: -.1em; }
/* ホーム：ずかん・ごほうびを 下の縁 64px より上に（TY-H2） */
.modes.entries { gap: 36px; padding-top: 40px; }
.modes.entries .mode-card { min-height: 132px; padding-top: 24px; padding-bottom: 22px; }
/* 低い横向きの画面（iPad mini・Safari のバーあり）：相棒を少し小さくして、足と下の板の間を 24px 以上に（台帳 #105） */
@media (orientation: landscape) and (max-height: 720px) { .stage-buddy .buddy { width: min(100%, 280px); } .stage-buddy .bubble { margin-bottom: 8px; } }
.play.m-boss .actor.a-boss { left: calc(55% - 44cqh); }  /* 右上の名前の板にかからない（台帳 #107） */
/* 低い横向きの画面（iPad mini・Safari のバーあり 〜720px）：ホームを詰める（台帳 #107） */
@media (orientation: landscape) and (max-height: 720px) {
  .lobby-right { gap: 12px; }
  .lobby-right .goal { margin-top: 8px; }
  .modes.entries { gap: 24px; padding-top: 32px; }
  .modes.entries .mode-card { min-height: 104px; padding-top: 16px; padding-bottom: 16px; padding-left: 150px; font-size: 28px; }
  .modes.entries .mode-card .ico { width: 104px; height: 104px; left: 24px; }
  .stage-buddy .buddy { width: min(100%, 240px); }
}
/* マップの印は マップの幅に合わせて縮む（重ならない） */
.map { container-type: inline-size; }
.node { width: clamp(52px, 7.2cqw, 88px); height: clamp(52px, 7.2cqw, 88px); font-size: clamp(24px, 3cqw, 36px); }
.node.boss { width: clamp(60px, 8.4cqw, 104px); height: clamp(60px, 8.4cqw, 104px); }
.node .num img { width: 72%; height: 72%; }
/* 低い横向き：ずかん・ごほうびを右の列の上へ（下の縁 64px に入れない・TY-H2） */
@media (orientation: landscape) and (max-height: 720px) {
  .lobby-right { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "goal dock" "modes modes"; align-content: start; column-gap: 16px; }
  .lobby-right .goal { grid-area: goal; align-self: center; }
  .lobby-right .modes { grid-area: modes; }
  .lobby-right .dock { grid-area: dock; margin-top: 0; }
}
/* ゲームを えらぶ カード：アイコンをカードの中に入れ、上・下・左右の余白を 24px にそろえる（台帳 #113・TY-H9） */
.game-modes { gap: 24px; padding-top: 24px; }
.game-modes .mode-card { min-height: 0; padding: 24px; justify-content: center; gap: 8px; }
.game-modes .mode-card .ico { position: static; transform: none; width: 104px; height: 104px; margin-bottom: 4px; }
.game-modes .mode-card .tag { top: 16px; right: 16px; }
.game-modes .mode-card .tag { position: absolute; margin: 0; }
.game-modes .mode-card .tag { top: 0; right: 24px; translate: 0 -50%; }  /* カードの上のふちにまたがる札（アイコンに かからない） */
/* 字間の直し（#107）は取り消し：見えている部分を測る fitInk に任せる（#115） */
.h1, .btn, .h2, .series-h, .choice { text-indent: 0; }
/* 「きょうの おすすめ」：オレンジの札を カードの上のまん中に またがせる（台帳 #114） */
.game-modes .mode-card .tag { top: 0; left: 50%; right: auto; translate: -50% -50%; padding: 8px 20px; font: 900 18px var(--font-logo);
  color: var(--c-white); background: linear-gradient(180deg, var(--c-orange-l), var(--c-fire)); border: 3px solid var(--c-white); border-radius: 999px;
  box-shadow: 0 4px 0 #c2560a, 0 6px 12px rgba(0,0,0,.18); text-shadow: 0 2px 0 rgba(0,0,0,.15); white-space: nowrap; }
.blank { display: inline-block; width: 2.2em; height: 1.1em; vertical-align: -0.15em; margin: 0 .15em; border: 3px solid currentColor; border-radius: 8px; opacity: .55; }  /* 国語の空欄（　） */
/* やめる？（作り直し・台帳 #116）：見出し 44px／失う物 26px（ジャンプ率 約1.7）・主ボタンは横いっぱい・やめるは下に小さく */
.quit-modal { width: min(560px, 92vw); padding: 32px 40px 24px; gap: 16px; }
.quit-modal .m-face { width: 136px; height: 136px; object-fit: contain; margin-top: -96px; filter: saturate(.85) drop-shadow(0 10px 12px rgba(40,30,60,.25)); }
.quit-modal .m-title { font: 900 44px/1.2 var(--font-logo); color: var(--ink); letter-spacing: .02em; text-box: trim-both cap alphabetic; }
.quit-modal .losses { display: flex; gap: 16px; justify-content: center; }
.quit-modal .loss { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 20px; background: #f4ece4; font: 700 24px var(--font-ui); color: var(--ink); }
.quit-modal .loss img { width: 44px; height: 44px; object-fit: contain; filter: grayscale(1); opacity: .6; }
.quit-modal .loss b { font: 900 26px var(--font-logo); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(107,74,58,.55); }
.quit-modal .m-keep { width: 100%; min-height: 96px; font-size: 32px; margin-top: 8px; }
.quit-modal .m-quit { min-height: 72px; padding: 0 32px; border: none; background: none; cursor: pointer; font: 800 24px var(--font-ui); color: var(--c-ink-sub); }
.quit-modal .loss { flex-direction: column; gap: 6px; min-width: 168px; padding: 16px 20px; }
.quit-modal .loss b, .quit-modal .loss span { white-space: nowrap; flex: none; }
.quit-modal .loss span { font: 700 20px var(--font-ui); color: var(--c-ink-sub); }
.quit-modal .m-face { margin-top: -88px; }
.modal-back { background: rgba(40,30,60,.55); }

/* ===== リズム：答えが流れてくる（DC-43） ===== */
.rfield { position: absolute; inset: 0; z-index: 2; }
.rlane { position: absolute; left: 0; right: 0; height: calc(64% / var(--n)); top: calc(22% + var(--i) * 70% / var(--n)); background: rgba(255,255,255,.18); border-top: 2px solid var(--c-white-35); border-bottom: 2px solid var(--c-white-35); }
.rline { position: absolute; left: 26%; top: 16%; bottom: 6%; width: 10px; margin-left: -5px; border-radius: 999px; background: var(--c-white); box-shadow: 0 0 0 4px rgba(164,108,240,.6), 0 0 24px 6px rgba(255,255,255,.7); z-index: 1; }
.rline.on { animation: rlinepulse .2s ease-out; }
@keyframes rlinepulse { 40% { box-shadow: 0 0 0 8px rgba(255,214,120,.9), 0 0 40px 14px rgba(255,255,255,.95); } }
.rnote { position: absolute; left: 0; top: calc(22% + var(--i) * 70% / var(--n) + 32% / var(--n)); translate: 0 -50%; z-index: 3; border: none; cursor: pointer;
  min-width: 120px; height: 96px; padding: 0 22px; border-radius: 999px; display: grid; place-items: center; touch-action: manipulation;
  font: 800 36px var(--font-ui); color: var(--ink); white-space: nowrap; background: radial-gradient(circle at 40% 30%, var(--c-white), #ffe7a8 60%, #ffc93a); box-shadow: 0 0 0 4px var(--c-white), 0 6px 0 4px #c98a0a, 0 10px 18px 4px rgba(0,0,0,.22); }  /* 白い ふちを 先に（上に）・厚みは ふちの 外の 下へ（#352） */
.young .rnote, .play.m-rhythm .rnote:has(img) { height: 132px; min-width: 132px; }
.rnote img { width: 96px; height: 96px; object-fit: contain; }
.rnote.miss { filter: grayscale(1); opacity: .45; }
.rnote.hit { animation: rhit .3s ease-out forwards; }
@keyframes rhit { to { scale: 1.5; opacity: 0; } }
.rnote.gone { opacity: 0; transition: opacity .25s; }
.rgauge { position: absolute; left: 16px; top: 14px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--c-white-92); font: 800 18px var(--font-ui); color: var(--ink); }
.rgauge .bar { width: 200px; height: 18px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.rgauge .bar i { display: block; height: 100%; width: 30%; border-radius: 999px; background: linear-gradient(90deg, var(--c-amber-l), var(--c-fire), #f04aa0); transition: width .3s ease; }
.rfield.fever .rlane { background: rgba(255,214,120,.35); }
.rfield.fever .rline { background: #ffe066; }
.play.m-rhythm .actor.a-buddy { width: 46cqh; left: calc(12% - 23cqh); bottom: 6%; }
@media (orientation: portrait) { .play.m-rhythm .actor.a-buddy { width: min(46cqh, 22cqw); left: calc(13% - min(23cqh, 11cqw)); } }  /* 縦は 場面が 細い：相棒を 判定の 線（26%）の 左に 全身 入れる（B3・切れ・線に 重ねない） */
.play.m-rhythm > .qbox.rq { grid-template-columns: minmax(0, 1fr) !important; }
.play.m-rhythm > .qbox.rq .qtext { justify-content: center; }
/* ボスの「ため」（DC-43）：名前の板の HP の下 */
.foe-plate .charge { display: flex; align-items: center; gap: 8px; font: 800 16px var(--font-ui); color: var(--c-ink-sub); }
.foe-plate .cbar { flex: 1; height: 12px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.foe-plate .cbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-amber-l), var(--c-fire)); transition: width .05s linear; }
.foe-plate .cbar i.hot { background: linear-gradient(90deg, var(--c-orange), #f04a3a); }
/* 捕獲：そわそわ・縮む輪（DC-43） */
.foe-plate .fidget { display: flex; align-items: center; gap: 6px; font: 800 16px var(--font-ui); color: var(--c-ink-sub); }
.foe-plate .fidget b { width: 14px; height: 14px; border-radius: 50%; background: var(--c-track); display: block; }
.foe-plate .fidget b.on { background: var(--c-orange); box-shadow: 0 0 8px rgba(255,154,42,.8); }
.aim { position: absolute; z-index: 5; border-radius: 50%; border: 8px solid var(--c-white); box-shadow: 0 0 0 4px rgba(43,182,232,.8), 0 0 24px rgba(255,255,255,.8); transform: translate(-50%, -50%); cursor: pointer; }
.aim.good { border-color: #ffe066; box-shadow: 0 0 0 4px rgba(255,154,42,.9), 0 0 30px rgba(255,214,120,.9); }
.throw-btn { animation: none; }
/* プレイヤーを選ぶ（台帳 #118） */
.kids:has(.pl-card) { display: flex; gap: 48px; justify-content: center; margin-top: 32px; }
.pl-card { position: relative; width: 340px; padding: 24px 24px 28px; border: 6px solid var(--c-white); border-radius: 36px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: radial-gradient(circle at 50% 30%, var(--c-white-75), var(--c-white-0) 60%), linear-gradient(180deg, color-mix(in srgb, var(--kc) 35%, var(--c-white)), var(--kc));
  box-shadow: 0 10px 0 color-mix(in srgb, var(--kc) 60%, var(--c-black)), 0 18px 30px var(--c-shade-25); transition: transform .12s; }
.pl-card:active { transform: translateY(6px); }
.pl-stage { position: relative; width: 260px; height: 260px; display: grid; place-items: end center; }
.pl-buddy { position: relative; z-index: 1; width: 250px; height: 250px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(30,40,80,.3)); }
.pl-ped { position: absolute; left: 10%; right: 10%; bottom: 0; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, var(--c-white-95), var(--c-white-40) 60%, var(--c-white-0) 72%); }
.pl-eggs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 220px; margin-bottom: 20px; }
.pl-eggs img { width: 100%; }
.pl-name { min-width: 220px; padding: 14px 28px; border-radius: 999px; background: var(--c-white); font: 900 36px var(--font-logo); color: var(--ink); text-align: center; white-space: nowrap; box-shadow: 0 5px 0 var(--c-line-15); text-box: trim-both cap alphabetic; }
.kids.picked .pl-card:not(.chosen) { opacity: .45; filter: grayscale(.5); transition: opacity .3s, filter .3s; }
.pl-card.chosen { box-shadow: 0 10px 0 color-mix(in srgb, var(--kc) 60%, var(--c-black)), 0 0 0 10px rgba(255,236,150,.9), 0 0 48px 16px rgba(255,214,120,.8); }
.pl-card.chosen .pl-buddy { animation: hop .45s cubic-bezier(.3,1.6,.5,1) 1; }
@media (orientation: portrait) { .kids:has(.pl-card) { flex-direction: column; align-items: center; gap: 32px; } .pl-stage { width: 220px; height: 220px; } .pl-buddy { width: 210px; height: 210px; } }
@media (orientation: landscape) and (max-height: 720px) { .pl-stage { width: 210px; height: 210px; } .pl-buddy { width: 200px; height: 200px; } }
/* 文のない問題（4歳）：🔊 と 絵を 横に並べ、選択肢と 高さのまん中を そろえる（台帳 #119） */
.play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox > div:first-child:not(:has(.qtext)) { flex-direction: row !important; align-items: center; justify-content: center; gap: 24px !important; }
.play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox > div:first-child:not(:has(.qtext)) .qrow { width: auto; flex: none; min-height: 0; }
.play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox { align-items: center; }
/* ビーム（画面で描く・台帳 #120）：白い芯＋水色の光＋流れる光の波 */
.beam2 { position: absolute; z-index: 4; transform-origin: 0 50%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(95,225,255,0) 0%, #5fe1ff 22%, #e9fdff 42%, #ffffff 50%, #e9fdff 58%, #5fe1ff 78%, rgba(95,225,255,0) 100%);
  box-shadow: 0 0 18px 6px rgba(127,232,255,.75), 0 0 44px 14px rgba(95,225,255,.45); }
.beam2::after { content: ""; position: absolute; inset: 20% 0; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--c-white-0) 0 28px, var(--c-white-75) 28px 40px); animation: beamflow .18s linear infinite; }
@keyframes beamflow { to { background-position: 40px 0; } }
.muzzle { position: absolute; z-index: 5; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, var(--c-white) 0%, #bdf3ff 35%, rgba(95,225,255,0) 70%); }
/* 文も絵もない問題（4歳）：🔊 を左に・選択肢を右に 1列 */
.play:is(.m-catch, .m-boss) > .qbox.sponly { grid-template-columns: auto minmax(0, 1fr) !important; }
.play:is(.m-catch, .m-boss) > .qbox.sponly .qrow { width: auto; }
/* ===== タイトル（台帳 #117） ===== */
.title-screen { position: fixed; inset: 0; cursor: pointer; overflow: hidden; }
.title-art { position: absolute; inset: 0; background: url(../img/bg/title-wide.webp) center 60% / cover no-repeat; animation: artin 1.2s ease-out both; }
@media (orientation: portrait) { .title-art { background-image: url(../img/bg/title-tall.webp); background-position: center bottom; } }
@keyframes artin { from { transform: scale(1.08); filter: brightness(1.4); } }
.title-logo { position: absolute; left: 50%; top: 7%; translate: -50% 0; margin: 0; font-size: clamp(64px, 9vw, 112px); white-space: nowrap; z-index: 2;
  filter: drop-shadow(0 8px 0 rgba(60,30,20,.35)) drop-shadow(0 18px 24px rgba(20,30,80,.35)); }
.title-logo span { display: inline-block; animation: logoin .7s cubic-bezier(.2,1.6,.4,1) both; }
.title-logo span:nth-child(1) { animation-delay: .25s; } .title-logo span:nth-child(2) { animation-delay: .33s; } .title-logo span:nth-child(3) { animation-delay: .41s; } .title-logo span:nth-child(4) { animation-delay: .49s; } .title-logo span:nth-child(5) { animation-delay: .6s; }
@keyframes logoin { from { transform: translateY(-120px) scale(.4) rotate(-8deg); opacity: 0; } }
@media (orientation: landscape) { .title-logo { left: 6%; translate: 0 0; top: 6%; } }
.tap-start { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; z-index: 2; padding: 18px 44px; border-radius: 999px; white-space: nowrap;
  font: 900 34px var(--font-logo); color: var(--c-white); background: rgba(30,40,90,.55); border: 4px solid rgba(255,255,255,.85); backdrop-filter: blur(6px);
  text-shadow: 0 3px 0 var(--c-black-25); animation: tapblink 1.6s ease-in-out 1.2s infinite both; }
@keyframes tapblink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.97); } }
.title-screen.go .title-art { transition: filter .35s, transform .35s; filter: brightness(1.8); transform: scale(1.06); }
.title-screen.go .tap-start { animation: none; opacity: 0; transition: opacity .2s; }
.title-logo { font-size: clamp(72px, 10.5vw, 140px); }
.tap-start { bottom: 4%; }
.logo.xl.title-logo { font-size: clamp(72px, 10.5vw, 140px); }
.title-screen .ver { position: absolute; right: 16px; bottom: 12px; z-index: 2; font: 700 18px var(--font-ui); color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ===== 保護者の画面（台帳 #122）：落ち着いた大人向け・白いカード・本文 18px 以上 ===== */
.parent { background: #eef3f8; position: fixed; inset: 0; display: flex; flex-direction: column; font-family: var(--font-ui); color: var(--c-ink-strong); }
.ptop { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: var(--c-white); box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.ptop .round { width: 56px !important; height: 56px !important; }
.ptitle { font: 800 26px var(--font-ui); white-space: nowrap; }
.ptabs { display: flex; gap: 8px; margin-left: auto; background: #eef3f8; padding: 6px; border-radius: 999px; }
.ptabs button { position: relative; min-height: 48px; padding: 0 22px; border: none; border-radius: 999px; background: none; cursor: pointer; font: 800 20px var(--font-ui); color: #6a5d55; }
.ptabs button.on { background: var(--c-white); color: var(--c-ink-strong); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.ptabs .badge { position: absolute; top: 2px; right: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--c-fire); color: var(--c-white); font: 800 14px/22px var(--font-ui); font-style: normal; }
.pbody { flex: 1; overflow: auto; padding: 24px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 24px; align-items: start; }
.pcard { background: var(--c-white); border-radius: 20px; padding: 24px; box-shadow: 0 2px 10px rgba(30,40,80,.08); display: flex; flex-direction: column; gap: 14px; }
.pcard.wide { max-width: 900px; margin: 0 auto 24px; }
.pcard h2 { margin: 0; font: 800 22px var(--font-ui); }
.pcard h3 { margin: 8px 0 0; font: 800 18px var(--font-ui); color: #6a5d55; }
.pcard .note { margin: 0; font-size: 16px; color: var(--c-ink-note); line-height: 1.6; }
.pc-head { display: flex; align-items: center; gap: 16px; }
.pc-face { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; background: #eaf4ff; }
.pc-name { font: 900 26px var(--font-logo); }
.pc-sub { font-size: 16px; color: var(--c-ink-note); }
.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pc-stats div { background: #f6f2ee; border-radius: 14px; padding: 12px 8px; text-align: center; }
.pc-stats b { display: block; font: 900 28px var(--font-logo); }
.pc-stats span { font-size: 14px; color: var(--c-ink-note); }
.pc-bar { display: grid; grid-template-columns: 9em 1fr 7em; align-items: center; gap: 10px; font-size: 16px; }
.pc-bar .b { height: 12px; border-radius: 999px; background: #eee6df; overflow: hidden; }
.pc-bar .b i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7fcbff, #36a7f0); }
.pc-bar em, .pc-fun em { font-style: normal; color: var(--c-ink-note); text-align: right; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.pc-fun { display: flex; justify-content: space-between; font-size: 16px; }
.pc-fun img { width: 22px; height: 22px; }
.req, .rw { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f0e9e3; font-size: 18px; }
.req span { flex: 1; } .req em { font-style: normal; color: var(--c-ink-note); }
.rw .pin:first-child { flex: 1; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; }
.pin { min-height: 48px; padding: 0 14px; border: 1px solid #d9d0c8; border-radius: 12px; font: 600 18px var(--font-ui); background: var(--c-white); color: var(--c-ink-strong); }
.pin.num { width: 90px; text-align: center; }
.step { display: flex; align-items: center; gap: 8px; }
.step b { min-width: 72px; text-align: center; font-size: 20px; }
.pbtn { min-height: 48px; min-width: 48px; padding: 0 18px; border: 1px solid #d9d0c8; border-radius: 12px; background: var(--c-white); cursor: pointer; font: 800 18px var(--font-ui); color: var(--c-ink-strong); display: inline-flex; align-items: center; justify-content: center; }
.pbtn.p { background: var(--cta); border-color: var(--cta); color: var(--c-white); }
.pbtn.ghost { border-color: transparent; color: #a08d80; }
.toggle { width: 52px; height: 30px; accent-color: var(--cta); }
.pcol { display: flex; flex-direction: column; gap: 24px; }
.pc-stats b small { font-size: 16px; margin-left: 2px; }
.row small { display: block; font-size: 14px; color: var(--c-ink-note); }
.col { display: flex; flex-direction: column; gap: 8px; font-size: 18px; }
.pcard.danger { border: 2px solid #f3d6c8; }
.pbtn.warn { background: var(--c-white); border-color: #e0663f; color: #d0502a; }
.preset { max-width: 560px; text-align: left; align-items: stretch; font-family: var(--font-ui); }
.preset h2 { margin: 0; font: 800 24px var(--font-ui); color: var(--c-ink-strong); }
.preset .note { font-size: 18px; color: #6a5d55; }
.preset .modal-btns { justify-content: flex-end; }
.preset .note, .pcard .note { line-break: strict; word-break: keep-all; }
/* 🔊 はいつも 問題の板の左上（台帳 #124）：大きく・目立つ色・声の間は 音の波が広がる */
.play > .qbox { position: relative; padding-left: 132px !important; min-height: 128px; }
.play > .qbox .say-btn { position: absolute !important; left: 20px; top: 20px; width: 92px !important; height: 92px !important; z-index: 2;
  background: radial-gradient(circle at 40% 30%, var(--c-white), #e3f4ff 60%, #bfe3ff); box-shadow: 0 6px 0 #7fb6e0, 0 10px 16px rgba(40,90,140,.25); border: 4px solid var(--c-white); }
.play > .qbox .say-btn img { width: 64%; height: 64%; }
.play > .qbox.young .say-btn { width: 104px !important; height: 104px !important; }
.play > .qbox.young { padding-left: 144px !important; }
.say-btn.off { opacity: .35; filter: grayscale(.6); pointer-events: none; }
.say-btn.speaking { animation: sayring 1s ease-out infinite; }
@keyframes sayring { 0% { box-shadow: 0 6px 0 #7fb6e0, 0 0 0 0 rgba(54,167,240,.55); } 100% { box-shadow: 0 6px 0 #7fb6e0, 0 0 0 26px rgba(54,167,240,0); } }
/* あそびかたの「？」（#325 案2・R22）：スピーカーの 下に 縦に 並べる（帯・× の 隣には 置かない）。8歳 88・4歳 96（FD-20）・間 16＋影 */
.play > .qbox .qtools { position: absolute; left: 20px; top: 0; bottom: 0; margin-block: auto; height: fit-content; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 24px; z-index: 2; }
.play > .qbox.young .qtools { width: 104px; }
.play > .qbox .qtools .say-btn { position: relative !important; left: auto; top: auto !important; bottom: auto !important; margin: 0 !important; }
.round.how-btn { width: 88px !important; height: 88px !important; flex: none; border: 4px solid var(--c-white);
  background: radial-gradient(circle at 40% 30%, var(--c-white), #fff3d1 60%, #ffdf96) !important; box-shadow: 0 6px 0 #e2b45c, 0 10px 16px rgba(140,100,40,.22) !important; }
.how-btn b { font: 900 52px/1 var(--font-ui); color: #a8641a; transform: translateY(-.052em); }  /* 字の 形の まん中を 丸の まん中へ（#378：2px 下げて いた＋字の 箱の 余白で 4.7px 下に 見えた・qmark.mjs で 測る） */
.young .round.how-btn { width: 96px !important; height: 96px !important; }
.young .how-btn b { font-size: 58px; }
/* 箱が 低い リズム（高さ 120）：スピーカーの 右に 横に 並べる（boddle の 道具の 組・どの 遊びでも 左の 同じ 所） */
.play > .qbox.rq .qtools { flex-direction: row; width: auto; }
.play > .qbox.rq { padding-left: 244px !important; }
.play > .qbox.rq.young { padding-left: 244px !important; }
/* リズムの 箱（高さ 120）：4歳の 道具も 見た目 88・押せる 範囲 104（FD-20）→ 上下の 余白 16（#350） */
.play > .qbox.rq.young .qtools .round { width: 88px !important; height: 88px !important; position: relative; }
.play > .qbox.rq.young .qtools .round::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.play > .qbox.rq.young .how-btn b { font-size: 52px; }
/* スピーカーの 無い 板（パズルの おだい・まちがいさがし）：板の 左上（スピーカーの 列と 同じ 左）。見た目 72・押せる 範囲 88（FD-20） */
.play > .qbox:is(.odai, .spot-q) .how-btn { position: absolute; left: 12px; top: 12px; width: 72px !important; height: 72px !important; z-index: 2; }
.play > .qbox:is(.odai, .spot-q) .how-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.play > .qbox:is(.odai, .spot-q) .how-btn b { font-size: 42px; }
.play > .qbox.odai:has(.how-btn) { padding-top: 92px !important; padding-left: 24px !important; padding-right: 24px !important; }  /* おだいの 中身は「？」の 下から（重ねない）。横は 🔊 用の 左右 132 を 外す（？は 上に あるので いらない・幅 96px で 1語ずつ 折れていた #385） */
@media (orientation: portrait) { .play > .qbox.odai:has(.how-btn) { padding-top: 16px !important; padding-left: 104px !important; } .play > .qbox.odai .how-btn { top: 0; bottom: 0; margin-block: auto; } }  /* 縦は おだいが 上に 横 1列：上で なく 左を 空ける（盤を 小さく しない） */
.play > .qbox .qrow:not(:has(.qtext)) { display: none; }
/* 問題の板の高さを一定に（問題ごとに 板・🔊・選択肢が 上下に動かない・台帳 #124） */
@media (orientation: landscape) {
  .play.m-catch, .play.m-boss, .play.m-rhythm, .play.m-spot { grid-template-rows: auto minmax(0, 1fr) 38% !important; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox { height: 100%; box-sizing: border-box; align-content: center; }
}
@media (orientation: portrait) {
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox { height: 100%; box-sizing: border-box; align-content: center; }
}
.play > .qbox.stack .qrow, .play > .qbox.fig .qrow { flex: none !important; }  /* 縦に積む時は 横並び用の幅 300px を高さに使わない */
/* だれと あそぶ？（台帳 #125） */
.partner-tap { position: relative; border: none; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; z-index: 1; }
.partner-tap .swap { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; z-index: 3; white-space: nowrap; padding: 8px 18px; border-radius: 999px;
  background: var(--c-white); border: 3px solid var(--c-orange-l); font: 800 20px var(--font-ui); color: var(--ink); box-shadow: var(--sh-edge); }
.pt-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; align-content: start; padding: 24px 8px; overflow: auto; }
.pt-card { position: relative; border: 5px solid var(--c-white); border-radius: 28px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #ffffff, #eef6ff); box-shadow: var(--sh-edge-8), var(--drop); }
.pt-card.on { border-color: var(--c-orange-l); box-shadow: 0 8px 0 #d16f0c, 0 0 0 6px rgba(255,214,120,.7), var(--drop); }
.pt-pic img { width: 150px; height: 150px; object-fit: contain; }
.pt-name { font: 900 24px var(--font-logo); color: var(--ink); white-space: nowrap; }
.pt-sub { font: 700 16px var(--font-ui); color: var(--c-ink-sub); white-space: nowrap; }
.pt-bar { width: 80%; height: 10px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.pt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-amber-l), var(--c-fire)); border-radius: 999px; }
.pt-on { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: 6px 16px; border-radius: 999px; background: linear-gradient(180deg, var(--c-orange-l), var(--c-fire)); color: var(--c-white); font: 900 16px var(--font-logo); border: 3px solid var(--c-white); white-space: nowrap; }
.pt-empty { grid-column: 1 / -1; padding: 24px 32px; font-size: 24px; text-align: center; }
.evo-pair { display: flex; align-items: center; gap: 48px; }
.evo-pair img { width: 220px; height: 220px; object-fit: contain; }
.evo-before { filter: grayscale(.3) brightness(.9); }
.evo-after { animation: evoin .8s cubic-bezier(.2,1.6,.4,1) both .3s; filter: drop-shadow(0 0 24px rgba(255,236,150,.9)); }
@keyframes evoin { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }

/* ===== 見出し H1＝画面の上の帯（TY-C4・台帳 #126） ===== */
.screen > .topbar:has(> .h1) { margin: calc(-1 * max(16px, env(safe-area-inset-top))) calc(-1 * max(20px, env(safe-area-inset-right))) 8px calc(-1 * max(20px, env(safe-area-inset-left)));
  padding: max(12px, env(safe-area-inset-top)) 24px 12px; background: rgba(255,255,255,.94); box-shadow: inset 0 -6px 0 var(--c-orange-l), 0 6px 16px rgba(30,40,80,.15); }
.screen > .topbar > .h1 { background: none; box-shadow: none; padding: 0; font: 900 44px/1.2 var(--font-logo); letter-spacing: .02em; color: var(--ink); }
@media (orientation: portrait) { .screen > .topbar > .h1 { font-size: 40px; } }
/* H2＝枠の上の色の札・H3＝左に色の線 */
.panel { position: relative; background: rgba(255,255,255,.94); border: 6px solid var(--c-white); border-radius: 28px; padding: 40px 24px 24px; box-shadow: 0 8px 0 var(--c-line-12), var(--drop); }
.panel > .h2tab { position: absolute; left: 24px; top: 0; translate: 0 -50%; padding: 8px 24px; border-radius: 16px; background: linear-gradient(180deg, var(--c-orange-l), var(--c-fire)); border: 4px solid var(--c-white);
  font: 900 28px var(--font-logo); color: var(--c-white); white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.15); box-shadow: 0 4px 0 #c2560a; }
.h3 { margin: 0; padding-left: 14px; border-left: 6px solid var(--c-orange-l); font: 800 22px var(--font-ui); color: var(--ink); }

/* ===== 最初のなかまを選ぶ（台帳 #127） ===== */
.starters { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: center; padding: 8px 4px; }
.starter { position: relative; height: min(58vh, 460px); border: 6px solid var(--c-white); border-radius: 32px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 20px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.7), var(--c-white-0) 55%), linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 10px 0 color-mix(in srgb, var(--c2) 70%, var(--c-black)), var(--drop); transition: transform .15s, filter .2s, opacity .2s; }
.st-sil { position: absolute; left: 50%; top: 4%; width: 92%; translate: -50% 0; }
.st-sil img { width: 100%; filter: brightness(0) drop-shadow(0 0 2px var(--c-white)) drop-shadow(0 0 10px rgba(255,255,255,.9)); opacity: .32; }
.st-buddy { position: relative; z-index: 1; width: 70%; margin-bottom: -18px; }
.st-buddy img { width: 100%; filter: drop-shadow(0 10px 10px rgba(30,40,80,.3)); }
.st-ped { width: 70%; height: 28px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.9), var(--c-white-0) 70%); margin-bottom: 8px; }
.st-name { font: 900 32px var(--font-logo); color: var(--c-white); white-space: nowrap; text-shadow: 0 3px 0 var(--c-black-25); }
.st-move { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.9); font: 800 18px var(--font-ui); color: var(--ink); white-space: nowrap; }
.st-move img { width: 40px; height: 28px; object-fit: contain; }
.starters.picking .starter:not(.on) { filter: grayscale(.4) brightness(.85); opacity: .7; transform: scale(.96); }
.starter.on { transform: translateY(-8px) scale(1.03); box-shadow: 0 10px 0 color-mix(in srgb, var(--c2) 70%, var(--c-black)), 0 0 0 8px rgba(255,236,150,.95), 0 0 48px 14px rgba(255,214,120,.8); }
.starter.on .st-sil img { opacity: .55; }
.starter.on .st-buddy img { animation: hop .45s cubic-bezier(.3,1.6,.5,1) 1; }
.starter-go { display: flex; justify-content: center; padding: 12px 0 0; }
.starter-go .btn { min-height: 96px; font-size: 34px; padding: 0 56px; }
.starter-go .btn:disabled { filter: grayscale(1); opacity: .45; }
@media (orientation: portrait) { .starters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .starter { height: min(32vh, 380px); } }
/* タッチして はじめる：大きいオレンジのボタン形・光が横切る（台帳 #129） */
.tap-start { overflow: hidden; padding: 24px 64px; border: 6px solid var(--c-white); font: 900 44px var(--font-logo); letter-spacing: .04em;
  background: linear-gradient(180deg, #ffc56a 0%, var(--cta) 55%, #f26a1a 100%); backdrop-filter: none;
  box-shadow: inset 0 4px 0 var(--c-white-55), 0 10px 0 var(--c-orange-edge), 0 0 0 10px rgba(255,214,120,.45), 0 18px 34px rgba(0,0,0,.35);
  text-shadow: 0 3px 0 var(--c-orange-edge); animation: tapbounce 1.6s ease-in-out 1.2s infinite both; }
.tap-start::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, var(--c-white-0), var(--c-white-75), var(--c-white-0)); animation: tapshine 2.4s ease-in-out 1.4s infinite; }
@keyframes tapbounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes tapshine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
/* 最初のなかま：どの高さでも入りきる（絵の場所が 残りの高さで伸び縮み・台帳 #130） */
.starters { min-height: 0; align-items: stretch; }
.starter { height: auto; max-height: 520px; min-height: 0; justify-content: flex-start; padding: 16px 12px 18px; gap: 6px; }
.st-fig { position: relative; flex: 1; min-height: 0; width: 100%; }
.st-sil { position: absolute; inset: 0 4%; top: 0; left: 4%; width: auto; translate: none; display: grid; place-items: center; }
.st-sil img { width: 100%; height: 100%; object-fit: contain; }
.st-buddy { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; width: auto; height: 66%; margin: 0; z-index: 1; }
.st-buddy img { width: auto; height: 100%; object-fit: contain; }
.st-ped { position: absolute; left: 15%; right: 15%; bottom: 2%; width: auto; height: 12%; margin: 0; }
.st-name, .st-move { flex: none; }
/* 上の帯の見出しには カプセルの背景を 付けない */
.screen > .topbar > .h1 { background: transparent !important; box-shadow: none !important; border-radius: 0; }
.st-shot { position: absolute; left: 50%; top: 45%; width: 60%; z-index: 3; pointer-events: none; }
.st-hit { position: absolute; left: 88%; top: 40%; width: 46%; z-index: 3; pointer-events: none; }
.starter-go { padding-bottom: 12px; }
/* ===== ごほうび（台帳 #121） ===== */
.rw-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 24px; align-items: start; padding-top: 32px; }
.rw-bank { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 48px; }
.rw-coin { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(180,120,0,.35)); }
.rw-num { font: 900 88px/1 var(--font-logo); color: var(--ink); text-box: trim-both cap alphabetic; margin-top: 8px; }
.rw-unit { font: 800 24px var(--font-ui); color: var(--c-ink-sub); }
.rw-items { display: flex; flex-direction: column; gap: 16px; }
.rw-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 20px; border-radius: 22px; background: #fbf6f0; }
.rw-item.ok { background: linear-gradient(180deg, #fff6d8, #ffe9a8); box-shadow: 0 0 0 4px var(--c-amber-l); }
.rw-gift { width: 72px; height: 72px; object-fit: contain; }
.rw-name { font: 800 28px var(--font-ui); color: var(--ink); white-space: nowrap; }
.rw-bar { position: relative; height: 32px; margin-top: 10px; border-radius: 999px; background: var(--c-track); overflow: hidden; }
.rw-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, #ffe68a, #ffc21a); }
.rw-bar span { position: absolute; right: 12px; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 4px; font: 800 20px var(--font-logo); color: var(--ink); }
.rw-bar span img { width: 24px; height: 24px; }
.rw-left { font: 800 22px var(--font-ui); color: var(--c-ink-sub); white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.rw-left b { font: 900 44px var(--font-logo); color: var(--c-fire); }
.rw-go { min-height: 88px; font-size: 28px; animation: rwpulse 1.6s ease-in-out infinite; }
@keyframes rwpulse { 50% { transform: scale(1.05); } }
.rw-wait { font: 800 20px var(--font-ui); color: var(--c-ink-sub); text-align: center; }
@media (orientation: portrait) { .rw-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .rw-bank { flex-direction: row; justify-content: center; padding-top: 40px; } .rw-coin { width: 88px; height: 88px; } }
/* ===== ずかん（台帳 #121） ===== */
.dex-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 16px; }
.dex-folders { display: flex; gap: 8px; padding: 0 24px; position: relative; z-index: 1; }
.dex-folders button { min-height: 64px; padding: 0 24px; border: 5px solid var(--c-white); border-bottom: none; border-radius: 22px 22px 0 0; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font: 900 22px var(--font-logo); color: var(--c-white); background: color-mix(in srgb, var(--sc) 70%, #888); opacity: .75; text-shadow: 0 2px 0 rgba(0,0,0,.2); white-space: nowrap; }
.dex-folders button small { font: 800 16px var(--font-ui); padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.3); }
.dex-folders button.on { background: var(--sc); opacity: 1; min-height: 72px; margin-top: -8px; }
.dex-panel { flex: 1; min-height: 0; padding: 24px; margin-top: -5px; border-color: var(--c-white); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 22%, var(--c-white)), var(--c-white) 40%); }
.dex-grid2 { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dx { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; border-radius: 22px; background: var(--c-white); box-shadow: 0 6px 0 var(--c-line-12), 0 8px 18px rgba(30,40,80,.1); min-height: 0; }
.dx-no { position: absolute; left: 12px; top: 10px; font: 800 16px var(--font-ui); color: #a08d80; }
.dx-pic { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; border-radius: 50%; }
.dx-pic img { max-width: 88%; max-height: 100%; aspect-ratio: 1; object-fit: contain; }
.dx.none .dx-pic img { filter: brightness(0) opacity(.14); }
.dx-name { font: 900 24px var(--font-logo); color: var(--ink); white-space: nowrap; }
.dx.none .dx-name { color: #b9aca2; }
.dx.rare { box-shadow: 0 0 0 5px var(--c-yellow), 0 6px 0 #e9b20f, 0 0 24px rgba(255,214,120,.8); background: linear-gradient(180deg, #fffbe6, var(--c-white)); }
.dx-rare, .dx-evo { position: absolute; right: 10px; top: 8px; padding: 4px 12px; border-radius: 999px; font: 900 15px var(--font-logo); color: var(--c-white); background: linear-gradient(180deg, var(--c-amber-l), var(--c-orange)); }
.dx-evo { top: auto; bottom: 8px; background: linear-gradient(180deg, #8fd0ff, #3c8de0); }
@media (orientation: portrait) { .dex-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dex-folders { padding: 0 8px; overflow-x: auto; } }
.st-kind { font: 800 16px var(--font-ui); color: rgba(255,255,255,.9); margin-top: -4px; }
/* ===== おしまい（台帳 #121） ===== */
.rs { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.rs-title { text-align: center; }
.rs-title .logo { font-size: 72px; margin: 0; animation: logoin .6s cubic-bezier(.2,1.6,.4,1) both; }
.rs-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 24px; align-items: center; }
.rs-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rs-face { width: min(100%, 240px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 14px var(--c-shade-25)); animation: hop .6s cubic-bezier(.3,1.6,.5,1) .4s 2; }
.rs-name { padding: 8px 24px; border-radius: 999px; background: var(--c-white); font: 900 26px var(--font-logo); color: var(--ink); box-shadow: var(--sh-edge); }
.rs-panel { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rs-stars { display: flex; gap: 12px; }
.rs-stars img { width: 72px; height: 72px; }
.rs-stars img.off { filter: grayscale(1); opacity: .3; }
.rs-stars img.on { animation: logoin .5s cubic-bezier(.2,1.6,.4,1) both; }
.rs-stars img.on:nth-child(2) { animation-delay: .15s; } .rs-stars img.on:nth-child(3) { animation-delay: .3s; }
.rs-row { display: flex; gap: 16px; }
.rs-stat { display: flex; align-items: baseline; gap: 6px; padding: 12px 20px; border-radius: 18px; background: #fbf6f0; }
.rs-stat b { font: 900 40px var(--font-logo); color: var(--ink); }
.rs-stat span { font: 800 18px var(--font-ui); color: var(--c-ink-sub); white-space: nowrap; }
.rs-stat img { width: 36px; height: 36px; align-self: center; }
.rs-stat.coin b { color: #e09400; }
.rs-note, .rs-new { font: 800 20px var(--font-ui); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.rs-new img { width: 52px; height: 52px; object-fit: contain; }
.rs-caught { display: flex; gap: 16px; }
.rs-caught div { display: flex; flex-direction: column; align-items: center; font: 800 16px var(--font-ui); }
.rs-caught img { width: 72px; height: 72px; object-fit: contain; }
.rs-feel { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 32px 24px 20px; flex-wrap: wrap; }
.rs-feel .feel { display: flex; gap: 12px; }
@media (orientation: portrait) { .rs-main { grid-template-columns: minmax(0, 1fr); } .rs-face { width: 180px; } }
/* まだ相棒を選んでいない子：台は出さず、4体を それぞれの丸に（台帳 #134） */
.pl-stage:has(.pl-eggs) .pl-ped { display: none; }
.pl-stage:has(.pl-eggs) { place-items: center; }
.pl-eggs { gap: 12px; margin: 0; width: 230px; }
.pl-eggs img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
/* おしまい：上・中・下の3段。下の枠は 1行 */
.rs { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.rs-feel { flex-wrap: nowrap; padding: 36px 24px 20px; gap: 32px; }
.rs-feel .feel[data-k="hard"] { padding-left: 32px; border-left: 2px solid #f0e6dd; }
/* 上の帯のボタン：帯に収める（64px）・上下まん中・左右の余白 24px でそろえる（台帳 #135） */
.screen > .topbar:has(> .h1) { min-height: 88px; box-sizing: border-box; align-items: center; padding-left: 24px; padding-right: 24px; }
.screen > .topbar:has(> .h1) .round { width: 64px !important; height: 64px !important; flex: none; }
.screen > .topbar:has(> .h1) .pill { flex: none; }
/* 帯は 画面の端から端まで（親の余白に関係なく） */
.screen > .topbar:has(> .h1) { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw; max-width: none; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.screen > .topbar > .h1 { min-width: 0; overflow: hidden; text-overflow: clip; }
.screen.rs > .rs-feel { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; height: auto; }
/* 相棒選び：進化の影はやめ、相棒の真後ろに 柔らかい光。相棒は 絵の場所の 82%（台帳 #136） */
.st-glow { position: absolute; left: 50%; bottom: 8%; width: 86%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, var(--c-white-75) 0%, rgba(255,255,255,.25) 45%, var(--c-white-0) 70%); }
.st-buddy { height: 82%; bottom: 5%; }
.starter.on .st-glow { background: radial-gradient(circle, rgba(255,250,210,.95) 0%, rgba(255,236,150,.45) 45%, var(--c-white-0) 72%); }
/* ===== 選ぶ画面の見出し：まん中のリボン（TY-C4・台帳 #137） ===== */
.selbar { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; gap: 16px; min-height: 96px; }
.selbar .sp { width: 72px; }
.selbar .round { width: 72px !important; height: 72px !important; }
.ribbon { justify-self: center; position: relative; margin: 0; padding: 14px 56px; white-space: nowrap; font: 900 44px/1.1 var(--font-logo); letter-spacing: .04em; color: var(--c-white);
  background: linear-gradient(180deg, var(--c-orange-l), var(--c-fire)); border-radius: 18px; text-shadow: 0 3px 0 var(--c-orange-edge);
  box-shadow: inset 0 4px 0 var(--c-white-45), 0 8px 0 var(--c-orange-edge), 0 14px 24px var(--c-shade-25); }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 18px; width: 40px; height: 100%; background: #e2610f; z-index: -1; }
.ribbon::before { left: -28px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.ribbon::after { right: -28px; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
@media (orientation: portrait) { .ribbon { font-size: 38px; padding: 12px 40px; } }
/* タイトルの左下：おうちの かた（大人の入口・控えめ） */
.parent-door { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--c-white-75); font: 800 18px var(--font-ui); color: #5a4a40; }
.parent-door img { width: 28px; height: 28px; }
.starters.picking .starter:not(.on) { filter: saturate(.7); opacity: .85; transform: scale(.97); }
/* ===== TY-C5：リボン＋中身は1つのまとまり（台帳 #139） ===== */
.screen:has(> .selbar) { position: relative; justify-content: center; gap: 0; }
.screen:has(> .selbar) > .selbar { display: flex; justify-content: center; min-height: 0; margin: 0 0 calc(32px + 18px); }  /* 18px＝リボンの すその下がり */
.screen:has(> .selbar) > .selbar .sp { display: none; }
.screen:has(> .selbar) > .selbar .round { position: absolute; left: 0; top: 0; }
.screen:has(> .selbar) > :not(.selbar) { flex: none; margin-top: 0; }  /* 上の 余白は 消さない（#384：中の 箱の 上の 余白まで 0 に なっていた）。消す 必要の ある 物は 下で 1つずつ */
.screen:has(> .selbar) > .center { justify-content: flex-start; }
.screen:has(> .selbar) .kids { margin-top: 0; }
.screen:has(> .selbar) > .modes.game-modes { padding-top: 0; flex: none; }
.screen:has(> .selbar) > .starters { height: min(54vh, 460px); flex: none; }
.screen:has(> .selbar) > .starter-go { padding-top: 24px; }
/* 一覧が多い（だれと あそぶ？）：上から並べて 一覧の中を スクロール */
.screen:has(> .selbar):has(> .pt-grid) { justify-content: flex-start; padding-top: 24px; }
.screen:has(> .selbar) > .pt-grid { flex: 1; min-height: 0; padding-top: 0; }
/* 相棒選び：絵は 幅と高さの 両方に収まる大きさ（しっぽ・翼が カードで切れない・台帳 #136） */
.st-buddy { left: 4%; right: 4%; width: auto; translate: none; height: 80%; bottom: 5%; display: grid; place-items: end center; }
.st-buddy img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* ===== おうちの かたへ（パスコード型・台帳 #141） ===== */
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: #eef3f8; font-family: var(--font-ui); color: var(--c-ink-strong); }
.gate-back { position: absolute; left: 24px; top: 24px; min-height: 56px; padding: 0 20px; border: none; border-radius: 12px; background: none; cursor: pointer; font: 800 20px var(--font-ui); color: #6a5d55; }
.gate-box { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 48px 40px; border-radius: 28px; background: var(--c-white); box-shadow: 0 4px 24px rgba(30,40,80,.1); }
.gate-title { font: 800 32px var(--font-ui); text-box: trim-both cap alphabetic; }
.gate-sub { font: 600 18px var(--font-ui); color: var(--c-ink-note); }
.gate-q { display: flex; align-items: center; gap: 16px; margin: 8px 0 8px; font: 900 44px var(--font-logo); }
.gate-in { min-width: 140px; height: 72px; border-radius: 16px; background: #f4efe9; display: grid; place-items: center; font: 900 44px var(--font-logo); color: var(--c-ink-strong); box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }
.gate-in.empty::after { content: "？"; color: #c9bdb3; }
.gate-in.bad { box-shadow: inset 0 0 0 3px #e0663f; }
.gate-pad { display: grid; grid-template-columns: repeat(3, 88px); gap: 16px 24px; }
.gate-pad button { width: 88px; height: 88px; padding: 0; border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: #f4efe9; box-shadow: 0 3px 0 #e2d8cc; touch-action: manipulation; }
.gate-pad button:active { transform: translateY(3px); box-shadow: none; background: #e9e1d8; }
.gate-pad button span { display: block; font: 800 36px/1 var(--font-logo); color: var(--c-ink-strong); text-box: trim-both cap alphabetic; }
.gate-pad button.fn span { font: 800 20px/1 var(--font-ui); }
.gate-pad button.ok { background: var(--cta); box-shadow: 0 3px 0 #c2560a; }
.gate-pad button.ok span { color: var(--c-white); }
@media (max-height: 760px) { .gate-pad { grid-template-columns: repeat(3, 72px); gap: 12px 20px; } .gate-pad button { width: 72px; height: 72px; } .gate-box { padding: 24px 40px 28px; gap: 12px; } }
/* 相棒選び：低い画面でも まとまりが入りきる（台帳 #136・#139） */
@media (orientation: landscape) and (max-height: 720px) {
  .ribbon { font-size: 34px; padding: 10px 44px; }
  .ribbon::before, .ribbon::after { top: 14px; }
  .screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 14px); }
  .screen:has(> .selbar) > .starters { height: calc(100vh - 16px - 64px - 60px - 46px - 120px); }
  .starter { padding: 12px 10px 14px; gap: 2px; }
  .st-name { font-size: 26px; }
  .starter-go { padding-top: 16px; }
  .starter-go .btn { min-height: 88px; font-size: 30px; }
}
/* 相棒の絵を 枠に閉じこめる（高さいっぱいが効かず 名前にかぶった・台帳 #136） */
.st-buddy { display: block; }
.st-buddy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* ===== 色の役わり（UI-69：オレンジ＝押すボタンだけ・あい色＝見出しだけ・金＝しるし） ===== */
:root { --head: #8d93ee; --head-l: #b6baff; --head-d: #6066c4;  /* 見出しの 色は リボンと 同じ やわらかい 青紫に 1か所で そろえる（#379・見直し役。前は こい 紺 #4b55c8/#2f3793） */ --gold: #ffd23f; --gold-l: #fff0a0; --gold-d: #c99a00; }
.ribbon { background: linear-gradient(180deg, var(--head-l), var(--head)); text-shadow: 0 3px 0 var(--head-d);
  box-shadow: inset 0 4px 0 var(--c-white-35), 0 8px 0 var(--head-d), 0 14px 24px var(--c-shade-25); }
.ribbon::before, .ribbon::after { background: #3a43a8; }
.panel > .h2tab { background: linear-gradient(180deg, var(--head-l), var(--head)); box-shadow: 0 4px 0 var(--head-d); }
.h3 { border-left-color: var(--head); }
.screen > .topbar:has(> .h1) { box-shadow: inset 0 -3px 0 #c9ccf6, 0 6px 16px rgba(30,40,80,.12); }  /* こい 青紫 6px の 線を やめ、リボンと 同じ やわらかい 色の 細い 線へ（#379・R23） */
/* 札・しるし＝金色＋濃い茶の文字 */
.game-modes .mode-card .tag, .pt-on, .dx-rare, .dx-evo { background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: var(--ink); text-shadow: none; }
.mode-card .tag { color: var(--ink); }
.ptabs .badge { background: #f04a7a; }
.pt-card.on { border-color: var(--gold); box-shadow: 0 8px 0 var(--gold-d), 0 0 0 6px rgba(255,214,90,.7), var(--drop); }
.ptile.sel::before { box-shadow: 0 0 0 5px var(--c-white), 0 0 0 9px var(--gold), 0 4px 0 rgba(107,74,58,.18); }
.rw-left b { color: var(--gold-d); }
/* ホームの名前札：相棒の足にかぶせず、台の下に置く（レイヤーを重ねない） */
.partner-tap .swap { top: calc(100% + 22px); bottom: auto; border-color: var(--gold); }
.stage-buddy .pedestal { margin-bottom: 48px; }
/* 相棒カード：中身を上下まん中より少し上に（上の空きをなくす） */
.st-buddy { top: 4%; bottom: 6%; height: auto; }
/* 相棒カード：絵＋名前＋種類を1つのまとまりにして、カードの上下まん中より少し上（光学的中心）に置く */
.starter { justify-content: center; padding: 16px 12px 28px; }
.st-fig { flex: 0 1 auto; width: 100%; aspect-ratio: 1 / .92; min-height: 0; }
.st-buddy { top: 2%; bottom: 4%; }
@media (orientation: portrait) { .screen:has(> .selbar) > .starters { height: min(62vh, 760px); } }
/* リボン＝布の帯（UI-70：ボタンと形で分ける。角は小さく・押す厚みなし・ぬい目・うしろに折れた端） */
/* 2026-10-14 #379 本人「やわらかい 色に して ぬい目を 消す」（R23 テイスト・こい 紺と ぬい目を やめる） */
.ribbon { --rb: var(--head); --rb-l: var(--head-l); --tail: #7a80dc; --fold: #5c61bd;
  border-radius: 6px; background: linear-gradient(180deg, var(--rb-l) 0%, var(--rb) 55%, #8389e4 100%);
  outline: none;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.14), 0 10px 16px rgba(30,40,80,.28);
  text-shadow: 2px 0 0 var(--c-outline-indigo), -2px 0 0 var(--c-outline-indigo), 0 2px 0 var(--c-outline-indigo), 0 -2px 0 var(--c-outline-indigo), 1.5px 1.5px 0 var(--c-outline-indigo), -1.5px 1.5px 0 var(--c-outline-indigo), 1.5px -1.5px 0 var(--c-outline-indigo), -1.5px -1.5px 0 var(--c-outline-indigo), 0 4px 0 var(--c-outline-indigo); }
.ribbon::before, .ribbon::after { top: 16px; width: 64px; height: 100%; z-index: -1; filter: drop-shadow(0 6px 6px var(--c-shade-25)); }
.ribbon::before { left: -44px; background: linear-gradient(90deg, var(--tail) 0 44px, var(--fold) 44px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 44px 100%, 0 100%, 16px 50%); }
.ribbon::after { right: -44px; background: linear-gradient(270deg, var(--tail) 0 44px, var(--fold) 44px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 20px 100%, 0 calc(100% - 16px)); }
@media (orientation: landscape) and (max-height: 720px) { .ribbon::before, .ribbon::after { top: 12px; } .ribbon::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 44px 100%, 0 100%, 16px 50%); } .ribbon::after { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 20px 100%, 0 calc(100% - 12px)); } }
/* TY-C5：リボンの端（帯の下 16px・低い画面 12px）から中身まで 32px */
.screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 16px); }
@media (orientation: landscape) and (max-height: 720px) { .screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 12px); } }
/* ホーム右の列：すき間は全部 24px（8 の倍数・近さで まとまりを見せる）。カードは のびて 列を上から下まで埋め、左の列と上下をそろえる */
.lobby-right { justify-content: flex-start; gap: 24px; }
.lobby-right .goal { margin-top: 0; justify-content: space-between; }
.modes.entries { flex: 1; min-height: 0; padding-top: 0; gap: 24px; grid-auto-rows: minmax(0, 1fr); }
.modes.entries .mode-card { min-height: 0; }
.lobby-right .dock { margin-top: 0; justify-content: flex-start; gap: 24px; }
@media (orientation: landscape) and (max-height: 720px) {
  .lobby-right { row-gap: 16px; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .modes.entries { gap: 16px; }
}
/* リボンの折り目：帯の角は四角（折り目の三角とつながる）・折り目はいちばん濃い色で はっきり */
.ribbon { border-radius: 2px; }
.ribbon::before { background: linear-gradient(90deg, var(--tail) 0 44px, var(--fold) 44px); filter: none; }
.ribbon::after { background: linear-gradient(270deg, var(--tail) 0 44px, var(--fold) 44px); filter: none; }
.ribbon { --tail: #3d47b0; --fold: #1c2266; }
/* ===== ボタンの大きさ 4段（UI-71） ===== */
:root { --b-xl: 120px; --b-l: 96px; --b-m: 88px; --b-s: 72px; }
/* 小：もどる・とじる の丸ボタンは どの画面でも 72px。押せる範囲は 88px */
.selbar .round, .screen > .topbar .round, .screen > .topbar:has(> .h1) .round { width: var(--b-s) !important; height: var(--b-s) !important; }
.topbar .round:not(.speak-btn) { position: relative; }
.topbar .round:not(.speak-btn)::after, .selbar .round::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.play .choice { position: relative; }
.play .choice::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.btn.small { min-height: var(--b-m); }
.dex-folders button, .dex-folders button.on { min-height: var(--b-m); }
/* 入口のカード：のばしすぎない（136〜160px）。右の列はまん中にまとめ、すき間 24px */
.lobby-right { justify-content: center; }
.modes.entries { flex: none; grid-auto-rows: minmax(136px, 160px); }
.modes.entries .mode-card { min-height: 136px; }
/* 分かち書きの すき間（TY-E7）：大きい文字ほど 半角スペースが広く見えるので、見出し・ボタン・札は 四分（.25em）前後に詰める */
.ribbon, .h1, .h2tab, .logo, .btn, .special-btn, .mode-card, .tag, .st-name, .pl-card .name, .gate-title, .ptitle { word-spacing: -.18em; }
/* リボンのしっぽ：帯の高さの 約3割 下げ（22px）、外へ 64px 出す。折り目の三角は 22px で はっきり。しっぽは 折り目に向かって 暗く */
.ribbon::before, .ribbon::after { top: 22px; width: 86px; }
.ribbon::before { left: -64px; background: linear-gradient(90deg, #4650bd 0, #353e9f 64px, var(--fold) 64px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 64px 100%, 0 100%, 22px 50%); }
.ribbon::after { right: -64px; background: linear-gradient(270deg, #4650bd 0, #353e9f 64px, var(--fold) 64px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 22px); }
@media (orientation: landscape) and (max-height: 720px) {
  .ribbon::before, .ribbon::after { top: 16px; width: 72px; }
  .ribbon::before { left: -54px; background: linear-gradient(90deg, #4650bd 0, #353e9f 54px, var(--fold) 54px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 54px 100%, 0 100%, 18px 50%); }
  .ribbon::after { right: -54px; background: linear-gradient(270deg, #4650bd 0, #353e9f 54px, var(--fold) 54px); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 18px 100%, 0 calc(100% - 16px)); }
  .screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 16px); }
}
/* 縦向き：リボンを少し小さく（もどるボタンと 16px 以上はなす・TY-C5） */
@media (orientation: portrait) {
  .ribbon { font-size: 32px; padding: 12px 32px; }
  .ribbon::before, .ribbon::after { top: 16px; width: 72px; }
  .ribbon::before { left: -54px; background: linear-gradient(90deg, #4650bd 0, #353e9f 54px, var(--fold) 54px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 54px 100%, 0 100%, 18px 50%); }
  .ribbon::after { right: -54px; background: linear-gradient(270deg, #4650bd 0, #353e9f 54px, var(--fold) 54px); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 18px 100%, 0 calc(100% - 16px)); }
  .screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 16px); }
}
/* 粒の演出のキャンバス：画面ちょうどの大きさに固定（Retina で 2倍に広がり、右ほど ずれて見えなかった） */
#confetti { width: 100vw; height: 100vh; }
.screen:has(> .selbar) > .selbar { flex: none; }  /* 帯が縮んでリボンがはみ出さない */
/* ホーム：名前札の下に 24px あける分、相棒は画面の高さに合わせて小さく */
@media (orientation: landscape) and (min-height: 721px) { .stage-buddy .buddy { width: min(100%, 340px, calc(100vh - 520px)); } }
/* ホーム左の列（近さのルール）：名前札は相棒の足元の影の下のふちに のせる（近い＝同じ物）。下のカードとは 32px はなす（別の物） */
.partner-tap .swap { top: calc(100% + 2px); }
.stage-buddy .pedestal { margin-bottom: 72px; }
.stage-buddy .pedestal { margin-bottom: 54px; }
/* つぎの すがた：上は文字だけ、下は ゲージ＋右はしに しょうらいの影（ゴールの しるし）。中の余白 16px・すき間 8px */
.grow-box { padding: 16px 20px; gap: 8px; }
.grow-box .gb-row { display: flex; align-items: center; gap: 12px; }
.grow-box .gb-row .meter { flex: 1; margin: 0; }
.grow-box .future img { width: 44px; height: 44px; }
/* 分かち書き（TY-E7）：詰めるのは大きい見出し・リボンだけ。ボタンやカードの小さい説明は そのまま */
.btn, .special-btn, .mode-card, .tag, .st-name, .pl-card .name { word-spacing: -.08em; }
.mode-card .desc { word-spacing: normal; }
/* 名前札は 台の下に 順番どおり並べる（浮かせない＝何とも重ならない・台帳 #142）。台と 8px（近い）、下のカードと 32px（はなす） */
.stage-buddy .swap { position: relative; z-index: 1; top: auto; left: auto; translate: none; flex: none; margin: 8px 0 32px; white-space: nowrap; padding: 8px 20px; border-radius: 999px; cursor: pointer;
  background: var(--c-white); border: 3px solid var(--gold); font: 800 20px var(--font-ui); color: var(--ink); box-shadow: var(--sh-edge); }
.stage-buddy .pedestal { margin-bottom: 0; }
.stage-buddy .grow-box { margin-top: 0; }
@media (orientation: portrait), (max-width: 900px) { .stage-buddy .swap { margin: 0; } }
/* ずかん・ごほうび：文字は丸の下に はなして置く。丸の下の厚み（7px）は場所を取らないので、その分＋8px あける（台帳 #143） */
.dock button { gap: calc(7px + 8px); }
/* ホーム左の列：相棒の絵は のこりの高さに合わせて縮む（列から はみ出して 上のバーを かくさない・台帳 #151） */
@media (orientation: landscape) and (min-width: 901px) {
  .stage-buddy .bubble { flex: none; }
  .stage-buddy .partner-tap { flex: 1 1 0; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
  .stage-buddy .partner-tap .buddy { width: auto !important; height: 100%; max-height: 340px; max-width: 100%; aspect-ratio: 1; }
  .stage-buddy .pedestal, .stage-buddy .grow-box { flex: none; }
}
/* 低い画面：きょうの もくひょう を1行に */
@media (orientation: landscape) and (max-height: 720px) { .lobby-right .goal { white-space: nowrap; font-size: 20px; gap: 8px; padding: 10px 16px; } .lobby-right .goal .stars img { width: 34px; height: 34px; } }
@media (orientation: landscape) and (max-height: 720px) {
  .stage-buddy .bubble { font-size: 18px; padding: 12px 18px; margin-bottom: 8px; }
  .stage-buddy .grow-box { padding: 10px 16px; gap: 4px; font-size: 16px; }
  .stage-buddy .grow-box .future img { width: 32px; height: 32px; }
}
/* 縦向きのホーム：上＝吹き出し→相棒→台→名前札（相棒は のこりの高さいっぱい）、下＝もくひょう・入口・ずかん（台帳 #151） */
@media (orientation: portrait) {
  .lobby { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 24px; }
  .stage-buddy { flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; min-height: 0; }
  .stage-buddy .glow, .stage-buddy .pedestal { display: block; }
  .stage-buddy .bubble { flex: none; margin: 0 0 8px; }
  .stage-buddy .partner-tap { flex: 1 1 0; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
  .stage-buddy .partner-tap .buddy { width: auto !important; height: 100%; max-height: 300px; max-width: 100%; aspect-ratio: 1; }
  .stage-buddy .pedestal { flex: none; width: min(70%, 320px); }
  .stage-buddy .swap { margin: 8px 0 0; }
  .stage-buddy .grow-box { display: none; }
  .lobby-right { justify-content: flex-start; }
}
@media (orientation: portrait) {
  .stage-buddy .pedestal { margin-top: -26px; position: relative; z-index: 0; }
  .stage-buddy .partner-tap { z-index: 1; }
  .modes.entries { grid-auto-rows: 136px; }
}
@media (orientation: portrait) { .stage-buddy .glow { width: min(92%, 420px); top: 42%; } }
/* ===== リボンの しっぽと折り目（作り直し・UI-70）
   参考：Tuts+「Swish CSS3 Folded Ribbon」・Smashing「Responsive Multi-Line Ribbon Shapes」
   しっぽは 帯の後ろで 帯の端より --f だけ内側まで入る。折り目＝帯の下の角から 斜め下 内側へ向かう 濃い三角（上の半分）。その下の半分は しっぽの色 ===== */
.ribbon { --f: 22px; --tw: 64px; --tail: #3f49b2; --fold: #1c2266; }
.ribbon::before, .ribbon::after { top: var(--f); width: calc(var(--tw) + var(--f)); height: 100%; filter: none; }
.ribbon::before { left: calc(-1 * var(--tw));
  background: linear-gradient(to top right, transparent 50%, var(--fold) 50%) right bottom / var(--f) var(--f) no-repeat, linear-gradient(90deg, #4a54c2, var(--tail));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--f) 50%); }
.ribbon::after { right: calc(-1 * var(--tw));
  background: linear-gradient(to top left, transparent 50%, var(--fold) 50%) left bottom / var(--f) var(--f) no-repeat, linear-gradient(270deg, #4a54c2, var(--tail));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--f)) 50%, 100% 100%, 0 100%); }
@media (orientation: portrait), (orientation: landscape) and (max-height: 720px) { .ribbon { --f: 16px; --tw: 54px; } }
.screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 22px); }
@media (orientation: portrait), (orientation: landscape) and (max-height: 720px) { .screen:has(> .selbar) > .selbar { margin-bottom: calc(32px + 16px); } }
/* 見出し・ボタンの すき間は ink.js の fitSpaces で 見た目 .3em に（TY-E7）。CSS の詰めは 外す */
.ribbon, .h1, .h2tab, .btn, .special-btn, .tag, .st-name, .gate-title { word-spacing: normal; }
/* なかまを えらぼう：カードは まん中に まとめる（ほかの選ぶ画面と同じ・TY-C5）。上に札の半分（16px）＋影の分 あけて 切れない（台帳 #152） */
.screen:has(> .selbar):has(> .pt-grid) { justify-content: center; padding-top: 0; }
.screen:has(> .selbar) > .pt-grid { flex: 0 1 auto; min-height: 0; grid-template-columns: repeat(auto-fit, 220px); justify-content: center; align-content: start; gap: 32px 24px; padding: 24px 16px 16px; overflow: auto; }
.pt-empty { grid-column: 1 / -1; justify-self: center; width: auto; max-width: 720px; padding: 16px 32px; font-size: 22px; }
.screen:has(> .selbar) > .pt-empty { flex: none; align-self: center; margin-top: 24px; }
.screen:has(> .selbar) > .pt-grid { scrollbar-width: none; -webkit-mask-image: linear-gradient(var(--c-black) calc(100% - 32px), transparent); mask-image: linear-gradient(var(--c-black) calc(100% - 32px), transparent); padding-bottom: 40px; }  /* 下に続きがあると分かる（ポケモンのボックスの続き表示に近い）
/* ===== おしまい画面（作り直し・台帳 #154）
   参考：Duolingo のレッスン完了（まん中1列・主役のボタンは下に1つ）・マリオカート／ポケモンの結果（大きい星ともらえる物をまん中に）
   上から：見出し → けっかのカード（左に相棒・右に星と数）→ たのしかった？ → 主役のボタン。幅は 880px まで、まん中 ===== */
.screen.rs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding-top: 0; }
.screen.rs > * { width: min(100%, 880px); flex: none; }
.rs-title { margin-bottom: -8px; }
.rs-title .logo { font-size: 64px; }
.rs-main { display: block; flex: none; }
.rs-panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 8px 32px; padding: 40px 32px 28px; }
.rs-panel > .h2tab { grid-column: 1 / -1; }
.rs-panel .rs-hero { grid-row: span 4; }
.rs-panel > :not(.h2tab):not(.rs-hero) { grid-column: 2; justify-self: center; }
.rs-face { width: 180px; }
.rs-name { font-size: 22px; padding: 6px 20px; }
.rs-row { flex-wrap: wrap; justify-content: center; }
.screen.rs > .rs-feel { padding: 40px 32px 24px; gap: 32px; flex-wrap: wrap; }
.rs-go { display: flex; justify-content: center; }
.rs-go .btn:disabled { filter: grayscale(1); opacity: .45; }
@media (orientation: landscape) and (max-height: 720px) {
  .screen.rs { gap: 24px; }
  .rs-title .logo { font-size: 48px; }
  .rs-panel { grid-template-columns: 140px minmax(0, 1fr); padding: 32px 24px 20px; gap: 4px 24px; }
  .rs-face { width: 128px; }
  .rs-stars img { width: 52px; height: 52px; }
  .rs-stat { padding: 8px 16px; } .rs-stat b { font-size: 32px; }
  .screen.rs > .rs-feel { padding: 32px 24px 16px; }
  .screen.rs .feel .round { width: 72px; height: 72px; }
  .rs-go .btn { min-height: 80px; }
}
@media (orientation: portrait) { .rs-panel { grid-template-columns: 1fr; } .rs-panel .rs-hero { grid-row: auto; } .rs-panel > :not(.h2tab):not(.rs-hero) { grid-column: 1; } }
.screen.rs > .rs-feel { flex-wrap: nowrap; gap: 24px; }
.screen.rs .feel[data-k="hard"] { padding-left: 24px; }
.screen.rs .feel[data-k="hard"] .btn { padding: 0 20px; }
.screen.rs { overflow: hidden; }
@media (orientation: landscape) and (max-height: 720px) {
  .screen.rs { gap: 16px; }
  .rs-panel { padding: 28px 20px 16px; }
  .screen.rs > .rs-feel { padding: 28px 24px 12px; }
  .screen.rs .feel .round { width: 64px; height: 64px; }
  .screen.rs .feel[data-k="hard"] .btn { min-height: 64px; }
  .rs-go .btn { min-height: 72px; }
}
/* ずかんのタブ：4つで 横幅を等分（右で切れない・台帳 #154）。参考：ポケモン図鑑の地方タブ・どうぶつの森の図鑑のタブ（同じ幅で並ぶ） */
.dex-folders button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 12px; white-space: nowrap; }
@media (max-width: 1100px) { .dex-folders button { font-size: 20px; gap: 6px; } .dex-folders button small { font-size: 14px; padding: 2px 8px; } }
/* 低い画面：ゲームを えらぼう の カードを 画面に収める（見出しが上で切れない・CK-59） */
@media (orientation: landscape) and (max-height: 720px) {
  .screen:has(> .selbar) > .modes.game-modes { flex: 0 1 auto; min-height: 0; gap: 16px; }
  .game-modes .mode-card { padding: 16px 20px; }
  .game-modes .mode-card .ico { width: 72px; height: 72px; }
}
/* 字間（TY-E9）：日本語は ベタ組み（字と字の間を 空けない・詰めない）が基本。字間を広げると 言葉の間（.4em）が 目立たなくなる
   参考：読みやすい読み物のデザインと組版の進め方（ベタ組みが基本）・字間の研究（標準の字間が 一般の読み手に最適。広げて効くのは 読みに困難のある子ども） */
.hint, .bubble, .explain, .qtext, .qtext .big, .young .qtext, .choice, .btn, .special-btn, .tap-start, .odai-lbl, .pill, .goal, .mode-card, .swap, .grow-box, .rs-name, .pt-name, .st-name { letter-spacing: 0; }
.ribbon, .h1, .screen > .topbar > .h1, .h2, .series-h, .quit-modal .m-title { letter-spacing: .02em; }
.btn { text-indent: 0; }
/* まちがえた時の ヒント・説明：場面の左上（相棒の上）に 相棒の吹き出しで出す。問題の板は のびない（台帳 #159）
   しっぽは 左下＝相棒の方。影は drop-shadow で しっぽにも つける（UI-15） */
.hint-say { position: absolute; left: 3%; top: 6%; z-index: 7; max-width: min(58%, 560px); padding: 14px 22px; border-radius: 22px;
  background: #fffdf3; border: 3px solid var(--gold); color: var(--ink); font: 600 24px/1.6 var(--font-ui); letter-spacing: 0;
  line-break: strict; word-break: keep-all; text-wrap: balance; filter: drop-shadow(0 6px 10px rgba(40,60,110,.25)); }
.hint-say::after { content: ""; position: absolute; left: 48px; bottom: -18px; width: 28px; height: 20px; background: #fffdf3; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.hint-say .say-next { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (orientation: landscape) and (max-height: 720px) { .hint-say { font-size: 20px; padding: 10px 18px; top: 4%; } }
/* 相棒の右に置いたとき：しっぽは 左下（相棒の方）へ */
.hint-say.side::after { left: -18px; bottom: 24px; width: 22px; height: 26px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hint-say { width: max-content; text-wrap: pretty; }  /* 中身に合わせて広がる（せまく折り返さない） */
.hint-say.tight { font-size: 20px; padding: 12px 16px; }
.choices > .btn.in-slot { width: 100%; height: 100%; min-height: 0; border-radius: var(--r-m); font-size: 30px; }  /* こたえの場所に入る「つぎへ」 */
.hint-say.tighter { font-size: 18px; line-height: 1.5; padding: 12px 16px; }  /* 上下 12 より せまく しない（CK-76・#384） */
/* TY-E4：2行に割れる時は 上下を同じくらいの長さに（全部の文に かける。下の行に 1語だけ残さない） */
#app { text-wrap: balance; }
.hint-say { text-wrap: balance; }
/* 問題の板：🔊 の場所（左 132px）と 同じだけ 右も あけて、問題と答えを 板の左右まん中に（台帳 #160）
   参考：Rethink Autism「Quiz Activity」（読み上げは 問題の板に付ける）・vp0「Multiple choice quiz app UI」（問題と答えは 板の中央に まとめる） */
.play > .qbox { padding-right: 132px !important; }
.play > .qbox.young { padding-right: 144px !important; }
/* ===== フォントの使い分け（TY-J1〜J4）：役わりごとに1つ・全部で3つまで =====
   参考：UX Planet「Principles of Typography in UI Design」（1〜2書体）・Linearity（見出し用と本文用の2つ）・UDデジタル教科書体の説明（学習の字は 学習指導要領に合う教科書の形）
   J1 ロゴの字 M PLUS Rounded 1c：見出し・ボタン・名前・ゲームの数（コイン・ダメージ・コンボ）
   J2 丸ゴシック Zen Maru Gothic：説明・吹き出し・ヒント・札・保護者の画面
   J3 学習の字 Klee One（教科書体に近い・仮）：問題文と 答えのボタンの字（字・読み・数・式）を 全部この字に。問題と答えで字を変えない */
.play .choice, .play .choice.num, .play .choice.kanji, .play .choice .big, .rnote, .odai-num, .odai-lbl { font-family: var(--font-q); font-weight: 600; }
/* 問題文の 大きい式（2 × 2 など）も 学習の字（TY-J3）。字の上下の 見えない空きを 切って、板の上下まん中に 見えるように（MDN text-box-trim） */
.play .qtext .big { font-family: var(--font-q); font-weight: 600; }
.play .qtext { text-box: trim-both cap alphabetic; }
/* 問題文の行の高さを 字に合わせる（字の上に 見えない空きを 作らない）。2行のときの 行の間は row-gap で */
.play .qtext .ph, .play .qtext .big { line-height: 1.15; }
.play .qtext { row-gap: .35em; }
.play > .qbox .qrow { min-height: 0; }  /* 🔊 は板の左上に固定（#124）なので、問題の行に 高さを とっておかない */
.play:not(.m-puzzle) > .qbox { padding-top: 8px !important; padding-bottom: 24px !important; }  /* 答えのボタンの 下の厚み（6px）と 字の上の空きの分、中身を少し上へ（見た目の中心・光学的中心） */
.play > .qbox.side .qrow { flex: none !important; }  /* 左右に並ぶ形でも 問題の列は縦に積むので、300px を 高さに使わない（低い画面で 板から はみ出した・台帳 #160） */
/* 低い画面：図の問題（fig）は 図を小さくして 板に収める（上で はみ出した・台帳 #160） */
@media (orientation: landscape) and (max-height: 720px) {
  .play > .qbox.fig > div:first-child { gap: 8px !important; }
  .play:is(.m-catch, .m-boss, .m-rhythm, .m-spot) > .qbox.fig .qvisual svg, .play > .qbox.fig .qvisual svg { height: 100px; max-height: 100px; }
}
/* ずかんのタブ：上だけに 5px の ふちがあるので、下に 同じ 5px を足して 字を上下まん中に（CK-57） */
.dex-folders button { padding-bottom: 5px; }
/* 低い画面：ごほうびの リストを 画面に収める（下に 6px はみ出した）。ボタンは UI-03 の 最低 80px */
@media (orientation: landscape) and (max-height: 720px) {
  .rw-items { gap: 8px; }
  .rw-item { padding: 10px 16px; }
  .rw-item .btn.rw-go { min-height: 80px; }
}
@media (orientation: landscape) and (max-height: 720px) { .rw-list { padding: 36px 20px 16px; } .rw-item .btn.rw-go { height: 80px; } }
/* ずかんのタブ 5つ（ボス 追加・台帳 #144）：名前は 2行まで 折り返し、数は 名前の下に 小さく。どの幅でも 切れない */
.dex-folders button { flex-direction: column; gap: 2px; white-space: normal; text-align: center; line-height: 1.15; word-break: keep-all; text-wrap: balance; padding-left: 8px; padding-right: 8px; }
.dex-folders button small { line-height: 1; }
@media (max-width: 1100px) { .dex-folders button { font-size: 18px; } }
/* ===== タイトル：相棒4人を 背景に 重ねる（台帳 #155）。ゲームの中と 同じ絵なので 見た目が ずれない =====
   横＝1列（ロゴの下〜「タッチして はじめる」の上）、縦＝2人ずつ 2段。ぴょんと 登場 → ゆっくり 上下に ゆれる */
.title-cast { position: absolute; z-index: 1; left: 4%; right: 4%; top: 30%; bottom: calc(4% + 140px); display: flex; justify-content: center; align-items: flex-end; gap: 1.5%; pointer-events: none; }
.title-cast .tc { position: relative; height: 100%; aspect-ratio: 1; max-width: 24%; animation: tcbob 2.6s ease-in-out infinite; }
.title-cast .tc::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, rgba(30,60,30,.35), rgba(30,60,30,0) 70%); z-index: -1; }
.title-cast .tc img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 8px rgba(30,40,80,.28)); animation: tcin .7s cubic-bezier(.2,1.6,.4,1) both; }
.title-cast .tc1 { animation-delay: -.6s; } .title-cast .tc2 { animation-delay: -1.2s; } .title-cast .tc3 { animation-delay: -1.8s; }
.title-cast .tc0 img { animation-delay: .5s; } .title-cast .tc1 img { animation-delay: .6s; } .title-cast .tc2 img { animation-delay: .7s; } .title-cast .tc3 img { animation-delay: .8s; }
@keyframes tcin { from { opacity: 0; transform: translateY(40%) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tcbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3%; } }
@media (orientation: portrait) {
  .title-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); justify-items: center; top: 20%; bottom: calc(4% + 150px); gap: 2% 4%; }
  .title-cast .tc { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .title-cast .tc { animation: none; } }
.title-screen.go .title-cast { transition: opacity .3s; opacity: 0; }
.title-cast .tc img { scale: 1.3; transform-origin: 50% 100%; }  /* 絵の中の余白の分 大きく（足もとは そのまま） */
.title-cast .tc img { position: relative; }
/* 縦向きも 1列（2段だと 上の段が 空に 浮いて見えた）。草地（絵の下 35%）の上に 立たせる */
@media (orientation: portrait) {
  .title-cast { display: flex; top: 58%; bottom: calc(4% + 150px); gap: 1.5%; }
  .title-cast .tc { max-width: 24%; }
}
/* 低い横向き：ロゴに かからないよう 少し小さく・下げる */
@media (orientation: landscape) and (max-height: 720px) { .title-cast { top: 36%; } .title-cast .tc img { scale: 1.15; } }
/* ===== タイトルの文字（台帳 #163・本人「タイトルももっとかっこよく」）
   参考：ポケモンのロゴ（黄色の字＋太い青のふち・丸みと とがりを まぜる・元気な傾き）・子ども向けゲームのロゴ（立体の厚み・ベベル・少しの傾きで動き）
   字は 3層：いちばん後ろ＝太い青のふち＋下への厚み、まん中＝白いふち、前＝黄色→オレンジの色。字ごとに 少し傾け・上下に ずらす ===== */
.title-logo.tl { position: absolute; left: 50%; top: 3.5%; translate: -50% 0; margin: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: 1; white-space: nowrap; filter: drop-shadow(0 16px 18px rgba(20,30,80,.35)); }
.tl .tl1, .tl .tl2 { display: flex; }
.tl span[data-c] { position: relative; display: inline-block; isolation: isolate; font-family: var(--font-logo); font-weight: 900; color: transparent; padding: 0 .02em;
  background: linear-gradient(180deg, #fffbd0 0%, #ffe14a 38%, #ffb21f 70%, #ff8a1a 100%); -webkit-background-clip: text; background-clip: text; animation: logoin .7s cubic-bezier(.2,1.6,.4,1) both; }
.tl span[data-c]::before, .tl span[data-c]::after { content: attr(data-c); position: absolute; left: .02em; top: 0; }
.tl span[data-c]::before { z-index: -2; color: #1d3a9a; -webkit-text-stroke: .2em #1d3a9a; text-shadow: 0 .06em 0 #12286e, 0 .1em 0 #12286e, 0 .13em 0 #12286e; }
.tl span[data-c]::after { z-index: -1; color: var(--c-white); -webkit-text-stroke: .09em var(--c-white); }
.tl .tl1 { font-size: clamp(72px, 9.5vw, 128px); }
.tl .tl2 { font-size: clamp(40px, 5vw, 66px); margin-top: -.02em; }
.tl .tl2 span[data-c] { background: linear-gradient(180deg, #ffffff 0%, #dff1ff 55%, #9fd2ff 100%); -webkit-background-clip: text; background-clip: text; letter-spacing: .04em; }
.tl .tl1 span:nth-child(1) { rotate: -7deg; translate: 0 .04em; } .tl .tl1 span:nth-child(2) { rotate: 4deg; translate: 0 -.03em; }
.tl .tl1 span:nth-child(3) { rotate: -3deg; translate: 0 .02em; } .tl .tl1 span:nth-child(4) { rotate: 6deg; translate: 0 -.04em; }
.tl .tl2 span:nth-child(odd) { rotate: -3deg; } .tl .tl2 span:nth-child(even) { rotate: 3deg; }
.tl .tl1 span:nth-child(1) { animation-delay: .2s; } .tl .tl1 span:nth-child(2) { animation-delay: .28s; } .tl .tl1 span:nth-child(3) { animation-delay: .36s; } .tl .tl1 span:nth-child(4) { animation-delay: .44s; }
.tl .tl2 span { animation-delay: .6s !important; }
@media (orientation: landscape) { .title-logo.tl { left: 50%; translate: -50% 0; top: 3%; } }
/* 重ねる順の直し：字そのもの＝白いふち、::before＝後ろの 青いふち＋厚み、::after＝前の 黄色→オレンジ */
.tl span[data-c] { color: var(--c-white); -webkit-text-stroke: .09em var(--c-white); background: none; }
.tl span[data-c]::after { z-index: 1; -webkit-text-stroke: 0; color: transparent; background: linear-gradient(180deg, #fffbd0 0%, #ffe14a 38%, #ffb21f 70%, #ff8a1a 100%); -webkit-background-clip: text; background-clip: text; }
.tl .tl2 span[data-c] { background: none; }
.tl .tl2 span[data-c]::after { background: linear-gradient(180deg, #ffffff 0%, #dff1ff 55%, #8fc8ff 100%); -webkit-background-clip: text; background-clip: text; }
.title-logo.tl { rotate: -4deg; }  /* 全体を 右上がりに（上向きの構図は 元気に見える） */
/* ロゴの 飾りは 1か所だけ：「ん」の 右上に 光る 星（タイトルロゴの決まり：モチーフは ワンポイント） */
.tl .tl1 span:nth-child(4) > i, .tl .tl1 { position: relative; }
.tl .tl1::after { content: ""; position: absolute; right: -.18em; top: -.12em; width: .42em; height: .42em; z-index: 2;
  background: radial-gradient(circle, var(--c-white) 0 18%, var(--c-white-0) 19%), conic-gradient(from 0deg, #fff6a0, var(--gold), #fff6a0);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 .06em var(--c-white)) drop-shadow(0 .03em 0 #1d3a9a); animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .7; opacity: .7; } }
.tl .tl2 span[data-c] { letter-spacing: 0; }
/* ===== タイトル：ポスター構図（台帳 #163）。手前＝ガオっち・ドラッピ（大）、奥＝ピコボ・ふわりん（小・高い所）、右上がり
   参考：映画ポスター（大きさの順・手前と奥の2段・上向き）・コラージュ（白いふち＋影でくっきり） ===== */
.title-cast.poster { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 1; }
.poster .tp { position: absolute; animation: tcbob 2.6s ease-in-out infinite; }
.poster .tp img { width: 100%; height: 100%; object-fit: contain; animation: tcin .7s cubic-bezier(.2,1.6,.4,1) both;
  filter: drop-shadow(4px 0 0 var(--c-white)) drop-shadow(-4px 0 0 var(--c-white)) drop-shadow(0 4px 0 var(--c-white)) drop-shadow(0 -4px 0 var(--c-white)) drop-shadow(0 14px 12px rgba(20,30,80,.35)); }
.poster .tp-mecha { left: 50%; top: 31%; width: 17%; height: 26%; animation-delay: -.6s; }
.poster .tp-fuwa { right: 3%; top: 26%; width: 27%; height: 32%; animation-delay: -1.2s; }
.poster .tp-kaiju { left: 3%; top: 30%; width: 25%; height: 44%; animation-delay: -1.8s; }
.poster .tp-dragon { left: 24%; top: 40%; width: 30%; height: 40%; }
.poster .tp-mecha img { animation-delay: .5s; } .poster .tp-fuwa img { animation-delay: .6s; } .poster .tp-kaiju img { animation-delay: .7s; } .poster .tp-dragon img { animation-delay: .8s; }
.poster .tp-kaiju img { object-position: left center; } .poster .tp-fuwa img { object-position: right center; }
@media (orientation: portrait) {
  .poster .tp-mecha { left: 58%; top: 25%; width: 30%; height: 17%; }
  .poster .tp-fuwa { right: 4%; top: 42%; width: 44%; height: 22%; }
  .poster .tp-kaiju { left: 4%; top: 30%; width: 44%; height: 30%; }
  .poster .tp-dragon { left: 20%; top: 55%; width: 52%; height: 26%; }
}
/* ===== タイトル ポスター構図 v2（本人「綺麗に並べすぎる」「コラージュや映画ポスター」「向き」）
   大きさに強い差（手前を とても大きく・画面のはしで少し切れる）・重ねて奥行き・1人ずつ傾ける・全員が まん中（ロゴ）へ向かう・ロゴの後ろに 放射の光 ===== */
.title-burst { position: absolute; z-index: 0; left: 50%; top: 22%; width: 160vmax; height: 160vmax; translate: -50% -50%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--c-white-55) 0 5deg, var(--c-white-0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, var(--c-black) 0, var(--c-black) 12%, transparent 46%); mask-image: radial-gradient(circle, var(--c-black) 0, var(--c-black) 12%, transparent 46%); animation: burstspin 40s linear infinite; }
@keyframes burstspin { to { rotate: 360deg; } }
.poster .tp-dragon { left: -3%; top: auto; bottom: -9%; width: 50%; height: 66%; rotate: -8deg; }
.poster .tp-fuwa { right: -4%; top: auto; bottom: 4%; width: 42%; height: 52%; rotate: 7deg; }
.poster .tp-kaiju { left: 24%; top: 24%; width: 26%; height: 40%; rotate: -5deg; }
.poster .tp-mecha { left: auto; right: 22%; top: 25%; width: 15%; height: 22%; rotate: 12deg; }
.poster .tp-kaiju img, .poster .tp-dragon img { object-position: center; }
@media (orientation: portrait) {
  .title-burst { top: 16%; }
  .poster .tp-dragon { left: -8%; bottom: 10%; width: 74%; height: 34%; rotate: -8deg; }
  .poster .tp-fuwa { right: -10%; bottom: 30%; width: 62%; height: 26%; rotate: 8deg; }
  .poster .tp-kaiju { left: 2%; top: 26%; width: 44%; height: 24%; rotate: -6deg; }
  .poster .tp-mecha { right: 8%; top: 24%; width: 26%; height: 14%; rotate: 12deg; }
}
/* タイトルの文字は ChatGPT で作った ロゴの絵（台帳 #163・本人「ChatGPT などを使って」）。字は1字ずつ 正しいことを確かめた */
.title-logo.tl { filter: drop-shadow(0 14px 16px rgba(20,30,80,.4)); rotate: -3deg; }
.title-logo.tl img { display: block; width: clamp(380px, 46vw, 620px); height: auto; animation: logoin .8s cubic-bezier(.2,1.6,.4,1) .2s both; }
.tl .tl1::after { content: none; }
@media (orientation: portrait) { .title-logo.tl img { width: min(78vw, 620px); } }
@media (orientation: landscape) and (max-height: 720px) { .title-logo.tl img { width: clamp(320px, 40vw, 480px); } }
/* ピコボは 右向き（本人「ロボットは右向けで良いかも」）。左右対称の形なので 反転しても 形は変わらない */
.poster .tp-mecha img { scale: -1 1; }
/* ロゴと キャラの顔を 重ねない（ガオっち・ピコボを ロゴの下へ） */
@media (orientation: landscape) {
  .title-logo.tl img { width: clamp(320px, 38vw, 500px); }
  .poster .tp-kaiju { top: 37%; left: 23%; height: 38%; }
  .poster .tp-mecha { top: 33%; right: 13%; height: 22%; }
}
@media (orientation: landscape) { .poster .tp-mecha { top: 13%; right: 7%; height: 23%; } }
@media (orientation: portrait) { .poster .tp-mecha { top: 33%; right: 6%; width: 24%; height: 11%; } }
@media (orientation: portrait) { .poster .tp-kaiju { top: 31%; } }
@media (orientation: portrait) { .poster .tp-kaiju { top: 36%; } .poster .tp-mecha { top: 37%; } }
/* ===== タイトル ポスター構図 v3（三分割法・シーソーの原理・大きさの順・空気遠近法・下の帯は空ける）
   参考：Smashing「Compositional Balance」（小さい物は中心から遠く）・Made Good Designs「Rule of Thirds」（主役は交わる所）・Lovart 映画ポスターガイド（主役100%・脇役55〜70%・奥30〜45%・下の帯を空ける）===== */
@media (orientation: landscape) {
  .poster .tp-dragon { left: -5%; top: 26%; bottom: auto; width: 46%; height: 53%; rotate: -8deg; }
  .poster .tp-fuwa { right: -3%; top: 31%; bottom: auto; width: 36%; height: 46%; rotate: 7deg; }
  .poster .tp-kaiju { left: 27%; top: 27%; width: 23%; height: 35%; rotate: -5deg; }
  .poster .tp-mecha { left: 66%; right: auto; top: 17%; width: 14%; height: 20%; rotate: 10deg; }
}
@media (orientation: portrait) {
  .poster .tp-dragon { left: -8%; top: 54%; bottom: auto; width: 70%; height: 29%; rotate: -8deg; }
  .poster .tp-fuwa { right: -8%; top: 44%; bottom: auto; width: 56%; height: 23%; rotate: 8deg; }
  .poster .tp-kaiju { left: 4%; top: 37%; width: 42%; height: 20%; rotate: -6deg; }
  .poster .tp-mecha { left: auto; right: 9%; top: 35%; width: 26%; height: 10%; rotate: 10deg; }
}
/* 奥の2人は 少し かすませる（空気遠近法） */
.poster .tp-kaiju img, .poster .tp-mecha img { filter: saturate(.9) brightness(1.04) drop-shadow(4px 0 0 var(--c-white)) drop-shadow(-4px 0 0 var(--c-white)) drop-shadow(0 4px 0 var(--c-white)) drop-shadow(0 -4px 0 var(--c-white)) drop-shadow(0 12px 10px rgba(20,30,80,.28)); }
@media (orientation: portrait) { .poster .tp-mecha { top: 35.4%; height: 8.4%; width: 22%; } }
/* 横：ロゴを 少し小さく（上の帯 ＝ 見出しの 3分の1 に収める）。キャラは ロゴの下〜ボタンの上の帯に */
@media (orientation: landscape) {
  .title-logo.tl img { width: clamp(300px, 33vw, 440px); }
  .poster .tp-dragon { top: 31%; height: 48%; }
  .poster .tp-kaiju { top: 32%; height: 30%; left: 28%; }
  .poster .tp-fuwa { top: 34%; height: 44%; }
  .poster .tp-mecha { left: 69%; top: 11%; width: 14%; height: 19%; }
}
/* 縦：ロゴの帯（上 29%）とキャラの帯（30〜84%）を 分ける。主役ドラッピ＝左下、ふわりん＝右、ガオっち＝左上の奥、ピコボ＝右上（中心から遠く 小さく） */
@media (orientation: portrait) {
  .title-logo.tl img { width: min(66vw, 560px); }
  .poster .tp-dragon { left: -8%; top: 54%; width: 76%; height: 30%; }
  .poster .tp-fuwa { right: -8%; top: 41%; width: 60%; height: 26%; }
  .poster .tp-kaiju { left: 3%; top: 32%; width: 46%; height: 22%; }
  .poster .tp-mecha { right: 10%; top: 30%; width: 26%; height: 10%; }
}
@media (orientation: landscape) and (max-height: 720px) { .poster .tp-dragon { height: 44%; } .poster .tp-fuwa { height: 40%; top: 33%; } .poster .tp-kaiju { height: 27%; top: 33%; } }
/* タイトルの大きさ（本人「タイトルの大きさも再考」）：横は 画面の幅の 40%（主役のタイトルは 40〜70% がよく使われる・ES-DE は 50〜90%）、縦は 66%。
   上の 3分の1 に収める（三分割法）ため、ロゴは 上に寄せ、キャラの帯を 下げる */
@media (orientation: landscape) {
  .title-logo.tl { top: 1.5%; }
  .title-logo.tl img { width: 40vw; max-width: 620px; }
  .poster .tp-dragon { top: 35%; height: 45%; }
  .poster .tp-kaiju { top: 35%; height: 28%; }
  .poster .tp-fuwa { top: 37%; height: 41%; }
  .poster .tp-mecha { left: 72%; top: 9%; height: 18%; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .title-logo.tl img { width: 38vw; }
  .poster .tp-dragon { top: 36%; height: 41%; } .poster .tp-fuwa { top: 37%; height: 38%; } .poster .tp-kaiju { top: 36%; height: 25%; }
}
/* 「おうちの かた」（本人「ここの位置とかも再考」「文字も入れるべきかどうか調べて」）
   下の角は 小さい子が 手首をのせて まちがえて押す（Sesame Workshop のガイド）→ 右上へ。
   計算のゲート（Apple の Kids 決まり）があるので 文字は残す（保護者が 見つけやすい）。まちがえて押さないよう 控えめに 少し すける */
.title-screen .parent-door { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: auto; top: max(14px, env(safe-area-inset-top)); opacity: .72; transform: scale(.92); transform-origin: top right; }
.title-screen .parent-door:active { opacity: 1; }
/* 白いふちは 絵に 焼きこんだ なめらかな ふち（4方向の影で作ると ななめが ギザギザになった）。CSS は 落ち影だけ */
.poster .tp img { filter: drop-shadow(0 14px 12px rgba(20,30,80,.32)); }
.poster .tp-kaiju img, .poster .tp-mecha img { filter: saturate(.9) brightness(1.04) drop-shadow(0 12px 10px rgba(20,30,80,.26)); }
@media (orientation: landscape) { .poster .tp-mecha { top: 11%; } }
/* ===== タイトル v4：グループショット（ピラミッド型）。主役ドラッピ＝手前まん中・いちばん大きい、ガオっち／ふわりん＝左右の少し後ろ（主役の 6〜7割）、ピコボ＝奥に小さく。
   参考：映画ポスターの グループ（主役を中心に 大きさの順・重ねて1つのかたまり）・Lovart（同じ大きさの 等間隔は さける）・Smashing（小さい物は 中心から遠く）===== */
@media (orientation: landscape) {
  .poster .tp-kaiju { left: 12%; right: auto; top: 33%; width: 27%; height: 41%; rotate: -7deg; }
  .poster .tp-fuwa { left: auto; right: 10%; top: 35%; width: 31%; height: 39%; rotate: 7deg; }
  .poster .tp-dragon { left: 29%; top: 36%; bottom: auto; width: 42%; height: 46%; rotate: -3deg; }
  .poster .tp-mecha { left: 73%; top: 14%; width: 14%; height: 19%; rotate: 10deg; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .poster .tp-kaiju { top: 35%; height: 37%; } .poster .tp-fuwa { top: 37%; height: 35%; } .poster .tp-dragon { top: 38%; height: 41%; }
}
@media (orientation: portrait) {
  .poster .tp-kaiju { left: -2%; top: 37%; width: 48%; height: 23%; rotate: -7deg; }
  .poster .tp-fuwa { right: -4%; top: 39%; width: 52%; height: 21%; rotate: 7deg; }
  .poster .tp-dragon { left: 13%; top: 52%; width: 74%; height: 31%; rotate: -3deg; }
  .poster .tp-mecha { right: 9%; top: 30.5%; width: 24%; height: 9%; }
}
/* ピコボ：右下（ふわりんの足元の 空いた草原）へ。左に2人・右に1人で 右が軽かったので つり合いをとる（シーソーの原理）。
   大きさは 主役の 約4割。右下では 右向きだと 画面の外を向くので、まん中向き（左向き）にする */
.poster .tp-mecha img { scale: 1 1; }
@media (orientation: landscape) { .poster .tp-mecha { left: 70%; top: 60%; width: 15%; height: 21%; rotate: -8deg; } }
@media (orientation: landscape) and (max-height: 720px) { .poster .tp-mecha { top: 59%; height: 19%; } }
@media (orientation: portrait) { .poster .tp-mecha { right: 4%; left: auto; top: 61%; width: 26%; height: 11%; rotate: -8deg; } }
/* ピコボは いちばん手前（小さい子は 手前に 出して かくれない）。ドラッピと ふわりんの間の 足元 */
@media (orientation: landscape) { .poster .tp-mecha { left: 63%; top: 58%; width: 15%; height: 22%; rotate: -6deg; } }
@media (orientation: landscape) and (max-height: 720px) { .poster .tp-mecha { top: 58%; height: 20%; } }
@media (orientation: portrait) { .poster .tp-mecha { right: auto; left: 62%; top: 60%; width: 30%; height: 12%; } }
/* ===== タイトル v5：4人は 同じ立場 → V字で ほぼ同じ大きさ・全員ジャンプ（本人「ロボだけ小さい」「4体の 最適な構図」）
   参考：Mr.インクレディブルのポスター（V字・ピラミッド）・ミュータント タートルズ3のポスター（4人とも 空中にジャンプ）・4機の ダイヤ編隊（奥行きを ずらす）
   外側（ガオっち・ふわりん）＝少し高く・まん中向き、内側（ドラッピ・ピコボ）＝少し低く手前・少しだけ大きい、扇のように傾ける ===== */
.poster .tp-mecha img { scale: 1 1; }
@media (orientation: landscape) {
  .poster .tp-kaiju { left: 3%; right: auto; top: 31%; bottom: auto; width: 25%; height: 39%; rotate: -9deg; }
  .poster .tp-fuwa { left: auto; right: 2%; top: 31%; bottom: auto; width: 28%; height: 39%; rotate: 9deg; }
  .poster .tp-dragon { left: 23%; top: 39%; bottom: auto; width: 29%; height: 41%; rotate: -4deg; }
  .poster .tp-mecha { left: 51%; right: auto; top: 39%; bottom: auto; width: 22%; height: 40%; rotate: 4deg; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .poster .tp-kaiju, .poster .tp-fuwa { top: 33%; height: 35%; } .poster .tp-dragon, .poster .tp-mecha { top: 40%; height: 37%; }
}
@media (orientation: portrait) {
  .poster .tp-kaiju { left: -2%; right: auto; top: 33%; width: 50%; height: 22%; rotate: -9deg; }
  .poster .tp-fuwa { left: auto; right: -3%; top: 33%; width: 52%; height: 22%; rotate: 9deg; }
  .poster .tp-dragon { left: 2%; top: 55%; width: 50%; height: 27%; rotate: -4deg; }
  .poster .tp-mecha { left: auto; right: 4%; top: 55%; width: 44%; height: 26%; rotate: 4deg; }
}
/* ゲートの「やめる」：ほかの画面と同じ 左上の 丸い もどるボタン（TY-C5・UI-71 小 72px・押せる範囲 88px）。
   参考：iOS（決定ボタンがある時 キャンセルは 左上）・Material（全画面の ダイアログは 左上で 閉じる） */
.gate-back.round { left: max(20px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); width: var(--b-s); height: var(--b-s); min-height: 0; padding: 0; border-radius: 50%;
  background: linear-gradient(var(--c-white), #f4ede6); box-shadow: var(--sh-hi), 0 6px 0 var(--edge-w), var(--drop); }
.gate-back.round::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
/* ===== タイトル v6：3人（本人「4体をやめて3体だけ・これが一番バランスがよい」）。三角形（ピラミッド）の グループ：ドラッピ＝手前まん中、ガオっち＝左、ふわりん＝右 ===== */
@media (orientation: landscape) {
  .poster .tp-kaiju { left: 12%; right: auto; top: 33%; bottom: auto; width: 27%; height: 41%; rotate: -7deg; }
  .poster .tp-fuwa { left: auto; right: 10%; top: 35%; bottom: auto; width: 31%; height: 39%; rotate: 7deg; }
  .poster .tp-dragon { left: 29%; top: 36%; bottom: auto; width: 42%; height: 46%; rotate: -3deg; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .poster .tp-kaiju { top: 35%; height: 37%; } .poster .tp-fuwa { top: 37%; height: 35%; } .poster .tp-dragon { top: 38%; height: 41%; }
}
@media (orientation: portrait) {
  .poster .tp-kaiju { left: -2%; right: auto; top: 35%; width: 50%; height: 24%; rotate: -7deg; }
  .poster .tp-fuwa { left: auto; right: -4%; top: 37%; width: 54%; height: 22%; rotate: 7deg; }
  .poster .tp-dragon { left: 12%; top: 52%; width: 76%; height: 31%; rotate: -3deg; }
}
/* リボン（2026-10-14 #379 本人「やわらかい 色に して ぬい目を 消す」・R23）：前の ぬい目 入りは _old/2026-10-14-ui1/style-before-ribbon.css
   やわらかい 青紫・ぬい目 なし・しっぽと 折れ目も 同じ 色の 少し こい 色（こい 紺を やめる） */
.ribbon { --rb: var(--head); --rb-l: var(--head-l); --tail: #7d83e0; --fold: var(--head-d); outline: none;
  background: linear-gradient(180deg, var(--rb-l) 0%, var(--rb) 55%, #8389e4 100%); }
.ribbon::before { background:
    linear-gradient(to top right, transparent 50%, var(--fold) 50%) right bottom / var(--f) var(--f) no-repeat,
    linear-gradient(90deg, #9097ef, var(--tail)); }
.ribbon::after { background:
    linear-gradient(to top left, transparent 50%, var(--fold) 50%) left bottom / var(--f) var(--f) no-repeat,
    linear-gradient(270deg, #9097ef, var(--tail)); }
/* ===== タイトル v7：ジャンプ率を 上げる（本人「ジャンプ率とか キャラクターの比率も 再考」）
   参考：ジャンプ率（大きさの差が 大きいほど 躍動感）・アクア技術ブログ「迫力増大！キャラクター構図」（主役を 大きく 手前、ほかを 奥へ 段階的に）・任天堂の箱の絵（マリオ3／カービィ：主役1人を まん中に 大きく）
   主役ドラッピ：画面の高さの 約半分。左右の2人：主役の 約6割で 奥（少し高い位置）。3人で 画面の 幅の 約8割を 占める ===== */
@media (orientation: landscape) {
  .poster .tp-dragon { left: 25%; top: 32%; width: 50%; height: 53%; rotate: -3deg; }
  .poster .tp-kaiju { left: 8%; top: 29%; width: 24%; height: 34%; rotate: -8deg; }
  .poster .tp-fuwa { right: 6%; top: 31%; width: 28%; height: 32%; rotate: 8deg; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .poster .tp-dragon { top: 34%; height: 48%; } .poster .tp-kaiju { top: 31%; height: 31%; } .poster .tp-fuwa { top: 33%; height: 29%; }
}
@media (orientation: portrait) {
  .poster .tp-dragon { left: 5%; top: 49%; width: 90%; height: 36%; rotate: -3deg; }
  .poster .tp-kaiju { left: -1%; top: 33%; width: 44%; height: 20%; rotate: -8deg; }
  .poster .tp-fuwa { right: -3%; top: 35%; width: 48%; height: 18%; rotate: 8deg; }
}
/* v7 の直し：ロゴの下〜ボタンの上の間に 収まる大きさ（主役：脇役 ＝ 約1.5：1 は 保つ） */
@media (orientation: landscape) {
  .poster .tp-dragon { left: 28%; width: 44%; height: 44%; top: 36%; }
  .poster .tp-kaiju { height: 30%; top: 32%; } .poster .tp-fuwa { height: 28%; top: 34%; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .poster .tp-dragon { height: 40%; top: 38%; } .poster .tp-kaiju { height: 27%; top: 34%; } .poster .tp-fuwa { height: 25%; top: 36%; }
}
/* 足元の影（土台）は いつも キャラの 後ろ（影が 足に かぶっていた・台帳 #169）。順：光 0 → 影 1 → キャラ 2 → 名前札 3 */
.stage-buddy .glow { z-index: 0; }
.stage-buddy .pedestal { position: relative; z-index: 1 !important; }
.stage-buddy .partner-tap { position: relative; z-index: 2 !important; }
.stage-buddy .swap { z-index: 3; }
/* 結果：もらったもの（きせかえ・捕まえたモンスター）は 縦に積まず 1行の札に（高くなって 見出しと ボタンが 画面から はみ出した・台帳 #170）
   参考：bugnet.io「結果画面」（数は 3〜4つまで・主役のボタンは 下に1つ） */
.rs-gets { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rs-get { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; border-radius: 16px; background: #fbf6f0; font: 800 18px var(--font-ui); color: var(--ink); white-space: nowrap; }
.rs-get img { width: 48px; height: 48px; object-fit: contain; }
.rs-go .btn:disabled { opacity: .6; }
/* 高さが 低い 横向き（〜820px）は 全体を 詰める */
@media (orientation: landscape) and (max-height: 860px) {  /* 1194×834 も 低い 画面に 入れる（B3：結果の ボタンが 外に 出た） */
  .screen.rs { gap: 18px; }
  .rs-title .logo { font-size: 52px; }
  .rs-panel { padding: 30px 24px 18px; gap: 6px 24px; grid-template-columns: 150px minmax(0, 1fr); }
  .rs-face { width: 136px; }
  .rs-stars img { width: 56px; height: 56px; }
  .rs-stat { padding: 8px 16px; } .rs-stat b { font-size: 32px; }
  .screen.rs > .rs-feel { padding: 32px 24px 14px; }
  .screen.rs .feel .round { width: 72px; height: 72px; }
}

/* ==== UI-73 影のきまり（2026-10-13 本人「ボタンの影の色もバラバラ？」「ものによって変えるのは良いが再検討」）
   参考：Duolingo（押せる物は 下に 4px の厚み・色は 面と同じ色相の暗い色／白い面は 薄い灰 #e5e5e5）、
         Anthony Hobday「solid lower edge shadow」（ぼかさない・面の暗い色・別の色相は影に見えない）
   ① 押せる物だけに 厚み（ぼかさない帯）。押せない物（札・数の表示・帯・台）は 厚みなし＝やわらかい影だけ
   ② 厚みの色＝面と同じ色相の暗い色。白い面は 全部 --edge-w 1色
   ③ 厚さ 3段：大（モードカード・リボン）8px／中（ボタン・丸ボタン・選択肢）6px／小（小さい札ボタン）4px
   ④ やわらかい影は 2種だけ：--drop（浮いた物）・--drop-s（札・帯） */
:root { --edge-w: #d9cfc4; --drop-s: 0 4px 12px rgba(40, 60, 110, .16); }
/* 白い面の押せる物 → 厚みの色を 1色に */
.round { box-shadow: var(--sh-hi), 0 6px 0 var(--edge-w), var(--drop); }
.round:active { box-shadow: 0 1px 0 var(--edge-w); }
.dock .base { background: radial-gradient(circle at 50% 35%, var(--c-white), #f7f2ec 60%, #ece3d9); box-shadow: var(--sh-hi), 0 6px 0 var(--edge-w), var(--drop); }
.dock button:active .base { box-shadow: 0 1px 0 var(--edge-w); }
.choice.pic { --cd: var(--edge-w); }
.choice.wrong { box-shadow: inset 0 0 0 4px #b9b2ab, 0 6px 0 var(--edge-w); }
.btn { box-shadow: var(--sh-btn-hi), 0 6px 0 var(--cd), var(--drop); }
.btn.small { box-shadow: inset 0 3px 0 var(--c-white-55), 0 4px 0 var(--cd), var(--drop); }
/* 押せない物 → 厚みを消して やわらかい影だけ（押せる物と 見分ける） */
.pill, .nameplate, .topbar .hearts { box-shadow: inset 0 2px 0 var(--c-white), var(--drop-s); }
.panel > .h2tab { box-shadow: var(--drop-s); }
.stage-buddy .pedestal { box-shadow: 0 6px 14px rgba(40, 60, 110, .22); }
.bubble { box-shadow: var(--drop); }
.stage-buddy .swap { box-shadow: 0 4px 0 var(--edge-w), var(--drop-s); }
.stage-buddy .swap:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge-w); }

/* ==== UI-74 ごほうび画面の 見やすさ（2026-10-13 本人「帯とアイコンのカラーリング…視認性が悪い」）
   参考：WCAG 1.4.3（文字と背景の明るさの比 4.5:1 以上・大きい字は 3:1 以上）、Material「Text legibility」（明るい面には 濃い字）
   前：「あと 70 まい」の数が 金（#c99a00）で 面との比 約 2.4 → 墨（--ink）で 約 10。小さい「あと・まい」も 濃くする
   前：行の面（#fbf6f0）が 白い枠と ほぼ同じ → 行を 1段 濃くして ふちを付ける。棒の 中身と 溝も 差を広げる */
.rw-item { background: #f6eee4; box-shadow: inset 0 0 0 2px #ecdfcf; }
.rw-item.ok { box-shadow: 0 0 0 4px var(--gold); }
.rw-left { color: #6b5546; }
.rw-left b { color: var(--ink); }
.rw-unit { color: #6b5546; }
.rw-bar { background: #e3d5c4; box-shadow: inset 0 2px 0 var(--c-line-12); }
.rw-bar i { background: linear-gradient(180deg, var(--gold-l), var(--gold)); box-shadow: inset 0 -3px 0 rgba(201,154,0,.55); }

/* ==== 台帳 #180 リズムの色の問題（2026-10-13 本人「色が表示されなかった」）：音符に 文字も絵も無く 空だった。
   参考：Kids Colors（Intellijoy：色の付いた物そのものをタップ）、Colorific（色の風船をタップ）→ 音符そのものを その色の まるい玉にする */
.rnote.paint { min-width: 132px; width: 132px; height: 132px; padding: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c) 45%, var(--c-white)) 0 18%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, var(--c-black)));
  box-shadow: 0 0 0 5px var(--c-white), 0 6px 0 5px color-mix(in srgb, var(--c) 65%, var(--c-black)), 0 10px 18px 5px rgba(0,0,0,.22); }  /* #352 */
/* 形の問題も 音符の中の図が 大きさ 0 で空だった → 図に大きさを付け、音符は白にして 黄色の形と見分けやすくする（UI-74） */
.rnote svg { width: 92px; height: 92px; display: block; }
.rnote:has(svg) { min-width: 132px; height: 132px; padding: 0; background: radial-gradient(circle at 40% 30%, var(--c-white), #fbf6f0 70%, #efe6da); box-shadow: 0 0 0 4px var(--c-white), 0 6px 0 4px var(--edge-w), 0 10px 18px 4px rgba(0,0,0,.22); }  /* #352 */

/* ==== 台帳 #181 ずかんの 文字のズレ・アイコンの上下余白（2026-10-13 本人 iPad の写真）
   参考：フォルダ型タブ（選んだタブは 一段上げる・VTScada）、Material/Compose の Tab（どのタブも同じ高さ・同じ並びで中身を置く）
   ① 選んだタブは 8px 上がるので、中の文字が 4px 上にずれていた → 上に 8px 足して、全部のタブの文字を 同じ高さにそろえる
   ② カードの絵が「No.」の札の分を数えずに真ん中に置かれ、上が狭く下が広かった → 上の余白に 札の高さを入れて、札の下〜名前の上の まん中に絵を置く */
.dex-folders button.on { padding-top: 8px; }
.dx { padding-top: 40px; }
/* ③ 縦の画面で「そらのドラゴン」だけ 2行になり、ほかのタブと 文字の高さがずれていた → 1行に収める（タブの幅 約150px に 18px×7字＝126px） */
.dex-folders button { white-space: nowrap; }
.dex-folders button .ph { white-space: nowrap; }

/* ==== 台帳 #183 ごほうびの 2つの枠を 画面の真ん中に（2026-10-13 本人「今のコインとできるものの位置 真ん中がいいかも」）
   参考：光学的な中心（見た目の真ん中は 幾何の真ん中より 少し上）・タブレット横画面で 余白を上下に分ける（Android の tablet ガイド）
   前：上に寄せて置き、下に草地が大きく空いていた → 2つの枠を 縦の真ん中に置き、たがいの中心もそろえる（下を 少し多めにあけて 見た目の真ん中に） */
.rw-layout { align-content: center; align-items: center; padding-top: 56px; padding-bottom: 0; }
.rw-bank { padding-bottom: 40px; }

/* ==== TY-K そろえ方の使い分け（台帳 #185・2026-10-13 本人「中央ルールにしたが そのままだと違和感 → 調べてルールを決めて使い分ける」）
   参考：Nielsen『Designing Web Usability』（文は左そろえ・中央は数行だけ）、Red Hat デザインシステム（ふだんは左・長い文を中央にしない）、
         Paladin Studios の結果画面（いちばん大事な物から順に・1本の軸）、Stripe の料金表（1つの枠の中は そろえる軸を少なく）
   K1 お祝い・結果（短くて主役が1つ）＝ 画面の真ん中の縦の線に 全部を並べる。左右に分ける時も「2つの列をまとめた かたまり」を真ん中に置く
   K2 一覧・設定・ごほうびの行・長い文 ＝ 左そろえ（1つの枠に 左の線は1本）
   K3 1つの枠の中で 真ん中と左を まぜない
   前：結果の枠は キャラが左の端、星と数は「残りの右の場所」の真ん中 → かたまりが 右にずれて 浮いて見えた */
.rs-panel { grid-template-columns: auto auto !important; justify-content: center; column-gap: 64px !important; }
.rs-panel > :not(.h2tab):not(.rs-hero) { justify-self: center; }
@media (orientation: portrait) { .rs-panel { grid-template-columns: auto !important; } }
.screen.rs > .rs-feel { justify-content: center; }

/* ==== 台帳 #186 リズムの音符が 重なる（2026-10-13 本人「選択するときのボタンの大きさやバランス見直し」・Safari のバーで 舞台が低い時）
   参考：NN/g「Touch Target Size」（1cm 角以上・となりと離す）、WCAG 2.5.8（押す所を重ねない）、DJMAX Technika Tune（小さい画面は レーンを減らす／詰めない）
   前：音符の高さが 96〜132px 固定で、レーンの間（舞台の高さ×70%÷数）が 70px ほどの時に 上下で重なった
   → 音符の高さを「レーンの間 − 12px」までにする（上限は今まで どおり）。字も それに合わせて小さく */
.rnote { --lane: calc(70cqh / var(--n, 3)); }
.rnote { height: min(96px, calc(var(--lane) - 12px)); min-width: min(120px, calc(var(--lane) * 1.25)); font-size: min(36px, calc(var(--lane) * .42)); }
.young .rnote, .play.m-rhythm .rnote:has(img), .rnote.paint, .rnote:has(svg) { height: min(132px, calc(var(--lane) - 12px)); min-width: min(132px, calc(var(--lane) - 12px)); }
.rnote.paint { width: min(132px, calc(var(--lane) - 12px)); }
.rnote img, .rnote svg { width: min(96px, calc(var(--lane) - 36px)); height: min(96px, calc(var(--lane) - 36px)); }
/* リズムは 答えが 舞台を流れるので、下の枠は 問題だけ → 枠を 問題の高さにして、舞台を広げる（レーンの間を広げ、音符を大きく保つ） */
.play.m-rhythm { grid-template-rows: auto minmax(0, 1fr) auto !important; }
.play.m-rhythm > .qbox.rq { min-height: 120px; max-height: none; padding-top: 12px; padding-bottom: 12px; }  /* 横も 上限を 外す：文が 2行の 時に 上下の 余白へ はみ出して いた（上9・下12・ベータ1a の 検査） */
@media (orientation: portrait) { .play.m-rhythm > .qbox.rq { max-height: none; height: auto; } }
.play.m-rhythm > .qbox.rq { min-height: 136px !important; padding-top: 16px !important; padding-bottom: 16px !important; }  /* 白い ふち 6px×2 を 引いて 中 124 → 道具 88 の 上下 18（#350） */
.play > .qbox.rq .qtools .round { width: 88px !important; height: 88px !important; position: relative; }  /* スピーカーと ？を 同じ 88 に そろえる（4歳も・押せる 範囲は 104） */
.play > .qbox.rq .qtools .round::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }  /* リズムの 箱は 答えの ボタンが 無いので 上下 16 で そろえる（ほかの 遊びの 上8・下24 を 当てない・#350） */  /* 縦は 文が 2行に なる：箱を 中身に 合わせて のばす（#350・はみ出し -9px だった） */
/* 分数は 教科書と同じ 縦の形（分子・線・分母）で（台帳 #190） */
.frac { display: inline-grid; justify-items: center; line-height: 1; gap: 4px; font-weight: 700; }
.frac i { display: block; width: 1.3em; height: 3px; border-radius: 2px; background: currentColor; }

/* ==== 台帳 #191 きょうのミッション（何を・どれだけ・何がもらえるか を1枚で。押せない＝厚みなし UI-73） */
.lobby-right .goal.mission { display: grid; gap: 8px; padding: 14px 20px; justify-content: stretch; white-space: normal; }
.mission .ms-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mission .ms-ttl { font: 900 22px var(--font-logo); color: var(--head-d); }
.mission .ms-get { display: inline-flex; align-items: center; gap: 4px; font: 900 22px var(--font-logo); color: var(--ink); }
.mission .ms-get img { width: 30px; height: 30px; }
.mission .ms-what { font: 800 22px var(--font-ui); color: var(--ink); display: flex; gap: 8px; align-items: center; }
.mission .ms-what i { width: 26px; height: 26px; border-radius: 50%; background: var(--c-track); box-shadow: inset 0 2px 0 var(--c-line-12); }
.mission .ms-what i.on { background: radial-gradient(circle at 40% 30%, var(--gold-l), var(--gold)); box-shadow: 0 2px 0 var(--gold-d); }
.mission .ms-bar { position: relative; height: 26px; border-radius: 999px; background: #e3d5c4; overflow: hidden; }
.mission .ms-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, #8fe39a, #3fbf5a); }
.mission .ms-bar span { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font: 800 17px var(--font-logo); color: var(--ink); }
.mission.ok { box-shadow: 0 0 0 4px var(--gold), var(--drop-s); }
.mission.ok .ms-get { color: var(--gold-d); }
@media (orientation: landscape) and (max-height: 820px) { .lobby-right .goal.mission { padding: 10px 16px; gap: 6px; } .mission .ms-what, .mission .ms-ttl, .mission .ms-get { font-size: 19px; } .mission .ms-bar { height: 20px; } }
/* ==== 台帳 #192 文字の上下が切れる（2026-10-13 本人「文字の上下は切れてる」）
   原因：箱を 字の高さちょうどに 切りつめている（text-box: trim）のに、箱が はみ出しを かくす（overflow: hidden）ので、
         「ご」の点や 字の下が 切れていた（タイトルの箱 32px に 字 61px）。→ 字が入る箱は はみ出しを かくさない（TY） */
.screen > .topbar > .h1 { overflow: visible !important; }
.mission .ms-bar { overflow: visible; }
.mission .ms-bar i { max-width: 100%; }

/* ==== UI-76 押せる物と押せない物の見分け・吹き出し・色の役割（台帳 #196・2026-10-13 本人「全体のUIUX…吹き出しの色やボタンとボタンじゃないものの見た目などまず調べる」→ 案1〜6を全部）
   参考：ref/research-2026-10-13-uiux.md（NN/g「Flat UI Elements Attract Less Attention」：押せる手がかりが弱いと 探すのに22%長い・押せない物を ボタン風の色の箱に入れない／
         NN/g「Children's UX」：子どもは見えた物を全部さわる → ボタンに見える物は 必ず押せる／Material 3・WCAG：数の しるしは 押せる物と見た目を分け、色だけで区別しない／
         ゲームのセリフ欄・マンガ：吹き出しは 話す人の色・しっぽは 話す人へ／아이스크림 홈런：進みは 絵で）
   ① 押せる物＝「色の面＋下の厚み＋押すと沈む」。大きい主役は オレンジ・青（今まで どおり）、小さい押せる物は「うすいオレンジの面＋茶オレンジの厚み」で そろえる
   ② 押せない物（数の札・帯・進み・台）＝ 半とうめいの 平らな面。厚み・浮いた影 なし
   ③ 吹き出し＝ キャラの色の ふち（4px）＋同じ色の しっぽ（キャラへ向ける）
   ④ 名前の札（押すと なかま選び）＝ ①の押せる見た目
   ⑤ 色の役割：オレンジ系＝押す／藍＝見出し／金＝しるし（星・たっせい）／緑＝進み（ゲージ）
   ⑥ 4歳：押せる物は 2cm（約104px）以上 */
:root { --press-face: linear-gradient(180deg, #fffaf3, #ffe6cc); --press-edge: #e0a066; --flat: rgba(255,255,255,.62); --flat-line: var(--c-white-95); }
/* ① 小さい押せる物 */
.round, .dock .base, .stage-buddy .swap { background: var(--press-face) !important; box-shadow: var(--sh-hi), 0 6px 0 var(--press-edge), 0 10px 18px rgba(120,70,20,.18) !important; }
.round:active, .dock button:active .base, .stage-buddy .swap:active { transform: translateY(5px); box-shadow: var(--sh-hi), 0 1px 0 var(--press-edge) !important; }
.stage-buddy .swap { border: none !important; font-weight: 900; color: var(--ink); }
.round.speak-btn { background: radial-gradient(circle at 40% 30%, var(--c-white), #e3f4ff 60%, #bfe3ff) !important; box-shadow: var(--sh-hi), 0 6px 0 #7fb6e0, 0 10px 16px rgba(40,90,140,.22) !important; }
/* ② 押せない物 */
.pill, .topbar .hearts { background: var(--flat) !important; box-shadow: none !important; border: 2px solid var(--flat-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lobby-right .goal.mission, .stage-buddy .grow-box { background: var(--flat); box-shadow: none; border: 2px solid var(--flat-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mission.ok { box-shadow: 0 0 0 4px var(--gold) !important; }
/* ③ 吹き出し */
.bubble.say-buddy { background: var(--c-white); border: 4px solid var(--bc); box-shadow: 0 8px 18px rgba(30,40,80,.14); }
.bubble.say-buddy::after { background: var(--c-white); border-right: 4px solid var(--bc); border-bottom: 4px solid var(--bc); bottom: -16px; }
/* ⑥ 4歳 */
.young .dock .base, .k4 .dock .base { width: 108px; height: 108px; }
/* UI-76 を ほかの画面にも（R8）：白い小さいボタン＝①、ずかんの カード（押せない）＝② */
.btn.white { --c: #ffe6cc; --cl: #fffaf3; --cd: var(--press-edge); }
.dx { box-shadow: none !important; border: 2px solid #efe4d8; }
.dx.rare { border-color: var(--gold); }

/* ==== 台帳 #197 タイトルのボタンの ふちが ギザギザ（2026-10-13 本人「ボタンギザギザ？」）
   参考：WebKit の不具合（角の丸い物に overflow:hidden＋拡大の動き → 角が ギザギザ）・Webflow の解決例（重なりの層を 1つにする・translateZ）
   原因：白いふち（border）・内側の光（inset）・下の厚み・外の光の輪 が それぞれ ちがう曲線で 重なり、角に 段が できていた
   → ふちは「影の広がり（spread）」で描き、厚み・外の輪も 同じ丸で 外へ重ねる。内側の光は 背景の色の変化で。はみ出しを かくす所は 自分の層に分ける */
.tap-start { border: none; isolation: isolate; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* 主な 行動と 同じ 作りに そろえる（UI-91①・見直し役 #380）：同じ 色の こい ふち＋上の つや＋白字に こげ茶の ふち取り。光が 走る 動きは 残す */
  border: 4px solid var(--c-orange-edge) !important; color: var(--c-white);
  background: radial-gradient(140% 80% at 50% -14%, var(--c-white-40) 0 45%, var(--c-white-0) 46%), linear-gradient(180deg, #ffb257 0%, var(--cta) 55%, #f26a1a 100%);
  box-shadow: 0 10px 0 var(--c-orange-edge), 0 18px 34px rgba(0,0,0,.3);
  text-shadow: 2px 0 0 var(--c-outline-brown), -2px 0 0 var(--c-outline-brown), 0 2px 0 var(--c-outline-brown), 0 -2px 0 var(--c-outline-brown), 1.5px 1.5px 0 var(--c-outline-brown), -1.5px 1.5px 0 var(--c-outline-brown), 1.5px -1.5px 0 var(--c-outline-brown), -1.5px -1.5px 0 var(--c-outline-brown), 0 4px 0 var(--c-outline-brown); }
.tap-start::after { border-radius: inherit; }
@keyframes tapbounce { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
/* 台帳 #199 ボタンの まわりの とうめいな ふちが ずれる（2026-10-13 本人「透明なふち？もズレてる…ズレはぜったいにNG」）
   原因：ぼかした影を 下へ 18px ずらしていたので、下だけ とうめいな ふちが はみ出して ずれて見えた（前の版は 光の輪も 重なっていた）
   → とうめいな物は 置かない。ふち（白）と厚み（茶）だけ、同じ丸で 重ねる。影は 厚みの すぐ下に 小さく */
.tap-start { box-shadow: 0 0 0 6px var(--c-white), 0 10px 0 6px var(--c-orange-edge), 0 14px 10px 6px rgba(0,0,0,.18) !important; }

/* ==== 台帳 #201 ホームの 見た目のズレ（2026-10-13 本人「見た目のズレがすごい」：時計の札と ミッションが 重なる・金の ふちが 二重・ぼうけんの とうめいな輪）
   原因①：右の列を 上下の真ん中に そろえていて、中身（654px）が 列（562px）より 高いと 上へ はみ出し、時計の札に 重なった
   → 真ん中そろえは「はみ出さない時だけ」（safe center）。大きいボタン2つは 列の高さに合わせて 縮む（112〜170px）
   原因②：たっせいの 金の輪（外へ4px）と 白いふち（2px）が 別の線で 二重に見えた → ふちの色を 金に変えるだけ（線は1本）
   原因③：ぼうけんボタンに 光の輪（とうめい 8px）が 付いていた → 消す（R13） */
.lobby-right { justify-content: safe center !important; gap: 16px !important; }
.lobby-right .modes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.lobby-right .modes .mode-card { flex: 1 1 0; min-height: 112px !important; max-height: 170px; height: auto; }
.mission.ok { box-shadow: none !important; border: 3px solid var(--gold) !important; }
.m-adv { box-shadow: inset 0 4px 0 var(--c-white-45), 0 9px 0 var(--cd), var(--drop) !important; animation: none; }

/* ==== 台帳 #202 とうめいな輪・ずれた ふちを 全部なくす（2026-10-13 本人「透明な背景？もズレてる」「何回も言ってます」・R13）
   原因：下に 厚みの ある物に、面だけを囲む とうめいな輪を 付けていたので、輪が 物（面＋厚み）と ずれて見えた
   きまり：①選んだ しるし＝金の ふちを「面」と「厚み」の 両方に 同じ太さで（0 0 0 Npx と 0 厚み 0 Npx を 重ねる）。とうめいに しない
          ②動いて 気づかせる時は 輪を 広げず、物ごと 少し 大きく する */
.pt-card.on { box-shadow: 0 0 0 5px var(--gold), 0 8px 0 5px var(--gold-d), var(--drop) !important; }
.pl-card.chosen { box-shadow: 0 0 0 6px var(--gold), 0 10px 0 6px var(--gold-d), var(--drop) !important; }
.starter.on { box-shadow: 0 0 0 6px var(--gold), 0 10px 0 6px var(--gold-d), var(--drop) !important; }
@keyframes reveal { 50% { scale: 1.06; box-shadow: 0 0 0 5px var(--ok), 0 8px 0 5px var(--ok-d); } }
@keyframes nodepulse { 50% { scale: 1.12; } }
@keyframes sayring { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes tgtpulse { 40% { transform: scale(1.25); } }

/* ==== 台帳 #203 ずれ・重なりを 全部の画面で（2026-10-13 本人「ズレやレイヤーの重なりなども気になる」「No.1の表現もちょっとチープ」「まず調べる」）
   参考：WebKit の不具合 158807（角の丸い物に 背景のぼかし → 角に ずれた跡）／30 seconds of code・Nicolas Gallagher（吹き出しの しっぽ＝ふちの三角＋白い三角）／ポケモンGO の図鑑（番号は 色の札・未発見も 番号＋シルエット）
   ① 背景のぼかし（backdrop-filter）を やめ、白に近い色で ぬる（ずれる 跡が 出ない）
   ② 丸いボタンの 内側の 白い三日月（inset）を やめる（ずれた ふちに 見える）。明るさは 面の色の変化で
   ③ ずかんの タブは 半とうめい（opacity）を やめ、うすい色で ぬる（ふちと 色が 重なって 二重に見えた）
   ④ 吹き出しの しっぽは 三角2つで（ふちと 白が ぴったり つながる）
   ⑤ ずかんの 番号は シリーズの色の 札に */
.pill, .topbar .hearts, .lobby-right .goal.mission, .stage-buddy .grow-box { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.88) !important; border: 2px solid var(--c-white); }
.round, .dock .base, .stage-buddy .swap { box-shadow: 0 6px 0 var(--press-edge), 0 10px 16px rgba(120,70,20,.16) !important; }
.round:active, .dock button:active .base, .stage-buddy .swap:active { box-shadow: 0 1px 0 var(--press-edge) !important; }
.round.speak-btn { box-shadow: 0 6px 0 #7fb6e0, 0 10px 16px rgba(40,90,140,.2) !important; }
.dex-folders button { opacity: 1 !important; background: color-mix(in srgb, var(--sc) 55%, var(--c-white)) !important; }
.dex-folders button.on { background: var(--sc) !important; }
.bubble.say-buddy::after, .bubble.say-buddy::before { content: ""; position: absolute; left: 50%; width: 0; height: 0; background: none; border-radius: 0; transform: translateX(-50%); border-style: solid; border-color: transparent; }
.bubble.say-buddy::before { bottom: -22px; border-width: 22px 18px 0; border-top-color: var(--bc); }
.bubble.say-buddy::after { bottom: -15px; border-width: 16px 13px 0; border-top-color: var(--c-white); }
.dx-no { left: 12px; top: 10px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sc, var(--c-ink-sub)) 85%, var(--c-black)); color: var(--c-white); font: 900 15px var(--font-logo); letter-spacing: .02em; }
.dx.none .dx-no { background: #b9aca2; }
/* しっぽの位置（計算）：箱の内側の線を 0 とすると、外の ふちは 4px 下。ふちの三角＝4px から 下へ 22px（先は 26px）。
   白い三角＝0 から 始めて（ふちを ふさぐ）、先は 26 − 4÷sin(39°)≒19.7px（ふちの太さが しっぽの 斜めでも 4px に なる） */
.bubble.say-buddy::before { bottom: -26px; border-width: 22px 18px 0; }
.bubble.say-buddy::after { bottom: -19.7px; border-width: 19.7px 16.1px 0; }
.dex-folders button:not(.on) { color: color-mix(in srgb, var(--sc) 45%, #2a1c14); text-shadow: none; }
.dex-folders button:not(.on) small { background: rgba(255,255,255,.6); }

/* ==== 台帳 #206 きょうのミッションを 作り直す（2026-10-13 本人「ほかと比べて チープ・テイストが合わない」）
   参考：Game Developer「Clearly and Considerately UX Designing of Quest」（1つのミッション＝1枚：アイコン・やること・進み・ごほうびを 1か所に）、
         Duolingo（クエストの しるしは 宝箱）、ポケモンGO の リサーチ（上に 進みのバー）
   ・左に 立体の 宝箱（ほかの 大きいボタンの 絵と 同じ テイスト）／真ん中に 見出し・やること・太い進みのバー／右に ごほうび（コインの絵＋10）
   ・4歳の 丸は 平らな 黄色の丸を やめ、立体の コインの絵（まだの分は うすく） */
.lobby-right .goal.mission { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 12px 20px 12px 14px !important; border-radius: 26px; }
.mission .ms-chest { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(120,70,20,.25)); }
.mission .ms-body { display: grid; gap: 6px; min-width: 0; }
.mission .ms-ttl { font: 900 18px var(--font-logo); color: var(--head-d); }
.mission .ms-what { font: 900 22px var(--font-logo); color: var(--ink); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.mission .ms-what img { width: 34px; height: 34px; object-fit: contain; filter: grayscale(1) opacity(.3); }
.mission .ms-what img.on { filter: drop-shadow(0 2px 2px rgba(150,100,0,.3)); }
.mission .ms-bar { height: 22px; border-radius: 999px; background: #e9dfd3; box-shadow: inset 0 2px 3px rgba(107,74,58,.18); }
.mission .ms-bar i { background: linear-gradient(180deg, #a8ec8f, #4cc35f 60%, #38a84c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.mission .ms-bar span { font: 900 15px var(--font-logo); }
.mission .ms-get { display: grid; justify-items: center; gap: 0; }
.mission .ms-get img { width: 40px; height: 40px; }
.mission .ms-get b { font: 900 24px/1 var(--font-logo); color: var(--ink); }
.mission .ms-done { padding: 8px 12px; border-radius: 14px; background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: var(--ink) !important; font-size: 18px !important; rotate: -6deg; }
.mission.ok .ms-chest { animation: chestbob 1.6s ease-in-out infinite; }
@keyframes chestbob { 50% { translate: 0 -4px; } }
@media (orientation: landscape) and (max-height: 820px) { .mission .ms-chest { width: 62px; height: 62px; } .mission .ms-what { font-size: 19px; } .mission .ms-what img { width: 28px; height: 28px; } }

/* ==== 台帳 #207 ごほうびの コインの バーの 長さが バラバラ（2026-10-13 本人）
   参考：GTK の進みのバー（数字は 同じ幅の数字で・桁で ずれない）、表の 数字の列は 幅を決めて 右そろえ
   原因：右の「あと △まい」の列が 数の 桁（32・172・412）で 幅が かわり、その分 バーが 短くなっていた
   → 右の列は 1番 広い時の 幅で 固定（右そろえ）。数字は 同じ幅の数字（tabular-nums）。バーは 全部 同じ長さ */
.rw-item { grid-template-columns: 72px minmax(0, 1fr) 248px !important; }
.rw-left { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.rw-left b, .rw-bar span { font-variant-numeric: tabular-nums; }
.rw-item .rw-go, .rw-item .rw-wait { justify-self: end; }
@media (orientation: landscape) and (max-height: 820px), (max-width: 1100px) { .rw-item { grid-template-columns: 60px minmax(0, 1fr) 236px !important; } }  /* コイン＋「こうかんする！」が 入る 幅（#380） */
@media (orientation: portrait) { .rw-item { grid-template-columns: 60px minmax(0, 1fr) 236px !important; } }

/* ==== 台帳 #208 ごほうびの 2本の帯の 位置（2026-10-13 本人「いまのコイン や できるもの の 帯の位置の 再考は まだ？」）
   参考：flex/grid の stretch（ならんだ カードは 同じ高さに）・Bootstrap の Card group（上と下を そろえる）・Harvard デザインシステム（ならべる時は 列の上を そろえる）
   原因：2つの枠を「真ん中どうし」で そろえていたので、高さの ちがう 枠の 上の線（＝帯）が ずれていた
   → 2つの枠は 同じ高さ（上も下も そろう）。帯は 同じ高さに ならぶ。コインは 左の枠の 中で 上下の真ん中。かたまり全体は 画面の 見た目の真ん中（#183） */
.rw-layout { align-items: stretch !important; }
.rw-bank { justify-content: center; padding-top: 40px !important; padding-bottom: 24px !important; }
/* 「こうかん する！」が 右の列（210px）より 広く、バーに 重なっていた → ボタンは 列の 幅の中に 収める（字は fitChoices と同じく 小さく） */
.rw-item .rw-go { width: 100%; min-width: 0; padding: 0 12px; font-size: 24px; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 820px), (max-width: 1100px) { .rw-item .rw-go { font-size: 20px; } }

/* ==== TY-L 見出しの 段（台帳 #209・2026-10-13 本人「ほかも使っていると思うので 全体を見てから ルールを決めて 見直す。使い分けるか パターンを増やすか 調べから」）
   参考：Layer Lab「2D Ribbon Pack」（リボンは 面・モードの 名前＝画面に1つ）、eBay Playbook「Section header」（枠の中の区切りは タイトル＋線）、
         SAP「Title hierarchy」（見た目の 強さと 段を 混ぜない）、Skedulo の 文字の段（段ごとに 大きさを 決める）
   段1 画面の名前（1画面に1つ）：移動して見る画面＝上の帯（.topbar .h1）／選ぶ画面＝布のリボン（.ribbon）／お祝い・結果＝真ん中の 大きい字
   段2 枠の中の 区切り：枠の中の 左上に「藍の字 22px＋下に 細い線」。ぬった 札は やめる（押せる ボタンに 見えるため・UI-76）
   段3 カードの名前：小さい 藍の字 18px（ミッション など）
   タブ：切りかえる 時だけ（ずかん） */
.panel > .h2tab { position: static !important; translate: none !important; left: auto !important; top: auto !important; align-self: stretch; justify-self: stretch;
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--head-d) !important; text-shadow: none !important;
  font: 900 22px var(--font-logo) !important; padding: 0 0 10px !important; margin: 0 0 12px !important; border-bottom: 2px solid #eee3d6 !important; text-align: left; width: auto; }
.rw-bank, .rw-list, .rs-panel, .rs-feel, .dex-panel { padding-top: 20px !important; }
.rw-bank { align-items: center; }
.rw-bank > .h2tab { width: 100%; }
.screen.rs > .rs-feel { flex-wrap: wrap !important; }
.screen.rs > .rs-feel > .h2tab { flex: 0 0 100%; }
.rw-bank { justify-content: flex-start !important; }
.rw-bank > .rw-coin { margin-top: auto; }
.rw-bank > .rw-unit { margin-bottom: auto; }
/* 結果の枠：見出しは 枠の 左の端から（段2）。中身の 2列は 真ん中（TY-K1）→ 外側に 余白の列を 置く */
.rs-panel { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr) !important; justify-content: stretch !important; column-gap: 32px !important; }
.rs-panel > .h2tab { grid-column: 1 / -1 !important; }
.rs-panel .rs-hero { grid-column: 2 !important; }
.rs-panel > :not(.h2tab):not(.rs-hero) { grid-column: 3 !important; }
@media (orientation: portrait) { .rs-panel { grid-template-columns: minmax(0, 1fr) !important; } .rs-panel .rs-hero, .rs-panel > :not(.h2tab):not(.rs-hero) { grid-column: 1 !important; } }
/* 見出しの段が 入った分、結果の画面は 詰める（タイトルが 上で 切れないように） */
.screen.rs .panel > .h2tab { font-size: 19px !important; padding-bottom: 6px !important; margin-bottom: 6px !important; }
.rs-panel, .screen.rs > .rs-feel { padding-top: 14px !important; }

/* ==== 台帳 #210 ミッションの 見出しと「たっせい」が チープ（2026-10-13 本人「調べました？」→ 調べずに 決めていた）
   参考：はなまる（日本の 学習の「できた」の しるし・赤ペン先生も × でなく はなまる・HugKum）、
         Game Developer の クエスト UX（達成は ひと目で わかる 形の しるし＋もらった ごほうびを 隣に）
   ・たっせい＝赤い はなまるの はんこを「ポン」と 押す（0.35秒）。ななめの 黄色い 札は やめる
   ・見出し＝ずかん・ごほうびの ラベルと 同じ「白い字＋濃い ふち」（ゲームの 文字に そろえる） */
.mission .ms-ttl { color: var(--c-white); font: 900 21px var(--font-logo); text-shadow: 2.5px 0 0 var(--line), -2.5px 0 0 var(--line), 0 2.5px 0 var(--line), 0 -2.5px 0 var(--line), 1.8px 1.8px 0 var(--line), -1.8px 1.8px 0 var(--line), 1.8px -1.8px 0 var(--line), -1.8px -1.8px 0 var(--line), 0 4px 0 var(--line); letter-spacing: .02em; }
.mission .ms-get { position: relative; min-width: 96px; }
.mission .hanamaru { width: 92px; height: 92px; display: block; animation: stamp .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp { 0% { scale: 1.8; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.mission .ms-got { position: absolute; left: 50%; bottom: -4px; translate: -50% 0; display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; background: var(--c-white); font: 900 16px var(--font-logo); color: var(--ink); white-space: nowrap; box-shadow: 0 2px 6px var(--c-black-12); }
.mission .ms-got img { width: 20px !important; height: 20px !important; }
.mission .ms-got small { font-size: 12px; margin-left: 2px; }
.mission.ok { background: linear-gradient(180deg, #fffdf3, #fff5d6) !important; }
/* ==== 台帳 #212 ミッションの 余白・はなまる（2026-10-13 本人「余白確認」「花丸の表現が ちょっと違う」）
   参考：8px の格子（カードの内側 16〜24px・見出し→本文 8px・アイコン→字 8px／wikidocs・Incode）、花丸（花の形の丸・途切れない円／辞書・Precious）
   ・はなまる＝まん中の うずまき＋まわりを 一筆で つながる 花びら（離れた 花びらの 絵を やめる）
   ・右の列は「はなまる→その下に +10 もらった」を 上から順に（重ねない）。枠の 内側は 16px／20px、見出し→コイン→バーは 8px ずつ */
.lobby-right .goal.mission { padding: 16px 20px !important; column-gap: 16px !important; }
.mission .ms-body { gap: 8px !important; }
.mission .ms-get { display: flex !important; flex-direction: column; align-items: center; gap: 4px; min-width: 104px; }
.mission .hanamaru { width: 68px; height: 68px; }
.mission .ms-got { position: static !important; translate: none !important; }
.mission .hanamaru { width: 56px; height: 56px; }
.mission .ms-got { font-size: 14px !important; padding: 1px 8px !important; }
.mission .ms-get { align-self: center !important; justify-content: center; }
.mission .hanamaru { margin: 0 !important; flex: none; }

/* ==== UI-77 線の 太さは 2段だけ（台帳 #213・2026-10-13 本人「吹き出しと ミッションの 枠線、あえて 太さを 変えている？ルールは 合っている？まず 調べ」→ 決めずに ばらばらだった：2・3・4・5・6px）
   参考：Atlassian「Border」（太さ＝強さ・色＝意味。ふだん と 選んだ の 2つ）、CEM の 線の決まり・Hightouch（中途半端な 太さを 作らない・状態で 太さを 変えると ずれる → 外側の 影で 足す）、Unity（画面じゅう 同じ 線の重さ）
   ふち＝2px 白（押せない 札・カード・進み）
   しるし＝4px 色（だれが話す＝キャラの色／選んだ・たっせい・いろちがい＝金）。太さは 同じ・色だけ 変える
   状態が 変わる物は 2px の ふちの 外に 2px を 影で 足す（中身が ずれない） */
:root { --line-w: 2px; --mark-w: 4px; }
.mission.ok { border: 2px solid var(--gold) !important; box-shadow: 0 0 0 2px var(--gold) !important; }
.rw-item.ok { box-shadow: 0 0 0 var(--mark-w) var(--gold) !important; }
.dx.rare { border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold) !important; }
.pt-card.on { box-shadow: 0 0 0 var(--mark-w) var(--gold), 0 8px 0 var(--mark-w) var(--gold-d), var(--drop) !important; }
.pl-card.chosen, .starter.on { box-shadow: 0 0 0 var(--mark-w) var(--gold), 0 10px 0 var(--mark-w) var(--gold-d), var(--drop) !important; }
.stage-buddy .swap { border: none !important; }
/* UI-77 の つづき：大きい 入れ物（舞台・パネル・マップ・大きい カード）の 白い わく＝6px にそろえる（5px を なくす）。ヒントの 吹き出しも しるし＝4px */
:root { --frame-w: 6px; }
.pt-card { border-width: var(--frame-w) !important; }
.dex-folders button { border-width: var(--frame-w) var(--frame-w) 0 !important; }
.hint-say, .bubble.hint-say { border-width: var(--mark-w) !important; }
/* ヒントの 吹き出しの しっぽも 三角2つ（ふち 4px が しっぽまで つながる・UI-77・#204 と 同じ 作り方） */
.hint-say::before, .hint-say::after { content: ""; position: absolute; width: 0; height: 0; background: none !important; clip-path: none !important; border-style: solid; border-color: transparent; }
.hint-say::before { left: 40px; bottom: -26px; border-width: 22px 18px 0; border-top-color: var(--gold); }
.hint-say::after { left: 41.9px; bottom: -20.2px; border-width: 20.2px 16.1px 0; border-top-color: #fffdf3; }
.hint-say.side::before { left: -26px; bottom: 22px; border-width: 18px 22px 18px 0; border-color: transparent var(--gold) transparent transparent; }
.hint-say.side::after { left: -20.2px; bottom: 23.9px; border-width: 16.1px 20.2px 16.1px 0; border-color: transparent #fffdf3 transparent transparent; }

/* ==== 台帳 #215 ミッションの わくの 余白・大きさ・左右の バランス（2026-10-13 本人）
   参考：Android の Card（左の しるしと 右の しるしは 同じ大きさ・どちらも 56dp）、HeroUI の Item card（まん中が のこりを うめる）、Riverty の List item（まわり 16px・両はしは 同じ 上下の まん中）
   ・左の 宝箱と 右の はなまる（または コイン）を 同じ 72px・同じ 上下の まん中に
   ・「+10」は はなまるの 右下に 重なる 小さい しるし（右の列が 縦に のびない）
   ・まわりの 余白は 16px で そろえる */
.lobby-right .goal.mission { padding: 16px !important; column-gap: 16px !important; grid-template-columns: 72px minmax(0, 1fr) 88px !important; }
.mission .ms-chest { width: 72px !important; height: 72px !important; }
.mission .ms-get { position: relative; width: 88px; height: 72px; min-width: 0 !important; display: grid !important; place-items: center; align-self: center !important; }
.mission .hanamaru { width: 72px !important; height: 72px !important; }
.mission .ms-got { position: absolute !important; right: -6px; bottom: -6px; left: auto !important; translate: none !important; padding: 2px 8px !important; font-size: 15px !important; }
.mission .ms-got small { display: none; }
.mission .ms-get > img:not(.hanamaru) { width: 44px !important; height: 44px !important; }
.mission .ms-get > b { font-size: 22px !important; }
.mission .ms-get:not(:has(.hanamaru)) { display: flex !important; flex-direction: column; justify-content: center; gap: 0; }
@media (orientation: landscape) and (max-height: 820px) { .lobby-right .goal.mission { grid-template-columns: 64px minmax(0, 1fr) 80px !important; padding: 14px 16px !important; } .mission .ms-chest, .mission .hanamaru { width: 64px !important; height: 64px !important; } .mission .ms-get { width: 80px; height: 64px; } }
.mission .ms-got { right: 0 !important; bottom: -2px !important; }

/* ==== 台帳 #216 吹き出しの ふちの 色（2026-10-13 本人「枠線は ピンクが あんまり 合わない・色や 表現の 見直し・まず調べる」）
   参考：まんがの 吹き出し（形と 線は いつも 同じ・だれが 話すかは しっぽの 向き／llamagen・BnF）、Game Accessibility Guidelines（読みやすい 無地の 背景・はっきりした ふち）
   前：キャラごとに ふちの 色を 変えていた（ピンク・緑…）→ 画面の ほかの 色と 合わない
   → どのキャラも「白い 面＋ゲームの 字と 同じ こげ茶の ふち 4px」。しっぽは キャラへ（UI-77 しるし＝4px は そのまま） */
.bubble.say-buddy { --bc: var(--line) !important; }
.mission .ms-got { right: -4px !important; bottom: -8px !important; padding: 1px 6px !important; font-size: 13px !important; }
.mission .ms-got img { width: 16px !important; height: 16px !important; }

/* ==== UI-78 余白の 段と まとまり（台帳 #217・2026-10-13 本人「ボタンとボタンの余白・ボタンと文字の間の余白・グルーピングを意識して」）
   参考：Blake Crosley「5つの余白の決め方」（まとまりの 中は せまく・まとまりの 間は 広く＝近さの 法則）、
         Prizma(Incode)・Stefan Imhoff・Queensland Health の 余白の段（アイコン→字 4〜8／まとまりの中 16／まとまりの間 32／区切り 48）
   段：--sp-in 8px（アイコン→字・見出し→中身）／--sp-group 16px（まとまりの中）／--sp-between 32px（まとまりの間）／--sp-section 48px
   ホームの 右の列＝3つの まとまり：①ミッション（知らせ）②大きい ボタン2つ（主な行き先）③ずかん・ごほうび（わきの 行き先） */
:root { --sp-in: 8px; --sp-group: 16px; --sp-between: 32px; --sp-section: 48px; }
.lobby-right { gap: 0 !important; }
.lobby-right .goal.mission { margin: 0 0 var(--sp-between) !important; }
.lobby-right .modes { gap: var(--sp-group) !important; padding-top: 0 !important; }
.lobby-right .dock { margin-top: var(--sp-between) !important; gap: 24px !important; }
.dock button { gap: var(--sp-in) !important; }
@media (orientation: landscape) and (max-height: 820px) { .lobby-right .goal.mission { margin-bottom: 24px !important; } .lobby-right .dock { margin-top: 24px !important; } }

/* ==== 台帳 #218 吹き出しは 線を やめて ぬりに（2026-10-13 本人「枠線は やめたい・うすい色の ぬり・灰色か 水色・吹き出しっぽく・まず調べる」）
   参考：iMessage（相手の 吹き出しは うすい 灰色の ぬり・ふちなし）、CometChat の チャットの作り方（ぬりで 背景と 分ける・字との 差は WCAG 4.5:1 以上）、Uxcel・InsertChat（角は 丸く）
   ・キャラの 吹き出し＝うすい 水色がかった 灰色（#e8f0f8）の ぬり・ふちなし。空の上でも 分かるように やわらかい 影を1つ
   ・しっぽも 同じ色の 三角1つ
   ・ヒントの 吹き出しも 同じ 作り（うすい 黄色の ぬり・ふちなし）→ UI-77 の「しるし 4px」から 吹き出しを 外す */
.bubble.say-buddy { background: #e8f0f8 !important; border: none !important; box-shadow: 0 6px 16px rgba(30,60,110,.16) !important; }
.bubble.say-buddy::before { display: none !important; }
.bubble.say-buddy::after { bottom: -18px !important; border-width: 18px 15px 0 !important; border-top-color: #e8f0f8 !important; }
.hint-say { background: #fff3c4 !important; border: none !important; }
.hint-say::before { display: none !important; }
.hint-say::after { left: 42px !important; bottom: -18px !important; border-width: 18px 15px 0 !important; border-top-color: #fff3c4 !important; }
.hint-say.side::after { left: -18px !important; bottom: 24px !important; border-width: 15px 18px 15px 0 !important; border-color: transparent #fff3c4 transparent transparent !important; }
.title-logo img { height: auto; aspect-ratio: 1178 / 660; }

/* ==== UI-79 面の段（台帳 #220・2026-10-13 本人「背景とキャラの名前の背景が なじんで おかしい・ルール確認・カラーリング・全体」）
   参考：Material 3「Tone-based surface color」（入れ物の中の 入れ物は 段を 1つ 変える・同じ色は とけこむ）、nqui の Elevation（重ねは 2段まで・同じ向きに 変える）、Shopify Polaris
   段0＝背景の 絵／段1＝白い 枠（パネル・カード）／段2＝枠の中の 札・行＝ひかえめな 茶色がかった 灰色（--inset）。明るい 画面では 中ほど 少し 暗く（向きを そろえる）
   段2 は 押せない 物なので 厚み・影 なし（UI-76 ②） */
:root { --inset: #f2ebe3; }
.rs-name { background: var(--inset) !important; box-shadow: none !important; }
.rs-stat, .rs-get, .rw-item:not(.ok) { background: var(--inset) !important; }

/* ==== 台帳 #221 結果の ボタンの 下が 切れる（2026-10-13 本人「ボタン下切れてる・ほかもないか」）
   参考：はみ出しを かくす 入れ物は 影の 分の 余白を とる（Bricks・Webflow の フォーラム）、押せない ボタン（UX Movement・Mozilla：半とうめいは 字が 読みにくく 背景が すける → 同じ 色の うすい ぬり）
   原因：結果の 画面の 箱が はみ出しを かくしていて、ボタンの 下の 厚み（10px）が 箱の 下から 出て 切れていた
   → 画面の 下に 厚みの 分の 余白を とる。押せない 間の ボタンは とうめいに せず、同じ オレンジの うすい ぬり */
.screen.rs { padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
.screen.rs .rs-go { padding-bottom: 12px; }
.rs-go .btn:disabled, .starter-go .btn:disabled { opacity: 1 !important; filter: none !important; --c: #f5c79a; --cl: #fbdcbc; --cd: #dcae84; color: var(--c-white-95); text-shadow: 0 2px 0 #d29a6a; }

/* ==== 台帳 #222 ミッションの 作りを 組みなおす（2026-10-13 本人「右の余白がポカン」「ただ穴埋めでなく 調べて 構成を 確認して 改善」）
   参考：Duolingo の クエスト（たっせいで 宝箱が もらえる＝宝箱は ごほうび そのもの）、クエストの 行の 作り（見出し・やること・ごほうびは 右上・進みは 下／Free Quests GUI・Game Creator）
   前：左に 宝箱・右に コイン＋10 と、ごほうびの しるしが 2つ（意味が 重なる）＋バーの 後ろが 空く
   後：左上＝見出し＋やること／右上＝ごほうび（宝箱＋「+10」の 札。たっせいで はなまるの はんこを 重ねる）／下＝はばいっぱいの 進みのバー */
.lobby-right .goal.mission { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto; align-items: center; column-gap: 16px !important; row-gap: 10px; padding: 14px 18px 16px !important; }
.mission .ms-body { grid-column: 1; grid-row: 1; gap: 6px !important; }
.mission .ms-get { grid-column: 2; grid-row: 1; position: relative; width: 84px !important; height: 72px !important; display: block !important; min-width: 0 !important; }
.mission .ms-get .ms-chest { position: absolute; inset: 0 6px 6px; width: 72px !important; height: 66px !important; object-fit: contain; }
.mission .ms-get .hanamaru { position: absolute; right: -6px; top: -10px; width: 56px !important; height: 56px !important; animation: stamp .35s cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 1px 0 var(--c-white)) drop-shadow(0 0 2px var(--c-white)); }
.mission .ms-got { position: absolute !important; left: 50% !important; right: auto !important; bottom: -4px !important; translate: -50% 0 !important; padding: 1px 8px !important; font-size: 14px !important; }
.mission .ms-bar { grid-column: 1 / -1; grid-row: 2; }
.mission .ms-what img { width: 30px; height: 30px; }
.mission .ms-get { width: 96px !important; height: 80px !important; }
.mission .ms-get .ms-chest { inset: 0 8px 8px !important; width: 80px !important; height: 72px !important; }
.mission .ms-get .hanamaru { right: 0 !important; top: 0 !important; width: 50px !important; height: 50px !important; }
@media (orientation: landscape) and (max-height: 820px) { .mission .ms-get { width: 88px !important; height: 72px !important; } .mission .ms-get .ms-chest { width: 72px !important; height: 64px !important; } }
.mission .ms-get > img.ms-chest { width: 80px !important; height: 72px !important; }
@media (orientation: landscape) and (max-height: 820px) { .mission .ms-get > img.ms-chest { width: 72px !important; height: 64px !important; } }

/* ==== 台帳 #223 ミッションの まん中が 空く（2026-10-13 本人「もっと空いておかしい・本当に調べた？」→ 文章だけで 実物の 画面を 見ていなかった）
   参考（実物の画面）：Duolingo 公式ブログ「Elevating craft: How we refreshed our core tabs」の クエスト画面
   ＝ 上に やること、下の 行に「はば いっぱいの 進みのバー」と その すぐ右に 宝箱。数は バーの中。右に 別の 列を 作らない
   → 見出し／やること／［バー＋宝箱］の 3行。宝箱の 下に 小さく +10。たっせいで 宝箱に はなまるの はんこ */
.lobby-right .goal.mission { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto; row-gap: 6px !important; padding: 14px 18px !important; align-items: stretch; }
.mission .ms-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; column-gap: 12px; }
.mission .ms-bar { grid-column: auto !important; grid-row: auto !important; height: 24px !important; }
.mission .ms-prize { position: relative; width: 64px; height: 56px; }
.mission .ms-prize > img.ms-chest { position: absolute; left: 4px; top: 0; width: 56px !important; height: 50px !important; object-fit: contain; }
.mission .ms-prize > img.hanamaru { position: absolute; right: -8px; top: -12px; width: 40px !important; height: 40px !important; animation: stamp .35s cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 0 2px var(--c-white)); }
.mission .ms-prize > .ms-got { position: absolute !important; left: 50% !important; right: auto !important; bottom: -6px !important; translate: -50% 0 !important; padding: 0 6px !important; font-size: 13px !important; }
.mission .ms-prize > .ms-got img { width: 14px !important; height: 14px !important; }

/* ==== 台帳 #224 iPad で 文の スペースが 広い（2026-10-13 本人「ふきだしの文字 またスペースあいてる？ルールは守って」）
   原因：WebKit（iPad の Safari）は、span の中の スペースに マイナスの word-spacing を かけても 効かない／幅を まちがえる（WebKit Bugzilla 4695・12233）
         → パソコンでは 細いのに、iPad では もとの 広い スペースの ままだった
   → スペースの 字は 幅0（改行できる 所としては のこす）。見える すき間は、前の ことばの かたまり（.ph）の 右に 文＝0.3文字分・見出し/ボタン＝0（TY-E7）。
     ブラウザの ちがいが 出ない（字の 大きさ×0.3 だけで 決まる） */
.wsp { font-size: 0 !important; word-spacing: 0 !important; letter-spacing: 0 !important; }
.ph:has(+ .wsp:not([data-br])) { margin-right: .3em; }
.wsp:not([data-br]) + .ph { margin-left: 0; }

/* ==== 台帳 #225 ミッションが 高すぎ・ずかん/ごほうびが 青い ボタンに 重なる（2026-10-13 本人の iPad の写真）
   原因：①ミッションを 3段（見出し／やること／バー＋宝箱）に 積んで 162px ②大きい ボタンに「112px より 小さく しない」下限 → 入らない 分が 下の 列に 重なった
   参考：Ahmad Shadeed「Responsive design for height」・Sitepoint「縦の media query」（低い 画面では わきの 物を つめて 主な ボタンを 守る）、
         iPad の Safari の 見える 高さは ツールバーで 変わる（svh・dvh／Ahmad Shadeed「New viewport units」）→ 高さ 700〜760 を 全部 測る
   → ミッションは 2段：［見出し＋やること］／［バー＋宝箱（＋10 を 横に）］ で 約 96px。大きい ボタンは 下限を 96px に。列が はみ出さない */
.lobby-right .goal.mission { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto; row-gap: 8px !important; padding: 12px 18px !important; }
.mission .ms-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mission .ms-top .ms-what { white-space: nowrap; overflow: visible; }
.mission .ms-row { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 10px !important; }
.mission .ms-prize { display: flex !important; align-items: center; gap: 4px; width: auto !important; height: 44px !important; position: relative; }
.mission .ms-prize > img.ms-chest { position: static !important; width: 46px !important; height: 42px !important; }
.mission .ms-prize > .ms-got { position: static !important; translate: none !important; font-size: 16px !important; padding: 2px 8px !important; }
.mission .ms-prize > img.hanamaru { left: 14px; right: auto !important; top: -10px !important; width: 36px !important; height: 36px !important; }
.lobby-right .modes .mode-card { min-height: 96px !important; }
.mission .ms-top .ms-what { flex: 1 1 auto; justify-content: flex-start !important; margin: 0 !important; }

/* ==== 台帳 #226 ずかん・ごほうびを 上の帯へ（2026-10-13 本人「上に追加したら？下にある意味は？」「あと6ぷんと同じ扱いに。ゲームのインタフェースを調べて」）
   参考：どうぶつの森 ポケットキャンプ（上の帯に 同じ形の 小さい 札が 横に ならぶ・ときどき 使う 入口は 上の 角／Julian Davis の 画面の 分析）、
         Roblox の トップバー（上の帯に メニューの ボタン）、Game UI の 解説（形は そろえ、押せる 方にだけ 沈む 手がかり／Pixune）、Khan Academy Kids（ライブラリーは 上の 角）
   ・時計の 札と 同じ 高さ・同じ 丸い 形・同じ 字の 大きさ。押せる 2つだけ 下に 4px の 厚み（--press-edge）と 押すと 沈む（UI-76 ①）
   ・下の 列（ずかん・ごほうびの 丸）は なくし、右の 列は ミッション＋大きい ボタン 2つ だけ */
.topbar .pill-btn { border: 2px solid var(--c-white); cursor: pointer; font: inherit; font-weight: 900; color: var(--ink); background: var(--c-white-92) !important;
  box-shadow: 0 4px 0 var(--press-edge) !important; transition: transform .08s, box-shadow .08s; }
.topbar .pill-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--press-edge) !important; }
.topbar .pill-btn + .pill-btn, .topbar .pill-btn + .pill { margin-left: 0; }
.topbar .pill-btn { font: 900 var(--t-label, 26px) var(--font-logo) !important; line-height: 1 !important; }

/* ==== 台帳 #227 ミッションを 冒険・ゲームと 同じ 並びに・でも 冒険・ゲームが いちばん 目立つ（2026-10-13 本人）
   参考：GameAnalytics（同じ 大きさ・並びは 同じ 大事さに 見える → 大きさ・色・コントラストで 差）、Packt（画面の いちばんの 目的＝あそびを 始める）、designsystems.surf（厚み・色・字を 組み合わせて 差）
   同じ：左に 絵（宝箱）・右に 字。絵の 列の まん中は 大きい ボタンの 絵と そろえる
   ちがい：高さ ひくい（約 92px）・白い 面（色を ぬらない）・厚み なし（押せない）・字 小さい */
.lobby-right .goal.mission { display: grid !important; grid-template-columns: 104px minmax(0, 1fr) !important; grid-template-rows: auto !important; align-items: center !important; column-gap: 12px !important; row-gap: 0 !important; padding: 10px 20px 10px 8px !important; }
.mission .ms-icon { position: relative; width: 104px; height: 72px; display: grid; place-items: center; }
.mission .ms-icon > img.ms-chest { position: static !important; width: 76px !important; height: 68px !important; object-fit: contain; }
.mission .ms-icon > img.hanamaru { position: absolute !important; right: 4px !important; left: auto !important; top: -6px !important; width: 40px !important; height: 40px !important; }
.mission .ms-body { display: grid !important; gap: 8px !important; min-width: 0; grid-column: auto !important; grid-row: auto !important; }
.mission .ms-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center; column-gap: 10px !important; }
.mission .ms-row .ms-got { position: static !important; translate: none !important; font-size: 16px !important; padding: 2px 10px !important; }
.mission .ms-row .ms-got img { width: 18px !important; height: 18px !important; }
.mission .ms-ttl { font-size: 18px !important; }
@media (orientation: landscape) and (max-width: 1100px) { .lobby-right .goal.mission { grid-template-columns: 88px minmax(0, 1fr) !important; } .mission .ms-icon { width: 88px; } }
/* 宝箱の まん中を 冒険・ゲームの 絵の まん中と そろえる（絵：左 28px・幅 140px／低い 横画面は 左 24px・幅 104px）
   参考（最新・評価の高い物）：Duolingo 公式ブログ 2026年1月「Elevating craft」（バー＋すぐ右に 宝箱）、Khan Academy Kids（App Store エディターズチョイス）、Kiddopia（Webby 2026 候補） */
.lobby-right .goal.mission { grid-template-columns: 140px minmax(0, 1fr) !important; padding-left: 28px !important; column-gap: 16px !important; }
.mission .ms-icon { width: 140px !important; }
@media (orientation: landscape) and (max-height: 720px) { .lobby-right .goal.mission { grid-template-columns: 104px minmax(0, 1fr) !important; padding-left: 24px !important; } .mission .ms-icon { width: 104px !important; } }
.mission .ms-top { flex-wrap: nowrap; min-width: 0; }
.mission .ms-top .ms-what img { width: 26px !important; height: 26px !important; }
.mission .ms-icon > img.hanamaru { top: 0 !important; right: 14px !important; width: 38px !important; height: 38px !important; }

/* ==== UI-82 ホームの グリッド（台帳 #228・2026-10-13 本人「ボタンの サイズ感や 見た目は 出す前に 検証・グリッド／バランスの デザインを 忘れずに」）
   参考：Emarsys の ダッシュボード（横に ならぶ 物は 同じ 高さ・上と 下の 端を そろえる）、SAP Fiori（Material 3）の 余白 24・8 きざみ、Android Canonical layouts（片方 固定・片方 のこり）
   ・上の帯 → 中身 ＝ 24px（列の 間と 同じ）。下は TY-H2 の 64px を のこす
   ・右の 列の 中身（ミッション＋大きい ボタン 2つ）の 下の 端を 左の 列（育ちの 枠）の 下の 端と そろえる → 大きい ボタンは のこりを 半分ずつ（上限 なし） */
.screen > .lobby { margin-top: 24px !important; column-gap: 24px !important; }
.lobby-right { justify-content: flex-start !important; }
.lobby-right .modes { flex: 1 1 auto !important; }
.lobby-right .modes .mode-card { flex: 1 1 0 !important; max-height: none !important; }
/* 縦の 画面では 上の 帯に 入りきらない（43px はみ出し）→ ずかん・ごほうびは 絵だけ（形・高さは 同じ）。参考：SAP Fiori の 上の帯（せまい 時は 大事な 順に 絵だけに） */
@media (orientation: portrait) { .topbar .pill-btn .pb-lbl { display: none; } .topbar .pill-btn { padding-left: 12px !important; padding-right: 12px !important; } }
/* 縦の 画面：右の 列（ミッション＋大きい ボタン）は 中身の 高さ ぶん とり、キャラの 場所が 縮む。大きい ボタンは ミッションより 高く（優先順位・#227）。下の 64px に 入れない（TY-H2） */
@media (orientation: portrait) {
  .screen > .lobby { grid-template-rows: minmax(0, 1fr) auto !important; }
  .lobby-right .modes { flex: none !important; }
  .lobby-right .modes .mode-card { flex: none !important; min-height: 132px !important; height: 132px; }
}
@media (orientation: portrait) { .lobby-right .modes .mode-card { min-height: 126px !important; height: 126px; } }
@media (orientation: portrait) { .lobby-right .modes.entries .mode-card .ico { width: 104px !important; height: 104px !important; left: 24px !important; } .lobby-right .modes.entries .mode-card { padding-left: 150px !important; } .lobby-right .goal.mission { grid-template-columns: 104px minmax(0, 1fr) !important; padding-left: 24px !important; } .mission .ms-icon { width: 104px !important; } }

/* ==== FD-20 4歳の 押せる 範囲を 2cm（約104pt）に 広げる（台帳 #232・2026-10-14 本人「押せる範囲だけ 2cm に 広げる」）
   参考：modern-css.com「Larger touch targets without changing element size」・a11y project（とうめいな 疑似要素を 外へ 広げる・見た目は 変えない）、NN/g（子どもは 2cm 角）
   ・4歳の 画面（.k4 ホーム・.young 遊び）の 押せる 物に、見た目より 外へ 広がる とうめいな 当たりを 付ける（104px に 足りない 分だけ） */
/* 音符（.rnote）は もともと 決まった 位置に 置く 物なので ここで 位置の きまりを 変えない（2026-10-14 リズムの 音符が 下に ずれた・台帳 #236） */
:is(.k4, .young) :is(.round, .pill-btn, .swap, .mode-card, .choice) { position: relative; }
:is(.k4, .young) :is(.round, .pill-btn, .swap, .choice, .rnote)::after { content: ""; position: absolute; z-index: 1;
  inset: min(-8px, calc((100% - 104px) / 2)) min(-8px, calc((100% - 104px) / 2)); border-radius: 999px; }
:is(.k4, .young) .topbar .round:not(.speak-btn)::after { inset: min(-8px, calc((100% - 104px) / 2)) !important; }

/* ==== 台帳 #233 ミッションの 宝箱の 左右の 余白（2026-10-14 本人「下の アイコンと 無理やり 合わせている・ミッションは ミッションなので ベストな 余白で」）
   参考：Square の デザインのきまり・KDE（枠の 中の 余白は 上下左右 同じ）、Jakub Krehel「Optical Alignment」（余白は 絵の 見えている 端から 測る）、Material の 一覧の 行（絵 → 字 16）
   → 大きい ボタンの 絵と そろえるのを やめる。宝箱は まわりの とうめいを 切った 絵（chest-trim）。見えている 端から 上下左右 16・字まで 16 */
.lobby-right .goal.mission { grid-template-columns: 64px minmax(0, 1fr) !important; padding: 16px !important; column-gap: 16px !important; }
.mission .ms-icon { width: 64px !important; height: auto !important; }
.mission .ms-icon > img.ms-chest { width: 64px !important; height: 60px !important; object-fit: contain; }
.mission .ms-icon > img.hanamaru { right: -10px !important; top: -10px !important; width: 34px !important; height: 34px !important; }
@media (orientation: landscape) and (max-height: 720px), (orientation: portrait) { .lobby-right .goal.mission { grid-template-columns: 64px minmax(0, 1fr) !important; padding-left: 16px !important; } .mission .ms-icon { width: 64px !important; } }

/* ==== 台帳 #234 アイコンの 影が iPad の Safari で 切れる（2026-10-14 本人「コンパス 影が 切れてる？ ほかも」）
   参考：WebKit 不具合 313665（Safari 26：translate で ずらした 物の drop-shadow が 切れる）・MaterialOS のアイコンのきまり（影は 箱の 中に 収める）
   → ①絵を ずらして 置かない（translate を やめ、margin:auto で まん中に 置く）②影が 入る 余白（20px）を 箱に 足す。見える 絵の 位置と 大きさは 前と 同じ */
.mode-card .ico { transform: none !important; translate: none !important; box-sizing: content-box !important; padding: 20px !important; }
.mode-card:active .ico { transform: none !important; scale: .94; }
.modes:not(.entries):not(.game-modes) .mode-card .ico { left: 0 !important; right: 0 !important; margin: -20px auto 0 !important; }
.modes.entries .mode-card .ico { top: 0 !important; bottom: 0 !important; margin: auto 0 auto -20px !important; }
.game-modes .mode-card .ico { margin: -20px -20px -16px !important; }

/* ==== 台帳 #235 ホームの 大きい ボタンの 絵と 字を 大きく（2026-10-14 本人「ボタンも 大きくなったので 文字と アイコンも もっと 大きく・バランスを 見て」）
   参考：Nuxeo（絵と 字の 比を そろえる）・Clash of Clans 2026 の 刷新（主役の ボタンは 絵も 字も いちばん 大きい）・FD-11（大きさの 段は 3つ）・FD-31（字の 段は 3つ）
   → 横向き：絵 104 → 128（カードの 高さの 約7割）、題 28 → 32、説明 20 → 22。絵 → 字 は 24 のまま。縦向き（カード 126）は そのまま */
@media (orientation: landscape) {
  .lobby-right .modes.entries .mode-card .ico { width: 128px !important; height: 128px !important; left: 24px !important; }
  .lobby-right .modes.entries .mode-card { padding-left: 176px !important; font-size: 32px !important; }
  .lobby-right .modes.entries .mode-card .desc { font-size: 22px !important; }
}

/* ==== 台帳 #237 字の 間（分かち書き）が まだ 広い（2026-10-14 本人「文字と 文字の 間 まだ 直してない？」）
   参考：W3C JLReq（和文は ベタ組・語の 間は 伝統的に 四分＝.25字）・東京書籍 1・2年（文節で 分かち書き）
   iPad の 写真で 測ると 足した .3字 ＋ 字の 形の まわりの 余白で 約.38字 あいていた → 足す 間を .15字 に（見た目で 約 四分） */
.ph:has(+ .wsp:not([data-br])) { margin-right: .15em !important; }

/* ==== 台帳 #238 「きょうの おすすめ」の 札が 上の ボタンに 重なる（2026-10-14 本人）
   参考：Adobe Spectrum の バッジ（カードの 中に 置く）・Maersk（大事な 物に かぶせない）・Kendo（ふちに またがる 置き方は 数の 印 向け）
   カードの 中に 入れると まん中の 絵に かかる（カードの 幅が せまい）→ ふちに またがる 置き方は のこし、上下の カードの 間を 40 に して 札と 上の カードの 間を 16 以上 あける */
.modes.game-modes { row-gap: 40px !important; }

/* ==== 台帳 #236 スピーカーが 下の 帯から はみ出す（2026-10-14 本人「見た目 だいぶ ズレてる」）
   上から 20 に 置いていたので、4歳の 104 の ボタンが 高さ 120 の 帯から 出ていた → 帯の 上下 まん中に 置く */
.play > .qbox .say-btn { top: 0 !important; bottom: 0 !important; margin-block: auto !important; }

/* ==== FD-05 画面の 下 64 には 押す 物を 置かない（2026-10-14 測ると ホーム・ゲーム一覧で 56 だった → 8 足す） */
.screen:has(> .lobby), .screen:has(> .modes.game-modes) { padding-bottom: 8px !important; }
.game-modes .mode-card { padding-top: 20px !important; padding-bottom: 20px !important; }

/* ==== 台帳 #239 日の 札＝スタンプ（勉強した日の 合計）。斜めの 形で コインより 小さく 見えるので 見た目で そろえる（Krehel「Optical Alignment」） */
img[src*="icon/stamp"] { scale: 1.15; }  /* 2026-10-15 まっすぐ立った 形に 作り直したので 1倍（#249） */

/* ==== UI-83 キャラの 影の きまり（2026-10-14 本人「キャラクターに よって 影が あったり なかったり」・台帳 #243）
   参考：ブロブ影（足元の だ円・形が 変わらない・ゲームで 長く 使われる／Unity・Unreal の 解説、Infinity Nikki の 分析 simonschreibt.de）
         WebKit 不具合 313665・202472・167060（動く 物の drop-shadow が Safari で 切れる・消える・ずれる）
   ① 場面に 立つ キャラ（ホームの 相棒・遊びの 相棒と モンスター・ボス）＝ 足元の だ円の 影 1つだけ（.pedestal／.shadow）
   ② 枠の 中の キャラ（ずかん・結果・やめる確認・カットイン・相棒えらび）＝ 影なし
   → キャラの 絵の drop-shadow は 全部 やめる。色ちがいは 色と「いろちがい」の 札で 分かるので 光る 影も やめる */
.stage-buddy .buddy, .actor img, .pl-buddy, .st-buddy img, .rs-face, .cutin .cut-face, .dex-card:not(.none) img { filter: none !important; }
.quit-modal .m-face { filter: saturate(.85) !important; }
img.rare { filter: hue-rotate(150deg) saturate(1.25) !important; }

/* ==== 台帳 #244 やめる確認：「やめる」と「つづける」は 同じ 大きさ（FD-23）。損の 札は 出さない（FD-90）
   参考：英国 ICO 子どもコード（引き止めの 仕かけを 使わない）・Proton「子ども向けアプリの 悪い 作り」（やめる＝あきらめる と 思わせない）・iOS の 確認（取り消しは 左・続けるは 右） */
.quit-modal.q2 { gap: 16px; }
.quit-modal.q2 .m-note { font: 700 24px/1.4 var(--font-ui); color: var(--ink); text-align: center; }
.quit-modal.q2 .m-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-top: 8px; }
.quit-modal.q2 .m-row .btn { width: 100%; min-height: 88px; margin: 0; font-size: 30px; padding: 0 16px; }

/* ==== 台帳 #251 白い 帯（ずかん・ごほうび・地図 など）の 中で、ボタンと 札の 上下が そろわない（2026-10-14 本人）
   参考：Apple の ナビゲーションバー（左＝もどる・まん中＝題・右＝ボタン、どれも 帯の 上下 まん中）・Material 3 の 上の 帯（高さ 固定・中身は 上下 まん中）
   ① iPad の 画面の 上の すき間（safe-area）は 別に 足し、その 下の 白い 所で まん中に する
   ② 下の 線（6px）と もどるボタンの 下の 厚み（6px）も 数えて、見た目で 上下 同じ すき間に */
.screen > .topbar:has(> .h1) { padding-top: calc(env(safe-area-inset-top) + 12px) !important; padding-bottom: 18px !important; align-items: center !important; }
.screen > .topbar:has(> .h1) > .round { margin-top: 0 !important; margin-bottom: 6px !important; }

/* ==== 台帳 #252 白い 面の 上の 白い 札が なじんで 見えない（2026-10-14 本人「図鑑の 白と 白の 帯の 差？ 他も」）
   参考：Material 3 の 面の 段（面の 上の 入れ物は 一段 暗い 色＝Surface Container）・WCAG 1.4.11（物の 境目は 見分けられること）・UI-79
   → 白い 帯・白い 枠の 中の 押せない 札は --inset（一段 暗い 色）。全画面を 機械で さがして 3か所（ずかん・地図の 右上の 札、ミッションの +10） */
.screen > .topbar:has(> .h1) > .pill { background: var(--inset) !important; }
.mission .ms-got { background: var(--inset) !important; }

/* ==== 台帳 #253 式の 記号（＋ − × ÷ ＝）：横棒の 長い 丸ゴシックで、前後に 少し 間（教科書の「31 − 18」）
   参考：検定教科書の 記号は 全角英数のような 大きめの 形（Wikibooks の 議論）・U+2212 は 表示用の マイナス（Goldkey） */
.op { display: inline-block; font-family: var(--font-ui); font-weight: 700; margin: 0 .16em; }
.ptile:has(.op), .choice:has(.op), .big:has(.op) { white-space: nowrap; }
.ptile .op { margin: 0 .04em; }
.opw { white-space: nowrap; }
/* パズルの マスの 字は 組の 中で 同じ 大きさ（長い 式に 合わせて 1つに・FD-70・台帳 #253） */
.ptile b, .ptile b.sm { font-size: calc(var(--s) * .26); }

/* ==== 台帳 #250 ホームの 大きい ボタンの 絵と 字を カードの 高さに 合わせる（2026-10-14 本人「ボタンの サイズに 対して アイコンや 文字が 小さい」）
   参考：Clash of Clans 2026 の 刷新（主役の ボタンは 絵も 字も いちばん 大きい）・Nuxeo（絵と 字の 比を そろえる）・FD-11（大きさの 段は 3つ）
   決まった px だと iPad で カードが 高い 時に 小さく 見える → ボタンの 並ぶ 箱（2枚＋間 16）の 高さから 決める。カード ≒ 50cqh − 8px
   絵 ＝ カードの 約7割（104〜168）・題 32〜42・説明 22〜28・絵 → 字 24 */
@media (orientation: landscape) {
  .lobby-right .modes.entries { container-type: size; }
  .lobby-right .modes.entries .mode-card .ico { width: clamp(104px, calc(34cqh - 5px), 210px) !important; height: clamp(104px, calc(34cqh - 5px), 210px) !important; }
  .lobby-right .modes.entries .mode-card { padding-left: calc(clamp(104px, calc(34cqh - 5px), 210px) + 48px) !important; font-size: clamp(32px, 8.5cqh, 48px) !important; }
  .lobby-right .modes.entries .mode-card .desc { font-size: clamp(22px, 5.6cqh, 32px) !important; }
}

/* ==== 台帳 #195・#200 説明なしで 分かる 遊び方（coach.js）
   参考：Facebook ゲームの 手引き（手の 動きで 見せる）・NN/g（1回に 1つ）・iOS Instructions（明るい 所は そのまま 押せる）・Peckish（指先を 押す 所に 合わせる・押す 時に 輪） */
.coach { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.coach-mask { position: fixed; left: 0; top: 0; }
.coach-dim { fill: rgba(20, 24, 48, .5); }
.coach-ring { fill: none; stroke: var(--c-white); stroke-width: 4; }
@keyframes coachin { from { opacity: 0; } to { opacity: 1; } }
.coach-hand { position: fixed; left: 0; top: 0; width: 96px; height: 96px; transform-origin: 13% 9%; opacity: 0; }
.coach-ripple { position: fixed; width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--c-white); box-sizing: border-box; }
.coach-wig { animation: coachwig .5s ease-in-out 3; }
@keyframes coachwig { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }

/* ==== 台帳 #78 まちがいさがし（m-spot）：上に 問いの 文・下に 式カード 2×2（答えの ボタンと 同じ 形） */
.play > .qbox.spot-q { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 24px 24px; }
.play > .qbox.spot-q .spot-ttl { font: 700 26px/1.3 var(--font-ui); color: var(--ink); text-align: center; }
.play > .qbox.spot-q .spot-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.play > .qbox.spot-q .spot-card { min-height: 80px; font-size: 40px; }
.play > .qbox.spot-q .spot-card .big { font-size: inherit; white-space: nowrap; }

/* ==== ゲーム一覧：遊びが 5つ 以上の 時は 3列（下の 段は まん中 寄せ）。2行に 収める（台帳 #78） */
.modes.game-modes:has(> .mode-card:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; max-width: 1080px; }
.modes.game-modes:has(> .mode-card:nth-child(5)) > .mode-card { grid-column: span 2; }
.modes.game-modes:has(> .mode-card:nth-child(5)):not(:has(> .mode-card:nth-child(6))) > .mode-card:nth-child(4) { grid-column: 2 / span 2; }
.m-spot { --c: #e05a8f; --cd: #b13a69; --cl: #ff9fc4; }  /* まちがいさがし：ほかの 遊び（青・むらさき・赤・緑）と 重ならない 色 */
.play.m-spot .actor.a-buddy { width: 66cqh; left: calc(22% - 33cqh); bottom: 6%; }  /* まちがいさがし：相棒は 床に 立つ（リズムと 同じ 考え方・UI-83 足元の 影） */

/* ==== 声だけの 問題（4歳）：空の 左の 場所を 取らず、答えを 板の まん中に（スピーカーは 左の ボタン 1つ・2026-10-15） */
.play > .qbox.sponly { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
.play > .qbox.sponly > div:not(.choices, .qtools):empty, .play > .qbox.sponly > div:first-child:not(.choices, .qtools):not(:has(*:not(:empty))) { display: none; }
.play > .qbox.sponly > .choices { justify-self: center; }
/* 4歳の 声だけの 問題：答えの 絵を 大きく（押す 所は 大きく・FD-20・板の 余白に 合わせて 最大 180px） */
.play > .qbox.young.sponly .choices { grid-template-columns: repeat(var(--n, 3), min(180px, 24vh)) !important; gap: 24px; }
.play > .qbox.young.sponly .choice.pic { width: min(180px, 24vh); height: min(180px, 24vh); min-height: 0; }
.play > .qbox.young.sponly .choice.pic img { width: 82%; height: 82%; object-fit: contain; }
.play > .qbox.young.sponly { padding-top: 16px !important; padding-bottom: 16px !important; align-content: center !important; align-items: center !important; }
.play > .qbox.sponly > div:not(.choices):not(.hint):not(.say-next):not(.qtools) { display: none !important; }  /* 声だけの 問題の 空の 入れ物（高さ0）が 行の すき間を 作って 答えが 下がるので 隠す */
/* 高さの 低い iPad：まちがいさがしの 板に 収める（1024×690 で 8px はみ出していた） */
@media (orientation: landscape) and (max-height: 760px) {
  .play > .qbox.spot-q { padding: 16px 24px; gap: 12px; }
  .play > .qbox.spot-q .spot-cards { gap: 12px; }
  .play > .qbox.spot-q .spot-card { min-height: 64px; font-size: 34px; }
}
/* 4歳の 声だけの 問題：横幅が せまい 時（縦向き）は 横幅で 絵の 大きさを 決める（スピーカーと 重ならない） */
.play > .qbox.young.sponly .choices { grid-template-columns: repeat(var(--n, 3), min(180px, 24vh, calc((100vw - 380px) / 3))) !important; }
.play > .qbox.young.sponly .choice.pic { width: min(180px, 24vh, calc((100vw - 380px) / 3)); height: min(180px, 24vh, calc((100vw - 380px) / 3)); }
/* ==== ボタンの 段（#355〜#362・2026-10-14 本人「全部 同じで チープ」→ 案B：段ごとに 素材を 変える） ====
   参考：ref/research-2026-10-14-button-quality.md（ポケモンフレンズ 2025・TCG Pocket・쿠키런・シンクシンク・ワンダーボックス ほか 16本の 実物）
   ① 主な 行動（.btn）＝ぷっくり ソフビ：同じ 色の 濃い ふち・白字に こげ茶の ふち取り
   ② 2番目（.btn.white）＝白い タイル＋墨色の 細い ふち
   ③ 道具の 丸（.round：← × 音 ？）＝白い 丸＋墨色の ふち・アイコンは 墨色（音と ？は 色の まま）
   ④ 行き先（.pill-btn・.mode-card）＝布の 札：内側に ぬい目の 点線
   ⑤ 表示の 札（.pill）＝平ら（押せない）
   ⑥ 答え（.choice）＝クリームの タイル＋細い 茶の ふち（#345） */
:root { --tool-line: #eadccb; --tool-edge: #e3d6c8; --stitch: rgba(107,74,58,.38); }
.btn:not(.white) { border: 3px solid color-mix(in srgb, var(--cd) 80%, var(--c-black)) !important; color: var(--c-white) !important;
  text-shadow: 2px 0 0 var(--c-outline-brown), -2px 0 0 var(--c-outline-brown), 0 2px 0 var(--c-outline-brown), 0 -2px 0 var(--c-outline-brown), 1.5px 1.5px 0 var(--c-outline-brown), -1.5px 1.5px 0 var(--c-outline-brown), 1.5px -1.5px 0 var(--c-outline-brown), -1.5px -1.5px 0 var(--c-outline-brown), 0 4px 0 var(--c-outline-brown) !important; }
.btn:not(.white)[aria-disabled] { opacity: 1 !important; filter: none !important; }
.btn.white { background: var(--c-white) !important; border: 3px solid var(--tool-line) !important; color: var(--ink) !important; text-shadow: none !important; box-shadow: 0 4px 0 var(--tool-edge), 0 8px 14px var(--c-line-12) !important; }
.btn.white.on, .feel .btn.on { border-color: color-mix(in srgb, var(--cd) 80%, var(--c-black)) !important; }
.round, .round.quit-x, .round.speak-btn, .round.how-btn, .play > .qbox .say-btn, .screen:is(.gate, .parent) .round {
  background: var(--c-white) !important; border: 3px solid var(--tool-line) !important; box-shadow: 0 4px 0 var(--tool-edge), 0 8px 14px rgba(107,74,58,.14) !important; }
.round:active { transform: translateY(4px); box-shadow: 0 0 0 var(--tool-edge) !important; }
.round > img[src*="back"], .round > img[src*="close"] { filter: brightness(0) opacity(.72); }
.round.quit-x svg { width: 46%; height: 46%; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.how-btn b { color: var(--ink) !important; }
.say-btn.speaking { animation: sayring2 1s ease-out infinite; }
@keyframes sayring2 { 0% { box-shadow: 0 4px 0 var(--tool-edge), 0 0 0 0 rgba(54,167,240,.5); } 100% { box-shadow: 0 4px 0 var(--tool-edge), 0 0 0 22px rgba(54,167,240,0); } }
/* ④ 行き先（#363・#364：ぬい目・こい 紺の ふちを やめ、まなぶんの 粘土・ソフビの テイストに 合わせる）
   粘土の 立体の 作り方（setproduct.com claymorphism guide・LogRocket implementing claymorphism）：こい 線の ふちは 付けず 影だけで 形を 出す。
   上に 明るい 内側の 光・下に 同じ 色の 内側の 影・外の 影は 面と 同じ 色み。ゲームらしさは 上 半分の やわらかい つや（ぷにぷに）だけ 取る */
.mode-card { border: none !important; box-shadow: inset 0 4px 0 var(--c-white-45), inset 0 -8px 0 color-mix(in srgb, var(--cd) 35%, transparent), 0 8px 0 var(--cd), 0 16px 26px color-mix(in srgb, var(--cd) 38%, transparent) !important; }
.mode-card { color: var(--c-white); text-shadow: 0 2px 0 color-mix(in srgb, var(--cd) 85%, var(--c-black)), 0 0 6px color-mix(in srgb, var(--cd) 60%, transparent) !important; }
.pill.pill-btn { border: none; background: linear-gradient(180deg, var(--c-white) 0 50%, #fff6ea 100%) !important; box-shadow: inset 0 2px 0 var(--c-white), 0 4px 0 #ead9c4, 0 8px 14px rgba(160,110,60,.16) !important; }
.choice:not(.paint):not(.pic) { border: 2px solid #dcc19a !important; }
/* 行き先の カード＝案C（#365・本人 決定）：同じ 色の こい ふち＋上の つや＋同じ 色の 字の ふち取り（紺は 混ぜない・まなぶんの テイストから 浮かない） */
.mode-card { --rim: color-mix(in srgb, var(--cd) 88%, var(--c-black)); border: 3px solid var(--rim) !important; }
.mode-card { text-shadow: 2px 0 0 var(--rim), -2px 0 0 var(--rim), 0 2px 0 var(--rim), 0 -2px 0 var(--rim), 1.5px 1.5px 0 var(--rim), -1.5px 1.5px 0 var(--rim), 1.5px -1.5px 0 var(--rim), -1.5px -1.5px 0 var(--rim), 0 3px 0 var(--rim) !important; }

/* 主な 行動（.btn）も 同じ 作りに そろえる（R16・Roblox の UI ガイド「同じ 種類は 同じ 見た目の 言葉」）：同じ 色の こい ふち（済）＋上の つや */
.btn:not(.white) { background: radial-gradient(140% 80% at 50% -14%, var(--c-white-40) 0 45%, var(--c-white-0) 46%), linear-gradient(180deg, var(--cl) 0%, var(--c) 45%, var(--c) 100%) !important; }  /* つやは 背景の 一部（字の 下） */
.mode-card { background: radial-gradient(130% 70% at 50% -10%, var(--c-white-40) 0 45%, var(--c-white-0) 46%), linear-gradient(180deg, var(--cl), var(--c) 55%) !important; }
/* ボタンの アイコン（#367 案A・#370 本人 決定：台なし）：字の 左に 大きく 直接。白い ふちと 下の 影は 絵に 焼きこみ（img/icon/bi-*.webp・Safari の 重ねる 影は 重い） */
.bi { flex: none; width: 68px; height: 68px; margin: -6px -6px -6px -12px; display: grid; place-items: center; }
.bi img { width: 100%; height: 100%; object-fit: contain; }
.btn.small .bi { width: 52px; height: 52px; margin-left: -8px; }
.k4 .bi, .young .bi { width: 80px; height: 80px; }
.btn.rw-go .bi { margin-left: 0; width: 52px; height: 52px; } .btn.rw-go { padding: 0 24px 0 16px !important; gap: 8px; }  /* こうかんの 小さい ボタン：コインが ふちから 出ない・右の 余白 16 以上（見直し役 #380） */
/* 4歳の 声だけの 問題：答えの 絵の 札を 箱の まん中へ（左よせで 右 半分が 空いて いた・見直し役 #380・R16） */
.play > .qbox.young.sponly > .choices { grid-column: 1 / -1 !important; justify-self: center !important; }  /* 2列の 並べ方の 左 列に 入って いた → 2列 ぶんの まん中へ */
/* まけちゃった：キャラの 足もとに やわらかい 土台（ホームの 土台と 同じ 作り・#380） */
.lose-stand { position: relative; display: grid; justify-items: center; }
.lose-stand .lose-face { position: relative; z-index: 1; }
.lose-ped { width: 170px; height: 34px; margin-top: -24px; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, var(--c-white-55) 0%, rgba(110,160,80,.36) 55%, rgba(40,70,40,0) 72%); }
/* 長い 答え（5字 以上）が ある 3択：横 画面では 札が せまい（101〜127px）→ 上に 2つ・下に 長い 答えを 横 いっぱい（#380・B4 #279「どちらでもない」が はみ出した） */
@media (orientation: landscape) { .play .choices.n3:has(.choice.long) { grid-template-columns: 1fr 1fr !important; } .play .choices.n3 .choice.long { grid-column: 1 / -1; } }
/* 大人の 画面：「けす」が 縦に 2行に 折れて いた・クレジットの「（」が 行末に 残って いた（見直し役 #380） */
.pbtn.ghost[data-rdel] { white-space: nowrap; min-width: 4em; flex: none; }
.pcard .note { line-break: strict; word-break: auto-phrase; }  /* 禁則を 強く（行末の「（」を 防ぐ）・文節で 折り返す（BudouX と 同じ 考え・対応して いない 時は ふつうの 折り返し） */
/* まけちゃった・おやすみ などの 見出しの 札：上下の 余白が ほとんど 無かった（見直し役 #380・R5） */
.screen.center > .h1 { padding-block: 10px; padding-inline: 32px; }
/* ごほうびの「いまの コイン」縦向き：見出しが 横 100% を とって「まい」が 縦に 折れていた（見直し役 #385）→ 見出しは 1行目・コインと 数と まいは 2行目に 並べる */
@media (orientation: portrait) { .rw-bank { flex-wrap: wrap; column-gap: 12px; justify-content: center !important; } .rw-bank > .rw-unit, .rw-bank > .rw-num { white-space: nowrap; flex: none; } .rw-bank > .rw-coin, .rw-bank > .rw-unit { margin-block: 0; } }

/* まばたき（#428・MO-02）：閉じた 絵を 上に 重ねて opacity だけ 変える（transform を 使わない＝呼吸と ぶつからない）
   閉じる 60ms・閉じた まま 40ms・開く 100ms（合計 200ms）。動きは art.js が opacity だけを 足す（呼吸の 動きを 止めない ため）。
   位置と 大きさも art.js が 開いた 絵に 合わせる */
.eye-closed { opacity: 0; pointer-events: none; z-index: 2; }

/* 結果（縦）：感想の 2つの 段が 2段に 折れた 時は 縦の 区切り線と その 余白を 消す（折れた 後に 線だけ 左に 浮いて 残った・#422・B5 #5）
   参考：ChessKid の 音の 設定・MDN の flex-wrap＝並べる 時だけ 区切りを 引き、積む 時は 線を 引かない */
@media (orientation: portrait) {
  .rs-feel .feel[data-k="hard"], .screen.rs .feel[data-k="hard"] { border-left: none; padding-left: 0; }
}

/* ボス戦：問題文と 答えの 段を 同じ 左の 線（音・？の 列の 右）に そろえる（#380・B6 #4）。
   問題文は 左そろえ（FD-32）。右の 余白は 音・？の 列の 分を 空けず、答えの 段を 板の 余白まで 広げる（B6 #5・FD-02） */
.play.m-boss > .qbox { padding-right: 26px !important; }
.play.m-boss > .qbox .qrow .qtext { justify-content: flex-start !important; text-align: left; padding-right: 0 !important; }
/* 横の ボス戦：問題と 答えを 左右に 分けると 左の 線が 2本に なる → 上に 問題・下に 答えの 1列（同じ 左の 線・B6 #3） */
@media (orientation: landscape) {
  .play.m-boss > .qbox.side { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .play.m-boss > .qbox.side .choices { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
}