:root { --bg:#1b1e24; --panel:#262a33; --line:#3a404c; --text:#d8dce3; --muted:#8b93a1; --gold:#e3b341; --accent:#5f9ea0; --bad:#c45a5a; --good:#6aa86a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
header h1 { margin:0; font-size:20px; letter-spacing:1px; }
.tag { color:var(--muted); font-size:12px; border:1px solid var(--line); padding:1px 6px; }
#who { margin-left:auto; color:var(--gold); }
h2 { margin:0 0 8px; font-size:15px; color:#b7c0cc; } h2 small { color:var(--muted); font-weight:normal; }
.panel { background:var(--panel); border:1px solid var(--line); padding:12px; margin:12px; }
#auth { max-width:380px; margin:60px auto; }
label { display:block; margin:8px 0; } input { width:100%; padding:6px; background:#1b1e24; color:var(--text); border:1px solid var(--line); }
button { background:#3b4250; color:var(--text); border:1px solid #556; padding:5px 10px; cursor:pointer; font:inherit; }
button:hover:not(:disabled) { background:#4a5364; } button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:#3f6b5e; border-color:#5f9e8a; }
.row { display:flex; gap:8px; } .hint { color:var(--muted); font-size:12px; }
.hidden { display:none !important; }
main { display:grid; grid-template-columns: 680px 1fr; grid-template-areas: "map side" "inv inv"; }
.mapwrap { grid-area:map; } .side { grid-area:side; } .side .panel { margin-left:0; } .inv { grid-area:inv; margin-top:0; }
canvas#map { width:640px; height:640px; image-rendering:pixelated; background:#2e3a2e; cursor:crosshair; display:block; }
.legend { color:var(--muted); font-size:12px; margin-top:6px; display:flex; align-items:center; gap:6px; }
.lg { display:inline-block; width:10px; height:10px; } .lg.me{background:#e3b341} .lg.other{background:#9aa3b5} .lg.cave{background:#555b66} .lg.ruin{background:#9b6b43}
.sel { margin-top:8px; min-height:40px; }
.gold { color:var(--gold); } .muted { color:var(--muted); } .good { color:var(--good); } .bad { color:var(--bad); }
.bar { height:12px; background:#1b1e24; border:1px solid var(--line); margin:4px 0; } .bar > div { height:100%; background:var(--accent); }
.bar.hp > div { background:var(--bad); } .bar.xp > div { background:#7a6fbf; }
table { width:100%; border-collapse:collapse; font-size:12px; } td { padding:2px 4px; border-bottom:1px solid var(--line); } tr.me td { color:var(--gold); }
.slots { display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; margin-bottom:10px; }
.slot { border:1px dashed var(--line); padding:6px; min-height:70px; font-size:12px; }
.slot .sn { color:var(--muted); text-transform:uppercase; font-size:10px; }
.items { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.item { border:1px solid var(--line); padding:6px; font-size:12px; } .item .acts { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; } .item button { padding:2px 6px; font-size:11px; }
.r-grau { color:#c9cdd4 } .r-gruen { color:#7cc47c } .r-blau { color:#6fa8dc } .r-lila { color:#b48ae0 }
.toast { position:fixed; bottom:16px; right:16px; background:#333a46; border:1px solid #667; padding:10px 14px; max-width:360px; }
.log { font-size:12px; color:var(--muted); margin-top:8px; } .log div { border-top:1px solid var(--line); padding:2px 0; }
a { color:var(--accent); }
/* round 2: pixel map */
.mapbox { display:flex; gap:10px; align-items:flex-start; }
canvas#map { width:640px; height:640px; image-rendering:pixelated; image-rendering:crisp-edges; cursor:grab; touch-action:none; }
canvas#map:active { cursor:grabbing; }
.minibox { display:none; }
.mapwrap { position:relative; }
.minibox { display:flex; flex-direction:column; gap:6px; position:absolute; right:22px; top:44px; background:rgba(14,11,18,.75); padding:6px; border:1px solid var(--line); }
canvas#minimap { width:128px; height:128px; image-rendering:pixelated; cursor:pointer; display:block; }
.legend img { width:16px; height:16px; image-rendering:pixelated; vertical-align:middle; object-fit:cover; object-position:top; }
label.check { display:flex; gap:8px; align-items:flex-start; font-size:12px; } label.check input { width:auto; margin-top:2px; }
button.danger { background:#5a2a2a; border-color:#a8322a; }
footer { color:var(--muted); font-size:12px; padding:10px 16px 24px; border-top:1px solid var(--line); margin-top:12px; }
.page { max-width:760px; margin:24px auto; } .placeholder { background:#3a2f1a; border:1px dashed var(--gold); padding:2px 6px; color:#fde68a; }