/*
 * O guia do jogo (guia.html). Usa os tokens do theme.css — o mesmo vidro escuro
 * e o mesmo dourado do jogo —, mas é uma página que rola: nada do base.css,
 * que trava o arrasto e põe o canvas em ecrã inteiro. Aqui o texto também se
 * pode selecionar e copiar.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * Quem rola é a `.guideScroll`, não o documento — o mesmo que o `.page-scroll`
 * do portal (wwwroot/styles.css). Com o documento a rolar, o Safari deixava
 * arrastar a página inteira para o lado nas margens (o elástico, e o gesto de
 * recuar no histórico), e via-se a faixa preta por trás dela. O documento fica
 * exatamente à medida do ecrã e sem nada para rolar; a caixa lá dentro só aceita
 * o dedo na vertical (`pan-y`) e não passa o fim da rolagem ao documento
 * (`contain`). As tabelas reabrem o arrasto de lado (ver .tableWrap).
 */
html,
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    /* A folga das apps afixadas em iOS (lib/arcade/standalone-fit.js), como no jogo. */
    height: calc(100dvh + var(--viewport-gap, 0px));
    overflow: hidden;
    overscroll-behavior: none;
    /* O fundo da faixa que sobre por baixo: o verde do fim do prado. */
    background-color: #4f8235;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    /*
     * O fundo fica parado — o <body> não rola, quem rola é a .guideScroll, que é
     * transparente — e o conteúdo desliza por cima dele. São os tons do jogo
     * num gradiente contínuo: o céu em cima, a descer para o prado e para o
     * verde mais fundo em baixo, com o sol dourado das moedas e do castelo a
     * aquecer o canto de cima.
     */
    background:
        radial-gradient(90vw 55vh at 80% 4%, rgba(255, 228, 150, 0.55), transparent 65%),
        radial-gradient(70vw 40vh at 12% 10%, rgba(255, 255, 255, 0.35), transparent 70%),
        radial-gradient(130vw 55vh at 50% 108%, rgba(38, 66, 24, 0.6), transparent 70%),
        linear-gradient(180deg, #5aa6e6 0%, #8cc6ee 24%, #b9dca6 46%, #8cc063 62%, #6fa84a 80%, #4f8235 100%);
}

/* O vidro dos painéis, mais transparente do que o do jogo: aqui o fundo é para
   se ver a passar por trás. O desfoque é que mantém o texto legível. */
:root {
    --guide-glass: linear-gradient(155deg, rgba(58, 48, 34, 0.6), rgba(30, 26, 20, 0.68) 60%);
}

.guideScroll {
    height: 100%;
    overflow-y: auto;
    /* Escrito à parte: com um eixo em `auto` e o outro em `visible`, o
       `visible` passava também a `auto` e a caixa aceitava arrasto de lado. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* A barra de cima é fixa: um salto para uma secção não a pode deixar por baixo dela. */
    scroll-padding-top: calc(env(safe-area-inset-top) + 70px);
}

@media (prefers-reduced-motion: reduce) {
    .guideScroll { scroll-behavior: auto; }
}

a { color: var(--accent); }

b, strong { font-weight: 700; color: #fff; }

.muted { color: var(--muted); }

/* ---------- Barra de cima ---------- */

.guideBar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: calc(env(safe-area-inset-top) + 10px) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(30, 26, 20, 0.55), rgba(30, 26, 20, 0));
}

.barBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-pill);
    background: var(--glass-bg-solid);
    -webkit-backdrop-filter: blur(var(--blur-soft));
    backdrop-filter: blur(var(--blur-soft));
    box-shadow: var(--glass-shadow-sm);
    transition: border-color 0.2s ease;
}

.barBtn:hover { border-color: var(--accent); }
.barBtn--quiet { color: var(--muted); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---------- Página ---------- */

.guide {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 8px max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left));
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 0 6px;
    text-align: center;
    text-shadow: 0 2px 12px rgba(20, 14, 4, 0.35);
}

.brandBadge {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    font-size: 28px;
    border: 1px solid var(--glass-border-strong);
    border-radius: 18px;
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow-sm);
}

.title {
    font-family: var(--font-title);
    font-size: clamp(30px, 8vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    background: linear-gradient(100deg, #fff6dc 10%, var(--accent) 55%, #e59a3a 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* O texto em gradiente não leva sombra: a sombra via-se através das letras. */
    text-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(20, 14, 4, 0.55));
}

.heroSub {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fffaf0;
}

/* Índice: fichas que embrulham, nunca uma fila a rolar para o lado. */
.toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--guide-glass);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: var(--glass-shadow);
}

.toc a {
    padding: 7px 13px;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-bg-soft);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.toc a:hover { background: var(--glass-bg-hover); border-color: var(--accent); }

/* ---------- Secções ---------- */

.card {
    padding: clamp(18px, 4vw, 28px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--guide-glass);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.card h2 {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: clamp(21px, 5vw, 26px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--accent);
}

.card h3 {
    margin: 22px 0 8px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.card h4 {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 700;
}

.card p + p { margin-top: 10px; }
.card p { max-width: 70ch; }

.bullets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
}

.bullets li::marker { color: var(--accent); }

p + .bullets,
.chips + .bullets { margin-top: 8px; }
.bullets + p { margin-top: 10px; }

.good { white-space: nowrap; font-weight: 600; color: #fff; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 12px;
}

.chip {
    display: inline-block;
    padding: 3px 10px;
    font-size: 13px;
    white-space: nowrap;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-bg-soft);
}

.chip b { color: var(--accent); }

.costRow {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    vertical-align: middle;
}

.cost {
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    background: rgba(242, 193, 78, 0.14);
    border: 1px solid rgba(242, 193, 78, 0.28);
}

.startBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg-soft);
}

/* ---------- Tabelas ---------- */

/* A tabela rola dentro da sua caixa; a página nunca rola para o lado. */
.tableWrap {
    margin-top: 14px;
    overflow-x: auto;
    /* Exceção ao `pan-y` da .guideScroll: aqui é preciso arrastar de lado para
       ver as colunas que não cabem. O `contain` não deixa esse arrasto, ao
       chegar ao fim da tabela, passar para a página. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.table th,
.table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 240, 210, 0.1);
}

.table thead th {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: none; }

.table tbody th { font-weight: 600; }

/* Num telemóvel a tabela dos controlos empilha-se: uma ação por bloco, cada
   coluna com a sua etiqueta. Assim cabe inteira e não é preciso arrastá-la
   de lado. */
@media (max-width: 560px) {
    .table--stack thead { display: none; }
    .table--stack tr { display: block; padding: 10px 12px; border-bottom: 1px solid rgba(255, 240, 210, 0.1); }
    .table--stack tbody tr:last-child { border-bottom: none; }
    .table--stack th,
    .table--stack td { display: block; padding: 2px 0; border: none; }
    .table--stack tbody th { margin-bottom: 4px; color: var(--accent); }
    /* Etiqueta à esquerda e texto à direita, que embrulha na sua coluna. */
    .table--stack td { display: grid; grid-template-columns: 124px 1fr; gap: 8px; }
    .table--stack td::before {
        content: attr(data-label);
        padding-top: 1px;
        font-size: 11.5px;
        color: var(--faint);
    }
}

.table .num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Níveis do castelo ---------- */

.lvlList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.lvlCard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg-soft);
}

.lvlHead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lvlStats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13.5px;
    color: var(--muted);
}

.lvlLine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 13.5px;
}

.lvlLine > .muted {
    min-width: 76px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chips--tight { margin: 0; }

.levelBadge {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-family: var(--font-title);
    font-size: 15px;
    color: var(--on-accent);
    border-radius: 10px;
    background: linear-gradient(140deg, #fff0bf, var(--accent));
}

/* ---------- Bens ---------- */

.gGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 10px;
    margin-top: 14px;
}

.gCard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg-soft);
}

.gHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.gHead h4 { flex: 1; }

.gPrice {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--accent);
}

.gLine {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 8px;
    font-size: 13px;
}

.card .gLine + .gLine { margin-top: 0; }

.gLabel {
    padding-top: 1px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.gList { color: var(--muted); }

.gLine .good { white-space: normal; }

.gTags { margin-top: 2px; }

.tag {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

.tag--cheap { color: #d7f5c6; background: rgba(126, 217, 87, 0.16); border: 1px solid rgba(126, 217, 87, 0.3); }
.tag--dear { color: #ffd9d1; background: rgba(232, 113, 90, 0.18); border: 1px solid rgba(232, 113, 90, 0.34); }

/* ---------- Objetivos ---------- */

.quests {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0;
    list-style: none;
}

.quest {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg-soft);
}

.questNum {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    border: 1px solid rgba(242, 193, 78, 0.4);
    border-radius: 50%;
}

.questMain {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.questMain .muted { font-size: 13px; }

.questReward {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--accent);
}

@media (max-width: 520px) {
    .quest { grid-template-columns: auto 1fr; }
    .questReward { grid-column: 2; }
}

/* ---------- Edifícios ---------- */

.bGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 10px;
}

.bCard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg-soft);
}

.bHead {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bIcon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    font-size: 21px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.bDesc { font-size: 13.5px; color: var(--muted); }

.bDoes {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.bTags {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    color: var(--muted);
    list-style: none;
}

.bTags:empty { display: none; }

.bCost { margin-top: auto; padding-top: 4px; }

/* ---------- Cadeias e vilas ---------- */

.chains {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 6px 16px;
    list-style: none;
    font-size: 14px;
}

.chains li {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-soft);
}

.arrow { color: var(--accent); font-weight: 700; }

.townGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 10px;
    margin-top: 12px;
}

.townCard {
    padding: 12px 14px;
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--roof);
    border-radius: var(--radius);
    background: var(--glass-bg-soft);
}

.townCard p { margin-top: 4px; font-size: 18px; letter-spacing: 0.06em; }
.townCard .muted { font-size: 12.5px; letter-spacing: 0; margin-right: 4px; }

/* ---------- Fim ---------- */

.guideEnd {
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--on-accent);
    text-decoration: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    box-shadow: 0 16px 34px -16px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn:hover { filter: brightness(1.06); }