/* 漢字コレクター（ファミコン風。色はファミコンの色に近いものだけ、角は 1 点欠けの四角、グラデーション・ぼかしは使わない） */
:root {
  --bg: #141440;
  --win: #000;
  --ink: #fcfcfc;
  --sub: #a4e4fc;
  --dim: #7c7c7c;
  --paper: #fcf4dc;
  --sumi: #000;
  --brown: #7c5800;
  --red: #d82800;
  --gold: #f8b800;
  --blue: #0058f8;
  --line: #fcfcfc;
  --glyph: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ui: "DotGothic16", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 角を 1 点（n）欠けさせる */
  --n: 4px;
  --notch: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
html, body, * { touch-action: manipulation; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  min-height: 100vh;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; }
img { image-rendering: pixelated; image-rendering: crisp-edges; }
.app {
  max-width: 520px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* RPG のウィンドウ（黒地に白い枠） */
.win, .panel-win, .hold, .series, .toast, .hintbox, .note-win {
  background: var(--win);
  border: 3px solid var(--line);
  clip-path: var(--notch);
}

/* ---------- 上の帯 ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 0; font-size: 24px; font-weight: normal; color: var(--gold); text-shadow: 3px 3px 0 var(--red); letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.logo {
  font-family: var(--glyph); font-weight: 700; font-size: 20px; color: var(--sumi); background: var(--paper);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--red); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--red); text-shadow: none; clip-path: var(--notch);
}
.mini { background: var(--win); border: 3px solid var(--line); color: var(--ink); padding: 3px 10px; font-size: 14px; clip-path: var(--notch); }

/* 画面の切り替え（コマンドの窓。選んでいる方に ▶） */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--win); border: 3px solid var(--line); clip-path: var(--notch); padding: 3px; }
.tabs button { background: transparent; color: var(--dim); border: 0; padding: 8px 4px; font-size: 18px; position: relative; }
.tabs button.on { color: var(--ink); }
.tabs button.on::before { content: "▶"; position: absolute; left: 10%; animation: blink 0.8s steps(1) infinite; }
.tabs #count { font-size: 12px; color: var(--sub); }
@keyframes blink { 50% { visibility: hidden; } }

/* ---------- さがす・戦いの画面 ---------- */
.stage {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 場所の絵（80×48 点を拡大）。中の物は % で置く */
.scene { position: relative; width: min(100%, 400px); aspect-ratio: 80 / 48; border: 4px solid #000; outline: 3px solid var(--line); outline-offset: -7px; overflow: hidden; }
.scene .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.place { position: absolute; right: 8px; top: 8px; background: #000; color: var(--ink); font-size: 12px; padding: 1px 6px; border: 2px solid var(--line); z-index: 2; }
/* ゆれる物と「！」 */
.hide { position: absolute; left: 37.5%; bottom: 10%; width: 25%; }
.hide.idle { animation: sway 2.4s steps(1) infinite; }
.hide.shake { animation: rustle 0.24s steps(1) infinite; }
@keyframes sway { 50% { transform: translateX(2px); } }
@keyframes rustle { 0% { transform: translateX(-4px); } 50% { transform: translateX(4px) translateY(-2px); } }
.bang { position: absolute; left: 44.5%; bottom: 40%; width: 11.25%; animation: bang 0.3s steps(3) both; }
@keyframes bang { from { transform: translateY(12px) scale(0.4); } }
/* 戦いが始まる：白く 2 回光って、上下から黒い帯が閉じる */
.wipe { position: absolute; inset: 0; z-index: 5; animation: wipe 0.75s steps(1) forwards; }
@keyframes wipe {
  0% { background: #fcfcfc; } 12% { background: transparent; } 24% { background: #fcfcfc; } 36% { background: transparent; }
  48% { background: repeating-linear-gradient(#000 0 8%, transparent 8% 20%); }
  64% { background: repeating-linear-gradient(#000 0 14%, transparent 14% 20%); }
  80%, 100% { background: #000; }
}
/* あらわれた漢字（敵） */
.plate { position: absolute; left: 8px; top: 8px; z-index: 2; background: #000; border: 2px solid var(--line); padding: 2px 6px; font-size: 11px; line-height: 1.4; color: var(--ink); }
.plate .rk { font-size: 11px; padding: 0 4px; margin-right: 4px; border: 0; background: var(--a, #7c7c7c); color: #fcfcfc; }
.plate .rk.r2 { --a: #00a800; } .plate .rk.r3 { --a: #0058f8; } .plate .rk.r4 { --a: #6844fc; } .plate .rk.r5 { --a: #f8b800; color: #000; }
.plate .st { color: var(--gold); letter-spacing: -1px; }
.plate .own { color: var(--gold); margin-left: 6px; }
.foe { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; flex-direction: column; align-items: center; animation: float 1.2s steps(1) infinite; }
.foe .kj {
  position: relative; z-index: 1; font-family: var(--glyph); font-weight: 700; font-size: clamp(84px, 30vw, 118px); line-height: 1; color: #000;
  text-shadow: 3px 0 #fcfcfc, -3px 0 #fcfcfc, 0 3px #fcfcfc, 0 -3px #fcfcfc, 3px 3px #fcfcfc, -3px -3px #fcfcfc, 3px -3px #fcfcfc, -3px 3px #fcfcfc;
}
.foe .kj.radical { font-size: clamp(72px, 26vw, 104px); }
.foe .tag { position: absolute; z-index: 2; right: 30%; top: 0; font-size: 11px; background: var(--red); color: #fcfcfc; padding: 1px 5px; border: 2px solid #000; }
.foe .shadow { position: absolute; bottom: -2px; width: 46%; height: 12%; background: rgba(0, 0, 0, 0.35); border-radius: 50%; }
@keyframes float { 50% { transform: translateY(-4px); } }
.foe.appear { animation: appear-foe 0.5s steps(1) both, float 1.2s steps(1) 0.5s infinite; }
@keyframes appear-foe { 0%, 40% { opacity: 0; } 20%, 60%, 100% { opacity: 1; } 80% { opacity: 0; } }
.foe.dodge { animation: dodge 0.45s steps(1); }
@keyframes dodge { 0% { transform: translateX(0); } 25% { transform: translateX(-28px); } 50% { transform: translateX(28px); } 75% { transform: translateX(-12px); } }
.foe.flee { animation: flee 0.7s steps(5) forwards; }
@keyframes flee { 0% { transform: translateX(0); } 20% { transform: translateX(-10px); } 100% { transform: translateX(140%); opacity: 0; } }
.scene.run .foe { animation: none; }
.scene.run { animation: run 0.6s steps(3) forwards; }
@keyframes run { to { filter: brightness(0.3); } }
/* つかまえる：白く 2 回光ってから、3 回じたばたする */
.foe.caught { animation: caught 0.6s steps(1) forwards; }
@keyframes caught { 0%, 50% { filter: brightness(3); } 25%, 75%, 100% { filter: none; } }
.foe.struggle { animation: struggle 0.3s steps(1); }
@keyframes struggle { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: none; } }

/* 部首のとき、場面の上の真ん中に「部首クイズ」の帯を出す（部首を聞かれていると気づきやすく） */
.rad-banner { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 2; background: var(--gold); color: #000; border: 2px solid #000; padding: 1px 10px; font-size: 13px; white-space: nowrap; animation: rad-blink 1s steps(1) infinite; }
@keyframes rad-blink { 50% { background: #fce0a8; } }

/* メッセージの窓を場面の絵の中に重ねたとき（.with-msg）：窓は下の方、漢字・草むら・「！」はその上の空いた所に出す */
.scene .msgwin { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; min-height: 58px; padding: 6px 10px; clip-path: none; }
.scene .msgwin .msg { font-size: 14px; line-height: 1.45; min-height: 0; }
.scene.with-msg .foe { bottom: 70px; }
.scene.with-msg .foe .kj { font-size: clamp(64px, 25vw, 100px); }
.scene.with-msg .foe .kj.radical { font-size: clamp(56px, 22vw, 88px); }
.scene.with-msg .hide { bottom: 72px; width: 22%; left: 39%; }
.scene.with-msg .bang { bottom: calc(72px + 13%); }
/* スマホ・タブレットで、戦いの画面で読みの入力欄に一度入ったら（body.typing）、その画面のあいだは場面の絵を低くする。
   iPhone は入力欄をタップすると、入力欄をアドレスバーとキーボードのあいだの真ん中あたりに動かし、入力欄の上に見えるのは 150px ほどになるため。
   入力欄から外れても戻さない（外れたとたんにボタンが動いて、押したボタンが反応しなくなる）。戻すのは画面を切りかえるときだけ（main.js の typing()） */
@media (pointer: coarse) {
  body.typing .stage { min-height: 0; margin-bottom: 8px; }
  body.typing .scene.with-msg { aspect-ratio: auto; height: 136px; }
  body.typing .scene.with-msg .bg { object-fit: cover; object-position: center 70%; }
  body.typing .scene .msgwin { min-height: 50px; padding: 4px 8px; left: 4px; right: 4px; bottom: 4px; }
  body.typing .scene .msgwin .msg { font-size: 13px; line-height: 1.4; }
  body.typing .scene.with-msg .foe { bottom: 58px; }
  body.typing .scene.with-msg .foe .kj { font-size: 66px; }
  body.typing .scene.with-msg .foe .kj.radical { font-size: 58px; }
  body.typing .scene.with-msg .foe .shadow { height: 8px; }
  body.typing .plate { font-size: 10px; padding: 1px 4px; left: 6px; top: 6px; }
  body.typing .plate .rk { font-size: 10px; }
  body.typing .place { top: 6px; right: 6px; font-size: 11px; }
}

/* メッセージの窓（RPG） */
.msgwin { background: #000; border: 3px solid var(--line); clip-path: var(--notch); padding: 10px 14px; min-height: 3.6em; display: flex; align-items: center; }
.msgwin .msg { text-align: left !important; width: 100%; }

/* 光る：画面全体が数こまだけ白く点滅 */
.flash { position: absolute; inset: -20px; pointer-events: none; opacity: 0; background: var(--fl, #fff); }
.flash.on { animation: flash 0.5s steps(1) forwards; }
@keyframes flash { 0% { opacity: 0.9; } 20% { opacity: 0; } 40% { opacity: 0.6; } 60%, 100% { opacity: 0; } }
/* 後ろの光の筋（くっきりした縁で、こま送りで回る） */
.rays {
  position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; pointer-events: none;
  background: repeating-conic-gradient(var(--fl, #fff) 0 10deg, transparent 10deg 30deg);
  mask: radial-gradient(circle, #000 0 46%, transparent 46%);
  -webkit-mask: radial-gradient(circle, #000 0 46%, transparent 46%);
  opacity: 0.25;
  animation: spin 3s steps(6) infinite;
}
@keyframes spin { to { transform: rotate(60deg); } }

.skip-hint { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; color: var(--sub); font-size: 12px; }

/* ---------- カード ---------- */
.card {
  --a: #7c7c7c; --b: #bcbcbc;
  position: relative;
  width: min(100%, 330px);
  background: var(--paper);
  color: var(--sumi);
  border: 4px solid #000;
  box-shadow: inset 0 0 0 4px var(--a), inset 0 0 0 6px var(--paper), inset 0 0 0 8px #000;
  clip-path: var(--notch);
  padding: 16px 18px 12px;
  z-index: 1;
}
.card.r2 { --a: #00a800; --b: #b8f8b8; }
.card.r3 { --a: #0058f8; --b: #a4e4fc; }
.card.r4 { --a: #6844fc; --b: #d8b8f8; }
.card.r5 { --a: #f8b800; --b: #fce0a8; animation: cyc 0.8s steps(1) infinite; }
@keyframes cyc {
  0% { box-shadow: inset 0 0 0 4px #f8b800, inset 0 0 0 6px var(--paper), inset 0 0 0 8px #000; }
  25% { box-shadow: inset 0 0 0 4px #d82800, inset 0 0 0 6px var(--paper), inset 0 0 0 8px #000; }
  50% { box-shadow: inset 0 0 0 4px #00a800, inset 0 0 0 6px var(--paper), inset 0 0 0 8px #000; }
  75% { box-shadow: inset 0 0 0 4px #0058f8, inset 0 0 0 6px var(--paper), inset 0 0 0 8px #000; }
}
.card.appear { animation: appear 0.4s steps(4) both; }
.card.r5.appear { animation: appear 0.4s steps(4) both, cyc 0.8s steps(1) 0.4s infinite; }
@keyframes appear { from { transform: scale(0.2); } }
.card.shake { animation: shake 0.4s steps(4); }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-8px); } }
.card.dim .glyph span { color: #bcbcbc; }
.card-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rk { background: var(--a); color: #fcfcfc; padding: 1px 8px; font-size: 14px; border: 2px solid #000; }
.card.r5 .rk { color: #000; }
.st { color: var(--a); letter-spacing: -1px; }
.card.r5 .st { color: #d82800; }
.se { margin-left: auto; color: var(--brown); font-size: 12px; }
.glyph {
  position: relative;
  text-align: center;
  font-family: var(--glyph);
  font-weight: 700;
  font-size: 128px;
  line-height: 1.15;
  margin: 2px 0 0;
}
.glyph.radical span { font-size: 112px; }
/* 読めたカード：字を左、キャラ（20×20）を右に */
.glyph.with-px { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 104px; }
.glyph.with-px.radical span { font-size: 92px; }
.glyph .px { width: 100px; height: 100px; animation: px-pop 0.5s steps(5) 0.15s both; }
@keyframes px-pop { from { transform: scale(0) translateY(40px); } }
.glyph i {
  position: absolute; right: 4px; top: 10px; font-style: normal; font-family: var(--ui); font-weight: normal;
  font-size: 12px; background: var(--red); color: #fcfcfc; padding: 2px 6px; border: 2px solid #000;
}
.read { text-align: center; margin: 0 0 4px; font-size: 22px; color: var(--a); min-height: 1.3em; }
.card.r5 .read { color: #c84c0c; }
.read small { font-size: 13px; color: var(--brown); margin-left: 4px; white-space: nowrap; }
.read .okuri { color: #a4a4a4; font-size: 0.85em; }
.okuri-note { text-align: center; margin: -2px 0 6px; font-size: 12px; color: var(--brown); }
.okuri-note b { font-family: var(--glyph); font-size: 16px; color: var(--sumi); }
.small .okuri { opacity: 0.6; }
.read.q { color: var(--red); font-size: 18px; }
.ex { text-align: center; margin: 0 0 6px; font-size: 13px; color: var(--brown); }
/* ステータス（RPG のつよさの画面） */
.stats { list-style: none; margin: 6px 0 0; padding: 4px 8px; font-size: 14px; background: #000; color: #fcfcfc; clip-path: var(--notch); }
.stats li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 2px; }
.stats li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats li b { font-weight: normal; font-variant-numeric: tabular-nums; }
.stats li.sig { color: var(--gold); }
.stats li.lock { color: var(--dim); }
.note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--brown); border: 2px dashed var(--brown); padding: 6px 8px; }
.card-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--brown); }

/* ---------- 操作の欄 ---------- */
.panel { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.panel .msg, .scene .msg { text-align: center; margin: 0; font-size: 16px; line-height: 1.5; min-height: 1.5em; }
.panel .msg.bad, .scene .msg.bad { color: #f87858; }
.panel .msg.good, .scene .msg.good { color: var(--gold); font-size: 24px; text-shadow: 3px 3px 0 var(--red); }
.panel .small { text-align: center; margin: 0; font-size: 12px; color: var(--sub); line-height: 1.6; }
.panel .small b { color: var(--gold); font-weight: normal; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
/* ボタン：黒い縁、明るい上・左と暗い下・右で立体に。押すと逆になる */
.btn {
  background: var(--red); color: #fcfcfc; border: 3px solid #000; padding: 10px 12px; font-size: 16px;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.35), inset -3px -3px 0 rgba(0, 0, 0, 0.35);
  clip-path: var(--notch);
}
.btn:active { transform: translateY(2px); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.35), inset -3px -3px 0 rgba(255, 255, 255, 0.2); }
.btn:disabled { background: #7c7c7c; color: #bcbcbc; }
.btn-big { font-size: 22px; padding: 14px; background: var(--gold); color: #000; position: relative; }
.btn-big::before { content: "▶"; margin-right: 8px; animation: blink 0.8s steps(1) infinite; }
.btn-sub { background: #0058f8; }
.btn-x { background: #000; border-color: #000; box-shadow: inset 0 0 0 2px #7c7c7c; }
.btn-line { background: #00a800; }
.btn-share { background: #0058f8; }
/* つぎをさがす（大）と図鑑（小）を横に並べる */
.next-row .btn-big { flex: 3; }
.next-row .btn-sub { flex: 1; font-size: 16px; }
.answer { display: flex; gap: 8px; }
.answer input {
  flex: 1; min-width: 0; font-size: 20px; padding: 10px 12px; border: 3px solid #000; background: #fcfcfc; color: #000;
  font-family: var(--ui); border-radius: 0; box-shadow: inset 0 0 0 2px #fcfcfc, inset 0 0 0 3px #7c7c7c; clip-path: var(--notch);
}
.answer .btn { flex: none; }
.lives { text-align: center; font-size: 14px; color: var(--sub); }
.lives b { color: #f87858; font-weight: normal; letter-spacing: 2px; }
.hintbox { text-align: center; padding: 8px; font-size: 15px; }
.ask { border-top: 3px dotted var(--dim); padding-top: 10px; }
.ask p { margin: 0 0 6px; text-align: center; font-size: 13px; color: var(--sub); }

.hold { padding: 8px 10px; }
.hold p { margin: 0 0 6px; font-size: 13px; color: var(--sub); }
.hold .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--glyph); font-weight: 700; font-size: 30px; width: 56px; height: 56px;
  background: var(--paper); color: #000; border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--gold); clip-path: var(--notch);
}

.gift { background: var(--gold); color: #000; text-align: center; padding: 8px; font-size: 15px; border: 3px solid #000; clip-path: var(--notch); }

/* ---------- 図鑑 ---------- */
.summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 2px dotted var(--dim); font-size: 12px; color: var(--sub); }
.summary b { font-size: 18px; font-weight: normal; color: var(--gold); }
.series { margin-bottom: 10px; padding: 8px 10px; }
.series summary { list-style: none; cursor: pointer; }
.series summary::-webkit-details-marker { display: none; }
.series summary h2::after { content: "▼"; font-size: 11px; color: var(--sub); margin-left: 6px; }
.series[open] summary h2::after { content: "▲"; }
.series .bar { margin-bottom: 0; }
.series[open] .bar { margin-bottom: 8px; }
.series h2 { margin: 0 0 6px; font-size: 16px; font-weight: normal; display: flex; align-items: center; gap: 8px; }
.series h2 .ic { font-family: var(--glyph); font-weight: 700; background: var(--paper); color: #000; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; clip-path: var(--notch); --n: 2px; }
.series h2 .n { margin-left: auto; font-size: 13px; color: var(--sub); white-space: nowrap; }
.series.done { border-color: var(--gold); }
/* そろえたまとまりの見出しのハンコ */
.series h2 .stamp { font-size: 10px; color: var(--red); border: 2px solid var(--red); padding: 0 3px; transform: rotate(-8deg); background: var(--paper); letter-spacing: 1px; white-space: nowrap; }
/* 図鑑の上の「コンプリート」の数（押すとその分け方に） */
.comp { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin: -4px 0 12px; font-size: 12px; color: var(--sub); }
.comp button { background: transparent; border: 1px solid var(--dim); color: var(--sub); padding: 2px 6px; font-size: 12px; }
.comp button b { font-weight: normal; color: var(--gold); font-size: 14px; }
.comp button.all { border-color: var(--gold); color: var(--gold); }
.series.done h2 .n { color: var(--gold); }
/* 集めた割合（HP のバーのように、目盛りの入った帯） */
.bar { height: 8px; background: #3c3c3c; border: 1px solid #7c7c7c; margin-bottom: 8px; }
.bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #58d854 0 6px, #00a800 6px 8px); }
.series.done .bar i { background: repeating-linear-gradient(90deg, #f8b800 0 6px, #d82800 6px 8px); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
/* 画面の外のマスは描かない（0.2.59〜。新しい順などで 1159 マスを一度に描くとスマホで 1〜2 秒止まった）。
   0.2.58 は 10 行ずつの塊に分けたが、見出しの中は 1 行の数が違い、塊の境目に空白ができた */
.grid .cell { content-visibility: auto; contain-intrinsic-size: auto 46px; }
.cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0;
  font-family: var(--glyph); font-weight: 700; font-size: 26px; border: 2px solid #3c3c7c; background: #202060; color: #3c3c7c;
  position: relative; clip-path: var(--notch); --n: 2px;
}
.cell.got { background: var(--paper); color: #000; border: 3px solid var(--a, #7c7c7c); }
.cell.got.r2 { --a: #00a800; } .cell.got.r3 { --a: #0058f8; } .cell.got.r4 { --a: #6844fc; } .cell.got.r5 { --a: #f8b800; }
.cell.seen { color: #6c6cbc; }
.cell.px { padding: 0; overflow: hidden; }
.cell.px img { width: 80%; height: 80%; }
.cell.px .ch { position: absolute; left: 1px; bottom: 0; font-size: 10px; line-height: 1; color: var(--brown); }
.cell .lv { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-family: var(--ui); font-weight: normal; color: var(--brown); }
.cell.rad::after { content: "部"; position: absolute; left: 2px; top: 1px; font-size: 8px; font-family: var(--ui); font-weight: normal; color: var(--red); }
.zbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--win); border: 3px solid var(--line); clip-path: var(--notch); }
.seg button { background: transparent; color: var(--dim); border: 0; padding: 7px 1px; font-size: 12px; white-space: nowrap; }
.seg button.on { background: var(--ink); color: #000; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.chips2 button { background: var(--win); color: var(--dim); border: 2px solid var(--dim); padding: 4px 10px; font-size: 12px; clip-path: var(--notch); --n: 2px; }
.chips2 button.on { background: var(--gold); border-color: #000; color: #000; }
.zrow { display: flex; gap: 8px; }
.zrow input { flex: 1; min-width: 0; }
.seg-show { grid-template-columns: repeat(2, 44px); }
.zbar input { font-size: 16px; padding: 8px 10px; border: 3px solid var(--line); background: var(--win); color: var(--ink); font-family: var(--ui); border-radius: 0; clip-path: var(--notch); }
.series h2 .ic.num { font-family: var(--ui); font-weight: normal; font-size: 14px; }
.series h2 .ic.rk { font-family: var(--ui); font-weight: normal; font-size: 11px; width: 34px; color: #fcfcfc; background: var(--a, #7c7c7c); border: 0; padding: 0; }
.series h2 .ic.rk.r2 { --a: #00a800; } .series h2 .ic.rk.r3 { --a: #0058f8; } .series h2 .ic.rk.r4 { --a: #6844fc; } .series h2 .ic.rk.r5 { --a: #f8b800; color: #000; }
.cell.fav { box-shadow: inset 0 0 0 2px var(--gold); }
.cell.fav::after { content: "★"; position: absolute; left: 2px; top: 0; font-size: 10px; font-family: var(--ui); font-weight: normal; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.cell.rad.fav::after { content: "部★"; }
/* お気に入り：図鑑の上の共有の欄と、カードのボタン */
.favbar { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 2px dotted var(--dim); }
.favbar[hidden] { display: none; }
.favbar p { margin: 0 0 6px; text-align: center; font-size: 13px; color: var(--gold); word-break: break-all; }
.favbar .btn { font-size: 13px; padding: 8px 4px; }
.btn-fav { width: 100%; background: #3c3c3c; color: var(--gold); }
.btn-fav.on { background: var(--gold); color: #000; }
.cell.first::before { content: "◎"; position: absolute; right: 2px; top: 0; font-size: 9px; font-family: var(--ui); font-weight: normal; color: var(--red); }
.zukan-note { font-size: 12px; color: var(--sub); line-height: 1.6; margin: 0 0 12px; }
.danger { background: transparent; border: 2px solid #a81000; color: #f87858; font-size: 12px; padding: 4px 10px; }

/* ---------- 詳細・通知 ---------- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-body { width: min(100%, 360px); display: flex; flex-direction: column; gap: 10px; align-items: center; margin: auto; }
.modal-body > div { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.modal-body .row { width: 100%; }
.modal-body > .btn { width: 100%; }
/* 図鑑のカード：まえ・つぎ（左右のスワイプ・矢印キーでも動く） */
.modal-body > .modal-nav { flex-direction: row; align-items: stretch; }
.modal-nav .btn { flex: 1; padding: 8px; }
.modal-nav .pos { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--sub); font-size: 14px; }
#modal-card.from-right { animation: slide-r 0.15s ease-out; }
#modal-card.from-left { animation: slide-l 0.15s ease-out; }
@keyframes slide-r { from { transform: translateX(40px); opacity: 0.3; } }
@keyframes slide-l { from { transform: translateX(-40px); opacity: 0.3; } }
/* 通知（RPG のメッセージの窓） */
.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 30; pointer-events: none;
  color: var(--ink); padding: 12px 18px; font-size: 18px; text-align: center; white-space: pre-line;
  animation: toast 2.8s steps(1) forwards; width: max-content; max-width: calc(100% - 32px);
}
.toast[hidden] { display: none; }
@keyframes toast { 0% { opacity: 0; } 5%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- フッター ---------- */
/* 演出のあいだは、ページ下のリンクを押せなくする（連打で押してしまわないように） */
body.busy .follow, body.busy .foot { pointer-events: none; }
.follow { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 12px; color: #8c8cb8; margin-top: 24px; }
.follow a { color: #8c8cb8; display: flex; padding: 2px; }
.follow a:hover, .follow a:focus-visible { color: var(--ink); }
.follow svg { width: 18px; height: 18px; fill: currentColor; }
.foot { font-size: 12px; color: #8c8cb8; line-height: 1.6; }
.foot p { margin: 4px 0; }
.foot a { color: var(--sub); }
.version { text-align: right; opacity: 0.6; }