/* Approved black/gold battle design. Presentation only; saves and quiz rules stay in the game. */
:root{--sumi:#14130f;--sumi2:#211e17;--kin:#e3c078;--washi:#f6eddb;--ink:#30291e}
body{background:radial-gradient(ellipse at 50% 0,#34291b,#14130f 60%) fixed}
#battle{background:#14130f;color:#f6eddb;padding:calc(16px + env(safe-area-inset-top)) max(14px,calc((100% - 640px)/2)) calc(32px + env(safe-area-inset-bottom));isolation:isolate}
#battle .b-top{grid-template-columns:minmax(0,1fr) auto auto;gap:7px 14px;max-width:640px;padding-bottom:12px;margin:0 auto 14px;border-bottom:1px solid #ae874947;color:#cbbd9e;font-size:.8rem}
#battle #bChap{grid-column:1/-1;color:#e6c88c;white-space:normal;font-size:.88rem;letter-spacing:.04em}
#battle #bRound{grid-column:1/-1;white-space:normal!important;color:#c6b79b!important;line-height:1.5}
#battle #bProg{justify-self:end;color:#f5dfa9}
#battle .enemy-wrap{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;justify-items:center;max-width:640px;margin:0 auto;background:radial-gradient(ellipse at 50% 62%,#bb87313b,transparent 62%),linear-gradient(#14130f,#29231a 78%,#14130f);overflow:hidden;padding:0 12px 8px}
#battle .enemy-wrap:before{content:'';position:absolute;width:246px;height:246px;border:1px solid #e0b96e33;border-radius:50%;box-shadow:0 0 0 8px #ddb46308,0 0 0 9px #ddb46315;left:50%;top:88px;transform:translateX(-50%);z-index:-1;pointer-events:none}
#battle .enemy-name{grid-row:1;justify-self:start;max-width:100%;padding:0 0 9px;color:#fff0ba;font-size:clamp(1.2rem,4.8vw,1.55rem);font-family:var(--display);line-height:1.5;letter-spacing:.09em;text-align:left}
#battle .enemy-hp{grid-row:2;width:100%;max-width:none;height:5px;margin:0 0 9px;background:#63553866;border:0;border-radius:0}
#battle .enemy-hp>i{background:linear-gradient(90deg,#a97b33,#dfb95d 55%,#ffebad)}
#battle .enemy-svg{grid-row:3;position:relative;width:min(100%,370px);height:312px;max-width:100%;margin:0;transform-origin:50% 90%;box-shadow:none}
#battle .enemy-character-art{filter:drop-shadow(0 8px 12px #0009)!important;object-fit:contain}
#battle #evoIndicator{grid-row:4;min-height:8px;margin-top:0!important}
#battle .hearts{max-width:640px;text-align:left;padding:0 12px;margin:4px auto;font-size:1.1rem;letter-spacing:.13em}
#battle .heart{color:#e79280;text-shadow:none}
#battle .heart.lost{color:transparent;-webkit-text-stroke-color:#d88e7180}
#battle #itemBar{max-width:640px;margin:0 auto;flex-wrap:wrap;min-height:0}
#battle #itemBar:empty{display:none}
#battle .combo{color:#e4c184;font-size:.85rem;min-height:0;height:auto;line-height:1.5;margin:4px auto 8px}
#battle .combo:empty{display:none}
#battle .qprompt{max-width:640px;margin:12px auto 8px;padding:18px 18px 20px;background:radial-gradient(ellipse at 100% 0,#d5ae5640,transparent 70%),#f2e8cf;color:#29241c;border-top:3px solid #e6c26f;border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));font-family:var(--body);font-size:1.08rem;font-weight:600;line-height:1.75;text-align:left;letter-spacing:0;box-shadow:none}
#battle .qcard{max-width:640px;margin:12px auto 8px;background:#f2e8cf;border-top:3px solid #e6c26f;border-radius:3px;padding:10px;box-shadow:none}
#battle .qcard img{max-height:320px;object-fit:contain}
#battle #qnum{max-width:640px;margin:4px auto!important;color:#d9bd80!important;opacity:1!important;font-size:.75rem!important}
#battle .qhint{max-width:640px;color:#c4b79e;font-family:var(--body);font-size:.8rem;margin:9px auto 5px}
#battle .qdiff{font-size:.85rem;color:#d9bd80;margin:4px auto 9px}
#battle .choices2{max-width:640px;margin:0 auto;gap:9px}
#battle .choice{align-items:center;min-height:56px;padding:13px 15px;background:linear-gradient(110deg,#29251b,#1b1914);color:#f1e8d8;border:1px solid #bda16b55;border-left:2px solid #e3c078;border-radius:2px 10px 2px 10px;font-family:var(--body);font-size:1rem;line-height:1.6;gap:12px;box-shadow:inset 0 1px #fff1c006;overflow-wrap:anywhere}
#battle .choice .lab{color:#e3c078;font-family:var(--display);font-size:1.1rem;font-weight:500;align-self:stretch;display:flex;align-items:center;padding-right:12px;border-right:1px solid #bda16b55}
#battle .choice:hover:not(:disabled){border-color:#e3c078;background:#342d1e}
#battle .choice.correct{background:#253b32;border-color:#80b196}
#battle .choice.wrong{background:#492c30;border-color:#e39180}
#battle .choice.img{background:#eee4cf;color:#30291e;min-width:0}
#battle .choice.img .lab{align-self:center;border:0;padding:0;color:#79551c}
#battle .choice.img img{max-width:100%;object-fit:contain}
#battle .choice.img.correct{background:#d4e6d6;color:#20462d}
#battle .choice.img.wrong{background:#efd6cb;color:#643224}
#battle #memorizeCard{background:#252118;border-color:#c8a76a;color:#f1e8d8;box-shadow:0 8px 35px #0009}
#battle #memorizeCard .mc-label,#battle #memorizeCard .mc-sub{color:#ded1b7}
#battle #heroStandBattle{display:none!important}
/* Keep impacts at the enemy, leaving the question and answer targets still. */
#battle.shake{animation:none!important;transform:none!important}
body:has(#battle.active) #slash{display:none!important}
#battle .enemy-wrap:after{content:'';position:absolute;pointer-events:none;left:8%;right:8%;top:54%;height:5px;opacity:0;background:#fff4d0;box-shadow:0 0 8px #fff0bd,0 0 24px #e3b65e;transform:rotate(-28deg) scaleX(0);z-index:3}
#battle .enemy-wrap:has(.enemy-hit-anim):after{animation:goldSlash .4s ease-out}
#battle .enemy-wrap:has(.enemy-charge){box-shadow:inset 0 0 55px #db653225}
#battle #enemySvg.enemy-hit-anim{animation:goldHit .4s ease-out!important}
#battle #enemySvg.enemy-charge{animation:goldCharge .55s ease-out!important}
@keyframes oniFloat{0%,100%{transform:translateY(0) rotate(-.5deg) scale(1)}50%{transform:translateY(-5px) rotate(.5deg) scale(1.015)}}
@keyframes goldHit{0%{transform:none}22%{filter:brightness(2);transform:translateX(12px) rotate(5deg) scale(.97)}55%{transform:translateX(-6px) rotate(-2deg)}100%{transform:none;filter:none}}
@keyframes goldCharge{0%{transform:none}28%{transform:translate(7px,-4px) rotate(6deg) scale(.94)}48%{transform:translate(-10px,8px) rotate(-6deg) scale(1.1)}70%{transform:translateX(4px) rotate(2deg) scale(1.04)}100%{transform:none}}
@keyframes goldSlash{0%{opacity:0;transform:rotate(-28deg) scaleX(0)}25%,60%{opacity:1;transform:rotate(-28deg) scaleX(1)}100%{opacity:0;transform:rotate(-28deg) scaleX(1.15)}}
/* Carry the accepted palette into the existing result and knowledge-card flow. */
#result{background:#14130f}
#result .result-card{background:radial-gradient(ellipse at 50% 0,#9c70202e,transparent 65%),#211e17;border-color:#aa874d;color:#f6eddb}
#result .btn:not(.ghost),#battle .btn{background:linear-gradient(110deg,#c2994d,#f0d893 47%,#c7a255);color:#302312;border:1px solid #f4d99a;text-shadow:none;box-shadow:0 3px 12px #0003}
#result .btn.ghost{background:#29251b;border:1px solid #ad854b;color:#f1e8d8}
.card-reward-overlay{background:#14130f!important}
@media(max-width:360px){#battle{padding-left:12px;padding-right:12px}#battle .enemy-wrap{padding-inline:4px}#battle .enemy-svg{height:300px}#battle .choice{padding:11px 12px;gap:9px}#battle .choice .lab{padding-right:9px}#battle .qprompt{padding:15px;font-size:1rem}}
@media(prefers-reduced-motion:reduce){#battle *,#battle *:before,#battle *:after{animation:none!important;transition:none!important}body:has(#battle.active) .tech,body:has(#battle.active) #flash{display:none!important}}