/* Rastro — identidade: caderno de campo à noite na mata.
   Fundo de mata escura, texto cor de papel, latão como acento,
   verde-folha para estados bons, urucum para perigo. */
:root {
  --bg: #090c09; --bg2: #11160f; --panel: rgba(13, 17, 12, 0.82); --panel2: rgba(255, 255, 255, 0.035);
  --ink: #ece4d2; --muted: #a39d88; --faint: #6f6b5d; --line: rgba(236, 228, 210, 0.12);
  --brass: #d6a04a; --brass2: #f0c57a; --leaf: #8fb466; --urucum: #d65a3a; --water: #7fb2c4;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif; --body: 'Figtree', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--body); overflow: hidden; -webkit-font-smoothing: antialiased }
[hidden] { display: none !important }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0 }
button:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px }
kbd { display: inline-block; min-width: 20px; text-align: center; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: rgba(255, 255, 255, .05); font: 600 11.5px var(--mono); color: var(--ink) }
.eyebrow { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass) }

/* ------------------------------------------------ menu */
#menu { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(280px, 340px) 1fr; z-index: 30 }
#menuBg { position: absolute; inset: 0; width: 100%; height: 100% }
.menu-grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 70% 40%, transparent 30%, rgba(0, 0, 0, .55) 100%); }
.menu-side { position: relative; z-index: 2; padding: 44px 34px 28px; display: flex; flex-direction: column; gap: 34px; background: linear-gradient(90deg, rgba(6, 8, 6, .92), rgba(6, 8, 6, .55) 80%, transparent) }
.brand-mark { font: 900 64px/0.9 var(--display); letter-spacing: .02em; color: var(--ink); text-shadow: 0 2px 30px rgba(0, 0, 0, .6) }
.brand-sub { margin-top: 10px; font: italic 500 17px var(--display); color: var(--brass2) }
.menu-nav { display: flex; flex-direction: column; gap: 2px }
.menu-nav button { text-align: left; padding: 11px 14px 11px 16px; border-left: 2px solid transparent; display: flex; flex-direction: column; gap: 1px; transition: background .2s, border-color .2s }
.menu-nav button span { font: 700 19px var(--body); letter-spacing: .08em; text-transform: uppercase }
.menu-nav button i { font: normal 12px var(--body); color: var(--muted) }
.menu-nav button:hover { background: rgba(255, 255, 255, .04) }
.menu-nav button.on { border-color: var(--brass); background: linear-gradient(90deg, rgba(214, 160, 74, .16), transparent) }
.menu-nav button.on span { color: var(--brass2) }
.menu-foot { margin-top: auto; font: 11px var(--mono); color: var(--faint) }
.menu-main { position: relative; z-index: 2; overflow: auto; padding: 44px clamp(16px, 4vw, 56px) 40px }
.screen { display: none; max-width: 1060px; animation: rise .35s ease both }
.screen.on { display: block }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none } }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px }
.sc-head h2 { margin: 6px 0 0; font: 700 38px/1.05 var(--display); text-wrap: balance }
.sc-head p { margin: 6px 0 0; color: var(--muted); max-width: 60ch }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; backdrop-filter: blur(6px) }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) }
.grid > * { min-width: 0 }

/* cartões de mapa */
.map-card { text-align: left; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; transition: border-color .2s, transform .2s }
.map-card:hover { transform: translateY(-2px); border-color: rgba(214, 160, 74, .45) }
.map-card.sel { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset }
.map-card canvas { width: 100%; aspect-ratio: 16/8; display: block }
.map-card .mc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px }
.mc-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.mc-title b { font: 700 22px var(--display) }
.mc-region { font: 11px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase }
.mc-desc { color: var(--muted); font-size: 13.5px; line-height: 1.5 }
.pips { display: inline-flex; gap: 3px } .pips i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .15) } .pips i.on { background: var(--brass) }
.kv { display: grid; grid-template-columns: 98px 1fr; gap: 4px 10px; font-size: 13px } .kv dt { color: var(--faint); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px } .kv dd { margin: 0 }
.chips { display: flex; flex-wrap: wrap; gap: 5px } .chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04) } .chip.on { border-color: var(--leaf); color: #cfe6b2 }

/* cartões de item (armas, cães) */
.item { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s }
.item:hover { border-color: rgba(214, 160, 74, .45) }
.item.sel { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset }
.item canvas { width: 100%; height: 110px; display: block; border-radius: 8px; background: rgba(0, 0, 0, .25) }
.item b { font: 700 18px var(--display) } .item small { color: var(--brass2); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase } .item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45 }
.stat { display: grid; grid-template-columns: 82px 1fr 58px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.stat .bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden } .stat .bar div { height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass2)) }
.stat em { font: 11px var(--mono); font-style: normal; text-align: right; color: var(--ink) }

/* preparação da caçada */
.prep { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px }
@media (max-width: 900px) { .prep { grid-template-columns: 1fr } #menu { grid-template-columns: 1fr } .menu-side { padding-bottom: 0 } .menu-nav { flex-direction: row; flex-wrap: wrap } .menu-foot { display: none } .menu-main { padding-top: 10px } }
.prep-hero { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line) }
.prep-hero canvas { display: block; width: 100%; aspect-ratio: 16/9 }
.prep-hero .ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)) }
.prep-hero .ph-cap b { font: 700 30px var(--display); display: block } .prep-hero .ph-cap span { color: var(--muted); font-size: 13px }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px }
.field > label { font: 600 11px var(--mono); color: var(--faint); letter-spacing: .12em; text-transform: uppercase }
.pills { display: flex; flex-wrap: wrap; gap: 6px }
.pill { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 13.5px; transition: all .15s }
.pill:hover { border-color: rgba(214, 160, 74, .5) } .pill.sel { background: var(--brass); color: #1b1307; border-color: var(--brass); font-weight: 700 } .pill:disabled { opacity: .35; cursor: not-allowed }
.hour { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px }
.hour b { font: 600 22px var(--mono); color: var(--ink) }
.hour-sub { font-size: 12.5px; color: var(--muted) }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #0d1426, #3e4f80 18%, #f09060 26%, #8fc0e8 36%, #cfe2f2 50%, #8fc0e8 64%, #f09060 74%, #3e4f80 82%, #0d1426); outline: none }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--brass); cursor: pointer }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--brass); cursor: pointer }
.range-plain { background: rgba(255, 255, 255, .12) !important }
.loadout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.lo { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); text-align: left } .lo small { display: block; color: var(--faint); font: 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase } .lo b { font-size: 14.5px }
.note { color: var(--leaf); font-size: 13px; min-height: 18px; margin: 4px 0 14px }
.cta { width: 100%; padding: 16px 20px; border-radius: 12px; background: var(--brass); color: #1b1307; font: 800 17px var(--body); letter-spacing: .06em; text-transform: uppercase; transition: filter .15s, transform .15s }
.cta:hover { filter: brightness(1.08); transform: translateY(-1px) }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.toggle span { font-size: 14px } .toggle i { display: block; font-style: normal; color: var(--muted); font-size: 12.5px }
.sw { width: 42px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .15); position: relative; flex: none; transition: background .2s } .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: left .2s } .sw.on { background: var(--leaf) } .sw.on::after { left: 21px }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px }

/* ------------------------------------------------ carregando */
#loading { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: var(--bg) }
#loadBg { position: absolute; inset: 0; width: 100%; height: 100% }
.load-box { position: relative; padding: 0 clamp(16px, 5vw, 64px) 56px; width: min(720px, 100%) }
.load-map { font: 900 54px/1 var(--display) }
.load-text { margin: 12px 0 14px; color: var(--muted) }
.load-bar { height: 3px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden } #loadFill { height: 100%; width: 0; background: var(--brass); transition: width .3s }
.load-tip { margin-top: 18px; font: italic 500 16px var(--display); color: var(--brass2); max-width: 60ch }

/* ------------------------------------------------ jogo */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(5, 7, 5, .66); padding: 16px }
.ctp { text-align: center; cursor: pointer } .ctp b { display: block; font: 700 34px var(--display); margin-bottom: 8px } .ctp span { color: var(--muted) }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px }
.btn { padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06) } .btn.primary { background: var(--brass); color: #1b1307; border: 0; font-weight: 700 }
.pause-panel { width: min(620px, 100%) } .pause-panel h3, .sum-panel h3 { font: 700 34px var(--display); margin: 6px 0 4px }
.keys-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13px; color: var(--muted) }
.sum-panel { width: min(760px, 100%) } .sum-panel .row { display: grid; grid-template-columns: 1.2fr .7fr .6fr 1.5fr .5fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums } .sum-panel .stats { color: var(--muted); margin-top: 14px; font: 12.5px var(--mono) }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 0 1px 3px rgba(0, 0, 0, .85) }
#compass { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(560px, 76vw); height: 54px }
#dogLine { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); font: 600 12px var(--mono); color: var(--muted); letter-spacing: .04em; white-space: nowrap }
#dogLine b { color: var(--ink) } #dogLine .hot { color: var(--brass2) } #dogLine .bay { color: var(--urucum) }
#scoreLine { position: absolute; top: 176px; right: 18px; font: 11px var(--mono); color: var(--faint) }
#caption { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); max-width: min(720px, 86vw); text-align: center; font: italic 500 19px var(--display); color: var(--ink); opacity: 0; transition: opacity .6s }
#msgs { position: absolute; left: 18px; bottom: 18px; width: min(420px, 60vw); display: flex; flex-direction: column-reverse; gap: 5px }
.msg { padding: 6px 10px; border-left: 2px solid var(--faint); font-size: 13.5px; background: linear-gradient(90deg, rgba(8, 10, 8, .7), transparent); transition: opacity 1.5s }
.msg.good { border-color: var(--leaf) } .msg.warn { border-color: var(--brass) } .msg.bad { border-color: var(--urucum) } .msg.info { border-color: var(--water) } .msg.old { opacity: .35 }
#wbox { position: absolute; right: 22px; bottom: 20px; text-align: right; transition: opacity .6s }
#ammo { font: 700 32px var(--display); font-variant-numeric: tabular-nums } #wname { font: 11px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase }
#stam, #breath { position: absolute; left: 50%; transform: translateX(-50%); width: 160px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; transition: opacity .5s }
#stam { bottom: 26px } #breath { bottom: 34px } #stamFill, #breathFill { height: 100%; background: var(--ink) } #breathFill { background: var(--water) }
#cross { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 2px #000 }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font: 600 13px var(--mono); padding: 5px 10px; border-radius: 6px; background: rgba(8, 10, 8, .6); opacity: 0; transition: opacity .2s }
#hintLine { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); font-size: 13px; color: var(--muted) }
#progress { display: none; position: absolute; left: 50%; top: 62%; transform: translateX(-50%); width: 200px; height: 4px; background: rgba(255, 255, 255, .15); border-radius: 2px; overflow: hidden } #progFill { height: 100%; background: var(--brass) }
#scope { display: none; position: absolute; inset: 0; background: none }
#scope svg { position: absolute; inset: 0 }
#scZoom, #scBrace { position: absolute; left: 50%; transform: translateX(-50%); font: 600 12px var(--mono); color: #d8d2c0; letter-spacing: .08em; opacity: 0; transition: opacity .4s }
#scZoom { bottom: 9% } #scBrace { bottom: 5.5%; font-weight: 400; color: #a9b79a }
#bino { display: none; position: absolute; inset: 0; background: radial-gradient(circle at 37% 50%, transparent 0, transparent 27vmin, #000 28.5vmin), radial-gradient(circle at 63% 50%, transparent 0, transparent 27vmin, #000 28.5vmin); background-blend-mode: lighten; }
#bino.on { display: block; -webkit-mask: none }
#damage { position: absolute; inset: 0; transition: opacity .25s; opacity: 0; background: radial-gradient(circle, transparent 40%, rgba(150, 0, 0, .45)) }
#map { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(4, 6, 4, .5) }
.map-paper { position: relative; padding: 14px; border-radius: 6px; background: #d9cfb3; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); transform: rotate(-.6deg) }
#mapCanvas { width: min(82vh, 82vw); height: min(82vh, 82vw); display: block; border-radius: 2px }
.map-legend { position: absolute; left: 22px; bottom: 22px; font: 11px var(--mono); color: #2b2418; text-shadow: none; background: rgba(217, 207, 179, .85); padding: 6px 8px; border-radius: 4px; line-height: 1.6 }
#help { display: none; position: absolute; right: 18px; top: 46px; width: min(380px, 80vw); padding: 14px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; text-shadow: none }
#help h4 { margin: 0 0 6px; font: 700 18px var(--display) } #help p { margin: 6px 0; color: var(--muted) }

/* espera: relógio discreto e nome da região */
#watch { position: absolute; right: 22px; bottom: 74px; text-align: right; opacity: 0; transition: opacity .8s; font: 12px var(--mono); color: var(--muted); display: flex; flex-direction: column; gap: 2px }
#watch b { font: 600 22px var(--mono); color: var(--ink); letter-spacing: .02em } #watch i { color: var(--brass2); font-style: normal } #watch span { letter-spacing: .04em }
#region { position: absolute; left: 22px; top: 18px; opacity: 0; display: flex; flex-direction: column; gap: 2px; pointer-events: none }
#region b { font: italic 600 26px var(--display); color: var(--ink) } #region span { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass) }
#region.show { animation: regionIn 6s ease both }
@keyframes regionIn { 0% { opacity: 0; transform: translateY(6px) } 12% { opacity: 1; transform: none } 70% { opacity: 1 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { #region.show { animation: none; opacity: .9 } }

/* preparação da caçada (v0.3) */
.prep-left { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.sum-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px }
.sum-card .kv dd b { font: 700 15px var(--display) } .sum-card .kv dd i { color: var(--muted); font-size: 12px }
.sum-card .flow { margin: 0; color: var(--leaf); font-size: 13px }
.prep-form .field { margin-bottom: 14px } .prep-form .field > label { color: var(--brass) }
.lab-note { color: var(--faint); letter-spacing: 0; text-transform: none; font-weight: 400 }
.dogpill { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; padding: 6px 12px }
.dogpill small { font-size: 10.5px; opacity: .75; font-weight: 500 }
canvas.act { width: 100%; height: 54px; display: block; border-radius: 8px; border: 1px solid var(--line); margin-top: 6px }
.dog-age { margin: 2px 0 0 !important; font-size: 12px !important; color: var(--faint) !important }
.sum-panel .row b small { display: block; font: 11px var(--mono); color: var(--muted); font-weight: 400 }
.cta { animation: none } .pill, .cta, .btn { transition: background .15s, border-color .15s, color .15s, transform .15s }
.pill:active, .cta:active { transform: scale(.98) }
.dogpill .dognum { font-style: normal; font-size: 10px; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background: rgba(236,228,210,.85); color: #1a1a14; margin-right: 6px; vertical-align: 1px }

/* minimapa circular discreto (gira com o caçador) */
#minimap { position: absolute; top: 14px; right: 18px; width: 150px; height: 150px; border-radius: 50%; opacity: .86 }
/* lista dos cães: nome · estado · distância · direção */
#dogList { position: absolute; top: 194px; right: 18px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; font: 600 11px var(--mono); letter-spacing: .05em; color: var(--muted) }
#dogList .dl { display: flex; gap: 7px; align-items: baseline; white-space: nowrap; opacity: .9 }
#dogList .dl.sel b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236,228,210,.35) }
#dogList b { color: var(--ink); font-weight: 700; letter-spacing: .08em }
#dogList .st { font-weight: 600; font-size: 10px; letter-spacing: .09em }
#dogList .ds { color: var(--faint); font-weight: 500 }
#dogList .ar { display: inline-block; width: 12px; text-align: center; color: var(--ink); opacity: .75 }
#dogList .sel-all { font-size: 10px; color: var(--faint); font-weight: 500 }
/* nome acima do cão */
#dogTags { position: absolute; inset: 0 }
#dogTags .tag { position: absolute; transform: translate(-50%, -100%); text-align: center; font: 700 10px var(--mono); letter-spacing: .1em; color: rgba(236,228,210,.92); white-space: nowrap; transition: opacity .25s }
#dogTags .tag i { display: block; font: 500 9px var(--mono); letter-spacing: .06em; font-style: normal; opacity: .85 }
/* ---------------- base / acampamento */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px }
.tab { background: transparent; border: 1px solid rgba(236,228,210,.18); color: var(--muted); padding: 7px 14px; border-radius: 999px; font: 600 12px var(--mono); letter-spacing: .06em; cursor: pointer }
.tab.on { background: rgba(236,228,210,.12); color: var(--ink); border-color: rgba(236,228,210,.4) }
.base-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px }
.sc-head .note { margin: 8px 0 0; color: var(--brass2); font-size: 13px }
.lead { color: var(--muted); margin: 0 0 14px }
.kennel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px }
.dogcard { background: rgba(18,20,15,.72); border: 1px solid rgba(236,228,210,.1); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px }
.dogcard.sel { border-color: rgba(214,160,74,.55) }
.dogcard.gone { opacity: .6 }
.dc-top { display: flex; gap: 12px; align-items: flex-start }
.dc-top canvas { width: 150px; height: 71px; border-radius: 8px; background: #11130e; flex: none }
.dc-id { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.dc-id b { font: 700 15px var(--mono); letter-spacing: .1em; color: var(--ink) }
.dc-id small { color: var(--faint); font-size: 12px }
.dc-id .cond { font-style: normal; font-size: 12px; color: var(--brass2) }
.dc-needs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px }
.nb { display: grid; grid-template-columns: 70px 1fr 34px; gap: 6px; align-items: center; font-size: 11px; color: var(--muted) }
.nb .bar { height: 5px; background: rgba(236,228,210,.1); border-radius: 3px; overflow: hidden }
.nb .bar div { height: 100%; background: #a9b89a }
.nb.bad .bar div { background: #c98a5a } .nb.bad em { color: #d9a070 }
.nb em { font-style: normal; text-align: right; font-family: var(--mono) }
.dc-skill { display: flex; flex-direction: column; gap: 6px }
.dc-skill .sk { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; font-size: 11px }
.dc-skill .sk span { display: flex; justify-content: space-between; gap: 6px; color: var(--muted) }
.dc-skill .sk em { font-style: normal } .dc-skill .sk b { color: var(--brass2); letter-spacing: 1px; font-weight: 400 } .dc-skill .sk b i, .dogpill small i { color: rgba(236,228,210,.18); font-style: normal }
.dc-skill .at { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--faint) } .dc-skill .at b { color: var(--ink); font-family: var(--mono) }
.dc-act { display: flex; flex-wrap: wrap; gap: 6px }
.btn.sm { padding: 6px 11px; font-size: 12px }
.msgline { color: var(--brass2); min-height: 18px; font-size: 13px }
.load { font-size: 12px; color: var(--muted) } .load.bad { color: #d9a070 }
.trophy-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px }
.tb { background: rgba(18,20,15,.72); border: 1px solid rgba(236,228,210,.1); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px }
.tb small { color: var(--faint) } .tb b { font: 700 20px var(--mono); color: var(--ink) } .tb em { font-style: normal; font-size: 11px; color: var(--muted) }
.cta.warn, .btn.warn { background: #7a3a24 !important; font-size: 12px }
.dogrep { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; text-align: left }
.dogrep .dr { display: flex; flex-direction: column; gap: 1px; font-size: 12px } .dogrep b { font: 700 12px var(--mono); letter-spacing: .1em; color: var(--ink) } .dogrep span { color: var(--brass2) } .dogrep em { font-style: normal; color: var(--faint) }
/* ---------------- painel discreto da propriedade */
#kpanel { position: absolute; left: 18px; bottom: 132px; width: min(430px, 70vw); padding: 10px 13px; background: rgba(12,13,10,.72); border-left: 2px solid rgba(214,160,74,.6); border-radius: 4px; font: 12px var(--mono); color: var(--muted); display: flex; flex-direction: column; gap: 4px; pointer-events: none }
#kpanel .kp-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap } #kpanel .kp-h b { color: var(--ink); letter-spacing: .12em; font-size: 13px } #kpanel .kp-h span { font-size: 11px; color: var(--faint) }
#kpanel .kp-st { color: var(--brass2); font-size: 11px }
#kpanel .kp-row { display: flex; gap: 6px 14px; flex-wrap: wrap } #kpanel .kp-row i { font-style: normal; color: var(--brass2); letter-spacing: 1px }
#kpanel .dim { color: var(--faint); font-size: 11px } #kpanel .warn { color: #d9a070 }
#kpanel .kp-k { display: flex; gap: 4px 12px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: var(--faint) } #kpanel kbd { font-size: 10px }
#kpanel .kp-msg { color: var(--ink); font-size: 11px; min-height: 0 }
.prop-card { background: rgba(18,20,15,.72); border: 1px solid rgba(236,228,210,.12); border-radius: 12px; overflow: hidden; max-width: 860px }
.prop-card canvas { width: 100%; height: auto; display: block } .pc-body { padding: 16px; display: flex; flex-direction: column; gap: 12px }

/* ---------- multiplayer LAN ---------- */
.txt { width: 100%; box-sizing: border-box; margin: 6px 0 10px; padding: 10px 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(232,224,204,.22); border-radius: 8px; color: var(--ink, #ece4d2); font: 500 16px 'Figtree', system-ui, sans-serif; outline: none; }
.txt:focus { border-color: rgba(232,190,120,.6); }
.txt.code { font: 600 22px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
#sc-mp .panel .btn, #sc-mp .panel .cta { display: block; width: 100%; margin-top: 10px; }
#sc-mp .cta[disabled] { opacity: .45; cursor: default; }
#sc-mp h2 { font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; }
.mp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(0,0,0,.2); border-radius: 6px; }
.mp-row b { font-weight: 600; } .mp-row span { font: 600 11px 'JetBrains Mono', monospace; color: #e0b070; } .mp-row em { font-style: normal; font-size: 13px; color: #b9d79a; }
.mp-row.off { opacity: .5; }
#mpBanner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(20,18,14,.9); border: 1px solid rgba(232,224,204,.25); border-radius: 8px; color: #ece4d2; font: 500 14px 'Figtree', system-ui, sans-serif; }
#mpBanner[hidden] { display: none; }
#mpBanner b { color: #e8a070; } #mpBanner span { opacity: .75; }
#mpBanner button { background: rgba(232,224,204,.12); color: inherit; border: 1px solid rgba(232,224,204,.3); border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; }

/* ajuste fino dos gráficos */
.gfx-adv { border: 1px solid rgba(236,228,210,0.14); border-radius: 8px; padding: 8px 12px; }
.gfx-adv > summary { cursor: pointer; font-weight: 600; margin-bottom: 4px; }
.gfx-adv .field { margin-top: 10px; }