/* Public Pixel (CC0, assets/fonts) is drawn on an 8px grid: keep its sizes
   at multiples of 8 so glyphs stay crisp. It has no bold, so emphasis is colour. */
@font-face { font-family: 'Public Pixel'; src: url(assets/fonts/PublicPixel.ttf) format('truetype'); font-display: swap; }

/* Palette sampled from the Pixel Forge UI pack. Frames are 9-sliced from the
   1x PNGs in assets/ui at integer scale, so they stay crisp. */
:root {
  --bg: #120e0c; --panel: #2a221d; --line: #4a3a2e; --edge: #5a4738; --fg: #e8dcc8; --dim: #9a8a78;
  --accent: #c89b4a; --bad: #ff6b6b; --good: #5ad17a; --row: #3a2e25;
  --agua: #3d8bff; --fogo: #ff6a3d; --natureza: #4cc55a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 8px/14px 'Public Pixel', ui-monospace, monospace; font-synthesis: none; image-rendering: pixelated; -webkit-font-smoothing: none; }
b, strong, h1, h2, h3, th { font-weight: normal; }
b, strong { color: #fff3dc; }
input, select { font: inherit; color: var(--fg); background: #1a1411; border: 1px solid var(--edge); border-radius: 0; padding: 7px 8px; }
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* Scrollbars: thin, square, pack palette. Chromium/WebKit get the pixel
   style; others fall back to the standard thin scrollbar in the same colors. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1411; }
::-webkit-scrollbar-thumb { background: var(--edge); border: 2px solid #1a1411; box-shadow: inset 1px 1px 0 #8d755e; }
::-webkit-scrollbar-thumb:hover { background: #8d755e; box-shadow: none; }
::-webkit-scrollbar-thumb:active { background: var(--accent); box-shadow: none; }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--edge) #1a1411; }
}

/* Buttons: secondary frame by default, .primary for the main action of a row. */
button {
  font: inherit; line-height: 16px; color: var(--fg); background: none; padding: 0 2px; cursor: pointer;
  border: solid transparent; border-width: 9px 11px;
  border-image: url(assets/ui/btn.png) 9 11 fill / 9px 11px stretch;
}
button:hover:not(:disabled) { border-image-source: url(assets/ui/btn-hover.png); }
button:active:not(:disabled), button.on { border-image-source: url(assets/ui/btn-press.png); color: var(--accent); }
button.primary { border-image-source: url(assets/ui/btn-main.png); color: #f3d9a4; }
button.primary:hover:not(:disabled) { border-image-source: url(assets/ui/btn-main-hover.png); }
button.primary:active:not(:disabled) { border-image-source: url(assets/ui/btn-main-press.png); }
button:disabled { opacity: .45; cursor: default; }

/* Frames */
.frame, .window, #modal-body {
  border: 11px solid transparent; border-image: url(assets/ui/panel.png) 11 fill / 11px stretch;
}
.card, #toast {
  border: 8px solid transparent; border-image: url(assets/ui/card.png) 8 fill / 8px stretch;
}
.icon { width: 32px; height: 32px; vertical-align: middle; }

/* Icons: 16×16 art, or a placeholder tile with a 2-letter code until the art
   exists (see docs/ICONS.md). iv = icon + value as one unit. */
.ic { display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex: none; }
.ic.x2 { width: 32px; height: 32px; } /* 16×16 art at 2×, e.g. the weapon in its rarity frame */
.ic.ph { --c: var(--fg); box-sizing: border-box; border: 1px solid var(--c); color: var(--c); background: #1a1411;
  font: 8px/14px 'Public Pixel', monospace; font-style: normal; text-align: center; letter-spacing: -1px; overflow: hidden; }
.iv { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; margin-right: 6px; }
.iv:last-child { margin-right: 0; }
.stats2 { display: grid; grid-template-columns: auto auto; gap: 2px 6px; align-items: center; }
.stats4 { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 4px; align-items: center; }
.sc { font-size: 8px; }
.perks { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 4px; padding: 4px 8px; }
.recruit { display: flex; flex-direction: column; gap: 4px; }
.recruit button { align-self: flex-start; }

/* Help: a small "?" that opens the explanation in a balloon. */
button.help { border-width: 4px 5px; padding: 2px 3px; min-width: 20px; min-height: 18px; line-height: 8px; font-size: 8px; color: var(--accent); vertical-align: middle; }
#help-pop { position: fixed; z-index: 30; max-width: 300px; padding: 4px 8px; line-height: 14px; }
#hunt-info { position: relative; }
#hunt-info > .help { position: absolute; right: 4px; bottom: 4px; }
.badge { width: 16px; height: 16px; vertical-align: middle; }

.hidden { display: none !important; }
.error { color: var(--bad); min-height: 1.4em; }
.dim { color: var(--dim); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

#auth { max-width: 360px; margin: 12vh auto; padding: 0 16px; }
#auth h1 { font-size: 16px; line-height: 24px; }
#auth h1 small { font-size: 8px; color: var(--dim); }
#auth form { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
#auth .error { margin: 0; }
#auth-google { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; margin-bottom: 8px; }
#auth-google p { margin: 0; }
#google-btn { min-height: 44px; }
#auth-or { text-align: center; margin: 8px 0; }
#google-signup { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
#google-signup p { margin: 0; }
.shop { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.shop .price { color: var(--accent); }
#auth label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); }

#start { max-width: 900px; margin: 4vh auto; padding: 0 16px; }
#start h1 { color: var(--accent); font-size: 16px; line-height: 24px; }
#start h3 { color: var(--accent); font-size: 16px; line-height: 24px; }
.card.pick { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; text-align: left; font: inherit; color: var(--fg); padding: 2px 4px; margin: 0; }
.card.pick.on { border-image-source: url(assets/ui/card-on.png); color: var(--fg); filter: brightness(1.2); }
.card.pick.on b { color: var(--accent); }
.card.pick:hover:not(.on), .card.pick:active:not(.on) { border-image-source: url(assets/ui/card.png); filter: brightness(1.15); }
/* First idle frame, cropped around the feet and drawn at 2x. */
.portrait { width: 96px; height: 96px; margin: 0 auto 4px; background-size: 1200px 200px; background-position: -52px -40px; background-repeat: no-repeat; }


.bar { position: relative; width: 180px; height: 14px; background: #1a1411; border: 1px solid var(--edge); overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); box-shadow: inset 0 -3px 0 #8d6a2e; }
.bar > span { position: absolute; inset: 0; font-size: 8px; text-align: center; line-height: 12px;
  /* 1 px outline, no blur: the 8 neighbours */
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000; }
.vip { color: #ffc83d; }

/* Gold counter: the pack's currency panel, coin in its left compartment. */
.currency {
  position: relative; display: inline-block; min-width: 96px; height: 24px; line-height: 14px; padding-right: 2px; text-align: right;
  border: solid transparent; border-width: 5px 4px 5px 27px;
  border-image: url(assets/ui/currency.png) 5 4 5 27 fill / 5px 4px 5px 27px stretch;
}
.currency::before { content: ''; position: absolute; left: -23px; top: -1px; width: 16px; height: 16px; background: url(assets/icons/gold.png); }

/* ---- in-game layout: the hunt fills the screen, the UI floats over it ---- */
#game { position: fixed; inset: 0; overflow: hidden; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; image-rendering: pixelated; }

#hud-left { position: absolute; top: 8px; left: 8px; z-index: 5; display: flex; flex-direction: column; gap: 4px; width: 230px; }
#hud-account { padding: 2px 6px 4px; display: flex; flex-direction: column; gap: 4px; }
#hud-account .bar { width: 100%; }
#party-hud { display: flex; flex-direction: column; gap: 4px; }
/* One card per party member; inside it, the hero's and the weapon's panels. */
.member { padding: 2px 4px 4px; display: flex; flex-direction: column; gap: 3px; }
.member.front { border-image-source: url(assets/ui/card-on.png); }
.member.fallen { opacity: .55; }
.hero-card, .weapon-card { padding: 2px 4px 3px; background: #1a1411; border: 1px solid var(--line); }
.weapon-card > .row:first-child { flex-wrap: nowrap; white-space: nowrap; }
.weapon-card .wname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.weapon-card > .row:first-child > span:last-child { flex-shrink: 0; }
.hero-card .bar { width: 100%; height: 12px; margin-top: 2px; }
.hero-card .bar.st { height: 4px; }
.hero-card .bar > div { box-shadow: none; }
.hero-card .bar.st > div { background: #c89b4a; }
.hero-card .bar.hp > div { background: var(--good); }
.hero-card .bar.hp.low > div { background: #ffc83d; }
.hero-card .bar.hp.crit > div { background: var(--bad); }
.hero-card .bar.xp { height: 12px; }
.hero-card .bar.xp > div { background: #6aa8ff; }
.hero-card .bar.xp > span { line-height: 12px; }
.weapon-card .bar { width: 100%; height: 12px; margin-top: 2px; }
.weapon-card .bar > div { box-shadow: none; }
.weapon-card .bar > span { line-height: 12px; }
.weapon-card .bar.souls > div { background: #b46cff; }
.weapon-card .bar.dur > div { background: var(--dim); }
.weapon-card .bar.dur.low > div { background: #ffc83d; }
.weapon-card .bar.dur.crit > div { background: var(--bad); }
.weapon-card .bar.cd > div { background: var(--accent); }
.weapon-card .bar.cd.ready > div { background: var(--good); }

/* Title bar: the hunt's name only. */
#title-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px; }
#hunt-status { padding: 2px 16px; color: var(--accent);
  font-size: 16px; line-height: 24px; white-space: nowrap; max-width: calc(100vw - 600px); overflow: hidden; text-overflow: ellipsis; }
#hunt-status.picking { color: var(--fg); }
.town-arrow { font-size: 16px; line-height: 16px; padding: 2px 4px; }
#hunt-info { padding: 2px 6px 4px; }
.hunt-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; padding-right: 18px; }
#hud-right { position: absolute; top: 8px; right: 8px; z-index: 5; }

#log { position: absolute; left: 56px; bottom: 88px; z-index: 4; width: min(420px, calc(100vw - 16px)); max-height: 128px; overflow-y: auto;
  padding: 4px 6px; background: #120e0ccc; border: 1px solid var(--line); pointer-events: auto; }
#log:empty { display: none; }
#log div { white-space: pre-wrap; }

/* Toolbar: one slot per window, lit while that window is open. */
#toolbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; height: 80px; display: flex; justify-content: center; align-items: center; gap: 6px;
  border: 8px solid transparent; border-image: url(assets/ui/panel.png) 11 fill / 8px stretch; }
.tb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; padding: 0 4px; }
#toolbar button { width: 46px; height: 46px; padding: 0; display: grid; place-items: center;
  border-width: 7px; border-image: url(assets/ui/card.png) 8 fill / 7px stretch; }
#toolbar button:hover:not(:disabled) { border-image-source: url(assets/ui/card-hover.png); }
#toolbar button.on { border-image-source: url(assets/ui/card-on.png); }
#toolbar img { width: 32px; height: 32px; }
.tb-item > span { font-size: 8px; line-height: 8px; color: var(--dim); white-space: nowrap; }
.tb-item:has(button.on) > span { color: var(--accent); }
.tb-item:has(button:hover) > span { color: var(--fg); }

/* Windows: framed, draggable by the title, closable; the last touched is on top. */
#windows { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.window { position: absolute; pointer-events: auto; display: flex; flex-direction: column; max-width: calc(100vw - 16px); max-height: calc(100vh - 160px); }
.win-title { display: flex; align-items: center; gap: 6px; padding: 0 0 4px 2px; cursor: move; user-select: none; touch-action: none;
  font-size: 16px; line-height: 24px; color: var(--accent); border-bottom: 1px solid var(--line); }
.win-title .spacer { flex: 1; }
.win-close { border-width: 4px 5px; padding: 2px 3px; min-width: 20px; min-height: 18px; line-height: 8px; font-size: 8px; vertical-align: middle; }
.win-body { overflow: auto; padding: 6px 2px 2px; min-height: 0; }
.win-body h3 { margin: 8px 0 6px; font-size: 8px; line-height: 14px; color: var(--accent); display: flex; align-items: center; gap: 6px; text-transform: uppercase; }
.win-body h3:first-child { margin-top: 0; }

@media (max-width: 760px) {
  #hud-left { width: 180px; }
  #title-bar { top: auto; bottom: 72px; }
  #hunt-status { font-size: 8px; line-height: 16px; max-width: calc(100vw - 120px); }
  #hud-left { width: auto; right: 76px; }
  #party-hud { flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-right: -68px; }
  .member { flex: 1 1 160px; }
  #log { max-height: 64px; bottom: 72px; }
  #toolbar { height: 64px; gap: 0; border-width: 6px; }
  .tb-item { min-width: 46px; padding: 0 2px; }
  #toolbar button { width: 38px; height: 38px; border-width: 5px; }
  #toolbar img { width: 24px; height: 24px; }
  .tb-item > span { font-size: 6px; line-height: 6px; }
  .window { left: 8px !important; right: 8px; top: 8px !important; width: auto !important; max-height: calc(100vh - 160px); }
  .win-title { cursor: default; }
}
table { border-collapse: collapse; width: 100%; }
td, th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--dim); font-weight: normal; }
tr.current td { background: var(--row); }
.el-agua { color: var(--agua); } .el-fogo { color: var(--fogo); } .el-natureza { color: var(--natureza); }
.adv { color: var(--good); } .dis { color: var(--bad); }
.card { padding: 2px 4px; margin-bottom: 8px; }
.card > b:first-child { display: inline-flex; align-items: center; gap: 4px; }

#chat-box { height: 320px; overflow-y: auto; margin-bottom: 8px; }
#chat-box .who { color: var(--accent); }


#modal { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 20; }
#modal-body { padding: 6px 8px; max-width: 420px; width: calc(100% - 32px); }
#toast { position: fixed; top: 48px; z-index: 21; left: 50%; transform: translateX(-50%); padding: 2px 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
#toast.show { opacity: 1; }
#toast.err { color: var(--bad); }

/* Party slots: empty, filled (gold frame) and locked (grey frame + lock). */
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.slot.filled { border-image-source: url(assets/ui/card-on.png); }
.slot.locked { border-image: url(assets/ui/card-locked.png) 8 / 8px stretch; background: #241e1a; background-clip: padding-box; color: var(--dim); }
.stats { display: grid; grid-template-columns: auto auto auto auto; gap: 0 8px; white-space: nowrap; }
.stats > span { color: var(--dim); }
.warn { color: #ffc83d !important; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }

/* Weapon icon: rarity frame around the weapons glyph, equipped badge on top. */
.wicon { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.wicon.q0 { background: url(assets/ui/rarity-0.png); } .wicon.q1 { background: url(assets/ui/rarity-1.png); }
.wicon.q2 { background: url(assets/ui/rarity-2.png); } .wicon.q3 { background: url(assets/ui/rarity-3.png); }
.wicon.q4 { background: url(assets/ui/rarity-4.png); }
.wicon .badge { position: absolute; top: 6px; right: 6px; }
.wcell { display: flex; gap: 8px; align-items: center; }

/* ---- bag: tabs, a grid of 48×48 slots (pack frames), action bar ---- */
.bag-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.bag-tabs button { border-width: 7px; border-image: url(assets/ui/tab.png) 7 fill / 7px stretch; padding: 0; line-height: 0; }
.bag-tabs button:hover:not(:disabled) { border-image-source: url(assets/ui/tab.png); filter: brightness(1.2); }
.bag-tabs button.on { border-image-source: url(assets/ui/tab-active.png); }
.bag-grid { display: grid; grid-template-columns: repeat(6, 48px); gap: 2px; justify-content: center; }
.bag-slot { position: relative; width: 48px; height: 48px; padding: 0; border: 0; display: grid; place-items: center;
  background: url(assets/ui/card.png) center / 48px 48px no-repeat; border-image: none; }
.bag-slot:hover:not(.empty) { background-image: url(assets/ui/card-hover.png); }
.bag-slot.sel { background-image: url(assets/ui/card-on.png); }
.bag-slot.empty { opacity: .55; }
.bag-slot .qty { position: absolute; right: 6px; bottom: 5px; font-size: 8px; line-height: 8px; color: #fff3dc;
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000; }
.bag-bar { display: flex; gap: 4px; align-items: center; margin-top: 6px; }

/* Hover tooltip (data-tip). */
#tip { position: fixed; z-index: 40; max-width: 260px; padding: 2px 8px; line-height: 14px; pointer-events: none; }

/* ---- forge: recipe slots, absorb pair ---- */
.forge-grid { grid-template-columns: repeat(4, 48px); margin-top: 4px; }
.bag-slot.off { opacity: .45; }
.bag-slot .qdot { position: absolute; left: 7px; top: 7px; width: 4px; height: 4px; }
.absorb-pair { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.absorb-pair .arrow { color: var(--accent); }
.absorb-pair .bag-slot.empty.big { opacity: .8; }
.absorb-preview { display: flex; flex-direction: column; gap: 2px; margin-left: 6px; }

/* Town services away from town: a lock on the toolbar slot and in the window. */
#toolbar button.locked { position: relative; }
#toolbar button.locked img { opacity: .4; }
#toolbar button.locked::after { content: ''; position: absolute; right: -2px; top: -2px; width: 16px; height: 16px; background: url(assets/ui/badge-locked.png); }
.locked-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; color: var(--dim); }

/* ---- town: walk left/right between places; chat button over the log ---- */
#chat-btn { position: absolute; left: 8px; bottom: 88px; z-index: 5; width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border-width: 6px; border-image: url(assets/ui/card.png) 8 fill / 6px stretch; }
#chat-btn img { width: 24px; height: 24px; }
#party-hud { cursor: pointer; }
#toolbar button:disabled { opacity: .4; }