.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:#6b3a20;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #f2cf42;white-space:nowrap}
.code-monster .battle-explanation-image{display:block;width:80%;max-width:none;height:auto;margin:0 auto 8px;border:0;border-radius:0;object-fit:contain}
.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:#8b5a2bcc;transition:width .1s}.audio-preview{width:100%;margin:14px 0}

/* おならをとる：茶色の円形スピーカー風アイコン */
#recordAudio{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:190px;height:190px;margin:18px auto;border:8px solid #5a321c!important;border-radius:50%;background-color:#8b5a2b!important;background-image:radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px);background-size:18px 18px;background-position:22px 28px,47px 28px,72px 28px,34px 48px,59px 48px,84px 48px;background-repeat:no-repeat;box-shadow:inset 0 0 0 4px #b8773d,0 7px 0 #4c2a18,0 10px 18px #24123d66;color:transparent!important;font-size:0;overflow:visible}
#recordAudio::before{content:'おならをとる';position:absolute;top:54px;left:0;right:0;color:#fff8d6;font-size:20px;font-weight:1000;line-height:1;text-align:center;text-shadow:1px 2px #4c2a18;z-index:2}
#recordAudio::after{content:'💨';position:absolute;top:78px;left:0;right:0;color:#ffd447;font-size:58px;line-height:1;filter:saturate(1.4) drop-shadow(0 2px 0 #5a321c);z-index:2}
#recordAudio:active{transform:translateY(5px);box-shadow:inset 0 0 0 4px #b8773d,0 2px 0 #4c2a18,0 5px 10px #24123d66}

/* メイン画面にも同じ豪華なおならアイコンを表示 */
#app>.actions>#issue{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-column:1;width:190px;height:190px;min-height:190px;margin:18px auto;border:8px solid #5a321c!important;border-radius:50%;background-color:#8b5a2b!important;background-image:radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px);background-size:18px 18px;background-position:22px 28px,47px 28px,72px 28px,34px 48px,59px 48px,84px 48px;background-repeat:no-repeat;box-shadow:inset 0 0 0 4px #c48746,inset 0 -12px 18px #4c2a1888,0 8px 0 #4c2a18,0 13px 22px #24123d88;color:transparent!important;font-size:0;overflow:visible}
#app>.actions>#issue::before{content:'おならをとる';position:absolute;top:54px;left:0;right:0;color:#fff8d6;font-size:20px;font-weight:1000;line-height:1;text-align:center;text-shadow:1px 2px #4c2a18;z-index:2}
#app>.actions>#issue::after{content:'💨';position:absolute;top:78px;left:0;right:0;color:#ffd447;font-size:58px;line-height:1;filter:saturate(1.4) drop-shadow(0 3px 0 #5a321c) drop-shadow(0 0 8px #ffe58a);z-index:2}
#app>.actions>#issue:active{transform:translateY(5px);box-shadow:inset 0 0 0 4px #b8773d,inset 0 -5px 12px #4c2a1888,0 3px 0 #4c2a18,0 6px 12px #24123d66}

/* 参考画像の上部ボタン風：青い台座と銀色の穴あきドーム */
#recordAudio,#app>.actions>#issue{background-color:#177fc5!important;background-image:linear-gradient(145deg,#62d7ff 0%,#178dcc 45%,#07508e 100%)!important;border:7px solid #07518e!important;box-shadow:inset 0 3px 0 #a7efff,inset 0 -10px 14px #063b70,0 8px 0 #063b70,0 12px 20px #24123d88!important}
#recordAudio::after,#app>.actions>#issue::after{content:'';position:absolute;top:10px;left:10px;right:10px;height:90px;border-radius:50%;background-color:#dcecff;background-image:radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px),radial-gradient(circle,#68849e 0 2px,transparent 3px);background-size:16px 16px;background-position:18px 15px,42px 15px,66px 15px,30px 34px,54px 34px,78px 34px,18px 53px,42px 53px,66px 53px;background-repeat:no-repeat;box-shadow:inset 0 3px 4px #fff,inset 0 -7px 9px #799ab8;filter:none;z-index:1}
#recordAudio::before,#app>.actions>#issue::before{content:'おならをとる';position:absolute;top:112px;left:0;right:0;color:#fff;font-size:19px;font-weight:1000;line-height:1;text-align:center;text-shadow:1px 2px #063b70;z-index:3}
#recordAudio:active,#app>.actions>#issue:active{transform:translateY(5px);box-shadow:inset 0 2px 5px #063b70,0 3px 0 #063b70,0 6px 10px #24123d66!important}

/* メイン画面でそのままろくおんするための表示 */
#inlineAudioPanel{width:100%;margin:4px 0 12px;padding:8px 0;text-align:center}
#inlineAudioPanel .audio-wave{margin:8px 0}
#inlineWaveFill{height:100%;width:0;background:#8b5a2bcc;transition:width .1s linear}
#idleWaveFill{height:100%;width:0;background:#f4cf67}
#inlinePlay{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:46px;height:46px;border:3px solid #5a321c;border-radius:50%;background:#ffe16b;color:#5a321c;font-size:22px;font-weight:900}
#inlineAudioPanel.is-playable #inlinePlay{display:block}
#inlineAudioPanel:has(#inlineAudioPreview[src]) #inlinePlay{display:block}
#inlineAudioPanel.is-recording .audio-wave{background:repeating-linear-gradient(90deg,#c48746 0 6px,#8b5a2b 6px 10px)}
#inlineAudioPanel.is-recording .audio-wave:after{color:#4c2a18}
#inlineAudioPanel.is-recording #inlineWaveFill{background:#5a321ccc}
#inlineAudioPanel.is-recording #inlinePlay{display:none!important}
#inlineAudioPanel.is-recording .audio-wave button{display:none!important}
.audio-wave{position:relative}
#inlineAudioPanel p,#audioIdlePanel p{display:none!important}
#inlineAudioActions{grid-template-columns:1fr 1fr!important}
#inlineAudioActions #inlineUse{order:1}
#inlineAudioActions #inlineRetake{order:2}
#app>.actions{grid-template-columns:1fr 1fr!important}
#app>.actions>#issue{grid-column:1 / -1!important}
#app>.actions>#inlineAudioPanel,#app>.actions>#audioIdlePanel{grid-column:1 / -1!important;width:100%;}
#app>.actions>#issue{order:1}
#app>.actions>#inlineAudioPanel,#app>.actions>#audioIdlePanel{order:2}
#app>.actions>#warehouse{order:3}
#app>.actions>#core{order:4}
#app>.actions>#battle{order:5}
#app>.actions>#grow{order:6}
#app .grid{grid-template-columns:1fr!important}
#app .grid .tile{width:100%;display:block}
#app .grid .tile .monster-card{display:grid;grid-template-rows:auto auto auto;gap:8px}
#app .grid .tile .monster-card>.monster-img{grid-row:1;width:100%;height:220px}
#app .grid .tile .monster-card>.name{display:block!important;grid-row:2;margin:0;text-align:center}
#app .grid .tile .monster-card>.stats{grid-row:3;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.tile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.tile-actions .btn{min-height:48px}.grid+#decide{display:none!important}
.inline-audio-hidden{display:none!important}
#inlineAudioActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
#app>.actions>#issue{background-color:#8b5a2b!important;background-image:radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),radial-gradient(circle,#2f1a10 0 3px,transparent 4px),linear-gradient(145deg,#b8773d,#6b3a20)!important;border-color:#4c2a18!important;box-shadow:inset 0 0 0 4px #c48746,inset 0 -12px 18px #4c2a1888,0 8px 0 #4c2a18,0 13px 22px #24123d88!important}
#app>.actions>#issue::after{background:none!important;content:'💨'!important;font-size:58px!important;filter:saturate(1.4) drop-shadow(0 3px 0 #5a321c)!important}
.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}
.code-monster .stats{margin:4px auto 12px;text-align:left}

/* 画像版のおならボタン */
#recordAudio,#app>.actions>#issue{background-color:transparent!important;background-image:url('おならボタン.png')!important;background-position:center;background-repeat:no-repeat;background-size:contain;border:0!important;box-shadow:none!important;border-radius:0!important}
#recordAudio::before,#recordAudio::after,#app>.actions>#issue::before,#app>.actions>#issue::after{display:none!important;content:none!important}

/* 公開環境でも確実に読み込める画像名と、録音操作のタップ領域 */
#recordAudio,#app>.actions>#issue{background-image:url('onara-button.png')!important;pointer-events:auto!important}
#inlineAudioPanel,#inlineAudioActions{position:relative;z-index:10}
#inlineAudioActions button,#inlinePlay{pointer-events:auto!important}

/* 独立した録音確認パネル */
#app>.actions>#issue{padding:0!important;overflow:visible!important}
#app>.actions>#issue .issue-image{display:block;width:190px;height:190px;object-fit:contain;pointer-events:none}
#app>.actions>#issue:disabled{opacity:.65;cursor:wait}
#recordingPanel{grid-column:1 / -1;width:100%;margin:4px 0 12px;text-align:center}
#recordingPanel .audio-wave{position:relative;margin:8px 0;background:repeating-linear-gradient(90deg,#c48746 0 6px,#8b5a2b 6px 10px)}
#recordingFill{height:100%;width:0;background:#5a321ccc;transition:width .08s linear}
#recordingPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:48px;height:48px;border:3px solid #5a321c;border-radius:50%;background:#ffe16b;color:#5a321c;font-size:22px;font-weight:900}
#recordingPreview{display:none}
#recordingActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
#recordingActions .btn{background:#8b5a2b!important;color:#fff8d6!important;border-color:#4c2a18!important;box-shadow:0 3px 0 #4c2a18}

/* メイン画面のトレーナー表記と録音ボタン周辺の余白 */
#app>h1+.center{margin:-10px 0 8px;font-size:13px;color:#6b3a20;font-weight:800}
#app>.actions>#issue{margin:16px auto 0!important}
#recordingIdleBar,#recordingPanel{margin-top:-8px!important}
#recordingPanel #recordingStatus,#recordingPanel p{display:none!important}

/* 公開URLを起点に画像を取得し、画面表示の失敗を防ぐ */
#recordAudio,#app>.actions>#issue{background-image:url('/onara-button.png')!important}

/* おならボタンと現在使用中の録音バーの表示位置 */
#app>.actions>#issue{width:240px;height:240px;min-height:240px;margin:16px auto;order:1!important}
#app>.actions>#issue .issue-image{width:240px;height:240px}
#recordingPanel{order:2!important}
/* 旧録音UIは使用しないため、二重表示を防止する */
#audioIdlePanel,#inlineAudioPanel{display:none!important}

/* 録音前から表示する茶色の波形バー */
#recordingIdleBar{grid-column:1 / -1;order:2!important;width:100%;height:72px;margin:4px 0 12px;border:3px solid #24123d;border-radius:14px;background:#8b5a2b;overflow:hidden;position:relative}
#recordingIdleBar::after,#recordingPanel .audio-wave::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 5px,#e8bb72 5px 7px,transparent 7px 12px);opacity:.65}
.idle-wave-lines{position:absolute;inset:12px 0;background:repeating-linear-gradient(90deg,#5a321c 0 4px,transparent 4px 11px);mask-image:linear-gradient(135deg,transparent 0 14%,#000 28% 72%,transparent 86%);opacity:.6}
/* 録音中は波形ラインが揺れながら横へ流れる */
#recordingPanel.is-recording .audio-wave::after{animation:recordingWaveLines .42s linear infinite}
#recordingPanel.is-recording .audio-wave{background:#8b5a2b}
@keyframes recordingWaveLines{0%{transform:scaleY(.35) translateX(0);opacity:.35}50%{transform:scaleY(1) translateX(-9px);opacity:.95}100%{transform:scaleY(.5) translateX(-18px);opacity:.5}}

/* ボタン画像は背景を重ねず、透明PNGだけを表示する */
#app>.actions>#issue{background:none!important}

/* 波形は横1本の心電図ラインとして表示する */
#recordingIdleBar::after,#recordingPanel .audio-wave::after{content:none!important}
#recordingIdleBar .idle-wave-lines{top:50%;bottom:auto;left:10px;right:10px;height:3px;transform:translateY(-50%);background:#f4cf67;mask:none;opacity:1}
#recordingPanel .audio-wave::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M0 20H34L43 20L51 6L59 34L67 20H120' fill='none' stroke='%23ffe16b' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center/120px 40px;opacity:0}
#recordingPanel.is-recording .audio-wave::before{opacity:1;animation:ecgPulse .46s ease-in-out infinite}
@keyframes ecgPulse{0%,100%{transform:scaleY(.45);background-position:0 center;opacity:.55}45%{transform:scaleY(1.15);background-position:-18px center;opacity:1}70%{transform:scaleY(.7);background-position:-34px center;opacity:.8}}

/* 実際の音声データを描画する波形キャンバス */
#recordingCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#recordingPanel .audio-wave::before{display:none!important}

/* 波形を大きく、バー背景は茶色単色に統一 */
#recordingPanel .audio-wave{background:#8b5a2b!important}
#recordingCanvas{transform:scaleY(1.45);transform-origin:center}

/* モンスター誕生の祝福演出 */
#app.birth-celebration{min-height:min(760px,100vh);overflow:hidden;background:radial-gradient(circle at 50% 28%,#b8773d,#6b3a20 64%,#3d1d13);border-color:#f4cf67}
.birth-stage{position:relative;z-index:2;margin:42px auto 18px;padding:22px 16px 26px;border:4px solid #ffe16b;border-radius:24px;background:#fffaf0;box-shadow:0 12px 30px #24123d88;animation:birthReveal .9s cubic-bezier(.18,.9,.28,1.15) both;transform-origin:center}
.birth-stage .monster-card{animation:birthDetail .7s .32s ease-out both}.birth-stage .name{margin:4px 0 8px;color:#5a321c}.birth-message{text-align:center;margin:0 0 8px;color:#8b3f15;font-size:20px;font-weight:1000;letter-spacing:.06em}
.birth-confetti{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.birth-confetti i{position:absolute;top:-30px;left:calc(var(--x) * 1%);width:9px;height:17px;border-radius:2px;background:hsl(calc(var(--x) * 3.6),90%,62%);transform:rotate(var(--r));animation:confettiFall 2.2s var(--d) ease-in infinite}.birth-confetti i:nth-child(3n){width:14px;height:7px;background:#ffe16b}.birth-confetti i:nth-child(4n){background:#79d9ff}.birth-confetti i:nth-child(5n){background:#ff8fc8}
@keyframes birthReveal{0%{transform:scale(.08);opacity:0;filter:blur(8px)}65%{transform:scale(1.05);opacity:1;filter:blur(0)}100%{transform:scale(1)}}@keyframes birthDetail{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}@keyframes confettiFall{0%{transform:translateY(-45px) rotate(var(--r));opacity:0}12%{opacity:1}100%{transform:translateY(780px) rotate(calc(var(--r) + 540deg));opacity:0}}

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

/* そだてる：タップでふれあうモンスター */
#petMonster{display:grid;place-items:center;touch-action:manipulation;user-select:none;cursor:pointer;transform-origin:center;margin:6px auto 0;max-width:360px}
#petMonster img{display:block;width:min(100%,330px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 5px #24123d55);pointer-events:none}
#petMonster h2{margin:2px 0 0;color:#5a321c;pointer-events:none}
#petMonster.pet-squish{animation:petSquish .32s ease-out both}
@keyframes petSquish{0%{transform:scale(1)}45%{transform:scale(.9)}100%{transform:scale(1)}}
#petFeeling{min-height:42px;margin:2px 0 10px}
#satisfiedPopup{position:fixed;z-index:30;inset:0;border:0;background:#24123da8;color:#fff8d6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-family:inherit;cursor:pointer;animation:satisfiedPop .22s ease-out both}
#satisfiedPopup strong{font-size:clamp(44px,15vw,72px);line-height:1;color:#ffe16b;text-shadow:3px 4px #6b3a20}
#satisfiedPopup span{font-size:24px;font-weight:900}
@keyframes satisfiedPop{from{opacity:0}0%,65%{transform:scale(.3)}80%{transform:scale(1.08)}100%{transform:scale(1)}}

/* なかま画面の録音再生ボタン */
.tile-audio{display:block!important;width:100%;min-height:48px;margin:10px 0 0;background:#8b5a2b!important;color:#fff8d6!important;border-color:#4c2a18!important;pointer-events:auto!important;position:relative;z-index:4}
.tile-audio:disabled{background:#9a9a9a!important;border-color:#777!important;color:#eee!important;cursor:not-allowed}
.tile-extra-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.tile-extra-actions .tile-audio,.tile-extra-actions .tile-collection{width:100%;min-height:48px;margin:0;background:#8b5a2b;color:#fff8d6;border-color:#4c2a18}.tile-extra-actions .tile-collection:disabled{background:#9a9a9a;color:#eee;border-color:#777;cursor:not-allowed}
#app>.actions>.btn,.tile-actions .btn,#admin,.close{position:relative;z-index:5;pointer-events:auto!important}
#app .close{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;z-index:20!important}

/* そだてる画面：3つの独立したエリア */
#app.pet-screen{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.pet-panel{position:relative;margin:0 0 12px;padding:16px;border:3px solid #f4cf67;border-radius:20px;background:#fffaf0;box-shadow:0 7px 18px #3d1d1355}
.pet-title-panel{padding:0 0 12px;overflow:visible;background:transparent;border:0;box-shadow:none}
.slot-title-image{display:block;width:100%;height:auto;max-height:180px;object-fit:contain}
.pet-title-panel .close{top:8px!important;right:8px!important}
.pet-header{min-height:66px;display:flex;align-items:center;justify-content:center}
.pet-header h1{margin:0;font-size:25px;color:#5a321c}
.pet-header .close{top:12px!important;right:12px!important}
.pet-monster-panel{text-align:center;padding:8px 16px 14px}
#petMonster{position:relative;display:grid;place-items:center;touch-action:manipulation;user-select:none;cursor:pointer;margin:0 auto -4px;max-width:240px}
#petMonster img{display:block;width:min(100%,220px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 5px #24123d55);pointer-events:none;transform-origin:center}
#petMonster.pet-squish{animation:none}
#petMonster.pet-squish img{animation:petSquish .32s ease-out both}
.slot-growth-popup{position:absolute;z-index:8;inset:42% -8% auto;font-size:clamp(28px,9vw,48px);font-weight:1000;line-height:1.05;color:#fff8d6;text-shadow:3px 3px 0 #6b3a20,-2px -2px 0 #6b3a20;pointer-events:none;animation:slotGrowthPop 2.2s ease-out both}
@keyframes slotGrowthPop{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.14)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-30px) scale(1.04)}}
.pet-name{margin:-2px 0 2px;color:#5a321c;font-size:32px;line-height:1.2}
.pet-monster-panel .stats{margin-top:2px}
#petFeeling{min-height:32px;margin:8px 0 0;font-weight:800;color:#6b3a20}
.pet-result-panel{min-height:88px;display:grid;place-items:center;text-align:center}
.pet-result-panel:empty::before{content:'つんつんすると、ときどき まんぞくするよ';color:#8b5a2b;font-weight:800}
#satisfiedPopup{position:static;z-index:auto;inset:auto;width:100%;border:0;border-radius:12px;background:transparent;color:#6b3a20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:inherit;cursor:pointer;animation:satisfiedPop .22s ease-out both}
#satisfiedPopup strong{font-size:clamp(34px,11vw,54px);line-height:1;color:#8b3f15;text-shadow:2px 2px #ffe16b}
#satisfiedPopup span{font-size:20px;font-weight:900}

/* そだてる画面：ステータス文字列の3リールスロット */
.pet-slot-panel{padding:14px 12px 12px}
.slot-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.slot-reel{position:relative;min-height:58px;overflow:hidden;border:3px solid #6b3a20;border-radius:11px;background:#fff;color:#5a321c;font:900 15px/1.15 system-ui,"Noto Sans JP",sans-serif;cursor:pointer;box-shadow:inset 0 0 0 3px #ffe16b}
.slot-reel::before,.slot-reel::after{content:'';position:absolute;z-index:2;left:0;right:0;height:10px;pointer-events:none}
.slot-reel::before{top:0;background:linear-gradient(#fff,#fff0)}.slot-reel::after{bottom:0;background:linear-gradient(#fff0,#fff)}
.slot-reel span{display:grid;place-items:center;min-height:58px;padding:4px;transform:translateY(0)}
.slot-reel.is-spinning span{animation:slotTextRoll .11s linear infinite}
@keyframes slotTextRoll{from{transform:translateY(-16px);opacity:.25}to{transform:translateY(16px);opacity:1}}
.slot-start{display:block!important;width:100%;min-height:48px;margin:0!important;background:#8b5a2b!important;color:#fff8d6!important;border-color:#4c2a18!important}
.slot-start:disabled{background:#999!important;color:#ddd!important;border-color:#666!important;cursor:not-allowed}

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

/* トップ画面のモンスター情報を上に詰めて表示 */
#mainMonsterToggle .monster-img{width:min(80%,256px);height:auto;margin:0 auto;transform:scale(.9)}
#mainMonsterToggle .name{margin:-6px 0 0;line-height:1.1}
#mainMonsterToggle .monster-feeling{margin:-2px 0 8px;padding:6px}