/* Game skin, scoped to the public guide. No gameplay layout or state changes. */
.guide-page { background-color:#000; color:#fff; }
.official-guide { font:14px/1.6 Tahoma,Verdana,sans-serif; color:#d8e0e2; background:#080b0c var(--guide-panel) center top / 100% 40px repeat-y; border:1px solid #55544c; box-shadow:none; }
.official-guide * { box-sizing:border-box; }
.official-guide p,.official-guide a { font:inherit; }
.official-guide p { text-align:left; }
.official-guide a { color:#a7fffd; text-decoration:none; }
.official-guide a:hover { color:#d9ffff; text-decoration:underline; }
.official-guide a:focus-visible,.official-guide button:focus-visible,.official-guide summary:focus-visible { outline:2px solid #a7fffd; outline-offset:3px; }
.guide-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; min-height:54px; padding:10px 24px; border-block:1px solid #55544c; background:#182126 var(--guide-heading) center / 100% 100% no-repeat; }
.official-guide .guide-brand { color:#dce6e9; font-size:21px; font-weight:bold; letter-spacing:.03em; text-shadow:1px 2px #000; }
.guide-heading h1.guide-brand { margin:0; line-height:1.6; }
.official-guide [aria-current="page"] { background:#26343a; color:#fff; border-left-color:#a7fffd; }
.guide-content { padding:24px; min-height:400px; min-width:0; overflow-wrap:anywhere; }
.official-guide h1 { font-size:clamp(23px,3vw,28px); line-height:1.25; color:#e4e9eb; margin:0 0 18px; }
.official-guide h2 { font-size:19px; color:#b6c5cb; margin:26px 0 12px; border-bottom:1px solid #3e4d53; padding-bottom:8px; }
.official-guide h3 { font-size:15px; color:#b6c5cb; }
.guide-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.official-guide .guide-card { display:flex; flex-direction:column; padding:12px; text-decoration:none; border:1px solid #535c5e; border-top-color:#748084; background:linear-gradient(#223039,#0f181c); box-shadow:inset 0 0 0 2px #070b0c; }
.guide-card:hover { border-color:#a7fffd; }
.guide-card strong { font-size:15px; }.guide-card span { color:#b6c5cb; margin-top:3px; font-size:12px; }
.guide-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; padding:16px; border:1px solid #3e4d53; background:#101719; }
.guide-filters label,.guide-map-position label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:#b6c5cb; }
.guide-filters label:first-of-type { grid-column:span 2; }
.official-guide input,.official-guide select,.official-guide button { font:13px Tahoma,Verdana,sans-serif; min-height:34px; max-width:100%; border:1px solid #657073; border-radius:0; background:#181a1b; color:#fff; padding:6px 8px; }
.official-guide button { cursor:pointer; background:linear-gradient(#34434a,#181a1b); border-color:#778487 #3e4d53 #3e4d53; color:#d9eeef; font-weight:bold; padding:6px 12px; }
.official-guide button:hover { border-color:#a7fffd; }
.guide-filter-actions { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }.guide-filter-actions a { margin-bottom:9px; }
.guide-result-count,.guide-note { color:#acbdc5; font-size:12px!important; }
.guide-table-scroll,.guide-map-scroll { overflow:auto; max-width:100%; }
.guide-results { width:100%; border-collapse:collapse; font-size:13px; }
.guide-results td,.guide-results th { text-align:left; padding:12px 10px; border-bottom:1px solid #344047; }
.guide-results th { background:#212d33; color:#b6c5cb; }.guide-results tbody tr:nth-child(even) { background:#142027; }
.official-guide nav.guide-pagination { display:flex; flex-wrap:wrap; gap:6px; padding:16px 0; }
.guide-pagination a { padding:5px 12px; border:1px solid #3e4d53; }
.guide-empty { padding:24px; border:1px dashed #53646b; }.guide-entry-art { float:right; object-fit:contain; margin:0 0 16px 22px; background:#000; border:1px solid #535c5e; }
.guide-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:1px; background:#3e4d53; border:1px solid #3e4d53; }
.guide-stats > div { padding:10px 14px; background:#10191e; }.guide-stats dt { color:#b6c5cb; font-size:12px; }.guide-stats dd { margin:2px 0 0; font-weight:bold; }
.guide-clear { clear:both; }.guide-related ul { padding-left:22px; }.guide-related li { margin:8px 0; }
.guide-mission-step { margin:14px 0; border:1px solid #3e4d53; background:#10191e; padding:16px; }.guide-mission-step summary { cursor:pointer; color:#a7fffd; font-weight:bold; }
.guide-prose { overflow-wrap:anywhere; max-width:78ch; }.guide-prose img { max-width:100%; height:auto; }.guide-illustration { display:block; margin:12px auto; }
.guide-map-position { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:16px 0; }.guide-map-position input { width:100px; }
.guide-map-grid { display:grid; width:max-content; padding:2px; background:#000; }.guide-map-cell { width:32px; height:32px; display:grid; place-items:center; background-size:32px 32px; position:relative; }
.guide-map-cell > span { background:#10191eee; color:#a7fffd; border:1px solid #a7fffd; width:20px; height:20px; line-height:16px; text-align:center; }
.guide-map-focus { outline:2px solid #a7fffd; outline-offset:-2px; }.guide-map-legend { columns:2; }.guide-map-legend li { break-inside:avoid; margin:8px 0; }
.guide-content nav[aria-label="Explore map"] { display:flex; flex-wrap:wrap; gap:18px; padding:10px 0; }
.guide-breadcrumb { color:#b6c5cb; font-size:12px!important; }
@media(max-width:440px) { .guide-cards { grid-template-columns:minmax(0,1fr); }.guide-heading { gap:8px; }.official-guide .guide-brand { font-size:19px; } }

/* The guide is MAIN in the same game template, between the actual sidebars. */
.guide-in-game #mainContentDiv { width:1000px!important; max-width:calc(100% - 12px); table-layout:fixed; }
.guide-in-game #game-navigation,.guide-in-game #game-sidebar { width:140px!important; }
.guide-in-game #game-center-panel { width:720px!important; min-width:0; }
.guide-in-game .official-guide { box-sizing:border-box; border:0; width:100%; max-width:640px; margin:30px auto 24px; min-width:0; }
.guide-in-game .official-guide > nav { display:flex; flex-wrap:wrap; gap:3px; margin:0 14px; padding:6px 8px; background:#182328; border:1px solid #3e4d53; border-top:0; }
.guide-in-game .official-guide > nav a { padding:5px 8px; font-size:12px; }
.guide-in-game .official-guide > nav [aria-current="page"] { box-shadow:inset 0 -2px #a7fffd; }
.guide-in-game .guide-content { display:flow-root; padding:20px; }
.guide-in-game .game-public-header img { display:block; width:100%; height:auto; }
.guide-guest .game-character-header { display:none; }
.guide-guest-menu { display:flex; flex-direction:column; gap:18px; padding:14px; }
.guide-game-menu > summary { cursor:pointer; color:#a7fffd; padding:10px; }
@media(min-width:1021px) { .guide-game-menu > summary { display:none; } }
@media(max-width:1020px) {
 .guide-in-game #mainContentDiv { display:block; width:calc(100% - 12px)!important; margin-top:12px; }
 .guide-in-game #mainContentDiv > tbody,.guide-in-game #mainContentDiv > tbody > tr,.guide-in-game #mainContentDiv > tbody > tr > td { display:block; width:100%!important; }
 .guide-in-game .game-character-header { max-width:100%; overflow-x:auto; }
 .guide-in-game .game-character-header > table { width:1000px; max-width:none; }
 .guide-in-game #game-navigation { height:auto!important; }
 .guide-in-game #game-sidebar { display:none!important; }
 .guide-in-game #mainContentDiv > tbody > tr:nth-last-child(2) { display:none; }
 .guide-in-game #game-center-panel { width:100%!important; }
 .guide-in-game .guide-heading,.guide-in-game .guide-content { padding:16px; }
 .guide-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px; }
 .guide-map-legend { columns:1; }.guide-stats { grid-template-columns:1fr 1fr; }
 .guide-entry-art { width:75px; height:75px; margin-left:12px; }
 .guide-results td,.guide-results th { padding:10px 7px; }
}

.guide-mobile-character { display:none; }
.guide-in-game:not(.guide-guest) .game-public-header { display:none; }
@media(max-width:1020px) {
 .guide-in-game #mainContentDiv > colgroup { display:none; }
 .guide-in-game .game-character-header { display:none; }
 .guide-in-game:not(.guide-guest) .game-public-header { display:block; }
 .guide-mobile-character { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; background:#15232c; border:1px solid #535c5e; color:#b6c5cb; font:12px/1.5 Tahoma,sans-serif; }
 .guide-mobile-character b { color:#fff; }
 .guide-in-game #mainContentDiv > tbody > tr:last-child > td { background-size:100% auto; background-repeat:no-repeat; height:32px; }
}

/* Wide content scrolls inside the guide, never across the game sidebars. */
.guide-in-game .official-guide .guide-filters > *,
.guide-in-game .official-guide .guide-stats > *,
.guide-in-game .official-guide input,
.guide-in-game .official-guide select { min-width:0; }
.guide-in-game .guide-filters input,.guide-in-game .guide-filters select { width:100%; }
.guide-in-game .guide-table-scroll,.guide-in-game .guide-map-scroll { width:100%; min-width:0; }
.guide-in-game .guide-results { table-layout:fixed; }
.guide-in-game .guide-prose { max-width:100%; overflow-x:auto; }
.guide-in-game #game-sidebar table[style*="infobox_sigmabox"] { display:none; }

/* Same circuit-board surround and panel cap used by Bank and Mission Log. */
.guide-in-game #game-center-panel {
 position:relative;
 background-color:#191713;
 background-image:var(--guide-frame-left-top),var(--guide-frame-right-top),var(--guide-frame-left),var(--guide-frame-right),var(--guide-frame);
 background-position:left 14px,right 14px,left top,right top,left top;
 background-size:27px 55px,27px 55px,27px 4px,28px 4px,150px 150px;
 background-repeat:no-repeat,no-repeat,repeat-y,repeat-y,repeat;
}
.guide-in-game #game-center-panel::before,.guide-in-game #game-center-panel::after {
 content:"";position:absolute;left:0;right:0;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:100% 100%;
}
.guide-in-game #game-center-panel::before { top:0;height:14px;background-image:var(--guide-frame-top); }
.guide-in-game #game-center-panel::after { bottom:0;height:5px;background-image:var(--guide-frame-bottom); }
.guide-in-game .guide-panel-foot { width:100%;aspect-ratio:640 / 54;background:var(--guide-foot) center / 100% 100% no-repeat; }
@media(max-width:1020px) { .guide-in-game .official-guide { width:calc(100% - 32px); } }

@media(max-width:1020px) {
 .official-guide input,.official-guide select,.official-guide button { min-height:42px; }
}