@import url("/css/common.css");
#app{max-width:1400px;margin:0 auto;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:100vh}
#top{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 12px;display:flex;flex-direction:column;min-width:120px}
.chip small{color:var(--mute);font-size:11px}.chip b{font-size:18px}.chip .sub{color:#7fd1c3}
.adminlink{margin-left:auto;align-self:center;font-size:12px}
main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
#stage{position:relative;min-height:440px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.72)}
#stage.hit::after{content:"";position:absolute;inset:0;background:#fff;animation:flash .35s ease-out forwards;pointer-events:none}
@keyframes flash{from{opacity:.85}to{opacity:0}}
#foe{position:absolute;left:4%;bottom:0;width:46%;height:92%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
#foe img{max-height:72%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 14px #000c)}
#foe .sil{width:150px;height:220px;border-radius:70px 70px 10px 10px;background:#000c;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff6;margin-bottom:10px}
.foename{background:#000a;padding:4px 10px;border-radius:6px;font-weight:700;margin:6px 0}
.taunt{background:#fff;color:#1b1f24;padding:6px 10px;border-radius:12px;max-width:95%;font-size:13px;margin-bottom:12px}
#hud{position:absolute;right:14px;top:14px;width:42%;background:#0b1020cc;border:1px solid var(--line);border-radius:10px;padding:10px}
.bar{height:10px;background:#2a3352;border-radius:6px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}
.why{font-weight:700}
#slap{position:absolute;right:18px;bottom:52px;width:min(36%,210px);aspect-ratio:1;padding:0;border:none;background:none}
#slap img{width:100%;height:100%;object-fit:contain;transition:transform .08s}#slap:active img{transform:scale(.94)}
#slap:disabled{opacity:1}
#autos{position:absolute;right:16px;bottom:12px;display:flex;gap:12px;background:#000a;padding:4px 10px;border-radius:8px;font-size:12px}
#side{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:440px;max-height:72vh}
#tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--line)}#tabs .on{background:var(--navy);border-color:#8fb8de}
#panel{overflow:auto;padding:10px;flex:1}
.emp{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center;border:1px solid var(--line);border-left:4px solid var(--rc);border-radius:10px;padding:6px;margin-bottom:6px}
.emp img,.emp .ph{width:56px;height:56px;border-radius:8px;object-fit:cover;object-position:top;background:#0c1120;display:flex;align-items:center;justify-content:center}
.emp .acts{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap}.emp .acts span{display:flex;gap:4px}
.banner{background-size:cover;background-position:center;border-radius:10px;padding:16px;display:flex;flex-direction:column;margin-bottom:8px;text-shadow:0 1px 3px #000}
.wf{display:block;margin:3px 0}
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:8px 0}.pool div{border:1px solid var(--rc);border-radius:8px;padding:6px;display:flex;flex-direction:column}
table.map{width:100%;border-collapse:collapse}table.map td,table.map th{border-bottom:1px solid var(--line);padding:4px;text-align:left}table.map tr.done{opacity:.5}table.map tr.cur{background:#26304f}
.art{padding:4px 0}.art.got{color:var(--gold)}
.hold.holding{background:var(--red);transition:background 2s}
#logwrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
#logwrap h3{margin:4px 0 8px;font-size:13px;color:var(--mute)}
#log{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.line{display:flex;gap:6px;align-items:center}.line .av{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:top;flex:none;background:#26304f;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.line.sys b{color:#8fb8de}.line.tip b{color:var(--gold)}.line.villain b{color:var(--red)}.line.story{color:#c9b8ff}.line.story b{color:var(--purple)}
.modal .big{font-size:26px;font-weight:700;color:var(--gold)}
.fatal{padding:40px;text-align:center}
@media (max-width:900px){main{grid-template-columns:1fr}#stage{min-height:380px}#hud{width:56%}#side{max-height:none}.chip{min-width:46%}}
.line b{flex:none}
@media (max-width:900px){#side{min-height:0}#panel{max-height:none}}