/* ---------------------------------------------------------------------------
   DigitalBlock (/digital-block). Kept out of assets/css/main.css on purpose,
   loaded via $app_styles (see system/views/header.php) — this game's whole
   front end lives under assets/apps/digital_block/ as one self-contained unit,
   same reasoning system/apps/qr_code_generator's own studio.css follows.

   Canvas is a fixed-size viewport (960x720) stretched by CSS: width:100%;
   height:auto keeps its exact aspect ratio at any screen width. The world
   itself (world.js's WORLD_HEIGHT) is much taller than this viewport and
   "grows aos poucos" by editing that number later; game.js's camera scrolls
   vertically to follow the player and keep them on screen, Zelda-style, so
   the page itself never scrolls.

   Own accent var (wp-dblock-cor), independent of the rest of the site — same
   pattern .wp-galaxy/.wp-run use for their own accent colors.
   --------------------------------------------------------------------------- */

.wp-dblock {
  --wp-dblock-cor: #00F6FF;
}

.wp-dblock__visitante {
  color: rgba(255, 255, 255, 0.5);
}

.wp-dblock__visitante a {
  color: var(--wp-dblock-cor);
}

.wp-dblock__campo {
  position: relative;
  min-width: 0;
  overflow: hidden; /* keeps the building menu clipped to the field when it opens near an edge */
}

.wp-dblock__canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: #05050a;
  touch-action: none;
}

.wp-dblock__barra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.wp-dblock__som {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  user-select: none;
}

.wp-dblock__som:hover {
  color: rgba(255, 255, 255, 0.75);
}

.wp-dblock__som input {
  accent-color: var(--wp-dblock-cor);
  cursor: pointer;
}

/* Context menu for a clicked building. Positioned by game.js in percentages of
   the field rather than in pixels, so it stays glued to the spot that was
   clicked no matter how the canvas is scaled by CSS. */
.wp-dblock__menu {
  position: absolute;
  z-index: 2;
  min-width: 190px;
  padding: 0.5rem;
  background: rgba(5, 5, 10, 0.94);
  border: 1px solid var(--wp-dblock-cor);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(0, 246, 255, 0.25);
}

.wp-dblock__menu-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1.6;
  color: var(--wp-dblock-cor);
  margin: 0 0 0.5rem;
}

.wp-dblock__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.35rem 0.45rem;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.wp-dblock__menu-item:hover:not(:disabled) {
  border-color: var(--wp-dblock-cor);
  color: #fff;
}

.wp-dblock__menu-item:disabled {
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

.wp-dblock__menu-breve {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.25);
}

/* The "want to go to the game?" dialog, opened when the avatar walks into one of
   the Gaming Street's buildings. Same skin as the context menu above, but parked
   in the middle of the field instead of at a clicked point: this one interrupts,
   so it goes where the eyes already are. */
.wp-dblock__dialogo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 240px;
  max-width: 80%;
  padding: 1rem;
  text-align: center;
  background: rgba(5, 5, 10, 0.96);
  border: 1px solid var(--wp-dblock-cor);
  border-radius: 3px;
  box-shadow: 0 0 26px rgba(0, 246, 255, 0.3);
}

.wp-dblock__dialogo-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 1.6;
  color: var(--wp-dblock-cor);
  margin: 0 0 0.6rem;
}

.wp-dblock__dialogo-texto {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 0.9rem;
}

.wp-dblock__dialogo-botoes {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.wp-dblock__dialogo-sim,
.wp-dblock__dialogo-nao {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  cursor: pointer;
}

.wp-dblock__dialogo-sim {
  background: var(--wp-dblock-cor);
  border: 1px solid var(--wp-dblock-cor);
  color: #05050a;
  font-weight: 600;
}

.wp-dblock__dialogo-nao {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
}

.wp-dblock__dialogo-nao:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* The city hall's panel. Same skin again, parked in the top-left corner rather
   than the middle: it is something you read, not something that interrupts you,
   and it leaves the avatar visible standing in the hall while you read it. */
.wp-dblock__painel {
  position: absolute;
  z-index: 3;
  left: 4%;
  top: 8%;
  min-width: 230px;
  padding: 0.9rem;
  background: rgba(5, 5, 10, 0.96);
  border: 1px solid var(--wp-dblock-cor);
  border-radius: 3px;
  box-shadow: 0 0 22px rgba(0, 246, 255, 0.25);
}

.wp-dblock__painel-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1.6;
  color: var(--wp-dblock-cor);
  margin: 0 0 0.7rem;
}

.wp-dblock__painel-linha {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 0.35rem;
}

.wp-dblock__painel-linha strong {
  color: #fff;
}

.wp-dblock__painel button {
  margin-top: 0.6rem;
}

/* The bank's box. Centred like the game dialog, because it interrupts the walk
   and asks a question, but wearing the bank's green instead of the city's cyan
   so it is obvious at a glance which building you are standing in. */
.wp-dblock__banco {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 250px;
  max-width: 80%;
  padding: 1rem;
  text-align: center;
  background: rgba(5, 5, 10, 0.96);
  border: 1px solid #4ade80;
  border-radius: 3px;
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.28);
}

.wp-dblock__banco .wp-dblock__painel-titulo {
  color: #4ade80;
}

.wp-dblock__banco-saldo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 1rem;
}

/* the options. Links, not buttons, because that is what they are — and styling
   them as buttons anyway would hide the fact that they open somewhere else. */
.wp-dblock__banco-opcao {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.4rem;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.85);
}

.wp-dblock__banco-opcao:hover {
  border-color: #4ade80;
  color: #fff;
  background: rgba(74, 222, 128, 0.08);
}

.wp-dblock__banco button {
  margin-top: 0.4rem;
}

/* `hidden` has to actually hide things.
 *
 * This shipped broken and is worth a comment rather than a one-line fix. The HTML
 * `hidden` attribute is not magic: it is a single `[hidden] { display: none }` rule in
 * the browser's own stylesheet, with the specificity of a bare attribute selector. Any
 * class in here that sets a `display` of its own therefore BEATS it — which is exactly
 * what happened the moment .wp-dblock__janela below needed `display: flex` for its
 * scrolling body. Both windows opened on page load, stacked on each other, and their
 * close buttons dutifully set hidden = true and did nothing visible at all.
 *
 * Every box in this app is shown and hidden through that attribute, so the guard goes
 * here once, scoped to the game, rather than being remembered on each new panel. */
.wp-dblock [hidden] {
  display: none;
}

/* =========================================================================
   THE WINDOWS: a pedestrian's file, the job board, the city's finances and a
   shop counter. All four are built by panels.js into empty shells in the view.

   They share the city hall panel's language (near-black, one cyan hairline,
   pixel font for headings and a normal sans for anything that is actually read)
   and differ only in size and in where they sit. A ficha is a small card you
   glance at; the board and the finances are things you sit with, so they are
   bigger, centred, and allowed to scroll.
   ========================================================================= */

/* the file on whoever you just clicked. Pinned bottom-left, away from the
   advisor's strip and the coin counter, and small enough that the person it is
   about is still visible walking off down the street behind it. */
.wp-dblock__ficha {
  position: absolute;
  z-index: 3;
  left: 3%;
  bottom: 14%;
  width: 230px;
  padding: 0.85rem;
  background: rgba(5, 5, 10, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.8);
  border-radius: 3px;
  box-shadow: 0 0 22px rgba(125, 211, 252, 0.2);
}

.wp-dblock__ficha-nome {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: #fff;
  margin: 0 0 0.8rem;
}

.wp-dblock__ficha-tipo {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

.wp-dblock__ficha-pensa {
  font-family: system-ui, sans-serif;
  font-style: italic;
  font-size: 0.8rem;
  color: #7dd3fc;
  margin: 0.7rem 0 0;
}

.wp-dblock__ficha-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0.3rem 0 0;
}

/* the meters. Four of them stacked IS the ficha: a bar you can read sideways
   beats four numbers you have to compare. */
.wp-dblock__medidor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.wp-dblock__medidor-nome {
  flex: 0 0 4.2rem;
  font-family: system-ui, sans-serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-dblock__medidor-trilho {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
  overflow: hidden;
}

.wp-dblock__medidor-fill {
  height: 100%;
  background: var(--wp-dblock-cor);
}

.wp-dblock__medidor-valor {
  flex: 0 0 1.6rem;
  text-align: right;
  font-family: system-ui, sans-serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.75);
}

/* the two big windows. Centred, capped to the field, and the BODY is what
   scrolls rather than the window — so the title and the close button never
   wander off the top and bottom of a long payroll. */
.wp-dblock__janela {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 86%);
  max-height: 86%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: rgba(5, 5, 10, 0.97);
  border: 1px solid var(--wp-dblock-cor);
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(0, 246, 255, 0.22);
}

.wp-dblock__janela-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.3rem;
}

.wp-dblock__janela-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 1rem 0 0.5rem;
}

.wp-dblock__janela-intro {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.7rem;
}

.wp-dblock__janela-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 0.6rem;
}

.wp-dblock__janela-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.5rem 0 0;
}

.wp-dblock__janela-nota--alerta {
  color: #ffd166;
}

.wp-dblock__janela-botao {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.55rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #04060c;
  background: var(--wp-dblock-cor);
  border: 1px solid var(--wp-dblock-cor);
  border-radius: 2px;
  cursor: pointer;
}

.wp-dblock__janela-botao--sair {
  color: #f8b4b4;
  background: transparent;
  border-color: rgba(248, 113, 113, 0.5);
}

/* a grid of cards, for picking a role or a district. Cards rather than a
   <select>, because the thing that decides the choice is the two lines of
   explanation under each one, and a dropdown cannot show them. */
.wp-dblock__opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.4rem;
}

.wp-dblock__opcao {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  cursor: pointer;
}

.wp-dblock__opcao:hover {
  border-color: rgba(0, 246, 255, 0.5);
}

.wp-dblock__opcao.is-on {
  border-color: var(--wp-dblock-cor);
  background: rgba(0, 246, 255, 0.08);
}

.wp-dblock__opcao strong {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  line-height: 1.5;
  color: #fff;
}

.wp-dblock__opcao span {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
}

.wp-dblock__opcao em {
  font-family: system-ui, sans-serif;
  font-style: normal;
  font-size: 0.68rem;
  color: #4ade80;
}

/* the finance tabs */
.wp-dblock__abas {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 0.8rem;
}

.wp-dblock__aba {
  flex: 1;
  padding: 0.45rem 0.2rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.wp-dblock__aba.is-on {
  color: var(--wp-dblock-cor);
  border-bottom-color: var(--wp-dblock-cor);
}

.wp-dblock__caixa {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.3rem;
  color: #4ade80;
  text-align: center;
  margin: 0.6rem 0 0.2rem;
}

/* one day of the ledger: the date, two bars, and the numbers. No axis and no
   grid, because the only question is whether more went out than came in. */
.wp-dblock__dia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.wp-dblock__dia-data {
  flex: 0 0 2.6rem;
  font-family: system-ui, sans-serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-dblock__dia-barras {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-dblock__dia-barra {
  height: 6px;
  min-width: 2px;
  border-radius: 1px;
}

.wp-dblock__dia-barra--entrou {
  background: #4ade80;
}

.wp-dblock__dia-barra--saiu {
  background: #f87171;
}

.wp-dblock__dia-valor {
  flex: 0 0 5.2rem;
  text-align: right;
  font-family: system-ui, sans-serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-dblock__equipe-cargo {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}

.wp-dblock__controles {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.6rem 0 0;
}

/* V1 needs a keyboard, not a mouse. On a coarse pointer the whole field goes
   away and this note takes its place, same technique .wp-galaxy uses for the
   opposite case (a mouse-only shooter) — better to say so than hand someone
   an unplayable game. */
.wp-dblock__aviso-teclado {
  display: none;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  padding: 1.5rem 1rem;
  text-align: center;
  margin: 0;
}

@media (pointer: coarse) {
  .wp-dblock__campo,
  .wp-dblock__barra,
  .wp-dblock__controles {
    display: none;
  }

  .wp-dblock__aviso-teclado {
    display: block;
  }
}