/* Neutral graphite surfaces keep the artwork's own colour at the centre. */
:root {
  color-scheme:dark;
  --bg:#101114; --panel:#16181c; --surface:#1d2026; --surface-deep:#0b0c0f;
  --paper:#f1f3f5; --text:#d3d7df; --muted:#adb4c0; --dim:#969fac;
  --line:#353b45; --line-strong:#596271; --accent:#e2b574; --accent-wash:#e2b57409;
  --overlay:#08090bcc; --overlay-top:#08090ba8; --overlay-control:#08090bb8;
  --overlay-line:#e2e6ee33; --scroll-thumb:#606b7b; --progress-track:#343b47;
  --badge-bg:#dce3ee0a; --badge-line:#aab5c255;
  font-family:"Segoe UI",Arial,sans-serif; color:var(--paper); background:var(--bg); font-synthesis:none;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; }
body { height:100dvh; display:flex; flex-direction:column; }
button,input,select { font:inherit; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.4; cursor:default; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,p,dl,dd { margin:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
[hidden],.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px; background:var(--paper); color:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { display:flex; flex:none; align-items:center; justify-content:space-between; height:64px; gap:24px; padding:0 25px; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; gap:8px; font-size:21px; font-weight:850; letter-spacing:-.8px; white-space:nowrap; }
.wordmark span { margin-left:-8px; color:var(--accent); }
.wordmark img { margin-right:5px; }
.game-identity { display:flex; align-items:center; gap:13px; color:var(--muted); font-size:9px; letter-spacing:1.3px; text-transform:uppercase; }
.live-dot { width:4px; height:4px; background:var(--accent); }
.identity-separator { color:var(--line-strong); }
.language-switcher { display:flex; gap:7px; align-items:center; color:var(--dim); font-size:10px; }
.language-button { border:0; padding:10px 4px; background:none; color:var(--muted); font-size:11px; font-weight:650; }
.language-button[aria-pressed=true] { color:var(--paper); }
.mobile-switch { display:none; }
.workspace { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,3fr) minmax(320px,1fr); }
.gallery-pane { min-width:0; min-height:0; position:relative; overflow:hidden; background:var(--bg); }
.category-view { position:absolute; inset:0; }
.category-grid { display:grid; height:100%; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); grid-template-areas:"city city flight wilderness" "city city industry wilderness" "defense depths depths encounters"; }
.category-grid:has([data-category=expeditions]) { grid-template-areas:"city city flight wilderness" "city city industry wilderness" "defense depths expeditions encounters"; }
.category-grid:has([data-category=outposts]) { grid-template-areas:"city city flight wilderness" "city city industry outposts" "defense depths expeditions encounters"; }
.category-tile { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:0; min-width:0; border:0; padding:24px; text-align:left; background:var(--surface); overflow:hidden; }
.category-tile[data-category=city] { grid-area:city; }
.category-tile[data-category=flight] { grid-area:flight; }
.category-tile[data-category=wilderness] { grid-area:wilderness; }
.category-tile[data-category=industry] { grid-area:industry; }
.category-tile[data-category=defense] { grid-area:defense; }
.category-tile[data-category=depths] { grid-area:depths; }
.category-tile[data-category=expeditions] { grid-area:expeditions; }
.category-tile[data-category=outposts] { grid-area:outposts; }
.category-tile[data-category=encounters] { grid-area:encounters; }
.category-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,var(--overlay),transparent 75%); transition:background .3s; }
.category-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s,filter .3s; filter:brightness(.86); }
.category-tile:hover img { transform:scale(1.035); filter:brightness(1.06); }
.category-tile:focus-visible { outline-offset:-4px; z-index:2; }
.category-label { display:block; width:100%; }
.category-label h2 { font-size:clamp(15px,1.6vw,26px); font-weight:550; line-height:1.12; letter-spacing:-.5px; }
.category-tile[data-category=city] h2 { font-size:clamp(28px,3.4vw,52px); letter-spacing:-1px; }
.category-label p { font-size:9px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text); margin-top:9px; }
.category-arrow { margin-left:auto; font-size:18px; color:var(--accent); padding-left:8px; }
.mosaic-caption { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:16px; pointer-events:none; padding:19px 24px 50px; background:linear-gradient(var(--overlay-top),transparent); font-size:8px; letter-spacing:1.7px; color:var(--text); }
.gallery-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:var(--bg); padding:25px; font-size:13px; text-align:center; }
.artwork-view { height:100%; display:flex; flex-direction:column; }
.gallery-toolbar { display:flex; align-items:center; gap:22px; flex:none; min-height:65px; padding:13px 24px; border-bottom:1px solid var(--line); background:var(--panel); }
.gallery-toolbar h1 { font-size:15px; font-weight:500; }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:9px 0; border:0; background:none; font-size:11px; white-space:nowrap; }
.text-button:hover { color:var(--accent); }
.gallery-search { margin-left:auto; min-width:100px; width:190px; }
.gallery-search input { width:100%; border:1px solid var(--line-strong); padding:9px 12px; background:var(--surface); color:var(--paper); border-radius:2px; font-size:11px; }
input::placeholder { color:var(--muted); }
.gallery-scroll { overflow-y:auto; min-height:0; flex:1; scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) var(--panel); }
.gallery-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 24px; font-size:9px; color:var(--muted); letter-spacing:.4px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 14px; padding:0 24px; }
.art-card { min-width:0; }
.art-image-button { display:block; position:relative; padding:0; border:0; width:100%; overflow:hidden; background:var(--surface); }
.art-image-button img { width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; transition:transform .4s; }
.art-image-button:hover img { transform:scale(1.035); }
.art-expand { position:absolute; bottom:9px; right:9px; background:var(--overlay-control); display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--overlay-line); font-size:18px; opacity:0; transition:opacity .2s; }
.art-image-button:is(:hover,:focus-visible) .art-expand { opacity:1; }
.art-caption { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-top:10px; }
.art-caption h3 { font-size:11px; font-weight:500; line-height:1.6; color:var(--text); }
.art-caption p { font-size:8px; text-transform:uppercase; letter-spacing:.7px; color:var(--dim); margin-top:5px; }
.art-number { font-size:9px; color:var(--dim); padding-top:3px; }
.gallery-more { display:flex; justify-content:center; padding:32px 24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:41px; padding:10px 16px; border:1px solid var(--line-strong); border-radius:2px; background:none; color:var(--paper); font-size:11px; font-weight:550; }
.button:hover { color:var(--bg); background:var(--paper); border-color:var(--paper); }
.gallery-empty { grid-column:1/-1; padding:45px 15px; text-align:center; font-size:12px; color:var(--muted); }
.image-viewer { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; background:var(--surface-deep); padding:0 24px; }
.viewer-top { display:flex; justify-content:space-between; align-items:center; flex:none; height:62px; color:var(--text); font-size:10px; border-bottom:1px solid var(--line); }
.viewer-stage { flex:1; min-height:0; position:relative; display:flex; justify-content:center; align-items:center; padding:20px 48px; }
.viewer-stage img { object-fit:contain; max-height:100%; max-width:100%; width:auto; height:auto; }
.viewer-icon { position:absolute; width:35px; height:42px; top:calc(50% - 21px); display:grid; place-items:center; border:1px solid var(--line-strong); background:var(--surface); font-size:20px; }
.viewer-icon:hover { background:var(--paper); color:var(--bg); }
.viewer-prev { left:0; }
.viewer-next { right:0; }
.viewer-bottom { display:flex; align-items:center; justify-content:space-between; flex:none; gap:20px; padding:20px 0 24px; border-top:1px solid var(--line); }
.viewer-bottom h2 { font-size:15px; font-weight:500; line-height:1.6; }
.viewer-bottom p { font-size:8px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-top:7px; }
.noscript-note { position:fixed; bottom:0; z-index:50; padding:20px; color:var(--bg); background:var(--accent); font-size:13px; width:100%; }
@media (max-width:1200px) { .category-tile { padding:17px; } .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .game-identity { font-size:8px; letter-spacing:.8px; } .gallery-toolbar { gap:14px; padding-inline:18px; } .gallery-toolbar h1 { font-size:13px; } .gallery-search { width:160px; } }
@media (max-width:850px) {
  .site-header { height:106px; flex-wrap:wrap; gap:0; padding:12px 18px 0; }
  .game-identity { display:none; }
  .wordmark { font-size:20px; }
  .mobile-switch { display:flex; width:100%; align-self:flex-end; border-top:1px solid var(--line); margin-top:9px; }
  .mobile-switch button { flex:1; border:0; border-bottom:2px solid transparent; padding:10px; background:none; color:var(--muted); font-size:11px; }
  .mobile-switch button[aria-pressed=true] { color:var(--accent); border-bottom-color:var(--accent); }
  .workspace { display:block; }
  .workspace > * { height:100%; }
  .workspace[data-mobile-panel=gallery] .development-pane,.workspace[data-mobile-panel=development] .gallery-pane { display:none; }
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); grid-template-areas:"city city flight" "city city industry" "wilderness defense defense" "wilderness depths encounters"; }
  .category-grid:has([data-category=expeditions]) { grid-template-areas:"city city flight" "city city industry" "wilderness defense expeditions" "wilderness depths encounters"; }
  .category-grid:has([data-category=outposts]) { grid-template-areas:"city city flight" "city city industry" "wilderness defense outposts" "depths expeditions encounters"; }
  .category-label h2 { font-size:clamp(13px,3vw,22px); }
  .category-tile[data-category=city] h2 { font-size:clamp(27px,6vw,42px); }
  .category-label p { font-size:8px; letter-spacing:.5px; }
  .category-tile { padding:15px 12px; }
  .mosaic-caption { padding:13px 12px 35px; font-size:7px; letter-spacing:.7px; }
  .mosaic-caption > span:last-child { display:none; }
  .gallery-toolbar { flex-wrap:wrap; gap:7px 18px; padding:10px 15px; }
  .gallery-toolbar h1 { margin-left:auto; font-size:14px; }
  .gallery-search { width:100%; }
  .gallery-grid { gap:20px 12px; padding-inline:15px; }
  .gallery-meta { padding:13px 15px; font-size:8px; }
  .gallery-meta > span { max-width:50%; text-align:right; }
  .art-expand { opacity:1; }
  .art-caption h3 { font-size:10px; }
  .art-number { display:none; }
  .image-viewer { padding-inline:15px; }
  .viewer-stage { padding:15px 0 60px; }
  .viewer-icon { top:auto; bottom:7px; }
  .viewer-prev { left:calc(50% - 45px); }
  .viewer-next { right:calc(50% - 45px); }
  .viewer-bottom { align-items:flex-start; padding-bottom:18px; gap:12px; }
  .viewer-bottom h2 { font-size:12px; }
  .viewer-bottom .text-button { font-size:9px; gap:6px; }
}
@media (max-height:520px) and (min-width:851px) { .category-tile { padding:13px; } .category-label h2 { font-size:15px; } .category-label p { margin-top:4px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }