/* s3 — modern DOM UI over WebGL canvas (house rule: pixel-art in-arena only) */
/* skórka: średniowieczny Settlers — drewno / pergamin / miedź (MENU.md §5) */
:root {
  --wood-dk: #140d05; --wood: #241a0e; --wood-lt: #3a2c16; --wood-btn: #4a3a22;
  --copper: #b87333; --copper-lt: #d89a5a; --gold: #f0c060; --gold-dim: #c8a24a;
  --parch: #eaddc0; --parch-dim: #a89670; --border: #6b5432; --border-lt: #8a6b3c;
  --panel-bg: rgba(28, 20, 11, .90);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d0a06; font-family: system-ui, 'Segoe UI', Roboto, sans-serif; color: var(--parch); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* minimapa siedzi w lewym panelu bocznym (#mini-slot) — pełna szerokość slotu; ukryta w menu */
#minimap { display: none; width: 100%; height: auto; border: 2px solid #6b5432; border-radius: 4px; background: #000; pointer-events: auto; }
#mini-slot #minimap { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#hud.hidden { display: none; }
#hud > * { pointer-events: auto; }
#menus { position: fixed; inset: 0; z-index: 10; }
#menus:empty { display: none; }
#toasts { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { background: rgba(20,14,6,.92); border: 1px solid #6b5432; padding: 8px 14px; border-radius: 6px; font-size: 14px; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; } }

/* menus — średniowieczny Settlers (tło z assetu gry, ramki 2-poziomowe, pergamin) */
.menu-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: #0d0a06 url('/release-media/23bab482453795578bdde3b935a8542408e1991372f9bbcf7977058803657615/menu-bg.jpg') center/cover no-repeat; animation: menu-in .18s ease; }
.menu-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(13,10,6,.34) 0%, rgba(13,10,6,.74) 78%, rgba(13,10,6,.92) 100%); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu-panel { position: relative; background: var(--panel-bg); border: 2px solid var(--border);
  border-radius: 10px; padding: 24px 28px; min-width: 340px; width: 400px; max-width: 94vw; max-height: 90vh; overflow: auto;
  box-shadow: 0 14px 48px rgba(0,0,0,.75), inset 0 0 0 1px rgba(184,115,51,.22), inset 0 0 34px rgba(0,0,0,.35);
  backdrop-filter: blur(2px); }
/* narożniki-ćwieki (detal rzemiosła §5.5) */
.menu-panel::before, .menu-panel::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 2px solid var(--copper); border-radius: 2px; opacity: .7; }
.menu-panel::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.menu-panel::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.menu-panel h1 { font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-size: 32px; font-weight: 700; letter-spacing: 3px;
  color: var(--gold); text-align: center; margin-bottom: 2px; text-shadow: 0 2px 2px #000, 0 0 18px rgba(184,115,51,.45);
  background: linear-gradient(180deg, #f6d98a, #c8862f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.menu-panel h2 { font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-size: 22px; color: var(--gold); margin-bottom: 12px; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
.menu-sub { text-align: center; color: var(--parch-dim); font-size: 13px; margin-bottom: 18px; }
.menu-btn { display: block; width: 100%; padding: 12px 18px; margin: 8px 0; background: linear-gradient(180deg, var(--wood-btn), #2c2110);
  color: #f4e6bf; border: 1px solid var(--border-lt); border-radius: 7px; font-size: 17px; cursor: pointer; text-align: center; min-height: 46px;
  box-shadow: inset 0 1px 0 rgba(240,224,184,.10); transition: background .12s, border-color .12s, transform .06s; }
.menu-btn:hover { background: linear-gradient(180deg, #63512e, #40300f); border-color: var(--copper-lt); }
.menu-btn:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,192,96,.45); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn:disabled { opacity: .45; cursor: default; }
.menu-btn small { display: block; font-size: 12px; color: var(--parch-dim); font-weight: 400; margin-top: 1px; }
/* primary: Szybka gra — największy, miedziany akcent (§2: zawsze pierwsza i największa) */
.menu-btn.primary { padding: 15px 18px; font-size: 20px; letter-spacing: .5px;
  background: linear-gradient(180deg, #7a5322, #4a3013); border-color: var(--copper); color: #fdefc9;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.18), 0 3px 10px rgba(0,0,0,.4); }
.menu-btn.primary:hover { background: linear-gradient(180deg, #8f6329, #5a3b17); border-color: var(--copper-lt); }
.menu-btn.primary small { color: #e6c896; }
.menu-btn.small { font-size: 14px; padding: 8px 10px; min-height: 36px; }
.menu-btn.ghost { background: linear-gradient(180deg, #2a2012, #1c1509); }
.menu-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.menu-row label { flex: 0 0 120px; font-size: 14px; color: #d6c396; }
.menu-row input, .menu-row select { flex: 1; padding: 9px; background: #14100a; color: #f4e6bf; border: 1px solid var(--border); border-radius: 5px; font-size: 15px; min-height: 42px; }
.menu-row input:focus, .menu-row select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,192,96,.30); }
.menu-row input[type=range] { padding: 0; accent-color: var(--copper); min-height: 24px; }
.menu-row .val { flex: 0 0 42px; text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; font-size: 14px; }
.opt-group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: rgba(20,14,6,.42); }
.opt-group > .gh { font-size: 13px; color: var(--copper-lt); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.menu-note { font-size: 13px; line-height: 1.6; color: #cdba8e; }
.menu-note code { background: #14100a; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--gold); font-size: 12.5px; }
.menu-list { margin: 10px 0; max-height: 44vh; overflow: auto; }
.menu-list::-webkit-scrollbar { width: 9px; }
.menu-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.menu-list::-webkit-scrollbar-track { background: #14100a; }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--wood-lt); border-radius: 6px; margin: 5px 0; cursor: pointer; font-size: 14px; transition: background .1s, border-color .1s; }
.menu-item:hover { background: #33270f; border-color: var(--copper); }
.menu-item .sub { color: var(--parch-dim); font-size: 12px; }
.menu-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 12px; color: var(--parch-dim); }
.menu-foot a { color: var(--copper-lt); text-decoration: none; }
.menu-foot a:hover { color: var(--gold); text-decoration: underline; }
.menu-back { margin-top: 14px; }
.slot-row { display: grid; grid-template-columns: 26px 1fr 110px 90px 60px; gap: 6px; align-items: center; margin: 4px 0; font-size: 14px; }
.slot-row select { padding: 6px; background: #14100a; color: #f4e6bf; border: 1px solid var(--border); border-radius: 4px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.map-card { border: 1px solid var(--wood-lt); border-radius: 8px; padding: 8px; cursor: pointer; text-align: center; transition: border-color .1s, background .1s; }
.map-card:hover, .map-card.sel { border-color: var(--gold); background: #33270f; }
.map-card canvas { width: 100%; image-rendering: pixelated; border-radius: 4px; }
.map-card .nm { font-size: 13px; margin-top: 4px; }
.map-card .sub { font-size: 11px; color: var(--parch-dim); }
@media (max-width: 700px) {
  .menu-panel { width: 100%; min-width: 0; padding: 20px 18px; }
  .menu-panel h1 { font-size: 26px; }
  .menu-row { flex-wrap: wrap; }
  .menu-row label { flex-basis: 100%; }
}

/* HUD — ETAP 2A (#19): LEWY PANEL BOCZNY wg oryginału Settlers III: minimapa • zakładki
   kategorii • panel kontekstowy (budowa/osadnicy/towary/BUDYNEK) • dolny pasek narzędzi. */
#panel { position: absolute; left: 0; top: 0; bottom: 0; width: 272px; background: linear-gradient(180deg, rgba(24,17,8,.96), rgba(18,12,5,.98)); border-right: 2px solid #6b5432; display: flex; flex-direction: column; z-index: 6; pointer-events: auto; box-shadow: 3px 0 12px rgba(0,0,0,.5); }
#mini-slot { position: relative; padding: 8px 8px 4px; }
#mini-title { position: absolute; top: 12px; left: 14px; font-size: 11px; color: var(--gold-dim); letter-spacing: 1px; text-shadow: 0 1px 2px #000; pointer-events: none; }
#panel .tabs { display: flex; align-items: stretch; border-top: 1px solid #6b5432; border-bottom: 2px solid #6b5432; }
#panel .tabs button { flex: 1; padding: 10px 0; background: #241a0e; color: #cbb98e; border: none; border-right: 1px solid #6b5432; cursor: pointer; font-size: 20px; min-height: 46px; }
#panel .tabs button:last-child { border-right: none; }
#panel .tabs button.act { background: #3a2c16; color: #f0c060; box-shadow: inset 0 -3px 0 #c8a24a; }
#panel .body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px; }
#panel .toolbar { display: flex; gap: 6px; padding: 8px; border-top: 2px solid #6b5432; background: rgba(0,0,0,.25); }
#panel .toolbar button { flex: 1; min-height: 44px; border: 1px solid #6b5432; border-radius: 7px; background: #33270f; color: #f0e0b8; font-size: 18px; cursor: pointer; }
#panel .toolbar button:hover { background: #4a3a22; border-color: #f0c060; }
/* Budowa: kolumny kategorii układają się PIONOWO (wąski sidebar) */
.bcol { margin-bottom: 12px; }
.bcat { margin-bottom: 6px; color: #f0c060; font-size: 14px; }
.bgrid { display: grid; grid-template-columns: repeat(4, 56px); gap: 6px; }
.bbtn { position: relative; width: 56px; height: 56px; background: #241a0e; border: 1px solid #6b5432; border-radius: 6px; cursor: pointer; color: #e8dcc4; font-size: 11px; overflow: hidden; display: flex; align-items: end; justify-content: center; padding: 2px; }
.bbtn:hover { border-color: #f0c060; }
.bbtn span { position: relative; z-index: 1; text-shadow: 0 1px 3px #000; background: rgba(0,0,0,.4); border-radius: 3px; padding: 0 2px; font-size: 9px; line-height: 1.1; }
/* panele kontekstowe (osadnicy/towary/budynek) */
.ctx { font-size: 14px; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; line-height: 1.6; }
.kv b { color: #f0c060; }
.hint { font-size: 11px; color: #a89670; margin: 4px 0 8px; }
.settler-slider { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.settler-slider > span { display: flex; align-items: center; gap: 7px; }
.settler-count { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 7px; margin: 5px 0; }
.settler-count > b { color: #f0c060; font-size: 16px; }
.settler-choice { display: flex !important; align-items: center; gap: 8px; text-align: left; min-height: 46px; }
.settler-choice > span:last-child { flex: 1; }
.settler-slider .ss-row { display: flex; align-items: center; gap: 6px; }
.settler-slider .ss-row button { width: 34px; height: 34px; border: 1px solid #6b5432; background: #33270f; color: #f0e0b8; border-radius: 5px; font-size: 20px; cursor: pointer; }
.settler-slider .ss-row b { min-width: 22px; text-align: center; font-size: 16px; color: #f0c060; }
/* PANEL BUDYNKU (#11/#9/#14) */
.bpanel .bhead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #6b5432; padding-bottom: 6px; margin-bottom: 6px; }
.bpanel .bhead b { font-size: 17px; color: #f0d890; }
.bpanel .pl { font-size: 11px; color: #a89670; }
.buf { position: relative; height: 20px; background: #1a1206; border: 1px solid #6b5432; border-radius: 5px; overflow: hidden; margin: 3px 0 8px; }
.buf-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7a5a1e, #d89a5a); }
.buf span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; text-shadow: 0 1px 2px #000; }
.faces { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.face { display: inline-block; width: 40px; height: 40px; border: 1px solid #6b5432; border-radius: 5px; background-color: #241a0e; background-repeat: no-repeat; }
.prodgrid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pbtn { padding: 6px 9px; border-radius: 6px; border: 1px solid #6b5432; cursor: pointer; font-size: 12px; color: #f0e0b8; }
.pbtn.on { background: #2c4a1e; border-color: #6fae4a; }
.pbtn.off { background: #3a1e18; border-color: #8a4a3a; opacity: .7; }
.storelist { margin: 4px 0; }
.storerow { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.storerow span { flex: 1; }
.storerow b { color: #f0c060; min-width: 20px; text-align: right; }
.storerow .pbtn { width: 30px; text-align: center; padding: 4px 0; }
.source-trade-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 3px auto 8px; background-repeat: no-repeat; image-rendering: pixelated; }
.source-trade-path button { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: crosshair; }
.source-trade-path button:hover, .source-trade-path button.act { box-shadow: inset 0 0 0 2px #f0c060; }
.source-trade-materials { display: grid; grid-template-columns: repeat(6, 36px); grid-auto-rows: 50px; width: 216px; margin: 0 auto; }
.source-trade-materials > button { position: relative; width: 36px; height: 50px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: #191107; color: #f0c060; cursor: pointer; overflow: hidden; }
.source-trade-materials > button:hover, .source-trade-materials > button.act { box-shadow: inset 0 0 0 2px #f0c060; z-index: 1; }
.source-trade-material-icon { width: 36px; height: 36px; flex-basis: 36px; image-rendering: pixelated; }
.source-trade-materials b { display: block; height: 14px; line-height: 14px; font-size: 11px; font-variant-numeric: tabular-nums; }
.source-trade-adjust { display: flex; width: 216px; height: 36px; margin: 6px auto 10px; }
.source-trade-adjust button { min-width: 36px; padding: 0; border: 0; border-radius: 0; background-color: transparent; background-repeat: no-repeat; image-rendering: pixelated; cursor: pointer; }
.source-trade-adjust button:hover { box-shadow: inset 0 0 0 2px #f0c060; }
.source-trade-adjust button:disabled { opacity: .38; cursor: default; box-shadow: none; }
.goods-shell { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-color: #6b5432 #14100a; }
.goods-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-bottom: 8px; background: #161006; }
.goods-tabs button { min-width: 0; height: 36px; border: 1px solid #6b5432; border-radius: 5px; background: #241a0e; color: #d8c9a7; cursor: pointer; font-size: 18px; line-height: 1; }
.goods-tabs button.act { background: #4a3a22; border-color: #f0c060; color: #f0c060; box-shadow: inset 0 -2px 0 #c8a24a; }
.goods-panel { width: 100%; min-width: 0; }
.material-icon { display: block; width: 36px; height: 36px; flex: 0 0 36px; background-color: #191107; background-repeat: no-repeat; overflow: hidden; }
.material-icon.unavailable { display: flex; align-items: center; justify-content: center; border: 1px dashed #6b5432; color: #a89670; font-size: 8px; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.material-inventory { display: grid; grid-template-columns: repeat(6, 36px); grid-auto-rows: 49px; gap: 5px 4px; width: 236px; max-width: 100%; }
.inventory-item { width: 36px; height: 49px; min-width: 0; text-align: center; }
.inventory-item b { display: block; height: 13px; color: #f0c060; font-size: 11px; line-height: 13px; font-variant-numeric: tabular-nums; overflow: hidden; }
.production-panel .bcat { margin-top: 2px; }
.production-weapons-title { margin-top: 8px !important; }
.production-row { display: grid; grid-template-columns: 36px 22px 24px minmax(54px, 1fr); align-items: center; gap: 5px; height: 38px; min-width: 0; }
.production-row > span:first-child { display: block; width: 36px; height: 36px; }
.production-count { color: #f0c060; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.production-arrows { display: grid; grid-template-rows: 18px 18px; width: 24px; height: 36px; }
.production-arrows button { min-width: 0; min-height: 0; padding: 0; border: 1px solid #6b5432; background: #33270f; color: #f0e0b8; font-size: 14px; line-height: 15px; cursor: pointer; }
.production-arrows button:first-child { border-radius: 4px 4px 0 0; }
.production-arrows button:last-child { border-top: 0; border-radius: 0 0 4px 4px; }
.material-bar { position: relative; height: 14px; min-width: 0; border: 1px solid #79613b; border-radius: 2px; background: #120d07; box-shadow: inset 0 0 0 2px #2b2112; cursor: pointer; touch-action: none; overflow: hidden; }
.material-bar::after { content: ''; position: absolute; inset: 2px 7%; border-left: 1px solid rgba(216,201,167,.28); border-right: 1px solid rgba(216,201,167,.28); pointer-events: none; }
.material-bar > span { position: absolute; inset: 2px auto 2px 0; max-width: 100%; background: #00c7c7; pointer-events: none; }
.material-bar:focus-visible { outline: 2px solid #f0c060; outline-offset: 2px; }
.material-priority-grid { display: grid; grid-template-columns: repeat(6, 36px); grid-template-rows: repeat(6, 36px); gap: 4px; width: 236px; max-width: 100%; }
.material-priority-item { position: relative; width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 2px; background: #191107; box-shadow: inset 0 0 0 1px transparent; overflow: hidden; cursor: pointer; transition: box-shadow .12s, background .12s, transform .3s; }
.material-priority-item:hover { box-shadow: inset 0 0 0 1px #8a6b3c; }
.material-priority-item.selected { background: #4a3a22; box-shadow: inset 0 0 0 2px #f0c060; }
.material-priority-item:active { transform: scale(.94); }
.stock-dot { position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; border: 1px solid rgba(0,0,0,.75); border-radius: 50%; box-shadow: 0 0 2px #000; }
.stock-dot.accept { background: #45c64a; }
.stock-dot.reject { background: #d23d31; }
.priority-controls { display: grid; grid-template-columns: repeat(6, 36px); gap: 4px; width: 236px; max-width: 100%; margin-top: 9px; }
.priority-controls button { min-width: 0; width: 36px; height: 36px; border: 1px solid #6b5432; border-radius: 4px; background: #33270f; color: #f0e0b8; font-size: 18px; cursor: pointer; }
.priority-controls button:disabled { opacity: .35; cursor: default; }
.distribution-layout { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.distribution-materials { display: flex; flex-direction: column; gap: 4px; }
.distribution-materials button { width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 2px; background: #191107; box-shadow: inset 0 0 0 1px transparent; overflow: hidden; cursor: pointer; }
.distribution-materials button:hover { box-shadow: inset 0 0 0 1px #8a6b3c; }
.distribution-materials button.act { background: #4a3a22; box-shadow: inset 0 0 0 2px #f0c060; }
.distribution-rows { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 1px; }
.distribution-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px 6px; align-items: center; min-width: 0; font-size: 11px; }
.distribution-row > span { min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
.distribution-row > b { color: #f0c060; text-align: right; font-variant-numeric: tabular-nums; }
.distribution-row .material-bar { grid-column: 1 / -1; width: 100%; }
.menu-btn.small.danger { background: rgba(90,25,20,.9); border-color: #7d6236; }
/* pływające przyciski + selekcja jednostki */
#drawerBtn { position: absolute; left: 282px; top: 10px; padding: 8px 12px; background: rgba(20,14,6,.92); border: 1px solid #6b5432; color: #f0c060; border-radius: 8px; cursor: pointer; min-height: 42px; font-size: 18px; z-index: 7; pointer-events: auto; }
#cancel-place { position: absolute; left: 282px; top: 60px; padding: 8px 12px; background: #7a2a1f; border: 1px solid #6b5432; color: #f0e0b8; border-radius: 8px; cursor: pointer; z-index: 7; pointer-events: auto; }
#sel { position: absolute; left: 282px; bottom: 10px; background: rgba(20,14,6,.94); border: 1px solid #6b5432; border-radius: 8px; padding: 10px 16px; font-size: 15px; max-width: 50vw; z-index: 6; pointer-events: auto; }
#sel:empty { display: none; }
#sel.ship-selection { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 10px; min-width: 174px; }
#sel .ship-summary { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
#sel .ship-summary span { color: #cdbf9f; font-size: 12px; white-space: nowrap; }
#sel .ship-unload { width: 38px; height: 38px; min-width: 38px; padding: 0; border: 1px solid #8a6b3c; border-radius: 4px; background: #33270f; color: #f0c060; font-size: 23px; line-height: 1; cursor: pointer; }
#sel .ship-unload:disabled { opacity: .42; cursor: default; }
#sel.mage-selection { max-width: 360px; }
#sel .mage-head { margin-bottom: 6px; }
#sel .spell-grid { display: flex; flex-wrap: wrap; gap: 5px; max-width: 344px; }
#sel .spell-btn { display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: #2a1f12; color: #e9dcc2; border: 1px solid #6a5228; border-radius: 5px; font-size: 12px; cursor: pointer; }
#sel .spell-btn:hover:not(:disabled) { border-color: #f0c060; }
#sel .spell-btn.active { background: #4a3410; border-color: #f0c060; color: #ffd873; }
#sel .spell-btn small { color: #b79b5f; font-weight: 700; }
#sel .spell-btn:disabled { opacity: .4; cursor: default; }
#sel .spell-hint { margin-top: 7px; font-size: 12px; color: #a89670; }
#sel .spell-hint.armed { color: #ffd873; }
#menu-pop { position: absolute; left: 8px; bottom: 64px; display: flex; flex-direction: column; gap: 8px; background: rgba(20,14,6,.98); border: 1px solid #6b5432; border-radius: 8px; padding: 12px; width: 248px; z-index: 8; }
#menu-pop.hidden { display: none; }
#menu-pop label { font-size: 13px; color: #e8dcc4; display: flex; flex-direction: column; gap: 3px; }
#menu-pop input[type=range] { width: 100%; accent-color: #c8a24a; }
#mm-exit { background: rgba(90,25,20,.9) !important; color: #f0e0b8; border: 1px solid #7d6236; border-radius: 6px; padding: 8px; cursor: pointer; }
#mm-fs { background: #33270f; color: #f0e0b8; border: 1px solid #7d6236; border-radius: 6px; padding: 8px; cursor: pointer; }
#chatlog { position: absolute; left: 282px; top: 62px; font-size: 13px; text-shadow: 0 1px 2px #000; max-width: 40vw; z-index: 6; }
#chatlog div { margin: 2px 0; background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 4px; }

/* touch: panel boczny domyślnie zsunięty w lewo (poza uchwytem), #drawerBtn go wysuwa */
html.touch #panel { transform: translateX(-100%); transition: transform .18s; width: 84vw; max-width: 340px; }
html.touch #panel.open { transform: none; }
html.touch #drawerBtn { left: 10px; }
html.touch #cancel-place { left: 10px; top: 60px; }
html.touch #sel { left: 10px; max-width: 74vw; font-size: 15px; }
html.touch #chatlog { left: 10px; }
@media (orientation: landscape) and (max-height: 500px) {
  html.touch #mini-slot { flex: 0 0 92px; height: 92px; overflow: hidden; }
  html.touch #mini-slot #minimap { width: 100%; height: 84px; object-fit: contain; }
}
.hidden { display: none !important; }