*{box-sizing:border-box}
:root{--gold:#d4b46e;--dark:#10171c;--panel:#19252b;--red:#8e1718;--red2:#c20f0f;--green:#0b5d2b;--green2:#07952d;--paper:#ead39c}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;background:#111820;color:#f7ead0}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{min-height:100vh}
.home{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#111820 url("home.png") center/cover no-repeat}
.home-hit{position:absolute;border:0;background:transparent;border-radius:16px}
.home-hit:hover{outline:3px solid rgba(255,235,160,.7);box-shadow:0 0 24px rgba(255,218,100,.45)}
.home-wrap{position:relative;width:min(100vw,1408px);aspect-ratio:1408/1008}
.home-hit.monsters{left:31.9%;top:34.8%;width:39%;height:9.4%}
.home-hit.party{left:31.9%;top:44.0%;width:39%;height:9.4%}
.home-hit.map{left:31.9%;top:53.2%;width:39%;height:9.9%}
.home-hit.bestiary{left:31.9%;top:73.0%;width:39%;height:9.8%}
.home-hit.editor{left:31.9%;top:82.2%;width:39%;height:10.2%}
@media(max-aspect-ratio:1/1){.home{background-size:cover}.home-wrap{width:100vw}}
.page{min-height:100vh;background:radial-gradient(circle at top,#273b45,#0e151a 65%);padding:18px}
.topbar{display:flex;gap:10px;align-items:center;max-width:1320px;margin:0 auto 14px}
.topbar h1{margin:0;font-size:26px;flex:1}
.btn{border:2px solid #80643c;border-radius:8px;padding:9px 14px;background:#26333a;color:#ffeac2;box-shadow:0 2px 8px #0008}
.btn:hover{filter:brightness(1.15)}
.btn.red{background:linear-gradient(#d61b1b,#8c1010)}
.btn.green{background:linear-gradient(#11a73d,#075d24)}
.btn.gold{background:linear-gradient(#e2c27a,#9c7734);color:#241707}
.panel{max-width:1320px;margin:auto;background:#162229;border:2px solid #80643c;border-radius:12px;box-shadow:0 12px 40px #0008;padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:850px){.grid2,.grid3{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-weight:bold;color:#ead39c}
.field input,.field select,.field textarea{background:#0e161b;color:#fff1d0;border:1px solid #80643c;border-radius:6px;padding:9px}
.table-wrap{overflow:auto;border:1px solid #80643c;border-radius:8px}
table{border-collapse:collapse;width:100%;min-width:700px;background:#111a20}
th,td{padding:9px;border-bottom:1px solid #3d4b50;text-align:left}
th{background:#2a353a;color:#f5dda4}
tr:hover td{background:#1d2a30}
.card{background:linear-gradient(145deg,#1c2b31,#111a20);border:1px solid #80643c;border-radius:9px;padding:14px}
.card h3{margin-top:0;color:#f0d28d}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.muted{color:#bcae92}
.output{white-space:pre-wrap;background:#0c1216;border:1px solid #5f5037;border-radius:8px;padding:15px;line-height:1.55;min-height:260px}
.list{max-height:480px;overflow:auto}
.list button{display:block;width:100%;text-align:left;background:#172228;color:#f6e4bf;border:0;border-bottom:1px solid #39474c;padding:10px}
.list button:hover,.list button.active{background:#3b2c19}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:800px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:#0d151a;border:1px solid #5d4a2f;border-radius:6px;padding:8px}
.stat b{display:block;color:#dcb86b}
.mapbox{background:#080d10;border:2px solid #80643c;border-radius:8px;padding:8px;overflow:auto}
.map{display:grid;gap:1px;width:max-content;margin:auto}
.cell{width:12px;height:12px;background:#30383d}
.cell.floor{background:#c6aa73}.cell.door{background:#a65335}.cell.stairs{background:#67b7d1}
@media(max-width:700px){.cell{width:9px;height:9px}}
.notice{padding:10px;border-radius:7px;background:#302715;border:1px solid #8c6b35;color:#f5dfaa}
h2{color:#f0d28d}
small{color:#bcae92}