/* Metal Gear Solid wiki home page (games/metal-gear-solid/mgs-home.mjs). Classes use an mgsh- prefix. */
.mgsh{--mgsh-line:color-mix(in srgb,var(--line,#33433d) 85%,#fff 15%);--mgsh-soft:color-mix(in srgb,var(--surface,#1c2623) 80%,#000 20%);--mgsh-codec:#9ff0c4;--mgsh-stage:#e4e8e6;font-size:15px;line-height:1.5;min-width:0}
.mgsh h1{font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem);line-height:1.15;margin:.2rem 0 .7rem}
.mgsh h2{font-size:1.15rem;margin:1.6rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--mgsh-line)}
.mgsh p{margin:.4rem 0}
.mgsh a{color:var(--accent,#9fd8b7)}
.mgsh small{display:block;color:var(--muted,#a7b0ab);font-size:.76rem;line-height:1.3}
.mgsh img{max-width:100%;height:auto}
.mgsh .mgsh-px,.mgsh-rail .mgsh-px{image-rendering:pixelated}
.mgsh-note{font-size:.88rem;color:var(--muted,#a7b0ab)}
.mgsh-hero{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.mgsh-hero-art{position:relative;display:block;border-radius:6px;overflow:hidden;background:#fff;text-decoration:none}
.mgsh-hero-art>img{display:block;width:100%;height:auto}
.mgsh-hero-art>span{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;padding:6px 8px;background:linear-gradient(transparent,rgba(10,20,15,.85));color:#fff;font-weight:700;font-size:.9rem}
.mgsh-hero-art>span img{height:84px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.mgsh-lead{font-size:1.02rem;max-width:70ch}
.mgsh-facts{display:flex;flex-wrap:wrap;gap:6px;margin:.7rem 0;padding:0}
.mgsh-facts>div{background:var(--mgsh-soft);border:1px solid var(--mgsh-line);border-radius:6px;padding:4px 10px}
.mgsh-facts dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#a7b0ab)}
.mgsh-facts dd{margin:0;font-weight:600;font-size:.9rem}
.mgsh-cta a{font-weight:700}
/* Topic grid */
.mgsh-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.mgsh .mgsh-topics a{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);border:1px solid var(--mgsh-line);border-radius:7px;padding:8px;background:var(--mgsh-soft);font-size:.82rem;min-width:0}
.mgsh-topics strong{display:block;color:var(--accent,#9fd8b7);font-size:.95rem}
.mgsh-thumb{display:grid;place-items:center;width:64px;height:60px;flex:none;background:var(--mgsh-stage);border-radius:4px;overflow:hidden}
.mgsh-thumb img{max-width:60px;max-height:56px;width:auto;height:auto;object-fit:contain}
.mgsh-thumb-dark{background:#0d0f12}
.mgsh .mgsh-thumb-dark img{width:48px;height:auto;max-height:48px}
.mgsh-thumb .mgsh-face{max-height:60px;max-width:none;height:60px}
/* Character artwork */
.mgsh-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.mgsh .mgsh-chars a{display:flex;flex-direction:column;text-decoration:none;color:var(--text);border:1px solid var(--mgsh-line);border-radius:7px;overflow:hidden;background:var(--mgsh-soft);padding-bottom:7px;font-size:.85rem;min-width:0}
.mgsh-art{position:relative;display:block;background:#fff;aspect-ratio:350/420;overflow:hidden}
.mgsh-art>img{display:block;width:100%;height:100%;object-fit:contain}
.mgsh-ingame{position:absolute;right:5px;bottom:5px;display:flex;align-items:flex-end;justify-content:center;width:34px;height:66px;padding:3px;overflow:hidden;border-radius:5px;background:linear-gradient(180deg,#f2f4f3,#d7dcd9);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.25)}
.mgsh .mgsh-ingame img{display:block;height:62px;width:auto;max-width:none}
.mgsh-ingame-codec{align-items:center;background:#0b1a13;box-shadow:0 0 0 1px #3d8a63,0 2px 6px rgba(0,0,0,.3)}
.mgsh .mgsh-ingame-codec img{width:34px;height:auto;image-rendering:pixelated}
.mgsh-chars strong{display:block;margin:6px 8px 0;color:var(--accent,#9fd8b7);font-size:.88rem;line-height:1.2}
.mgsh-chars small{margin:1px 8px 0}
/* Codec */
.mgsh-codec{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.mgsh .mgsh-codec>a,.mgsh .mgsh-codec>div{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);border:1px solid #2c5b44;border-radius:7px;padding:8px;background:linear-gradient(180deg,#0b1a13,#0f2419);min-width:0}
.mgsh-codec .mgsh-face{display:block;width:78px;height:auto;aspect-ratio:52/89;flex:none;border-radius:3px;box-shadow:0 0 0 1px #3d8a63,0 0 12px rgba(80,220,150,.18)}
.mgsh-codec b{display:block;font:700 1.35rem/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--mgsh-codec);letter-spacing:.04em;text-shadow:0 0 6px rgba(120,255,180,.35)}
.mgsh-codec strong{display:block;font-size:.95rem;color:#e6f3ec;margin-top:2px}
.mgsh-codec small{color:#9fb8aa}
/* 3D models */
.mgsh-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.mgsh .mgsh-models>a,.mgsh .mgsh-models>div{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--text);border:1px solid var(--mgsh-line);border-radius:7px;overflow:hidden;background:var(--mgsh-soft);padding-bottom:7px;font-size:.85rem}
.mgsh-models strong{display:block;margin-top:5px;padding:0 4px;color:var(--accent,#9fd8b7);font-size:.88rem;line-height:1.2}
.mgsh .mgsh-models>div strong{color:var(--text)}
.mgsh-models small{padding:0 4px}
.mgsh-stage{display:grid;place-items:end center;width:100%;height:190px;padding:10px 8px 8px;box-sizing:border-box;background:radial-gradient(ellipse at 50% 92%,#c9d0cc 0 18%,transparent 42%),linear-gradient(180deg,#f2f4f3,#d7dcd9)}
.mgsh-stage img{max-height:172px;max-width:100%;width:auto;height:auto}
.mgsh h3.mgsh-disc{display:flex;align-items:center;gap:8px;font-size:.98rem;margin:1rem 0 .5rem}
.mgsh-disc span{font:700 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:4px;background:#0f2419;color:var(--mgsh-codec);border:1px solid #2c5b44}
/* Inventory icons */
.mgsh-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.mgsh .mgsh-icons a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--text);font-size:.78rem;text-align:center;border:1px solid var(--mgsh-line);border-radius:7px;overflow:hidden;background:var(--mgsh-soft);padding-bottom:6px}
.mgsh-icons a>span{display:grid;place-items:center;width:100%;height:64px;background:#0d0f12;border-bottom:1px solid #3a1d22}
.mgsh-icons img{max-height:54px;max-width:80px}
/* Sketches */
.mgsh-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.mgsh-gallery figure{margin:0;font-size:.78rem;text-align:center}
.mgsh-gallery figure>a{display:block;border-radius:5px;overflow:hidden;background:#fff;border:1px solid var(--mgsh-line)}
.mgsh-gallery img{display:block;width:100%;height:auto}
.mgsh-gallery figcaption{margin-top:3px}
.mgsh-tips ul,.mgsh-trivia{padding-left:1.3rem;margin:.3rem 0}
.mgsh-tips li,.mgsh-trivia li{margin:.25rem 0}
.mgsh-trivia{font-size:.92rem}
.mgsh-faq details{border:1px solid var(--mgsh-line);border-radius:6px;padding:6px 10px;margin:6px 0;background:var(--mgsh-soft)}
.mgsh-faq summary{cursor:pointer;font-weight:600}
.mgsh-sources{margin-top:1.4rem;font-size:.82rem;color:var(--muted,#a7b0ab)}
.mgsh-sources summary{cursor:pointer}
.mgsh-sources ul{padding-left:1.1rem}
.mgsh-sources li{overflow-wrap:anywhere}
/* Right rail */
.mgsh-rail .infobox .mgsh-rail-art{display:block;margin:0 0 8px}
.mgsh-rail .infobox .mgsh-rail-art img{display:block;width:100%;height:auto;border-radius:4px}
.mgsh-rail-nav{border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--surface);margin-top:12px}
.mgsh-rail-nav h2{font-size:.95rem;margin:0 0 .4rem}
.mgsh-rail-nav>a,.mgsh-rail-nav>div{display:flex;gap:8px;align-items:center;padding:4px 0;text-decoration:none;font-size:.85rem;border-top:1px solid var(--line);color:var(--text)}
.mgsh-rail-nav small{display:block;font:600 .74rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent,#9fd8b7)}
.mgsh-rail-face{display:block;width:26px;height:44px;flex:none;border-radius:2px;overflow:hidden;background:#0b1a13}
.mgsh-rail-face img{display:block;width:26px;height:44px;image-rendering:pixelated}
.mgsh-noface{background:repeating-linear-gradient(0deg,#123323 0 2px,#0b1a13 2px 4px)}
@media (max-width:700px){.mgsh-hero{grid-template-columns:1fr}.mgsh-hero>a{max-width:280px}.mgsh-topics{grid-template-columns:1fr 1fr}.mgsh .mgsh-topics a{flex-direction:column;align-items:flex-start}.mgsh-codec{grid-template-columns:1fr}.mgsh-models{grid-template-columns:repeat(2,minmax(0,1fr))}.mgsh-icons{grid-template-columns:repeat(3,minmax(0,1fr))}.mgsh-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.mgsh-chars{grid-template-columns:repeat(2,minmax(0,1fr))}.mgsh-hero-art{max-width:280px}}