/* じゅけんクエスト ファイナル — ダーク＆エピックテーマ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Rounded Mplus 1c", "M PLUS Rounded 1c", sans-serif;
  background: #0d0a1a;
  color: #e8e3f5;
  user-select: none; -webkit-user-select: none;
}

.screen { display: none; min-height: 100dvh; flex-direction: column; }
.screen.active { display: flex; }

/* ===== ボタン共通 ===== */
.big-btn {
  font-family: inherit; font-weight: 900; font-size: 1.3rem; color: #fff;
  background: linear-gradient(180deg, #b8412f, #8e2418);
  border: 2px solid #e0764f; border-radius: 16px; padding: 16px 34px;
  box-shadow: 0 6px 0 #5c130b, 0 0 24px rgba(255, 80, 40, .35);
  cursor: pointer; transition: transform .08s;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #5c130b; }
.back-btn {
  font-family: inherit; font-size: 1.3rem; font-weight: 900; color: #c9bfe8;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; width: 44px; height: 44px; cursor: pointer;
}
.footer-btn {
  font-family: inherit; font-weight: 800; font-size: .95rem; color: #e8e3f5;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 12px 18px; cursor: pointer;
}
.mute-btn {
  position: fixed; right: 12px; bottom: 12px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.2rem;
  background: rgba(20,15,40,.8); border: 1px solid rgba(255,255,255,.2); cursor: pointer;
}

/* ===== タイトル ===== */
#screen-title { background: linear-gradient(180deg, #07051a 0%, #1a0f33 45%, #2d0f24 100%); overflow: hidden; position: relative; }
.title-sky { position: absolute; inset: 0; pointer-events: none; }
.t-star { position: absolute; color: #cdbfff; animation: twinkle 2.4s infinite; font-size: 14px; }
.s1 { left: 12%; top: 8%; } .s2 { left: 78%; top: 12%; animation-delay: .5s; }
.s3 { left: 30%; top: 18%; animation-delay: 1s; } .s4 { left: 60%; top: 6%; animation-delay: 1.4s; }
.s5 { left: 88%; top: 26%; animation-delay: .8s; } .s6 { left: 8%; top: 30%; animation-delay: 1.8s; }
@keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.title-moon { position: absolute; right: 8%; top: 6%; font-size: 3rem; filter: drop-shadow(0 0 20px rgba(255,230,150,.6)); }
.title-lightning { position: absolute; inset: 0; background: rgba(200,180,255,.85); opacity: 0; pointer-events: none; }
.title-lightning.flash { animation: lflash .5s; }
@keyframes lflash { 0% { opacity: 0; } 10% { opacity: .7; } 20% { opacity: 0; } 35% { opacity: .45; } 100% { opacity: 0; } }
.title-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 1; padding: 24px; }
.title-castle { font-size: 5.4rem; filter: drop-shadow(0 0 30px rgba(140,60,255,.55)); animation: castlefloat 4s ease-in-out infinite; }
@keyframes castlefloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.title-logo { text-align: center; }
.title-final {
  font-weight: 900; letter-spacing: .5em; color: #ffb340; font-size: 1.1rem;
  text-shadow: 0 0 14px rgba(255,160,40,.8); margin-bottom: 4px;
}
.title-main {
  font-size: 3rem; font-weight: 900; line-height: 1.15; color: #f3eeff;
  text-shadow: 0 4px 0 #3a1860, 0 0 34px rgba(150,80,255,.7);
}
.title-sub { margin-top: 10px; font-weight: 800; color: #b9a8e8; font-size: 1.05rem; }
.title-start { margin-top: 10px; animation: btnpulse 1.8s infinite; }
@keyframes btnpulse { 0%,100% { box-shadow: 0 6px 0 #5c130b, 0 0 18px rgba(255,80,40,.3); } 50% { box-shadow: 0 6px 0 #5c130b, 0 0 36px rgba(255,110,50,.65); } }
.title-equips { display: flex; gap: 6px; font-size: 1.5rem; min-height: 32px; }

/* ===== オープニング / エンディング ===== */
#screen-opening, #screen-ending { background: linear-gradient(180deg, #07051a, #170d2e); }
.opening-area, .ending-area {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 28px; text-align: center;
}
.op-emoji { font-size: 4.6rem; animation: castlefloat 3.4s ease-in-out infinite; }
.op-text { font-size: 1.2rem; font-weight: 800; line-height: 2; color: #e6defa; max-width: 520px; }
.op-text b { color: #ffb340; }

/* ===== マップ ===== */
#screen-map { background: linear-gradient(180deg, #0c0920, #1c1133 60%, #2a1027); }
.map-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 8px; }
.map-title { font-size: 1.25rem; font-weight: 900; color: #f0eaff; text-shadow: 0 0 12px rgba(150,90,255,.5); }
.map-status { display: flex; gap: 12px; font-weight: 900; color: #ffd75e; }
.map-areas { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; overflow-y: auto; }
.area-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255,255,255,.05); border: 2px solid; border-radius: 18px; cursor: pointer;
  position: relative; overflow: hidden;
}
.area-card:active { transform: scale(.98); }
.area-card.locked { filter: grayscale(.9); opacity: .5; }
.area-card.cleared::after {
  content: "⭐ クリア"; position: absolute; right: 12px; top: 10px;
  font-size: .72rem; font-weight: 900; color: #ffd75e;
}
.area-emoji { font-size: 2.6rem; filter: drop-shadow(0 0 10px rgba(255,255,255,.25)); }
.area-info { flex: 1; }
.area-name { font-size: 1.12rem; font-weight: 900; }
.area-desc { font-size: .8rem; color: #b6a9d8; margin-top: 2px; }
.area-boss { font-size: .8rem; margin-top: 4px; font-weight: 800; color: #ff8a73; }
.map-footer { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.map-footer .footer-btn { flex: 1; }

/* ===== ステージ選択 ===== */
#screen-stage { background: linear-gradient(180deg, #0c0920, #1d1233); }
.stage-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.stage-area-name { font-size: 1.15rem; font-weight: 900; }
.stage-intro { padding: 0 20px 6px; color: #b6a9d8; font-size: .88rem; font-weight: 700; line-height: 1.7; }
.stage-list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 24px; overflow-y: auto; }
.stage-card {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 16px; cursor: pointer;
}
.stage-card:active { transform: scale(.98); }
.stage-card.locked { opacity: .42; filter: grayscale(.8); }
.stage-card.boss {
  border-color: #ff5e43; background: linear-gradient(90deg, rgba(160,30,15,.3), rgba(70,10,40,.3));
  box-shadow: 0 0 16px rgba(255,70,40,.25);
}
.stage-card.maou {
  border-color: #b35aff; background: linear-gradient(90deg, rgba(90,20,140,.4), rgba(40,5,70,.45));
  box-shadow: 0 0 22px rgba(170,80,255,.4);
}
.stage-card.hoshi-boss {
  border-color: #8ea7ff; background: linear-gradient(90deg, rgba(45,40,130,.42), rgba(18,50,80,.38));
  box-shadow: 0 0 22px rgba(120,160,255,.38);
}
.stage-num { font-size: 1.8rem; min-width: 44px; text-align: center; }
.stage-label { flex: 1; font-weight: 900; font-size: 1rem; }
.stage-sub { font-size: .75rem; color: #b6a9d8; font-weight: 700; margin-top: 2px; }
.stage-stars { font-size: .95rem; letter-spacing: 1px; }

/* ===== つみき道場 ===== */
#screen-dojo { background: linear-gradient(180deg, #10141d, #1b2330 58%, #17261f); }
.dojo-map-card {
  border-color: #f6b23c !important;
  background: linear-gradient(90deg, rgba(246,178,60,.16), rgba(93,196,136,.11));
  box-shadow: 0 0 18px rgba(246,178,60,.18);
}
.dojo-map-card .area-boss { color: #7ee0a2; }
.dojo-screen-header { flex-shrink: 0; }
.dojo-area {
  flex: 1; overflow-y: auto; padding: 8px 16px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.dojo-home, .dojo-play, .dojo-explain {
  width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
}
.dojo-hero-card, .dojo-record-card, .dojo-summary-card {
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 16px; text-align: center;
}
.dojo-hero-card {
  background: radial-gradient(circle at 50% 0%, rgba(255,213,79,.18), rgba(255,255,255,.06) 55%);
  border-color: rgba(255,213,79,.38);
}
.dojo-emoji { font-size: 3.2rem; filter: drop-shadow(0 0 14px rgba(255,213,79,.35)); }
.dojo-title { font-size: 1.28rem; font-weight: 900; color: #fff4c0; margin-top: 4px; }
.dojo-rank-badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  margin-top: 10px; padding: 6px 16px; border-radius: 999px;
  background: rgba(126,224,162,.15); border: 1.5px solid rgba(126,224,162,.42);
  color: #baf7ca; font-weight: 900;
}
.dojo-start-btn { margin-top: 14px; width: min(100%, 330px); }
.dojo-card-title { font-size: 1rem; font-weight: 900; color: #ffd75e; margin-bottom: 10px; }
.dojo-record-grid, .dojo-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dojo-record-grid div, .dojo-summary-grid div {
  min-height: 70px; border-radius: 14px; background: rgba(255,255,255,.07);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.dojo-record-grid span, .dojo-summary-grid span { font-size: 1.55rem; font-weight: 900; color: #fff; }
.dojo-record-grid small, .dojo-summary-grid small { font-size: .72rem; color: #b6c7d5; font-weight: 800; }
.dojo-type-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.dojo-type-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: 12px; background: rgba(0,0,0,.16);
  font-weight: 850; font-size: .86rem; text-align: left;
}
.dojo-type-row b { color: #baf7ca; white-space: nowrap; }
.dojo-play-head {
  display: grid; grid-template-columns: minmax(76px, auto) 1fr minmax(70px, auto); gap: 8px; align-items: center;
}
.dojo-end-btn { padding: 10px 12px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); }
.dojo-head-rank, .dojo-head-score {
  min-height: 42px; border-radius: 12px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; font-weight: 900;
}
.dojo-head-rank { color: #fff4c0; }
.dojo-head-score { color: #baf7ca; }
.dojo-prompt { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.dojo-visual {
  min-height: 132px; padding: 10px; border-radius: 16px;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.16);
}
.dojo-options { padding-bottom: 10px; }
.dojo-options .q-option:disabled { cursor: default; }
.dojo-explain {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 12px;
}
.dojo-explain-title {
  text-align: center; font-size: 1.14rem; line-height: 1.55; font-weight: 900; color: #fff4c0;
  padding: 8px 10px; border-radius: 14px; background: rgba(255,213,79,.12);
}
.dojo-count-visual {
  min-height: 170px; display: flex; align-items: center; justify-content: center;
  background: #fffdf7; border: 3px solid #ffd75e; border-radius: 16px; overflow: hidden;
}
.dojo-count-visual svg { max-width: 100%; height: auto; }
.tsumiki-count-active { animation: tsumikiLabelPop .42s ease-out; }
@keyframes tsumikiLabelPop { 0% { transform: scale(.5); opacity: .2; } 65% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.dojo-count-note {
  min-height: 34px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 900; color: #cfe9ff; font-size: .9rem; line-height: 1.5;
}
.dojo-count-dots { text-align: center; color: #ffd75e; letter-spacing: 8px; animation: dojoDots 1.1s infinite; }
@keyframes dojoDots { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.dojo-got-btn { align-self: center; width: min(100%, 260px); font-size: 1.05rem; padding: 13px 24px; }
.dojo-explain-visual-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
  background: rgba(255,255,255,.08); border-radius: 16px; padding: 10px;
}
.dojo-explain-piece {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.88); border-radius: 14px; padding: 8px; color: #1d1433;
}
.dojo-explain-piece svg { max-width: 100%; height: auto; }
.dojo-mini-label { font-size: .78rem; font-weight: 900; color: #39495a; }
.dojo-explain-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: #ffd75e; font-weight: 900;
}
.dojo-explain-arrow span { font-size: 1.8rem; line-height: 1; }
.dojo-explain-arrow small { font-size: .68rem; white-space: nowrap; }
.dojo-assembly-explain {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border-radius: 16px; padding: 10px;
}
.dojo-parts-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.dojo-part-chip, .dojo-complete-shape {
  background: #fffdf7; border-radius: 14px; padding: 8px; border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
}
.dojo-part-chip.red { border-color: #ef5350; }
.dojo-part-chip.blue { border-color: #42a5f5; }
.dojo-part-chip svg, .dojo-complete-shape svg { max-width: 100%; height: auto; }
.dojo-plus, .dojo-down-arrow { font-size: 1.7rem; font-weight: 900; color: #ffd75e; }

/* ===== バトル ===== */
#screen-battle { background: linear-gradient(180deg, #120822, #241038 55%, #170a20); }
.battle-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px 4px; }
.battle-stage-name { font-weight: 900; font-size: 1rem; color: #d8ccf5; }
.battle-field { position: relative; display: flex; align-items: stretch; justify-content: space-between; padding: 6px 18px 2px; min-height: 128px; }
.enemy-zone { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.enemy-hp-wrap { width: 170px; }
.enemy-name { font-size: .82rem; font-weight: 900; color: #ffb1a3; text-align: right; margin-bottom: 3px; }
.hp-bar { height: 14px; background: rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.3); border-radius: 8px; overflow: hidden; }
.hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5440, #ff8a3d); border-radius: 6px; transition: width .45s; }
.enemy-sprite { font-size: 4.2rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(255,60,60,.45)); transition: transform .15s, filter .3s, opacity .5s; }
.enemy-sprite.boss-size { font-size: 5.2rem; }
.enemy-sprite.hit { animation: enemyhit .5s; }
@keyframes enemyhit { 0% { transform: translateX(0); filter: brightness(3) drop-shadow(0 0 22px #fff); } 25% { transform: translateX(14px) rotate(6deg); } 50% { transform: translateX(-10px); } 100% { transform: translateX(0); } }
.enemy-sprite.attack { animation: enemyattack .55s; }
@keyframes enemyattack { 0% { transform: translate(0,0) scale(1); } 35% { transform: translate(-60px, 36px) scale(1.25); } 70% { transform: translate(-60px, 36px) scale(1.15); } 100% { transform: translate(0,0) scale(1); } }
.enemy-sprite.dead { opacity: 0; transform: translateY(18px) rotate(50deg) scale(.4); }
.hero-zone { position: absolute; left: 18px; bottom: 4px; display: flex; flex-direction: column; gap: 4px; }
.hero-sprite { font-size: 3.3rem; line-height: 1; transition: transform .15s; position: relative; }
.hero-sprite::after { content: "⚔️"; position: absolute; right: -16px; bottom: 2px; font-size: 1.5rem; }
.hero-sprite.attack { animation: heroattack .5s; }
@keyframes heroattack { 0% { transform: translate(0,0); } 40% { transform: translate(46px, -22px) rotate(-8deg); } 100% { transform: translate(0,0); } }
.hero-sprite.hit { animation: herohit .55s; }
@keyframes herohit { 0%,100% { transform: translateX(0); filter: none; } 20% { transform: translateX(-10px); filter: brightness(2) sepia(1) hue-rotate(-50deg); } 50% { transform: translateX(8px); filter: brightness(2) sepia(1) hue-rotate(-50deg); } }
.hero-hearts { font-size: 1.05rem; letter-spacing: 1px; }
.battle-fx { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.fx-slash { animation: fxslash .5s forwards; }
@keyframes fxslash { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.4) rotate(10deg); } 100% { opacity: 0; transform: scale(1.7) rotate(20deg); } }

.battle-q { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
.q-prompt {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 12px 14px; font-weight: 800; font-size: 1.02rem; line-height: 1.6;
}
.speak-again { font-size: 1.1rem; background: none; border: none; cursor: pointer; padding: 0; }
.q-visual { display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: 1.7rem; text-align: center; flex-wrap: wrap; gap: 6px; line-height: 1.5; }
.q-visual svg { background: rgba(255,255,255,.92); border-radius: 12px; }
.q-options { display: grid; gap: 10px; }
.q-option {
  font-family: inherit; font-size: 1.35rem; font-weight: 900; color: #1d1433;
  background: linear-gradient(180deg, #f5f1ff, #d9d0f2); border: 2px solid #a48fd8;
  border-radius: 14px; padding: 14px 8px; cursor: pointer; min-height: 62px;
  display: flex; align-items: center; justify-content: center; line-height: 1.3;
}
.q-option:active { transform: scale(.97); }
.q-option svg { background: #fff; border-radius: 8px; }
.q-option.correct { background: linear-gradient(180deg, #b6f7c1, #6fdc85); border-color: #2e9e4a; animation: popcorrect .45s; }
.q-option.wrong { background: linear-gradient(180deg, #ffc4bc, #f59086); border-color: #c0392b; animation: shakewrong .45s; }
@keyframes popcorrect { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shakewrong { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 60% { transform: translateX(8px); } }

/* 記憶問題のカウントダウン */
.memorize-bar { text-align: center; font-weight: 900; color: #ffd75e; font-size: 1.05rem; }
.memorize-count { font-size: 1.6rem; }

/* ===== お話の記憶 ===== */
#screen-story { background: linear-gradient(180deg, #0d0a22, #1f1438); }
.story-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.story-card {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 22px; padding: 30px 24px; text-align: center; max-width: 480px; width: 100%;
}
.story-emoji { font-size: 3.6rem; }
.story-title { font-size: 1.3rem; font-weight: 900; margin-top: 10px; }
.story-note { color: #b6a9d8; font-weight: 700; margin-top: 12px; line-height: 1.8; font-size: .95rem; }
.story-wave { display: flex; gap: 5px; justify-content: center; margin-top: 18px; height: 30px; align-items: flex-end; }
.story-wave span { width: 7px; background: linear-gradient(180deg, #b35aff, #6a2fd0); border-radius: 4px; animation: wave 1s infinite ease-in-out; }
.story-wave span:nth-child(2) { animation-delay: .15s; } .story-wave span:nth-child(3) { animation-delay: .3s; }
.story-wave span:nth-child(4) { animation-delay: .45s; } .story-wave span:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 0%,100% { height: 8px; } 50% { height: 28px; } }
.story-memory {
  max-width: 540px; padding: 14px 16px; border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 16px; background: rgba(255,255,255,.08); color: #f2edff;
  font-size: .92rem; line-height: 1.85; text-align: left; font-weight: 800;
}
.story-memory-title { text-align: center; font-size: 1.08rem; color: #ffd75e; margin-bottom: 8px; }

/* ===== 結果 ===== */
#screen-result { background: radial-gradient(circle at 50% 30%, #2b1a4d, #0d0a1a 75%); }
.result-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px; text-align: center; }
.result-title { font-size: 2rem; font-weight: 900; text-shadow: 0 0 22px rgba(170,90,255,.6); }
.result-stars { font-size: 2.6rem; letter-spacing: 6px; }
.result-stars .dim { opacity: .22; }
.result-detail { font-weight: 800; color: #c9bce8; }
.result-equip {
  background: linear-gradient(180deg, rgba(255,200,60,.14), rgba(255,150,30,.07));
  border: 2px solid #ffb340; border-radius: 20px; padding: 18px 30px; margin-top: 6px;
  box-shadow: 0 0 30px rgba(255,170,50,.3);
}
.equip-label { font-weight: 900; color: #ffd75e; }
.equip-emoji { font-size: 3.4rem; margin-top: 6px; animation: equipget 1s; }
@keyframes equipget { 0% { transform: scale(0) rotate(-180deg); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.equip-name { font-weight: 900; margin-top: 4px; }
.result-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ===== そうび ===== */
#screen-equips { background: linear-gradient(180deg, #0c0920, #1d1233); }
.equips-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 14px 16px 30px; overflow-y: auto; align-content: start; }
.equip-card {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 16px; padding: 16px 8px; text-align: center;
}
.equip-card.owned { border-color: #ffb340; box-shadow: 0 0 14px rgba(255,170,50,.25); }
.equip-card.unknown { opacity: .4; filter: grayscale(1); }
.e-emoji { font-size: 2.4rem; }
.e-name { font-size: .82rem; font-weight: 900; margin-top: 6px; }
.e-desc { font-size: .68rem; color: #b6a9d8; margin-top: 3px; font-weight: 700; }

/* ===== 親画面 ===== */
#screen-parent { background: linear-gradient(180deg, #0c0920, #1d1233); }
.parent-area { flex: 1; padding: 14px 16px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.parent-gate {
  margin: auto; display: flex; flex-direction: column; gap: 14px; align-items: center;
  background: rgba(255,255,255,.06); border-radius: 20px; padding: 28px;
}
.parent-gate input {
  font-size: 1.4rem; width: 110px; text-align: center; padding: 9px;
  border-radius: 12px; border: 2px solid #7e57c2; background: #f5f1ff; color: #1d1433; font-weight: 900;
}
.parent-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 16px; }
.parent-card h3 { font-size: 1rem; margin-bottom: 12px; color: #e3d9ff; }
.stat-row { display: grid; grid-template-columns: 8.6em 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; font-size: .82rem; font-weight: 800; }
.stat-bar { height: 12px; background: rgba(0,0,0,.4); border-radius: 7px; overflow: hidden; }
.stat-fill { height: 100%; background: linear-gradient(90deg, #7e57c2, #b35aff); border-radius: 7px; }
.stat-fill.low { background: linear-gradient(90deg, #d35d3f, #ff8a3d); }
.stat-pct { color: #c9bce8; min-width: 7em; text-align: right; }
.parent-note { font-size: .85rem; line-height: 1.8; color: #c9bce8; font-weight: 600; }
.parent-note b { color: #ffd75e; }

/* ===== エンディング ===== */
.ending-title { font-size: 2.2rem; font-weight: 900; color: #ffd75e; text-shadow: 0 0 30px rgba(255,200,80,.7); }
.legend-ending { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.legend-sky { font-size: 4.9rem; filter: drop-shadow(0 0 26px rgba(140,170,255,.75)); animation: castlefloat 3.4s ease-in-out infinite; }
.legend-rank {
  font-size: 1.35rem; font-weight: 900; color: #e9f1ff; letter-spacing: .08em;
  border: 2px solid #ffd75e; border-radius: 999px; padding: 8px 18px;
  background: linear-gradient(180deg, rgba(255,215,94,.18), rgba(120,160,255,.14));
  box-shadow: 0 0 28px rgba(255,215,94,.32);
}

/* ===== 共通演出 ===== */
.toast {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%) scale(.8);
  background: rgba(20,12,40,.92); color: #fff; border: 1.5px solid rgba(255,255,255,.3);
  font-weight: 900; font-size: 1.15rem; padding: 12px 26px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: all .22s; z-index: 60; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
.flash-layer { position: fixed; inset: 0; background: radial-gradient(circle, rgba(255,230,150,.45), transparent 70%); pointer-events: none; z-index: 55; animation: flashfade .55s forwards; }
@keyframes flashfade { 0% { opacity: 1; } 100% { opacity: 0; } }
.damage-layer { position: fixed; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(255,30,30,.45)); pointer-events: none; z-index: 55; animation: flashfade .6s forwards; }
.spark { position: fixed; z-index: 58; pointer-events: none; animation: sparkfly .9s forwards ease-out; }
@keyframes sparkfly { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 57; overflow: hidden; }
.confetti-bit { position: absolute; top: -16px; border-radius: 3px; animation: confallm linear forwards; }
@keyframes confallm { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(105dvh) rotate(540deg); } }

/* 画面シェイク（ボス演出） */
.shake { animation: screenshake .45s; }
@keyframes screenshake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-7px,4px); } 45% { transform: translate(6px,-4px); } 70% { transform: translate(-4px,2px); } }

@media (min-width: 700px) {
  .map-areas, .stage-list, .battle-q { max-width: 640px; margin: 0 auto; width: 100%; }
  .battle-field { max-width: 640px; margin: 0 auto; width: 100%; }
}