/* Zunft & Zoll – mittelalterliche Palette: Eichenholz, Pergament, Tinte, Blattgold, Wappenrot */
:root {
  --wood-0: #1e140c;     /* dunkelstes Holz: Kopfleiste, Schatten */
  --wood-1: #2f1f13;     /* Hintergrund */
  --wood-2: #4a3020;     /* Bretter, Linien auf Holz */
  --wood-3: #6b4626;     /* Knöpfe */
  --parch: #e8d6ab;      /* Pergament */
  --parch-2: #dcc58f;    /* Zeilen-Hover, Spuren */
  --parch-3: #f4e8c8;    /* Eingabefelder */
  --ink: #2b1c10;        /* Tinte */
  --ink-dim: #6e5a3e;    /* verblasste Tinte */
  --rule: #9c7a4b;       /* Linien auf Pergament */
  --gilt: #d9a63a;       /* Blattgold auf Holz */
  --gilt-ink: #8a6015;   /* Gold auf Pergament */
  --blood: #8e2a1e;      /* Wappenrot */
  --forest: #3d5f2a;     /* gut */
  --ochre: #a85d18;      /* Warnung */
  --q0: #8a5a2b; --q1: #5f6a70; --q2: #a07410; --q3: #6a3d9a;
  --px: 'Pixelify Sans', system-ui, sans-serif;
  --tx: 'VT323', ui-monospace, monospace;
  --brass: var(--gilt-ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--parch); font-family: var(--tx); font-size: 20px; line-height: 1.25;
  background-color: var(--wood-1);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(255,220,160,.025) 0 1px, transparent 1px 7px, rgba(0,0,0,.05) 7px 9px, transparent 9px 23px);
}
.hidden { display: none !important; }
h1, h2, h3, h4 { font-family: var(--px); font-weight: 600; margin: 0 0 .5em; line-height: 1.15; }
h2 { font-size: 26px; color: var(--gilt); text-shadow: 2px 2px 0 var(--wood-0); }
h3 { font-size: 19px; color: var(--blood); }
h4 { font-size: 16px; color: var(--ink-dim); font-weight: 400; }
a { color: var(--gilt); }
p { margin: .3em 0 .7em; max-width: 72ch; }
button, input, select { font: inherit; color: inherit; }
button {
  background: var(--wood-3); border: 2px solid var(--wood-0); color: var(--parch-3); padding: 1px 10px; cursor: pointer;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,220,160,.15);
}
button:hover { border-color: var(--gilt); }
button:active { box-shadow: inset 2px 2px 0 rgba(0,0,0,.35); }
button.primary { background: var(--blood); color: #f6e7c4; border-color: var(--gilt); }
button.ghost { background: transparent; color: inherit; border-color: var(--rule); box-shadow: none; }
button.danger { border-color: var(--blood); }
button.ghost.danger { color: var(--blood); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.small { font-size: 17px; padding: 0 6px; }
input, select { background: var(--parch-3); border: 2px solid var(--rule); color: var(--ink); padding: 1px 6px; min-width: 0; }
input::placeholder { color: var(--ink-dim); }
input[type=number] { width: 6em; }
input[type=checkbox], input[type=radio] { accent-color: var(--blood); }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 1px; }
.err { color: #e07a62; min-height: 1.2em; }
.good { color: var(--forest); } .bad { color: var(--blood); } .warn { color: var(--ochre); } .dim { color: var(--ink-dim); }
.gold { color: var(--gilt-ink); }
.q0 { color: var(--q0); } .q1 { color: var(--q1); } .q2 { color: var(--q2); } .q3 { color: var(--q3); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

/* Anmeldung */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-box { background: var(--parch); color: var(--ink); border: 3px solid var(--wood-0); outline: 2px solid var(--rule); outline-offset: -9px; padding: 30px 34px; max-width: 460px; width: 100%; box-shadow: 8px 8px 0 var(--wood-0); }
.logo { font-size: 44px; color: var(--blood); letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(138,96,21,.35); }
.logo span { color: var(--gilt-ink); }
.tagline { color: var(--ink-dim); }
.login label { display: grid; gap: 2px; margin: 10px 0; }
.login .err { color: var(--blood); }
.login-back { display: inline-block; margin-top: 8px; color: var(--ink-dim); }

/* Gerüst */
.app { display: grid; height: 100vh; grid-template-columns: 196px minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "top top top" "nav main side"; }
.top { grid-area: top; display: flex; align-items: center; gap: 18px; padding: 6px 14px; background: var(--wood-0); border-bottom: 4px solid var(--gilt-ink); box-shadow: 0 2px 0 var(--wood-0); flex-wrap: wrap; }
.top .gold { color: var(--gilt); }
.top .dim { color: #b39c74; }
.top select { background: var(--wood-2); color: var(--parch); border-color: var(--wood-3); }
.top button.ghost { color: var(--parch); border-color: var(--wood-3); }
.brand { font-family: var(--px); font-weight: 700; color: var(--gilt); font-size: 22px; text-shadow: 2px 2px 0 #000; }
.clock { display: flex; gap: 12px; align-items: center; flex: 1; flex-wrap: wrap; }
.clock .t { font-family: var(--px); font-size: 20px; color: var(--parch-3); }
.clock .bar { width: 120px; height: 10px; border: 2px solid var(--wood-3); position: relative; background: linear-gradient(90deg, #141433 0 25%, #a8603a 25% 30%, #7fa3c9 30% 82%, #b0583a 82% 91%, #141433 91%); }
.clock .bar i { position: absolute; top: -4px; width: 4px; height: 14px; background: var(--gilt); }
.who { display: flex; gap: 10px; align-items: center; }
.nav { grid-area: nav; background: rgba(30,20,12,.65); border-right: 4px solid var(--wood-0); overflow-y: auto; padding: 8px 0; }
.nav button { display: block; width: 100%; text-align: left; border: 0; background: none; box-shadow: none; padding: 5px 16px; font-family: var(--px); font-size: 16px; color: #cbb68c; }
.nav button:hover { color: var(--parch-3); background: var(--wood-2); }
.nav button.on { color: #f6e7c4; background: var(--blood); box-shadow: inset 4px 0 0 var(--gilt); }
.nav .sep { height: 2px; background: var(--wood-2); margin: 8px 12px; }
.main { grid-area: main; overflow-y: auto; padding: 14px 18px 40px; }
.side { grid-area: side; display: grid; grid-template-rows: auto 1fr auto; background: #d6bf8c; color: var(--ink); border-left: 4px solid var(--wood-0); min-height: 0; }
.side-tabs { display: flex; background: var(--wood-0); }
.side-tabs button { flex: 1; border: 0; background: none; box-shadow: none; font-size: 17px; color: #cbb68c; border-bottom: 3px solid transparent; }
.side-tabs button.on { color: var(--gilt); border-bottom-color: var(--gilt); }
.side-body { overflow-y: auto; padding: 6px 10px; font-size: 18px; min-height: 0; }
.side-body .msg { margin: 2px 0; word-wrap: break-word; }
.side-body .msg b { color: var(--blood); font-weight: 400; }
.side-body .msg.privat b { color: var(--q3); }
.side-body .msg.system { color: var(--ink-dim); white-space: pre-wrap; }
.side-body .ts { color: var(--ink-dim); font-size: 15px; }
.chat-form { display: flex; gap: 4px; padding: 6px; border-top: 2px solid var(--rule); }
.chat-form input { flex: 1; }

/* Pergament-Tafeln */
.panel {
  background: var(--parch); color: var(--ink);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.25), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(120,80,30,.12), transparent 55%);
  border: 3px solid var(--wood-0); outline: 1px solid var(--rule); outline-offset: -7px;
  padding: 12px 14px; margin-bottom: 14px; box-shadow: 5px 5px 0 rgba(0,0,0,.45);
}
.panel > h3:first-child { margin-top: 0; }
.panel h2 { color: var(--blood); text-shadow: none; }
.panel h3 .dim, .panel h2 .dim { font-weight: 400; }
.panel a { color: var(--blood); }
.main > .row h2, .main > h2 .dim { color: var(--gilt); }
.main > h2 .dim, .main > .row h2 .dim { color: #b39c74; }
.main > p.hint, .main > .hint { color: #cbb68c; }
.main > .tabs .hint { color: #cbb68c; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; }
.kv dt { color: var(--ink-dim); } .kv dd { margin: 0; }
.kv dd .meter { display: inline-block; width: 140px; vertical-align: middle; margin-right: 6px; }
table { border-collapse: collapse; width: 100%; }
th { font-family: var(--px); font-weight: 400; font-size: 15px; color: var(--ink-dim); text-align: left; border-bottom: 2px solid var(--rule); padding: 2px 6px; }
td { padding: 1px 6px; border-bottom: 1px dotted rgba(156,122,75,.6); vertical-align: top; }
tr.click { cursor: pointer; } tr.click:hover td, tr.sel td { background: var(--parch-2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button.on { background: var(--blood); color: #f6e7c4; border-color: var(--gilt); }
.meter { height: 10px; background: #c9ae78; border: 2px solid var(--wood-2); position: relative; min-width: 60px; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--forest); }
.meter.brass i { background: var(--gilt-ink); } .meter.red i { background: var(--blood); }
.tag { display: inline-block; border: 1px solid var(--rule); padding: 0 5px; font-size: 16px; color: var(--ink-dim); }
.top .tag { border-color: var(--wood-3); color: #cbb68c; }
.tag.good { border-color: var(--forest); color: var(--forest); } .tag.bad { border-color: var(--blood); color: var(--blood); } .tag.brass { border-color: var(--gilt-ink); color: var(--gilt-ink); }
.top .tag.bad { color: #e07a62; border-color: #e07a62; }
.recipe { border-bottom: 1px dotted var(--rule); padding: 6px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.recipe.off { opacity: .55; }
.empty { color: var(--ink-dim); font-style: italic; padding: 6px 0; }
.spark { display: inline-block; vertical-align: middle; }
.hint { color: var(--ink-dim); font-size: 17px; }
pre { font-family: var(--tx); }

/* Karte */
.mapwrap { position: relative; background: var(--wood-0); border: 4px solid var(--wood-0); outline: 2px solid var(--gilt-ink); outline-offset: -2px; overflow: auto; max-height: 70vh; box-shadow: 5px 5px 0 rgba(0,0,0,.45); }
#map { image-rendering: pixelated; display: block; cursor: crosshair; width: 100%; height: auto; }

/* Hinweise & Dialog */
.toasts { position: fixed; left: 12px; bottom: 12px; display: grid; gap: 6px; z-index: 50; max-width: min(420px, 90vw); }
.toast { background: var(--parch); color: var(--ink); border: 2px solid var(--wood-0); border-left: 8px solid var(--gilt-ink); padding: 4px 10px; box-shadow: 4px 4px 0 rgba(0,0,0,.5); animation: pop .18s ease-out; }
.toast.good { border-left-color: var(--forest); } .toast.bad { border-left-color: var(--blood); } .toast.warn { border-left-color: var(--ochre); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal { position: fixed; inset: 0; background: rgba(20,12,6,.7); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal-box { background: var(--parch); color: var(--ink); border: 4px solid var(--wood-0); outline: 2px solid var(--gilt-ink); outline-offset: -8px; padding: 18px 20px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 8px 8px 0 rgba(0,0,0,.5); }
.modal-box label { display: grid; gap: 2px; margin: 6px 0; }
.modal-box label.row { display: flex; }

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@media (max-width: 1100px) {
  .app { grid-template-columns: 160px 1fr; grid-template-rows: auto 1fr 280px; grid-template-areas: "top top" "nav main" "side side"; }
}
@media (max-width: 700px) {
  body { font-size: 19px; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr 240px; grid-template-areas: "top" "nav" "main" "side"; height: auto; min-height: 100vh; }
  .nav { display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 4px solid var(--wood-0); }
  .nav button { width: auto; white-space: nowrap; padding: 6px 10px; }
  .nav .sep { display: none; }
  .main { padding: 10px 12px 30px; overflow: visible; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
}

/* ===== Version 0.2: Markt, Diagramme, Charaktere, Tutorial ===== */
.nowrap { white-space: nowrap; }
b.gilt, .gilt { color: var(--gilt); }
.panel b.gilt { color: var(--gilt-ink); }
.chart { width: 100%; height: auto; display: block; margin: 4px 0 6px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 17px; color: var(--ink-dim); }
.legend i { display: inline-block; width: 18px; height: 4px; vertical-align: middle; margin-right: 6px; }
.bars { width: 100%; }
.bars td { border-bottom: 0; padding: 2px 6px; vertical-align: middle; }
.barcell { width: 32%; min-width: 90px; vertical-align: middle; }
.barcell .meter { margin: 3px 0; }
.barcell.wide { width: 30%; }
.barcell .meter + .hint, .barcell .meter + span { display: block; }
ul.plain { margin: 4px 0 0 18px; padding: 0; }
.badge { display: inline-block; min-width: 18px; text-align: center; background: var(--gilt); color: var(--wood-0); font-family: var(--tx); font-size: 15px; padding: 0 4px; margin-left: 4px; }
.nav button.on .badge { background: var(--parch); }
.charbtn { background: var(--wood-2); color: var(--parch-3); border-color: var(--wood-3); font-family: var(--px); font-size: 16px; }
.charbtn:hover { border-color: var(--gilt); }

/* Chips (Filter) */
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; align-items: center; }
.chip { font-size: 17px; padding: 0 9px; background: var(--wood-2); color: var(--parch); border: 2px solid var(--wood-0); box-shadow: none; }
.panel .chip { background: var(--parch-2); color: var(--ink); border-color: var(--rule); }
.chip.on, .panel .chip.on { background: var(--blood); color: #f6e7c4; border-color: var(--gilt); }
.main > .chips .hint { color: #cbb68c; }

/* Markt */
.mgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 14px; align-items: start; }
.mdetail { position: sticky; top: 0; }
.mtable td { padding: 2px 6px; }
.mtable tr.cathead td { font-family: var(--px); font-size: 15px; color: var(--blood); background: transparent; border-bottom: 2px solid var(--rule); padding-top: 10px; cursor: default; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 8px; }
.stats div { background: var(--parch-3); border: 2px solid var(--rule); padding: 4px 8px; }
.stats small { display: block; color: var(--ink-dim); font-size: 15px; }
.stats b { font-family: var(--px); font-weight: 600; font-size: 19px; }
.npc { background: rgba(61,95,42,.1); border-left: 4px solid var(--forest); padding: 4px 10px; }
.trade { border-color: var(--blood); }
.seg { display: flex; margin-bottom: 8px; }
.seg button { flex: 1; font-family: var(--px); font-size: 18px; padding: 4px; background: var(--parch-2); color: var(--ink); border-color: var(--rule); box-shadow: none; }
.seg button + button { border-left: 0; }
.seg button.on { background: var(--blood); color: #f6e7c4; border-color: var(--wood-0); }
.seg.small button { font-size: 16px; padding: 2px; }
.seg.small button.on { background: var(--wood-3); }
.tform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; }
.tform label { display: grid; gap: 2px; color: var(--ink-dim); }
.tform .quick { grid-column: 1 / -1; }
.tsum { background: var(--parch-3); border: 2px dashed var(--rule); padding: 8px 10px; margin: 10px 0; min-height: 2.6em; }
button.big { width: 100%; font-family: var(--px); font-size: 20px; padding: 6px; }
.grid2.tight { gap: 10px; grid-template-columns: 1fr 1fr; }
.depthtable td { padding: 1px 4px; border-bottom: 0; }
.depthcell { width: 40%; }
.depth { height: 12px; border: 1px solid var(--wood-2); }
.depth.ask { background: #b9775f; } .depth.bid { background: #7d9a62; }
tr.mine td { background: rgba(217,166,58,.25); }
tr.here td { font-weight: 600; }
tr.hot td { background: rgba(142,42,30,.07); }

/* Charaktere */
.vcards, .ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vcard, .ccard { display: block; background: var(--parch-3); border: 2px solid var(--rule); padding: 8px 10px; cursor: pointer; }
.vcard:has(input:checked) { border-color: var(--blood); box-shadow: 3px 3px 0 var(--blood); }
.vcard input { accent-color: var(--blood); }
.ccard { cursor: default; display: grid; gap: 4px; align-content: start; }
.ccard.on { border-color: var(--gilt-ink); background: #f7e9bf; }
.ccard.new { border-style: dashed; }

/* Ränge */
.ladder-ui { display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--wood-0); margin-bottom: 8px; }
.ladder-ui div { padding: 6px 10px; border-right: 3px solid var(--wood-0); background: var(--parch-3); }
.ladder-ui div:last-child { border-right: 0; background: #f0d68a; }
.ladder-ui b { display: block; font-family: var(--px); color: var(--blood); }
.ladder-ui span { font-family: var(--px); font-size: 15px; }
.ladder-ui small { display: block; color: var(--ink-dim); font-size: 16px; }

/* Lager nach Warengruppe */
.catbar { display: flex; height: 18px; border: 2px solid var(--wood-2); margin: 6px 0 8px; overflow: hidden; }
.catbar span { font-size: 14px; color: #f6e7c4; padding: 0 4px; white-space: nowrap; overflow: hidden; line-height: 16px; }
.catbar .c0 { background: #6b4626; } .catbar .c1 { background: #3d5f2a; } .catbar .c2 { background: #8e2a1e; } .catbar .c3 { background: #8a6015; } .catbar .c4 { background: #5f6a70; } .catbar .c5 { background: #6a3d9a; }

/* Tutorial */
.tutorial { position: fixed; right: 356px; bottom: 16px; width: min(380px, calc(100vw - 32px)); z-index: 55; background: var(--parch); color: var(--ink);
  border: 4px solid var(--wood-0); outline: 2px solid var(--gilt); outline-offset: -8px; padding: 12px 16px 14px; box-shadow: 8px 8px 0 rgba(0,0,0,.55); }
.tut-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--px); font-size: 14px; color: var(--ink-dim); }
.tut-dots { display: flex; gap: 4px; margin: 6px 0 8px; }
.tut-dots i { flex: 1; height: 5px; background: var(--parch-2); border: 1px solid var(--rule); }
.tut-dots i.past { background: var(--forest); } .tut-dots i.now { background: var(--gilt-ink); }
.tut-task { border-left: 4px solid var(--gilt-ink); padding-left: 8px; }
.tut-task.good { border-left-color: var(--forest); }
.tut-hl { outline: 3px solid var(--gilt) !important; outline-offset: 3px; animation: tutpulse 1.6s ease-in-out infinite; }
@keyframes tutpulse { 50% { outline-color: var(--blood); } }
@media (prefers-reduced-motion: reduce) { .tut-hl { animation: none; } }

@media (max-width: 1100px) { .tutorial { right: 16px; bottom: 296px; } }
@media (max-width: 700px) { .tutorial { left: 8px; right: 8px; bottom: 8px; width: auto; } .stats { grid-template-columns: 1fr 1fr; } .ladder-ui { grid-template-columns: 1fr 1fr; } .grid2.tight { grid-template-columns: 1fr; } }
.tutorial.mini { padding: 0; outline: 0; width: auto; border-width: 3px; }
.tut-open { background: var(--parch); color: var(--ink); border: 0; box-shadow: none; font-family: var(--px); font-size: 16px; padding: 6px 12px; }
.mtable { font-size: 19px; }
.mlist { overflow-x: auto; }

.mtable td, .mtable th { padding: 2px 5px; }
[data-cnttime] { min-width: 7.5em; text-align: right; }

/* ===== Version 0.3: lesbare Schrift, Chat-Leiste, Markt-Seitenleiste, Mobil ===== */
:root { --tx: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif; }
body { font-size: 18px; line-height: 1.4; font-size-adjust: 0.42; }
body.font-pixel { --tx: 'VT323', ui-monospace, monospace; font-size: 20px; line-height: 1.25; font-size-adjust: none; }
h1, h2, h3, h4, .brand, .clock .t, .nav button, th, .seg button, .stats b, .ladder-ui b, .ladder-ui span, .tut-head, .tut-open, .charbtn, .cathead td, .side-fab, button.big { font-size-adjust: none; }
input, select, button { font-family: var(--tx); }
.hint { line-height: 1.35; }
td { padding-top: 2px; padding-bottom: 2px; }
.profit { font-weight: 700; margin-left: 6px; }
ul.todo-list { margin: 0; padding-left: 20px; }
ul.todo-list li { margin: 6px 0; }
.todo { justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.whatnow { border-color: var(--gilt-ink); background-color: #f1e2b8; }
table.contracts tr.ready td { background: rgba(61,95,42,.12); }

/* Chat-/Nachrichtenleiste ein- und ausklappbar */
.side-close { flex: 0 0 auto !important; padding: 0 10px; }
.side-fab { display: none; position: fixed; right: 14px; bottom: 14px; z-index: 50; font-family: var(--px); font-size: 16px; background: var(--wood-0); color: var(--gilt); border: 3px solid var(--gilt-ink); padding: 6px 14px; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
body.side-closed .app { grid-template-columns: 196px minmax(0, 1fr) 0; }
body.side-closed .side { display: none; }
body.side-closed .side-fab { display: block; }
body.side-closed .tutorial { right: 16px; bottom: 64px; }

/* Markt: Liste und Details scrollen getrennt */
.mgrid:not(.narrow) .mlist { max-height: max(420px, calc(100vh - 250px)); overflow: auto; }
.mgrid:not(.narrow) .mlist thead th { position: sticky; top: -12px; background: var(--parch); z-index: 1; }
.mgrid:not(.narrow) .mdetail { max-height: max(420px, calc(100vh - 175px)); overflow: auto; padding-right: 4px; }
.mgrid.narrow { grid-template-columns: 1fr; }
.mgrid.narrow .nodetail { display: none; }
.mgrid.narrow .mdetail.has { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); overflow: auto; z-index: 45; padding: 12px; background: var(--wood-1); border-left: 4px solid var(--gilt-ink); box-shadow: -8px 0 0 rgba(0,0,0,.35); }
.closebtn { display: none; }
.mgrid.narrow .closebtn { display: inline-block; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h3 { display: inline; }
details.panel > summary::after { content: '▸'; float: right; color: var(--ink-dim); }
details.panel[open] > summary::after { content: '▾'; }
details.panel[open] > summary { margin-bottom: 6px; }
.dhead .tag { vertical-align: middle; }

/* Kopfleiste */
.clock-short { display: none; }

/* ---- Tablet & Handy ---- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 170px minmax(0, 1fr) !important; grid-template-rows: auto 1fr; grid-template-areas: "top top" "nav main"; }
  .side { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; height: 68vh; z-index: 48; transform: translateY(105%); transition: transform .2s ease-out; border-left: 0; border-top: 4px solid var(--gilt-ink); box-shadow: 0 -8px 0 rgba(0,0,0,.35); }
  body.side-open .side { transform: none; }
  .side-fab { display: block; }
  body.side-open .side-fab { display: none; }
  .tutorial { right: 12px; bottom: 64px; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  html, body { overflow-x: hidden; }
  .app { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto 1fr; grid-template-areas: "top" "nav" "main"; height: auto; min-height: 100vh; }
  .top { gap: 8px; padding: 6px 10px; }
  .brand { display: none; }
  .clock { gap: 8px; }
  .clock .bar { display: none; }
  .clock-long { display: none; } .clock-short { display: inline; }
  .who { gap: 6px; flex-wrap: wrap; }
  .who .dim { display: none; }
  .nav { position: sticky; top: 0; z-index: 29; display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 4px solid var(--wood-0); background: var(--wood-0); scrollbar-width: none; }
  .nav button { width: auto; white-space: nowrap; padding: 8px 12px; }
  .nav .sep { display: none; }
  .main { padding: 10px 10px 80px; overflow: visible; }
  .panel { padding: 10px; overflow-x: auto; }
  .grid2, .grid3, .grid2.tight { grid-template-columns: 1fr; }
  .hide-m { display: none; }
  input, select { font-size: 16px; min-height: 36px; }
  button { min-height: 36px; }
  button.small { min-height: 32px; }
  .recipe { grid-template-columns: 1fr; }
  .recipe > .row { justify-content: flex-end; }
  .stats { grid-template-columns: 1fr 1fr; }
  .mgrid .mdetail.has { width: 100vw; border-left: 0; }
  .tutorial { left: 8px; right: 8px; bottom: 60px; width: auto; }
  .tutorial.mini { left: auto; }
  .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 4px; }
  .modal { padding: 8px; align-items: end; }
  .modal-box { max-height: 85vh; }
  .ccards, .vcards { grid-template-columns: 1fr; }
  .mapwrap { max-height: 55vh; }
  .chart text { font-size: 26px; }
  .legend { font-size: 15px; }
}
@media (pointer: coarse) { button.small { padding: 2px 10px; } .chip { padding: 4px 12px; } }
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

.main { min-width: 0; }

/* ===================== v0.4: Raster-Inventar ===================== */
.invlayout { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.invlayout > .panel { margin: 0; }
.invlayout .invequip { flex: 0 1 300px; }
.invlayout .invlager, .invlayout .invcarry { flex: 0 0 auto; max-width: 100%; }
.invlayout .invsel { flex: 1 1 260px; }
@media (max-width: 760px) { .invlayout .invequip { flex-basis: 100%; order: 3; } .invlayout .invlager, .invlayout .invcarry { flex-basis: 100%; } }
@media (pointer: coarse) { .invlayout .invsel { display: none; } }
#invBanner { display: none; }
body.inv-moving #invBanner { display: flex; gap: 10px; align-items: center; justify-content: space-between; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 900;
  background: var(--wood-0); color: var(--parch); border: 2px solid var(--gilt); padding: 8px 10px; font-size: 17px; }
.igrid { position: relative; width: calc(var(--cell) * var(--cols)); height: calc(var(--cell) * var(--rows)); margin: 6px 0; max-width: 100%;
  background-color: #3a2717; border: 2px solid var(--wood-0);
  background-image: linear-gradient(to right, rgba(0,0,0,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.35) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); touch-action: manipulation; user-select: none; }
.iover { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(142,42,30,.35) 0 6px, transparent 6px 12px); pointer-events: none; }
.gitem { position: absolute; box-sizing: border-box; border: 1px solid var(--wood-0); background: linear-gradient(#e8d6ab, #cdb27a); color: var(--ink);
  overflow: hidden; cursor: grab; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1px; touch-action: manipulation; }
.gitem:hover { filter: brightness(1.08); }
.gitem.sel { outline: 3px solid var(--gilt); outline-offset: -2px; z-index: 2; }
.gitem.dragging { opacity: .35; }
.gitem .gi-icon, .eqitem .gi-icon { width: min(70%, 28px); aspect-ratio: 1; display: block; }
.gitem .gi-icon svg, .eqitem .gi-icon svg, .gi-icon.big svg { width: 100%; height: 100%; display: block; }
.gi-icon.big { width: 40px; height: 40px; flex: none; }
.gitem .gi-name { font-size: 11px; line-height: 1.05; text-align: center; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gitem[data-w="1"][data-h="1"] .gi-name { display: none; }
.gitem .gi-n { position: absolute; right: 2px; bottom: 0; font-size: 13px; font-weight: 700; color: var(--parch-3); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.gitem.ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .9; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.dpv { position: absolute; pointer-events: none; z-index: 3; border: 2px dashed; }
.dpv.ok { background: rgba(61,95,42,.45); border-color: #9fd17a; }
.dpv.merge { background: rgba(217,166,58,.45); border-color: var(--gilt); }
.dpv.bad { background: rgba(142,42,30,.5); border-color: #ff8a70; }
body.inv-moving .igrid, body.inv-moving .eqslot { outline: 2px dashed var(--gilt); cursor: crosshair; }
.eqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.eqslot { border: 2px dashed var(--rule); padding: 3px 5px; min-height: 64px; background: rgba(0,0,0,.04); }
.eqslot.full { border-style: solid; border-color: var(--wood-2); }
.eqslot small { display: block; color: var(--ink-dim); font-size: 13px; }
.eqslot .hint { font-size: 13px; }
.eqitem { cursor: grab; display: grid; grid-template-columns: 26px 1fr; column-gap: 4px; align-items: center; font-size: 15px; line-height: 1.1; }
.eqitem .gi-icon { width: 26px; grid-row: span 2; }
.eqitem .meter { grid-column: 1 / -1; margin-top: 3px; }
.eqslot.drop-ok { background: rgba(61,95,42,.3); border-color: var(--forest); }
.eqslot.drop-bad { background: rgba(142,42,30,.25); border-color: var(--blood); }
.igrid.drop-ok { outline: 3px solid #9fd17a; } .igrid.drop-bad { outline: 3px solid #ff8a70; }
.isel .row { gap: 8px; }
.isel .wrap { flex-wrap: wrap; margin-top: 6px; }
/* Ausrüstung auf der Übersicht */
.eqmini { display: flex; flex-wrap: wrap; gap: 4px; }
.eqmini span { border: 1px solid var(--rule); padding: 0 6px; font-size: 15px; background: rgba(0,0,0,.04); }
.eqmini span.empty { color: var(--ink-dim); border-style: dashed; }
/* Kosten und Gewinn je Durchgang */
.costline { font-size: 16px; margin-top: 2px; }
.costline b.good { color: var(--forest); } .costline b.bad { color: var(--blood); }
/* Serverstatistik */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.tile { border: 2px solid var(--rule); padding: 4px 8px; background: rgba(0,0,0,.04); }
.tile small { display: block; color: var(--ink-dim); font-size: 14px; }
.tile b { font-size: 22px; }
.tile.warn b { color: var(--blood); }