/* Visual cinematográfico: somente cabeçalho, apresentação e moldura.
   O mapa, seus quadrados e o editor mantêm os estilos de style.css. */
.site-header {
  min-height: 70px;
  padding: 0 24px;
  border: 1px solid rgba(67, 220, 255, .28);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(3, 22, 36, .86), rgba(4, 24, 40, .42));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
}
.brand-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
.brand-copy strong { font-size: 20px; letter-spacing: .05em; }
.brand-copy span {
  margin: 0;
  color: #edfaff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
}
.nav-item { color: #c1d8e4; font-size: 13px; }
.nav-item.active { color: #ffffff; }
.system-chip { color: #8feaff; }
.hero {
  width: min(680px, 100%);
  max-width: 680px;
  margin: 34px 0 28px;
  padding: 24px 28px;
  border: 1px solid rgba(67, 220, 255, .48);
  border-radius: 16px;
  background: linear-gradient(115deg, rgba(3, 26, 43, .88), rgba(7, 35, 56, .46));
  box-shadow: inset 0 1px 0 rgba(215, 249, 255, .05), 0 16px 40px rgba(0, 0, 0, .22);
  backdrop-filter: blur(5px);
}
.hero-kicker { font-size: 9px; letter-spacing: .20em; color: #91d7e8; }
.hero h1 {
  margin: 10px 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: .015em;
}
.hero p { margin-bottom: 20px; color: #d0e3ed; font-size: 14px; }
.search-frame {
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(92, 224, 255, .8), rgba(92, 224, 255, .35));
  box-shadow: 0 0 16px rgba(0, 207, 255, .07);
}
.search-frame input {
  min-height: 48px;
  border-radius: 9px;
  background: rgba(4, 25, 42, .82);
  font-size: 14px;
}
.search-frame input::placeholder { color: #acc5d3; }
.search-frame input:focus { background: rgba(4, 30, 48, .95); }
.workspace-panel {
  border-color: rgba(67, 220, 255, .58);
  border-radius: 16px;
  background: rgba(3, 23, 39, .36);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .32), 0 0 20px rgba(0, 207, 255, .10);
}
.workspace-header {
  min-height: 80px;
  background: linear-gradient(100deg, rgba(5, 37, 60, .88), rgba(5, 31, 51, .56));
  border-bottom-color: rgba(100, 219, 246, .30);
}
.workspace-title strong { font-size: 20px; letter-spacing: .055em; }
.workspace-title small { margin-top: 5px; color: #bbd6e2; font-size: 12px; }
.panel-icon { color: #87eaff; background: rgba(25, 110, 147, .15); }
.map-tech { color: #8eeaff; background: rgba(3, 22, 36, .3); }
@media (max-width: 1050px) {
  .hero { margin-top: 26px; }
}
@media (max-width: 650px) {
  .site-header { min-height: 60px; padding: 0 14px; }
  .hero { margin: 20px 0; padding: 20px 16px; border-radius: 12px; }
  .hero h1 { font-size: clamp(28px, 7vw, 38px); }
  .hero p { font-size: 12px; }
  .hero-kicker { font-size: 8px; letter-spacing: .13em; }
  .search-frame input { font-size: 12px; padding-right: 10px; }
  .workspace-title strong { font-size: 16px; }
  .workspace-title small { font-size: 10px; }
}

/* Topo inspirado na referência, com a marca oficial de playark.com. */
.site-header {
  grid-template-columns: 1fr auto 1fr;
  min-height: 56px;
  padding: 0 clamp(14px, 5vw, 76px);
  gap: 24px;
  border: 0;
  border-bottom: 1px solid rgba(67, 220, 255, .78);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(2, 19, 32, .48), rgba(4, 32, 52, .24), rgba(2, 19, 32, .38));
  box-shadow: 0 3px 14px rgba(0, 207, 255, .13);
  backdrop-filter: none;
}
.brand-block { gap: 10px; }
.brand-logo {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}
.site-header .brand-copy strong,
.site-header .brand-copy span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .035em;
  color: #edfaff;
}
.site-header .main-nav { display: flex; height: 56px; gap: 8px; }
.site-header .nav-item { min-width: 70px; color: #d2e7f2; font-size: 12px; }
.site-header .nav-item.active { color: #fff; background: transparent; }
.site-header .nav-item.active::after { left: 19px; right: 19px; bottom: 8px; }
@media (max-width: 1050px) {
  .site-header { grid-template-columns: auto 1fr; padding: 0 16px; gap: 16px; }
  .site-header .main-nav { justify-content: flex-end; }
  .site-header .brand-copy strong,
  .site-header .brand-copy span { font-size: 17px; }
}
@media (max-width: 650px) {
  .site-header { grid-template-columns: 1fr; gap: 0; padding: 0 12px; }
  .site-header .brand-block { justify-content: center; }
  .site-header .main-nav { height: 42px; justify-content: center; gap: 0; }
  .site-header .nav-item { min-width: 0; flex: 1; max-width: 86px; }
  .site-header .nav-item.active::after { bottom: 2px; }
}

/* Navegação entre início e depósito. */
.site-header a.nav-item { text-decoration: none; }
.site-header a.nav-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.home-page { min-height: 100vh; }

/* Título do mapa à esquerda, com desenho de caixas empilhadas. */
.workspace-header {
  min-width: 0;
  justify-content: flex-start;
  padding: 20px 16px 12px;
}
.workspace-title { justify-content: flex-start; }
.workspace-title strong { text-align: left; }
.workspace-title .panel-icon { flex-shrink: 0; }
.workspace-title .panel-icon svg { display: block; }

.workspace-title .panel-icon {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

/* Imagens opcionais: mesmas dimensões e posições dos blocos. */
.square .block-dino-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.square.has-block-image .square-code,
.square.has-block-image .square-main,
.square.has-block-image .square-foot {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
  border-radius: 3px;
  background: rgba(1, 9, 14, .8);
  text-shadow: 0 1px 3px #000;
}
.square.has-block-image .square-foot { color: #c4dce3; }
.block-image-editor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(67, 220, 255, .16);
}
.block-image-preview {
  width: 90px;
  height: 76px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(67, 220, 255, .4);
  border-radius: 8px;
  background: rgba(0, 8, 12, .45);
  color: #8aaab7;
  font-size: 11px;
}
.block-image-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.block-image-controls { min-width: 0; display: grid; gap: 7px; }
.block-image-controls strong { font-size: 13px; }
.block-image-controls small, #blockImageStatus { color: #a8cbd4; font-size: 11px; }
.block-image-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.block-image-actions button { padding: 7px 10px; font-size: 12px; }
.block-image-actions button:disabled { opacity: .5; cursor: wait; }
.block-image-editor [hidden] { display: none !important; }
@media (max-width: 650px) {
  .block-image-editor { padding: 12px; gap: 10px; }
  .block-image-preview { width: 68px; height: 68px; }
}

/* Fechar modal: apenas o X, mantendo a área de clique. */
.square-dialog .dialog-header .icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.square-dialog .dialog-header .icon-btn:hover {
  color: var(--cyan);
  background: transparent;
}
.square-dialog .dialog-header .icon-btn:focus:not(:focus-visible) { outline: none; }
.square-dialog .dialog-header .icon-btn:focus-visible {
  outline: none;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Imagem em destaque; textos continuam disponíveis para leitores de tela. */
.deposit-grid .square .square-code,
.deposit-grid .square .square-main,
.deposit-grid .square .square-foot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Imagem individual de cada estação circular. */
.station-btn .station-dino-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
}
.station-btn.has-station-image .station-plus,
.station-btn.has-station-image .station-dino,
.station-btn.has-station-image .station-color {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.station-image-editor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(67, 220, 255, .16);
}
.station-image-editor .block-image-controls { flex: 1; min-width: 150px; }
.station-image-editor [hidden], .station-image-editor[hidden] { display: none !important; }
#stationImageStatus { font-size: 11px; color: #a8cbd4; }

/* Símbolos de sexo com maior contraste e tamanho. */
.sex-counter .sex-label { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sex-symbol { width:30px; height:34px; flex:0 0 30px; display:block; }
.sex-symbol-female { color:#f16b9b; }
.sex-symbol-male { color:#32b8e4; }

/* Painéis abertos para destacar a paisagem de fundo. */
.hero,
.workspace-panel,
.workspace-header,
.workspace-panel .deposit-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.hero-copy,
.workspace-title { text-shadow: 0 2px 5px rgba(0, 0, 0, .85); }

/* Mantém os outros blocos visíveis durante a busca. */
.deposit-grid .square.dim {
  opacity: .6;
  filter: grayscale(.15);
}

/* Paleta azul gelo e prata aprovada para a paisagem noturna. */
:root {
  --cyan: #a9cfe8;
  --cyan-strong: #c5e2f4;
  --text: #e8f1f7;
  --muted: #a6bbc9;
  --line: rgba(169, 207, 232, .36);
}
.site-header {
  border-bottom-color: rgba(169, 207, 232, .65);
  background: linear-gradient(90deg, rgba(10, 24, 38, .48), rgba(20, 38, 56, .24), rgba(10, 24, 38, .38));
  box-shadow: 0 3px 14px rgba(169, 207, 232, .10);
}
.hero-kicker { color: #b4ccd9; }
.hero h1 span { color: #a9cfe8; text-shadow: 0 0 26px rgba(169, 207, 232, .18); }
.hero p { color: #dce8f1; }
.search-frame {
  background: linear-gradient(100deg, rgba(169, 207, 232, .8), rgba(169, 207, 232, .45));
  box-shadow: 0 0 16px rgba(169, 207, 232, .07);
}
.search-frame input { background: rgba(20, 38, 56, .88); color: #e8f1f7; }
.search-frame input:focus { background: rgba(20, 38, 56, .95); }
.search-frame input::placeholder { color: #aec3d2; }
.deposit-grid .square,
.deposit-grid .square.single,
.deposit-grid .square.mixed {
  border-color: rgba(169, 207, 232, .46);
  background: linear-gradient(145deg, rgba(31, 49, 64, .72), rgba(8, 20, 31, .91));
}
.deposit-grid .square::before { background: linear-gradient(90deg, rgba(169, 207, 232, .75), transparent); }
.deposit-grid .square:hover {
  border-color: #c5e2f4;
  box-shadow: 0 0 20px rgba(169, 207, 232, .16), 0 10px 22px rgba(0, 0, 0, .35);
}
.deposit-grid .square.match {
  border-color: #c5e2f4;
  outline: 2px solid rgba(169, 207, 232, .62);
  box-shadow: 0 0 22px rgba(169, 207, 232, .24);
}

/* Azul gelo também no editor; cantos retos nos elementos retangulares. */
body .hero,
body .workspace-panel,
body .search-frame,
body .search-frame input,
body .deposit-grid .square,
body .square-dialog,
body .station-panel,
body .editor-panel,
body .station-layout,
body .counter-card,
body .block-image-preview,
body .block-image-preview img,
body .station-crop,
body .station-crop canvas:not(.station-crop-preview),
body input,
body textarea,
body button:not(.station-btn) {
  border-radius: 0 !important;
}
.square-dialog {
  border-color: rgba(169,207,232,.48);
  background: radial-gradient(circle at 0 0, rgba(169,207,232,.06), transparent 36%), rgba(10,20,31,.98);
  box-shadow: 0 34px 110px rgba(0,0,0,.78), 0 0 30px rgba(169,207,232,.10);
}
.square-dialog .dialog-header { background: rgba(15,28,41,.96); border-bottom-color: rgba(169,207,232,.2); }
.square-dialog .station-panel,
.square-dialog .editor-panel { background: rgba(20,38,56,.66); border-color: rgba(169,207,232,.22); }
.square-dialog .station-layout { background: rgba(8,18,29,.5); }
.square-dialog .station-btn:not(.custom-ring),
.square-dialog .station-btn.filled:not(.custom-ring) { border-color: rgba(169,207,232,.6); }
.square-dialog .station-btn,
.square-dialog .station-btn.filled { background: radial-gradient(circle, rgba(31,49,64,.95), rgba(8,18,29,.99) 70%); }
.square-dialog .station-btn:hover,
.square-dialog .station-btn.active { box-shadow: 0 0 18px rgba(169,207,232,.22); }
.square-dialog .station-btn:not(.custom-ring):hover,
.square-dialog .station-btn.active:not(.custom-ring) { border-color: #c5e2f4; }
.square-dialog .section-heading,
.square-dialog .block-image-editor,
.square-dialog .station-image-editor,
.square-dialog .station-ring-editor { border-bottom-color: rgba(169,207,232,.18); }
.square-dialog .section-heading span,
.square-dialog .counter-card > span { color: #dce8f1; }
.square-dialog .counter-card { background: rgba(8,18,29,.44); border-color: rgba(169,207,232,.18); }
.square-dialog input,
.square-dialog textarea { background: rgba(8,18,29,.8); border-color: rgba(169,207,232,.25); }
.square-dialog input:focus,
.square-dialog textarea:focus { border-color: #a9cfe8; box-shadow: 0 0 0 2px rgba(169,207,232,.12); }
.square-dialog button:not(.station-btn):not(.icon-btn) {
  border-color: rgba(169,207,232,.3);
  background: linear-gradient(180deg, rgba(36,57,76,.93), rgba(12,24,36,.97));
}
.square-dialog button:not(.station-btn):hover { border-color: #a9cfe8; }
.square-dialog .block-image-preview { background: rgba(8,18,29,.45); border-color: rgba(169,207,232,.4); }
.square-dialog .station-crop { background: #101f2e; border-color: #789cb5; }
.square-dialog .station-crop-preview { border-color: #a9cfe8; }

/* Estações diretamente no mapa, com corredores preservados. */
.deposit-grid {
  min-width:1284px;
  grid-template-columns: repeat(2,minmax(126px,1fr)) 42px repeat(2,minmax(126px,1fr)) 160px repeat(2,minmax(126px,1fr)) 42px repeat(2,minmax(126px,1fr));
  grid-template-rows:repeat(12,190px);
  gap:12px 6px;
  background:transparent;
  box-shadow:none;
}
.deposit-grid::before { display:none; }
.direct-station-group { min-width:0; }
.direct-station-group h3 { text-align:center; margin:0 0 12px; color:#dce8f1; font-size:14px; text-shadow:0 2px 4px #000; }
.direct-station-layout { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,32px); gap:8px 2px; }
.deposit-grid .direct-station {
  width:24px; max-width:100%; padding:0; gap:0; border-width:2px; border-color:rgba(169,207,232,.7);
  background:radial-gradient(circle,rgba(31,49,64,.95),rgba(8,18,29,.99) 70%);
  color:#dce8f1; font-size:10px;
}
.deposit-grid .direct-station.custom-ring::after { inset:-2px; padding:2px; }
.deposit-grid .direct-station .station-plus { font-size:10px; }
.deposit-grid .direct-station.dim { opacity:.6; filter:grayscale(.15); }
.deposit-grid .direct-station.match { outline:2px solid #c5e2f4; outline-offset:3px; box-shadow:0 0 12px rgba(169,207,232,.45); }
.deposit-grid .direct-station:hover { border-color:#c5e2f4; box-shadow:0 0 14px rgba(169,207,232,.35); }

/* Estações maiores para leitura e identificação das imagens. */
.deposit-grid {
  min-width:2528px;
  grid-template-columns:repeat(2,minmax(272px,1fr)) 56px repeat(2,minmax(272px,1fr)) 180px repeat(2,minmax(272px,1fr)) 56px repeat(2,minmax(272px,1fr));
  grid-template-rows:repeat(12,296px);
  gap:20px 12px;
}
.direct-station-group h3 { font-size:20px; margin-bottom:16px; }
.direct-station-layout {
  grid-template-columns:repeat(5,minmax(48px,1fr));
  grid-template-rows:repeat(4,48px);
  gap:18px 8px;
}
.deposit-grid .direct-station { width:48px; border-width:3px; font-size:16px; }
.deposit-grid .direct-station .station-plus { font-size:16px; font-weight:700; }
.deposit-grid .direct-station.custom-ring::after { inset:-3px; padding:3px; }
.deposit-card { scrollbar-color:#a9cfe8 rgba(8,18,29,.7); scrollbar-width:auto; }

/* Oito colunas adaptadas à largura da página, sem rolagem lateral. */
.app-shell { width:calc(100% - 24px); max-width:none; }
.workspace-panel, .deposit-card { min-width:0; width:100%; }
.deposit-card { overflow:visible; }
.deposit-grid {
  min-width:0; width:100%; box-sizing:border-box;
  grid-template-columns:repeat(2,minmax(0,1fr)) 2% repeat(2,minmax(0,1fr)) 6% repeat(2,minmax(0,1fr)) 2% repeat(2,minmax(0,1fr));
  grid-template-rows:none; grid-auto-rows:auto;
  gap:24px clamp(2px,.35vw,6px);
  padding:16px 4px;
}
.direct-station-group { container-type:inline-size; }
.direct-station-group h3 { font-size:clamp(12px,1.2vw,20px); }
.direct-station-layout {
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(4,min(48px,calc((100cqw - 16px)/5)));
  gap:clamp(6px,1vw,16px) 4px;
}
.deposit-grid .direct-station { width:100%; max-width:48px; min-width:0; border-width:2px; }
.deposit-grid .direct-station .station-plus { font-size:clamp(8px,8cqw,16px); }
.deposit-grid .direct-station.custom-ring::after { inset:-2px; padding:2px; }
@media(max-width:650px) {
  .app-shell { width:calc(100% - 12px); }
  .deposit-grid { padding:12px 0; column-gap:1px; row-gap:18px; }
  .direct-station-layout { column-gap:1px; grid-template-rows:repeat(4,min(48px,calc((100cqw - 4px)/5))); }
  .direct-station-group h3 { font-size:10px; margin-bottom:10px; }
  .deposit-grid .direct-station { border-width:1px; }
  .deposit-grid .direct-station.custom-ring::after { inset:-1px; padding:1px; }
}

/* Fundo contínuo com transição suave, abaixo do título do mapa. */
.workspace-panel { overflow:visible; }
.workspace-panel .deposit-card { position:relative; isolation:isolate; }
.workspace-panel .deposit-card::before {
  content:"";
  position:absolute;
  inset:0 -12px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 0, rgba(9,24,39,.72) 90px, rgba(9,24,39,.72) calc(100% - 90px), transparent 100%);
  border:0;
  box-shadow:none;
}
.deposit-grid .direct-station-group h3 { visibility:hidden; }
@media(max-width:650px) {
  .workspace-panel .deposit-card::before { left:-6px; right:-6px; }
}

/* Ampliação suave da estação, sem mudar sua posição no mapa. */
.station-btn { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; transform-origin:center; }
.direct-station-group { position:relative; }
.direct-station-group:hover, .direct-station-group:focus-within { z-index:2; }
.station-btn:focus-visible { transform:scale(1.35); z-index:3; }
@media(hover:hover) and (pointer:fine) {
  .station-btn:hover { transform:scale(1.35); z-index:3; }
  .deposit-grid .direct-station:hover { transform:scale(1.5); }
}
@media(prefers-reduced-motion:reduce) {
  .station-btn { transition:none; }
}

/* Editor individual, sem faixa superior ou mapa de outras estações. */
body .square-dialog {
  border:0;
  background:linear-gradient(90deg, transparent, rgba(10,24,38,.96) 5%, rgba(10,24,38,.96) 95%, transparent);
  box-shadow:none;
  padding:30px 24px;
  width:min(900px, calc(100vw - 24px));
}
.square-dialog .dialog-header { display:contents; }
.square-dialog .dialog-header > div { display:none; }
.square-dialog .dialog-header .icon-btn { position:absolute; top:8px; right:24px; z-index:5; }
.square-dialog .dialog-body { padding:12px 8px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.square-dialog .station-panel, .square-dialog .editor-panel,
.square-dialog .counter-card { border:0; background:transparent; box-shadow:none; }
.square-dialog .station-panel > .section-heading, .square-dialog #stationLayout { display:none; }
.square-dialog .station-image-editor, .square-dialog .station-ring-editor,
.square-dialog .sex-counter { border:0; }
.square-dialog .station-panel { padding-top:20px; }
@media(max-width:650px) {
  body .square-dialog { padding:32px 12px 20px; }
  .square-dialog .dialog-body { grid-template-columns:minmax(0,1fr); padding:8px 0; }
}

/* Editor mais claro e controles com acabamento moderno. */
body .square-dialog {
  background:linear-gradient(90deg,transparent,rgba(31,51,69,.65) 5%,rgba(31,51,69,.65) 95%,transparent);
}
.square-dialog .station-image-editor {
  display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; align-items:start;
}
.square-dialog .station-image-editor[hidden] { display:none; }
.square-dialog .station-image-editor .block-image-preview { margin:0; align-self:start; }
.square-dialog .station-image-editor .block-image-controls { min-width:0; }
.square-dialog .station-image-editor > small,
.square-dialog #stationImageStatus { grid-column:1 / -1; }
.square-dialog .station-image-editor > small { color:#c2d8e7; font-size:12px; line-height:1.5; }
.square-dialog .block-image-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.square-dialog button:not(.station-btn):not(.icon-btn) {
  background:linear-gradient(180deg,#3b5870,#263e52);
  border:1px solid rgba(176,207,228,.35);
  color:#edf6fc; padding:8px 12px; font-weight:600;
  box-shadow:0 2px 5px rgba(0,0,0,.16);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.square-dialog button:not(.station-btn):not(.icon-btn):hover {
  background:linear-gradient(180deg,#4c6c86,#344f67);
  border-color:#a9cfe8; box-shadow:0 3px 9px rgba(0,0,0,.2);
}
.square-dialog button:not(.station-btn):not(.icon-btn):focus-visible { outline:2px solid #d4ecff; outline-offset:2px; }
.square-dialog button:disabled { opacity:.5; cursor:not-allowed; }
.square-dialog .quick-row button { padding:5px 10px; }
.square-dialog .counter-btn { padding:6px; }
.square-dialog #saveStationBtn {
  background:linear-gradient(180deg,#4c829f,#325e7c); color:#fff; min-width:120px;
}
.square-dialog #saveStationBtn:hover { background:linear-gradient(180deg,#609bb8,#407494); color:#fff; }
.square-dialog #clearStationBtn { color:#ffd0da; }

/* Prévia circular e editor simplificado da estação. */
.square-dialog .station-image-editor .block-image-preview {
  width:90px; height:90px; aspect-ratio:1; border-radius:50%!important; overflow:hidden;
}
.square-dialog #stationImagePreview {
  width:100%; height:100%; object-fit:cover; border-radius:50%!important;
}
.square-dialog .editor-form > .counter-grid { display:none; }

/* Catálogo integrado às estações do depósito. */
.dinos-shell { width:calc(100% - 24px); max-width:none; margin:0 auto; padding:48px 0 64px; }
.dinos-intro { padding:0 28px; }
.dino-count { padding-left:28px; }
.dinos-intro h1 { margin:8px 0 12px; font-size:clamp(32px,4vw,48px); color:#a9cfe8; }
.dinos-intro p { color:#d0e3ed; margin:0 0 24px; }
.dinos-search { width:min(680px,100%); max-width:680px; margin-left:0; }
.dino-count { margin:24px 0 12px; color:#c2d8e7; font-size:13px; }
.dino-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.dino-row { display:grid; grid-template-columns:76px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:center; padding:18px 22px; background:linear-gradient(90deg,rgba(16,34,49,.82),rgba(24,43,59,.66),rgba(16,34,49,.82)); }
.dino-portrait { width:76px; height:76px; border-radius:50%!important; border:2px solid #86aac2; overflow:hidden; display:grid; place-items:center; background:rgba(6,19,29,.66); }
.dino-portrait img { width:100%; height:100%; object-fit:cover; border-radius:50%!important; }
.dino-no-image { color:#aec4d1; font-size:10px; }
.dino-name-cell,.dino-info-cell { display:grid; gap:7px; min-width:0; overflow-wrap:anywhere; }
.dino-name { font-size:18px; color:#edf6fc; }
.dino-location,.dino-field-label { font-size:11px; color:#aac4d4; }
.dino-value { font-size:14px; color:#e3eff7; white-space:pre-wrap; }
.dino-status { color:#b9d9ee; font-weight:600; }
.dino-empty { background:rgba(16,34,49,.72); padding:24px; color:#c2d8e7; }
.dino-empty[hidden] { display:none!important; }
@media(max-width:650px) {
  .dinos-shell { width:calc(100% - 12px); padding-top:28px; }
  .dinos-intro { padding:0 16px; }
  .dino-count { padding-left:16px; }
  .dino-row { grid-template-columns:64px minmax(0,1fr); gap:12px 16px; padding:16px; }
  .dino-portrait { width:64px; height:64px; }
  .dino-info-cell { grid-column:2; }
  .dino-name { font-size:16px; }
}

/* Fundo contínuo da lista, com o mesmo azul e bordas suaves do depósito. */
.dino-results { position:relative; isolation:isolate; padding:24px 0; }
.dino-results::before {
  content:""; position:absolute; inset:0 -12px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,transparent 0,rgba(9,24,39,.72) min(90px,25%),rgba(9,24,39,.72) max(calc(100% - 90px),75%),transparent 100%);
}
.dino-results .dino-row,.dino-results .dino-empty { background:transparent; border:0; box-shadow:none; }
.dino-results .dino-empty { margin:0; }
@media(max-width:650px) { .dino-results::before { left:-6px; right:-6px; } }

/* Keep the dino details together and show all six saved ARK regions. */
.dino-row { grid-template-columns:76px minmax(130px,200px) minmax(130px,220px) minmax(110px,180px) minmax(282px,1fr); gap:20px; }
.dino-regions-cell { display:grid; gap:9px; min-width:0; }
.dino-region-swatches { display:flex; gap:5px; flex-wrap:wrap; }
.dino-region-color { width:42px; height:22px; display:grid; place-items:center; font-size:11px; font-weight:600; border:0; border-radius:3px; }
@media(max-width:1050px) and (min-width:651px) {
 .dino-row { grid-template-columns:76px minmax(130px,1fr) minmax(120px,1fr) minmax(100px,1fr); }
 .dino-regions-cell { grid-column:2 / -1; }
}
@media(max-width:650px) {
 .dino-row { grid-template-columns:64px minmax(0,1fr); }
 .dino-regions-cell { grid-column:2; }
}

.dino-name-cell a.dino-name{width:fit-content;text-decoration:none;cursor:pointer}.dino-name-cell a.dino-name:hover{color:#a9cfe8;text-decoration:underline;text-underline-offset:4px}.dino-name-cell a.dino-name:focus-visible{outline:2px solid #a9cfe8;outline-offset:4px}

.direct-station.station-location-target {
 outline:3px solid #d9f2ff!important;outline-offset:5px;
 box-shadow:0 0 0 9px rgba(169,207,232,.22),0 0 28px #a9cfe8!important;
 animation:station-location-pulse 1.8s ease-in-out infinite;
}
@keyframes station-location-pulse { 50% { outline-color:#74c8fc;box-shadow:0 0 0 13px rgba(169,207,232,.12),0 0 36px #a9cfe8; } }
@media(prefers-reduced-motion:reduce){.direct-station.station-location-target{animation:none}}

.dino-region-color.dino-region-empty{background:linear-gradient(90deg,transparent,rgba(169,207,232,.09),transparent)!important;color:rgba(169,207,232,.28)!important;}

.station-delivery-options{display:flex;gap:24px;align-items:center;margin:14px 0 4px}.square-dialog .station-delivery-options label{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#e3eff7;cursor:pointer}.square-dialog .station-delivery-options input[type="checkbox"]{appearance:auto;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:#4c829f;box-shadow:none;cursor:pointer}

/* Tipos disponíveis e escolha de sexo no catálogo. */
.dino-row{grid-template-columns:76px minmax(130px,200px) minmax(130px,220px) minmax(110px,180px) minmax(282px,1fr) 164px}
.dino-delivery-cell{display:flex;gap:24px;align-items:start;justify-content:flex-end;min-width:0}
.dino-delivery-kind{position:relative;display:grid;justify-items:center;gap:4px;min-width:58px}
.dino-choice-ball{box-sizing:border-box;width:54px;height:54px;min-height:0;display:flex;align-items:center;justify-content:center;padding:5px;border:2px solid #86aac2;border-radius:50%!important;background:radial-gradient(circle at 35% 25%,rgba(65,97,119,.65),rgba(6,19,29,.8));color:#e3eff7;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;box-shadow:none}
.dino-choice-ball svg{width:100%;height:100%}
.dino-choice-ball:hover,.dino-choice-ball:focus-visible{transform:scale(1.16);box-shadow:0 0 16px #a9cfe844;z-index:2}
.dino-choice-ball:focus-visible{outline:2px solid #d4ecff;outline-offset:4px}
.dino-type-caption{font-size:10px;font-weight:700;color:#bfd5e3}
.dino-sex-selection{min-height:12px;font-size:10px;color:#e3eff7}
.dino-sex-options{position:absolute;top:100%;right:0;z-index:10;display:flex;gap:10px;padding:12px;background:linear-gradient(135deg,rgba(24,43,59,.97),rgba(6,19,29,.97));border-radius:12px;box-shadow:0 8px 24px #0006}
.dino-sex-options[hidden]{display:none!important}
.dino-sex-ball{flex-direction:column;width:60px;height:60px;gap:0}
.dino-sex-symbol{font-size:29px;line-height:1}
.dino-sex-ball small{font-size:9px}
.dino-sex-ball.male{border-color:#32b8e4;color:#69d6f7}
.dino-sex-ball.female{border-color:#f16b9b;color:#ff9bbe}
.dino-sex-ball[aria-checked="true"]{box-shadow:0 0 0 3px #d4ecff55}
@media(max-width:1300px) and (min-width:651px){.dino-row{grid-template-columns:76px minmax(130px,1fr) minmax(120px,1fr) minmax(100px,1fr)}.dino-regions-cell{grid-column:2 / 4}.dino-delivery-cell{grid-column:4}}
@media(max-width:650px){.dino-row{grid-template-columns:64px minmax(0,1fr)}.dino-delivery-cell{grid-column:2;justify-content:flex-start}.dino-sex-options{right:auto;left:0}}
@media(prefers-reduced-motion:reduce){.dino-choice-ball{transition:none}}

body .dino-delivery-cell button.dino-choice-ball{border-radius:50%!important}


/* Valores do catálogo na mesma altura do nome do dino. */
@media(min-width:651px){.dino-row .dino-info-cell,.dino-row .dino-regions-cell{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0}.dino-row .dino-info-cell>.dino-field-label,.dino-row .dino-regions-cell>.dino-field-label{position:absolute;bottom:calc(100% + 7px);left:0}.dino-row .dino-value{line-height:22px}.dino-row .dino-name{line-height:22px}}

/* Tipos ao lado das cores, com o centro do círculo na linha dos valores. */
.dino-delivery-cell{justify-content:flex-start;align-items:center}
.dino-delivery-kind{width:58px;height:54px;gap:0}
.dino-type-caption{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap}
.dino-sex-selection{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);white-space:nowrap}
.dino-sex-options{top:calc(100% + 38px)}
@media(min-width:1301px){.dino-row{grid-template-columns:76px minmax(130px,200px) minmax(130px,220px) minmax(110px,180px) 282px minmax(140px,1fr)}}
@media(max-width:1300px) and (min-width:651px){.dino-row{grid-template-columns:76px minmax(130px,200px) minmax(120px,220px) minmax(100px,1fr)}.dino-regions-cell{grid-column:2 / 4;justify-self:start}.dino-delivery-cell{grid-column:4;justify-self:start}}

.dino-type-ball[data-sex="male"]{border-color:#32b8e4;box-shadow:0 0 8px #32b8e444}.dino-type-ball[data-sex="female"]{border-color:#f16b9b;box-shadow:0 0 8px #f16b9b44}.dino-sex-selection{display:none!important}

.dino-type-ball img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}

body .dino-delivery-cell .dino-type-ball{background:transparent}

/* Centralizar a escolha de sexo abaixo do tipo. */
.dino-delivery-kind .dino-sex-options{left:50%;right:auto;transform:translateX(-50%)}

body .dino-type-ball[data-kind="baby"]{overflow:hidden}body .dino-type-ball[data-kind="baby"] img{max-width:none;flex-shrink:0;width:110%;height:110%;transform:translateX(-4px);border-radius:0;object-fit:contain}

.station-price-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.station-price-fields input{width:100%;min-width:0}@media(max-width:420px){.station-price-fields{grid-template-columns:1fr}}

.dino-selected-price{display:grid;gap:5px;min-width:125px;align-self:center;white-space:nowrap}.dino-selected-price[hidden]{display:none!important}.dino-delivery-cell{flex-wrap:wrap}.dino-selected-price .dino-value{color:#d4ecff;font-weight:700}

body .dino-delivery-cell .dino-add-cart{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 16px;border:1px solid #6bd38b;background:linear-gradient(180deg,#298b50,#186137);color:#fff;font-weight:700;white-space:nowrap;cursor:pointer}
body .dino-delivery-cell .dino-add-cart:hover{background:linear-gradient(180deg,#32a660,#207744)}
.dino-add-cart svg{width:21px;height:21px;flex-shrink:0}
.dino-add-cart[hidden]{display:none!important}
.dino-add-cart:disabled{opacity:.45;cursor:not-allowed}
.dino-add-cart:focus-visible{outline:2px solid #b5f5c7;outline-offset:3px}
@media(max-width:1300px){body .dino-delivery-cell .dino-add-cart{margin-left:0}.dino-delivery-cell{min-width:0}}

body .dino-type-ball[data-kind="baby"] img{width:44px;height:44px;transform:scaleX(-1);object-fit:contain}