:root{--gold:#d9a93f;--gl:#f6d98a;--fg:#f3e6c8}
#game *,#aud *{box-sizing:border-box}
#game{margin:0;color:var(--fg);font:16px/1.45 'Cinzel',Georgia,serif;background:radial-gradient(ellipse at 50% 0,#3a2614,#0b0705 75%)}
#app{max-width:1100px;margin:0 auto;padding:12px}
#game h1,#game h2,#game button,#aud button,.lbl b,.unit b,.fl{font-family:'MedievalSharp','Cinzel',serif}
#game h1{font:700 clamp(30px,6vw,60px) 'Cinzel Decorative','MedievalSharp',serif;text-align:center;letter-spacing:.12em;margin:10px 0;background:linear-gradient(#fff3c4,#d9a93f 60%,#8a5a14);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px #000)}
#game h2{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;color:var(--gl);text-shadow:0 2px 4px #000}
.gold{color:#ffd36e}
.row,.grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:10px 0}
.modal,.menu,.log{background:linear-gradient(#2e2012,#160e07);border:2px solid var(--gold);border-radius:8px;box-shadow:inset 0 0 0 3px #0008,inset 0 0 30px #000,0 8px 30px #000c}
.menu{padding:10px;text-align:center;margin-top:10px}
.log{padding:10px 14px;min-height:112px;margin-top:10px;font-size:14px}
#game button,#aud button{font:inherit;font-family:'MedievalSharp',serif;color:#2a1608;background:linear-gradient(#f6d98a,#c4912c 55%,#9a6a1c);border:1px solid #4a2e0c;border-radius:5px;padding:7px 14px;margin:3px;cursor:pointer;box-shadow:0 2px 0 #4a2e0c,inset 0 1px 0 #fff8;text-shadow:0 1px 0 #fff6;transition:.12s}
#game button:hover:not(:disabled),#aud button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
#game button:disabled,#aud button:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed}
.bar{display:block;width:90%;height:8px;background:#000;border:1px solid #6b4a1c;border-radius:5px;overflow:hidden}
.bar b{display:block;height:100%;background-image:linear-gradient(#fff5,#0005);transition:width .4s}
.fig{filter:drop-shadow(0 6px 5px #000a);transition:.2s;object-fit:contain}
.emo{font-size:60px;filter:drop-shadow(0 4px 4px #000)}
.card{width:150px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s;font-size:13px}
.card .fig{height:130px;width:auto;max-width:100%}
.card b{text-shadow:0 2px 4px #000}.card small{opacity:.85;font-size:11px}
.card:hover .fig{transform:translateY(-4px)}
.card.on .fig{filter:drop-shadow(0 0 12px gold) drop-shadow(0 0 4px #fff)}.card.on b{color:var(--gl)}
.card.dead{opacity:.4;filter:grayscale(1)}
.party .card{width:100px;cursor:default}.party .card .fig,.modal .card .fig{height:72px}
.town{position:relative;border:3px solid var(--gold);border-radius:8px;overflow:hidden;box-shadow:0 8px 30px #000c;line-height:0}
.town>img{width:100%;display:block}
.hud{position:absolute;top:0;left:0;right:0;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:8px 14px;background:linear-gradient(#000d,#0000);line-height:1.4}
.hud b{font-size:clamp(16px,2.6vw,28px);color:var(--gl);font-family:'MedievalSharp',serif}
.tmsg{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#000c;border:1px solid var(--gold);padding:6px 14px;border-radius:20px;line-height:1.4;font-size:14px;white-space:nowrap}
.tmsg:empty{display:none}
.hs{position:absolute;width:11%;aspect-ratio:1;transform:translate(-50%,-50%);cursor:pointer;border-radius:50%;line-height:1.2}
.hs::before{content:'';position:absolute;inset:18%;border-radius:50%;border:2px solid #ffe08a;box-shadow:0 0 14px #ffd36e,inset 0 0 14px #ffd36e88;animation:pulse 1.8s infinite}
.hs:hover::before{background:#ffd36e44;animation:none;box-shadow:0 0 26px #fff0a8,inset 0 0 20px #ffd36e}
.lbl{position:absolute;left:50%;bottom:78%;transform:translateX(-50%);white-space:nowrap;text-align:center;background:linear-gradient(#3a2812,#1a1008);border:2px solid var(--gold);border-radius:6px;padding:2px 8px;box-shadow:0 3px 8px #000;font-size:clamp(8px,1.25vw,14px);transition:.15s}
.lbl b{display:block;color:var(--gl)}.lbl small{opacity:.8;font-size:.85em}
.hs:hover .lbl{border-color:#fff0a8;transform:translateX(-50%) scale(1.08)}
.ov{position:fixed;inset:var(--nb,0px) 0 0 0;background:#000b;display:grid;place-items:center;z-index:9;padding:12px}
.modal{position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;padding:18px}
.modal h2{padding-right:40px}.x{position:absolute;top:8px;right:8px;padding:2px 9px;margin:0}
.line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#0006;border:1px solid #6b4a1c;border-radius:6px;padding:8px 10px;margin:6px 0;font-size:14px}
.line b{min-width:140px;color:var(--gl)}
.stage{display:flex;justify-content:space-between;align-items:flex-end;aspect-ratio:16/8;min-height:280px;padding:3% 3% 1%;border:3px solid var(--gold);border-radius:8px;background:#201510 center/cover;box-shadow:0 8px 30px #000c;overflow:hidden}
.side{display:flex;align-items:flex-end;justify-content:center;gap:1%;width:46%;height:100%}
.side .unit:nth-child(2){margin-bottom:7%}
.unit{position:relative;flex:1;max-width:34%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.unit.big{max-width:70%;flex:2}
.unit .fig{width:100%;max-height:38vh}
.unit b{font-size:clamp(11px,1.6vw,16px);text-shadow:0 2px 4px #000,0 0 6px #000;color:#fff}
.unit small{font-size:11px;text-shadow:0 1px 3px #000;color:#fff}
.unit.act b{color:#ffe08a;text-shadow:0 0 10px #ffd36e}.unit.act .fig{filter:drop-shadow(0 0 10px #ffd36e)}
.unit.tgt{cursor:crosshair}.unit.tgt .fig{filter:drop-shadow(0 0 12px #ff3b3b) drop-shadow(0 0 3px #fff);animation:bob .8s infinite alternate}
.unit.hit .fig{animation:shake .4s}
.unit.dead{opacity:.45;filter:grayscale(1)}.unit.dead .fig{transform:rotate(75deg) scale(.8)}
.fl{position:absolute;top:10%;left:50%;font-size:clamp(20px,3.4vw,34px);text-shadow:0 2px 0 #000,0 0 8px #000;animation:fl calc(1.4s / var(--spd,1)) ease-out forwards;pointer-events:none;z-index:3}
.fl.dmg{color:#ff5a5a}.fl.heal{color:#6bff95}
@keyframes pulse{50%{transform:scale(1.12);opacity:.6}}
@keyframes bob{to{transform:translateY(-8px)}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes fl{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-80px)}}
@media(max-width:640px){.stage{aspect-ratio:auto;height:52vh;min-height:300px}.unit .fig{max-height:30vh}.card{width:96px}.card .fig{height:90px}.tmsg{white-space:normal;width:90%}}
/* ===== full-screen layout ===== */
body{overflow:hidden}
#app{max-width:none;height:100%;padding:8px 10px;display:flex;flex-direction:column;overflow:auto}
.town{width:min(100%,calc((100dvh - 150px)*1.5));margin:0 auto;flex:none}
.party{flex:none;margin:6px 0 0;gap:10px}.party .card{width:84px}.party .card .fig{height:56px}
.grid .card .fig{height:min(130px,15dvh)}
.stage{flex:1;aspect-ratio:auto;min-height:0}
.unit .fig{max-height:max(110px,calc(var(--gh,100dvh) - 340px))}
.bottom{display:flex;gap:10px;margin-top:8px;flex:none}.bottom .log,.bottom .menu{margin:0}.log{flex:1;height:120px;min-height:0;overflow:auto}.menu{flex:1.4;overflow:auto;max-height:120px}
.modal{width:min(900px,100%);max-height:92dvh}
@media(max-width:700px){.bottom{flex-direction:column}.log{height:70px}.menu{max-height:none}}
/* ===== audio panel ===== */
#aud{position:fixed;bottom:8px;right:8px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#ap{padding:10px 14px;background:linear-gradient(#2e2012,#160e07);border:2px solid var(--gold);border-radius:8px;display:grid;gap:8px;font-size:13px}
#ap[hidden]{display:none}#ap label{display:flex;justify-content:space-between;gap:10px;align-items:center}
input[type=range]{accent-color:var(--gold)}
/* ===== skill effects ===== */
.unit.hit .fig{animation:shake calc(.4s / var(--spd,1)) var(--d,0s) both}
.unit.lunge{animation:lungeR calc(.6s / var(--spd,1)) var(--c,0s)}.side+.side .unit.lunge{animation-name:lungeL}
.fl{animation-fill-mode:both}
.fxo{position:absolute;left:50%;top:30%;width:90%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:4;opacity:0;animation:boom calc(.9s / var(--spd,1)) ease-out both}
.fxo.fire{border-radius:50%;background:radial-gradient(circle,#fff6b0 0,#ffb020 30%,#e5301a 55%,#0000 70%)}
.fxo.arcane{border-radius:50%;background:radial-gradient(circle,#fff,#b78cff 35%,#4c8dff 55%,#0000 70%)}
.fxo.shield{border-radius:50%;border:5px solid #ffe08a;box-shadow:0 0 22px gold,inset 0 0 22px #ffe08a88}
.fxo.ice{background:radial-gradient(circle,#fff,#9fe8ff 45%,#0000 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation-name:spin}
.fxo.dark{border-radius:50%;background:radial-gradient(circle,#000 18%,#8a20e0 42%,#0000 68%);animation-name:spin}
.fxo.nature{border-radius:50%;background:conic-gradient(#3fb950,#0000 20%,#7dff8a 40%,#0000 60%,#3fb950 80%,#0000);animation-name:spin}
.fxo.holy{width:45%;aspect-ratio:auto;height:140%;top:40%;background:linear-gradient(#0000,#fff7c2 40%,#ffe066 60%,#0000);filter:drop-shadow(0 0 14px #ffe066);animation-name:beam}
.fxo.arrow{height:6px;aspect-ratio:auto;width:130%;background:linear-gradient(90deg,#0000,#fff,#ffd36e);box-shadow:0 0 10px #fff;animation-name:fly}
.fxo.slash{height:7px;aspect-ratio:auto;width:110%;background:linear-gradient(90deg,#0000,#fff 50%,#0000);box-shadow:0 0 12px #ff5a5a;rotate:-35deg;animation-name:cut}
.fxo.poison{border-radius:50%;background:radial-gradient(circle at 30% 70%,#9cff4a 0 12%,#0000 14%),radial-gradient(circle at 65% 55%,#6bd12a 0 15%,#0000 17%),radial-gradient(circle at 50% 30%,#b6ff6a 0 10%,#0000 12%);animation-name:rise}
.fxo.heal{border-radius:50%;background:radial-gradient(circle,#d8ffe3,#3fe07a 40%,#0000 70%);animation-name:rise}
.fxo.buff{border-radius:50%;background:radial-gradient(circle,#fff0c8,#ffb347 40%,#0000 70%);animation-name:rise}
.fxo.music{animation-name:rise}.fxo.music::before{content:'♪ ♫ ♪';position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:#ffe08a;text-shadow:0 0 10px #000;white-space:nowrap}
@keyframes fl{0%{opacity:0;transform:translate(-50%,0)}10%{opacity:1}100%{opacity:0;transform:translate(-50%,-80px)}}
@keyframes lungeR{40%{transform:translateX(18%)}}@keyframes lungeL{40%{transform:translateX(-18%)}}
@keyframes boom{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@keyframes spin{0%{opacity:0;transform:scale(.3) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.2) rotate(200deg)}}
@keyframes beam{0%{opacity:0;transform:scaleY(.1)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0}}
@keyframes fly{0%{opacity:0;transform:translateX(-120%)}20%{opacity:1}100%{opacity:0;transform:translateX(30%)}}
@keyframes cut{0%{opacity:0;transform:scaleX(0)}30%{opacity:1;transform:scaleX(1)}100%{opacity:0}}
@keyframes rise{0%{opacity:0;transform:translateY(30%) scale(.6)}40%{opacity:1}100%{opacity:0;transform:translateY(-30%) scale(1.1)}}
/* ===== whole-map town, party/guild menus ===== */
#app.tw{padding:0;justify-content:center;overflow:hidden}
.town{width:min(100vw,calc(var(--gh,100dvh)*2));border:0;border-radius:0;margin:auto;flex:none}
.mini{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;line-height:1;background:#000a;padding:4px 6px;border-radius:6px}
.mini div{width:40px}.mini .fig{height:40px;width:40px}.mini .emo{font-size:28px}.mini .bar{width:100%}
.hrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#0006;border:1px solid #6b4a1c;border-radius:8px;padding:8px;margin:8px 0}
.hrow.on{border-color:var(--gold);box-shadow:0 0 12px #d9a93f66}
.hrow .card{width:96px;cursor:default}.hinfo{flex:1;min-width:220px;font-size:13px}
.sks div{margin:3px 0;font-size:12px}.sks b{color:var(--gl)}
.sub button small{display:block;font-size:10px;opacity:.85;font-family:'Cinzel',serif}
/* ===== readable skills, effects tracker ===== */
.line{font-size:15px}.sks div{font-size:14px;line-height:1.4;margin:4px 0}
.n{font-style:normal;font-weight:700;color:#ffd36e}.mp{font-style:normal;color:#8fc7ff;font-weight:700}
.sub{display:flex;flex-wrap:wrap;justify-content:center}
#game .skb{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-width:210px;max-width:300px;margin:4px;padding:8px 12px;background:linear-gradient(#3a2812,#1c1209);color:var(--fg);border:2px solid var(--gold);text-shadow:none;box-shadow:0 2px 6px #000}
.skb b{font-size:16px;color:var(--gl)}.skb i{font-style:normal;font-size:13px;color:#8fc7ff}
.skb span{font-size:14px;line-height:1.35;color:#fff}.skb span .n{font-size:15px}
#game .skb:hover:not(:disabled){background:linear-gradient(#5a3d18,#2a1a0c);filter:none}
#game .skb:disabled{opacity:.5;filter:none}
.menu{flex:2;max-height:240px}.log{flex:1}
.stage{position:relative}
.buffs{position:absolute;top:8px;left:8px;z-index:6;background:#000b;border:1px solid var(--gold);border-radius:8px;padding:6px 10px;font-size:13px;max-width:60%}
.buffs>b{display:block;color:var(--gl);margin-bottom:3px;font-family:'MedievalSharp',serif}
.buffs .e{color:#ff9a9a}.buffs .p{color:#c8ffd0}
.chip{position:relative;display:inline-block;margin:1px 3px;padding:1px 7px;border-radius:10px;background:#ffffff22;cursor:help;color:#fff}
/* ===== blacksmith ===== */
.eqimg{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 3px #000)}.eqe{font-size:34px}
.tabs{margin:6px 0}#game .tabs button.on{background:linear-gradient(#fff3c4,#ffd36e)}
.slots{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.slot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#0006;border:1px solid #6b4a1c;border-radius:6px;padding:4px 8px}.slot small{width:100%}
#game .hrow .skb{min-width:150px}
/* 2:1 town map: smaller hotspots */
.hs{width:max(7%,44px)}
/* ===== hall of heroes, bounties, label placement ===== */
.lbl.b{bottom:auto;top:78%}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0}
.sg div{background:#0006;border:1px solid #6b4a1c;border-radius:6px;padding:8px;text-align:center;font-size:13px}
.sg b{display:block;font-size:24px;color:var(--gl);font-family:'MedievalSharp',serif}
.sec{font:700 18px 'MedievalSharp','Cinzel',serif;color:var(--gl);margin:14px 0 6px;text-shadow:0 2px 4px #000}
/* ===== battle: fixed-size bottom bar, HUD inside the stage ===== */
.stage{padding-top:52px;overflow:hidden}
.bhud{position:absolute;top:8px;right:8px;z-index:6;display:flex;gap:14px;align-items:center;background:#000b;border:1px solid var(--gold);border-radius:8px;padding:5px 12px}
.bhud b{font:clamp(15px,1.8vw,20px) 'MedievalSharp',serif;color:var(--gl)}
.buffs{max-width:calc(100% - 270px);max-height:60%;overflow:auto}
.bottom{height:170px;flex:none}
.bottom .log{height:auto;min-height:0;flex:1;overflow:auto}
.bottom .menu{flex:2.4;max-height:none;height:auto;min-height:0;overflow:hidden;display:grid;grid-template-columns:236px 1fr;gap:10px;padding:8px;text-align:left}
.cmd{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start;min-height:0;overflow:auto}
.cmd .tt,.cmd .cx{grid-column:1/-1}
.cmd .tt{color:var(--gl);font-family:'MedievalSharp',serif;font-size:15px;white-space:nowrap}
#game .cmd button{margin:0;padding:5px 8px;text-align:left}
#game .cmd button.on{background:linear-gradient(#fff3c4,#ffd36e)}
#game .cmd button.cx{background:linear-gradient(#ffb0a0,#c4502c)}
kbd{float:right;font:11px 'Cinzel',serif;opacity:.65;margin-left:6px}
.panel{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;overflow:auto;min-height:0;padding-right:4px}
.panel .hint{margin:auto 0;padding:4px 8px;font-size:14px;line-height:1.45}
.panel .skb{margin:0}
.full{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.full p{margin:0;font-size:18px}
#game .skb.k-p{border-left:6px solid #ff6b6b}#game .skb.k-m{border-left:6px solid #5aa0ff}#game .skb.k-l{border-left:6px solid #b78cff}
#game .skb.k-h{border-left:6px solid #5be37f}#game .skb.k-b{border-left:6px solid #ffe08a}#game .skb.k-u{border-left:6px solid #ffa94d}#game .skb.k-o{border-left:6px solid #9cff4a}
.skb i.low{color:#ff8a8a}
.pv{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;white-space:nowrap;background:#000d;border:1px solid #ff9a9a;color:#ffd0d0;border-radius:12px;padding:1px 9px;font-size:14px;font-family:'MedievalSharp',serif}
.pv.kill{border-color:#ff3b3b;color:#fff;background:#7a0f0f}.pv.good{border-color:#6bff95;color:#c8ffd0}
@media(max-width:700px){
 .bottom{height:230px;flex-direction:column}
 .bottom .log{flex:none;height:56px}
 .bottom .menu{flex:1;grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .cmd{grid-template-columns:repeat(4,1fr)}.cmd .tt{grid-column:1/-1}
 #game .cmd button{padding:5px 4px;font-size:13px}kbd{display:none}
 .buffs{max-width:55%;font-size:12px}.unit .fig{max-height:max(90px,calc(var(--gh,100dvh) - 420px))}
}
/* ===== v2: turn order, intents, fork, bestiary ===== */
.ord{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:4px;background:#000b;border:1px solid var(--gold);border-radius:8px;padding:3px 8px;max-width:42%;overflow:hidden}
.ord small{color:var(--gl);font-size:10px;margin-right:4px;white-space:nowrap}
.oi{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:6px;border:2px solid #4aa86a;background:#0008;overflow:hidden}
.oi.e{border-color:#c44}.oi.now{border-color:#ffd36e;box-shadow:0 0 10px 2px #ffd36e;transform:scale(1.15)}
.oi .fig{height:30px;width:auto;max-width:100%;max-height:none}.oi .emo{font-size:20px}
.buffs{max-width:28%}
.in{font-size:12px;color:#ffe08a;background:#000c;border:1px solid #a77;border-radius:10px;padding:0 8px;white-space:nowrap}
.in.hot{border-color:#ff3b3b;color:#ffb0b0;animation:bob .8s infinite alternate}
.fl.miss{color:#ddd}
.stage.fork{flex-direction:column;justify-content:center;align-items:center;padding-top:3%;overflow:auto}
.forkbox{background:linear-gradient(#2e2012ee,#160e07ee);border:2px solid var(--gold);border-radius:8px;padding:16px 20px;max-width:780px;width:100%;text-align:center;box-shadow:0 8px 30px #000c}
.forkbox h2{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px}
.fk{width:220px;display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px}
.fk span{font:14px/1.35 sans-serif;color:#fff}
.bz{width:190px;cursor:default}.bz small{font-size:12px;line-height:1.45}.bz.unk{opacity:.55}.bz.unk .emo{font-size:60px}
@media(max-width:700px){.ord{max-width:60%;top:44px}.oi{width:28px;height:28px}.oi .fig{height:24px}.buffs{max-width:55%}.stage{padding-top:84px}}
/* ===== tooltip (fixed, never clipped) ===== */
#tip{position:fixed;z-index:60;display:none;max-width:280px;white-space:pre-line;pointer-events:none;background:#140c06;border:1px solid var(--gold);color:#fff;padding:6px 10px;border-radius:6px;font:13px/1.4 'Cinzel',Georgia,serif;box-shadow:0 4px 14px #000c}
.chip,.unit[data-tip]{cursor:help}.unit.tgt[data-tip]{cursor:crosshair}
/* ===== battle speed button ===== */
#game .bhud button.spd{margin:0;padding:2px 10px;font-size:14px}
/* ===== fork rooms ===== */
.stage.fork{justify-content:flex-start}.forkbox{margin:auto}
.rimg{display:block;max-height:130px;max-width:100%;margin:4px auto 8px;object-fit:contain;filter:drop-shadow(0 4px 6px #000)}
.fkimg{height:90px;max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #000)}
.forkbox .line{text-align:left}.forkbox .line span{font:14px/1.35 sans-serif;color:#fff}