:root {
  --panel: rgba(18, 16, 14, 0.88);
  --panel2: rgba(36, 32, 28, 0.92);
  --edge: #5a4c3a;
  --edge2: #8a7556;
  --text: #d8cdb8;
  --dim: #8f8471;
  --gold: #e8c46a;
  --green: #3f8f2f;
  --green2: #2c6a22;
  --red: #a02a1e;
  --yellow: #c7a42c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1612; color: var(--text);
  font: 12px/1.35 "Trebuchet MS", Verdana, sans-serif; user-select: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
#overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.hidden { display: none !important; }

.panel { background: var(--panel); border: 1px solid var(--edge); box-shadow: 0 0 0 1px #000 inset; }
button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--edge); cursor: pointer; }
button:hover { border-color: var(--edge2); color: #fff; }
button.on { background: #3b3326; color: var(--gold); border-color: var(--edge2); }

#loading { position: fixed; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--gold); background: #120f0c; z-index: 50; }

#selbox { position: fixed; border: 1px solid #9fe07f; background: rgba(120, 220, 90, 0.12); display: none; pointer-events: none; }
#selbox.attack { border-color: #ff5040; background: rgba(255, 60, 40, 0.14); }

#banner { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); padding: 10px 26px; font-size: 18px; color: var(--gold);
  background: rgba(10, 8, 6, 0.85); border: 1px solid var(--edge2); display: none; text-align: center; letter-spacing: 1px; }
#banner.raid { color: #ff7a5c; border-color: #a33; }

#tooltip { position: fixed; pointer-events: none; padding: 3px 8px; background: rgba(0,0,0,.8); border: 1px solid var(--edge); color: #ffe; display: none; white-space: nowrap; }
#tooltip .o { color: #ff9040; } #tooltip .y { color: #ffff00; } #tooltip .c { color: #00ffff; }

#resources { position: fixed; top: 8px; right: 8px; padding: 6px 10px; display: flex; gap: 14px; }
#resources span b { color: var(--gold); font-weight: normal; }
#money { padding: 3px 10px; color: var(--dim); display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
#money b { color: #ffd040; font-size: 15px; font-weight: normal; }
#win-loot { left: 50%; transform: translateX(-50%); }
/* looting: inventory on the left, the container right beside it (Kenshi style) */
body.looting #win-inv { left: auto; right: calc(50% + 4px); }
body.looting #win-loot { left: calc(50% + 4px); transform: none; }
#win-trade { left: 50%; transform: translateX(-50%); }
.xfer { display: flex; gap: 14px; align-items: flex-start; }
.storelist { display: flex; flex-wrap: wrap; gap: 3px; width: 312px; max-height: 340px; overflow-y: auto; }
.storeitem { position: relative; width: 44px; height: 44px; background: linear-gradient(#3a3226, #2a241b); border: 1px solid #000; cursor: pointer; }
.storeitem { box-sizing: border-box; padding: 3px; }
.storeitem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.storeitem .cnt { position: absolute; right: 2px; bottom: 0; font: bold 11px Arial; color: #fff; text-shadow: 1px 1px 0 #000; }
.storeitem:hover, .crlist button:hover { outline: 1px solid #e8c46a; }
#win-craft { left: 50%; transform: translateX(-50%); width: 560px; }
.crtabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.crtabs button.on, .crlist button.on, #crrepeat.on { background: #6a5a30; color: #ffe080; }
.crwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crlist { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.crlist button { display: flex; align-items: center; gap: 6px; text-align: left; padding: 2px 4px; }
.crlist button img { width: 22px; height: 22px; object-fit: contain; }
.crlist button span { flex: 1; }
.crlist button.locked { opacity: 0.5; }
.crqueue { min-height: 120px; max-height: 220px; overflow-y: auto; background: rgba(0, 0, 0, 0.35); border: 1px solid #000; padding: 3px; margin-bottom: 4px; }
.crqueue > div { display: flex; gap: 6px; align-items: center; padding: 1px 2px; }
.crqueue > div span:first-child { flex: 1; }
.crqueue > div.cur span:first-child { color: #7fd060; }
#crrepeat { width: 100%; }
.crinfo { margin: 8px 0 4px; padding: 6px; background: rgba(0, 0, 0, 0.3); border: 1px solid #000; min-height: 60px; }
.crinfo td:first-child { color: #c8b890; padding-right: 10px; vertical-align: top; }
.cradd { margin-top: 5px; display: flex; gap: 3px; align-items: center; }
.armrow { display: flex; gap: 6px; font-size: 11px; margin-top: 3px; align-items: center; }
.armrow em.arm { font-style: normal; display: inline-block; width: 13px; text-align: center; border-radius: 2px; color: #000; font-weight: bold; font-size: 10px; }
.armrow em.arm.melee { background: #c9c9c9; } .armrow em.arm.ranged { background: #7fbf5a; } .armrow em.arm.magic { background: #6f8fe8; }
.armrow span:nth-of-type(1) { width: 44px; }

#help { position: fixed; top: 8px; left: 8px; padding: 6px 10px; color: var(--dim); max-width: 520px; }
#help b { color: var(--text); }

/* ---- bottom hud */
#hud { position: fixed; left: 0; right: 0; bottom: 0; height: 200px; display: flex; gap: 6px; padding: 0 6px 6px; pointer-events: none; align-items: flex-end; }
#hud > * { pointer-events: auto; }

#charpanel { width: 470px; height: 196px; display: flex; flex-direction: column; }
#charpanel .hdr { display: flex; justify-content: space-between; padding: 4px 8px; background: var(--panel2); border-bottom: 1px solid var(--edge); color: var(--gold); }
#cp-faction { color: var(--text); }
#cp-body { display: flex; flex: 1; min-height: 0; }
#cp-left { width: 190px; padding: 4px 8px; overflow-y: auto; border-right: 1px solid var(--edge); }
#cp-state div { display: flex; justify-content: space-between; color: var(--dim); }
#cp-state div span:last-child { color: var(--text); }
#cp-skills { margin-top: 4px; border-top: 1px solid #3a3128; padding-top: 3px; }
.skill { display: grid; grid-template-columns: 1fr 26px; align-items: center; text-transform: uppercase; font-size: 11px; }
.skill .lvl { text-align: right; color: var(--gold); }
.skill .xpbar { grid-column: 1 / 3; height: 2px; background: #2a241c; margin-bottom: 2px; }
.skill .xpbar i { display: block; height: 100%; background: #6b9cd6; }
.skill.flash .lvl { color: #8f8; }
#cp-health { flex: 1; padding: 4px 8px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.hbar { position: relative; height: 16px; background: #1d1a16; border: 1px solid #3c342a; }
.hbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#4aa33a, #2d6e22); }
.hbar i.mid { background: linear-gradient(#c9a32e, #8a6d18); }
.hbar i.low { background: linear-gradient(#c43b2a, #7e1d12); }
.hbar span { position: relative; display: flex; justify-content: space-between; padding: 0 6px; font-size: 11px; line-height: 14px; color: #f2ead8; text-shadow: 1px 1px 0 #000; }

#squad { flex: 1; height: 180px; display: flex; flex-direction: column; min-width: 0; }
#tabs { display: flex; gap: 2px; padding-left: 4px; }
.tab { padding: 3px 28px; background: var(--panel2); border: 1px solid var(--edge); border-bottom: none; color: var(--dim); }
.tab.active { color: var(--text); background: #3a3228; }
#portraits { flex: 1; background: var(--panel); border: 1px solid var(--edge); padding: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; overflow-y: auto; }
.port { width: 66px; height: 82px; border: 1px solid #4b4033; background: #26211b; cursor: pointer; position: relative; display: flex; flex-direction: column; }
.port img { width: 64px; height: 56px; display: block; image-rendering: pixelated; background: radial-gradient(#5a5146, #221d18); }
.port .pn { font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; background: rgba(0,0,0,.6); }
.port .ph { position: relative; height: 6px; margin: 1px 2px 2px; background: #3a1410; }
.port .ph i { display: block; height: 100%; background: #46a634; }
.port.sel { border-color: #9fe07f; box-shadow: 0 0 0 1px #9fe07f; }
.port.dropl { box-shadow: -3px 0 0 #e8c868; }
.port.dropr { box-shadow: 3px 0 0 #e8c868; }
#tabs .tab.over { background: #5a4a20; color: #ffe08a; }
.port.ko img { filter: grayscale(1) brightness(.5); }
.port.ko::after { content: attr(data-ko); position: absolute; top: 18px; left: 0; right: 0; text-align: center; color: #f55; font-weight: bold; }
.port .job { position: absolute; top: 1px; right: 2px; font-size: 10px; color: var(--gold); text-shadow: 1px 1px 0 #000; }

#rightcol { width: 330px; display: flex; flex-direction: column; gap: 6px; }
#timebar { display: flex; gap: 4px; align-items: stretch; height: 40px; }
#speeds { display: flex; gap: 2px; }
#speeds button { width: 36px; font-size: 11px; }
#clock { flex: 1; padding: 3px 8px; font-size: 11px; display: flex; flex-direction: column; justify-content: center; }
#clock b { color: var(--gold); font-weight: normal; }
#buildbtn { width: 44px; font-size: 22px; }
#jobpanel { height: 150px; display: flex; }
#stances { width: 92px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-right: 1px solid var(--edge); }
#stances button { text-align: left; padding: 2px 6px; font-size: 11px; }
#stances button::before { content: '● '; color: #555; }
#stances button.on::before { color: #7fd060; }
#jobs { flex: 1; display: flex; flex-direction: column; padding: 4px; min-width: 0; }
#joblist { flex: 1; overflow-y: auto; }
.jobrow { display: flex; align-items: center; gap: 4px; padding: 2px 4px; background: #231e18; border: 1px solid #3a3128; margin-bottom: 2px; }
.jobrow.active { border-color: #7fd060; background: #26301e; }
.jobrow.active span::after { content: ' ◀ working'; color: #7fd060; font-size: 10px; }
.jobrow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobrow button { padding: 0 5px; font-size: 10px; }
#jobadd { display: flex; flex-wrap: wrap; gap: 2px; border-top: 1px solid #3a3128; padding-top: 3px; }
#jobadd button { font-size: 10px; padding: 1px 5px; }
.empty { color: var(--dim); padding: 4px; }

#togetherbtn { font-size: 11px; padding: 2px 10px; }
#tosquad { margin-left: auto; font-size: 11px; background: var(--panel2); color: var(--text); border: 1px solid var(--edge); }
.tab { cursor: pointer; white-space: nowrap; }
.tab small { color: var(--dim); font-size: 10px; }
.tab.addtab { padding: 3px 10px; color: var(--gold); }
.port .sq { position: absolute; top: 1px; left: 2px; max-width: 60px; overflow: hidden; white-space: nowrap; font-size: 9px; padding: 0 3px; background: #3b5a8a; color: #fff; border-radius: 2px; }
.port .sq.base { background: #5a6a2a; }
.port.dead img { filter: grayscale(1) brightness(.35) sepia(.6) hue-rotate(-30deg); }
.port.dead::after { content: '✕'; position: absolute; top: 0; left: 0; right: 0; text-align: center; color: #e01818; font-size: 44px; line-height: 56px; font-weight: bold; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.port.dead .ph { visibility: hidden; }
#recallbtn { margin-left: 6px; font-size: 10px; padding: 0 5px; color: #ff9a7a; border-color: #a33; }
#ctxmenu { position: fixed; z-index: 40; min-width: 230px; display: flex; flex-direction: column; padding: 3px; }
#ctxmenu .ctxhead { color: var(--gold); padding: 3px 6px; border-bottom: 1px solid var(--edge); margin-bottom: 2px; }
#ctxmenu button { text-align: left; border: none; background: none; padding: 4px 8px; }
#ctxmenu button:hover { background: #3b3326; }
#ctxmenu button.job { color: #9fe07f; }
#ctxmenu button.danger { color: #ff8a70; }

/* ---- grid inventory (Kenshi style) */
.invwrap { display: flex; gap: 10px; align-items: flex-start; }
/* Kenshi-style: every empty cell is clearly visible as its own little box */
/* cell size comes from --c (set inline with the grid); the grid is 2px bigger than its cells so the last
   column/row get their closing line, and items are inset by those 2px lines (see cellBox in game.js) */
.invgrid { --c: 30px; position: relative; box-sizing: content-box; background:
    linear-gradient(#0c0a08 2px, transparent 2px) 0 0 / var(--c) var(--c),
    linear-gradient(90deg, #0c0a08 2px, transparent 2px) 0 0 / var(--c) var(--c),
    linear-gradient(135deg, #2c2721, #221e19) 0 0 / var(--c) var(--c);
  border: 1px solid #5b4d3c; flex: none; }
.invitem { background: rgba(70, 58, 42, 0.85); box-shadow: inset 0 0 0 1px #6b5a42; }
.invitem { position: absolute; box-sizing: border-box; display: grid; place-items: center; padding: 2px; cursor: grab; border: 1px solid transparent; overflow: hidden; }
.invghost { box-sizing: border-box; }
.amtbar { display: flex; gap: 3px; align-items: center; margin-top: 6px; font-size: 11px; }
.amtbar button { padding: 1px 7px; font-size: 11px; }
.amtbar button.on, .amtbar input.on { outline: 1px solid #e8c46a; color: #ffe08a; }
.amtbar input { width: 52px; font-size: 11px; background: #1d1912; color: #eee; border: 1px solid #5b4d3c; padding: 1px 3px; }
.invitem:hover { border-color: #8a7556; background: rgba(255,255,255,0.04); }
.invitem img { max-width: 100%; max-height: 100%; pointer-events: none; image-rendering: auto; }
.invitem .cnt { position: absolute; right: 2px; bottom: 0; font: bold 11px Arial; color: #fff; text-shadow: 1px 1px 0 #000; }
.invitem.drag { opacity: 0.4; }
.invghost { position: absolute; border: 1px solid #7fd060; background: rgba(127, 208, 96, 0.15); pointer-events: none; }
.invghost.bad { border-color: #d04030; background: rgba(208, 64, 48, 0.15); }
.invbar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.eqcol { flex: 1; min-width: 260px; }
.supplies { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 6px; width: 240px; font-size: 10px; }
.supplies button { font-size: 10px; padding: 1px 4px; }
#win-inv { width: 600px; }
#win-inv .wb { overflow-x: hidden; }
.invitem img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }

#sidebtns { display: flex; flex-direction: column; gap: 3px; height: 180px; justify-content: flex-end; }
#sidebtns button { width: 44px; height: 30px; font-size: 11px; letter-spacing: 1px; }

/* armour tags & limb status on health bars */
.hbar em { font-style: normal; font-size: 10px; }
.hbar em.arm { display: inline-block; width: 13px; text-align: center; margin-right: 4px; border-radius: 2px; color: #000; font-weight: bold; }
.hbar em.arm.melee { background: #c9c9c9; } .hbar em.arm.ranged { background: #7fbf5a; } .hbar em.arm.magic { background: #6f8fe8; }
.hbar em.down { color: #ff7060; }
/* hp on its way from food being digested: a pulsing blue stretch right after the real hp */
.heal { position: absolute; top: 0; bottom: 0; display: block; background: linear-gradient(#7cc8ff, #3a8fd8); animation: healpulse 0.9s ease-in-out infinite alternate; pointer-events: none; }
.hbar .heal { z-index: 0; }
@keyframes healpulse { from { opacity: 0.55; } to { opacity: 1; } }
.hbar em.healing { color: #8fd0ff; }

/* ---- floating windows (C stats / I inventory / M map) */
.win { position: fixed; top: 70px; z-index: 20; display: flex; flex-direction: column; max-height: calc(100vh - 290px); }
#win-stats { left: 12px; width: 420px; }
#win-inv { left: 440px; width: 600px; }
#win-map { left: 50%; transform: translateX(-50%); max-height: none; }
#win-fac { right: 12px; width: 380px; }
/* multiplayer: no pause, no fast-forward (the clock stays visible) */
body.mp #speeds button { display: none; }
/* the home screen */
#home { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #3a3020 0%, #15110c 75%); color: #e6dcc6; }
#home .hm { width: min(720px, calc(100vw - 32px)); text-align: center; }
#home h1 { font-size: 40px; color: #e8c868; margin: 0 0 14px; text-shadow: 0 2px 0 #000; letter-spacing: 1px; }
#home .hm-acc { background: rgba(0, 0, 0, 0.35); border: 1px solid #5a4c38; padding: 10px; margin-bottom: 14px; }
#home .hm-form { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
#home .hm-form input { background: #2a241c; color: #f0e2c0; border: 1px solid #5a4c38; padding: 5px 8px; width: 160px; }
#home .hm-msg { color: #ff9a7a; margin-top: 6px; }
#home .hm-modes { display: flex; gap: 12px; flex-wrap: wrap; }
#home .hm-mode { flex: 1 1 280px; background: rgba(0, 0, 0, 0.35); border: 1px solid #5a4c38; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#home .hm-mode h2 { margin: 0; color: #f0e2c0; }
#home .hm-mode button { padding: 9px; font-size: 14px; }
/* a new game: choose your path */
#pathpick { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
#pathpick .pp { background: #2e281f; border: 1px solid #8a7a5c; padding: 16px 18px; width: min(620px, calc(100vw - 32px)); text-align: center; color: #e6dcc6; }
#pathpick h2 { margin: 0 0 4px; color: #e8c868; }
#pathpick .ppopts { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
#pathpick .ppopts button { flex: 1 1 160px; padding: 12px 10px; text-align: center; }
#pathpick .ppopts b { display: block; font-size: 16px; color: #f0e2c0; margin-bottom: 4px; }
#pathpick .ppopts small { color: #b8ad96; }
#win-barber.start .x { display: none; }   /* making a new character: Begin is the only way out */
/* the barber's Character Creator (as in RS) */
#win-barber { left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); }
.cc-name { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-name input { flex: 1; background: #2a241c; color: #f0e2c0; border: 1px solid #5a4c38; padding: 3px 6px; font-size: 13px; }
.cc { display: grid; grid-template-columns: 1fr 170px 1fr; gap: 8px; }
.cc h4 { margin: 0 0 4px; text-align: center; color: #e8c868; }
.cc-col { border: 1px solid #5a4c38; background: rgba(0, 0, 0, 0.25); padding: 6px; }
.cc-row { display: flex; align-items: center; justify-content: space-between; margin: 3px 0; }
.cc-row span { flex: 1; text-align: center; color: #e8c868; font-size: 12px; }
.cc-row button { width: 34px; padding: 1px 0; font-size: 14px; }
.cc-row button:disabled { opacity: 0.3; }
.cc-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cc-mid canvas { width: 160px; height: 230px; border: 1px solid #5a4c38; background: radial-gradient(#3a3226, #1a1612); }
.cc-mid button { width: 100%; }
.cc-gender { display: flex; gap: 4px; margin-top: 8px; }
.cc-gender button { flex: 1; }
.cc-gender button.on { background: #6a5a38; color: #fff2c8; }
@media (max-width: 520px) { .cc { grid-template-columns: 1fr; } }
/* the squads window (as in Kenshi): one box per squad, portraits inside, drag them from box to box */
#win-squads { left: 50%; transform: translateX(-50%); width: min(680px, calc(100vw - 32px)); }
#win-squads .wb { overflow-y: auto; }
.sqtop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sqrow { border: 1px solid #5a4c38; background: rgba(0, 0, 0, 0.25); margin-bottom: 8px; }
.sqrow.over { border-color: #e8c868; background: rgba(232, 200, 104, 0.12); }
.sqhead { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255, 255, 255, 0.04); }
.sqhead input { flex: 1; max-width: 220px; background: #2a241c; color: #f0e2c0; border: 1px solid #5a4c38; padding: 2px 6px; }
.sqhead .sqn { margin-left: auto; color: #b8ad96; font-size: 11px; }
.sqhead button.danger { color: #ffb0a0; }
.sqmem { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; min-height: 76px; align-items: flex-start; }
.sqp { width: 64px; cursor: grab; text-align: center; font-size: 10px; color: #e6dcc6; }
.sqp img { width: 64px; height: 56px; object-fit: cover; display: block; border: 1px solid #5a4c38; background: #1a1612; }
.sqp.sel img { border-color: #e8c868; }
.sqp span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#win-market { left: 50%; transform: translateX(-50%); width: 470px; }
.mkhead { margin-bottom: 6px; font-size: 12px; } .mkhead b { color: #ffd040; font-weight: normal; }
table.mk { width: 100%; border-collapse: collapse; font-size: 12px; }
table.mk th { color: var(--dim); font-weight: normal; text-align: left; font-size: 10px; }
table.mk td { padding: 1px 3px; border-bottom: 1px solid #2e2820; }
table.mk .n { text-align: right; } table.mk td.b { white-space: nowrap; text-align: right; }
table.mk td.b button { font-size: 10px; padding: 1px 5px; margin-left: 2px; }
img.mki { width: 24px; height: 24px; image-rendering: pixelated; display: block; }
.fac { padding: 6px 2px; border-bottom: 1px solid #3a3128; }
.fac .fh { display: flex; justify-content: space-between; font-size: 13px; }
.fac .fbar { position: relative; height: 8px; margin: 5px 0; border: 1px solid #000;
    background: linear-gradient(90deg, #a02020, #a06020 30%, #6a6a6a 50%, #508a40 70%, #30b030); }
.fac .fmid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #000; }
.fac .fpin { position: absolute; top: -3px; width: 6px; height: 12px; margin-left: -3px; border: 1px solid #000; }
.fac .fd { font-size: 11px; color: #bba; }
.fac .fn { font-size: 11px; color: var(--gold); margin-top: 2px; }
.win .ptitle { display: flex; align-items: center; gap: 8px; }
.win .ptitle .x { margin-left: auto; padding: 0 6px; }
.win .wb { padding: 8px; overflow-y: auto; }
.win h4 { margin: 8px 0 4px; color: var(--gold); font-weight: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; border-bottom: 1px solid #3a3128; }
.win table { width: 100%; border-collapse: collapse; font-size: 11px; }
.win td { padding: 2px 4px; border-bottom: 1px solid #2a241c; }
.win td.n { text-align: right; color: var(--gold); }
.win .good { color: #8fe070; } .win .bad, #cp-state .bad { color: #ff7a5c !important; } .win .dim { color: var(--dim); }
.slotrow { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; margin-bottom: 4px; }
.slotrow select, #jobadd select { width: 100%; background: #1d1a16; color: var(--text); border: 1px solid var(--edge); font: inherit; padding: 2px; }
#mapcv { display: block; image-rendering: pixelated; }

/* ---- build menu */
#buildmenu { position: fixed; right: 8px; bottom: 248px; width: 330px; max-height: min(420px, calc(100vh - 330px)); display: flex; flex-direction: column; }
.ptitle { padding: 5px 8px; background: var(--panel2); border-bottom: 1px solid var(--edge); color: var(--gold); }
.ptitle .hint { color: var(--dim); font-size: 10px; margin-left: 6px; }
#buildtabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; }
#buildtabs button { font-size: 11px; padding: 2px 8px; }
#builditems { overflow-y: auto; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
#builditems button { text-align: left; padding: 4px 6px; }
#builditems button small { display: block; color: var(--dim); font-size: 10px; }
#builditems button small.cost { color: #e8c868; }
#builditems button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- world overlays */
/* the real 2004scape hitmarks sprite: blue = miss, red = damage, green = poison (25×25 each) */
/* the splat art is 24x23 at the top left of each 25px cell: the box matches it so the number sits in the middle */
.hit { position: absolute; width: 24px; height: 23px; margin: -12px 0 0 -12px; display: flex; align-items: center; justify-content: center;
  font: bold 11px/1 Arial; color: #fff; text-shadow: 1px 1px 0 #000; padding: 0 1px 0 0; box-sizing: border-box; text-align: center;
  background: url(../assets/sprites/hitmarks.png) no-repeat; image-rendering: pixelated; }
.hit.miss { background-position: 0 0; }
.hit.dmg { background-position: -25px 0; }
.hit.poison { background-position: -50px 0; }
.ohp { position: absolute; overflow: hidden; width: 34px; height: 5px; margin-left: -17px; background: #c00; border: 1px solid #000; }
.ohp i { display: block; height: 100%; background: #0c0; }
.olabel { position: absolute; transform: translate(-50%, -100%); font-size: 11px; color: #ffff00; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.olabel.enemy { color: #ff6050; }
.olabel.wander { color: #9fe0ff; }
.chat { position: absolute; transform: translate(-50%, -100%); color: #ffff00; font: bold 12px Arial; text-shadow: 1px 1px 0 #000; white-space: nowrap; }

/* ---- equipment paper doll (Kenshi style): drop gear from the pack onto a slot, click a slot to take it off */
.doll { display: grid; grid-template-columns: repeat(3, 54px); grid-auto-rows: 54px; gap: 4px; margin: 4px 0 6px;
  grid-template-areas: "cape hat neck" "weapon torso lefthand" "hands legs ring" ". feet ."; }
.eqslot { position: relative; border: 1px solid #5b4d3c; background: linear-gradient(135deg, #2c2721, #1c1915); display: grid; place-items: center; cursor: pointer; }
.eqslot span { font-size: 9px; color: #6f6452; text-transform: uppercase; letter-spacing: 1px; }
.eqslot img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.eqslot.full { background: rgba(70, 58, 42, 0.85); box-shadow: inset 0 0 0 1px #6b5a42; }
.eqslot:hover { border-color: #e8c46a; }
details.dbg { margin: 2px 0 4px; font-size: 10px; color: var(--dim); }
details.dbg summary { cursor: pointer; }

/* ---- shop / stall windows */
#win-shop { left: 50%; transform: translateX(-50%); width: 760px; }
.shopcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shopcols > div { max-height: 400px; overflow-y: auto; }
.stallcfg { margin-top: 8px; }
.stallcfg input, .cradd input { width: 52px; font-size: 11px; background: #1d1912; color: #eee; border: 1px solid #5b4d3c; padding: 1px 3px; }
.stallcfg select { background: #1d1912; color: var(--text); border: 1px solid var(--edge); font: inherit; max-width: 200px; }

/* ---- jobs switched off, map controls, build rotation */
.jobrow.off span { color: #6f6452; text-decoration: line-through; }
.jobrow small { font-size: 9px; }
#win-map { width: 700px; }
#mapcv { width: 680px; height: 560px; cursor: grab; }
.mapbtns { margin-left: 8px; display: inline-flex; gap: 2px; }
.mapbtns button { font-size: 11px; padding: 0 6px; }
#rotbar { float: right; display: inline-flex; gap: 3px; align-items: center; }
#rotbar button { padding: 0 6px; }
#rotbar #demolish { margin-right: 8px; }
#rotbar #demolish.on { background: #7a2a1a; color: #ffd8c0; border-color: #c05030; }
#rotdeg { min-width: 30px; text-align: center; color: var(--text); font-size: 11px; }

/* item card on hover (Kenshi style) */
#itemtip { position: fixed; z-index: 10000; display: none; pointer-events: none; min-width: 210px; max-width: 290px; padding: 8px 10px;
    background: rgba(48, 42, 34, 0.96); border: 1px solid #8a7a5c; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); color: #d8ccb4; font-size: 12px; line-height: 1.35; }
#itemtip .tname { color: #f0e2c0; font-weight: bold; font-size: 13px; }
#itemtip .tkind { color: #f0d050; margin-bottom: 2px; }
#itemtip .tsep { color: #9a8c70; margin: 3px 0 1px; }
#itemtip table { width: 100%; border-collapse: collapse; }
#itemtip td { padding: 0; color: #b8ad96; }
#itemtip td:last-child { text-align: right; color: #e6dcc6; }
#itemtip td.g { color: #b8e070; }
#itemtip td.r { color: #e07060; }
#itemtip .thint { margin-top: 5px; color: #9a8c70; font-style: italic; }
#home .hm-lobby { text-align: left; background: rgba(0, 0, 0, 0.3); border: 1px solid #4a3e2c; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#home .hm-player { display: inline-block; background: #3a3224; border: 1px solid #5a4c38; padding: 1px 7px; margin: 2px 2px 0 0; }
#home .hm-player.host { border-color: #e8c868; color: #f0d890; }

/* multiplayer chat: bottom left, fades when nobody's talking */
#chatbox { position: fixed; left: 8px; bottom: 215px; width: 380px; max-width: calc(100vw - 16px); z-index: 30; pointer-events: none; font: 12px Arial; }
#chatlog { color: #ffff00; text-shadow: 1px 1px 0 #000; opacity: 0.35; transition: opacity 0.6s; }
#chatlog b { color: #9fe0ff; }
#chatlog .sys { color: #c8b890; }
#chatbox.fresh #chatlog, #chatbox.typing #chatlog { opacity: 1; }
#chatin { display: none; width: 100%; box-sizing: border-box; margin-top: 3px; background: rgba(20, 16, 12, 0.85); border: 1px solid #6b5a42; color: #fff; padding: 4px 6px; pointer-events: auto; }
#chatbox.typing #chatin { display: block; }
#tooltip .tstat { font-size: 11px; color: #e8dcc0; margin-top: 2px; }

/* the tutorial: a guide box above the bottom bar (like the old chatbox instructions), and RS's bobbing hint arrow */
#tutorial { position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%); width: 520px; max-width: calc(100vw - 32px); z-index: 40;
  background: rgba(30, 24, 17, 0.95); border: 2px solid #8a7350; box-shadow: 0 4px 18px rgba(0,0,0,0.6); color: #f2ead8; font-size: 13px; transition: border-color 0.3s; }
#tutorial.ok { border-color: #7fdc5a; }
#tutorial .tth { display: flex; justify-content: space-between; padding: 6px 10px; background: #3a2e20; color: #ffd76a; font-weight: bold; }
#tutorial .tth .dim { color: #b8a684; font-weight: normal; font-size: 11px; }
#tutorial .ttx { padding: 8px 10px; line-height: 1.45; }
#tutorial .ttx b { color: #ffff7a; }
#tutorial .ttb { display: flex; justify-content: space-between; padding: 0 10px 8px; }
#tutorial .ttb button { margin-left: 6px; }
#tutarrow { position: fixed; z-index: 45; width: 25px; height: 25px; pointer-events: none; display: none; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); }
#home .hm-tut { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 10px 14px; background: rgba(60, 48, 30, 0.6); border: 1px solid #8a7350; }
#home .hm-tut h2 { margin: 0 0 2px; } #home .hm-tut p { margin: 0; }
.olabel.player { color: #ffffff; font: bold 11px Arial; pointer-events: none; }
.olabel.player span { color: #7fd8ff; font-weight: normal; }

/* ---- touch screens */
#touchbar, #touchhelp, #rotatehint { display: none; }
body.touch #touchbar { display: flex; flex-direction: column; gap: 3px; position: fixed; left: 6px; top: 50%; transform: translateY(-50%); z-index: 25; padding: 3px; }
#touchbar button { width: 48px; height: 40px; font-size: 18px; line-height: 1; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#touchbar button small { font-size: 9px; color: var(--dim); margin-top: 2px; }
#touchbar button.on small { color: var(--gold); }
#touchbar .bcancel { display: none; color: #ff9a7a; }
body.building #touchbar .bcancel { display: flex; }
body.touch #touchhelp:not(.hidden) { display: block; position: fixed; left: 62px; top: 50%; transform: translateY(-50%); z-index: 60; padding: 10px 14px; max-width: min(620px, calc(100vw - 80px)); font-size: 13px; line-height: 1.6; }
#touchhelp b { color: var(--gold); }
body.touch #help { display: none; }
body.touch canvas, body.touch .port, body.touch .invitem, body.touch .ptitle, body.touch #mapcv, body.touch .eqslot, body.touch .sqp, #touchbar { touch-action: none; }
body.touch { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body.touch #ctxmenu button { padding: 9px 12px; font-size: 13px; }
body.touch .win .ptitle .x { padding: 4px 12px; font-size: 14px; }
body.touch .win .wb { overflow: auto; }
/* nobody wants a hover card that sticks after a tap */
body.touch #itemtip { display: none !important; }
/* phones on their side: a slim bottom bar, the character panel and jobs on demand (the touch bar's Char / Jobs) */
@media (max-height: 640px) {
  body.touch #hud { height: 96px; padding: 0 4px 4px; gap: 4px; }
  body.touch #charpanel { display: none; }
  body.touch.showchar #charpanel { display: flex; position: fixed; left: 60px; bottom: 100px; width: min(470px, calc(100vw - 70px)); height: min(196px, calc(100vh - 110px)); }
  body.touch #squad { height: 92px; }
  body.touch .tab { padding: 2px 10px; font-size: 11px; }
  body.touch #portraits { padding: 3px; gap: 3px; }
  body.touch .port { width: 46px; height: 60px; }
  body.touch .port img { width: 44px; height: 38px; }
  body.touch .port .pn { font-size: 9px; }
  body.touch .port .sq, body.touch .port .job { font-size: 8px; }
  body.touch .port.dead::after { font-size: 30px; line-height: 38px; }
  body.touch #sidebtns { height: 92px; display: grid; grid-template-columns: repeat(2, 42px); grid-auto-rows: 1fr; gap: 2px; }
  body.touch #sidebtns button { width: 42px; height: auto; font-size: 10px; letter-spacing: 0; }
  body.touch #rightcol { width: 270px; gap: 3px; }
  body.touch #money { font-size: 10px; }
  body.touch #money { padding: 2px 8px; }
  body.touch #timebar { height: 52px; }
  body.touch #speeds button { width: 30px; }
  body.touch #clock { font-size: 10px; padding: 2px 5px; }
  body.touch #buildbtn { width: 40px; }
  body.touch #jobpanel { display: none; }
  body.touch.showjobs #jobpanel { display: flex; position: fixed; right: 4px; bottom: 100px; width: min(330px, calc(100vw - 70px)); height: min(170px, calc(100vh - 110px)); }
  body.touch #resources { top: 4px; right: 4px; padding: 3px 8px; gap: 8px; font-size: 11px; }
  body.touch .win { top: 4px; max-height: calc(100vh - 104px); max-width: calc(100vw - 66px); }
  body.touch #win-stats, body.touch #win-inv, body.touch #win-fac { left: 60px; right: auto; }
  body.touch #win-map { max-height: calc(100vh - 104px); }
  body.touch #mapcv { width: min(680px, calc(100vw - 90px)); height: auto; aspect-ratio: 680 / 560; max-height: calc(100vh - 150px); }
  body.touch #win-map { width: auto; }
  body.touch #buildmenu { right: 4px; bottom: 100px; width: min(330px, calc(100vw - 70px)); max-height: calc(100vh - 110px); }
  body.touch #tutorial { bottom: 100px; width: min(520px, calc(100vw - 80px)); font-size: 12px; }
  body.touch #chatbox { bottom: 100px; left: 60px; }
  body.touch #banner { top: 34px; font-size: 13px; padding: 6px 14px; max-width: calc(100vw - 140px); }
  body.touch #touchbar { top: 6px; transform: none; display: grid; grid-template-columns: repeat(2, 42px); grid-auto-rows: 36px; gap: 2px; max-height: calc(100vh - 108px); overflow: hidden; }
  body.touch #touchbar button { height: 36px; width: 42px; font-size: 15px; }
  body.touch.showchar #charpanel { left: 100px; width: min(470px, calc(100vw - 110px)); }
  body.touch .win { max-width: calc(100vw - 106px); }
  body.touch #win-stats, body.touch #win-inv, body.touch #win-fac { left: 100px; }
  body.touch #touchhelp:not(.hidden) { left: 100px; max-width: calc(100vw - 110px); font-size: 12px; line-height: 1.5; }
  body.touch #tutorial { left: calc(50% + 46px); width: min(520px, calc(100vw - 110px)); }
}
/* held upright: the game wants landscape (it still works, if you insist) */
@media (orientation: portrait) and (max-width: 700px) {
  body.touch #rotatehint:not(.gone) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 12, 9, 0.94); color: var(--gold); font-size: 22px; text-align: center; padding: 20px; }
  #rotatehint small { font-size: 13px; color: var(--dim); }
}
/* the build menu's and map's mouse hints don't apply to fingers (the touch bar's Help has the touch ones) */
body.touch #buildmenu .ptitle .hint, body.touch #win-map .ptitle .hint { display: none; }