:root {
  --bg: #0e1117;
  --surface: #161b24;
  --surface-2: #1d2430;
  --surface-3: #252d3b;
  --border: #2a3343;
  --text: #e6e9ef;
  --muted: #8a93a6;
  --accent: #4fb3ff;
  --gold: #f5c542;
  --gold-bg: rgba(245, 197, 66, 0.1);
  --silver: #aeb6c4;
  --code-V: #4fb3ff;
  --code-E: #4ade80;
  --code-L: #c084fc;
  --code-H: #fb923c;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }

/* ---------- Layout base (pensado para 800x600) ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg);
}

.topbar {
  flex: none;
  display: flex;
  align-items: stretch;
  height: 54px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 700;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}

.brand-logo {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #7c5cff);
  color: #fff;
  font-size: 14px;
}

.lang {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border-left: 1px solid var(--border);
}
.lang button {
  height: 26px;
  padding: 0 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lang button:hover { color: var(--text); }
.lang button.active { background: var(--surface-3); border-color: var(--border); color: var(--accent); }

.tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 0 auto;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 12px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.tab svg { width: 20px; height: 20px; fill: currentColor; }
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.panel.active { display: flex; }

.toolbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
}

.subinfo {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 0 12px 8px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.subinfo b { color: var(--text); font-weight: 600; }

.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

/* ---------- Controles ---------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  min-width: 0;
}
.search.grow { flex: 1 1 260px; }
.search svg {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  fill: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}
.search input:focus { border-color: var(--accent); }
.search input::placeholder { color: var(--muted); }

.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.seg button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: none;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface-3); color: var(--text); }
.seg .count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.seg .count.zero { opacity: 0.4; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--muted));
}

mark {
  background: rgba(79, 179, 255, 0.28);
  color: inherit;
  border-radius: 2px;
}

.empty {
  padding: 40px 12px;
  text-align: center;
  color: var(--muted);
}

/* ---------- Loja Digicode ---------- */
.code-group + .code-group { margin-top: 14px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c);
}
.group-head .n { color: var(--muted); font-weight: 400; font-size: 12px; }

.items {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c);
  border-radius: var(--radius);
  overflow: hidden;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 64px 96px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
}
.item-row + .item-row { border-top: 1px solid var(--border); }
.item-row:hover { background: var(--surface-2); }
.item-row.head {
  padding-top: 5px;
  padding-bottom: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.item-row .qty { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.item-row .qty.multi { color: var(--text); font-weight: 600; }
.item-row .cost {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.item-row .cost b { color: var(--c); font-size: 15px; }
.item-row .cost small { color: var(--muted); font-size: 11px; }
.item-row.head .cost { justify-self: end; }

/* ---------- Bosses ---------- */
.legend { display: flex; align-items: center; gap: 4px; }

.crown { width: 16px; height: 16px; flex: none; }
.crown.H { fill: var(--silver); }
.crown.S { fill: var(--gold); filter: drop-shadow(0 0 3px rgba(245, 197, 66, 0.45)); }

.region + .region { margin-top: 14px; }

.region-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px -12px 8px;
  padding: 10px 12px 6px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 700;
}
.region + .region .region-head { margin-top: 0; }
.region-head .n { color: var(--muted); font-weight: 400; font-size: 12px; }

.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
}

.loc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Cabeçalho do mapa: grande e fixo logo abaixo do nome da região ao rolar */
.loc-head {
  position: sticky;
  top: 24px;
  z-index: 1;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.loc-head svg { width: 17px; height: 17px; flex: none; fill: var(--accent); }
.loc-name { min-width: 0; }
.floor {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
}

.loc-body { padding: 6px 10px 8px; }

.loc .note {
  display: flex;
  gap: 5px;
  margin: 0 0 6px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.loc .note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; fill: var(--accent); }

.boss {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  margin: 0 -4px;
  border-radius: 5px;
}
.boss.S { background: var(--gold-bg); }
.boss.S .name { color: var(--gold); font-weight: 600; }

/* "Também neste mapa" (aparece durante a busca) */
.also {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.also-label {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.boss.other {
  width: calc(100% + 8px);
  border: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  opacity: 0.7;
  cursor: pointer;
}
.boss.other.S { background: var(--gold-bg); }
.boss.other:hover { opacity: 1; background: var(--surface-2); }

/* ---------- Dungeons ---------- */
.dungeon {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

/* Barra de posição + ações (acima do mapa) */
.dg-pos-card {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 8px 10px;
}
.dg-pos-card .card-label { margin-bottom: 4px; }
.pos-input { flex: none; width: 150px; }
.pos-input input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pos-input input:focus { border-color: #ff4d6d; }
.pos-input input::placeholder { font-size: 14px; font-weight: 400; color: var(--muted); }

.dg-status {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  border-left: 3px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.dg-status b { color: var(--text); }
.dg-status.ok { border-left-color: #2ecc71; color: var(--text); }
.dg-status.warn { border-left-color: #f1c40f; color: var(--text); }
.dg-status.bad { border-left-color: #ff4d6d; background: rgba(255, 77, 109, 0.1); color: var(--text); }
.dg-status.bad b { color: #ff4d6d; }
.arrow-inline { font-size: 16px; font-weight: 700; }

.dg-actions {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.dg-actions .primary { grid-row: span 2; }
.btn {
  min-width: 88px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary {
  min-width: 118px;
  background: #2ecc71;
  border-color: #2ecc71;
  color: #0b1a10;
  font-size: 14px;
}
.btn.primary:hover:not(:disabled) { background: #3ddc80; }

/* Mapa */
.map-wrap {
  position: relative;
  flex: none;
  align-self: flex-start; /* tamanho calculado em JS (fitMap): sem sobras em volta do labirinto */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: crosshair;
}
.dg-svg { display: block; width: 100%; height: 100%; }

.dg-grid line { stroke: var(--border); stroke-width: 0.03; }

.dg-dead line { stroke: #5b6475; stroke-width: 0.1; stroke-linecap: round; }
.dg-dead circle { fill: #5b6475; }

.dg-route { transition: opacity 0.2s; }
.dg-route polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 0.13;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dg-route .node { fill: var(--bg); stroke: var(--c); stroke-width: 0.08; }
.dg-route .tip { fill: var(--c); stroke: var(--bg); stroke-width: 0.08; }
.dg-route.current polyline { stroke-width: 0.18; }
.dg-route.done { opacity: 0.35; }
.dg-route.dim { opacity: 0.2; }

.dg-trail {
  fill: none;
  stroke: #fff;
  stroke-width: 0.26;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.45;
  pointer-events: none;
}

.dg-center circle:first-child { fill: var(--bg); stroke: #fff; stroke-width: 0.1; }
.dg-center circle:last-child { fill: #fff; }

.dg-next {
  fill: none;
  stroke: #fff;
  stroke-width: 0.08;
  stroke-dasharray: 0.2 0.12;
  pointer-events: none;
  animation: dg-spin 3s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes dg-spin { to { transform: rotate(360deg); } }

.dg-hover-mark { fill: none; stroke: #fff; stroke-width: 0.06; stroke-dasharray: 0.12 0.08; pointer-events: none; }

.dg-player { pointer-events: none; }
.dg-player .dot { fill: #ff4d6d; stroke: #fff; stroke-width: 0.1; }
.dg-player .pulse {
  fill: #ff4d6d;
  transform-box: fill-box;
  transform-origin: center;
  animation: dg-pulse 1.2s ease-out infinite;
}
.dg-player.lost .dot, .dg-player.lost .pulse { fill: #f39c12; }
@keyframes dg-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(3); opacity: 0; }
}

/* Contagem regressiva sobre o mapa */
.dg-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 110px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
  background: rgba(14, 17, 23, 0.55);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.dg-count.show { opacity: 1; animation: dg-pop 1s ease-out; }
.dg-count.go { font-size: 52px; color: #2ecc71; }
@keyframes dg-pop {
  from { transform: scale(1.3); }
  to { transform: scale(1); }
}

/* Painel lateral */
.dg-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.dg-subfloors button:disabled { opacity: 0.45; cursor: default; }
.dg-subfloors .soon {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--bg);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.card {
  flex: none;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.card-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Card da corrida */
.run-head { display: flex; align-items: center; gap: 8px; }
.run-head .card-label { margin: 0; }
.run-time { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.run-next { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
.dg-side .card { padding: 8px 10px; }
.run-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 10px;
  background: var(--surface-2);
  border: 2px solid var(--c);
  color: var(--c);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.run-next-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.run-next-pt { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.run-seq {
  display: flex;
  gap: 4px;
  min-height: 24px;
  margin-bottom: 6px;
  overflow: hidden;
}
.run-seq span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
}
.run-seq span:first-child { color: var(--text); }
.run-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.run-bar span { display: block; height: 100%; background: var(--c); transition: width 1s linear; }
.run-meta { margin-top: 5px; font-size: 12px; color: var(--muted); }
.run-meta b { color: var(--text); }

/* Lista de etapas */
.route-list { display: flex; flex-direction: column; gap: 4px; }
.route {
  display: grid;
  grid-template-columns: 20px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-left: 3px solid var(--c);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}
.route:hover { border-color: var(--border); border-left-color: var(--c); }
.route.active { border-color: var(--c); background: var(--surface-3); }
.route.done { opacity: 0.55; }
.stage-n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c);
  color: #111;
  font-size: 11px;
  font-weight: 800;
}
.route-name { font-weight: 700; }
.route-meta { justify-self: end; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.route-meta b { color: var(--text); font-weight: 600; }

.tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--c);
  color: #111;
  font-weight: 700;
  font-size: 12px;
}

.toggles { display: flex; gap: 14px; margin-top: 8px; }
.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.toggle input { accent-color: var(--accent); }

.dg-hover {
  flex: none;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
}
.dg-hover b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Dungeon 1F: grade com dois arranjos ---------- */
/* Normal: barra de posição em cima, mapa + menu embaixo.
   Minimizado (.compact): mapa com a altura toda; barra e menu reduzidos numa coluna ao lado. */
#dg-maze {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "map side";
  gap: 10px 12px;
  padding: 10px 12px;
}
#dg-maze[hidden] { display: none; }
#dg-maze .dungeon { display: contents; }
#dg-maze .dg-pos-card { grid-area: top; margin: 0; }
#dg-maze .map-wrap { grid-area: map; }
#dg-maze .dg-side { grid-area: side; min-height: 0; }

#dg-maze.compact { grid-template-areas: "map top" "map side"; }
#dg-maze.compact .dg-pos-card { flex-direction: column; gap: 6px; padding: 8px; }
#dg-maze.compact .pos-input { width: 100%; }
#dg-maze.compact .pos-input .card-label { display: none; }
#dg-maze.compact .dg-status { padding: 6px 8px; font-size: 12px; }
/* No minimizado, o texto de status só aparece para avisos (sem saída, fora da rota, pausado) */
#dg-maze.compact .dg-status:not(.warn):not(.bad) { display: none; }
#dg-maze.compact .dg-actions { grid-template-columns: 1fr auto auto; grid-template-rows: 32px; }
#dg-maze.compact .dg-actions .primary { grid-row: auto; min-width: 0; font-size: 13px; }
#dg-maze.compact .dg-actions .btn:not(.primary) { min-width: 0; }
#dg-maze.compact .run-arrow { width: 44px; height: 44px; font-size: 26px; }
#dg-maze.compact .run-next-pt { font-size: 20px; }
#dg-maze.compact .run-meta { display: none; }
#dg-maze.compact .route { padding: 3px 8px; }
#dg-maze.compact .route-meta { display: none; }
#dg-maze.compact .dg-side .card-label small { display: none; }
#dg-maze.compact .dg-hover { display: none; }

.dg-compact-btn { height: 32px; }
.dg-compact-btn.active { border-color: var(--accent); color: var(--accent); }
.dg-credit + .dg-compact-btn { margin-left: 4px; }

/* ---------- Dungeons: seletor de andar (comum a todas as dungeons) ---------- */
.dg-floorbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 0;
}
.floor-tabs { display: flex; gap: 6px; }
.floor-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.floor-tabs button b { color: var(--text); font-size: 15px; font-weight: 800; }
.floor-tabs button:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.floor-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #06121d;
  box-shadow: 0 0 0 3px rgba(79, 179, 255, 0.18);
}
.floor-tabs button.active b { color: #06121d; }
.dg-credit { margin-left: auto; font-size: 11px; color: var(--muted); opacity: 0.8; }

/* Seletor de andar/mapa da dungeon escolhida (ex.: Royal Base 1F | 2F) */
.dg-subfloors { padding: 2px; }
.dg-subfloors button { height: 26px; padding: 0 14px; font-size: 14px; font-weight: 800; }
.dg-subfloors button.active { background: var(--accent); color: #06121d; }

/* Rodapé: doação e créditos */
.site-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 4px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.site-footer b { color: var(--text); }
.donate-btn {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  background: #f5c542;
  color: #1a1400;
  font-weight: 800;
  text-decoration: none;
}
.donate-btn:hover { background: #ffd765; }
.ft-sep { opacity: 0.5; }

/* ---------- Dungeons: visões (1F corrida / 2F salas) ---------- */
.dg-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dg-view[hidden] { display: none; }

/* ---------- Dungeon de salas (Royal Base 2F) ---------- */
.rooms-map { cursor: pointer; }

.rb-cors polyline {
  fill: none;
  stroke: #9aa3b5;
  stroke-width: 0.03;
  stroke-linejoin: round;
  opacity: 0.55;
}
.rb-plan polyline, .rb-leg polyline {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.rb-plan polyline { stroke: #ff9f1a; stroke-width: 0.045; opacity: 0.35; }
.rb-leg polyline {
  stroke: #ff9f1a;
  stroke-width: 0.075;
  filter: drop-shadow(0 0 0.06px #ff9f1a) drop-shadow(0 0 0.12px rgba(255, 159, 26, 0.6));
}

.rb-room rect { fill: var(--surface-3); stroke: #4a5468; stroke-width: 0.02; }
.rb-room.special rect { fill: var(--c); stroke: rgba(0, 0, 0, 0.35); }
.rb-room text {
  fill: var(--text);
  text-anchor: middle;
  font-weight: 700;
  pointer-events: none;
}
.rb-room .rb-xy { font-size: 0.13px; }
.rb-room .rb-lbl { font-size: 0.1px; font-weight: 800; letter-spacing: 0.01px; }
.rb-room.special text { fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.02px; }
.rb-room.done rect { opacity: 0.35; }
.rb-room.done .rb-lbl { text-decoration: line-through; }
.rb-room:hover rect { stroke: #fff; }

/* Craniummon: sprite no canto da sala onde foi visto */
.rb-boss { pointer-events: none; }
.rb-boss .glow { fill: rgba(245, 197, 66, 0.28); animation: rb-glow 1.6s ease-in-out infinite; }
@keyframes rb-glow { 50% { fill: rgba(245, 197, 66, 0.08); } }
.rb-boss image {
  image-rendering: pixelated;
  filter: drop-shadow(0 0 0.02px #000) drop-shadow(0 0 0.05px rgba(245, 197, 66, 0.9));
}
.rb-boss text {
  fill: #f5c542;
  font-size: 0.1px;
  font-weight: 800;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 0.03px;
}

/* Modo "marcar Craniummon": cursor e destaque dourados */
#rb-map.marking { cursor: crosshair; box-shadow: 0 0 0 2px #f5c542; }
#rb-map.marking .rb-hover { stroke: #f5c542; stroke-width: 0.05; }

.chip-sprite { height: 20px; margin: -2px 0; image-rendering: pixelated; }
.goal-pin {
  flex: none;
  height: 26px;
  padding: 0 9px;
  background: var(--surface-2);
  border: 1px dashed #f5c542;
  border-radius: 6px;
  color: #f5c542;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.goal-pin:hover { background: var(--surface-3); }
.goal-pin.active { background: #f5c542; border-style: solid; color: #1a1400; }
.dg-status a { color: var(--accent); }

.rb-cur {
  fill: none;
  stroke: #ff4d6d;
  stroke-width: 0.05;
  pointer-events: none;
  animation: rb-blink 1.2s ease-in-out infinite;
}
@keyframes rb-blink { 50% { stroke-opacity: 0.35; } }
.rb-next {
  fill: none;
  stroke: #fff;
  stroke-width: 0.035;
  stroke-dasharray: 0.08 0.06;
  pointer-events: none;
}
.rb-hover { fill: none; stroke: var(--accent); stroke-width: 0.03; pointer-events: none; }
.rb-door circle { fill: #ff9f1a; stroke: #fff; stroke-width: 0.025; pointer-events: none; }
.rb-door .ping {
  fill: none;
  stroke: #ff9f1a;
  transform-box: fill-box;
  transform-origin: center;
  animation: rb-ping 1.1s ease-out infinite;
}
@keyframes rb-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3); opacity: 0; } }

/* Layout do 2F: barra em cima, mapa no meio, ordem/objetivos embaixo */
.rb-top {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 6px 8px;
}
.rb-pos { flex: none; width: 112px; display: flex; }
.rb-pos input {
  width: 100%;
  padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rb-pos input:focus { border-color: #ff4d6d; }
.rb-pos input::placeholder { font-size: 12px; font-weight: 400; color: var(--muted); }
.rb-doorbox {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 168px;
  padding: 0 8px 0 4px;
  border-radius: 6px;
  background: var(--surface-2);
}
.rb-doorbox .door-icon { width: 40px; height: 40px; }
.rb-doorbox .run-next-label { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); }
.rb-doorbox .run-next-label b { color: #ff9f1a; font-size: 13px; }
.rb-door-room { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-top .dg-status { font-size: 12px; padding: 4px 8px; }
.rb-top .dg-status small { color: var(--muted); }
.rb-top .btn { min-width: 80px; }
.rb-top .btn.primary { min-width: 104px; }

.rb-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 12px 0;
  padding: 1px 3px 1px 8px;
  background: rgba(245, 197, 66, 0.08);
  border: 1px solid rgba(245, 197, 66, 0.35);
  border-radius: var(--radius);
  font-size: 13px;
}
.rb-banner b { color: #f5c542; }
.rb-banner .banner-sprite { height: 22px; image-rendering: pixelated; }
.rb-banner .goal-pin { height: 22px; }
.rb-banner .banner-text { flex: 1; min-width: 0; }
.rb-banner a { color: var(--accent); }
.rb-banner.flash { animation: rb-flash 1.6s ease-out; background: rgba(245, 197, 66, 0.16); }
.rb-banner.marking { border-style: dashed; background: rgba(245, 197, 66, 0.14); }
@keyframes rb-flash {
  0%, 30% { background: rgba(245, 197, 66, 0.45); }
  100% { background: rgba(245, 197, 66, 0.16); }
}

.rb-mapbox {
  flex: none; /* altura = a do mapa (fit em js/rooms.js); a barra de baixo vem colada */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 5px 12px;
}
.rb-mapbox .map-wrap { position: relative; }

.rb-tip {
  position: absolute;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(14, 17, 23, 0.92);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
.rb-tip b { color: var(--text); }
.rb-credit { fill: var(--muted); font-size: 0.09px; text-anchor: end; opacity: 0.7; }

.rb-bottom {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 12px 6px;
  padding: 4px 8px;
}
.rb-order { display: flex; align-items: center; gap: 6px; }
.rb-order .card-label { margin: 0; }
.rb-goals { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.goal-chip.skipped { opacity: 0.55; border-style: dashed; border-bottom-style: dashed; }
.goal-chip.skipped .stage-n { background: var(--surface-3); color: var(--muted); }
.goal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px 0 4px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-bottom: 2px solid var(--c);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.goal-chip .stage-n { width: 18px; height: 18px; font-size: 10px; }
.goal-chip small { color: var(--muted); font-weight: 600; font-size: 10px; }
.goal-chip.active { border-color: var(--c); background: var(--surface-3); }
.goal-chip.done { opacity: 0.5; }

/* Ícone "sala com a porta destacada" */
.door-icon { width: 52px; height: 52px; flex: none; }
.door-icon .room { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; }
.door-icon text { fill: var(--text); font-size: 15px; font-weight: 800; text-anchor: middle; }

.goals-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.goals-head .card-label { margin: 0; }
.seg-sm { padding: 2px; }
.seg-sm button { height: 22px; padding: 0 8px; font-size: 11px; }
.route.goal .route-name small { color: var(--muted); font-weight: 600; font-size: 10px; }

/* ---------- Water Space ---------- */
#dg-water { padding: 8px 12px 10px; gap: 8px; overflow-y: auto; }
#dg-water[hidden] { display: none; }

.wt-daybar { flex: none; display: flex; align-items: center; gap: 6px; }
.wt-daybar .btn { height: 30px; min-width: 0; padding: 0 10px; }
.wt-daybar input[type="date"] {
  height: 30px;
  padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color-scheme: dark;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wt-weekday { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.wt-note { margin-left: auto; color: var(--muted); font-size: 11px; text-align: right; }
.wt-note.warn { color: #f1c40f; }

.wt-floors { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wt-floor { padding: 8px 10px; }
.wt-head .card-label { margin-bottom: 2px; }
.wt-answer { font-size: 17px; margin-bottom: 6px; }
.wt-answer b { color: #2ecc71; font-size: 20px; }
.wt-slots { display: flex; gap: 4px; }
.wt-slot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.wt-slot.on { background: #2ecc71; border-color: #2ecc71; color: #0b1a10; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2); }

.wt-f3 { flex: none; padding: 8px 10px; }
.wt-f3-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wt-f3-head .card-label { margin: 0; }
.wt-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.wt-flabel { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wt-filters .btn { height: 26px; min-width: 0; padding: 0 9px; font-size: 11px; }
.wt-filters .seg button.active { background: var(--accent); color: #06121d; }

.wt-result {
  margin: 6px 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border-left: 3px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.wt-result.ok { border-left-color: #2ecc71; color: var(--text); }
.wt-result.ok b { color: #2ecc71; font-size: 14px; }
.wt-result.bad { border-left-color: #ff4d6d; color: var(--text); }

.wt-caves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wt-cave {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: opacity 0.15s, border-color 0.15s;
  min-width: 0;
}
.wt-cave.hit { border-color: #2ecc71; background: rgba(46, 204, 113, 0.1); box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.18); }
.wt-cave.miss { opacity: 0.32; }
.wt-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--surface-3);
  font-weight: 800;
}
.wt-cave.hit .wt-num { background: #2ecc71; color: #0b1a10; }
.wt-body { min-width: 0; flex: 1; }
.wt-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-tags { display: flex; gap: 4px; margin: 2px 0; }
.wt-form, .wt-attr { padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.wt-form { background: var(--surface-3); color: var(--text); }
.wt-attr.a-Vaccine { background: #3498db; color: #06121d; }
.wt-attr.a-Virus { background: #9b59b6; color: #fff; }
.wt-attr.a-Data { background: #f39c12; color: #1a1000; }
.wt-beh {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wt-beh.none { color: var(--muted); opacity: 0.6; }

/* Water Space: alternância respostas x mapa, e mapa do andar 1 */
.wt-mode button.active { background: var(--accent); color: #06121d; }
.wt-answers { display: contents; }
.wt-answers[hidden], .wt-map1[hidden] { display: none; }
.wt-map1 { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wt-mapbar { flex: none; display: flex; align-items: stretch; gap: 8px; padding: 6px 8px; }
.wt-mapbar input {
  flex: none;
  width: 150px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wt-mapbar input:focus { border-color: #ff4d6d; }
.wt-mapbar input::placeholder { font-size: 12px; font-weight: 400; color: var(--muted); }
.wt-mapbar .dg-status { font-size: 12px; padding: 5px 8px; }
.wt-maptoday {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(241, 196, 15, 0.12);
  border: 1px solid rgba(241, 196, 15, 0.4);
  font-size: 12px;
  white-space: nowrap;
}
.wt-maptoday b { color: #f1c40f; font-size: 15px; margin-left: 4px; }

.wt-mapbox { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.wt-mapwrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: crosshair;
  background: #000;
}
.wt-mapwrap img { display: block; width: 100%; height: 100%; user-select: none; }
.wt-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.wt-today-ring {
  fill: none;
  stroke: #f1c40f;
  stroke-width: 8;
  stroke-dasharray: 22 14;
  transform-box: fill-box;
  transform-origin: center;
  animation: dg-spin 6s linear infinite;
}
.wt-dims circle { fill: #05070a; opacity: 0.72; pointer-events: none; }
.wt-hover { fill: none; stroke: #fff; stroke-width: 3; opacity: 0.8; pointer-events: none; }
.wt-pin { pointer-events: none; }
.wt-pin .dot { fill: #ff4d6d; stroke: #fff; stroke-width: 5; }
.wt-pin .pulse {
  fill: #ff4d6d;
  transform-box: fill-box;
  transform-origin: center;
  animation: dg-pulse 1.2s ease-out infinite;
}

/* Water Space: mapa do andar 2 (Cave B1) */
.wt-map2 { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wt-map2[hidden] { display: none; }
.wt-map2bar { flex: none; display: flex; padding: 6px 8px; }
.wt-map2bar .wt-maptoday { padding: 4px 10px; }
.wt-mapwrap2 { cursor: default; }

/* Water Space: mapa do andar 3 (Undersea) */
.wt-map3 { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wt-map3[hidden] { display: none; }
.wt-map3bar { flex: none; padding: 6px 8px; }
.wt-map3bar .wt-filters { margin-left: 0; }
.wt-map3bar .wt-result { margin: 6px 0 0; }
.wt-credit { margin-left: auto; color: var(--muted); font-size: 11px; opacity: 0.8; }
.wt-mapwrap3 { cursor: default; }
.wt3-cave .tag rect { fill: rgba(8, 16, 30, 0.82); stroke: rgba(255, 255, 255, 0.25); stroke-width: 2; }
.wt3-cave .tag .nm { fill: #fff; font-size: 23px; font-weight: 800; }
.wt3-cave .tag .sub { fill: #b9c4d6; font-size: 17px; font-weight: 700; }
.wt3-cave.hit .tag rect { fill: rgba(10, 60, 30, 0.9); stroke: #2ecc71; stroke-width: 4; }
.wt3-cave.hit .tag .sub { fill: #8ff0b5; }
.wt3-cave.miss .tag { opacity: 0.3; }
.wt3-cave .dim { fill: #05070a; opacity: 0.72; }
.wt3-cave .ring { fill: none; stroke: #2ecc71; stroke-width: 8; }
.wt3-cave .ping {
  fill: none;
  stroke: #2ecc71;
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;
  animation: rb-ping 1.3s ease-out infinite;
}

/* ---------- Telas menores ---------- */
@media (max-width: 560px) {
  .brand-name { display: none; }
  .tab { min-width: 80px; }
  .item-row { grid-template-columns: 1fr 44px 80px; padding: 7px 10px; }
  .dungeon { flex-direction: column; overflow-y: auto; }
  #dg-maze, #dg-maze.compact { display: flex; flex-direction: column; overflow-y: auto; }
  #dg-maze .dungeon { display: flex; }
  .map-wrap { height: auto; width: 100%; max-width: none; }
  .dg-side { overflow: visible; }
  .dg-pos-card { flex-direction: column; }
  .rb-top, .rb-bottom { flex-wrap: wrap; }
  .rb-top .dg-status { flex-basis: 100%; order: 3; }
  .rb-goals { flex-wrap: wrap; justify-content: flex-start; }
  .wt-floors { grid-template-columns: 1fr; }
  .wt-caves { grid-template-columns: 1fr 1fr; }
  .pos-input { width: 100%; }
}