:root{--ink:#1c1712;--paper:#e9dcc0;--paper2:#d9c7a0;--gold:#b8872b;--red:#9b2d20;--jade:#2f7d6a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0f0c09;color:var(--ink);font-family:"Noto Serif","Noto Serif CJK SC",Georgia,serif}
#app{display:flex;height:100%;max-width:1200px;margin:0 auto}
#scene{position:relative;flex:0 0 340px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:16px;border-right:3px solid var(--gold);background:#222}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .8s;z-index:0}
#bg::after{content:"";position:absolute;inset:0;background:linear-gradient(#0008,#0000 35%,#000b)}
.realm0 #bg{background-image:url(img/bg0.jpg),linear-gradient(#5b8a5e,#1e3a2a)}
.realm1 #bg{background-image:url(img/bg1.jpg),linear-gradient(#3f7d86,#142f3a)}
.realm2 #bg{background-image:url(img/bg2.jpg),linear-gradient(#b9722a,#3a1c0c)}
.realm3 #bg{background-image:url(img/bg3.jpg),linear-gradient(#6d4a9b,#201236)}
.realm4 #bg{background-image:url(img/bg4.jpg),linear-gradient(#8f2d3a,#2d0a12)}
.realm5 #bg{background-image:url(img/bg5.jpg),linear-gradient(#2e5c9b,#0c1a36)}
.realm6 #bg{background-image:url(img/bg6.jpg),linear-gradient(#a8a02e,#2e2a0a)}
.realm7 #bg{background-image:url(img/bg7.jpg),linear-gradient(#e0c060,#3a2a10)}
#scene>*:not(#bg){position:relative;z-index:1}
#name{font-size:22px;font-weight:700;text-shadow:0 2px 6px #000}
#label{font-size:16px;color:#f3d98b;text-shadow:0 2px 6px #000}
#monster{align-self:center;text-align:center;animation:pop .35s}
#monster img{width:220px;height:220px;object-fit:cover;border-radius:50%;border:3px solid var(--gold);background:#0006;box-shadow:0 0 30px #000a}
#monster.lose img{border-color:var(--red);filter:grayscale(.3)}
#mname{margin-top:6px;font-weight:700;text-shadow:0 2px 6px #000}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#flash{position:absolute!important;inset:0;pointer-events:none;opacity:0;z-index:5;background:radial-gradient(circle,#fff 0%,#ffe08a 40%,#0000 75%)}
#flash.go{animation:flash 1.4s ease-out}
#flash.bad{background:radial-gradient(circle,#ff5a4a 0%,#0000 70%)}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.bar{position:relative;height:20px;background:#0009;border:1px solid var(--gold);border-radius:10px;overflow:hidden;margin-top:6px}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#2f9c84,#6fe0c3);transition:width .4s linear}
.bar.hurt i{background:linear-gradient(90deg,#9b2d20,#e0604e)}
.bar span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:20px;text-shadow:0 1px 2px #000}
main{flex:1;display:flex;flex-direction:column;background:var(--paper);background-image:radial-gradient(#0000 60%,#6b4a1a22);min-width:0;padding:10px;gap:8px}
#log{flex:1;overflow-y:auto;padding:10px 14px;background:#f4ead2;border:1px solid var(--paper2);border-radius:6px;font-size:16px;line-height:1.5;color:#2a2118}
#log div{margin-bottom:6px;word-break:break-word}
#actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
button{font:inherit;cursor:pointer;border:1px solid var(--gold);background:linear-gradient(#f6e7bd,#e3cb8b);color:var(--ink);border-radius:6px;padding:10px 6px;font-weight:700}
button:hover{background:linear-gradient(#fff3cf,#edd593)}button:active{transform:translateY(1px)}
button.main{background:linear-gradient(#c9483a,var(--red));color:#fff;border-color:#6d1a10}
form{display:flex;gap:8px}input{flex:1;font:inherit;padding:9px 10px;border:1px solid var(--gold);border-radius:6px;background:#fffaf0;min-width:0}
form button{flex:0 0 72px}
.color-009,.color-001,.color-196{color:#a1281c}.color-010,.color-002{color:#1f7a3a}.color-011,.color-003{color:#9a6b00}.color-012,.color-004{color:#1d4f9a}
.color-013,.color-005{color:#8a2d8a}.color-014,.color-006{color:#127a86}.color-015,.color-007{color:#000;font-weight:700}.color-008,.color-000{color:#6b6255}
@media(max-width:760px){#app{flex-direction:column}#scene{flex:0 0 38%;border-right:0;border-bottom:3px solid var(--gold);padding:10px}#monster img{width:110px;height:110px}#name{font-size:17px}}