@font-face { font-family: 'Press Start 2P'; src: url('assets/fonts/press-start-2p.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #15121a;
  --panel: #241c1a;
  --panel2: #2e2421;
  --edge: #4a3a30;
  --edge-hi: #6a5444;
  --line: #0e0a09;
  --text: #f1e9dc;
  --muted: #a99886;
  --gold: #f2c14e;
  --gold-dk: #a8742a;
  --accent: #e8894a;
  --good: #8fdc6a;
  --bad: #ff6b6b;
  --card: #f3e4c4;
  --card-ink: #3a2a1c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; -webkit-user-select: none; user-select: none; }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: var(--text); background: linear-gradient(180deg, #5a4436, #3e2f26); border: 2px solid var(--line); border-radius: 5px; padding: 5px 11px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
button:hover:not(:disabled) { filter: brightness(1.15); }
button:active:not(:disabled):not(.ring-btn) { transform: translateY(1px); }
.ring-btn:active { filter: brightness(.85); }
button:disabled { opacity: .45; cursor: default; }
.gold-btn { color: #3a2208; font-weight: 700; background: linear-gradient(180deg, #ffd978, #e0a83a); border-color: #6a4512; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
input { font: inherit; color: var(--text); background: #171110; border: 2px solid var(--line); border-radius: 5px; padding: 7px 10px; outline: none; }
input:focus { border-color: var(--gold-dk); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.linkish { background: none; border: 0; box-shadow: none; color: var(--muted); text-decoration: underline; padding: 4px; }
.big-btn { font-family: 'Press Start 2P', monospace; font-size: 13px; padding: 14px 20px; color: #3a2208; background: linear-gradient(180deg, #ffd978, #e0a83a); border-color: #6a4512; }
h4 { margin: 10px 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-family: 'Press Start 2P', monospace; font-weight: normal; }

/* dark wooden panel with a thin bronze edge */
.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.5); }

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }

/* ---------- Login ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(21,18,26,.55), rgba(21,18,26,.92)); z-index: 20; padding: 16px; }
.login-box { width: min(440px, 100%); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.logo { font-family: 'Press Start 2P', monospace; font-size: clamp(20px, 7vw, 30px); margin: 0; color: var(--gold); text-shadow: 3px 3px 0 #6a2f12; letter-spacing: 2px; }
.tagline { margin: 0; color: var(--muted); }
.login-box label { display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--muted); }
#newBox, #continueBox { display: flex; flex-direction: column; gap: 12px; }
.looks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.looks canvas { width: 48px; height: 48px; image-rendering: pixelated; background: #171110; border: 2px solid var(--line); border-radius: 6px; cursor: pointer; }
.looks canvas.on { border-color: var(--gold); background: #3a2a20; }
.err { color: var(--bad); min-height: 1.2em; margin: 0; }

/* ---------- Top left: hero ---------- */
#heroCard { position: fixed; top: 10px; left: 10px; z-index: 5; display: flex; align-items: flex-start; }
.portrait-ring { position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #5a4a40, #1c1412); border: 3px solid var(--line); box-shadow: 0 0 0 2px var(--edge-hi), 0 6px 14px rgba(0,0,0,.5); overflow: hidden; display: flex; align-items: center; justify-content: center; }
#portrait { width: 64px; height: 64px; image-rendering: pixelated; margin-top: 6px; }
.lvl-badge { position: absolute; z-index: 3; left: 22px; top: 66px; width: 34px; padding: 2px 0 4px; text-align: center; color: #fff; background: linear-gradient(180deg, #c8402e, #8a2014); border: 2px solid var(--line); border-radius: 4px 4px 10px 10px; box-shadow: 0 3px 6px rgba(0,0,0,.5); line-height: 1; }
.lvl-badge span { display: block; font-size: 8px; letter-spacing: 1px; opacity: .85; }
.lvl-badge b { font-family: 'Press Start 2P', monospace; font-size: 10px; }
.hero-info { margin: 10px 0 0 -14px; padding: 6px 12px 7px 22px; display: flex; flex-direction: column; gap: 5px; min-width: 230px; }
.hero-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero-line b#hudName { font-size: 14px; }
.coins { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--gold); }
.coin-ico { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4b0, #f5d76e 50%, #a8842a); display: inline-block; box-shadow: 0 0 0 1px #2a1f26; }
.hpbar { position: relative; height: 15px; background: #3a0e0e; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.hpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff7a6a, #c02a20); transition: width .25s; }
.hpbar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 13px; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.xpbar { position: relative; height: 15px; background: #120c0a; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8ae07a, #3d9a3a); transition: width .3s; }
.xpbar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 13px; font-weight: 700; text-shadow: 1px 1px 0 #000; white-space: nowrap; }

/* ---------- Top right: map corner ---------- */
#mapCorner { position: fixed; top: 10px; right: 10px; z-index: 5; display: grid; grid-template-columns: auto auto; grid-template-areas: 'bars mini' '. zoom' 'region region' 'clock clock'; align-items: start; gap: 4px 8px; }
#mapCorner .bars { grid-area: bars; margin-top: 12px; }
.hp { position: relative; width: 150px; height: 18px; background: #3a0e0e; border: 2px solid var(--line); border-radius: 9px; overflow: visible; }
.hp i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(180deg, #ff7a6a, #c02a20); transition: width .25s; }
.hp span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 14px; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.hp .heart { position: absolute; right: -14px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a7a, #c02a20 60%, #6a0e0a); border: 2px solid var(--line); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.mini-wrap { grid-area: mini; position: relative; width: 150px; height: 150px; }
#minimap { width: 150px; height: 150px; border-radius: 50%; image-rendering: pixelated; border: 3px solid var(--line); box-shadow: 0 0 0 2px var(--edge-hi), 0 6px 16px rgba(0,0,0,.5); cursor: crosshair; background: #1a1412; }
.ring-btn { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 700; transform: rotate(var(--a)) translateX(84px) rotate(calc(-1 * var(--a))) translate(-50%, -50%); background: linear-gradient(180deg, #c8402e, #8a2014); }
.zoom { grid-area: zoom; display: flex; gap: 4px; justify-content: center; }
.zoom button { width: 26px; height: 22px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1; border-radius: 11px; }
#hudRegion { grid-area: region; justify-self: end; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gold); text-shadow: 2px 2px 0 #000; text-align: right; pointer-events: none; }
#hudRegion .danger { color: #ff6b5a; }

/* run switch, stamina, and the skill being trained (quiet until xp comes in) */
.hero-row { display: flex; align-items: center; gap: 6px; }
#runBtn { padding: 0 8px; height: 16px; font-size: 10px; font-weight: 700; line-height: 1; border-radius: 4px; }
#runBtn.on { color: #3a2208; background: linear-gradient(180deg, #ffd978, #e0a83a); }
.stbar { flex: 1; height: 7px; background: #1a2a12; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.stbar i { display: block; height: 100%; background: linear-gradient(180deg, #b6f07a, #5aa830); transition: width .2s; }
.sxmini { display: flex; align-items: center; gap: 5px; opacity: .35; transition: opacity .5s; }
.sxmini .sxbar { background: #2a201b; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.sxmini .sxbar i { display: block; height: 100%; background: linear-gradient(180deg, #ffe08a, #d9a030); transition: width .3s; }
.sxmini.show { opacity: 1; }
.sxmini img { width: 14px; height: 14px; image-rendering: pixelated; }
.sxmini .sxbar { flex: 1; height: 5px; margin: 0; }
.sxmini span { font-size: 10px; color: var(--muted); white-space: nowrap; }
/* ---------- Bottom centre: quick bar ---------- */
#quickbar { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; display: flex; gap: 4px; padding: 5px; }
.qslot { position: relative; width: 46px; height: 46px; background: #171110; border: 2px solid #0c0806; border-radius: 6px; box-shadow: inset 0 0 0 1px #3a2a22; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qslot:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.qslot img { width: 30px; height: 30px; image-rendering: pixelated; pointer-events: none; }
.qslot.empty img { opacity: .25; }
.qslot .k { position: absolute; left: 3px; top: 0; font-size: 10px; color: var(--muted); font-weight: 700; }
.qslot .n { position: absolute; right: 3px; bottom: 0; font-size: 11px; color: #fff; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.qslot.none .n { color: var(--bad); }

/* ---------- Bottom right: menus ---------- */
#hotbar { position: fixed; right: 10px; bottom: 10px; display: flex; gap: 3px; padding: 4px; z-index: 7; }
#hotbar button { position: relative; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #3e3029, #261c17); border-radius: 6px; }
#hotbar button.on { background: linear-gradient(180deg, #7a5a3a, #4a3020); box-shadow: inset 0 0 0 2px var(--gold); }
#hotbar img { width: 26px; height: 26px; image-rendering: pixelated; pointer-events: none; }
#hotbar .key { position: absolute; left: 2px; top: 0; font-size: 8px; font-family: 'Press Start 2P', monospace; color: var(--muted); }
#hotbar .badge { position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 #000; }

/* ---------- Panels ---------- */
.win { position: fixed; z-index: 8; width: 300px; max-height: calc(100vh - 200px); display: flex; flex-direction: column; }
* { scrollbar-width: thin; scrollbar-color: #6a5040 #171110; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #171110; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7a5a44, #4a3628); border-radius: 4px; border: 1px solid #0e0a09; }
.win > header { display: flex; align-items: center; justify-content: center; position: relative; padding: 9px 36px 8px; cursor: default; border-bottom: 2px solid var(--line); background: linear-gradient(180deg, #3a2c24, #2a201b); border-radius: 6px 6px 0 0; touch-action: none; }
.win > header span { font-weight: 800; font-size: 15px; color: var(--card); text-shadow: 2px 2px 0 #000; letter-spacing: .5px; }
.win .close-x { position: absolute; right: 7px; top: 7px; width: 24px; height: 24px; padding: 0; font-size: 12px; background: linear-gradient(180deg, #e0503a, #a02a1a); border-color: #4a0e08; }
.win-body { padding: 10px; overflow: auto; }
.win.front { z-index: 9; }
#win-bag { width: 252px; }
#win-station { width: min(720px, calc(100vw - 40px)); height: min(580px, calc(100vh - 120px)); }
#win-station .win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#win-skills { width: 430px; height: min(560px, calc(100vh - 200px)); }
#win-skills .win-body { flex: 1; min-height: 0; overflow: hidden; }
#win-people { height: min(440px, calc(100vh - 200px)); }
#win-gear { width: 470px; }
#win-map { width: auto; }
#win-map .win-body { overflow: hidden; }
#worldMap { width: min(520px, calc(100vh - 290px)); height: min(520px, calc(100vh - 290px)); image-rendering: pixelated; border: 2px solid var(--line); border-radius: 6px; cursor: crosshair; display: block; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.slot { position: relative; aspect-ratio: 1; background: #171110; border: 2px solid #0c0806; border-radius: 6px; box-shadow: inset 0 0 0 1px #3a2a22; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.slot img { width: 72%; height: 72%; image-rendering: pixelated; pointer-events: none; }
.slot .qty { position: absolute; bottom: 1px; right: 4px; font-size: 11px; font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.bag-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.bag-foot button { padding: 3px 10px; font-size: 12px; }
.person { display: flex; justify-content: space-between; padding: 3px 4px; }
.person.me { color: var(--gold); }

/* skill guide */
.guide { display: grid; grid-template-columns: 96px 1fr; gap: 10px; height: 100%; }
.skill-page { display: flex; flex-direction: column; min-height: 0; }
.unlocks { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; }
.skill-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-content: start; }
.skill-icons button { position: relative; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: #171110; }
.skill-icons button.on { box-shadow: inset 0 0 0 2px var(--gold); background: #3a2a20; }
.skill-icons img { width: 28px; height: 28px; image-rendering: pixelated; }
.skill-icons .lv { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.skill-head { background: #171110; border: 1px solid #000; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.skill-head .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.skill-head b { color: var(--text); }
.skill-head .big { font-size: 16px; color: var(--gold); font-weight: 800; }
.goldbar { height: 10px; margin: 6px 0; background: #2a201b; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.goldbar i { display: block; height: 100%; background: linear-gradient(180deg, #ffd978, #d9a030); }
.skill-head .effect { font-size: 12px; color: #cfe3b0; }
.unlock { display: grid; grid-template-columns: 26px 34px 1fr; align-items: center; gap: 6px; padding: 4px 6px; margin-bottom: 3px; background: #2a201b; border: 1px solid #000; border-radius: 4px; font-size: 13px; }
.unlock img { width: 22px; height: 22px; image-rendering: pixelated; }
.unlock .need { font-weight: 800; color: var(--gold); text-align: center; }
.unlock.locked { opacity: .5; }
.unlock[data-pin] { cursor: default; }
.unlock[data-pin]:hover { border-color: var(--line); }
.unlock.pinned { border-color: var(--gold); opacity: 1; }
.unlock .what { color: var(--muted); font-size: 11px; }

/* equipment */
.equip { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
.doll { position: relative; height: 230px; background: radial-gradient(ellipse at 50% 55%, #4a3e34, #1c1513 70%); border: 2px solid var(--line); border-radius: 8px; }
.doll canvas { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 96px; height: 96px; image-rendering: pixelated; }
.eslot { position: absolute; width: 46px; height: 46px; }
.eslot .slot { width: 46px; height: 46px; }
.eslot label { position: absolute; top: -13px; left: 0; right: 0; text-align: center; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.eslot.soon .slot { opacity: .35; cursor: default; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 12px; align-items: baseline; }
.stats span { color: var(--muted); }
.stats b { color: var(--text); text-align: right; }
.tool-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid #3a2a22; font-size: 13px; }
.tool-row img { width: 26px; height: 26px; image-rendering: pixelated; }

/* crafting: cards like a recipe book */
.craft-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.craft-top input { flex: 1; padding: 5px 8px; }
.craft-top label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.craft-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
/* workstation: recipe list on the left, the chosen recipe on the right */
.craft2 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 290px) 1fr; gap: 12px; }
.c-left { display: flex; flex-direction: column; min-height: 0; }
.c-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.c-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 4px 8px 4px 4px; background: #2a201b; border: 1px solid #000; border-radius: 5px; cursor: pointer; font-size: 13px; }
.c-row img { width: 26px; height: 26px; image-rendering: pixelated; background: #171110; border-radius: 4px; }
.c-row .lv { font-size: 11px; color: var(--muted); }
.c-row.ok .lv { color: var(--good); }
.c-row.locked { opacity: .5; }
.c-row.sel { background: #4a3828; box-shadow: inset 0 0 0 1px var(--gold); }
.c-right { min-height: 0; overflow: auto; background: var(--card); color: var(--card-ink); border: 2px solid #8a6a42; border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.c-head { display: flex; gap: 12px; align-items: center; }
.c-pic { width: 84px; height: 84px; flex: none; background: #e6d2a8; border: 2px solid #c8a878; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.c-pic img { width: 64px; height: 64px; image-rendering: pixelated; }
.c-head h3 { margin: 0; font-size: 18px; }
.c-head .meta { font-size: 12px; color: #7a5a2a; font-weight: 700; }
.c-desc { font-size: 13px; color: #5a4430; margin: 0; }
.c-right h5 { margin: 4px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8a6a3a; }
.c-need { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 3px 6px; background: #ead7b0; border-radius: 5px; }
.c-need img { width: 22px; height: 22px; image-rendering: pixelated; }
.c-need .n { margin-left: auto; }
.c-need.miss .n { color: #c0301e; }
.c-qty { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed #c8a878; }
.c-qty .row { display: flex; align-items: center; gap: 6px; }
.c-qty input[type=range] { flex: 1; accent-color: #d9a030; }
.c-qty .step { width: 28px; padding: 2px 0; }
.c-qty .qn { min-width: 50px; text-align: center; font-weight: 800; font-size: 15px; }
.c-qty .go { width: 100%; padding: 9px; font-size: 15px; }
.c-locked { margin-top: auto; padding: 10px; text-align: center; font-weight: 700; color: #8a2a1a; background: #ead7b0; border-radius: 6px; }
.rcard { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--card); color: var(--card-ink); border: 2px solid #8a6a42; border-radius: 6px; box-shadow: inset 0 0 0 1px #fff6e0; }
.rcard .pic { width: 50px; height: 50px; background: #e6d2a8; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.rcard .pic img { width: 36px; height: 36px; image-rendering: pixelated; }
.rcard b { font-size: 14px; }
.rcard .lvl { float: right; font-size: 11px; font-weight: 700; color: #7a5a2a; }
.rcard .desc { font-size: 11px; color: #6a5440; margin: 1px 0 3px; }
.rcard .ins { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.rcard .ins span { display: inline-flex; align-items: center; gap: 2px; }
.rcard .ins img { width: 18px; height: 18px; image-rendering: pixelated; }
.rcard .ins .miss { color: #c0301e; }
.rcard .btns { display: flex; flex-direction: column; gap: 4px; }
.rcard .btns button { padding: 3px 10px; font-size: 12px; }
.rcard.locked { filter: grayscale(.7); opacity: .65; }
.rcard { cursor: pointer; }
.rcard.sel { border-color: #d9a030; box-shadow: inset 0 0 0 1px #fff6e0, 0 0 0 2px #f2c14e; }
.rcard .have { font-size: 10px; color: #7a5a2a; text-align: center; }
.qty-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed #c8a878; }
.qty-row input[type=range] { flex: 1; accent-color: #d9a030; }
.qty-row .qn { min-width: 44px; font-weight: 800; }
.qty-row button { padding: 3px 10px; font-size: 12px; }
.craft-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.craft-progress { margin: 0 0 8px; padding: 8px; background: #171110; border: 2px solid var(--line); border-radius: 6px; }
.craft-progress .cp-text { font-size: 12px; color: var(--gold); }
.cp-bar { height: 10px; margin-top: 6px; background: #3a2a20; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.cp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #ffe08a, #d9a030); }
.bank-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 300px; overflow: auto; margin: 10px 0; }

/* ---------- Chat ---------- */
#chat { position: fixed; left: 10px; bottom: 10px; width: min(400px, calc(50vw - 200px)); z-index: 5; display: flex; flex-direction: column; background: rgba(20,14,12,.78); border: 2px solid var(--line); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.chat-tabs { display: flex; gap: 2px; padding: 4px 4px 0; }
.chat-tabs button { padding: 2px 10px; font-size: 11px; border-radius: 5px 5px 0 0; background: #2a201b; border-bottom: 0; }
.chat-tabs button.on { background: #4a3a30; color: var(--gold); }
#chatFold { margin-left: auto; }
#chatLog { height: 140px; overflow: auto; font-size: 13px; padding: 6px 8px; display: flex; flex-direction: column; border-top: 1px solid #000; }
#chat.folded #chatLog { display: none; }
#chatLog div { text-shadow: 1px 1px 0 #000; }
#chatLog .level { color: var(--gold); }
#chatLog .join { color: var(--muted); font-style: italic; }
#chatLog .good { color: var(--good); }
#chatLog .bad { color: var(--bad); }
#chatLog .who { color: #9fd0ff; }
#chatLog .loot { color: #e8d8b0; }
#chatLog .loot b { color: #f2c14e; }
#chatForm { padding: 4px; }
#chatInput { width: 100%; background: rgba(10,7,6,.8); padding: 5px 8px; }

/* ---------- Floating bits ---------- */
#tip { position: fixed; z-index: 11; pointer-events: none; background: rgba(20,14,12,.95); border: 2px solid var(--line); box-shadow: inset 0 0 0 1px var(--edge); padding: 4px 8px; border-radius: 5px; font-size: 13px; white-space: nowrap; }
#tip .req { color: var(--bad); }
.levelup { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 8; font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--gold); text-shadow: 3px 3px 0 #000; text-align: center; animation: pop 2.6s ease-out forwards; pointer-events: none; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }
#menu { position: fixed; z-index: 12; padding: 6px; display: flex; flex-direction: column; min-width: 170px; }
#menu .title { padding: 4px 8px; color: var(--gold); font-weight: 700; }
#menu button { text-align: left; background: none; border: 0; box-shadow: none; padding: 7px 10px; border-radius: 4px; }
#menu button:hover { background: #4a362c; }
#offline { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); background: #5a1f1f; border: 2px solid var(--line); padding: 8px 14px; border-radius: 6px; z-index: 30; display: flex; gap: 10px; align-items: center; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  #chat { width: min(300px, 45vw); }
  #chatLog { height: 80px; }
}
@media (max-width: 760px) {
  .hero-info { min-width: 150px; }
  #mapCorner .bars { display: none; }
  .mini-wrap, #minimap { width: 100px; height: 100px; }
  .ring-btn { display: none; }
  #quickbar { bottom: 62px; }
  .qslot { width: 38px; height: 38px; }
  #chat { display: none; }
}
/* phones and tablets (touch): panels become sheets at the bottom; a narrow window on a computer keeps its windows */
@media (max-width: 760px) and (pointer: coarse) {
  .win { left: 6px !important; right: 6px; top: auto !important; bottom: 62px !important; width: auto !important; max-height: 55vh; transform: none !important; }
  #win-station { bottom: auto !important; top: 96px !important; max-height: 40vh; }
  .guide { grid-template-columns: 1fr; }
  .equip { grid-template-columns: 1fr; }
  .craft2 { grid-template-columns: 1fr; }
}

/* the craft button while a batch runs: cancel */
.gold-btn.go.cancel { background: linear-gradient(180deg, #c0503a, #8a2e22); border-color: #4a1a14; color: #fff; }

/* the station's tabs: Crafts / Workers */
.ctabs { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.ctabs button { padding: 6px 14px; background: #2a201b; border: 2px solid var(--line); border-radius: 6px; color: #cdbfa8; font-weight: 700; cursor: pointer; }
.ctabs button.on { background: linear-gradient(180deg, #f2c14e, #c98a1e); color: #2a1a0a; border-color: #5a3a10; }
.ctabs .muted { margin-left: auto; }
.workers { height: 460px; overflow-y: auto; }
.wk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; background: #f2e6cc; color: #2a1f16; border: 2px solid #5a3a20; border-radius: 6px; }
.wk-row img { width: 36px; height: 36px; image-rendering: pixelated; }
.wk-mid { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wk-mid .muted { color: #6a5440; }
.wk-btns { display: flex; gap: 6px; }
.c-time { margin: 6px 0; font-size: 12px; color: #6a5440; }

/* the item card on hover */
#itemTip { position: fixed; z-index: 30; pointer-events: none; width: 250px; background: linear-gradient(180deg, #2a201b, #1c1512); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line), 0 6px 18px rgba(0,0,0,.55); border-radius: 8px; padding: 10px 12px; color: #e8dcc8; font-size: 12px; }
#itemTip .itip-head { display: flex; gap: 10px; align-items: center; }
#itemTip .itip-pic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: #f2e6cc; border: 2px solid #5a3a20; border-radius: 6px; }
#itemTip .itip-pic img { width: 32px; height: 32px; image-rendering: pixelated; }
#itemTip .itip-head b { display: block; font-size: 14px; color: var(--gold); }
#itemTip .itip-head span { color: #a8977e; font-size: 11px; }
#itemTip .itip-stats { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #4a3a2c; }
#itemTip .itip-stats span { color: #b8a88e; }
#itemTip .itip-stats b { text-align: right; color: #fff; }
#itemTip .itip-stats b.good { color: #8fdc6a; }
#itemTip .itip-stats b.bad { color: var(--bad); }
#itemTip em { font-style: normal; font-size: 11px; margin-left: 4px; }
#itemTip em.up { color: #8fdc6a; }
#itemTip em.down { color: #ff7a6a; }
#itemTip .itip-use { margin-top: 7px; color: #d8cbb4; line-height: 1.35; }
#itemTip .itip-use span { color: #b8a88e; }
#itemTip .itip-use i { color: #8f806a; font-style: normal; }
#itemTip .itip-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 7px; border-top: 1px solid #4a3a2c; color: #8f806a; font-size: 11px; }
#itemTip .itip-foot b { color: var(--gold); }

/* the tool belt: four icon slots */
.belt { display: flex; gap: 10px; }
.belt-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.belt-slot .slot { width: 48px; height: 48px; cursor: pointer; }
.belt-slot .slot.empty { opacity: .45; cursor: default; }
.belt-slot label { font-size: 10px; color: #a8977e; }

/* quantity sliders: drawn by hand so the gold fill reaches the very end at Max */
.c-qty input[type=range], .qty-row input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  /* the bar runs between the thumb's centre at min and at max, so the thumb sits right on its ends */
  background:
    linear-gradient(90deg, #d9a030 calc(var(--k, 0) * 100%), #4a3a30 calc(var(--k, 0) * 100%)) center / calc(100% - 22px) 8px no-repeat,
    linear-gradient(#3a2416, #3a2416) center / calc(100% - 18px) 12px no-repeat; }
.c-qty input[type=range]:disabled, .qty-row input[type=range]:disabled { opacity: .5; cursor: default; }
.c-qty input[type=range]::-webkit-slider-thumb, .qty-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #f2c14e; border: 2px solid #3a2416; box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.c-qty input[type=range]::-moz-range-thumb, .qty-row input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f2c14e; border: 2px solid #3a2416; }

/* the task board window */
.tasks { display: flex; flex-direction: column; gap: 8px; }
.task-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f2e6cc; color: #2a1f16; border: 2px solid #5a3a20; border-radius: 6px; }
.task-card.done { background: #e6f0c8; border-color: #4a6a20; }
.task-card .t-pic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: #fff8e6; border: 2px solid #5a3a20; border-radius: 6px; }
.task-card .t-pic img { width: 34px; height: 34px; image-rendering: pixelated; object-fit: contain; }
.task-card .t-mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.task-card .t-mid b { font-size: 14px; }
.task-card .t-mid .small { color: #6a5440; }
.task-card .t-rew { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: #5a4430; white-space: nowrap; }
.task-card .t-rew span:first-child { font-weight: 700; color: #8a5a10; display: flex; align-items: center; gap: 4px; }
/* my tasks under the hero card */
#taskTracker { position: fixed; top: 124px; left: 14px; z-index: 5; width: 236px; padding: 6px 9px; cursor: pointer; font-size: 12px; }
#taskTracker:empty { display: none; }
#taskTracker .tt-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 3px; }
#taskTracker .tt-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; min-height: 26px; color: #e8dcc8; border-top: 1px solid rgba(255,255,255,.05); }
#taskTracker .tt-row:first-of-type { border-top: 0; }
#taskTracker .tt-row img { width: 20px; height: 20px; image-rendering: pixelated; object-fit: contain; }
#taskTracker .tt-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#taskTracker .tt-row b { color: #b8a88e; font-weight: 600; }
#taskTracker .tt-row.done span, #taskTracker .tt-row.done b { color: #8fdc6a; }
#taskTracker:hover { border-color: var(--gold-dk); }

/* no skill trained yet: no empty icon box */
#sxIcon:not([src]), #sxIcon[src=""] { visibility: hidden; }

/* quiver slot: the arrows inside, small, in a corner */
.eslot .slot .q-arrow { position: absolute; left: 2px; bottom: 2px; width: 16px !important; height: 16px !important; }
/* the board: offers, claimed jobs, the daily bonus, the village project */
.task-card.offer { background: #ece2cc; border-style: dashed; }
.task-card.claimed { opacity: .6; }
.task-card .t-btns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 84px; }
.t-claimed { color: #4a6a20; font-weight: 700; font-size: 12px; text-align: center; }
.tab-dot { font-style: normal; background: #c0392b; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 11px; }
.day-bonus { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border: 2px dashed var(--line); border-radius: 6px; color: #e8dcc8; font-size: 13px; }
.day-bonus .cp-bar { flex: 1; }
.day-bonus b { color: var(--gold); white-space: nowrap; }
.day-bonus.got { border-color: #4a6a20; color: #8fdc6a; }
.vp-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.vp-head b { font-size: 17px; color: var(--gold); }
.vp-head span { color: #b8a88e; font-size: 13px; }
.vp-grid { display: grid; grid-template-columns: 1fr 190px; gap: 12px; min-height: 0; }
.vp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f2e6cc; color: #2a1f16; border: 2px solid #5a3a20; border-radius: 6px; }
.vp-row .t-pic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: #fff8e6; border: 2px solid #5a3a20; border-radius: 6px; }
.vp-row .t-pic img { width: 34px; height: 34px; image-rendering: pixelated; }
.vp-row .t-mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.vp-row .t-mid .small, .vp-row .t-btns .small { color: #6a5440; }
.vp-row .t-btns { display: flex; flex-direction: column; gap: 3px; align-items: center; min-width: 96px; }
.vp-side { color: #e8dcc8; font-size: 13px; }
.vp-side h4 { margin-top: 0; }
.vp-top { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #3a2e26; }
.vp-top.me { color: var(--gold); }
#taskTracker .tt-w { font-style: normal; font-size: 9px; font-weight: 800; color: #2a1a0a; background: var(--gold); border-radius: 3px; padding: 0 3px; }
#taskTracker .tt-row.muted span { color: #b8a88e; font-style: italic; }
/* the welcome gift */
#welcomeGift { position: fixed; z-index: 20; left: 50%; top: 18%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); padding: 16px 18px; text-align: center; }
#welcomeGift h3 { margin: 0 0 4px; color: var(--gold); font-size: 20px; text-shadow: 2px 2px 0 #000; }
.wg-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0 14px; }
.wg-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; background: #2a201b; border: 2px solid var(--line); border-radius: 6px; color: #e8dcc8; font-size: 12px; }
.wg-day label { font-size: 10px; text-transform: uppercase; color: #a8977e; }
.wg-day b { color: var(--gold); font-size: 14px; }
.wg-day img { width: 24px; height: 24px; image-rendering: pixelated; }
.wg-day.past { opacity: .45; }
.wg-day.now { background: linear-gradient(180deg, #5a4420, #3a2a14); border-color: var(--gold); box-shadow: 0 0 10px rgba(245,215,110,.35); }
#welcomeGift .gold-btn { padding: 9px 26px; font-size: 15px; }
@media (max-width: 640px) { .vp-grid { grid-template-columns: 1fr; } .wg-days { grid-template-columns: repeat(4, 1fr); } }

/* the clock under the minimap */
#hudClock { grid-area: clock; justify-self: end; font-family: 'Press Start 2P', monospace; font-size: 9px; color: #f5e6b0; text-shadow: 2px 2px 0 #000; pointer-events: auto; cursor: default; }
#hudClock.night { color: #a8c0ff; }
#chatLog .night { color: #a8c0ff; font-style: italic; }

/* item card: the materials a crafted item needs */
#itemTip .itip-mats { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
#itemTip .itip-mats div { display: flex; align-items: center; gap: 6px; }
#itemTip .itip-mats img { width: 16px; height: 16px; image-rendering: pixelated; }
#itemTip .itip-mats span { flex: 1; color: #d8cbb4; }
#itemTip .itip-mats b { font-size: 11px; color: #8fdc6a; }
#itemTip .itip-mats b.bad { color: #ff7a6a; }

/* set bonus line in the equipment panel */
.set-on { margin: 6px 0 2px; padding: 5px 8px; border: 1px solid #4a6a20; border-radius: 5px; color: #8fdc6a; font-size: 12px; background: rgba(80,120,30,.12); }

/* dragging items */
#dragGhost { position: fixed; z-index: 40; width: 40px; height: 40px; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.slot.dragging, .qslot.dragging { opacity: .35; }
.drop-on { outline: 2px solid var(--gold); outline-offset: -2px; }
#win-station.drop-on { outline-offset: -4px; outline-width: 3px; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
/* how many: the little window */
#qtyModal { position: fixed; z-index: 35; left: 50%; top: 32%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); padding: 14px 16px; color: #e8dcc8; }
#qtyModal .qm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#qtyModal .qm-head b { display: block; color: var(--gold); font-size: 15px; }
#qtyModal .itip-pic { width: 44px; height: 44px; display: grid; place-items: center; background: #f2e6cc; border: 2px solid #5a3a20; border-radius: 6px; }
#qtyModal .itip-pic img { width: 32px; height: 32px; image-rendering: pixelated; }
#qtyModal .c-qty { border-top: 0; padding-top: 0; }
#qtyModal .qm-total { margin: 8px 0 10px; color: #b8a88e; font-size: 13px; }
#qtyModal .qm-total b { color: var(--gold); }
#qtyModal .qm-btns { display: flex; gap: 8px; justify-content: flex-end; }
#qtyModal .qm-btns .go { padding: 8px 18px; }

/* weapon sets */
.setbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.setbar button { padding: 4px 12px; background: #2a201b; border: 2px solid var(--line); border-radius: 6px; color: #cdbfa8; font-weight: 700; cursor: pointer; }
.setbar button.on { background: linear-gradient(180deg, #f2c14e, #c98a1e); color: #2a1a0a; border-color: #5a3a10; }
.setbar span { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.setbar img { width: 20px; height: 20px; image-rendering: pixelated; }
#quickbar .setswap { position: relative; width: 44px; height: 44px; margin-left: 6px; display: grid; place-items: center; background: #3a2a1c; border: 2px solid var(--gold-dk); border-radius: 6px; cursor: pointer; color: var(--gold); }
#quickbar .setswap:hover { border-color: var(--gold); }
#quickbar .setswap img { width: 30px; height: 30px; image-rendering: pixelated; }
#quickbar .setswap .k { position: absolute; left: 3px; top: 1px; font-size: 10px; color: #b8a88e; }

#loginBox { display: flex; flex-direction: column; gap: 12px; }
/* the 'set a password' card */
#passPrompt { position: fixed; z-index: 20; right: 14px; top: 250px; width: 270px; padding: 12px 14px; color: #e8dcc8; display: flex; flex-direction: column; gap: 8px; }
#passPrompt b { color: var(--gold); }
#passPrompt p { margin: 0; }
#passPrompt .pp-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* the test server's tag */
#betaTag { position: fixed; z-index: 30; top: 6px; left: 50%; transform: translateX(-50%); padding: 3px 10px; font-family: 'Press Start 2P', monospace; font-size: 10px; color: #2a1a0a; background: #ff9a4a; border: 2px solid #000; border-radius: 4px; pointer-events: auto; }

/* the ➜ that walks you to a job */
#taskTracker .tt-go { flex: none; width: 24px; height: 22px; padding: 0; font-size: 13px; line-height: 1; color: #2a1a0a; background: linear-gradient(180deg, #f2c14e, #c98a1e); border: 1px solid #5a3a10; border-radius: 4px; cursor: pointer; }
#taskTracker .tt-go:hover { filter: brightness(1.12); }

/* back to my hero, after moving the view */
#recenter { position: fixed; z-index: 7; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: linear-gradient(180deg, #3a2c24, #2a201b); border: 2px solid var(--gold); color: var(--gold); font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#recenter img { width: 34px; height: 34px; border-radius: 50%; background: #1c1512; border: 2px solid #5a3a20; image-rendering: pixelated; }
#recenter:hover { filter: brightness(1.15); }

/* the guide (G) */
#win-guide { width: min(760px, calc(100vw - 24px)); height: min(600px, calc(100vh - 140px)); }
#win-guide .win-body { flex: 1; min-height: 0; overflow: hidden; }
.guide-win { display: grid; grid-template-columns: 170px 1fr; gap: 12px; height: 100%; }
#guideNav { display: flex; flex-direction: column; gap: 4px; overflow: auto; min-height: 0; }
#guideNav > button { text-align: left; padding: 7px 10px; background: #2a201b; border: 2px solid var(--line); border-radius: 6px; color: #cdbfa8; font-weight: 700; cursor: pointer; }
#guideNav > button.on { background: linear-gradient(180deg, #f2c14e, #c98a1e); color: #2a1a0a; border-color: #5a3a10; }
.g-skills { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.g-skills button { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: none; border: 1px solid transparent; border-radius: 5px; color: #d8cbb4; font-size: 12px; cursor: pointer; text-align: left; }
.g-skills button.on { border-color: var(--gold); color: var(--gold); background: rgba(245,215,110,.08); }
.g-skills img { width: 18px; height: 18px; image-rendering: pixelated; }
#guidePage { overflow: auto; min-height: 0; padding-right: 6px; color: #e8dcc8; font-size: 13px; line-height: 1.45; }
#guidePage h3 { margin: 0 0 6px; color: var(--gold); font-size: 17px; }
#guidePage h4 { margin: 12px 0 4px; color: var(--gold); }
#guidePage p { margin: 6px 0; }
#guidePage b { color: #fff3d6; }
.g-steps, .g-src { margin: 4px 0; padding-left: 20px; }
.g-steps li, .g-src li { margin: 4px 0; }
.g-src { list-style: none; padding-left: 0; }
.g-src li { display: flex; gap: 6px; align-items: baseline; }
.g-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.g-table th { text-align: left; color: #a8977e; font-weight: 600; border-bottom: 1px solid var(--line); padding: 3px 6px; }
.g-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.g-table tr.locked td { opacity: .5; }
.g-keys td:first-child { white-space: nowrap; width: 1%; }
.g-ico { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: middle; }
.g-boss { font-size: 9px; font-weight: 800; color: #2a1a0a; background: #ff9a4a; border-radius: 3px; padding: 0 4px; }

/* the first-time tour */
#tour { position: fixed; z-index: 25; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); padding: 14px 16px; color: #e8dcc8; }
#tour .tour-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#tour .tour-head b { color: var(--gold); font-size: 16px; }
#tour p { margin: 8px 0 12px; line-height: 1.45; }
#tour .tour-btns { display: flex; align-items: center; gap: 8px; }
#tour .tour-btns span { flex: 1; }
#tour .tour-btns .gold-btn { padding: 7px 18px; }

/* guide: the facts of a skill, and term + text lists */
.g-facts { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin: 6px 0 10px; }
.g-facts dt { color: #a8977e; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.g-facts dd { margin: 0; }
.g-list { list-style: none; padding: 0; margin: 6px 0; }
.g-list li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }

/* coins in the bank */
.bank-coins { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(245,215,110,.07); border: 1px solid var(--line); border-radius: 6px; color: #e8dcc8; }
.bank-coins > div { flex: 1; display: flex; flex-direction: column; }
.bank-coins b { color: var(--gold); font-size: 15px; }

#itemTip .itip-drops { margin-top: 7px; }
#itemTip .itip-drops > span { color: #b8a88e; display: block; margin-bottom: 2px; }
#itemTip .itip-drops div { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
#itemTip .itip-drops b { color: #d8cbb4; font-weight: 600; }
#itemTip .itip-drops em { font-style: normal; color: #f5d76e; }

/* bag pages */
.bag-pages { display: flex; gap: 4px; margin-bottom: 6px; }
.bag-pages button { flex: 1; padding: 3px 0; font-size: 12px; font-weight: 700; background: #2a201b; border: 2px solid var(--line); border-radius: 5px; color: #cdbfa8; cursor: pointer; }
.bag-pages button.on { background: linear-gradient(180deg, #f2c14e, #c98a1e); color: #2a1a0a; border-color: #5a3a10; }
.bag-pages button.locked { opacity: .55; font-size: 11px; }
.bag-pages button.drop-on { outline: 2px solid var(--gold); }

.bank-pages { align-items: center; }
.bank-pages button { flex: 0 0 38px; }
.bank-pages span { margin-left: auto; }
#guideNav .g-caret { float: right; font-style: normal; opacity: .8; }

/* the bank chest next to the coins: hover for the bank's coins */
.bank-chip { position: relative; display: inline-flex; align-items: center; margin-left: 6px; cursor: default; }
.bank-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.bank-pop { display: none; position: absolute; top: 22px; right: -8px; z-index: 30; white-space: nowrap; padding: 7px 10px; background: linear-gradient(180deg, #2a201b, #1c1512); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); border-radius: 6px; color: #e8dcc8; font-size: 12px; font-weight: 400; }
.bank-pop b { color: var(--gold); }
.bank-pop span { color: #a8977e; font-size: 11px; }
.bank-chip:hover .bank-pop { display: block; }

/* buy buttons: (60 ●) */
.btns .price { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; opacity: .85; }
.btns .price .coin-ico { width: 10px; height: 10px; }
.gold-btn .price .coin-ico { box-shadow: 0 0 0 1.5px #5a3a10; background: radial-gradient(circle at 35% 35%, #fff8d0, #f0c040 55%, #b07a10); }

#itemTip .itip-effect { grid-column: 1 / -1; color: #8fdc6a; line-height: 1.35; }

/* the craft window: my skill and level, clearly */
#craftSkill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #e8dcc8; text-transform: none; letter-spacing: 0; }
#craftSkill img { width: 18px; height: 18px; image-rendering: pixelated; }
#craftSkill b { color: var(--gold); font-size: 14px; }
.c-locked span { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #8a6a4a; }

/* trading */
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.trade-side { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.15); }
.trade-side h4 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.trade-grid { grid-template-columns: repeat(6, 1fr); }
.trade-grid .slot[data-unoffer] { cursor: pointer; }
.trade-coins { display: flex; align-items: center; gap: 6px; color: #e8dcc8; }
.trade-coins b { color: var(--gold); }
.trade-coins button { margin-left: auto; padding: 2px 10px; font-size: 12px; }
.trade-ok { text-align: center; padding: 6px; border-radius: 6px; background: #2a201b; color: #b8a88e; font-weight: 700; }
.trade-ok.yes { background: rgba(80,140,40,.25); color: #8fdc6a; }
.trade-btns { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.trade-btns span { flex: 1; }
.trade-btns .gold-btn { padding: 8px 22px; }
#tradeReq { position: fixed; z-index: 22; left: 50%; top: 90px; transform: translateX(-50%); padding: 12px 16px; color: #e8dcc8; display: flex; flex-direction: column; gap: 10px; }
#tradeReq b { color: var(--gold); }
#tradeReq .pp-btns { display: flex; justify-content: flex-end; gap: 8px; }

#quickbar .qslot { position: relative; overflow: hidden; }
#quickbar .qslot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); pointer-events: none; }

/* jobs: a scroll for the details */
#taskTracker .tt-row[data-job] { cursor: pointer; }
#taskTracker .tt-info { flex: none; width: 24px; height: 22px; padding: 0; display: grid; place-items: center; background: #3a2c24; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
#taskTracker .tt-info img { width: 14px; height: 14px; image-rendering: pixelated; }
#taskTracker .tt-info:hover { border-color: var(--gold); }
#jobInfo { position: fixed; z-index: 21; top: 124px; left: 262px; width: 300px; padding: 12px 14px; color: #e8dcc8; display: flex; flex-direction: column; gap: 8px; }
#jobInfo .ji-head { display: flex; align-items: center; gap: 8px; }
#jobInfo .ji-head img { width: 18px; height: 18px; image-rendering: pixelated; }
#jobInfo .ji-head b { flex: 1; color: var(--gold); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
#jobInfo .ji-x { width: 22px; height: 22px; padding: 0; font-size: 11px; background: linear-gradient(180deg, #e0503a, #a02a1a); border-color: #4a0e08; color: #fff; }
#jobInfo .ji-title { display: flex; align-items: center; gap: 10px; font-size: 15px; }
#jobInfo .ji-title .t-pic { width: 40px; height: 40px; display: grid; place-items: center; background: #f2e6cc; border: 2px solid #5a3a20; border-radius: 6px; }
#jobInfo .ji-title .t-pic img { width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
#jobInfo .g-facts { margin: 2px 0; font-size: 13px; }
#jobInfo .ji-done { color: #8fdc6a; }
#jobInfo .ji-btns .gold-btn { width: 100%; padding: 7px; }

/* a skill as an icon */
.skill-tag { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.skill-tag img { width: 16px; height: 16px; image-rendering: pixelated; }
.skill-tag b { font-size: 12px; }
/* the mailbox */
.mail-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mail-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f2e6cc; color: #2a1f16; border: 2px solid #5a3a20; border-radius: 6px; }
.mail-row img { width: 24px; height: 24px; image-rendering: pixelated; }
.mail-row > div { flex: 1; display: flex; flex-direction: column; }
.mail-rew { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #8a5a10; }
#mailBtn { position: fixed; z-index: 6; top: 18px; left: 312px; width: 44px; height: 40px; padding: 0; display: grid; place-items: center; background: linear-gradient(180deg, #3a2c24, #2a201b); border: 2px solid var(--gold); border-radius: 8px; cursor: pointer; animation: mailPulse 1.6s ease-in-out infinite; }
#mailBtn img { width: 26px; height: 26px; image-rendering: pixelated; }
#mailBtn span { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }
@keyframes mailPulse { 50% { box-shadow: 0 0 12px rgba(245,215,110,.6); } }

#win-station.narrow { width: min(380px, calc(100vw - 40px)); height: auto; max-height: min(520px, calc(100vh - 120px)); }
#win-station.narrow .win-body { flex: none; }
.mail-row > div { gap: 2px; }

/* potion buffs */
#buffs { position: fixed; z-index: 6; top: 64px; left: 312px; display: flex; flex-direction: column; gap: 4px; }
#buffs .buff { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; background: rgba(28,21,18,.88); border: 1px solid var(--line); border-radius: 6px; color: #e8dcc8; font-size: 12px; }
#buffs .buff img { width: 18px; height: 18px; image-rendering: pixelated; }
#buffs .buff b { color: var(--gold); margin-left: 4px; }
.swap-btn { display: inline-flex; align-items: center; gap: 3px; }
.swap-btn .coin-ico { width: 10px; height: 10px; }

/* where a stat comes from */
.stats b small { font-weight: 500; color: var(--muted, #9a8a78); font-size: 10px; }
.stats b small.parts { display: block; line-height: 1.2; }

/* art credits under the login */
.credits { margin-top: 14px; font-size: 10px; line-height: 1.5; color: rgba(232,220,200,.55); text-align: center; }
.credits a { color: rgba(232,220,200,.75); }

/* the pack's coin picture, once it has loaded */
body.pack-coin .coin-ico, body.pack-coin .gold-btn .price .coin-ico { width: 10px; height: 10px; background: var(--coin-pic) center / contain no-repeat; border-radius: 0; box-shadow: none; image-rendering: pixelated; }