/* ============================================================
   CAPYBARA SAFETY INSPECTOR — UI
   Mundo: canvas pixel-art. Interface: DOM (acessível, escalável).
   ============================================================ */

:root {
  --ui-scale: 1;
  --text-scale: 1;
  --c-bg: #10181f;
  --c-panel: #1d2a35;
  --c-panel-2: #24384a;
  --c-border: #0a0f14;
  --c-line: #3d5468;
  --c-text: #e8f0e8;
  --c-dim: #9fb4c4;
  --c-capy: #7cb518;       /* verde capacete */
  --c-capy-dark: #5a8a0f;
  --c-brown: #8a5a34;
  --c-alert: #ffd23f;
  --c-danger: #e5383b;
  --c-info: #4ea8de;
  --c-ok: #57cc99;
  --shadow: 0 4px 0 rgba(0,0,0,.45);
  --px-border: 3px;
  --radius: 4px;
  font-size: calc(16px * var(--ui-scale));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Segoe UI", "Noto Sans", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}

body.hc {
  --c-panel: #000000;
  --c-panel-2: #101010;
  --c-line: #ffffff;
  --c-dim: #dddddd;
  --c-border: #ffffff;
}

.hidden { display: none !important; }

/* ---------- Palco ---------- */
#app {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100vh * 16 / 9));
  max-height: 100vh;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background: #0b1116;
}

#ui-root {
  position: absolute;
  inset: 0;
  pointer-events: none; /* filhos reativam */
  font-size: calc(1rem * var(--text-scale));
}
#ui-root > * { pointer-events: auto; }

/* ---------- Painéis / botões base ---------- */
.hud-panel, .ui-panel {
  background: var(--c-panel);
  border: var(--px-border) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .4em .6em;
}
body.hc .hud-panel, body.hc .ui-panel { outline: 2px solid #fff; }

.ui-btn, .hud-btn {
  font: inherit;
  color: var(--c-text);
  background: var(--c-panel-2);
  border: var(--px-border) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 rgba(0,0,0,.5);
  padding: .45em .9em;
  cursor: pointer;
  text-align: left;
}
.ui-btn:hover, .hud-btn:hover { background: #2f4a61; }
.ui-btn:focus-visible, .hud-btn:focus-visible,
select:focus-visible, input:focus-visible {
  outline: 3px solid var(--c-alert);
  outline-offset: 1px;
}
.ui-btn:active, .hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.ui-btn.primary { background: var(--c-capy-dark); border-color: #223311; }
.ui-btn.primary:hover { background: var(--c-capy); color: #14210a; }
.ui-btn.danger { background: #7a1f21; }
.ui-btn.danger:hover { background: var(--c-danger); }
.ui-btn.small { padding: .15em .5em; font-size: .85em; }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }

kbd {
  font-family: inherit;
  font-size: .78em;
  background: #0d141b;
  border: 1px solid var(--c-line);
  border-bottom-width: 3px;
  border-radius: 3px;
  padding: 0 .35em;
  color: var(--c-alert);
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

#hud-top {
  position: absolute;
  top: .5em; left: .5em; right: .5em;
  display: flex;
  gap: .5em;
  align-items: flex-start;
  justify-content: space-between;
}

#hud-status { min-width: 11em; }
.hud-bar-row { display: flex; align-items: center; gap: .4em; margin: .15em 0; }
.hud-bar-ico { width: 1.2em; text-align: center; }
.hud-bar {
  flex: 1; height: .8em;
  background: #0d141b;
  border: 2px solid var(--c-border);
  border-radius: 3px;
  overflow: hidden;
}
.hud-bar-fill { height: 100%; width: 100%; transition: width .3s; }
.hud-bar-fill.tranq { background: linear-gradient(90deg, #57cc99, #80ed99); }
.hud-bar-fill.tranq.low { background: linear-gradient(90deg, #e5383b, #ff7b00); }
.hud-bar-fill.focus { background: linear-gradient(90deg, #4ea8de, #a2d2ff); }

#hud-objective { text-align: center; max-width: 40%; }
#hud-obj-text { font-weight: 600; }
#hud-timer { color: var(--c-alert); font-variant-numeric: tabular-nums; }
#hud-timer.urgent { color: var(--c-danger); animation: blink 1s steps(2) infinite; }

#hud-area { text-align: right; }
#hud-area-name { font-weight: 700; color: var(--c-dim); }
#hud-counters { font-size: .9em; }

#hud-alert {
  position: absolute;
  top: 4.2em; left: 50%;
  transform: translateX(-50%);
  background: var(--c-danger);
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  border: var(--px-border) solid #5c0002;
  border-radius: var(--radius);
  padding: .3em 1em;
  animation: blink 1s steps(2) infinite;
}
body.reduced-fx #hud-alert, body.reduced-fx #hud-timer.urgent { animation: none; }

#hud-caption {
  position: absolute;
  top: 6.6em; left: 50%;
  transform: translateX(-50%);
  background: rgba(13,20,27,.9);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  padding: .2em .8em;
  font-style: italic;
  color: var(--c-dim);
}

@keyframes blink { 50% { opacity: .35; } }

#hud-bottom {
  position: absolute;
  bottom: .5em; left: .5em; right: .5em;
  display: flex;
  gap: .5em;
  align-items: flex-end;
  justify-content: space-between;
}

#hud-toolbar { display: flex; gap: .35em; }
.tool-slot {
  width: 3em; height: 3em;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #0d141b;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1em;
  color: var(--c-text);
  position: relative;
}
.tool-slot .t-ico { font-size: 1.3em; line-height: 1; }
.tool-slot .t-key { font-size: .55em; color: var(--c-dim); }
.tool-slot.selected { border-color: var(--c-alert); background: #33270a; }
.tool-slot.selected::after {
  content: "";
  position: absolute; inset: -6px;
  border: 2px dashed var(--c-alert);
  border-radius: 6px;
}

#hud-hint { font-weight: 600; }
#hud-hint kbd { margin-right: .3em; }

#hud-quick { display: flex; gap: .4em; background: transparent; border: none; box-shadow: none; padding: 0; }

/* ---------- Tutorial ---------- */
#tutorial-tip {
  position: absolute;
  top: 8.4em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .5em;
  max-width: 34em;
  background: var(--c-panel);
  border: var(--px-border) solid var(--c-alert);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .45em .7em;
  animation: toast-in .25s ease-out;
}
#tutorial-tip.tut-done { border-color: var(--c-ok); }
#tutorial-ico { font-size: 1.2em; }
#tutorial-text { line-height: 1.3; }
#tutorial-text kbd { margin: 0 .1em; }
body.reduced-fx #tutorial-tip { animation: none; }

/* ---------- Toasts ---------- */
#toasts {
  position: absolute;
  right: .6em; top: 5em;
  display: flex;
  flex-direction: column;
  gap: .4em;
  max-width: 24em;
  pointer-events: none;
}
.toast {
  background: var(--c-panel);
  border: var(--px-border) solid var(--c-border);
  border-left: 8px solid var(--c-info);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .45em .7em;
  animation: toast-in .25s ease-out;
}
.toast.ok { border-left-color: var(--c-ok); }
.toast.warn { border-left-color: var(--c-alert); }
.toast.danger { border-left-color: var(--c-danger); }
.toast .t-title { font-weight: 700; }
.toast .t-sub { font-size: .85em; color: var(--c-dim); }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } }
body.reduced-fx .toast { animation: none; }

/* ---------- Diálogo ---------- */
#dialog-box {
  position: absolute;
  left: 50%; bottom: 4.2em;
  transform: translateX(-50%);
  width: min(46em, 92%);
  display: flex;
  gap: .6em;
  background: var(--c-panel);
  border: var(--px-border) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .7em;
}
#dialog-portrait {
  width: 5rem; height: 5rem;
  flex: none;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: #0d141b;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem;
  line-height: 1;
  overflow: hidden;
}
#dialog-portrait img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
#dialog-main { flex: 1; min-width: 0; }
#dialog-name { font-weight: 800; color: var(--c-alert); margin-bottom: .15em; }
#dialog-text { line-height: 1.35; min-height: 2.6em; }
#dialog-choices { margin-top: .5em; display: flex; flex-direction: column; gap: .3em; }
#dialog-choices .ui-btn { font-size: .92em; }
#dialog-choices .ui-btn .c-fx { color: var(--c-dim); font-size: .85em; }
#dialog-continue { text-align: right; color: var(--c-dim); font-size: .85em; margin-top: .3em; }

/* ---------- Tablet ---------- */
#tablet {
  position: absolute; inset: 0;
  background: rgba(5,10,14,.72);
  display: flex; align-items: center; justify-content: center;
}
#tablet-frame {
  width: min(52em, 94%);
  height: min(30em, 92%);
  background: #202325;
  border: 6px solid #0a0c0d;
  border-radius: 12px;
  box-shadow: 0 10px 0 rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#tablet-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #17191b;
  padding: .35em .7em;
  border-bottom: 2px solid #000;
}
#tablet-title { font-weight: 800; color: var(--c-ok); }
#tablet-tabs {
  display: flex; gap: 2px;
  background: #17191b;
  padding: 0 .5em;
  flex-wrap: wrap;
}
.tab-btn {
  font: inherit;
  background: #26292c;
  color: var(--c-dim);
  border: 2px solid #000;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: .25em .8em;
  cursor: pointer;
}
.tab-btn.active { background: #31363a; color: var(--c-text); font-weight: 700; }
.tab-btn:focus-visible { outline: 3px solid var(--c-alert); }
#tablet-content {
  flex: 1;
  background: #31363a;
  padding: .8em;
  overflow-y: auto;
  line-height: 1.4;
}
#tablet-content h3 { color: var(--c-alert); margin: .6em 0 .3em; }
#tablet-content h3:first-child { margin-top: 0; }

.list-item {
  background: #26292c;
  border: 2px solid #000;
  border-radius: var(--radius);
  padding: .5em .7em;
  margin-bottom: .5em;
}
.list-item .li-title { font-weight: 700; display: flex; justify-content: space-between; gap: .5em; flex-wrap: wrap; }
.list-item .li-sub { color: var(--c-dim); font-size: .9em; }
.badge {
  display: inline-block;
  font-size: .75em;
  font-weight: 800;
  border-radius: 3px;
  padding: .05em .5em;
  border: 2px solid #000;
  vertical-align: middle;
}
.badge.low { background: #2d6a4f; color: #d8f3dc; }
.badge.moderate { background: #b08900; color: #fff8dc; }
.badge.high { background: #bc3908; color: #ffe8d6; }
.badge.critical { background: #85181a; color: #ffd6d9; }
.badge.neutral { background: #3d5468; color: #e8f0e8; }
.badge.cat { background: #1d3557; color: #cde7ff; }

/* ---------- Telas cheias ---------- */
#screen-root { position: absolute; inset: 0; pointer-events: none; }
.screen {
  position: absolute; inset: 0;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,13,18,.88);
  overflow-y: auto;
}
.screen.opaque { background: var(--c-bg); }
.screen-inner {
  width: min(46em, 94%);
  max-height: 96%;
  overflow-y: auto;
  background: var(--c-panel);
  border: var(--px-border) solid var(--c-border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 1.2em 1.4em;
}
.screen-inner.wide { width: min(56em, 96%); }

.game-title {
  font-size: 2.1em;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--c-capy);
  text-shadow: 3px 3px 0 #14210a;
  line-height: 1.05;
}
.game-subtitle { color: var(--c-alert); font-weight: 700; margin-top: .1em; }
.game-tagline { color: var(--c-dim); font-style: italic; margin: .6em 0 1em; }

.menu-buttons { display: flex; flex-direction: column; gap: .5em; max-width: 22em; }
.menu-buttons .ui-btn { font-size: 1.05em; font-weight: 700; }

/* Conta de jogador */
.account-panel { width: min(29em, 94%); }
.account-label { display: block; font-weight: 700; color: var(--c-dim); margin: .7em 0 .25em; }
.account-input {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--c-text);
  background: #0d141b;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  padding: .55em .65em;
}
.account-status { min-height: 1.5em; color: var(--c-ok); margin: .55em 0 !important; }
.account-status.error { color: #ff9b9d; }
.account-links { margin-top: .7em; }
.account-note { margin-top: .9em !important; font-size: .86em; }
.player-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  flex-wrap: wrap;
  margin: .7em 0;
  padding: .45em .6em;
  color: var(--c-dim);
  background: rgba(0,0,0,.18);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.screen h2 { color: var(--c-capy); margin-bottom: .5em; }
.screen h3 { color: var(--c-alert); margin: .8em 0 .3em; }
.screen p { margin: .35em 0; line-height: 1.4; }
.muted { color: var(--c-dim); }
.sep { border: none; border-top: 2px solid var(--c-line); margin: .8em 0; }

.row { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }

/* Configurações */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1em;
  padding: .35em 0;
  border-bottom: 1px solid var(--c-line);
}
.setting-row label { flex: 1; }
.setting-row select, .setting-row input[type="range"] {
  font: inherit;
  background: #0d141b;
  color: var(--c-text);
  border: 2px solid var(--c-line);
  border-radius: 3px;
  padding: .15em .3em;
  min-width: 9em;
}
.bind-btn { min-width: 9em; text-align: center; }
.bind-btn.listening { background: var(--c-alert); color: #14210a; font-weight: 800; }

/* Relatório */
.report-risk {
  background: var(--c-panel-2);
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  padding: .6em .8em;
  margin-bottom: .8em;
}
.report-risk .rr-head { display: flex; justify-content: space-between; gap: .6em; flex-wrap: wrap; align-items: center; }
.report-risk .rr-title { font-weight: 800; }
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  gap: .5em .8em;
  margin-top: .5em;
}
.report-grid .fld label { display: block; font-size: .8em; color: var(--c-dim); font-weight: 700; }
.report-grid .fld select, .report-grid .fld input {
  width: 100%;
  font: inherit;
  background: #0d141b;
  color: var(--c-text);
  border: 2px solid var(--c-line);
  border-radius: 3px;
  padding: .2em .3em;
}
.check-list { display: flex; flex-direction: column; gap: .2em; margin-top: .3em; }
.check-list label {
  display: flex; gap: .45em; align-items: flex-start;
  font-size: .92em;
  cursor: pointer;
  padding: .12em .3em;
  border-radius: 3px;
}
.check-list label:hover { background: rgba(255,255,255,.06); }
.check-list input { margin-top: .25em; accent-color: var(--c-capy); }
.hier-tag { font-size: .72em; font-weight: 800; padding: 0 .4em; border-radius: 3px; border: 1px solid #000; }
.hier-1 { background: #2d6a4f; } .hier-2 { background: #40916c; }
.hier-3 { background: #1d3557; } .hier-4 { background: #6d597a; }
.hier-5 { background: #b08900; color:#111; } .hier-6 { background: #9d0208; }

/* Resultado */
.grade-big {
  font-size: 4em;
  font-weight: 900;
  text-shadow: 4px 4px 0 #000;
  line-height: 1;
}
.grade-S { color: #ffd700; } .grade-A { color: #80ed99; } .grade-B { color: #57cc99; }
.grade-C { color: #ffd23f; } .grade-D { color: #ff7b00; } .grade-F { color: #e5383b; }
.score-row { display: flex; justify-content: space-between; gap: .8em; padding: .15em 0; border-bottom: 1px dashed var(--c-line); }
.score-row .pts { font-variant-numeric: tabular-nums; font-weight: 700; }
.pts.pos { color: var(--c-ok); } .pts.neg { color: var(--c-danger); }
.fb-item { border-left: 5px solid var(--c-line); padding: .3em .6em; margin: .4em 0; background: rgba(0,0,0,.18); }
.fb-item.good { border-left-color: var(--c-ok); }
.fb-item.bad { border-left-color: var(--c-danger); }
.fb-item.warn { border-left-color: var(--c-alert); }

.ind-row { display: flex; align-items: center; gap: .6em; margin: .3em 0; }
.ind-row .ind-name { width: 8em; font-weight: 700; }
.ind-row .hud-bar { height: 1em; }
.ind-delta { font-weight: 800; min-width: 3em; text-align: right; }

/* ---------- Fade ---------- */
#fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
#fade.on { opacity: 1; pointer-events: auto; }
body.reduced-fx #fade { transition: none; }

/* Scrollbars discretos */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #10181f; }
::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 5px; }