/* BlockFinder: layout only. Cores, tipografia e botoes vem de main.css. */
[hidden], .hidden { display: none !important; }   /* #drop, #find-panel, #reader, #pick-missing, #err */

.bf-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: 20px;
	align-items: start;
}
@media (max-width: 900px) { .bf-grid { grid-template-columns: minmax(0, 1fr); } }

.bf-examples {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 16px;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.bf-examples label { color: var(--muted); font-size: 13px; }
.bf-examples .bf-hint { margin: 0; flex-basis: 100%; }
.bf-examples .bf-hint:empty { display: none; }

/* Cabecalho: o BETA fica menor e apagado para nao competir com o nome. O subtitulo tem o mesmo
   papel do "For Bedrock and Java Edition" do SeedCracker (o estilo vive no template de la'). */
.bf-beta { font-size: 0.42em; font-weight: 600; letter-spacing: 1px; vertical-align: super; color: var(--muted); }
.page-subtitle { margin: -2px 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; color: var(--text); }

/* Os dois selects fora de `.field` (o do exemplo e o do tipo de cada bloco) herdavam o controle cru
   do navegador. Propriedades em comum, com seta propria: `appearance: none` remove a nativa. */
.bf-examples select, .bf-blocks select {
	padding: 10px 38px 10px 12px;
	font: inherit; color: var(--text); cursor: pointer;
	background-color: var(--bg-2);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238b92a3' stroke-width='1.5' stroke-linecap='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	appearance: none;
}
.bf-examples select { min-width: 260px; max-width: 100%; }
/* Na lista o select divide a linha com as coordenadas e o x: cabe apertado, sem virar o elemento
   mais pesado do bloco. */
.bf-blocks select { flex: 1; min-width: 0; padding: 5px 26px 5px 8px; font-size: 12px; background-position: right 7px center; }
.bf-examples select:hover, .bf-blocks select:hover { border-color: var(--muted); }
.bf-examples select:focus-visible, .bf-blocks select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Corners span lado a lado: `input[type=number]` e' width:100% no main.css, entao os dois campos
   empilhavam. `.bf-span input` empata em especificidade e ganha por vir depois (base.html carrega
   o blockfinder.css depois do main.css). */
.bf-anchor-size { display: flex; flex-direction: column; gap: 6px; }
.bf-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); }
.bf-span { display: flex; align-items: center; gap: 8px; }
.bf-span input { width: 72px; }
.bf-span-unit { color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
	.bf-examples { flex-direction: column; align-items: stretch; }
	.bf-examples select { width: 100%; }
}

.bf-stage, .bf-panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
}
.bf-panel { display: flex; flex-direction: column; gap: 12px; }

.bf-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.bf-tabs .tab {
	font: inherit; cursor: pointer; padding: 6px 14px;
	background: var(--panel-2); color: var(--muted);
	border: 1px solid var(--line); border-radius: var(--radius);
}
.bf-tabs .tab.active { color: var(--green); border-color: var(--green); }

.bf-drop {
	border: 1px dashed var(--line-2); border-radius: var(--radius);
	padding: 22px; text-align: center; color: var(--muted); margin-bottom: 12px;
}
.bf-drop p { margin: 0 0 10px; }
#canvas {
	display: block; width: 100%; height: auto;
	aspect-ratio: var(--bf-frame, 16 / 9);
	border-radius: var(--radius); background: var(--bg-2); touch-action: none;
}
#mark-panel { position: relative; }
#bf-fullscreen {
	position: absolute; top: 8px; right: 8px;
	padding: 2px 10px; font-size: 16px; line-height: 1.2;
	background: var(--panel-2); border: 1px solid var(--line);
}
#mark-panel:fullscreen { background: var(--bg-2); padding: 0; }
#mark-panel:fullscreen #canvas { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* O painel de leitura nasce dentro do #mark-panel; no fullscreen ele fica de fora (o dono cortou
   esse item): tela cheia continua sendo so' a imagem. */
#mark-panel:fullscreen #reader { display: none; }
#mark-panel:fullscreen #bf-fullscreen { top: 12px; right: 12px; }

.bf-hint { color: var(--muted); font-size: 13px; margin: 8px 0; }
/* Mesmo negrito do SeedCracker ("The X and Z you enter must be..."): cor do texto, nao do hint. */
.bf-hint strong { color: var(--text); }
.bf-error { color: var(--red); font-size: 13px; margin: 8px 0; }

.bf-find { margin-top: 14px; }
.bf-actions { display: flex; gap: 10px; margin-top: 12px; }
.bf-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-results li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 8px 10px; cursor: pointer;
	font-family: var(--font-mono);
}
.bf-results li.sel { border-color: var(--gold); }
.bf-results .bf-copy { padding: 2px 10px; font-size: 12px; }
#f-note { margin-top: 8px; }
#f-more { margin-top: 8px; }

.bf-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-blocks li {
	display: flex; align-items: center; gap: 6px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 6px 8px; font-size: 13px; cursor: pointer;
}
.bf-blocks li.unresolved { opacity: 0.65; }
.bf-blocks li.done { border-color: var(--green); }
.bf-blocks li.selected { border-color: var(--gold); }   /* depois de .done: selecionado ganha */
.bf-blocks .del { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; }

/* Leitura do bloco embaixo da imagem: o recorte fica a' esquerda, as opcoes em 2x2 a' direita.
   No aside o painel tinha ~70px por tile e o jogador precisava dar zoom na PAGINA para ler.
   Metade para cada lado: recorte maior (o que se le) e tiles menores (o que se compara). */
#reader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.bf-reader-main { display: flex; flex-direction: column; gap: 8px; }
#reader .panel-subtitle { margin: 0 0 2px; }
@media (max-width: 640px) { #reader { grid-template-columns: minmax(0, 1fr); } }

.bf-crop { margin-top: 0; }
.bf-crop canvas { width: 100%; height: auto; image-rendering: pixelated; border-radius: var(--radius); }
.bf-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
/* Grama: cinza no arquivo (o jogo multiplica pela cor do bioma). Estes quatro passos reproduzem
   o multiplicado de planicie (#91BD59) com erro medio medido de 0.9/255 na textura 16x16. */
.bf-strip.tint-grass canvas { filter: sepia(1) saturate(2) hue-rotate(44deg) brightness(0.55); }
.bf-cand {
	display: flex; flex-direction: column; gap: 4px; padding: 4px;
	background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.bf-cand canvas { width: 100%; height: auto; image-rendering: pixelated; }
.bf-cand .tag { font-size: 11px; letter-spacing: 0.5px; color: var(--blue); }
/* Um anel por vez (outline nao empurra o layout): provisorio > gravado > sugestao. */
.bf-cand.best { outline: 2px solid var(--blue); outline-offset: -1px; }
.bf-cand.staged { outline: 2px dashed var(--gold); outline-offset: -1px; }
.bf-cand.chosen { outline: 2px solid var(--gold); outline-offset: -1px; }