.battle-arena{position:relative;min-height:470px;overflow:hidden;background:radial-gradient(circle,#fff7cf,#f7d8a2);border:3px solid #24123d;border-radius:18px;padding:15px}.fighter{position:absolute;left:10%;width:80%;text-align:center;z-index:2}.fighter img{height:150px;width:100%;object-fit:contain;filter:drop-shadow(0 8px 3px #24123d55)}.fighter b,.fighter strong{display:block;font-size:20px;background:#fffaf0;border:2px solid #24123d;border-radius:8px}.enemy-fighter{top:-220px;animation:slideEnemy .9s ease-out forwards}.self-fighter{bottom:-220px;animation:slideSelf .9s ease-out forwards}.vs-mark{position:absolute;top:46%;left:0;right:0;text-align:center;font-size:56px;font-weight:1000;color:#f06aa8;text-shadow:3px 3px #24123d;z-index:3;animation:vsPop .8s ease-out}.attacking{animation:attack .5s ease-in-out}.shaking{animation:shake .55s ease-in-out}.attack-fx{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) scale(.3);opacity:0;z-index:5;background:#f06aa8;color:#fff;border:4px solid #24123d;padding:13px 20px;clip-path:polygon(0 25%,20% 20%,12% 0,35% 12%,50% 0,60% 13%,86% 5%,82% 27%,100% 40%,82% 55%,92% 78%,66% 73%,55% 100%,42% 78%,15% 90%,20% 65%,0 60%);font-size:28px;font-weight:1000}.attack-fx.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:.25s}.battle-text,.battle-log-list{text-align:center;font-weight:900;margin:10px 0}.battle-log-list div,.battle-log{padding:8px;border-bottom:1px solid #c8aa59}@keyframes slideEnemy{to{top:15px}}@keyframes slideSelf{to{bottom:15px}}@keyframes vsPop{0%{transform:scale(0) rotate(-12deg)}80%{transform:scale(1.2) rotate(4deg)}100%{transform:scale(1)}}@keyframes attack{50%{transform:translateX(55px) scale(1.08)}}@keyframes shake{20%,60%{transform:translateX(-12px) rotate(-3deg)}40%,80%{transform:translateX(12px) rotate(3deg)}}.result-burst{text-align:center;font-size:64px;font-weight:1000;animation:vsPop .8s ease-out}.result-burst.win{color:#e3a900}.result-burst.lose{color:#43206b}

.battle-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:5px 0}.battle-stats span{font-size:11px;background:#fffaf0;border:1px solid #c8aa59;border-radius:4px;padding:3px}.core-img{display:block;max-width:90%;max-height:260px;margin:12px auto;object-fit:contain}

.attack-up{animation:attackUp .5s ease-in-out}.attack-down{animation:attackDown .5s ease-in-out}.hp-hit{animation:hpHit .5s ease-in-out;color:#d71920;background:#ffd5d5!important}.battle-stats span{display:block}.battle-stats span:after{content:'';display:block;height:5px;margin-top:2px;background:linear-gradient(90deg,#f06aa8 60%,#eadfc5 60%);border-radius:5px}@keyframes attackUp{50%{transform:translateY(-35px) scale(1.08)}}@keyframes attackDown{50%{transform:translateY(35px) scale(1.08)}}@keyframes hpHit{50%{transform:scale(1.2)}}

/* 仕様書のスマホ向けバトルレイアウト：4ステータスを1列で表示 */
.battle-arena .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:100%;font-size:11px}.battle-arena .stat{padding:4px 2px;min-width:0}.battle-arena .stat b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-arena .bar{height:5px}.battle-arena{min-height:520px;grid-template-rows:1fr 58px 1fr}.battle-arena .fighter img{height:115px}@media(max-width:420px){.battle-arena{min-height:470px;padding:8px}.battle-arena .fighter img{height:95px}.battle-arena .stats{font-size:9px}.battle-arena .vs-mark{font-size:42px}}

/* updated battle layout */
.battle-arena{min-height:680px;display:grid;grid-template-rows:1fr 90px 1fr;gap:8px;align-items:center;padding:14px 10px}.battle-arena .fighter{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.battle-arena .enemy-fighter{grid-row:1;animation:slideEnemy .9s ease-out forwards}.battle-arena .self-fighter{grid-row:3;animation:slideSelf .9s ease-out forwards}.battle-arena .fighter img{height:145px}.battle-arena .vs-mark{position:relative;grid-row:2;grid-column:1;top:auto;align-self:center}.battle-text{min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.battle-log-list{max-height:120px;overflow:auto}.battle-stats{width:min(100%,320px)}

/* 最終仕様：スマホ1画面に収める */
.battle-arena{min-height:390px!important;grid-template-rows:minmax(130px,1fr) 42px minmax(130px,1fr)!important;gap:2px!important;padding:6px!important}.battle-arena .fighter img{height:72px!important}.battle-arena .fighter h2{font-size:16px;margin:2px}.battle-arena .stats,.battle-inline-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:2px!important;width:100%!important;font-size:9px}.battle-arena .stat{padding:2px!important}.battle-arena .bar{height:4px}.battle-arena .vs-mark{font-size:38px}.battle-log-list{max-height:72px!important;margin:3px 0!important}.battle-log-list div{padding:3px!important;font-size:11px}

/* 旧レイアウトと現行レイアウトの中間サイズ */
.battle-arena{min-height:500px!important;grid-template-rows:minmax(170px,1fr) 54px minmax(170px,1fr)!important;gap:5px!important;padding:10px!important}.battle-arena .fighter img{height:105px!important}.battle-arena .fighter h2{font-size:18px;margin:4px}.battle-arena .stats,.battle-inline-stats{font-size:10px;gap:3px!important}.battle-arena .stat{padding:3px!important}.battle-arena .bar{height:5px}.battle-arena .vs-mark{font-size:48px}.battle-log-list{max-height:100px!important}

/* メイン画面は見出しだけを名前として表示し、カード内の重複名を隠す */
#app>.monster-card>.name{display:none}
.qr{display:grid!important;place-items:center!important;min-height:220px!important;padding:12px!important;background:#fff!important;border:3px solid #125b3c!important;border-radius:12px!important}.qr img,.qr canvas{display:block!important;width:190px!important;height:190px!important}

/* バトル画面の正本レイアウト。過去の .battle-arena 系は使用しない。 */
.battle-stage{position:relative;height:min(72vh,590px);min-height:490px;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) 58px minmax(0,1fr);gap:4px;padding:10px;background:radial-gradient(circle at center,#fffbdc,#f7dc79);border:4px solid #18734b;border-radius:18px}
.battle-fighter{position:relative;z-index:2;min-height:0;display:grid;grid-template-rows:minmax(90px,1fr) auto auto;align-items:center;text-align:center}
.battle-enemy{grid-row:1;animation:battleEnterEnemy .8s ease-out both}.battle-self{grid-row:3;animation:battleEnterSelf .8s ease-out both}
.battle-fighter.battle-ready{animation:none;opacity:1;transform:none}
.battle-fighter img{display:block;width:100%;height:100%;min-height:90px;max-height:145px;object-fit:contain;filter:drop-shadow(0 7px 4px #173b2b55)}
.battle-fighter h2{margin:0 0 3px;font-size:17px;line-height:1.1;color:#173b2b}
.battle-vs{grid-row:2;z-index:3;align-self:center;text-align:center;font-size:48px;line-height:1;font-weight:1000;color:#f0b900;text-shadow:2px 2px 0 #173b2b;animation:vsPop .7s ease-out}
.battle-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:100%}
.battle-stat{min-width:0;padding:3px 2px;background:#fffdf2;border:2px solid #d0ae32;border-radius:7px;font-size:10px;line-height:1.1}
.battle-stat-name{display:block;white-space:nowrap;font-weight:800}.battle-stat strong{display:block;font-size:15px;color:#173b2b}.battle-stat .bar{height:5px;margin-top:2px}.battle-stat .fill{transition:width .65s ease}
.battle-progress{height:24px;margin:6px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:13px;line-height:24px;font-weight:900;color:#173b2b}
.battle-damage{position:absolute;left:50%;z-index:8;opacity:0;transform:translate(-50%,-50%) scale(.2);padding:15px 22px;background:#ef4f4f;color:#fff;border:4px solid #173b2b;clip-path:polygon(0 28%,18% 22%,10% 0,35% 13%,50% 0,62% 13%,88% 5%,82% 29%,100% 42%,83% 57%,92% 82%,66% 73%,53% 100%,40% 78%,13% 91%,20% 65%,0 59%);font-size:25px;font-weight:1000;pointer-events:none}.battle-damage.hit-enemy{top:24%}.battle-damage.hit-self{top:76%}.battle-damage.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:.2s}
.battle-charge-up{animation:battleChargeUp .65s ease-in-out!important}.battle-charge-down{animation:battleChargeDown .65s ease-in-out!important}.battle-shake{animation:battleShake .6s ease-in-out!important}.battle-hp-hit{animation:battleHpHit .65s ease;color:#d81818!important;background:#ffe0d6!important}
.battle-result{min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;background:radial-gradient(circle,#fffbdc,#f7dc79);border:4px solid #18734b;border-radius:18px;padding:18px}.battle-result-title{font-size:68px;line-height:1;font-weight:1000}.battle-result.is-win .battle-result-title{color:#d99f00}.battle-result.is-lose .battle-result-title{color:#633889}.battle-result-core{display:block;width:min(78%,300px);max-height:280px;aspect-ratio:1;object-fit:cover;margin:15px auto;border:4px solid #f0b900;border-radius:14px}.battle-result-note{font-size:20px;font-weight:900}.battle-result-guide{margin-top:18px;font-size:12px}
@keyframes battleEnterEnemy{from{transform:translateY(-115%);opacity:0}to{transform:none;opacity:1}}@keyframes battleEnterSelf{from{transform:translateY(115%);opacity:0}to{transform:none;opacity:1}}@keyframes battleChargeUp{50%{transform:translateY(-22px) scale(1.04)}}@keyframes battleChargeDown{50%{transform:translateY(22px) scale(1.04)}}@keyframes battleShake{20%,60%{transform:translateX(-10px) rotate(-2deg)}40%,80%{transform:translateX(10px) rotate(2deg)}}@keyframes battleHpHit{50%{transform:scale(1.12)}}
.qr img,.qr canvas{display:block!important;width:220px!important;height:220px!important;max-width:100%;aspect-ratio:1/1;object-fit:contain}
@media(max-width:420px),(max-height:760px){.battle-stage{height:calc(100dvh - 84px);min-height:440px;max-height:560px;padding:7px;grid-template-rows:minmax(0,1fr) 46px minmax(0,1fr)}.battle-fighter img{min-height:75px;max-height:118px}.battle-vs{font-size:42px}.battle-stat{font-size:9px;padding:2px 1px}.battle-stat strong{font-size:13px}.battle-progress{margin-top:3px;font-size:12px}.battle-result{min-height:440px}}
.battle-code-display{display:flex;justify-content:center;align-items:center;width:100%;margin:12px auto 20px;text-align:center;font-size:clamp(52px,16vw,88px);font-weight:1000;line-height:1;letter-spacing:.12em;color:#174f35;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #f2cf42;white-space:nowrap}
.captured-core-list{margin-top:20px;padding-top:16px;border-top:2px solid #d7b62c}.captured-core{padding:14px 0;border-bottom:1px solid #d7b62c}.captured-core .core-img{display:block;max-width:100%;margin:0 auto 10px}.captured-core p{text-align:center;margin:0}
#mainMonsterToggle .monster-img{display:block;width:min(100%,320px);height:auto;aspect-ratio:1;margin:0 auto;object-fit:contain;cursor:pointer}#mainMonsterToggle .monster-img.showing-core{object-fit:cover;background:transparent}
.btn:disabled,.save-disabled{background:#9a9a9a!important;color:#f5f5f5!important;border-color:#777!important;cursor:not-allowed;opacity:.8}
.audio-wave{height:72px;margin:18px 0;border:3px solid #24123d;border-radius:14px;background:repeating-linear-gradient(90deg,#fff2b5 0 6px,#f4cf67 6px 10px);overflow:hidden}.audio-wave:after{content:'♪  ♫  ♪  ♫  ♪';display:block;text-align:center;font-size:36px;line-height:66px;letter-spacing:12px;color:#8b5a2b;opacity:.8}.audio-wave #audioWaveFill{height:100%;width:0;background:#d89b32aa;transition:width .1s}.audio-preview{width:100%;margin:14px 0}
.history-result{font-size:1.3em;font-weight:1000;text-shadow:0 1px 0 #fff}.history-win{color:#d92626}.history-lose{color:#1769d1}.history-draw{color:#555}
.monster-feeling{text-align:center;margin:0 0 12px;padding:8px;border-radius:10px;background:#e8f6ce;color:#174f35;font-weight:800}
.verification-code{display:flex;justify-content:center;gap:10px;margin:18px auto}.verification-code input{width:58px;height:72px;border:3px solid #d7b62c;border-radius:12px;background:#fff;text-align:center;font-size:40px;font-weight:900;color:#174f35;outline:none}.verification-code input:focus{border-color:#2f9a5f;box-shadow:0 0 0 4px #75d69b55}@media(max-width:380px){.battle-code-display{font-size:clamp(44px,15vw,64px)}.verification-code{gap:5px}.verification-code input{width:48px;height:64px;font-size:35px}}
.code-monster{text-align:center}.code-monster img{display:block;width:190px;height:190px;object-fit:contain;margin:0 auto}.code-monster h2{margin:4px 0 8px;font-size:28px}.code-monster p{margin:0 0 6px}

/* メインメニューの操作ボタンは1列で大きく表示 */
#app>.actions{grid-template-columns:1fr;gap:12px}
#app>.actions>.btn{width:100%;min-height:56px;font-size:18px}

/* 茶色の背景と黄色のボタン */
body{background:#8b5a2b!important}
.btn,.btn.pink,.btn.gold,.btn.purple,.btn.green{background:#f4cf67!important;color:#24123d!important;border-color:#24123d!important}