/* =====================================================================================================================
   Drop List (drop-list.php) - 01/11/2026
   Usa as pecas do site-ui.css (md-modal, md-input, md-badge, md-tabs, md-alert, md-empty) e as cores do padrao visual
   (Docs/site-padrao-visual.md). Tudo aqui comeca com .dl- para nao vazar para outras paginas.
   ===================================================================================================================== */
.dl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dl-head { margin-bottom: 18px; }
/* 01/11: a Drop List mora nos Guias (sem link no menu de cima): trilha "Guias > Drop List" acima do titulo */
.dl-trilha { margin: 0 0 10px; color: var(--md-muted-2); font-size: 12px; }
.dl-trilha a, .dl-trilha a:link, .dl-trilha a:visited { color: var(--md-muted); font-weight: 600; text-decoration: none; }
.dl-trilha a:hover { color: var(--md-gold); }
.dl-trilha a:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; border-radius: 2px; }
.dl-aviso { margin-bottom: 18px; }

/* ---------- abas e busca ---------- */
.dl-tabs { margin-bottom: 16px; }
.dl-tabs .md-tab { font-size: 13.5px; }
.dl-tabs .md-tab:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
.dl-busca { position: relative; margin-bottom: 6px; }
.dl-busca > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--md-muted-2); font-size: 14px; pointer-events: none; }
.dl-busca .md-input { padding-left: 38px !important; min-height: 44px; font-family: Calibri, Arial, sans-serif; font-size: 15px; }
.dl-busca--modal { margin: 2px 0 14px; }
.dl-busca--modal .md-input { min-height: 40px; }
.dl-contagem { min-height: 18px; margin: 0 0 4px !important; font-size: 12.5px; color: var(--md-muted); }

/* ---------- titulos de grupo (h2 do site ja e Cinzel dourado: so ajusta o tamanho) ---------- */
.dl .dl-grupo { margin-top: 18px; }
.dl .dl-grupo[hidden] { display: none; }
.dl h2.dl-grupo-titulo { font-size: 15px !important; letter-spacing: 1.6px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--md-gold-line); display: flex; align-items: baseline; gap: 6px; }
.dl-grupo-qtd { font-family: Calibri, Arial, sans-serif; font-size: 12.5px; letter-spacing: 0; color: var(--md-muted); text-transform: none; text-shadow: none; }

/* ---------- lista de mapas ---------- */
.dl-mapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dl-mapa[hidden] { display: none; }
.dl-mapa > a,
.dl-mapa > a:link,
.dl-mapa > a:visited { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 14px; border: 1px solid var(--md-line-2); border-left: 3px solid rgba(245, 158, 11, .45); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .55); color: var(--md-text-2); font-weight: 400; text-decoration: none; transition: background .15s, border-color .15s; }
.dl-mapa > a:hover { background: rgba(245, 158, 11, .08); border-color: var(--md-gold-line); border-left-color: var(--md-gold); color: var(--md-text); }
.dl-mapa > a:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
.dl-mapa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dl-mapa-nome { font-size: 15.5px; font-weight: 700; color: var(--md-text); }
.dl-mapa-acesso { font-size: 12px; color: var(--md-muted); }
.dl-mapa-mobs { font-size: 12px; color: var(--md-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dl-qtd { flex-shrink: 0; }
.dl-seta { flex-shrink: 0; color: var(--md-muted-2); font-size: 11px; }
.dl-mapa > a:hover .dl-seta { color: var(--md-gold); }

/* ---------- lista de itens (aba Itens) ---------- */
.dl-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dl-itens--lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-item[hidden] { display: none; }
.dl-item > a,
.dl-item > a:link,
.dl-item > a:visited { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--md-line-2); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .45); color: var(--md-text-2); font-weight: 400; text-decoration: none; }
.dl-item > a:hover { background: rgba(245, 158, 11, .08); border-color: var(--md-gold-line); color: var(--md-text); }
.dl-item > a:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
.dl-item-nome { flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; }
.dl-item-qtd { flex-shrink: 0; font-size: 11.5px; color: var(--md-muted); }

/* icone do item: caixa fixa, a arte inteira dentro (itens 1x4 nao estouram) */
.dl-ico { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--md-r-sm); background: radial-gradient(circle at 50% 40%, rgba(148, 163, 184, .14), rgba(2, 6, 23, .6) 70%); border: 1px solid var(--md-line-2); overflow: hidden; }
.dl-ico img { max-width: 32px; max-height: 32px; width: auto; height: auto; object-fit: contain; image-rendering: auto; }
.dl-ico--fa { color: var(--md-gold); font-size: 15px; }
.dl-ico--g { width: 52px; height: 52px; }
.dl-ico--g img { max-width: 46px; max-height: 46px; }

/* ---------- janelas ---------- */
.dl-modal { font-family: Calibri, Arial, sans-serif; }
.dl-modal .md-modal-box:focus { outline: none; }
.dl-modal .md-modal-title { min-width: 0; }
.dl-modal .md-modal-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-modal h2.md-modal-title { margin: 0 !important; padding: 0 !important; border: none !important; font-size: 16px !important; letter-spacing: 1.5px; }
.dl-modal .md-modal-body { font-size: 14.5px; }
.dl-sub { margin: 0 0 12px !important; color: var(--md-muted); font-size: 13px; }

/* cabecalho do monstro / item */
.dl-ficha { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dl-ficha-txt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dl-ficha-nome { font-size: 18px; font-weight: 700; color: var(--md-text); line-height: 1.2; }
.dl-ficha-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--md-muted); }
.dl-horarios { font-size: 12.5px; color: var(--md-text-2); }
.dl-horarios b { color: var(--md-gold); font-family: var(--md-font-num); font-size: 11.5px; letter-spacing: .5px; font-weight: 700; }
.dl-obs { margin: 0 0 12px; font-size: 12.5px; }
.dl-obs > i { margin-top: 3px; }

/* retrato do monstro: imagem quando existe; senao, as iniciais numa moldura com a cor da faixa de nivel */
.dl-av { flex-shrink: 0; position: relative; width: 44px; height: 44px; border-radius: var(--md-r-sm); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--md-font-title); font-weight: 700; font-size: 15px; letter-spacing: .5px; color: #e2e8f0; background: linear-gradient(160deg, rgba(30, 41, 59, .95), rgba(2, 6, 23, .95)); border: 1px solid var(--md-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.dl-av img { width: 100%; height: 100%; object-fit: contain; }
.dl-av--g { width: 76px; height: 76px; font-size: 24px; }
.dl-av--n1 { border-color: rgba(16, 185, 129, .45); color: var(--md-green-txt); }
.dl-av--n2 { border-color: rgba(59, 130, 246, .45); color: var(--md-blue-txt); }
.dl-av--n3 { border-color: rgba(168, 85, 247, .45); color: var(--md-purple-txt); }
.dl-av--n4 { border-color: rgba(239, 68, 68, .45); color: var(--md-red-txt); }
.dl-av--n5 { border-color: var(--md-gold); color: var(--md-gold); }
.dl-av--chefe::after { content: "\f521"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 2px; top: 1px; font-size: 9px; color: var(--md-gold); }
.dl-av--g.dl-av--chefe::after { font-size: 13px; right: 4px; top: 3px; }
/* com foto (384x168, print do jogo): recorte quadrado do meio; a coroa do chefe ganha uma sombra para aparecer na foto */
.dl-av--foto img { object-fit: cover; }
.dl-av--foto.dl-av--chefe::after { text-shadow: 0 0 3px #000, 0 0 2px #000; }

/* foto grande da janela do monstro (mesma proporcao 384x168 das fotos; a arte animada do guia fica inteira) */
.dl-banner { flex-shrink: 0; position: relative; display: block; width: 240px; border-radius: var(--md-r-sm); overflow: hidden; border: 1px solid var(--md-line); background: radial-gradient(ellipse at 50% 70%, rgba(245, 158, 11, .12), rgba(2, 6, 23, .92) 70%); }
.dl-banner::before { content: ""; display: block; padding-top: 43.75%; }
.dl-banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-banner--arte img { object-fit: contain; }
.dl-banner--n1 { border-color: rgba(16, 185, 129, .45); }
.dl-banner--n2 { border-color: rgba(59, 130, 246, .45); }
.dl-banner--n3 { border-color: rgba(168, 85, 247, .45); }
.dl-banner--n4 { border-color: rgba(239, 68, 68, .45); }
.dl-banner--n5 { border-color: var(--md-gold); }
.dl-ficha--mon { align-items: center; }

/* "Onde aparece" na janela do monstro */
.dl-onde { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--md-line-2); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .4); }
.dl-onde-tit { margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--md-muted); }
.dl-onde-tit i { color: var(--md-gold); margin-right: 4px; }
.dl-onde-tit span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.dl-onde .dl-chips { margin: 0; }
.dl-onde .dl-chip { padding: 5px 10px; min-height: 32px; }
.dl-chip.is-atual { cursor: default; border-color: var(--md-gold-line); background: var(--md-gold-soft, rgba(245, 158, 11, .12)); color: var(--md-gold); font-weight: 700; }
.dl-chip.is-atual i { font-size: 10px; }
.dl-onde-nota { margin: 8px 0 0 !important; font-size: 12.5px; color: var(--md-muted); }
.dl-onde-nota b { color: var(--md-text); }

/* ---------- aba Monstros: cartoes com foto, nome e Lv ---------- */
.dl-mons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dl-mon[hidden] { display: none; }
.dl-mon > a,
.dl-mon > a:link,
.dl-mon > a:visited { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--md-line-2); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .55); color: var(--md-text-2); font-weight: 400; text-decoration: none; overflow: hidden; transition: background .15s, border-color .15s, transform .15s; }
.dl-mon > a:hover { background: rgba(245, 158, 11, .08); border-color: var(--md-gold-line); color: var(--md-text); transform: translateY(-1px); }
.dl-mon > a:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
.dl-mon-foto { position: relative; display: block; border-bottom: 1px solid var(--md-line-2); background: radial-gradient(ellipse at 50% 70%, rgba(148, 163, 184, .12), rgba(2, 6, 23, .9) 70%); }
.dl-mon-foto::before { content: ""; display: block; padding-top: 43.75%; }   /* 168/384: a mesma proporcao das fotos */
.dl-mon-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-mon-ini { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--md-font-title); font-weight: 700; font-size: 26px; letter-spacing: 1px; opacity: .85; }
.dl-mon-foto--n1 { border-top: 2px solid rgba(16, 185, 129, .55); color: var(--md-green-txt); }
.dl-mon-foto--n2 { border-top: 2px solid rgba(59, 130, 246, .55); color: var(--md-blue-txt); }
.dl-mon-foto--n3 { border-top: 2px solid rgba(168, 85, 247, .55); color: var(--md-purple-txt); }
.dl-mon-foto--n4 { border-top: 2px solid rgba(239, 68, 68, .55); color: var(--md-red-txt); }
.dl-mon-foto--n5 { border-top: 2px solid var(--md-gold); color: var(--md-gold); }
.dl-mon-tipo { position: absolute; left: 6px; top: 6px; font-size: 10.5px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.dl-mon-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 8px 9px 2px; }
.dl-mon-nome { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--md-text); overflow-wrap: anywhere; }
.dl-mon-info .dl-lv { flex-shrink: 0; }
.dl-mon-onde { display: block; padding: 0 9px 9px; font-size: 12px; color: var(--md-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* lista de monstros do mapa */
.dl-sec-titulo { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--md-muted); display: flex; align-items: center; gap: 8px; }
.dl-sec-titulo:first-child { margin-top: 0; }
.dl-sec-titulo::after { content: ""; flex: 1; height: 1px; background: var(--md-line-2); }
.dl-mobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-mob { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--md-line-2); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .5); color: var(--md-text-2); font-family: inherit; font-size: 14.5px; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.dl-mob:hover { background: rgba(245, 158, 11, .08); border-color: var(--md-gold-line); color: var(--md-text); }
.dl-mob:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
.dl-mob-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dl-mob-nome { font-weight: 700; color: var(--md-text); }
.dl-mob-ev { font-size: 12px; color: var(--md-muted); }
.dl-mob-qtd { flex-shrink: 0; font-size: 12.5px; color: var(--md-muted); white-space: nowrap; }
.dl-lv { font-family: var(--md-font-num); font-size: 10.5px !important; letter-spacing: .5px; }

/* itens do monstro, por categoria */
.dl-cat { margin-top: 14px; }
.dl-cat[hidden] { display: none; }
.dl-cat-titulo { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--md-gold-line); font-family: Calibri, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--md-gold); }
.dl-cat-titulo span { color: var(--md-muted); font-weight: 400; letter-spacing: 0; }
.dl-it { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border: 1px solid var(--md-line-2); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .45); min-height: 48px; }
.dl-it[hidden] { display: none; }
.dl-it-btn { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: var(--md-r-sm); }
.dl-it-btn:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 3px; }
.dl-it:hover { border-color: var(--md-gold-line); background: rgba(245, 158, 11, .06); }
.dl-it-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.dl-it-nome { font-size: 14px; color: var(--md-text); overflow-wrap: anywhere; }
.dl-it-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; color: var(--md-muted); }
.dl-tag-exc { color: #4ade80; }
.dl-tag-quest { color: var(--md-blue-txt); }

/* selo de raridade (mesma escala do gerador: 0 Garantido ... 5 Muito raro) */
.dl-r { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--md-r-pill); font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; border: 1px solid transparent; }
.dl-r::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dl-r--0 { background: rgba(245, 158, 11, .16); color: #fcd34d; border-color: rgba(245, 158, 11, .45); }
.dl-r--1 { background: var(--md-green-soft); color: var(--md-green-txt); border-color: rgba(16, 185, 129, .35); }
.dl-r--2 { background: rgba(148, 163, 184, .12); color: var(--md-text-2); border-color: rgba(148, 163, 184, .28); }
.dl-r--3 { background: var(--md-blue-soft); color: var(--md-blue-txt); border-color: rgba(59, 130, 246, .35); }
.dl-r--4 { background: var(--md-purple-soft); color: var(--md-purple-txt); border-color: rgba(168, 85, 247, .35); }
.dl-r--5 { background: var(--md-red-soft); color: var(--md-red-txt); border-color: rgba(239, 68, 68, .35); }
.dl-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

/* janela do item: quem dropa, por mapa */
.dl-quem { margin-top: 12px; }
.dl-quem-mapa { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--md-text); display: flex; align-items: center; gap: 8px; }
.dl-quem-mapa i { color: var(--md-gold); font-size: 12px; }
.dl-chips { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--md-line); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .55); color: var(--md-text-2); font-family: inherit; font-size: 13px; cursor: pointer; }
.dl-chip:hover { border-color: var(--md-gold-line); background: rgba(245, 158, 11, .08); color: var(--md-text); }
.dl-chip:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
.dl-chip .dl-av { width: 28px; height: 28px; font-size: 11px; }
.dl-chip .dl-av--chefe::after { font-size: 7px; right: 1px; top: 0; }
.dl-chip-lv { font-family: var(--md-font-num); font-size: 10px; color: var(--md-gold); }

/* ---------- 01/11 tarde: premio do evento (janela do mapa) e "Pode vir:" (janela da caixa) ---------- */
.dl-premio { margin: 0 0 16px; padding: 12px 14px 10px; border: 1px solid var(--md-gold-line); border-left: 3px solid var(--md-gold); border-radius: var(--md-r-sm); background: linear-gradient(180deg, rgba(245, 158, 11, .09), rgba(2, 6, 23, .45) 60%); }
.dl-modal h3.dl-premio-tit { margin: 0 0 10px !important; padding: 0 !important; border: none !important; font-family: Calibri, Arial, sans-serif !important; font-size: 12.5px !important; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--md-gold); display: flex; align-items: center; gap: 7px; }
.dl-premio-bloco + .dl-premio-bloco { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--md-gold-line); }
.dl-premio-quem { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; line-height: 1.35; }
.dl-premio-quem b { font-size: 15px; color: var(--md-text); }
.dl-premio-quem span { font-size: 12.5px; color: var(--md-muted); }
.dl-premio-obs { margin: 0 0 8px !important; font-size: 12.5px; color: var(--md-text-2); }
.dl-premio-obs i { color: var(--md-gold); margin-right: 3px; }
.dl-premio-nota { margin: 10px 0 0 !important; font-size: 12px; color: var(--md-muted); }
.dl-sorteio { margin-top: 8px; padding: 8px 10px 10px; border: 1px solid var(--md-line-2); border-radius: var(--md-r-sm); background: rgba(2, 6, 23, .45); }
.dl-sorteio-tit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 13px; font-weight: 700; color: var(--md-text); }
.dl-sorteio .dl-cat { margin-top: 10px; }
.dl-itens--sorteio { margin-top: 8px; }
.dl-modal h4.dl-cat-titulo { margin: 0 0 6px !important; }
.dl-tag-caixa { color: var(--md-gold); }
.dl-pode { margin-top: 2px; }
.dl-chip--premio > i, .dl-chip--caixa > i { color: var(--md-gold); font-size: 12px; margin-left: 4px; }
.dl-chip--premio { padding-left: 8px; }
.dl-chip .dl-r { margin-left: 2px; }
.dl-ico--p { width: 28px; height: 28px; }
.dl-ico--p img { max-width: 24px; max-height: 24px; }
.dl-sec-titulo--quem { margin-top: 18px; }
.dl-mapa-premio { color: var(--md-gold); white-space: normal; }
.dl-mapa-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: var(--md-r-pill); border: 1px solid var(--md-gold-line); background: var(--md-gold-soft); color: var(--md-gold); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.dl-mapa-tag > i { font-size: 10px; }

/* ---------- PC menor e celular ---------- */
@media (max-width: 900px) {
  .dl-itens--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-mons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dl-mapas, .dl-itens, .dl-itens--lista { grid-template-columns: minmax(0, 1fr); }
  .dl-mapa > a { min-height: 60px; padding: 9px 10px 9px 12px; gap: 10px; }
  .dl-mapa-nome { font-size: 15px; }
  .dl-mapa-acesso, .dl-mapa-mobs { font-size: 11.5px; }
  .dl-ficha { gap: 12px; }
  .dl-av--g { width: 60px; height: 60px; font-size: 20px; }
  .dl-ficha-nome { font-size: 16.5px; }
  .dl-modal .md-modal-body { padding: 14px; }
  .dl-modal .md-modal-head { padding: 12px 14px; }
  .dl-modal .md-modal-close { width: 44px; height: 44px; font-size: 17px; }   /* alvo de toque >= 44 px (o do site e 34) */
  .dl-mob { padding: 7px 10px 7px 7px; gap: 10px; }
  .dl-mob .dl-av { width: 38px; height: 38px; font-size: 13px; }
  .dl-tabs .md-tab { flex: 1 1 0; justify-content: center; }
  .dl-r { font-size: 11.5px; }
  .dl-lv { font-size: 11.5px !important; }
  .dl-chip-lv { font-size: 11.5px; }
  .dl-mons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dl-mon-nome { font-size: 13.5px; }
  .dl-mon-info { padding: 7px 8px 2px; }
  .dl-mon-onde { padding: 0 8px 8px; font-size: 11.5px; }
  .dl-mon-ini { font-size: 22px; }
  .dl-ficha--mon { flex-direction: column; align-items: stretch; gap: 10px; }
  .dl-banner { width: 100%; }
  .dl-onde { padding: 9px 10px; }
  .dl-premio { padding: 10px 10px 8px; }
  .dl-sorteio { padding: 7px 8px 8px; }
}
/* 3 abas no celular: sem o icone e com menos folga, as 3 cabem na tela de 360 px (sem rolar para o lado) */
@media (max-width: 480px) {
  .dl-tabs .md-tab { padding: 8px 4px; gap: 5px; min-width: 0; }
  .dl-tabs .md-tab > i { display: none; }
}
/* texto pequeno com contraste >= 4,5:1 e anel de foco visivel no X (o padrao do navegador some no fundo escuro) */
.dl-busca .md-input::placeholder { color: var(--md-muted); opacity: 1; }
.dl-modal .md-modal-close:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dl-mapa > a, .dl-mob, .dl-item > a, .dl-mon > a { transition: none; }
  .dl-mon > a:hover { transform: none; }
}