/* ギャグコア — 小さく、静かに、洗練。色はスライムだけが持つ。 */
:root {
  --paper: #f7f5f0;
  --card: #fffdf9;
  --ink: #23211d;
  --sub: #8a857b;
  --line: #e5e0d5;
  --accent: #3f6f8e;
  --slime: #8fc3d8;
  --slime-deep: #6ea9c4;
  --metal: #c9ccd1;
  --metal-deep: #a8adb6;
  --gold: #d9a941;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 18px 28px; min-height: 100svh; display: flex; flex-direction: column; }
.screen { display: none; }
.screen.active { display: block; animation: fadein .45s cubic-bezier(.22,.8,.3,1); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } .slime-body { animation: none !important; } }

/* タイトル */
.brand { font-size: 11px; letter-spacing: .32em; color: var(--sub); text-align: center; margin-top: 26px; }
.title-slime { display: flex; justify-content: center; padding: 34px 0 4px; }
.game-title { font-size: 30px; font-weight: 700; text-align: center; letter-spacing: .04em; }
.tagline { text-align: center; color: #55524b; margin-top: 12px; font-size: 14px; }
.title-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 30px; }
.btn {
  appearance: none; border: 1px solid var(--ink); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; padding: 11px 34px; border-radius: 999px; cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.8,.3,1), background .25s;
}
.btn.primary { background: var(--ink); color: #fff; }
.btn:active { transform: scale(.97); }
.btn.wide { width: 100%; margin-top: 12px; }
.note { font-size: 12px; color: var(--sub); min-height: 1em; }
.howto-link { text-align: center; margin-top: 26px; font-size: 13px; }
.howto-link a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.fineprint { text-align: center; color: var(--sub); font-size: 12px; margin-top: 14px; }

/* バトル */
.battle-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
#battle-no { font-size: 11px; letter-spacing: .22em; color: var(--sub); }
#enemy-name { font-size: 17px; font-weight: 700; }
.enemy-hpbar { position: relative; height: 16px; background: #ece8de; border-radius: 999px; margin-top: 8px; overflow: hidden; }
#enemy-hp-fill { height: 100%; width: 100%; background: var(--slime-deep); border-radius: 999px; transition: width .5s cubic-bezier(.22,.8,.3,1); }
#enemy-hp-text { position: absolute; inset: 0; font-size: 10px; line-height: 16px; text-align: center; color: #4c463c; letter-spacing: .08em; }
#enemy-stage { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 0; padding: 0; }
.enemy-wrap { display: flex; align-items: flex-end; justify-content: center; }
.split-row { gap: 6px; flex-wrap: wrap; max-width: 340px; }

.log {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; height: 168px; overflow-y: auto; font-size: 13.5px;
}
.log-line { animation: fadein .35s cubic-bezier(.22,.8,.3,1); margin-bottom: 4px; }
.hero-status {
  display: flex; gap: 14px; align-items: baseline; font-size: 12.5px; color: #55524b;
  padding: 10px 2px 2px;
}
.hero-name { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.commands { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.cmd {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; padding: 13px 0; border-radius: var(--radius); cursor: pointer;
  transition: transform .2s cubic-bezier(.22,.8,.3,1), border-color .2s;
}
.cmd:active { transform: scale(.97); }
.cmd:disabled { opacity: .45; }
.cmd.sub { grid-column: span 1; font-size: 14px; padding: 11px 0; }
.cmd.sub.back { color: var(--sub); }
.submenu-title { grid-column: 1 / -1; font-size: 11px; letter-spacing: .22em; color: var(--sub); }

/* スライム（SVGレス・CSS造形） */
.slime { position: relative; width: calc(84px * var(--s, 1)); height: calc(76px * var(--s, 1)); transition: width .8s cubic-bezier(.22,.8,.3,1), height .8s cubic-bezier(.22,.8,.3,1); }
.slime-shadow {
  position: absolute; left: 50%; bottom: -5%; width: 86%; height: 10%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(38,42,30,.28) 0%, rgba(38,42,30,0) 68%);
}
.slime-body {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--slime) 0%, var(--slime-deep) 100%);
  border-radius: 48% 52% 44% 44% / 68% 70% 30% 30%;
  animation: puru 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes puru { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.035,.965); } }
.slime .eye {
  position: absolute; top: 42%; width: 7.5%; height: 12%;
  background: #20303a; border-radius: 999px;
}
.slime .eye.left { left: 33%; } .slime .eye.right { right: 33%; }
.slime .mouth {
  position: absolute; top: 58%; left: 50%; width: 16%; height: 9%;
  border-bottom: 2px solid #20303a; border-radius: 0 0 999px 999px; transform: translateX(-50%);
}
.slime-metal .slime-body { background: linear-gradient(180deg, #e3e6ea 0%, var(--metal) 55%, var(--metal-deep) 100%); }
.slime-metal .foil {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 45%, transparent 60%);
}
.slime-metal.foil-off .slime-body { background: linear-gradient(180deg, var(--slime) 0%, var(--slime-deep) 100%); }
.slime-metal.foil-off .foil { display: none; }
.slime-king .slime-body { background: linear-gradient(180deg, #a8d2e2 0%, #77aec9 100%); }
.crown {
  position: absolute; top: -14%; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 44%; height: 22%;
  background: linear-gradient(180deg, #eec95e, var(--gold));
  clip-path: polygon(0 100%, 0 30%, 22% 62%, 50% 8%, 78% 62%, 100% 30%, 100% 100%);
}

/* エンディング */
.end-title { font-size: 22px; text-align: center; margin-top: 22px; }
.end-copy { text-align: center; color: #55524b; font-size: 14px; margin-top: 16px; }
.end-stats { margin: 26px auto 0; max-width: 300px; border-top: 1px solid var(--line); }
.end-stats div { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.end-stats dt { color: var(--sub); }
.end-stats dd { font-weight: 700; }

/* ガイド */
.guide h1 { font-size: 22px; margin: 18px 0 10px; }
.guide h2 { font-size: 16px; margin: 26px 0 8px; }
.guide p, .guide li { font-size: 14px; color: #3d3a34; }
.guide ul, .guide ol { padding-left: 1.3em; }
.guide details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 10px 14px; margin: 10px 0; }
.guide summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.guide .back { display: inline-block; margin-top: 28px; }



/* === Appify 2026-10-28: play surface fixed to viewport (game page only, scoped by body.game) === */
html:has(> body.game){height:100%;overflow:hidden;overscroll-behavior:none}
body.game{position:fixed;inset:0;left:0;right:0;margin-left:auto;margin-right:auto;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body.game .wrap{height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
body.game .log{overscroll-behavior:contain;touch-action:pan-y}

/* === Quality pass 2026-10-28: シーン / 表情 / ジュース / 音UI === */

/* --- 戦闘シーン --- */
.scene {
  position: relative; height: 238px; margin-top: 10px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #fdf8ea 0%, #f6eed6 38%, #eee3c8 58%, #e7dbbd 100%);
  box-shadow: inset 0 0 0 1px rgba(120,105,70,.14), inset 0 -18px 30px rgba(120,105,70,.10);
}
.cloud {
  position: absolute; background: rgba(255,255,255,.85); border-radius: 999px;
  filter: blur(1px); animation: drift 11s ease-in-out infinite alternate;
}
.cloud.c1 { width: 74px; height: 18px; top: 20px; left: 8%; }
.cloud.c2 { width: 52px; height: 13px; top: 44px; right: 10%; animation-duration: 14s; }
.cloud::after { content: ""; position: absolute; width: 55%; height: 190%; left: 22%; top: -80%; background: inherit; border-radius: 50%; }
@keyframes drift { from { transform: translateX(-7px); } to { transform: translateX(9px); } }
.hill { position: absolute; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill.h-back { width: 125%; left: -32%; bottom: 40%; height: 92px; background: linear-gradient(180deg, #dde3c6, #ccd6b2); }
.hill.h-front { width: 115%; right: -42%; bottom: 38.5%; height: 72px; background: linear-gradient(180deg, #ccd8ae, #bccda0); }
.ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, #bccf95 0%, #a9c07d 46%, #96ab68 100%);
}
.ground::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,240,.20) 1.2px, transparent 1.4px),
                    radial-gradient(rgba(70,90,40,.13) 1.2px, transparent 1.4px);
  background-size: 15px 15px, 23px 23px; background-position: 0 0, 7px 9px;
}
.ground::after {
  content: ""; position: absolute; left: 50%; bottom: 6%; width: 78%; height: 34%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(146,120,78,.30) 0%, rgba(146,120,78,0) 70%);
}
.actors { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; align-items: flex-end; padding: 0 16px; }
#fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

/* --- スライムの質感 --- */
.slime-body::before { /* つや */
  content: ""; position: absolute; top: 9%; left: 16%; width: 34%; height: 24%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%; transform: rotate(-14deg); z-index: 1;
}
.slime-body::after { /* 底の内影 */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 20%;
  background: radial-gradient(ellipse at center, rgba(30,70,95,.20) 0%, rgba(30,70,95,0) 72%);
  border-radius: 50%;
}
.slime .eye, .slime .mouth, .slime .brow { z-index: 2; transition: all .18s ease; }
.slime .brow {
  position: absolute; top: 30%; width: 15%; height: 3.5%;
  background: #20303a; border-radius: 999px; opacity: 0;
}
.slime .brow.left { left: 27%; } .slime .brow.right { right: 27%; }
.slime .cheek {
  position: absolute; top: 55%; width: 15%; height: 9%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(244,143,150,.75) 0%, rgba(244,143,150,0) 72%);
  opacity: 0; transition: opacity .25s ease; z-index: 1;
}
.slime .cheek.left { left: 13%; } .slime .cheek.right { right: 13%; }

/* 表情差分（.slime に face-* を付ける） */
.slime.face-surprised .eye { transform: scale(1.35); }
.slime.face-surprised .mouth {
  width: 9%; height: 10%; border: 2px solid #20303a; border-radius: 50%; background: rgba(32,48,58,.15);
}
.slime.face-surprised .brow { opacity: .9; }
.slime.face-surprised .brow.left { transform: translateY(-30%) rotate(-14deg); }
.slime.face-surprised .brow.right { transform: translateY(-30%) rotate(14deg); }
.slime.face-smug .eye { transform: scaleY(.42) translateY(30%); }
.slime.face-smug .brow { opacity: .85; }
.slime.face-smug .brow.left { transform: rotate(10deg); }
.slime.face-smug .brow.right { transform: rotate(-10deg); }
.slime.face-smug .mouth { width: 19%; transform: translateX(-18%) rotate(-4deg); border-radius: 0 0 999px 0; }
.slime.face-sad .eye { transform: translateY(26%) scaleY(.75); }
.slime.face-sad .brow { opacity: .9; }
.slime.face-sad .brow.left { transform: rotate(-20deg); }
.slime.face-sad .brow.right { transform: rotate(20deg); }
.slime.face-sad .mouth {
  top: 66%; width: 13%; height: 8%;
  border-bottom: none; border-top: 2px solid #20303a; border-radius: 999px 999px 0 0;
}
.slime.face-happy .eye {
  background: transparent; height: 11%;
  border-top: 3px solid #20303a; border-radius: 50%;
}
.slime.face-happy .mouth { width: 23%; height: 13%; border-bottom-width: 3px; }
.slime.face-happy .cheek { opacity: .6; }
.slime.face-dizzy .eye { background: transparent; }
.slime.face-dizzy .eye::before, .slime.face-dizzy .eye::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 20%;
  background: #20303a; border-radius: 999px;
}
.slime.face-dizzy .eye::before { transform: translate(-50%,-50%) rotate(45deg); }
.slime.face-dizzy .eye::after { transform: translate(-50%,-50%) rotate(-45deg); }
.slime.face-dizzy .mouth {
  width: 10%; height: 9%; border: 2px solid #20303a; border-radius: 50%; background: rgba(32,48,58,.12);
}

/* --- 勇者 --- */
.hero { position: relative; width: 64px; height: 96px; flex: none; }
.hero-shadow {
  position: absolute; left: 50%; bottom: 0; width: 46px; height: 9px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(38,42,30,.30) 0%, rgba(38,42,30,0) 68%);
}
.hero-fig { position: absolute; left: 50%; bottom: 5px; width: 60px; height: 88px; transform: translateX(-50%); transform-origin: 50% 100%; animation: heroBob 2.8s ease-in-out infinite; }
@keyframes heroBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-1.6px); } }
.hero-head {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  width: 45px; height: 45px; border-radius: 50%;
  background: linear-gradient(180deg, #f6d3a4, #eebd87);
  box-shadow: inset -3px -4px 6px rgba(160,100,40,.18);
}
.hero-helm {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 24px; border-radius: 24px 24px 6px 6px;
  background: linear-gradient(180deg, #dde2e8, #a7b0ba);
  box-shadow: inset 0 -3px 4px rgba(70,85,100,.25);
}
.hero-helm::after {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 13px; border-radius: 5px 5px 2px 2px; background: #b26a4c;
}
.h-eye { position: absolute; top: 55%; width: 5px; height: 8px; background: #26313a; border-radius: 999px; transition: all .15s ease; }
.h-eye.left { left: 27%; } .h-eye.right { right: 27%; }
.h-mouth {
  position: absolute; top: 72%; left: 50%; width: 12px; height: 7px;
  border-bottom: 2.4px solid #26313a; border-radius: 0 0 999px 999px; transform: translateX(-50%);
  transition: all .15s ease;
}
.hero.face-shock .h-eye { transform: scale(1.3); }
.hero.face-shock .h-mouth { width: 7px; height: 7px; border: 2px solid #26313a; border-radius: 50%; background: rgba(38,49,58,.12); }
.hero.face-proud .h-eye { background: transparent; height: 6px; border-top: 2.4px solid #26313a; border-radius: 50%; }
.hero.face-proud .h-mouth { width: 12px; height: 7px; }
.hero.face-hurt .h-eye { transform: scaleY(.35); }
.hero.face-hurt .h-mouth { top: 78%; width: 9px; height: 5px; border-bottom: none; border-top: 2px solid #26313a; border-radius: 999px 999px 0 0; }
.hero-torso {
  position: absolute; top: 47px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 24px; border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #647b8f, #4d6172);
  box-shadow: inset 0 -5px 7px rgba(20,35,50,.25);
}
.hero-torso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 4px; background: #7a5c3e; }
.hero-legs { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 26px; height: 13px; }
.hero-legs .leg { position: absolute; top: 0; width: 10px; height: 12px; border-radius: 4px; background: #474a4c; }
.hero-legs .leg.l { left: 2px; } .hero-legs .leg.r { right: 2px; }
.hero-sword {
  position: absolute; top: 48px; right: -2px; width: 6px; height: 30px;
  border-radius: 3px; background: linear-gradient(90deg, #eef1f4, #b7bfc8);
  transform: rotate(24deg); transform-origin: 50% 6px; z-index: 3;
  box-shadow: 1px 1px 2px rgba(40,50,60,.25);
}
.hero-sword::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 15px; height: 4px; border-radius: 2px; background: #c9a24d; }
.hero-sword::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 5px; height: 7px; border-radius: 2px; background: #6b4f35; }

/* 勇者のアクション */
.hero.swing .hero-fig { animation: heroLunge .42s cubic-bezier(.22,.8,.3,1); }
.hero.swing .hero-sword { animation: swordSwing .42s cubic-bezier(.22,.8,.3,1); }
@keyframes heroLunge {
  0% { transform: translateX(-50%) translateY(0); }
  35% { transform: translateX(calc(-50% + 30px)) translateY(-2px); }
  60% { transform: translateX(calc(-50% + 26px)) translateY(0); }
  100% { transform: translateX(-50%) translateY(0); }
}
@keyframes swordSwing {
  0% { transform: rotate(24deg); }
  35% { transform: rotate(-96deg); }
  60% { transform: rotate(-78deg); }
  100% { transform: rotate(24deg); }
}
.hero.hurt .hero-fig { animation: heroHurt .34s cubic-bezier(.22,.8,.3,1); }
@keyframes heroHurt {
  0% { transform: translateX(-50%); }
  30% { transform: translateX(calc(-50% - 9px)) rotate(-4deg); }
  100% { transform: translateX(-50%); }
}
.hero.down .hero-fig { animation: none; transform: translateX(-50%) translateY(16px) rotate(-64deg); transition: transform .45s cubic-bezier(.22,.8,.3,1); }

/* --- スライムのアクション（ジュース） --- */
.enemy-wrap.fx-hit .slime-body { animation: squashHit .42s cubic-bezier(.22,.8,.3,1); }
@keyframes squashHit {
  0% { transform: scale(1,1); }
  28% { transform: scale(1.24,.7); }
  55% { transform: scale(.95,1.06); }
  78% { transform: scale(1.02,.98); }
  100% { transform: scale(1,1); }
}
.enemy-wrap.fx-clink { animation: clink .24s ease-in-out; }
@keyframes clink { 0%,100% { transform: translateX(0); } 30% { transform: translateX(2.5px); } 65% { transform: translateX(-2px); } }
.enemy-wrap.fx-wiggle .slime-body { animation: wiggle .55s ease-in-out; }
@keyframes wiggle {
  0%,100% { transform: rotate(0); }
  22% { transform: rotate(3.4deg) scale(1.03,.97); }
  48% { transform: rotate(-3deg) scale(.98,1.03); }
  72% { transform: rotate(2deg); }
}
.enemy-wrap.fx-appear { animation: appearDrop .55s cubic-bezier(.22,.8,.3,1); }
@keyframes appearDrop {
  0% { transform: translateY(-30px) scale(.94,1.05); opacity: 0; }
  55% { transform: translateY(0) scale(1.1,.86); opacity: 1; }
  78% { transform: translateY(-3px) scale(.98,1.03); }
  100% { transform: translateY(0) scale(1,1); }
}
.enemy-wrap.fx-nod .slime-body { animation: nod .5s cubic-bezier(.22,.8,.3,1); }
@keyframes nod { 0%,100% { transform: scale(1,1); } 40% { transform: scale(1.06,.92) translateY(2px); } }
.scene.hitstop .slime-body, .scene.hitstop .hero-fig { animation-play-state: paused; }
.scene.shake { animation: sceneShake .2s ease-in-out; }
@keyframes sceneShake { 0%,100% { transform: translate(0,0); } 30% { transform: translate(2.5px,1px); } 65% { transform: translate(-2px,-1px); } }

/* --- ダメージ数字・パーティクル --- */
.dmg {
  position: absolute; z-index: 5; font-weight: 800; line-height: 1;
  transform: translate(-50%,-50%); pointer-events: none; white-space: nowrap;
}
.dmg.huge {
  font-size: 46px; color: #fffdf6;
  text-shadow: 0 2px 0 #3c4a56, 0 0 14px rgba(255,255,255,.5), 2px 0 0 #3c4a56, -2px 0 0 #3c4a56, 0 -2px 0 #3c4a56;
  animation: dmgRise 1.05s cubic-bezier(.22,.8,.3,1) forwards;
}
.dmg.one {
  font-size: 52px; color: #a49e90;
  text-shadow: 0 2px 0 rgba(255,253,246,.85);
  animation: dmgDroop 1.5s cubic-bezier(.4,.6,.4,1) forwards;
}
.dmg.zero { font-size: 32px; color: #828a93; animation: dmgRise 0.9s ease-out forwards; }
.dmg.hero { font-size: 21px; color: #b3543f; text-shadow: 0 1px 0 rgba(255,253,246,.8); animation: dmgRise 0.95s ease-out forwards; }
@keyframes dmgRise {
  0% { opacity: 0; transform: translate(-50%,-30%) scale(.7); }
  16% { opacity: 1; transform: translate(-50%,-62%) scale(1.06); }
  30% { transform: translate(-50%,-70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-150%) scale(.98); }
}
@keyframes dmgDroop {
  0% { opacity: 0; transform: translate(-50%,-40%) scale(.8) rotate(0); }
  18% { opacity: 1; transform: translate(-50%,-66%) scale(1.04) rotate(-2deg); }
  55% { transform: translate(-50%,-58%) scale(1) rotate(-7deg); }
  100% { opacity: 0; transform: translate(-50%,-6%) scale(.96) rotate(-11deg); }
}
.pt { position: absolute; z-index: 6; pointer-events: none; animation: ptFloat .9s cubic-bezier(.22,.8,.3,1) forwards; }
.pt.dot { width: 6px; height: 6px; border-radius: 50%; }
.pt.star {
  width: 11px; height: 11px;
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}
.pt.rect { width: 5px; height: 9px; border-radius: 1.5px; }
.pt.drop {
  width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #7fb2d9;
}
@keyframes ptFloat {
  0% { opacity: 0; transform: translate(0,0) scale(.5) rotate(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-46px)) scale(1) rotate(var(--rot,40deg)); }
}

/* --- ログの演出 --- */
.log { cursor: pointer; }
.log-line.say { color: #35322c; }
.log-line.punch { font-weight: 700; color: var(--ink); animation: punchIn .32s cubic-bezier(.22,.8,.3,1); }
.log-line.sad1 { color: #97917f; letter-spacing: .05em; }
@keyframes punchIn { from { opacity: 0; transform: translateX(5px) scale(.985); } to { opacity: 1; transform: none; } }

/* --- サウンドUI --- */
.sound-bar { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.snd-btn {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--sub);
  font: inherit; font-size: 11.5px; letter-spacing: .06em; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  transition: transform .2s cubic-bezier(.22,.8,.3,1), color .2s, border-color .2s;
}
.snd-btn:active { transform: scale(.95); }
.snd-btn .snd-state { font-weight: 700; color: var(--sub); }
.snd-btn.on { color: var(--ink); border-color: #c9c2b2; }
.snd-btn.on .snd-state { color: var(--accent); }
.sound-bar.mini { margin: 0 0 0 auto; gap: 5px; justify-content: flex-end; }
.sound-bar.mini .snd-btn { padding: 2.5px 9px; font-size: 10px; }
.battle-head { align-items: center; flex-wrap: wrap; row-gap: 4px; }

/* --- HPバーの艶 --- */
#enemy-hp-fill { box-shadow: inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(30,70,95,.25); }

@media (prefers-reduced-motion: reduce) {
  .cloud, .hero-fig { animation: none !important; }
  .scene.shake { animation: none; }
  .pt { animation-duration: .01s; }
}

/* === Realism pass 2026-10-29: 環境の作り込み（描画のみ・キャラ造形は不変） === */

/* --- 空と光 --- */
.scene {
  background: linear-gradient(180deg, #f3ecd2 0%, #f8f1da 30%, #f6eed6 44%, #eee3c8 60%, #e7dbbd 100%);
  box-shadow: inset 0 0 0 1px rgba(120,105,70,.16), inset 0 -18px 30px rgba(120,105,70,.10),
              inset 0 10px 22px rgba(255,252,240,.55), 0 2px 10px rgba(90,75,45,.08);
}
.scene::before { /* 上からの柔らかい光 */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,246,.20) 0%, rgba(255,255,246,0) 42%);
}
.scene::after { /* 周辺の空気感（ビネット） */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 118% 96% at 50% 42%, rgba(0,0,0,0) 62%, rgba(94,78,44,.13) 100%);
}
.sun {
  position: absolute; top: 13px; right: 34px; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fffbe9 0%, #fdf0bc 58%, #f7df94 100%);
  box-shadow: 0 0 22px 9px rgba(250,226,150,.50), 0 0 52px 26px rgba(250,226,150,.20);
}
.cloud { box-shadow: inset 0 -5px 7px rgba(176,168,138,.20), 0 3px 6px rgba(150,138,100,.10); }
.cloud.c3 { width: 40px; height: 10px; top: 62px; left: 38%; animation-duration: 17s; opacity: .8; }
.birds { position: absolute; top: 26px; left: 0; width: 100%; height: 12px; pointer-events: none; animation: birdsFly 46s linear infinite; }
.birds i {
  position: absolute; width: 11px; height: 6px; opacity: .34;
  border-top: 2px solid #6d725f; border-radius: 50%;
}
.birds i:first-child { left: 12%; top: 0; }
.birds i:last-child { left: calc(12% + 17px); top: 5px; transform: scale(.72); }
@keyframes birdsFly { from { transform: translateX(-14%); } to { transform: translateX(104%); } }

/* --- 丘と遠景の木 --- */
.hill.h-back { background: linear-gradient(180deg, #e2e7cb 0%, #d5ddba 55%, #ccd6b2 100%); box-shadow: inset 0 6px 8px -4px rgba(255,255,244,.65); }
.hill.h-front { background: linear-gradient(180deg, #d2deb4 0%, #c3d1a3 55%, #bccda0 100%); box-shadow: inset 0 5px 7px -4px rgba(255,255,244,.55); }
.tree { position: absolute; pointer-events: none; }
.tree::before { /* 幹 */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 38%;
  transform: translateX(-50%); background: rgba(110,96,66,.75); border-radius: 2px;
}
.tree::after { /* 樹冠 */
  content: ""; position: absolute; left: 50%; bottom: 30%; width: 92%; height: 74%;
  transform: translateX(-50%); border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 38% 30%, rgba(255,255,240,.28) 0%, rgba(255,255,240,0) 55%),
              linear-gradient(180deg, #a9bd8b, #8fa873);
  box-shadow: inset -4px -5px 7px rgba(70,90,45,.22);
}
.tree.t-back { width: 27px; height: 36px; left: 5%; bottom: 41%; opacity: .72; filter: blur(.4px); }
.tree.t-front { width: 36px; height: 47px; right: 4.5%; bottom: 40.5%; opacity: .92; }

/* --- 地面：地層・小道・質感 --- */
.ground {
  background: linear-gradient(180deg, #c3d198 0%, #b0c281 30%, #a3ba74 62%, #93a964 88%, #879c5c 100%);
  box-shadow: inset 0 10px 14px -8px rgba(255,255,238,.50), inset 0 -12px 16px -6px rgba(74,94,44,.28);
}
.ground::before {
  background-image: radial-gradient(rgba(255,255,240,.22) 1.2px, transparent 1.5px),
                    radial-gradient(rgba(70,90,40,.15) 1.2px, transparent 1.5px),
                    radial-gradient(rgba(255,250,225,.13) 2.2px, transparent 2.6px);
  background-size: 15px 15px, 23px 23px, 41px 41px; background-position: 0 0, 7px 9px, 13px 21px;
}
.ground::after { /* 踏みしめられた小道の土 */
  left: 50%; bottom: 3%; width: 88%; height: 40%;
  background: radial-gradient(ellipse at center, rgba(158,132,84,.34) 0%, rgba(158,132,84,.16) 52%, rgba(158,132,84,0) 72%);
}
.cloud-shadow {
  position: absolute; left: 8%; bottom: 4%; width: 46%; height: 26%; pointer-events: none;
  border-radius: 50%; opacity: .55;
  background: radial-gradient(ellipse at center, rgba(88,104,58,.20) 0%, rgba(88,104,58,0) 68%);
  animation: cloudShadow 15s ease-in-out infinite alternate;
}
@keyframes cloudShadow { from { transform: translateX(-12px); } to { transform: translateX(26px); } }

/* --- 地面の小物 --- */
.props { position: absolute; inset: 0; pointer-events: none; }
.tuft {
  position: absolute; width: 17px; height: 13px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #9db877, #7f9c58);
  clip-path: polygon(0 100%, 5% 34%, 12% 100%, 23% 14%, 31% 100%, 43% 4%, 53% 100%, 64% 18%, 73% 100%, 85% 28%, 93% 100%, 100% 44%, 100% 100%);
  animation: tuftSway 5.5s ease-in-out infinite alternate;
}
.tuft.small { width: 12px; height: 9px; opacity: .85; animation-duration: 6.5s; }
@keyframes tuftSway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
.flower { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fdf6e3; box-shadow: inset 0 0 0 1.6px #eec95e; }
.flower::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.6px; height: 6px; transform: translateX(-50%); background: rgba(110,140,80,.8); border-radius: 2px; }
.flower.pink { background: #f6ccd4; box-shadow: inset 0 0 0 1.6px #e9a7b4; }
.pebble {
  position: absolute; width: 13px; height: 7px; border-radius: 50%;
  background: linear-gradient(180deg, #d9d2c0, #bdb49c);
  box-shadow: inset 0 -2px 3px rgba(105,92,64,.30), 0 1px 2px rgba(80,70,45,.18);
}
.pebble.small { width: 9px; height: 5px; opacity: .9; }

/* --- 漂う綿毛・光の粒 --- */
.motes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.motes i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,253,238,.95) 0%, rgba(255,253,238,0) 70%);
  opacity: 0; animation: moteFloat 11s ease-in-out infinite;
}
.motes i:nth-child(1) { left: 16%; top: 58%; animation-delay: 0s; }
.motes i:nth-child(2) { left: 34%; top: 40%; animation-delay: 2.6s; width: 3px; height: 3px; }
.motes i:nth-child(3) { left: 57%; top: 52%; animation-delay: 5.2s; }
.motes i:nth-child(4) { left: 74%; top: 36%; animation-delay: 1.4s; width: 5px; height: 5px; }
.motes i:nth-child(5) { left: 88%; top: 60%; animation-delay: 7.4s; width: 3px; height: 3px; }
@keyframes moteFloat {
  0%, 100% { opacity: 0; transform: translate(0, 4px); }
  30% { opacity: .75; }
  55% { opacity: .5; transform: translate(7px, -9px); }
  80% { opacity: .65; transform: translate(-4px, -15px); }
}

/* --- バトル別の空気（色調のみ・寸法/進行は不変） --- */
.scene[data-battle="metal"] { background: linear-gradient(180deg, #eef0e9 0%, #f2f1e6 34%, #eee9d6 52%, #e6ddc6 100%); }
.scene[data-battle="metal"] .ground { background: linear-gradient(180deg, #bcc9a4 0%, #a9ba8c 34%, #9cae7f 64%, #8ba173 100%); }
.scene[data-battle="king"] { background: linear-gradient(180deg, #f9ecc9 0%, #f9efd4 26%, #f6e7c4 48%, #eedcae 100%); }
.scene[data-battle="king"] .sun { top: 20px; right: 26px; width: 40px; height: 40px; box-shadow: 0 0 26px 12px rgba(250,220,140,.60), 0 0 60px 30px rgba(250,220,140,.26); }
.scene[data-battle="king"] .ground { background: linear-gradient(180deg, #c8d194 0%, #b5c07c 32%, #a6b56e 64%, #93a45e 100%); }

/* --- 着地・出現の土ぼこり --- */
.pt.puff {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,184,150,.80) 0%, rgba(198,184,150,0) 68%);
  animation: ptPuff .85s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes ptPuff {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  22% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-8px)) scale(1.6); }
}

/* --- 会話ウィンドウの質感（紙の凹面） --- */
.log {
  background: linear-gradient(180deg, #fffefb 0%, #fdfaf2 70%, #faf5ea 100%);
  border-color: #ddd5c2;
  box-shadow: inset 0 2px 7px rgba(122,106,70,.09), inset 0 -1px 0 rgba(255,255,255,.9),
              inset 1px 0 0 rgba(255,255,255,.6), 0 1px 3px rgba(90,75,45,.05);
  scrollbar-width: thin; scrollbar-color: #d5cdb8 transparent;
}
.log::-webkit-scrollbar { width: 7px; }
.log::-webkit-scrollbar-thumb { background: #d5cdb8; border-radius: 99px; }
.log::-webkit-scrollbar-track { background: transparent; }

/* --- コマンド・ボタンの面の厚み --- */
.cmd {
  box-shadow: 0 1px 2px rgba(74,62,38,.07), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(122,106,70,.05);
}
.cmd:active { box-shadow: 0 0 1px rgba(74,62,38,.08), inset 0 1px 3px rgba(122,106,70,.10); }
.btn { box-shadow: 0 1px 2px rgba(74,62,38,.08), inset 0 1px 0 rgba(255,255,255,.7); }
.btn.primary { box-shadow: 0 2px 5px rgba(35,33,29,.22), inset 0 1px 0 rgba(255,255,255,.16); }
.enemy-hpbar { box-shadow: inset 0 2px 4px rgba(105,90,55,.18), inset 0 -1px 0 rgba(255,255,255,.65); }
#enemy-hp-fill { background: linear-gradient(180deg, #93c2da 0%, var(--slime-deep) 55%, #639ec0 100%); }

/* --- タイトル／エンディングの空気 --- */
.title-slime { position: relative; }
.title-slime::before {
  content: ""; position: absolute; left: 50%; top: 44%; width: 300px; height: 220px;
  transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(250,232,170,.38) 0%, rgba(250,232,170,0) 66%);
}
#screen-ending { position: relative; }
#screen-ending::before {
  content: ""; position: absolute; left: 50%; top: -30px; width: 340px; height: 240px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(250,232,170,.30) 0%, rgba(250,232,170,0) 68%);
}

@media (prefers-reduced-motion: reduce) {
  .birds, .tuft, .cloud-shadow, .motes i { animation: none !important; }
  .motes i { opacity: .35; }
}

/* === Recheck 2026-10-29: 新条件一式（長押し全廃／収納再編／チップ回避／プレイヤーチップ／カタログ／ネイティブ級演出） === */
/* --- 長押しポップアップ全廃: プレイ面は callout/選択を止める（本作にテキスト入力欄はない） --- */
body.game .wrap, body.game .wrap * { -webkit-touch-callout: none; }
body.game .wrap, body.game .wrap * { user-select: none; -webkit-user-select: none; }
/* --- CENTERチップ回避: バトル中（操作要素が右上に集まる面）はチップ自体を隠す本作側回避（共通キット無変更） --- */
body.in-battle #azc-chip, body.in-battle #azc-menu { display: none !important; }
/* --- CENTERアバター／名前（プレイヤー本人・全タイトル共通の見せ方。ゲーム内キャラとは別物） --- */
.az-player { display: flex; align-items: center; gap: 9px; }
.azp-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; background: #ece7da; box-shadow: 0 0 0 1px var(--line), 0 3px 7px rgba(35,33,29,.12); }
.azp-av svg, .azp-av img { width: 36px; height: 36px; display: block; object-fit: cover; }
.azp-meta { display: flex; flex-direction: column; line-height: 1.3; text-align: left; min-width: 0; }
.azp-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.azp-sub { font-size: 10px; color: var(--sub); letter-spacing: .1em; font-weight: 700; }
.title-player { justify-content: center; width: fit-content; max-width: 100%; margin: 14px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 16px 5px 5px; box-shadow: 0 4px 10px rgba(35,33,29,.05); }
.res-player { justify-content: center; margin-top: 18px; }
/* --- 主プレイ画面の再編: 縮小ではなく再編で大きく（バトル面は残り高さをシーンが受けて拡大） --- */
#screen-battle.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#screen-battle .scene { flex: 1 1 auto; min-height: 238px; height: auto; }
#screen-battle .log { flex: none; }
#screen-title.active { display: block; }
/* バトル中はフッターとインストール案内を畳み、空いた高さを全てシーンへ渡す（footer の margin-top:auto が残り高さを吸う問題の回避） */
body.in-battle .azi-strip { display: none !important; }
body.in-battle .wrap { padding-bottom: 14px; }
/* --- タイトル収納: プレイヤーチップ追加分を間隔の再配分で吸収（844内） --- */
#screen-title .brand { margin-top: 10px; }
#screen-title .title-slime { padding-top: 22px; }
#screen-title .title-actions { margin-top: 20px; }
#screen-title .howto-link { margin-top: 16px; }
#screen-title .title-player { margin-top: 10px; }
/* --- ショップカタログ（アズコイン販売中） --- */
.shop-head { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
.shop-back { padding: 7px 16px; font-size: 13px; }
.shop-title { font-size: 20px; font-weight: 700; }
.shop-cat-note { font-size: 12px; color: var(--sub); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; line-height: 1.65; margin-top: 14px; }
.shop-cat-head { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sub); margin: 18px 2px 2px; }
.shop-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.catalog-row { gap: 10px; flex-wrap: wrap; transition: scale .16s cubic-bezier(.22,1,.36,1); }
.catalog-row:active { scale: .985; }
.catalog-row .s-main { flex: 1; min-width: 0; }
.catalog-row .s-main b { font-size: 14.5px; }
.catalog-row .s-effect { flex: 0 0 100%; color: var(--sub); font-size: 12px; line-height: 1.65; }
.catalog-row .s-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.catalog-row .s-tax { display: inline !important; font-size: 10px; color: var(--sub); font-weight: 700; margin-left: 3px; }
.shop-ic-wrap { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: #fffdf8; border: 1px solid var(--line); border-radius: 10px; }
.shop-ic { width: 23px; height: 23px; display: block; }
.shop-badge-design { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #3f6f8e; background: #e3edf3; border-radius: 99px; padding: 2px 7px; margin-left: 7px; vertical-align: 2px; }
.btn-disabled { font-size: 12px; font-weight: 700; color: var(--sub); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; white-space: nowrap; }
.catalog-btn { font: inherit; }
.catalog-btn:disabled { opacity: .85; cursor: default; }
/* --- 派手さ×洗練の底上げ＋ネイティブアプリ級の演出（静かなイージングのみ・会話の間は無変更） --- */
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#screen-title.active > * { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; }
#screen-title.active > *:nth-child(3) { animation-delay: .05s; }
#screen-title.active > *:nth-child(4) { animation-delay: .1s; }
#screen-title.active > *:nth-child(5) { animation-delay: .16s; }
#screen-title.active > *:nth-child(6) { animation-delay: .22s; }
#screen-title.active > *:nth-child(7) { animation-delay: .28s; }
#screen-battle.active .scene { animation: sceneIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes sceneIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
#screen-battle.active .commands, #screen-battle.active .hero-status, #screen-battle.active .log { animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; }
#screen-battle.active .log { animation-delay: .06s; }
#screen-battle.active .hero-status { animation-delay: .12s; }
#screen-battle.active .commands { animation-delay: .18s; }
#screen-shop.active .catalog-row { animation: riseIn .34s cubic-bezier(.22,1,.36,1) both; }
#screen-shop.active .catalog-row:nth-of-type(3) { animation-delay: .05s; }
#screen-ending.active .end-stats { position: relative; overflow: hidden; }
#screen-ending.active .end-stats::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(250,232,170,.45) 50%, transparent 58%); transform: translateX(-90%); animation: endGlint 1.1s cubic-bezier(.22,1,.36,1) .3s both; pointer-events: none; }
@keyframes endGlint { to { transform: translateX(90%); } }
#btn-next, #btn-again { animation: nextBreath 2.6s ease-in-out infinite; }
@keyframes nextBreath { 0%,100% { box-shadow: 0 2px 5px rgba(35,33,29,.22), 0 0 0 0 rgba(63,111,142,0); } 50% { box-shadow: 0 2px 5px rgba(35,33,29,.22), 0 0 0 5px rgba(63,111,142,.12); } }
@media (prefers-reduced-motion: reduce) {
  #screen-title.active > *, #screen-battle.active .scene, #screen-battle.active .commands, #screen-battle.active .hero-status, #screen-battle.active .log, #screen-shop.active .catalog-row, #btn-next, #btn-again { animation: none !important; }
  #screen-ending.active .end-stats::after { display: none; }
}


/* === 画面上端の細いプログレス線 === */
#az-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; opacity: 0; transition: opacity .3s cubic-bezier(.22,.8,.3,1); }
#az-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(63,111,142,.45), #3f6f8e 70%); border-radius: 0 2px 2px 0; box-shadow: 0 1px 5px rgba(63,111,142,.35); }

/* === アイテムショップ大型化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.azs-balance-label { font-size: 11px; letter-spacing: .08em; color: var(--sub); font-weight: 700; }
.azs-balance-num { font-size: 20px; font-variant-numeric: tabular-nums; }
.azs-balance-link { margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-guest { margin-top: 18px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; }
.azs-guest p { font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }
.azs-stage { display: flex; align-items: center; gap: 4px; margin-top: 18px; }
.azs-arrow { appearance: none; border: none; background: none; font-size: 30px; line-height: 1; color: var(--sub); cursor: pointer; padding: 10px 6px; flex: none; transition: transform .25s cubic-bezier(.22,.8,.3,1), color .25s; -webkit-tap-highlight-color: transparent; }
.azs-arrow:active { transform: scale(.9); color: var(--ink); }
.azs-focus { flex: 1; height: 218px; border-radius: 20px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .45s cubic-bezier(.22,.8,.3,1); }
.azs-focus .shop-ic { width: 132px; height: 132px; animation: azsIn .5s cubic-bezier(.22,.8,.3,1) both; }
@keyframes azsIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.azs-info { text-align: center; margin-top: 16px; }
.azs-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sub); }
.azs-name { font-size: 22px; letter-spacing: .03em; margin-top: 4px; }
.azs-effect { font-size: 13px; color: #55524b; line-height: 1.7; margin-top: 8px; min-height: 2.6em; }
.azs-price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.azs-price-unit { font-size: 13px; font-weight: 700; color: var(--sub); }
.azs-owned { font-size: 12.5px; color: var(--accent); font-weight: 700; min-height: 1.4em; margin-top: 4px; }
.azs-action { width: 100%; margin-top: 10px; padding: 14px 26px; font-size: 16px; }
.azs-action:disabled { opacity: .45; cursor: default; }
.azs-note { font-size: 11.5px; color: var(--sub); margin-top: 10px; }
.azs-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.azs-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s, width .3s cubic-bezier(.22,.8,.3,1); }
.azs-dot.on { background: var(--ink); width: 18px; }
.azs-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.azs-thumb { position: relative; appearance: none; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.22,.8,.3,1), border-color .25s; -webkit-tap-highlight-color: transparent; }
.azs-thumb .shop-ic { width: 30px; height: 30px; }
.azs-thumb.on { border-color: var(--ink); transform: translateY(-2px); }
.azs-thumb-owned { position: absolute; right: 3px; bottom: 3px; font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 5px; }
.azs-sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.azs-sheet-backdrop { position: absolute; inset: 0; background: rgba(28,26,22,.42); animation: azsFade .25s ease both; }
.azs-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 20px 20px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; animation: azsSheet .38s cubic-bezier(.22,.8,.3,1) both; }
@keyframes azsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes azsSheet { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.azs-sheet-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sub); }
.azs-sheet-name { font-size: 19px; margin-top: 3px; }
.azs-sheet-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.azs-sheet-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.azs-sheet-rows b { font-size: 16px; font-variant-numeric: tabular-nums; }
.azs-sheet-note { font-size: 11.5px; color: var(--sub); margin-top: 12px; }
.azs-sheet-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-sheet-error { font-size: 13px; color: #b03a30; margin-top: 10px; }
.azs-sheet-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.azs-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); background: var(--ink); color: #fff; font-size: 13.5px; padding: 11px 18px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.22,.8,.3,1), transform .35s cubic-bezier(.22,.8,.3,1); z-index: 70; max-width: 88vw; text-align: center; }
.azs-toast.on { opacity: 1; transform: translate(-50%, 0); }
#screen-shop .ref-item { margin-top: 22px; }
#screen-shop .ref-item .s-main { flex: 1; min-width: 0; }
#screen-shop .ref-item .s-main b { font-size: 14.5px; }
#screen-shop .ref-item .s-effect { display: block; color: var(--sub); font-size: 12px; line-height: 1.65; }
/* 使い切り券（バトル画面） */
.play-items { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.play-items .cmd { font-size: 13.5px; padding: 10px 0; }
.item-qty { font-weight: 700; color: var(--accent); }
.hint-panel { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; line-height: 1.9; }

/* === ショップスキン（スライムの質感） === */
/* ぷるぷるクリア: 透明感のあるクリアゼリー（メタルは銀色のまま、ホイルが剥がれたらクリア） */
body.skin-clear .slime-body { background: linear-gradient(180deg, rgba(216,238,248,.62) 0%, rgba(154,203,226,.72) 100%); box-shadow: inset 0 0 20px rgba(255,255,255,.7); }
body.skin-clear .slime-metal .slime-body { background: linear-gradient(180deg, #e3e6ea 0%, var(--metal) 55%, var(--metal-deep) 100%); box-shadow: none; }
body.skin-clear .slime-metal.foil-off .slime-body { background: linear-gradient(180deg, rgba(216,238,248,.62) 0%, rgba(154,203,226,.72) 100%); box-shadow: inset 0 0 20px rgba(255,255,255,.7); }
/* さくらゼリー: 淡い桜色 */
body.skin-sakura .slime-body { background: linear-gradient(180deg, #f9dde3 0%, #edaebd 100%); }
body.skin-sakura .slime-metal .slime-body { background: linear-gradient(180deg, #e3e6ea 0%, var(--metal) 55%, var(--metal-deep) 100%); }
body.skin-sakura .slime-metal.foil-off .slime-body { background: linear-gradient(180deg, #f9dde3 0%, #edaebd 100%); }
/* AZRIONプレミアム: 金のライン＋王冠と剣の金、タイトル画に小さな紋 */
body.skin-premium .slime-body { background: linear-gradient(180deg, #aed6e8 0%, #5f96b8 100%); box-shadow: inset 0 0 0 2.5px rgba(217,164,65,.55); }
body.skin-premium .slime-metal .slime-body { background: linear-gradient(180deg, #e3e6ea 0%, var(--metal) 55%, var(--metal-deep) 100%); box-shadow: none; }
body.skin-premium .slime-metal.foil-off .slime-body { background: linear-gradient(180deg, #aed6e8 0%, #5f96b8 100%); box-shadow: inset 0 0 0 2.5px rgba(217,164,65,.55); }
body.skin-premium .crown { background: linear-gradient(180deg, #ffe9a8, #d9a441); }
body.skin-premium .crown::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 16%; height: 2px; background: rgba(255,248,214,.95); border-radius: 99px; }
body.skin-premium .hero-sword { background: linear-gradient(90deg, #ffe9a8, #d9a441 55%, #b8892f); }
body.skin-premium .title-slime { position: relative; }
body.skin-premium .title-slime .slime-body { box-shadow: inset 0 0 0 3px rgba(217,164,65,.6); }
body.skin-premium .title-slime::after { content: "A"; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #b8892f; }

/* === ショップテーマ（バトルの野原） === */
/* 夕焼けの野原 */
body.theme-sunset .scene { background: linear-gradient(180deg, #fdeed3 0%, #f9d9ab 38%, #f0c48f 58%, #e3af76 100%); }
body.theme-sunset .scene .hill.h-back { background: linear-gradient(180deg, #ecd9b0, #dfc491); }
body.theme-sunset .scene .hill.h-front { background: linear-gradient(180deg, #e2cda0, #d3b57e); }
body.theme-sunset .scene .ground { background: linear-gradient(180deg, #d9b96a 0%, #c9a452 46%, #b28c3e 100%); }
body.theme-sunset .scene .sun { background: radial-gradient(circle at 42% 40%, #fff3d0 0%, #ffd98f 58%, #f7ae4e 100%); box-shadow: 0 0 26px 12px rgba(250,180,90,.55), 0 0 60px 30px rgba(250,180,90,.25); }
body.theme-sunset .scene .cloud { background: rgba(255,236,214,.92); }
/* 月夜の野原 */
body.theme-moon .scene { background: linear-gradient(180deg, #232c47 0%, #2e3a5c 38%, #3c4a6e 58%, #49587c 100%); }
body.theme-moon .scene .hill.h-back { background: linear-gradient(180deg, #44557c, #37496c); }
body.theme-moon .scene .hill.h-front { background: linear-gradient(180deg, #3a4e70, #2f4262); }
body.theme-moon .scene .ground { background: linear-gradient(180deg, #4a6a4e 0%, #3d5c42 46%, #2f4a34 100%); }
body.theme-moon .scene .sun { background: radial-gradient(circle at 42% 40%, #ffffff 0%, #e8edff 58%, #c3cdea 100%); box-shadow: 0 0 22px 10px rgba(210,220,255,.5), 0 0 54px 26px rgba(190,205,255,.22); }
body.theme-moon .scene .cloud { background: rgba(190,200,228,.4); }
body.theme-moon .scene .flower { opacity: .75; }

.azs-banner{display:block;margin:30px 0 2px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;overflow:hidden;line-height:0;aspect-ratio:4/1;background:#16222e;transition:transform .12s ease}
.azs-banner img{display:block;width:100%;height:100%;object-fit:cover}
.azs-banner:active{transform:scale(.99)}

/* ================= ギャグコア: ブート／ご注意 ================= */
#screen-boot { min-height: 70svh; display: none; }
#screen-boot.active { display: flex; align-items: center; justify-content: center; }
.boot-inner { text-align: center; animation: fadein 1.1s ease; }
.boot-logo { font-size: 22px; letter-spacing: .42em; font-weight: 700; color: var(--ink); }
.boot-sub { margin-top: 10px; font-size: 12px; letter-spacing: .3em; color: var(--sub); }
.notice-title { text-align: center; font-size: 20px; margin-top: 18px; }
.notice-body { max-width: 340px; margin: 18px auto 0; font-size: 13.5px; color: #55524b; }
.notice-body p { margin-bottom: 10px; }

/* ================= ギャグコア: フィールド ================= */
.field-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
#hud-chapter { font-size: 12px; letter-spacing: .06em; color: var(--sub); }
#hud-gold { font-size: 13px; font-weight: 700; }
.hud-btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink); }
#field-viewport { position: relative; width: 374px; max-width: 100%; height: 442px; margin: 10px auto 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #9ec97f; }
#field-world { position: absolute; left: 0; top: 0; /* カメラはフレームループの補間で駆動する（transition の段付き廃止） */ }
.tile { position: absolute; width: 34px; height: 34px; }
.t-grass { background: linear-gradient(180deg, #a8d489, #97c873); }
.t-grass::after { content: ""; position: absolute; left: 6px; bottom: 4px; width: 3px; height: 7px; background: rgba(70,120,50,.35); border-radius: 2px; box-shadow: 9px 2px 0 rgba(70,120,50,.25), 18px -1px 0 rgba(70,120,50,.3); }
.t-forest { background: linear-gradient(180deg, #7fb069, #6da357); }
.t-forest::after { content: ""; position: absolute; left: 8px; bottom: 5px; width: 3px; height: 6px; background: rgba(40,80,35,.4); border-radius: 2px; box-shadow: 10px 1px 0 rgba(40,80,35,.3), 17px -2px 0 rgba(40,80,35,.35); }
.t-rockland { background: linear-gradient(180deg, #cfc0a4, #bfb094); }
.t-path { background: linear-gradient(180deg, #e8dcbc, #ddcfa9); }
.t-village { background: linear-gradient(180deg, #dfe8c8, #d2dfb6); }
.t-plaza { background: linear-gradient(180deg, #e6e0d0, #d9d2bf); }
.t-sand { background: #eee3bd; }
.t-water { background: linear-gradient(180deg, #8ec9e8, #6db3dd); }
.t-water::after { content: ""; position: absolute; left: 5px; top: 9px; width: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.5); box-shadow: 0 12px 0 rgba(255,255,255,.35); }
.t-tree { background: #8fca72; }
.t-tree::before { content: ""; position: absolute; left: 5px; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #7cc45e, #4e9440); box-shadow: inset -3px -4px 0 rgba(0,0,0,.12); }
.t-tree::after { content: ""; position: absolute; left: 15px; bottom: 1px; width: 4px; height: 9px; background: #7a5a3d; border-radius: 2px; }
.t-rock { background: #b7ab90; }
.t-rock::before { content: ""; position: absolute; left: 4px; top: 7px; width: 26px; height: 20px; background: linear-gradient(180deg, #b9bdc4, #9298a1); clip-path: polygon(18% 100%, 0 55%, 22% 18%, 55% 0, 88% 22%, 100% 62%, 84% 100%); }
.t-wall { background: linear-gradient(180deg, #a9adb6, #8f959f); border-bottom: 3px solid #767c86; }
.t-house { background: #dfe8c8; }
.t-house::before { content: ""; position: absolute; left: 2px; top: 0; width: 30px; height: 15px; background: linear-gradient(180deg, #c96f4a, #b25a38); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.t-house::after { content: ""; position: absolute; left: 6px; bottom: 0; width: 22px; height: 16px; background: #f4ead2; border: 1px solid #d8c9a3; border-bottom: none; }
.ent { position: absolute; width: 34px; height: 34px; pointer-events: none; }
.ent.chest::before { content: ""; position: absolute; left: 5px; top: 10px; width: 24px; height: 17px; border-radius: 4px; background: linear-gradient(180deg, #b07a3f, #8a5a2b); border: 2px solid #6f4520; box-shadow: inset 0 3px 0 #d9a941; }
.ent.npc i { position: absolute; left: 9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #f2c9a0; box-shadow: 0 14px 0 -2px #5b8fc6; }
.ent.npc::after { content: ""; position: absolute; left: 12px; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: #20303a; box-shadow: 7px 0 0 #20303a; }
.ent.player { width: 30px; height: 38px; z-index: 5; }
.ent.player .hero { transform: scale(.42); transform-origin: top left; }
.ent.follower { z-index: 4; }
.ent.boss-ent { z-index: 4; animation: puru 2.6s ease-in-out infinite; }
.dlg { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 20; background: rgba(255,253,249,.97); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 16px; box-shadow: 0 8px 24px rgba(35,33,29,.18); cursor: pointer; }
#field-viewport .dlg { position: absolute; }
.dlg-name { font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.dlg-text { font-size: 14px; margin-top: 2px; min-height: 3.2em; }
.dlg-next { position: absolute; right: 12px; bottom: 6px; font-size: 10px; color: var(--sub); animation: puru 1s ease-in-out infinite; }
#screen-field .dlg { position: fixed; left: 50%; transform: translateX(-50%); bottom: 118px; width: min(440px, calc(100vw - 24px)); z-index: 40; }
.field-controls { display: flex; justify-content: space-between; align-items: center; max-width: 374px; margin: 12px auto 0; }
.dpad { position: relative; width: 128px; height: 128px; }
.dp { position: absolute; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--ink); }
.dp.up { left: 43px; top: 0; } .dp.down { left: 43px; bottom: 0; }
.dp.left { left: 0; top: 43px; } .dp.right { right: 0; top: 43px; }
.dp:active { background: var(--line); }
.act-btn { width: 104px; min-height: 64px; padding: 10px 12px; border-radius: 18px; font-size: 14px; line-height: 1.35; }
#screen-field .field-hud { margin-top: 16px; }

/* ================= オーバーレイ／シート ================= */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(35,33,29,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--paper); width: min(480px, 100vw); max-height: 82svh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 18px 18px 26px; animation: fadein .3s ease; }
.sheet-title { font-size: 16px; text-align: center; margin-bottom: 12px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.panel-body { margin-bottom: 14px; }
.row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.row.col { flex-direction: column; align-items: stretch; }
.row-main { flex: 1; min-width: 0; }
.row-main small { display: block; color: #55524b; font-size: 12px; line-height: 1.55; }
.tag { font-size: 11px; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.owned { font-size: 12px; color: var(--sub); }
.cmd.small { padding: 8px 12px; font-size: 13px; }
.cmd.on { background: var(--ink); color: #fff; }
.cmd:disabled { opacity: .4; }
.sub-h { font-size: 11px; letter-spacing: .18em; color: var(--sub); margin: 14px 0 4px; }
.fine { font-size: 12px; color: var(--sub); margin-top: 10px; }
.shop-gold { text-align: center; font-weight: 700; margin-bottom: 6px; }
.eq-tabs { display: flex; gap: 8px; margin-bottom: 6px; }
.tcells { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tcell { font-size: 10.5px; border-radius: 6px; padding: 2px 6px; background: #ece8de; color: var(--sub); }
.tcell.t2 { background: #ffe1a8; color: #7a5410; font-weight: 700; }
.tcell.t1 { background: #dff0da; color: #3c6034; }
.tcell.t0 { background: #ece8de; }
.tcell.t-1 { background: #e3e6f2; color: #4a5578; }

/* ================= ギャグコア: バトル ================= */
.core-gauge { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.core-label { font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 700; white-space: nowrap; }
.core-bar { flex: 1; height: 10px; border-radius: 999px; background: #ece8de; overflow: hidden; }
#core-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #e8a33d, #d9a941); transition: width .45s cubic-bezier(.22,.8,.3,1); }
.core-state { font-size: 10.5px; color: var(--sub); white-space: nowrap; }
#party-stage { display: flex; align-items: flex-end; gap: 2px; min-width: 96px; }
.party-unit.down { opacity: .35; filter: grayscale(.7); }
.enemy-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; flex: 1; }
.enemy-unit { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.enemy-unit .enemy-hpbar.mini { width: 84px; height: 8px; margin: 0 0 4px; }
.enemy-unit .efill { height: 100%; background: var(--slime-deep); border-radius: 999px; transition: width .5s ease; }
.enemy-label { font-size: 11.5px; color: #4c463c; margin-top: 2px; }
.enemy-sprite .mon { width: 96px; height: auto; }
.enemy-sprite.down { opacity: .3; transform: rotate(8deg); }
.enemy-unit.targetable { cursor: pointer; }
.enemy-unit.targetable .enemy-sprite { animation: puru .6s ease-in-out infinite; outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 12px; }
.enemy-sprite.uke { animation: uke-bounce .65s ease; }
.enemy-sprite.sube { animation: sube-droop .65s ease; }
.enemy-sprite.hit { animation: hit-shake .4s ease; }
@keyframes uke-bounce { 0% { transform: translateY(0) scale(1,1); } 30% { transform: translateY(-13px) scale(.94,1.08); } 55% { transform: translateY(0) scale(1.07,.92); } 100% { transform: none; } }
@keyframes sube-droop { 0% { transform: none; } 40% { transform: translateY(5px) scale(.96,.94); filter: saturate(.5); } 100% { transform: none; } }
@keyframes hit-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.dmg-float { position: absolute; z-index: 30; font-weight: 800; font-size: 19px; color: #c65b4e; text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255,255,255,.8); animation: dmg-up .95s ease-out forwards; pointer-events: none; }
.dmg-float.big { font-size: 26px; color: #d9a941; }
.dmg-float.weak { font-size: 14px; color: #8a857b; }
@keyframes dmg-up { from { opacity: 0; transform: translateY(8px); } 18% { opacity: 1; } to { opacity: 0; transform: translateY(-30px); } }
.party-status { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.pstat { flex: 1; min-width: 100px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 9px; font-size: 12px; display: flex; gap: 7px; align-items: baseline; }
.pstat.active { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
.pstat.down { opacity: .45; }
.pstat .pname { font-weight: 700; }
.pstat .plv { color: var(--sub); }
#battle-result .sheet { align-self: center; border-radius: 20px; margin: 0 14px; }
#commands .cmd:disabled { opacity: .4; }

/* ================= SD（ぷち）造形: 表情と大げさな反応 ================= */
/* スライムの「大笑い」顔: 目は弧、口は大きく開く */
.slime.face-laugh .eye { background: transparent; height: 12%; border-top: 3.5px solid #20303a; border-radius: 50%; transform: translateY(14%); }
.slime.face-laugh .mouth { top: 57%; width: 27%; height: 18%; background: rgba(32,48,58,.88); border: none; border-radius: 4px 4px 999px 999px; }
.slime.face-laugh .cheek { opacity: .9; }
/* 大ウケ: 笑い転げる（跳ね＋左右に揺れる） */
.enemy-sprite.uke-big { animation: uke-laugh .8s ease; }
@keyframes uke-laugh {
  0% { transform: none; } 18% { transform: translateY(-15px) rotate(-6deg) scale(.93,1.09); }
  36% { transform: translateY(0) rotate(5deg) scale(1.08,.9); } 54% { transform: translateY(-9px) rotate(-4deg); }
  72% { transform: translateY(0) rotate(3deg) scale(1.04,.95); } 100% { transform: none; }
}
/* 倒れた: ぺしゃんと潰れて倒れる */
.enemy-sprite.down { animation: collapse .55s cubic-bezier(.3,.7,.4,1) forwards; transform-origin: 50% 100%; }
@keyframes collapse { 0% { transform: none; opacity: 1; } 45% { transform: translateY(4px) scale(1.12,.55) rotate(-4deg); opacity: .8; } 100% { transform: translateY(9px) scale(1.18,.32) rotate(-7deg); opacity: .3; } }
/* 反応フローター（（笑）／……） */
.dmg-float.react { font-size: 15px; color: #b8860b; animation: react-up 1s ease-out forwards; }
.dmg-float.react.sube { font-size: 17px; color: #8a857b; letter-spacing: .2em; }
@keyframes react-up { from { opacity: 0; transform: translateY(10px) scale(.8); } 25% { opacity: 1; transform: translateY(0) scale(1.08); } to { opacity: 0; transform: translateY(-26px) scale(1); } }
/* 味方の反応: ウケた→得意に小跳ね / スベった→がっくり */
.party-unit.proud { animation: proud-hop .6s ease; }
@keyframes proud-hop { 0% { transform: none; } 35% { transform: translateY(-8px) scale(1.04); } 100% { transform: none; } }
.party-unit.droop { animation: droop .7s ease; }
@keyframes droop { 0% { transform: none; filter: none; } 40% { transform: translateY(4px) rotate(-4deg) scale(.97); filter: saturate(.5); } 100% { transform: none; filter: none; } }
/* フィールドの村人もSD: 大きな頭、小さな体 */
.ent.npc i { left: 7px; top: 2px; width: 20px; height: 20px; box-shadow: 0 15px 0 -3px #5b8fc6; }
.ent.npc::after { left: 11.5px; top: 9px; width: 3.4px; height: 3.4px; box-shadow: 7.5px 0 0 #20303a; }

/* ================= 品質パス 2026-11-01 (2): ゲーム画面化 =================
 * Webページの殻（フッター/下線リンク）を排し、フィールドを大きく・濃く、
 * 操作系をゲームパッドとして組み直す。既存ルールへの上書きはこの節に集約。 */

/* --- ガイド導線（メニュー内） --- */
.guide-link { display: block; text-align: center; text-decoration: none; margin-bottom: 9px; }

/* --- タイトル: 世界の中に据える --- */
.title-stage { height: 288px; margin-top: 14px; border-radius: 20px; }
.title-stage .title-slime { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 0; z-index: 3; }
#screen-title .game-title { margin-top: 18px; font-size: 34px; letter-spacing: .06em; }
.btn.big { font-size: 17px; padding: 14px 46px; min-width: 236px; }
.title-sub-actions { display: flex; gap: 9px; margin-top: 4px; }
.btn.small { padding: 8px 20px; font-size: 13.5px; }
.title-ver { text-align: center; color: var(--sub); font-size: 11px; letter-spacing: .22em; margin-top: 12px; }
.sound-bar .snd-btn { display: inline-flex; align-items: center; gap: 6px; }
.snd-ico { font-size: 13px; color: var(--accent); line-height: 1; }

/* --- フィールド画面: 1ビューポートに収める --- */
#screen-field.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-top: 40px; }
#screen-field .field-hud { margin-top: 2px; flex: none; }
#hud-chapter { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
#hud-gold { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
#field-viewport {
  flex: 1 1 auto; min-height: 250px; width: 100%; height: auto; margin-top: 8px;
  border-radius: 18px; border: 2px solid rgba(43,66,40,.55);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), inset 0 -26px 44px rgba(43,80,40,.14), 0 12px 26px rgba(35,50,30,.20);
}
#field-viewport::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 63%, rgba(28,44,22,.17) 100%);
}
#field-world { /* transform は app.js のカメラ補間が毎フレーム書く */ }
#screen-field .dlg { bottom: calc(198px + env(safe-area-inset-bottom, 0px)); }
.field-controls { flex: none; width: 100%; max-width: 440px; margin: 10px auto 0; padding: 0 8px calc(2px + env(safe-area-inset-bottom, 0px)); align-items: center; }

/* --- タイル: 帯を消し、質感と密度を上げる --- */
.tile { width: var(--t, 34px); height: var(--t, 34px); }
.tv1 { filter: brightness(1.05); }
.tv2 { filter: brightness(.96); }
.tv3 { filter: brightness(1.015) saturate(1.14); }
.t-grass { background: linear-gradient(180deg, #9fca7a, #93c46d); }
.t-forest { background: linear-gradient(180deg, #79ac5e, #63984d); }
.t-village { background: linear-gradient(180deg, #d9e8bc, #cfe0ae); }
.t-path { background: linear-gradient(180deg, #ecdfba, #dfcd9e); }
.t-plaza { background: linear-gradient(180deg, #e9e2cf, #d8cfb4); }
.t-rockland { background: linear-gradient(180deg, #d3c3a5, #c0ab87); }
.t-sand { background: #f0e2b6; }
.t-water { background: linear-gradient(180deg, #93cdf0, #63aedd); }
.t-grass::before, .t-forest::before, .t-village::before, .t-path::before,
.t-plaza::before, .t-rockland::before, .t-sand::before, .t-water::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(closest-side, rgba(255,255,244,.13), rgba(255,255,244,0)),
                    radial-gradient(rgba(255,255,240,.10) 1.2px, rgba(255,255,240,0) 1.6px),
                    radial-gradient(rgba(56,78,32,.08) 1.2px, rgba(56,78,32,0) 1.6px);
  background-size: 92px 70px, 13px 13px, 19px 19px;
  background-repeat: no-repeat, repeat, repeat;
}
.t-grass.tv1::before, .t-forest.tv1::before, .t-village.tv1::before, .t-path.tv1::before,
.t-plaza.tv1::before, .t-rockland.tv1::before, .t-sand.tv1::before, .t-water.tv1::before {
  background-size: 112px 82px, 17px 15px, 23px 21px; background-position: -30px -18px, 4px 3px, 9px 6px;
}
.t-grass.tv2::before, .t-forest.tv2::before, .t-village.tv2::before, .t-path.tv2::before,
.t-plaza.tv2::before, .t-rockland.tv2::before, .t-sand.tv2::before, .t-water.tv2::before {
  background-size: 82px 94px, 11px 12px, 21px 25px; background-position: 12px -34px, 8px 9px, 2px 11px;
}
.t-grass.tv3::before, .t-forest.tv3::before, .t-village.tv3::before, .t-path.tv3::before,
.t-plaza.tv3::before, .t-rockland.tv3::before, .t-sand.tv3::before, .t-water.tv3::before {
  background-size: 102px 66px, 15px 17px, 17px 19px; background-position: -48px 16px, 11px 5px, 6px 1px;
}
.t-grass::after { width: 4px; height: 9px; left: 8px; bottom: 6px; box-shadow: 11px 2px 0 rgba(70,120,50,.25), 21px -1px 0 rgba(70,120,50,.3); }
.t-grass.tv1::after { left: 20px; bottom: 12px; }
.t-grass.tv2::after { left: 4px; bottom: 16px; transform: scaleX(-1); }
.t-grass.tv3::after { left: 26px; bottom: 3px; }
.t-forest::after { width: 4px; height: 8px; }
.t-forest.tv1::after { left: 19px; bottom: 10px; }
.t-forest.tv2::after { left: 5px; bottom: 15px; }
.t-forest.tv3::after { left: 25px; bottom: 4px; }
.tile.deco-flower::after {
  content: ""; position: absolute; left: 58%; bottom: 18%; width: 12px; height: 12px;
  background: radial-gradient(circle at 50% 50%, #f7c948 0 2.2px, rgba(0,0,0,0) 3px),
              radial-gradient(circle at 32% 34%, #f4a9c0 0 3px, rgba(0,0,0,0) 3.8px),
              radial-gradient(circle at 68% 34%, #f4a9c0 0 3px, rgba(0,0,0,0) 3.8px),
              radial-gradient(circle at 50% 74%, #f8c3d4 0 3px, rgba(0,0,0,0) 3.8px);
  box-shadow: none;
}
.tile.deco-pebble::after {
  content: ""; position: absolute; left: 30%; bottom: 22%; width: 9px; height: 6px; border-radius: 50%;
  background: radial-gradient(ellipse at 38% 32%, #cfc8b4, #a89f86);
  box-shadow: 13px 5px 0 -1px #b3aa93;
}
.t-tree { background: #93ce74; box-shadow: inset 0 -7px 9px rgba(46,94,36,.18); }
.t-tree::before { left: 6px; top: 1px; width: 32px; height: 32px; }
.t-tree.tv1::before { width: 28px; height: 28px; left: 9px; top: 4px; }
.t-tree.tv3::before { width: 35px; height: 35px; left: 4px; top: 0; }
.t-tree::after { left: 20px; bottom: 1px; width: 5px; height: 11px; }
.t-rock::before { left: 5px; top: 9px; width: 34px; height: 26px; }
.t-house::before { left: 3px; width: 38px; height: 19px; }
.t-house::after { left: 8px; width: 28px; height: 20px; }
.t-water::after { width: 28px; left: 7px; }

/* --- エンティティ: 大きく、接地感 --- */
.ent { width: var(--t, 34px); height: var(--t, 34px); }
.ent.chest::before { left: 8px; top: 13px; width: 28px; height: 20px; }
.ent.npc i { left: 10px; top: 3px; width: 24px; height: 24px; box-shadow: 0 19px 0 -4px #5b8fc6; }
.ent.npc::after { left: 15px; top: 12px; width: 4px; height: 4px; box-shadow: 9px 0 0 #20303a; }
.ent.player { width: 36px; height: 54px; }
.ent.player .hero { transform: scale(.56); }
.ent.player .hero.flip { transform: scale(-.56, .56); }

/* --- 歩行アニメ --- */
.hero-legs .leg { transform-origin: 50% 0; }
.ent.player.walking .hero-fig { animation: walkBob .22s ease-in-out infinite; }
@keyframes walkBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
.ent.player.walking .leg.l { animation: legSwing .22s ease-in-out infinite; }
.ent.player.walking .leg.r { animation: legSwing .22s ease-in-out -.11s infinite; }
@keyframes legSwing { 0%,100% { transform: rotate(17deg); } 50% { transform: rotate(-17deg); } }
@media (prefers-reduced-motion: reduce) {
  .ent.player.walking .hero-fig, .ent.player.walking .leg.l, .ent.player.walking .leg.r { animation: none; }
}

/* --- 操作系: 一体の十字キー + 丸いアクションボタン --- */
.xpad {
  position: relative; display: grid; flex: none;
  grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px);
  filter: drop-shadow(0 7px 9px rgba(30,45,30,.35));
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.xpad::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #37413a, #222a25);
  clip-path: polygon(33.33% 0, 66.66% 0, 66.66% 33.33%, 100% 33.33%, 100% 66.66%, 66.66% 66.66%, 66.66% 100%, 33.33% 100%, 33.33% 66.66%, 0 66.66%, 0 33.33%, 33.33% 33.33%);
}
.xpad .dp {
  position: relative; inset: auto; width: 52px; height: 52px; z-index: 1;
  border: none; border-radius: 0; background: transparent; color: #f4f1e6;
  font-size: 19px; display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.xpad .dp.up { grid-area: 1 / 2; } .xpad .dp.left { grid-area: 2 / 1; }
.xpad .dp.right { grid-area: 2 / 3; } .xpad .dp.down { grid-area: 3 / 2; }
.xpad .dp:active, .xpad .dp.on { background: rgba(255,255,255,.17); color: #fff; }
.xp-hub {
  grid-area: 2 / 2; align-self: center; justify-self: center; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #4d5a51, #1d2420);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.3);
}
.field-btns { display: flex; align-items: center; padding-right: 4px; }
.act-round {
  width: 88px; height: 88px; border-radius: 50%; border: none; flex: none;
  background: radial-gradient(circle at 34% 26%, #55534b, #26241f 72%);
  color: #fff; font: inherit; font-size: 16.5px; font-weight: 700; letter-spacing: .05em;
  box-shadow: 0 9px 18px rgba(35,33,29,.32), inset 0 2px 3px rgba(255,255,255,.28), inset 0 -5px 9px rgba(0,0,0,.4);
  cursor: pointer; touch-action: manipulation; transition: transform .12s ease;
}
.act-round:active { transform: scale(.93); }

/* --- エンカウント遷移 --- */
#enc-fx { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 90; }
#enc-fx.go { animation: encflash .32s ease-out; }
@keyframes encflash { 0% { opacity: 0; } 22% { opacity: .6; } 100% { opacity: 0; } }
#screen-battle.active .actors { animation: encin .38s cubic-bezier(.22,.8,.3,1); }
@keyframes encin { from { transform: translateY(10px); opacity: .35; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #enc-fx.go { animation: none; }
  #screen-battle.active .actors { animation: none; }
}

/* ================= ディープビルド 2026-11-01: 絵の実現 =================
   型だけだった作画を中身に変える層。既存ルールより後勝ちで上書きする。 */

/* --- NPC: 2頭身ちび人（sprites.js のSVG） --- */
.ent.npc { width: var(--t, 44px); height: calc(var(--t, 44px) + 8px); z-index: 3; }
.ent.npc .chibi { width: 88%; height: auto; display: block; margin: 0 auto; }
.ent.npc .slime { margin: 6px auto 0; }
.ent.npc i { display: none; }
.ent.npc::after { content: none; }
.ent.npc.hop { animation: npc-hop .38s cubic-bezier(.22,.8,.3,1); }
@keyframes npc-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
/* プレイヤーを少し大きく（村人と並んで主役が立つ） */
.ent.player .hero { transform: scale(.47); }

/* --- 家: 壁・ドア・窓・屋根の厚み --- */
.t-house::after {
  left: 6px; bottom: 0; width: 32px; height: 23px; border: none; border-radius: 2px 2px 0 0;
  box-shadow: inset 0 -3px 0 rgba(122,90,50,.18), inset 0 0 0 1px rgba(150,120,70,.35);
  background:
    radial-gradient(circle at 25px 7px, #ffedb3 0 2.4px, #6d9db4 3.2px 4.6px, rgba(0,0,0,0) 5.6px),
    linear-gradient(90deg, rgba(0,0,0,0) 0 6px, #96684a 6px 15px, #7d5439 15px 16px, rgba(0,0,0,0) 16px) bottom / 100% 14px no-repeat,
    radial-gradient(circle at 13.5px 17px, #e9c86e 0 1.3px, rgba(0,0,0,0) 2px),
    linear-gradient(180deg, #f8efdb 0%, #f1e2c2 78%, #e7d3a9 100%);
}
.t-house::before {
  left: 2px; top: -2px; width: 40px; height: 21px; z-index: 1;
  filter: drop-shadow(0 2px 1px rgba(90,60,30,.25));
}
.t-house.tv1::before { background: linear-gradient(180deg, #7d94a8, #5f7a90); }
.t-house.tv2::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0 29px, #a89a83 29px 34px, rgba(0,0,0,0) 34px) top / 100% 8px no-repeat,
    linear-gradient(180deg, #c96f4a, #b25a38);
}
.t-house.tv3::before { background: linear-gradient(180deg, #a86a8a, #8d5573); }

/* --- 木: バリエーション（背高・実つき） --- */
.t-tree.tv2::before {
  width: 26px; height: 36px; left: 9px; top: -3px; border-radius: 48% 48% 50% 50%;
  background: radial-gradient(circle at 40% 26%, #6db554, #3f7f33);
}
.t-tree.tv0::after, .t-tree.tv3::after { left: 20px; }
.t-tree.tv3 { background-image: radial-gradient(circle at 30% 38%, #e2694e 0 2.4px, rgba(0,0,0,0) 3.4px), radial-gradient(circle at 64% 55%, #e2694e 0 2.2px, rgba(0,0,0,0) 3.2px), radial-gradient(circle at 48% 24%, #efa03c 0 2px, rgba(0,0,0,0) 3px); }

/* --- 装飾の増量（buildWorld の deco-* に対応） --- */
.tile.deco-tuft::after {
  content: ""; position: absolute; left: 24%; bottom: 8%; width: 5px; height: 13px; border-radius: 3px;
  background: linear-gradient(180deg, #79b657, #5d9c42);
  box-shadow: 8px 3px 0 -0.5px #6cab4d, 16px 1px 0 -1px #79b657, 4px 6px 0 -1.5px #8cc46a, 13px 7px 0 -2px #5d9c42;
}
.tile.deco-bloom::after {
  content: ""; position: absolute; left: 20%; bottom: 12%; width: 26px; height: 14px; box-shadow: none;
  background:
    radial-gradient(circle at 6px 9px, #f7c948 0 1.8px, rgba(0,0,0,0) 2.6px),
    radial-gradient(circle at 6px 8px, #f28bb4 0 3.4px, rgba(0,0,0,0) 4.4px),
    radial-gradient(circle at 19px 5px, #f7c948 0 1.8px, rgba(0,0,0,0) 2.6px),
    radial-gradient(circle at 19px 4px, #fdfdf8 0 3.4px, rgba(0,0,0,0) 4.4px),
    radial-gradient(circle at 13px 12px, #f7c948 0 1.6px, rgba(0,0,0,0) 2.4px),
    radial-gradient(circle at 13px 11px, #f6a5c0 0 3px, rgba(0,0,0,0) 4px);
}
.tile.deco-sprout::after {
  content: ""; position: absolute; left: 46%; bottom: 14%; width: 3px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #79b657, #5d9c42);
  box-shadow: -4px -3px 0 -0.8px #8cc46a, 4px -4px 0 -0.8px #79b657;
}
.tile.deco-shroom::after {
  content: ""; position: absolute; left: 30%; bottom: 12%; width: 15px; height: 10px; box-shadow: none;
  background:
    radial-gradient(circle at 5px 3px, #fff 0 1.4px, rgba(0,0,0,0) 2.2px),
    radial-gradient(circle at 11px 4px, #fff 0 1.2px, rgba(0,0,0,0) 2px),
    linear-gradient(180deg, #d2604f 0 55%, #f2e4c8 56% 82%, rgba(0,0,0,0) 83%);
  border-radius: 8px 8px 3px 3px;
}

/* --- タイトル: 世界のキャストと題字 --- */
.title-stage .title-cast { position: absolute; left: 0; right: 0; bottom: 4%; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px; pointer-events: none; }
.title-cast .tc { display: flex; align-items: flex-end; }
.title-cast .chibi { width: 46px; height: auto; }
.title-cast .tc-hero .hero { transform: scale(.68); transform-origin: 50% 100%; margin: 0 -8px -16px; }
.title-cast .tc-slime .slime { margin-bottom: -6px; }
#screen-title .game-title { color: #2e4a2a; text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 5px 14px rgba(70,110,50,.28); }

/* --- シート/会話を世界の色に着せる（構造は不変） --- */
.sheet { background: linear-gradient(180deg, #fffdf4 0%, #faf3df 100%); border-top: 3px solid #79a95c; box-shadow: 0 -10px 34px rgba(43,66,40,.28); }
.sheet-title { background: linear-gradient(180deg, #8a6844, #75562f); color: #fdf6e0; border-radius: 10px; padding: 7px 10px; letter-spacing: .12em; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(90,60,25,.3); }
.cmd { border-color: #cfc39f; background: linear-gradient(180deg, #fffef9, #f7efdb); }
.cmd.on { background: var(--ink); }
.dlg { border: 1.5px solid #79a95c; }

/* --- バトル: 演じる演出 --- */
.party-unit { position: relative; }
.party-unit.acting { animation: act-step .78s cubic-bezier(.22,.8,.3,1); z-index: 6; }
@keyframes act-step { 0% { transform: translateX(0); } 25%, 72% { transform: translateX(17px) scale(1.05); } 100% { transform: translateX(0); } }
.gag-balloon {
  position: absolute; z-index: 40; width: 190px; max-width: 54vw;
  background: #fffef9; border: 2px solid #2e2a24; border-radius: 14px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.55; color: #2e2a24;
  box-shadow: 0 6px 16px rgba(30,30,20,.25); pointer-events: none;
  animation: balloon-in .28s cubic-bezier(.22,.8,.3,1);
}
.gag-balloon::after {
  content: ""; position: absolute; left: 26px; bottom: -8px; width: 13px; height: 13px;
  background: #fffef9; border-right: 2px solid #2e2a24; border-bottom: 2px solid #2e2a24;
  transform: rotate(45deg); border-bottom-right-radius: 3px;
}
@keyframes balloon-in { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
.tear {
  position: absolute; z-index: 31; width: 9px; height: 13px; pointer-events: none;
  border-radius: 60% 60% 60% 60% / 80% 80% 40% 40%;
  background: linear-gradient(180deg, #cdeffb, #6db3dd);
  animation: tear-fall .85s cubic-bezier(.4,.6,.6,1) forwards;
}
@keyframes tear-fall { 0% { opacity: 0; transform: translateY(-2px) scale(.6); } 18% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(26px) scale(.92); } }
.sweat {
  position: absolute; z-index: 31; width: 9px; height: 13px; pointer-events: none;
  border-radius: 60% 60% 60% 60% / 80% 80% 40% 40%;
  background: linear-gradient(180deg, #d8ecfa, #8fc3e8);
  animation: sweat-slide 1.05s ease-in forwards;
}
@keyframes sweat-slide { 0% { opacity: 0; transform: translate(0,-2px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, 20px); } }
.dmg-float.warai { color: #d9832e; font-size: 17px; animation: warai-up 1s ease-out forwards; }
@keyframes warai-up { 0% { opacity: 0; transform: translateY(4px) rotate(-6deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) rotate(5deg); } }
.hissatsu-ceremony {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,16,40,.16), rgba(20,16,40,.55));
  animation: hc-in .3s ease; pointer-events: none;
}
.hissatsu-ceremony .hc-name {
  font-size: 25px; font-weight: 800; letter-spacing: .06em; color: #ffe9a8; text-align: center;
  text-shadow: 0 2px 0 #7a5410, 0 0 22px rgba(255,205,80,.65);
  padding: 10px 22px; border-top: 2.5px solid rgba(255,220,130,.9); border-bottom: 2.5px solid rgba(255,220,130,.9);
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(30,22,6,.45) 18%, rgba(30,22,6,.45) 82%, rgba(0,0,0,0));
  animation: hc-name 1.1s cubic-bezier(.22,.8,.3,1);
}
@keyframes hc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-name { 0% { opacity: 0; transform: translateX(-14px); letter-spacing: .3em; } 30% { opacity: 1; transform: none; } 100% { opacity: 1; } }

/* ================= ディープビルド: 画面いっぱい化 ================= */
/* フィールド/バトル表示中はページ地（.wrap の余白）を無くす */
body.in-field .wrap, body.in-battle .wrap { padding: 0; }

/* --- フィールド: 世界が端から端まで。操作系は世界の上に浮く --- */
#screen-field.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; padding-top: 0; }
#screen-field #field-viewport {
  flex: 1 1 auto; width: 100%; height: auto; min-height: 0; margin: 0;
  border: none; border-radius: 0; box-shadow: none;
}
#screen-field #field-viewport::after { border-radius: 0; }
#screen-field .field-hud {
  position: absolute; top: calc(54px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px;
  z-index: 30; margin: 0; pointer-events: none;
}
#screen-field .field-hud > * { pointer-events: auto; }
#screen-field .field-hud span, #screen-field .field-hud .hud-btn {
  background: rgba(255,253,249,.88); border: 1px solid rgba(120,110,85,.35); border-radius: 999px;
  padding: 5px 13px; box-shadow: 0 3px 9px rgba(35,50,30,.20); backdrop-filter: blur(3px);
}
#screen-field #hud-chapter { color: var(--ink); }
#screen-field .field-controls {
  position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30; max-width: none; margin: 0; padding: 0 16px;
}
#screen-field .dlg { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }

/* --- バトル: 背景が画面全体、情報と司令は世界の上に重なる --- */
#screen-battle { position: relative; background: linear-gradient(180deg, #8fc973 0%, #7ab55e 55%, #679c4e 100%); }
#screen-battle.active { height: 100%; }
#screen-battle .battle-head {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; z-index: 20; margin: 0;
}
#screen-battle .battle-head > * {
  background: rgba(255,253,249,.88); border: 1px solid rgba(120,110,85,.3); border-radius: 999px;
  padding: 3px 12px; box-shadow: 0 3px 9px rgba(35,50,30,.18); backdrop-filter: blur(3px);
}
#screen-battle .core-gauge {
  position: absolute; top: calc(92px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; z-index: 20;
  background: rgba(255,253,249,.88); border: 1px solid rgba(120,110,85,.3); border-radius: 999px;
  padding: 4px 14px; box-shadow: 0 3px 9px rgba(35,50,30,.18); backdrop-filter: blur(3px); margin: 0;
}
#screen-battle .scene { border-radius: 0; margin-top: 0; box-shadow: none; }
#screen-battle .log {
  background: linear-gradient(180deg, rgba(255,254,251,.94) 0%, rgba(253,250,242,.92) 70%, rgba(250,245,234,.92) 100%);
  margin: 8px 10px 0; border-radius: 14px;
}
#screen-battle .party-status { margin: 8px 10px 0; }
#screen-battle .commands { margin: 8px 10px 0; }
#screen-battle .commands.submenu { margin-bottom: 0; }
#screen-battle > .commands:last-of-type { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
#party-stage .hero { scale: 1.18; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  .ent.npc.hop, .party-unit.acting, .gag-balloon, .tear, .sweat, .dmg-float.warai, .hissatsu-ceremony, .hissatsu-ceremony .hc-name { animation: none !important; }
}

/* ================= ディープビルド2 2026-11-01: ドット排除・塗りの世界 =================
   龍大判定「ドットやめてほしい」への対応。
   ・全タイル／バトル地面のドット柄（radial-gradient の点描グリッド）を全廃
   ・タイル毎の明度フィルタ（市松の正体）を廃止し、地面は一枚の「塗り」に
   ・家・木・岩は sprites.js の SVG 置き物で描く（従来の CSS 記号画は停止）
   ・草の穂は棒＋影の記号画から、曲線の SVG に */

/* 地面そのもの: ワールド全体を草の塗りに */
#field-world { background: linear-gradient(180deg, #aad488 0%, #9fc973 45%, #97c36e 100%); }

/* 市松の廃止 */
.tile.tv1, .tile.tv2, .tile.tv3 { filter: none; }

/* ============ Deep Build 2 / ノースクロール（全画面・ゲームの作法） ============
   一覧はシート内スクロールでなく「ページ送り＋絞り込み」で見せる。
   シートは中身が収まる前提で overflow を閉じ、ログはメッセージウィンドウ化する。 */
.sheet { overflow-y: hidden; padding-bottom: 18px; }
.panel-body { margin-bottom: 8px; }
.log { overflow: hidden; height: 144px; }
/* バトル: サブメニューが開いても画面が伸びないよう、シーン側が縮む */
#screen-battle .scene { min-height: 100px; }
#screen-battle .commands { margin-top: 8px; }
#screen-battle .party-status { margin-top: 6px; }
/* 小数ピクセル積み上げによる ±1px のはみ出しを画面境界で断つ（wrap に伝播させない） */
#screen-battle { overflow: hidden; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pager .cmd.small { min-width: 104px; }
.pager .cmd.small:disabled { opacity: .38; }
.pager-n { font-size: 12px; color: var(--sub); letter-spacing: .08em; white-space: nowrap; }
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.eq-chips .cmd.small { padding: 5px 10px; font-size: 12px; }
.eq-chips .cmd.small.on, .eq-tabs .cmd.small.on { background: var(--slime); color: #fff; border-color: var(--slime-deep); }
/* タイトルは1画面に収める（wrap スクロールを出さない） */
#screen-title .title-actions { margin-top: 12px; }
#screen-title .sound-bar { margin-top: 10px; }
#screen-title .fineprint { margin-top: 8px; }
#screen-title .title-ver { margin-top: 8px; }
#screen-title .az-player { margin-top: 4px; }

/* 地面タイルは四角の色面でなく「色の滲み」だけにする */
.t-grass { background: none; }
.t-forest { background: radial-gradient(ellipse 175% 175% at 50% 50%, rgba(88,142,64,.50) 42%, rgba(88,142,64,0) 96%); }
.t-village { background: radial-gradient(ellipse 175% 175% at 50% 50%, rgba(228,239,199,.62) 42%, rgba(228,239,199,0) 96%); }
.t-path { background: radial-gradient(ellipse 128% 128% at 50% 50%, rgba(237,221,176,.96) 52%, rgba(237,221,176,0) 79%); }
.t-plaza { background: radial-gradient(ellipse 128% 128% at 50% 50%, rgba(233,226,207,.95) 52%, rgba(233,226,207,0) 79%); }
.t-sand { background: radial-gradient(ellipse 128% 128% at 50% 50%, rgba(240,226,182,.96) 52%, rgba(240,226,182,0) 79%); }
.t-rockland { background: radial-gradient(ellipse 128% 128% at 50% 50%, rgba(206,187,152,.85) 45%, rgba(206,187,152,0) 78%); }
.t-water { background: radial-gradient(ellipse 130% 130% at 50% 50%, #79b7e0 62%, rgba(121,183,224,0) 88%); }
.t-wall { background: linear-gradient(180deg, #a9adb6, #9399a3); border-bottom: none; box-shadow: inset 0 -6px 8px rgba(70,76,88,.35), inset 0 3px 4px rgba(255,255,255,.35); }

/* タイル前面の質感: ドット3層 → 柔らかい光の滲み1層（位置だけタイル毎に散らす） */
.t-grass::before, .t-forest::before, .t-village::before, .t-path::before,
.t-plaza::before, .t-rockland::before, .t-sand::before, .t-water::before {
  background-image: radial-gradient(closest-side, rgba(255,255,244,.12), rgba(255,255,244,0));
  background-size: 165% 165%; background-repeat: no-repeat; background-position: 30% 25%;
}
.t-grass.tv1::before, .t-forest.tv1::before, .t-village.tv1::before, .t-path.tv1::before,
.t-plaza.tv1::before, .t-rockland.tv1::before, .t-sand.tv1::before, .t-water.tv1::before { background-position: 68% 42%; }
.t-grass.tv2::before, .t-forest.tv2::before, .t-village.tv2::before, .t-path.tv2::before,
.t-plaza.tv2::before, .t-rockland.tv2::before, .t-sand.tv2::before, .t-water.tv2::before { background-position: 14% 68%; }
.t-grass.tv3::before, .t-forest.tv3::before, .t-village.tv3::before, .t-path.tv3::before,
.t-plaza.tv3::before, .t-rockland.tv3::before, .t-sand.tv3::before, .t-water.tv3::before { background-position: 55% 8%; }

/* 置き物タイル自体は透明に（SVG が描く）。旧 CSS 記号画は停止 */
.t-tree, .t-house, .t-rock { background: none; box-shadow: none; }
/* 小道具タイルにも地の塗りを敷く（下地の生グリーンが四角く透けるのを防ぐ） */
.t-house { background: radial-gradient(ellipse 175% 175% at 50% 50%, rgba(228,239,199,.62) 42%, rgba(228,239,199,0) 96%); }
.t-rock { background: radial-gradient(ellipse 175% 175% at 50% 50%, rgba(233,233,224,.55) 42%, rgba(233,233,224,0) 96%); }
.t-tree { background: radial-gradient(ellipse 175% 175% at 50% 50%, rgba(88,142,64,.26) 42%, rgba(88,142,64,0) 96%); }
.t-tree::before, .t-tree::after, .t-house::before, .t-house::after, .t-rock::before, .t-rock::after { content: none; }

/* 置き物レイヤー／塗りレイヤー／エンティティの重なり順 */
#paint { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 22% at 22% 16%, rgba(255,246,200,.13), rgba(255,246,200,0) 70%),
    radial-gradient(ellipse 40% 26% at 76% 34%, rgba(64,110,44,.12), rgba(64,110,44,0) 70%),
    radial-gradient(ellipse 36% 20% at 30% 58%, rgba(64,110,44,.10), rgba(64,110,44,0) 70%),
    radial-gradient(ellipse 30% 18% at 84% 78%, rgba(255,246,200,.11), rgba(255,246,200,0) 70%),
    radial-gradient(ellipse 44% 24% at 52% 92%, rgba(64,110,44,.10), rgba(64,110,44,0) 70%),
    radial-gradient(ellipse 26% 15% at 60% 8%, rgba(255,255,244,.10), rgba(255,255,244,0) 70%);
}
#props { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.prop { position: absolute; pointer-events: none; }
.prop svg { display: block; width: 100%; height: auto; }
.prop-house { width: 58px; }
.prop-tree { width: 52px; }
.prop-rock { width: 48px; }
#ents { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* 草の穂: 曲線の SVG（棒＋box-shadow の記号画を置き換え） */
.t-grass::after, .t-forest::after {
  width: 22px; height: 15px; border-radius: 0; background-color: rgba(0,0,0,0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M12 16 Q10.4 8 5.5 2.8 Q11 5.6 12.2 11.6 Q13.2 5 18.5 1.8 Q15 7.6 14 16 Z' fill='%236da34f'/%3E%3Cpath d='M4.6 16 Q4 10 0.8 6.8 Q5.8 8.8 6.8 16 Z M19.4 16 Q20 10 23.2 6.8 Q18.2 8.8 17.2 16 Z' fill='%235d9c42'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; box-shadow: none;
}
.tile.deco-tuft::after {
  width: 31px; height: 21px; left: 16%; bottom: 6%; border-radius: 0; background-color: rgba(0,0,0,0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M12 16 Q10.4 8 5.5 2.8 Q11 5.6 12.2 11.6 Q13.2 5 18.5 1.8 Q15 7.6 14 16 Z' fill='%236da34f'/%3E%3Cpath d='M4.6 16 Q4 10 0.8 6.8 Q5.8 8.8 6.8 16 Z M19.4 16 Q20 10 23.2 6.8 Q18.2 8.8 17.2 16 Z' fill='%235d9c42'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; box-shadow: none;
}
.tile.deco-sprout::after {
  width: 15px; height: 10px; border-radius: 0; background-color: rgba(0,0,0,0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M12 16 Q10.4 8 5.5 2.8 Q11 5.6 12.2 11.6 Q13.2 5 18.5 1.8 Q15 7.6 14 16 Z' fill='%2379b657'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; box-shadow: none;
}

/* 店主の挨拶（シート内・世界の色） */
.shop-greet { margin: 8px 2px 0; font-size: 13.5px; line-height: 1.6; color: #5c4a26; }

/* バトル地面: ドット柄を廃し、柔らかい光と影の滲みだけに */
.ground::before {
  background-image:
    radial-gradient(ellipse 62% 48% at 20% 26%, rgba(255,255,240,.15), rgba(255,255,240,0) 70%),
    radial-gradient(ellipse 56% 42% at 80% 64%, rgba(70,90,40,.13), rgba(70,90,40,0) 70%),
    radial-gradient(ellipse 42% 30% at 56% 12%, rgba(255,250,225,.11), rgba(255,250,225,0) 70%);
  background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat;
}

/* ================= 操作感・画作り直し 第2段 2026-11-01 =================
   地面は app.js の groundSVG() が 1枚の SVG として描く（#ground）。
   旧 .tile 群（タイル毎div＋tv明暗フィルタ＋1.2pxドット反復）は DOM から消え、
   下記の .tile 系ルールは互換のため残置するだけの死にルール。
   勇者は HeroSVG（sprites.js）、宝箱は ChestSVG に置き換え。 */
#ground { position: absolute; left: 0; top: 0; z-index: 0; display: block; }
.ent.player svg.hero-svg {
  position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
  height: 51px; width: auto; display: block;
}
.ent.chest::before { content: none; }
.ent.chest svg.chest-svg {
  position: absolute; left: 4px; top: 7px; width: 36px; height: auto; display: block;
}

/* ================= バグ総点検 2026-11-02: 短い画面 (高さ720px以下) の収納 =================
   375x667 実測で欠陥: タイトル画面 .wrap 803>667 (スクロール発生)、エンディング 677>667、
   パネル/ショップの .sheet が max-height:82svh に切られ下部が到達不能 (CLIP)。
   812px級では収まる前提の余白・寸法を、短い画面でのみ締めて全画面ノースクロールを守る。
   仕組み (ページ送り) は変えず、寸法だけを詰める。 */
@media (max-height: 720px) {
  .wrap { padding: 12px 18px 14px; }
  #screen-title .brand { margin-top: 4px; }
  .title-stage { height: 188px; margin-top: 8px; }
  #screen-title .game-title { margin-top: 10px; font-size: 30px; }
  #screen-title .title-player { margin-top: 6px; }
  #screen-title .title-actions { margin-top: 10px; }
  #screen-title .howto-link { margin-top: 8px; }
  #screen-title .sound-bar { margin-top: 6px; }
  #screen-title .fineprint { margin-top: 4px; }
  #screen-title .title-ver { margin-top: 4px; }
  .sheet { max-height: 94svh; padding: 12px 16px 12px; }
  .sheet-title { margin-bottom: 8px; }
  .panel-body { margin-bottom: 6px; }
  .row { padding: 6px 2px; }
  .sub-h { margin: 10px 0 2px; }
  .fine { margin-top: 6px; }
  .pager { margin-top: 8px; }
  .shop-gold { margin-bottom: 2px; }
  .menu-grid { margin-bottom: 10px; }
}