:root {
  --ink: #3b2414; --wood: #7a4a28; --wood-d: #3b2414; --wood-l: #a8743f;
  --parch: #f4e4bc; --parch-d: #e2c98f; --parch-l: #fff4d6;
  --gold: #f2c94c; --gold-d: #a8801f; --green: #4e9a3c; --red: #c4553b; --teal: #3f8a8c;
  --up: #2f8a3a; --down: #c23b2f;
  --notch: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1d3a1f; overflow: hidden; font-family: 'Pixelify Sans', ui-monospace, monospace; color: var(--ink); -webkit-font-smoothing: none; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; cursor: pointer; }

#game { position: fixed; inset: 0; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#world.drag { cursor: grabbing; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(255,214,140,.05) 0%, rgba(255,200,120,0) 55%, rgba(18,30,12,.38) 100%); }

/* ---------- panels */
.panel {
  background: var(--parch); border: 3px solid var(--wood-d); clip-path: var(--notch);
  box-shadow: inset 0 0 0 2px var(--parch-l), inset 0 0 0 4px var(--parch-d), inset 0 -6px 0 0 rgba(168,116,67,.25);
}
.plaque { background: #1a120c; border: 3px solid var(--wood-d); clip-path: var(--notch); box-shadow: inset 0 0 0 2px #5a3420; }
.ic { display: inline-block; width: 24px; height: 24px; background-size: 100% 100%; image-rendering: pixelated; flex: none; }
.btn { background: var(--wood-l); color: #fff4d6; border: 3px solid var(--wood-d); padding: 6px 12px; font-weight: 600; font-size: 15px; clip-path: var(--notch); box-shadow: inset 0 -3px 0 #7a4a28, inset 0 2px 0 #d39a5c; text-shadow: 0 2px 0 #5a3420; }
.btn:hover { filter: brightness(1.08); }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 -3px 0 #c99a2e, inset 0 2px 0 #fff0b0; text-shadow: none; }
.btn[disabled] { opacity: .75; cursor: not-allowed; }

/* ---------- top */
#top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }
#top > * { pointer-events: auto; }
#brand { width: 168px; flex: none; margin-top: -4px; background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(11,14,19,.55), rgba(11,14,19,0) 75%); }
#logo { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 0 rgba(20,10,4,.55)) drop-shadow(0 0 6px rgba(0,0,0,.35)); }
#player { display: flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; margin-top: 4px; }
.avatar { width: 46px; height: 46px; background: #9fd3e6; border: 3px solid var(--wood-d); display: grid; place-items: center; box-shadow: inset 0 -10px 0 #5fb44b; }
.avatar canvas { width: 39px; height: 48px; margin-top: 6px; }
.pname { font-weight: 700; font-size: 17px; white-space: nowrap; }
.lvl { background: var(--green); color: #fff; padding: 0 6px; font-size: 13px; margin-left: 4px; border: 2px solid #2c6e2c; }
.xp { position: relative; width: 168px; height: 16px; margin-top: 5px; background: #6b4a2e; border: 2px solid var(--wood-d); }
.xp i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, #8fd45c 0 6px, #7cc24c 6px 8px); box-shadow: inset 0 3px 0 #b9ec8a; }
.xp b { position: relative; display: block; text-align: center; font-size: 11px; line-height: 12px; color: #fff; text-shadow: 0 1px 0 #2a1a10; font-weight: 600; }
#res { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.pill { display: flex; gap: 7px; align-items: center; background: #5a3a22; color: #fff4d6; border: 3px solid var(--wood-d); padding: 4px 10px 4px 6px; clip-path: var(--notch); box-shadow: inset 0 2px 0 #8a5a32, inset 0 -3px 0 #3e2616; }
.pill small { display: block; font-size: 11px; color: #e2c98f; line-height: 1; }
.pill b { display: block; font-size: 16px; line-height: 1.1; color: var(--gold); }
.pill.sim b { color: #b9ec8a; }
.pill.weather b { color: #fff; }
.sq { width: 40px; height: 40px; background: var(--wood-l); border: 3px solid var(--wood-d); display: grid; place-items: center; clip-path: var(--notch); box-shadow: inset 0 -3px 0 #7a4a28, inset 0 2px 0 #d39a5c; padding: 0; }

/* ---------- left nav */
#left { position: absolute; left: 10px; top: 128px; display: flex; flex-direction: column; gap: 4px; padding: 7px; }
.nav { position: relative; width: 46px; height: 46px; background: #e9d29c; border: 3px solid var(--wood); display: grid; place-items: center; padding: 0; box-shadow: inset 0 -3px 0 #c9a868; }
.nav .ic { width: 28px; height: 28px; }
.nav:hover, .nav.on { background: #fff0b8; border-color: var(--wood-d); box-shadow: inset 0 -3px 0 #e3b341, 0 0 0 2px var(--gold); }
.nav:hover::after { content: attr(data-tip); position: absolute; left: 54px; top: 8px; background: var(--wood-d); color: #fff4d6; padding: 4px 8px; font-size: 14px; white-space: nowrap; z-index: 5; }

/* ---------- commodity board */
#board { position: absolute; right: 10px; top: 72px; width: 262px; padding: 10px 12px; font-size: 14px; }
.ph { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.ph .ic { width: 20px; height: 20px; }
.ph.sub { margin-top: 8px; border-top: 2px dashed var(--parch-d); padding-top: 8px; }
.tag { margin-left: auto; font-style: normal; font-size: 10px; background: #e8a33a; color: var(--ink); padding: 1px 5px; border: 2px solid #a8681f; letter-spacing: .5px; }
.crow { display: grid; grid-template-columns: 22px 1fr 56px 52px; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid #e2c98f; }
.crow canvas.ci { width: 22px; height: 22px; }
.crow canvas.sp { width: 56px; height: 18px; }
.crow .nm { font-weight: 600; line-height: 1; }
.crow .nm small { display: block; font-weight: 400; font-size: 11px; color: #7a5a3a; }
.crow .ch { text-align: right; font-weight: 700; font-size: 13px; }
.up { color: var(--up); } .down { color: var(--down); }
.fine { font-size: 11px; color: #7a5a3a; margin: 6px 0 0; line-height: 1.25; }
#forecast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; font-size: 12px; }
#forecast div { background: #fff4d6; border: 2px solid var(--parch-d); padding: 4px 0 3px; }
#forecast .ic { width: 22px; height: 22px; display: block; margin: 2px auto; }
#forecast b { display: block; }

/* ---------- toolbar */
#bar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
#tools { display: flex; gap: 6px; padding: 8px; background: #5a3a22; border: 3px solid var(--wood-d); clip-path: var(--notch); box-shadow: inset 0 2px 0 #8a5a32, inset 0 -4px 0 #3e2616; }
.tool { position: relative; width: 62px; height: 66px; background: var(--parch); border: 3px solid var(--wood-d); padding: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: inset 0 -4px 0 #d8bd82; }
.tool .ic { width: 32px; height: 32px; }
.tool span.l { font-size: 12px; font-weight: 600; }
.tool kbd { position: absolute; top: 1px; left: 3px; font: 600 10px 'Pixelify Sans'; color: #7a5a3a; }
.tool.on { background: #fff0b8; box-shadow: inset 0 -4px 0 #e3b341, 0 0 0 3px var(--gold); transform: translateY(-3px); }
.tool:hover { background: #fff4d6; }

/* ---------- minimap & stage card */
#mini { position: absolute; left: 10px; bottom: 10px; padding: 6px; }
#minimap { width: 192px; height: 120px; display: block; cursor: pointer; border: 2px solid var(--wood-d); }
#stagecard { position: absolute; right: 10px; bottom: 10px; padding: 10px 12px; width: 262px; }
.st { font-weight: 700; font-size: 16px; }
.hint { font-size: 12px; color: #7a5a3a; margin: 3px 0 8px; }

/* ---------- labels & tooltips */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zl { position: absolute; transform: translate(-50%, -50%); background: rgba(59,36,20,.82); color: #fff0c8; font-weight: 700; font-size: 14px; padding: 2px 9px 3px; border: 2px solid #a8743f; white-space: nowrap; letter-spacing: .3px; text-shadow: 0 2px 0 #2a1a10; }
#hoverTip { position: absolute; pointer-events: none; background: var(--wood-d); color: #fff4d6; padding: 4px 8px; font-size: 14px; border: 2px solid var(--gold); white-space: nowrap; z-index: 20; }
#hoverTip small { color: #e2c98f; margin-left: 6px; }
#card { position: absolute; width: 290px; padding: 12px 14px; z-index: 30; font-size: 14px; }
#card h3 { margin: 0 0 2px; font-size: 19px; }
#card .z { font-size: 12px; color: #7a5a3a; text-transform: uppercase; letter-spacing: .6px; }
#card p { margin: 8px 0; line-height: 1.3; }
#card .stg { display: inline-block; background: var(--teal); color: #fff; padding: 2px 7px; font-size: 12px; border: 2px solid #2a5f61; }
#card .x { position: absolute; right: 8px; top: 6px; background: none; border: 0; font-size: 18px; font-weight: 700; }

/* ---------- art sheet */
#sheet { position: fixed; inset: 0; overflow: auto; background: #e9d29c repeating-linear-gradient(0deg, transparent 0 22px, rgba(122,74,40,.06) 22px 24px); z-index: 50; }
.sheetTop { position: sticky; top: 0; display: flex; gap: 16px; align-items: center; padding: 10px 18px; background: #5a3a22; color: #fff4d6; border-bottom: 4px solid var(--wood-d); z-index: 2; }
.sheetLogo { height: 46px; width: auto; }
.sheetTop h1 { margin: 0; font-size: 22px; color: var(--gold); text-shadow: 0 2px 0 #2a1a10; }
.sheetTop span { margin-left: auto; color: #e2c98f; }
#sheetBody { max-width: 1240px; margin: 0 auto; padding: 18px 16px 60px; }
.sec { margin: 18px 0 8px; }
.sec h2 { margin: 0 0 4px; font-size: 22px; }
.sec p { margin: 0 0 10px; color: #6b4a2e; max-width: 760px; }
.grid { display: flex; flex-wrap: wrap; gap: 12px; }
.cardS { background: var(--parch); border: 3px solid var(--wood-d); clip-path: var(--notch); padding: 10px; text-align: center; box-shadow: inset 0 0 0 2px var(--parch-l); }
.cardS canvas { display: block; margin: 0 auto 6px; background: #5fb44b; }
.cardS.nobg canvas { background: transparent; }
.cardS b { display: block; font-size: 14px; }
.cardS small { color: #7a5a3a; font-size: 12px; }
.sw { width: 116px; }
.sw i { display: block; height: 44px; border: 2px solid var(--wood-d); margin-bottom: 4px; }
.sw code { font: 12px 'Pixelify Sans'; color: #6b4a2e; }
table.play { border-collapse: collapse; width: 100%; background: var(--parch); border: 3px solid var(--wood-d); font-size: 14px; }
table.play th, table.play td { text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--parch-d); vertical-align: top; }
table.play th { background: #5a3a22; color: #fff4d6; }
table.play td.s { white-space: nowrap; font-weight: 700; color: var(--teal); }

@media (max-width: 980px) {
  #board, #player, #mini { display: none; }
  #res .pill:nth-child(3), #res .pill.weather { display: none; }
  #stagecard { display: none; }
}
@media (max-width: 680px) {
  #player, #mini { display: none; }
  #brand { width: 124px; }
  #left { top: 100px; }
  .tool { width: 48px; } .tool span.l { font-size: 10px; }
}