/* Guide surfaces are isolated from the game's fixed village layout. */
body.guide-page {
    font-family: var(--as-body);
    font-size: 14px;
    line-height: 1.8;
    background-image: linear-gradient(180deg, rgba(12, 16, 12, .5), #10130f 650px), url('../home/antiksavas-hero.png');
    background-size: auto, auto 760px;
}

body.guide-page .wrapper { min-width: 0; }
body.guide-page #country_select,
body.guide-page #header { display: none; }
body.guide-page #navigation {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    width: min(1040px, calc(100% - 48px));
    height: auto;
    min-height: 96px;
    margin: 0 auto;
    padding: 20px 0;
    background: none;
    border-bottom: 1px solid var(--as-line);
    box-shadow: none;
}
body.guide-page #navigation a.home {
    position: static;
    width: auto;
    height: auto;
    color: var(--as-gold-light);
    font: 28px/1.2 var(--as-display);
    letter-spacing: .04em;
    white-space: nowrap;
}
body.guide-page #navigation table.menu {
    position: static;
    width: auto;
    border-spacing: 0;
}
body.guide-page #navigation .menu a,
body.guide-page #navigation .menu a span {
    display: block;
    padding: 6px;
    font-size: 12px;
    font-weight: 600;
}
body.guide-page #navigation .menu a:hover,
body.guide-page #navigation .menu a:hover span { background: none; }
body.guide-page #content {
    padding: 42px 0 64px;
    background: transparent;
}
body.guide-page #content .grit {
    box-sizing: border-box;
    width: min(920px, calc(100% - 48px));
    padding: 42px 56px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(42, 46, 31, .98), rgba(20, 27, 19, .99) 45%);
    border: 1px solid rgba(200, 170, 113, .3);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .38), inset 0 1px rgba(234, 210, 160, .08);
}
body.guide-page #content h1 {
    margin: 0 0 24px;
    padding: 0;
    font: 40px/1.2 var(--as-display);
    color: var(--as-gold-light);
    letter-spacing: .02em;
}
body.guide-page #content h2 {
    clear: both;
    margin: 36px 0 18px;
    padding-top: 24px;
    border-top: 1px solid var(--as-line);
    font: 26px/1.3 var(--as-display);
    color: var(--as-gold-light);
}
body.guide-page #content h3 { margin: 20px 0 10px; font: 19px/1.4 var(--as-display); }
body.guide-page #content p,
body.guide-page #content .characteristics { margin: 18px 0; }
body.guide-page #content p { color: #d2d3c4; }
body.guide-page #content p.submenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 34px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--as-line);
}
body.guide-page #content .submenu a {
    padding: 8px 20px;
    border: 1px solid var(--as-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}
body.guide-page #content .submenu a[aria-current="page"],
body.guide-page #content .submenu a:hover {
    color: #f1ddb1;
    border-color: #9c8557;
    background: rgba(200, 170, 113, .1);
}
body.guide-page #content table {
    box-sizing: border-box;
    width: 100%;
    margin: 24px 0;
    border-spacing: 1px;
    font-size: 12px;
    line-height: 1.5;
}
body.guide-page #content table th,
body.guide-page #content table td { padding: 8px 5px; }
body.guide-page #content table h3 { margin: 4px; font-size: 18px; }
body.guide-page #content .question {
    clear: both;
    padding-top: 20px;
    color: var(--as-gold-light);
    font: 20px/1.5 var(--as-display);
}
body.guide-page #content img[align="right"] { margin: 4px 0 14px 24px; }
body.guide-page #content img[align="left"] { margin: 4px 24px 14px 0; }
body.guide-page #content img[align],
body.manual img.troops,
body.manual img.buildings { filter: url('medal-filter.svg#remove-paper'); }
body.guide-page #content .footer { background: none; }
body.guide-page #footer {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 24px 28px;
    background: none;
}
body.guide-page #footer .container { width: auto; margin: 0; }
body.guide-page #footer .logo { display: none; }
body.guide-page #footer .copyright { list-style: none; color: var(--as-muted); font-size: 11px; }
body.guide-page #iframe_layer .overlay_content,
body.guide-page #iframe_layer h2,
body.guide-page #iframe_layer .footer { background: var(--as-panel); }

/* The same guide also opens inside the existing in-game popup. */
body.manual {
    box-sizing: border-box;
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding: 18px 14px 24px;
    background: radial-gradient(ellipse at top right, rgba(154, 128, 74, .13), transparent 65%), #171e15;
    border-top: 2px solid #ac905b;
    color: var(--as-text);
    font: 12px/1.7 var(--as-body);
}
body.manual h1 {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--as-line);
    color: var(--as-gold-light);
    font: 23px/1.35 var(--as-display);
}
body.manual h1 span.tribe { color: var(--as-muted); font: 11px/1.5 var(--as-body); }
body.manual h2,
body.manual h3 { color: var(--as-gold-light); font-family: var(--as-display); }
body.manual a { font-size: inherit; text-decoration: none; }
body.manual a:hover { text-decoration: underline; }
body.manual p { margin: 15px 0; color: #d2d3c4; }
body.manual ul { padding-left: 20px; }
body.manual li { padding: 3px 0; }
body.manual li::marker { color: #9c8557; }
body.manual li span.info { color: var(--as-muted); }
body.manual table#troop_info,
body.manual table#examples { width: 100%; margin: 16px 0; }
body.manual table { border-spacing: 1px; background: var(--as-line); }
body.manual table td,
body.manual table th { padding: 6px 4px; font-size: 11px; }
body.manual table th { background: #303624; color: var(--as-gold-light); }
body.manual table td { background: #1d251a; color: var(--as-text); }
body.manual table#troop_details { width: 58%; background: transparent; }
body.manual table#troop_details th,
body.manual table#troop_details td { background: transparent; text-align: left; padding: 4px 2px; }
body.manual img#big_unit { left: auto; right: 3px; top: 146px; }
body.manual div#t_desc { max-height: none; margin-top: 20px; overflow: visible; }
body.manual div#prereqs { padding-top: 14px; border-top: 1px solid var(--as-line); }
body.manual img.navi { position: static; display: block; margin: 22px auto 0; filter: grayscale(1) sepia(.75) brightness(.9); }
body.manual img.troops { top: 125px; right: 6px; }
body.manual img.buildings { top: 244px; right: 6px; }

@media (max-width: 680px) {
    body.guide-page #navigation { width: calc(100% - 28px); flex-direction: column; gap: 12px; padding: 24px 0 14px; }
    body.guide-page #navigation a.home { font-size: 26px; }
    body.guide-page #navigation .menu a,
    body.guide-page #navigation .menu a span { padding: 4px; font-size: 10px; }
    body.guide-page #content { padding-top: 24px; }
    body.guide-page #content .grit { width: calc(100% - 24px); padding: 28px 18px; }
    body.guide-page #content h1 { font-size: 31px; }
    body.guide-page #content h2 { font-size: 24px; }
    body.guide-page #content .submenu a { padding: 7px 12px; font-size: 11px; }
    body.guide-page #content table { display: block; overflow-x: auto; font-size: 11px; }
    body.guide-page #content table th,
    body.guide-page #content table td { padding: 7px 4px; }
    body.guide-page #content img[align] { max-width: 35%; height: auto; }
    body.guide-page #iframe_layer .overlay_content { width: calc(100% - 24px); right: 12px; margin-right: 0; }
    body.guide-page #iframe_layer iframe { max-width: 100%; }
}