/* ================= A Ilha (jogo de grupo) — estilos próprios =================
   Modelo: css/nave.css e css/aldeia.css (prefixo il-). Pensado para todas as idades: letra grande (≥ 16 px),
   botões grandes (≥ 48 px), alto contraste, claro/escuro pelo comutador JOGADIA. Cabe de 320 px a 1280 px. */
.il-pagina {
  overflow-x: hidden;
  --il-mar: #12354a;
  --il-mar2: #1c4c69;
  --il-verde: var(--apoio-verde-escuro);
  --il-azul: var(--apoio-azul-escuro);
  --il-coral: var(--apoio-coral-escuro);
  --il-dourado: var(--apoio-dourado-escuro);
  --il-destaque: var(--marca-amarelo-sol);
  --il-sobre-destaque: var(--marca-tinta);
}
.il { font-size: 1.12rem; line-height: 1.45; max-width: 560px; margin: 0 auto; padding: 14px 14px 28px; }
.il *, .il *::before, .il *::after { min-width: 0; box-sizing: border-box; }
.il h2 { font-size: 1.4rem; line-height: 1.22; margin: 0 0 10px; }
.il h3 { font-size: 1.18rem; line-height: 1.25; margin: 0 0 8px; }
.il-texto { margin: 0 0 12px; color: var(--tinta); font-size: 1.08rem; }
.il-nota { margin: 8px 0 0; font-size: 1.02rem; color: var(--tinta2); }
.il-centro { text-align: center; }
.il-ou { text-align: center; font-weight: 700; color: var(--tinta2); margin: 6px 0; font-size: 1.05rem; }

.il-cartao { background: var(--bg2); border: 2px solid var(--linha); border-radius: 18px; padding: 16px 14px; margin: 0 0 14px; box-shadow: var(--sombra); overflow-wrap: anywhere; }
.il-rotulo { display: block; font-weight: 800; font-size: 1.08rem; margin: 12px 0 6px; }
.il-cartao > .il-rotulo:first-child { margin-top: 0; }

/* Início */
.il-intro { text-align: center; padding: 4px 4px 8px; }
.il-intro h2 { font-size: 1.75rem; }
.il-intro-emoji { font-size: 2.8rem; margin: 0; line-height: 1.1; }

/* Campos e botões */
.il-input { display: block; width: 100%; font: inherit; font-size: 1.25rem; padding: 12px 14px; min-height: 56px; border: 3px solid var(--tinta2); border-radius: 14px; background: var(--bg2); color: var(--tinta); margin: 0 0 12px; }
.il-input:focus { border-color: var(--cor-foco); outline: 3px solid color-mix(in srgb, var(--cor-foco) 35%, transparent); outline-offset: 1px; }
.il-input-cod { font-size: 2.1rem; font-weight: 800; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .32em; }
.il-erro { background: #fde7e5; color: #8c1d18; border: 2px solid #b3261e; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-weight: 700; font-size: 1.05rem; }
.il-erro[hidden] { display: none; }
.il-aviso-caixa { background: #fff3c4; color: #4a3800; border: 2px solid var(--il-destaque); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-weight: 700; font-size: 1.05rem; }

.il-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; min-width: 48px; padding: 12px 16px; border-radius: 16px; border: 3px solid var(--tinta); font: inherit; font-size: 1.15rem; font-weight: 800; line-height: 1.22; text-align: center; text-decoration: none; cursor: pointer; margin: 0 0 10px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.il-primario { background: var(--tinta); color: var(--bg); }
.il-secundario { background: var(--bg2); color: var(--tinta); }
.il-destaque-btn { background: var(--il-verde); color: #fff; border-color: #0d4d29; }
.il-grande { min-height: 64px; font-size: 1.24rem; }
.il-btn:disabled { opacity: .48; cursor: default; }
.il-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.95); }
.il-link { background: transparent; border: 0; text-decoration: underline; min-height: 48px; min-width: 48px; font-weight: 700; font-size: 1.05rem; color: var(--tinta); width: auto; margin: 4px auto 0; }
.il-mini { width: auto; min-height: 48px; min-width: 48px; padding: 8px 12px; font: inherit; font-size: 1rem; font-weight: 800; border: 2px solid var(--tinta); margin: 0; border-radius: 12px; background: var(--bg2); color: var(--tinta); cursor: pointer; }

/* Sala de espera */
.il-codigo { display: flex; justify-content: center; gap: 8px; margin: 4px 0 12px; }
.il-codigo span { display: grid; place-items: center; width: 60px; height: 74px; border-radius: 14px; background: var(--tinta); color: var(--bg); font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (max-width: 340px) { .il-codigo span { width: 52px; height: 66px; font-size: 2.2rem; } }
.il-qr { display: block; width: min(190px, 64%); height: auto; margin: 4px auto 12px; border-radius: 8px; border: 2px solid var(--linha); background: #fff; }
.il-pessoas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.il-pessoas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); font-weight: 700; font-size: 1.1rem; }
.il-pessoas li.desligado { opacity: .68; }
.il-pessoas li.morto .il-p-nome { text-decoration: line-through; opacity: .75; }
.il-p-nome small { font-weight: 600; color: var(--tinta2); font-size: 1rem; }
.il-p-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.il-etq { font-size: 1rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.il-etq-anf { background: #ffe9a8; color: #4a3800; }
.il-etq-off { background: #e7e9ee; color: #333b47; }
.il-etq-estado { background: #fde7e5; color: #7a1612; }
.il-etq-ok { background: #e6f4ea; color: #12401f; }
.il-ligacao { position: sticky; top: var(--altura-topo, 57px); z-index: 9; background: var(--il-destaque); color: var(--il-sobre-destaque); text-align: center; font-weight: 800; padding: 10px 14px; font-size: 1.05rem; }
.il-ligacao[hidden] { display: none; }

/* Topo do dia e temporizador */
.il-topo-dia { background: var(--il-mar); color: #f3f7fa; border-radius: 18px; padding: 12px 14px; margin: 0 0 12px; }
.il-topo-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; font-weight: 800; font-size: 1.15rem; }
.il-relogio { font-size: 2.3rem; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; margin: 4px 0; line-height: 1.1; color: #fff; }
.il-relogio.pouco { color: #ff8a80; }
.il-barra-tempo { height: 10px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; margin: 4px 0 6px; }
.il-barra-tempo i { display: block; height: 100%; background: var(--il-destaque); border-radius: 999px; }
.il-fase-sub { margin: 0; font-size: 1rem; color: #d6e4f0; text-align: center; }

/* Barras pessoais privadas (0 a 10) */
.il-barras { display: grid; gap: 8px; margin: 0 0 8px; }
.il-barra-item { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; }
@media (max-width: 350px) { .il-barra-item { grid-template-columns: 96px 1fr auto; } }
.il-barra-pista { height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 12%, var(--bg)); overflow: hidden; border: 1px solid var(--linha); }
.il-barra-pista i { display: block; height: 100%; border-radius: 999px; transition: width .2s ease; }
.il-cor-energia { background: #d98200; }
.il-cor-comida { background: #1e8e3e; }
.il-cor-agua { background: #1a73e8; }
.il-cor-perigo { background: #c5221f !important; }
.il-estados-eu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Grelha de projetos e armazém resumido */
.il-grelha-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; margin: 8px 0 0; }
.il-bloco-info { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); font-size: 1rem; line-height: 1.3; }
.il-bloco-info b { display: block; font-size: 1.05rem; }

/* Cartas de atividade (4 opções + Descansar fixo) */
.il-cartas { display: grid; gap: 10px; margin: 10px 0 12px; }
.il-carta { text-align: left; border-radius: 16px; border: 3px solid var(--tinta2); background: var(--bg2); color: var(--tinta); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; width: 100%; font: inherit; font-size: 1.05rem; touch-action: manipulation; }
.il-carta.escolhida { border-color: var(--il-verde); background: color-mix(in srgb, var(--il-verde) 12%, var(--bg2)); box-shadow: 0 0 0 2px var(--il-verde); }
.il-carta:disabled { opacity: .5; cursor: default; }
.il-carta-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.il-carta-nome { font-size: 1.18rem; font-weight: 900; }
.il-carta-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.il-badge { padding: 2px 8px; border-radius: 999px; font-size: 1rem; font-weight: 800; background: color-mix(in srgb, var(--tinta) 10%, var(--bg2)); }
.il-badge-grupo { background: #ffe9a8; color: #4a3800; }
.il-carta-efeito { font-size: 1.04rem; font-weight: 700; color: var(--tinta); margin: 0; }
.il-carta-sabor { font-size: 1rem; font-style: italic; color: var(--tinta2); margin: 0; }
.il-descansar { border-style: dashed; }
.il-descansar.escolhida { border-style: solid; }

/* Armazém comum */
.il-armazem-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); margin-bottom: 8px; }
.il-armazem-txt b { font-size: 1.15rem; display: block; }
.il-armazem-btns { display: flex; gap: 8px; align-items: center; }
.il-btn-mais { min-height: 48px; min-width: 96px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--tinta); background: var(--tinta); color: var(--bg); font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.il-btn-menos { min-height: 48px; min-width: 48px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--tinta2); background: var(--bg2); color: var(--tinta); font: inherit; font-size: 1.15rem; font-weight: 900; cursor: pointer; }
.il-btn-mais:disabled, .il-btn-menos:disabled { opacity: .4; cursor: default; }

/* Listas de anúncios e resultados */
.il-lista-avisos { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.il-lista-avisos li { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 6%, var(--bg2)); font-size: 1.04rem; font-weight: 700; }
.il-pista { background: #fff3c4 !important; color: #4a3800 !important; border-left: 5px solid var(--il-destaque); }

/* Fim de jogo: Vitória individual vs Derrota */
.il-fim { text-align: center; border-width: 4px; }
.il-fim-vitoria { border-color: var(--il-verde); background: color-mix(in srgb, var(--il-verde) 8%, var(--bg2)); }
.il-fim-derrota { border-color: var(--il-coral); background: color-mix(in srgb, var(--il-coral) 8%, var(--bg2)); }
.il-fim-emoji { font-size: 3.6rem; margin: 0; line-height: 1.1; }
.il-fim h2 { font-size: 1.85rem; margin: 6px 0 8px; }
.il-fim-badge { display: inline-block; padding: 6px 16px; border-radius: 999px; font-weight: 900; font-size: 1.2rem; margin: 4px 0 10px; }
.il-fim-vitoria .il-fim-badge { background: var(--il-verde); color: #fff; }
.il-fim-derrota .il-fim-badge { background: var(--il-coral); color: #fff; }

.il-mais summary { cursor: pointer; font-weight: 800; min-height: 48px; display: flex; align-items: center; padding: 6px 4px; font-size: 1.08rem; }
.il-regras { font-size: 1.06rem; line-height: 1.45; }
.il-regras h3 { margin: 16px 0 6px; font-size: 1.18rem; color: var(--tinta); }
.il-regras ul { padding-left: 20px; margin: 0 0 10px; display: grid; gap: 6px; }

/* Modo simulador dentro de iframe (?sim=1) */
body.il-sim .topo .abas, body.il-sim .topo .marca, body.il-sim .rodape { display: none; }
body.il-sim .topo-in { padding: 6px 10px; min-height: 44px; }
body.il-sim .il { padding: 8px 8px 16px; }