:root { --paper:#faf9f4; --surface:#fffefa; --ink:#243b35; --muted:#6e7e74; --green:#23685a; --green-light:#eaf0e7; --line:#e0e5db; --gold:#b68a43; --shadow:0 5px 22px #203b3010; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,.button { cursor:pointer; }
button { color:inherit; }
button:disabled { opacity:.45; cursor:default; }
:focus-visible { outline:3px solid #ba8b37; outline-offset:3px; }
[hidden] { display:none !important; }
.svg-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:100; padding:12px; background:white; }
.skip-link:focus { top:10px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:222px; background:#f1f3eb; border-right:1px solid var(--line); padding:32px 20px; display:flex; flex-direction:column; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; font-size:20px; font-weight:750; letter-spacing:1px; }
.brand-mark { width:43px; height:45px; display:grid; place-items:center; border-radius:14px 14px 17px 17px; background:var(--green); color:#fffdf3; }
.brand-mark .icon { width:30px; height:30px; }
.brand-sub { display:block; font-size:9px; font-weight:600; letter-spacing:2.4px; color:var(--muted); margin-top:1px; }
.sidebar-label { margin:53px 14px 15px; font-size:10px; color:#849184; }
nav { display:flex; flex-direction:column; gap:7px; }
nav a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:8px; color:#65786b; font-weight:600; }
nav a:hover { background:#e6ecdf; }
nav a[aria-current=page] { background:var(--green); color:white; box-shadow:0 4px 12px #23685a1a; }
.nav-arrow { margin-left:auto; font-size:17px; }
.nav-count { margin-left:auto; font-size:11px; border-radius:5px; background:#91a38f24; min-width:22px; text-align:center; }
.sidebar-bottom { margin-top:auto; padding:24px 13px 0; border-top:1px solid #dce2d5; font-size:11px; color:#617366; }
.sidebar-bottom p { color:#899182; line-height:1.9; margin:14px 0 22px; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#7e9d72; margin-right:5px; vertical-align:middle; }
.edition { font-size:10px; letter-spacing:1px; }
.workspace { margin-left:222px; }
.topbar { height:67px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:0 38px; font-size:12px; color:var(--muted); background:#fffefa90; }
.slash { margin:0 12px; color:#bdc6b8; }
#breadcrumb { color:var(--ink); }
.local-badge { background:#eef2e9; padding:4px 10px; border:1px solid #e3e9db; border-radius:20px; font-size:10px; }
main { max-width:1560px; margin:auto; padding:32px 38px 0; }
.hero { display:flex; align-items:center; justify-content:space-between; min-height:112px; gap:20px; }
.eyebrow { font-size:10px; letter-spacing:2.1px; color:#7a8f74; font-weight:650; margin:0 0 9px; }
h1 { font-family:"Microsoft YaHei","Segoe UI",sans-serif; font-size:32px; letter-spacing:.8px; line-height:1.35; margin:0 0 12px; font-weight:700; }
h2 { font-size:19px; margin:0 0 6px; font-weight:650; }
h3 { font-size:15px; margin:0 0 10px; }
p { margin:8px 0 16px; }
.lead { color:var(--muted); font-size:13px; margin:0 0 20px; }
.hero-tags { display:flex; gap:8px; }
.hero-tags span { color:#788570; font-size:10px; border:1px solid #dce3d5; border-radius:4px; padding:2px 8px; }
.hero .eyebrow { margin-bottom:5px; }
.hero h1 { font-size:28px; margin-bottom:6px; }
.hero .lead { margin-bottom:10px; }
.hero-art { width:140px; flex-shrink:0; margin-right:12px; opacity:.9; }
.stat-strip { display:flex; align-items:center; flex-wrap:wrap; gap:6px 22px; margin:12px 0 18px; }
.stat-strip>div { display:flex; align-items:center; gap:6px; }
.stat-strip>div>span:not(.stat-icon) { display:inline-flex; align-items:baseline; gap:6px; }
.stat-strip strong { font-size:16px; line-height:1.4; font-weight:650; }
.stat-strip small { font-size:11px; color:var(--muted); }
.stat-icon { color:#779377; width:18px; height:18px; display:grid; place-items:center; font-size:16px; }
.stat-link { margin-left:4px; font-size:11px; white-space:nowrap; }
.text-link { color:var(--green); }
.section-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; gap:16px; }
.section-top p { margin:0; font-size:11px; }
.tiny-label { font-size:9px; font-weight:400; color:#9ba693; letter-spacing:1.6px; margin-left:9px; }
.map-note { font-size:10px; color:#88917f; border:1px solid #e0e5d8; border-radius:4px; padding:3px 8px; }
.muted { color:var(--muted); font-size:12px; }
.map-layout { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:17px; align-items:start; }
.map-card,.detail-card { border:1px solid var(--line); background:var(--surface); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.map-filters { padding:14px 16px; display:flex; gap:12px; align-items:flex-end; border-bottom:1px solid var(--line); flex-wrap:wrap; }
label { display:flex; flex-direction:column; gap:5px; font-size:11px; color:#657565; }
select,input[type=search] { border:1px solid #dce2d7; background:#fffefa; color:var(--ink); border-radius:5px; padding:7px 10px; min-height:34px; font-size:12px; max-width:100%; }
.map-filters select { max-width:175px; }
.check-label { flex-direction:row; align-items:center; min-height:34px; margin-left:auto; gap:5px; }
input[type=checkbox] { accent-color:var(--green); width:16px; height:16px; flex-shrink:0; }
.map-stage { height:450px; position:relative; background-color:#f4f5ec; background-image:radial-gradient(#b5c3ad66 .7px,transparent .7px); background-size:18px 18px; overflow:hidden; }
#map-svg { width:100%; height:100%; display:block; overflow:hidden; touch-action:none; cursor:grab; }
#map-svg.dragging { cursor:grabbing; }
.map-corner-label { position:absolute; left:17px; top:13px; color:#96a08a; letter-spacing:1.4px; font-size:8px; pointer-events:none; }
.compass { position:absolute; right:19px; top:13px; color:#899b80; font-size:9px; text-align:center; line-height:1.2; pointer-events:none; }
.compass span { display:block; font-size:28px; font-family:Georgia,serif; }
.map-tools { position:absolute; right:14px; bottom:15px; display:flex; gap:1px; border:1px solid #d4dfcc; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); }
.map-tools button { border:0; background:var(--surface); min-width:34px; height:32px; font-size:17px; }
.map-tools button:last-child { font-size:11px; padding:0 10px; border-left:1px solid var(--line); }
.map-tools button:hover { background:#e5eddc; }
.map-hint { position:absolute; bottom:17px; left:17px; font-size:9px; color:#8a967f; pointer-events:none; }
.map-empty { position:absolute; inset:44% 10% auto; text-align:center; color:var(--muted); }
.map-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:9px; padding:12px 15px; border-top:1px solid var(--line); }
.map-legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:9px; color:#73816d; }
.map-legend span { display:flex; align-items:center; gap:3px; }
.map-legend .icon { width:14px; height:14px; }
#map-summary { font-size:9px; }
.world-cell { cursor:pointer; }
.world-floor { stroke:none; fill:var(--cell-fill,#e0e9d6); }
.world-wall { stroke:#82967b; stroke-width:1.5; fill:none; }
.world-cell-outline { fill:none; stroke:transparent; stroke-width:2.5; }
.world-cell:hover .world-cell-outline,.world-cell:focus .world-cell-outline { stroke:#ba8c39; }
.world-cell.selected .world-cell-outline { stroke:#215f52; stroke-width:3; }
.world-cell.hidden-cell .world-floor { opacity:.55; }
.map-marker rect { fill:#fffdf0; stroke:#8a9c70; stroke-width:1; }
.map-marker use { fill:none; stroke:#436e4a; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.map-marker.collected rect { fill:#e5e7df; stroke:#a7ada1; }
.map-marker.collected use { stroke:#92998b; }
.map-marker.collected { opacity:.7; }
.marker-check { font-size:10px; fill:#687362; font-family:Arial,sans-serif; font-weight:700; }
.marker-overflow { font-size:9px; fill:#456843; }
.detail-card { min-height:568px; display:flex; flex-direction:column; }
.detail-heading { display:flex; gap:9px; padding:18px 17px; border-bottom:1px solid var(--line); color:var(--green); align-items:center; }
.detail-heading .icon { width:17px; height:17px; }
.detail-heading h3 { margin:0; font-size:13px; }
#map-detail { padding:18px 16px; max-height:468px; overflow:auto; flex:1; }
.detail-empty { text-align:center; color:#92a088; padding:95px 0 70px; }
.detail-empty>.icon { width:45px; height:45px; stroke-width:1; margin-bottom:17px; }
.detail-empty h3 { color:#6e8068; font-weight:500; font-size:13px; }
.detail-empty p { font-size:11px; line-height:1.9; }
.detail-foot { border-top:1px solid var(--line); color:#909b87; padding:12px 16px; font-size:9px; }
.detail-meta { color:var(--muted); font-size:10px; margin:4px 0 15px; }
.reward-card { padding:12px 0; border-top:1px solid var(--line); }
.reward-line { display:flex; align-items:center; gap:7px; font-size:12px; margin-bottom:7px; }
.reward-line button { border:0; background:none; text-align:left; padding:0; font-weight:600; color:var(--green); }
.reward-line .icon { width:18px; height:18px; color:#8a9b72; }
.reward-card p { font-size:10px; color:var(--muted); margin:5px 0; overflow-wrap:anywhere; }
.event-check { flex-direction:row; align-items:center; margin-top:9px; color:var(--green); font-size:11px; }
.footnote { font-size:10px; color:#899380; margin:15px 0 0; line-height:1.8; }
.site-footer { display:flex; justify-content:space-between; gap:15px; border-top:1px solid var(--line); color:#929c89; font-size:10px; margin-top:35px; padding:19px 0 24px; }
.footer-dot { margin:0 7px; }
.filter-bar { display:flex; align-items:flex-end; gap:16px; margin:25px 0 18px; flex-wrap:wrap; }
.search-field { flex:1; min-width:180px; max-width:470px; }
.filter-bar>.muted { margin-left:auto; padding-bottom:7px; }
.item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.item-card { border:1px solid var(--line); border-radius:9px; padding:21px; background:var(--surface); text-align:left; display:flex; flex-direction:column; align-items:flex-start; transition:transform .15s,box-shadow .15s; }
.item-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#acbda1; }
.item-art { display:grid; place-items:center; width:44px; height:44px; background:#eff3e9; color:#799567; border-radius:11px; flex-shrink:0; }
.item-art .icon { width:25px; height:25px; }
.item-top { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.item-top h3 { margin:0 0 2px; }
.tag { display:inline-block; font-size:9px; padding:2px 6px; border-radius:4px; background:#edf2e7; color:#758768; }
.tag.gold { color:#9b7b41; background:#f6f0e1; }
.item-desc { font-size:12px; color:var(--muted); margin:0 0 17px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.item-card-footer { font-size:10px; color:#7b8e70; margin-top:auto; width:100%; display:flex; justify-content:space-between; gap:5px; }
.load-more-wrap { text-align:center; margin:25px 0; }
.primary,.secondary,.button { display:inline-flex; justify-content:center; align-items:center; gap:7px; border-radius:6px; padding:9px 16px; font-size:12px; border:1px solid var(--line); }
.primary { color:white; background:var(--green); border-color:var(--green); }
.primary:hover { background:#195347; }
.secondary { color:var(--green); background:var(--surface); }
.secondary:hover { background:#eef2e7; }
.collection-overview { display:flex; justify-content:space-between; align-items:center; gap:28px; background:#edf2e6; padding:25px 28px; border:1px solid #dde6d3; border-radius:10px; margin:25px 0 15px; }
.collection-overview>div:first-child { width:55%; }
.collection-overview p { margin:1px 0 9px; color:#7e8d72; font-size:12px; }
.collection-overview strong { font-size:35px; font-family:Georgia,serif; color:var(--green); font-weight:400; margin-right:6px; }
progress { width:100%; height:7px; border:0; background:#d8e2ce; border-radius:8px; overflow:hidden; accent-color:var(--green); }
progress::-webkit-progress-bar { background:#d8e2ce; }
progress::-webkit-progress-value { background:var(--green); border-radius:8px; }
.collection-actions { display:flex; gap:9px; flex-wrap:wrap; }
.file-input { width:1px; height:1px; overflow:hidden; position:absolute; opacity:0; }
.collection-actions:has(.file-input:focus-visible) .button { outline:3px solid #ba8b37; outline-offset:3px; }
.notice { background:#f5f1e5; color:#8c7955; padding:12px 16px; border:1px solid #e9e0cc; border-radius:6px; font-size:11px; line-height:1.9; }
.collection-list { display:flex; flex-direction:column; gap:9px; }
.collection-row { display:flex; align-items:center; gap:16px; padding:17px 21px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.collection-row.done { background:#f0f2eb; }
.collection-row.done h3 { color:#82917a; }
.collection-row>label { padding:6px; }
.collection-row>div { flex:1; min-width:0; }
.collection-row h3 { margin:0 0 4px; font-size:13px; }
.collection-row p { font-size:11px; color:var(--muted); margin:0; }
.collection-row .secondary { white-space:nowrap; padding:6px 10px; font-size:10px; }
.character-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
.character-card { border:1px solid var(--line); padding:25px; border-radius:10px; background:var(--surface); }
.character-card .item-top { margin-bottom:18px; }
.character-card p { font-size:13px; color:#677765; }
.source-credit { border-top:1px solid var(--line); padding-top:13px; color:#87927c; font-size:10px; line-height:1.9; overflow-wrap:anywhere; }
.source-credit a,.paper a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.about-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:22px; margin-top:28px; }
.paper { border:1px solid var(--line); background:var(--surface); padding:27px; border-radius:10px; }
.paper h2 { margin-bottom:20px; }
.paper h3 { margin-top:24px; }
.paper p,.paper li { color:var(--muted); font-size:12px; line-height:1.95; }
.paper ul { padding-left:19px; }
dialog { border:1px solid var(--line); padding:25px 28px; border-radius:13px; background:var(--surface); color:var(--ink); width:min(650px,calc(100% - 28px)); max-height:85vh; box-shadow:0 20px 100px #112c3450; }
dialog::backdrop { background:#182d285f; backdrop-filter:blur(3px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.icon-button { background:#edf2e7; border:0; border-radius:50%; width:30px; height:30px; font-size:22px; }
.dialog-desc { color:var(--muted); white-space:pre-line; }
.source-row { border:1px solid var(--line); border-radius:7px; padding:14px; margin-top:10px; }
.source-row h3 { font-size:13px; margin-bottom:5px; }
.source-row p { font-size:11px; color:var(--muted); margin:6px 0; }
.source-row .secondary { margin-top:7px; padding:5px 10px; font-size:11px; }
.toast { position:fixed; bottom:25px; left:calc(50% + 100px); transform:translateX(-50%); max-width:calc(100% - 32px); background:#254c40; color:white; padding:12px 22px; border-radius:8px; z-index:100; font-size:12px; box-shadow:0 6px 25px #162f3230; }
.empty-state { grid-column:1/-1; padding:50px 20px; text-align:center; color:var(--muted); background:#f1f4eb; border-radius:8px; }
@media(min-width:1500px) { .map-stage { height:510px; } .detail-card { min-height:628px; } #map-detail { max-height:528px; } }
@media(max-width:1200px) { .sidebar { width:194px; padding:28px 14px; } .workspace { margin-left:194px; } main { padding:27px 25px 0; } .topbar { padding:0 25px; } .brand { font-size:18px; } .map-layout { grid-template-columns:minmax(0,1fr) 235px; gap:12px; } .stat-link { display:none; } .map-filters { gap:9px; } .map-filters select { max-width:135px; } .check-label { margin-left:0; } .item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:950px) { .sidebar { position:static; width:auto; padding:14px 22px; flex-direction:row; align-items:center; gap:24px; border-right:0; border-bottom:1px solid var(--line); } .brand { white-space:nowrap; } .brand-mark { width:35px; height:36px; } .brand-mark .icon { width:25px; height:25px; } .sidebar-label,.sidebar-bottom,.nav-arrow,.nav-count { display:none; } nav { flex-direction:row; gap:3px; margin-left:auto; overflow:auto; } nav a { white-space:nowrap; font-size:11px; padding:10px; gap:5px; } nav .icon { width:17px; height:17px; } .workspace { margin-left:0; } .topbar { height:45px; } .map-stage { height:430px; } .detail-card { min-height:548px; } .toast { left:50%; } }
@media(max-width:700px) { .sidebar { flex-direction:column; align-items:stretch; gap:13px; padding:16px 18px 10px; } .brand { justify-content:center; } nav { margin:0; justify-content:space-between; } nav a { flex-direction:column; padding:8px 7px; font-size:10px; gap:3px; border-radius:6px; } nav .icon { width:19px; height:19px; } .topbar { padding:0 19px; font-size:10px; } .local-badge { font-size:9px; } main { padding:25px 18px 0; } h1 { font-size:27px; } .hero { min-height:0; } .hero h1 { font-size:25px; } .hero-art { display:none; } .hero-tags { gap:6px; } .eyebrow { font-size:8px; letter-spacing:1.5px; } .lead { font-size:12px; } .stat-strip { column-gap:16px; margin:10px 0 16px; } .section-top { align-items:flex-start; } .tiny-label { display:none; } .map-note { font-size:9px; white-space:nowrap; } .map-layout { grid-template-columns:1fr; } .map-filters { padding:12px; gap:10px; } .map-filters>label { flex:1; min-width:95px; } .map-filters select { max-width:100%; width:100%; } .map-filters>.check-label { min-width:100%; min-height:22px; } .map-stage { height:390px; } .detail-card { min-height:0; } #map-detail { max-height:350px; } .detail-empty { padding:25px 0 15px; } .detail-empty>.icon { width:32px; height:32px; margin-bottom:8px; } .detail-empty p br { display:none; } .item-grid { gap:10px; } .item-card { padding:15px; } .item-top { gap:9px; } .item-top h3 { font-size:13px; } .item-art { width:34px; height:34px; border-radius:9px; } .item-art .icon { width:21px; height:21px; } .item-desc { font-size:11px; } .item-card-footer { font-size:9px; flex-wrap:wrap; } .collection-overview { align-items:stretch; flex-direction:column; padding:22px; gap:15px; } .collection-overview>div:first-child { width:100%; } .collection-actions>* { flex:1; } .collection-row { padding:13px 10px; gap:7px; } .collection-row h3 { font-size:12px; } .collection-row p { font-size:10px; } .collection-row .secondary { max-width:70px; white-space:normal; } .character-grid,.about-grid { grid-template-columns:1fr; } .site-footer { font-size:9px; flex-wrap:wrap; gap:5px; } .filter-bar { gap:10px; } .filter-bar>.muted { margin-left:0; width:100%; padding:0; } .paper { padding:22px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* Second edition: original pixel assets, regional atlas and independent filters. */
.game-icon { width:28px; height:28px; object-fit:contain; image-rendering:pixelated; flex-shrink:0; }
.item-art .game-icon { width:32px; height:32px; }
.reward-line .game-icon { width:24px; height:24px; }
.map-marker .game-icon { width:19px; height:19px; image-rendering:pixelated; }
.map-marker.collected .game-icon { filter:grayscale(1); opacity:.6; }
.map-view-heading { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:21px 18px 15px; border-bottom:1px solid var(--line); }
.map-view-heading h2 { font-size:27px; line-height:1.4; margin:0; }
.map-view-heading .eyebrow { margin-bottom:4px; font-size:9px; }
.map-view-heading label { flex-shrink:0; }
.map-filters { gap:10px; }
.map-filters .check-label { margin-left:0; min-height:28px; }
.inactive-filter { opacity:.5; }
.region-legend { display:flex; flex-wrap:wrap; gap:5px 8px; padding:11px 15px; border-bottom:1px solid var(--line); }
.region-legend button { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid transparent; border-radius:4px; padding:4px 5px; font-size:11px; }
.region-legend button:hover { background:#edf2e7; border-color:#c8d3bc; }
.region-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--region-color); border:1px solid #0002; flex-shrink:0; }
.map-stage.overview { height:590px; }
.map-legend { gap:7px; }
.map-legend button { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid #becdb2; border-radius:6px; background:#edf3e6; color:#315a42; font-size:11px; min-height:34px; }
.map-legend button:hover { border-color:var(--green); }
.map-legend button[aria-pressed=false] { background:#f4f3ef; color:#898d82; border-style:dashed; }
.map-legend button[aria-pressed=false] .game-icon { filter:grayscale(1); opacity:.45; }
.map-legend .game-icon { width:22px; height:22px; }
.world-connection { cursor:pointer; fill:#755737; }
.connection-line { fill:none; stroke:#755737; stroke-width:1.8; }
.connection-hit { fill:none; stroke:transparent; stroke-width:14; }
.world-connection:hover .connection-line,.world-connection:focus .connection-line,.world-connection.selected .connection-line { stroke:#c58225; stroke-width:3; }
.story-connection .connection-line { stroke-dasharray:5 4; }
.connection-count { font:600 11px "Microsoft YaHei",sans-serif; paint-order:stroke; stroke:#fffdf3; stroke-width:4; stroke-linejoin:round; text-anchor:middle; }
.region-label { cursor:pointer; }
.region-label rect { fill:#fffdf5; fill-opacity:.97; stroke-width:1.4; }
.region-label text { font:600 12px "Microsoft YaHei",sans-serif; fill:#35483b; }
.region-label:hover rect,.region-label:focus rect { fill:#e9f0de; stroke-width:2.5; }
.region-leader { fill:none; stroke:#96a58c; stroke-width:.8; stroke-dasharray:2 3; pointer-events:none; }
#map-labels { pointer-events:none; }
.region-label rect,.region-label text,.region-label circle { pointer-events:auto; }
#map-detail .secondary { font-size:10px; padding:5px 8px; margin:4px 0 10px; }
#map-detail .reward-card h3 { font-size:12px; }
.map-connection-note { margin:0; padding:9px 15px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); }
@media(min-width:1500px) { .map-stage.overview { height:650px; } }
@media(max-width:1100px) { .map-layout { grid-template-columns:minmax(0,1fr); } .detail-card { min-height:0; } #map-detail { max-height:360px; } .detail-empty { padding:24px 0; } .detail-empty p br { display:none; } }
@media(max-width:700px) { .map-view-heading { padding:16px 12px; gap:10px; } .map-view-heading h2 { font-size:23px; } .map-view-heading select { max-width:105px; } .map-filters>.check-label { min-width:0; flex:initial; } .map-stage.overview { height:540px; } .region-legend { padding:9px; gap:3px; } .region-legend button { font-size:10px; padding:3px 4px; } .map-legend button { padding:5px; font-size:10px; } .item-art .game-icon { width:28px; height:28px; } }

.region-index { display:none; font-size:10px; font-weight:700; color:#56694e; font-variant-numeric:tabular-nums; }
.compact-region-label rect { stroke-width:2.3; }
.compact-region-label text { font-size:11px; font-weight:750; }
@media(max-width:700px) { .region-index { display:inline; } .map-stage.overview { height:430px; } }

/* Third edition: legible item art, character dossiers and companion guide. */
.brand { flex-direction:column; gap:6px; align-items:center; }
.brand-logo { display:block; width:174px; max-width:100%; height:auto; max-height:112px; object-fit:contain; }
.brand .brand-sub { font-size:9px; letter-spacing:3px; margin:0; }
.brand-note { display:block; max-width:180px; font-size:11px; line-height:1.5; font-weight:500; letter-spacing:0; color:#617366; text-align:center; white-space:normal; }
.sidebar-label { margin-top:36px; }
.item-card .item-art,#item-dialog .item-art { width:76px; height:76px; border-radius:15px; }
.item-card .item-art .game-icon,#item-dialog .item-art .game-icon { width:64px; height:64px; }
.item-card .item-top { width:100%; }
.item-card .item-top>div { min-width:0; }
.item-price { display:flex; align-items:center; gap:6px; color:#86632e; font-size:12px; font-weight:600; margin:0 0 16px; }
.item-price .icon { width:17px; height:17px; }
.map-mode-field { display:flex; flex-direction:column; gap:5px; font-size:11px; color:#657565; }
.map-mode-switch { display:flex; border:1px solid #cbd9c4; border-radius:6px; overflow:hidden; background:#f2f5ec; }
.map-mode-switch button { min-height:34px; padding:6px 12px; border:0; background:transparent; color:#60745d; font-size:12px; white-space:nowrap; }
.map-mode-switch button+button { border-left:1px solid #cbd9c4; }
.map-mode-switch button[aria-pressed=true] { color:white; background:var(--green); }
.map-mode-switch button:focus-visible { outline-offset:-3px; }
.character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.character-card { position:relative; isolation:isolate; overflow:hidden; padding:25px; min-height:345px; }
.character-portrait { position:absolute; top:0; right:0; width:46%; height:345px; object-fit:contain; object-position:top right; z-index:-1; pointer-events:none; mask-image:linear-gradient(to right,transparent 0%,#0005 22%,#000c 60%,#000 90%); -webkit-mask-image:linear-gradient(to right,transparent 0%,#0005 22%,#000c 60%,#000 90%); }
.character-main { min-height:290px; }
.has-portrait .character-main { padding-right:37%; }
.character-heading { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.has-portrait .character-heading { flex-wrap:wrap; gap:7px 12px; }
.character-heading h2 { font-size:23px; line-height:1.4; overflow-wrap:anywhere; }
.character-heading .tag { font-size:11px; }
.character-pixel-frame { display:grid; place-items:center; width:112px; height:112px; flex-shrink:0; background:linear-gradient(145deg,#edf2e5e6,#edf2e533); border-radius:18px; }
.character-pixel { width:112px; height:112px; object-fit:contain; image-rendering:pixelated; }
.character-pixel-frame>.icon { width:46px; height:46px; color:#9aac8b; }
.character-card p { font-size:13px; line-height:1.9; color:#4e6256; }
.character-intro { margin:0 0 12px; }
.character-details p { margin:9px 0; }
.character-facts { margin:16px 0; font-size:12px; }
.character-facts>div { display:flex; gap:12px; padding:7px 0; border-top:1px solid #dfe6da; }
.character-facts dt { color:#7c8c73; min-width:3em; }
.character-facts dd { margin:0; overflow-wrap:anywhere; color:#3e584a; }
.character-spoiler-area { position:relative; margin:20px 0 16px; background:var(--surface); }
.spoiler-toggle { min-height:40px; border-color:#d9cfb8; color:#8a6835; }
.spoiler-toggle[aria-expanded=true] { background:#f4eddf; }
.character-spoilers { background:#f6f2e8; border-left:3px solid #b89a5c; padding:16px 18px; margin-top:12px; border-radius:0 8px 8px 0; }
.character-spoilers h3 { color:#795e37; font-size:14px; margin:5px 0; }
.character-spoilers p:last-child { margin-bottom:0; }
.spoiler-images { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.spoiler-portrait { width:auto; max-width:100%; height:260px; object-fit:contain; }
.source-credit { position:relative; background:var(--surface); margin-top:18px; }
.source-credit summary { cursor:pointer; color:#798973; font-size:11px; }
.character-card .source-credit p { color:#7e8976; font-size:10px; margin:10px 0 0; }
.assistant-hero { display:flex; gap:35px; align-items:center; padding:30px; border:1px solid #dce5d4; border-radius:14px; background:linear-gradient(120deg,#edf3e8,#f9f7ed); }
.assistant-hero>div:first-child { flex:1; min-width:0; }
.assistant-hero p:not(.eyebrow):not(.lead) { color:#61725e; font-size:13px; line-height:1.9; max-width:700px; }
.assistant-links { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 12px; }
.assistant-hero .text-link { font-size:12px; }
.assistant-cover { flex:0 1 42%; width:42%; max-width:460px; min-width:0; }
.assistant-cover img { display:block; width:100%; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 8px 24px #203b3018; }
.assistant-gallery { display:grid; gap:26px; margin-top:30px; }
.assistant-feature { display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.assistant-feature>div { padding:12px 16px 12px 0; }
.assistant-feature h2 { font-size:21px; line-height:1.5; margin-bottom:14px; }
.assistant-feature p { color:var(--muted); font-size:13px; line-height:1.9; }
.assistant-screenshot { display:block; overflow:hidden; border:1px solid #d8e1d3; border-radius:8px; background:#edf1e8; }
.assistant-screenshot img { display:block; width:100%; height:auto; }
.assistant-extras { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:26px; }
.save-picker { display:flex; align-items:center; gap:24px; justify-content:space-between; margin-top:28px; }
.save-picker>div { min-width:0; }
.save-picker button { flex-shrink:0; }
.save-picker input { display:block; max-width:100%; margin-top:5px; color:var(--ink); }
.save-picker input::file-selector-button { border:1px solid #cbd9c4; border-radius:5px; padding:8px 12px; margin-right:10px; background:#edf3e7; color:var(--green); cursor:pointer; }
#save-status { margin:16px 0; }
.save-summary { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:15px; margin:22px 0; }
.save-summary article { padding:22px; border:1px solid var(--line); border-radius:9px; background:#edf2e7; }
.save-summary span { display:block; color:#75856d; font-size:11px; margin-bottom:7px; }
.save-summary strong { font-size:19px; font-weight:600; overflow-wrap:anywhere; }
.save-collection { margin-bottom:20px; }
.save-collection .text-link { display:inline-block; margin:12px; font-size:12px; color:var(--green); }
.save-inventory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.save-inventory-item { display:flex; align-items:center; gap:10px; text-align:left; background:#f6f7f0; border:1px solid #e0e6da; border-radius:7px; padding:12px; }
.save-inventory-item>span { flex:1; min-width:0; font-size:12px; }
.save-inventory-item small { display:block; font-size:10px; color:#7c8a70; }
.save-inventory-item strong { white-space:nowrap; font-size:12px; color:var(--green); }
.save-inventory-item .game-icon { width:38px; height:38px; }
@media(max-width:950px) { .save-inventory { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .save-picker { align-items:stretch; flex-direction:column; gap:16px; } .save-summary { grid-template-columns:1fr; gap:10px; } .save-summary article { padding:17px; } .save-summary strong { font-size:17px; } .save-inventory { grid-template-columns:1fr; } .save-collection .primary { width:100%; } }
@media(max-width:1200px) { .character-grid { grid-template-columns:1fr; } .character-heading { flex-wrap:nowrap !important; } .character-portrait { width:34%; } .has-portrait .character-main { padding-right:31%; } .assistant-feature { grid-template-columns:1.3fr 1fr; gap:20px; } }
@media(min-width:1500px) { .character-heading { flex-wrap:nowrap !important; } .character-pixel-frame,.character-pixel { width:96px; height:112px; } }
@media(max-width:700px) {
  nav { justify-content:flex-start; gap:5px; padding-bottom:3px; } nav a { flex:1 0 auto; min-width:55px; }
  .map-mode-field { flex:0 0 auto; } .map-mode-switch button { padding:6px 9px; font-size:11px; }
  .map-filters>label { min-width:85px; }
  .item-card .item-art { width:64px; height:64px; } .item-card .item-art .game-icon { width:52px; height:52px; }
  .item-card .item-top { flex-direction:column; align-items:flex-start; gap:10px; } .item-price { font-size:11px; align-items:flex-start; }
  .character-card { padding:20px; min-height:300px; } .character-heading { flex-wrap:wrap !important; }
  .character-pixel-frame,.character-pixel { width:96px; height:112px; } .character-heading h2 { font-size:21px; }
  .character-portrait { width:39%; height:300px; } .has-portrait .character-main { padding-right:32%; }
  .character-facts>div { flex-direction:column; gap:3px; }
  .assistant-hero { padding:23px; flex-direction:column; align-items:stretch; gap:24px; }
  .assistant-cover { flex:none; width:100%; margin:0 auto; }
  .assistant-feature { grid-template-columns:1fr; gap:8px; padding:12px; } .assistant-feature>div { padding:12px 7px; }
  .assistant-feature h2 { font-size:19px; } .assistant-extras { grid-template-columns:1fr; gap:12px; }
}
@media(max-width:950px) { .brand { min-width:115px; } .brand-logo { width:126px; max-height:70px; } .brand .brand-sub { font-size:8px; letter-spacing:2px; } }
@media(max-width:700px) { .brand-logo { width:160px; max-height:85px; } }
@media(max-width:380px) { .character-card { padding:16px; } .has-portrait .character-main { padding-right:29%; } .character-portrait { width:34%; } .map-mode-field { width:100%; } .map-mode-switch { width:fit-content; } }

/* Fourth edition: spoiler-safe achievements. */
.achievement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.achievement-card { padding:24px; border:1px solid var(--line); background:var(--surface); border-radius:12px; min-width:0; }
.achievement-state { display:block; color:var(--green); font-size:11px; font-weight:600; margin-bottom:16px; }
.achievement-heading { display:flex; align-items:center; gap:18px; }
.achievement-heading>div { min-width:0; }
.achievement-heading h2 { margin:0 0 8px; font-size:21px; line-height:1.5; overflow-wrap:anywhere; }
.achievement-icon,.achievement-placeholder { width:96px; height:96px; flex:0 0 96px; border-radius:12px; object-fit:contain; }
.achievement-placeholder { display:grid; place-items:center; background:#edf2e7; color:#97a68b; }
.achievement-placeholder .icon { width:40px; height:40px; }
.achievement-card.status-locked .achievement-icon { filter:grayscale(1); opacity:.58; }
.achievement-card.status-locked .achievement-state { color:#788171; }
.achievement-card.status-unknown .achievement-state { color:#96723c; }
.achievement-card.status-reference .achievement-state { color:var(--muted); }
.achievement-card p { font-size:13px; line-height:1.9; color:#526652; overflow-wrap:anywhere; }
.achievement-guide { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.achievement-guide h3 { font-size:12px; color:#8b733d; }
.achievement-guide p { margin:7px 0 0; }
.achievement-card .achievement-evidence { margin:18px 0 0; font-size:11px; color:var(--muted); }
.achievement-secret-intro h2 { margin:16px 0 0; font-size:21px; }
.achievement-details { margin-top:18px; }
#achievement-source-picker { display:flex; flex-wrap:wrap; gap:16px; }
#achievement-source-picker label { display:block; }
#achievement-source-picker select { display:block; margin-top:5px; max-width:100%; }
#achievement-status { margin:16px 0; }
@media(max-width:950px) { .sidebar nav { min-width:0; max-width:100%; overscroll-behavior-x:contain; } }
@media(max-width:700px) { .achievement-grid { grid-template-columns:1fr; gap:14px; } .achievement-card { padding:20px; } .achievement-heading { gap:14px; } .achievement-heading h2 { font-size:20px; } }

/* Fifth edition: endings, official cover and a short site introduction. */
.endings-section { margin:28px 0 34px; }
.endings-section .section-top { margin-bottom:16px; }
.endings-section .section-top p { margin-bottom:0; }
.ending-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.ending-card { min-width:0; border:1px solid var(--line); border-radius:11px; background:var(--surface); overflow:hidden; }
.ending-toggle { display:flex; align-items:center; gap:14px; width:100%; padding:18px; border:0; background:transparent; text-align:left; }
.ending-toggle:hover,.ending-toggle[aria-expanded=true] { background:#eff3e8; }
.ending-toggle:focus-visible { outline-offset:-4px; }
.ending-icon { display:block; width:72px; height:72px; flex:0 0 72px; object-fit:contain; border-radius:8px; }
.ending-heading { flex:1; min-width:0; }
.ending-heading strong { display:block; font-size:18px; font-weight:650; line-height:1.5; }
.ending-toggle-label { display:block; margin-top:5px; font-size:11px; color:var(--muted); line-height:1.6; }
.ending-action { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; color:var(--green); font-size:12px; font-weight:600; white-space:nowrap; }
.ending-chevron { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ending-toggle[aria-expanded=true] .ending-chevron { transform:rotate(180deg); }
.ending-details { padding:0 20px 18px; border-top:1px solid var(--line); }
.ending-facts { margin:0; }
.ending-facts>div { padding-top:18px; }
.ending-facts dt { margin-bottom:6px; color:var(--green); font-size:12px; font-weight:650; }
.ending-facts dd { margin:0; font-size:13px; line-height:1.9; color:#4e6256; white-space:pre-line; overflow-wrap:anywhere; }
.ending-source { margin-top:18px; padding-top:12px; border-top:1px dashed var(--line); color:var(--muted); }
.ending-source p { margin:5px 0 0; font-size:10px; line-height:1.8; overflow-wrap:anywhere; }
.ending-source a { text-decoration:underline; text-underline-offset:2px; }
.character-section-heading { margin-top:0; }
.site-note { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; width:100%; margin:28px 0 22px; padding:28px; border:1px solid #d4e0cd; border-left:4px solid var(--green); border-radius:10px; background:linear-gradient(110deg,#edf3e8,#fffdf5); }
.site-note h2 { margin:0 0 14px; font-size:22px; }
.site-note h3 { margin:0 0 9px; font-size:16px; }
.site-note p { margin:0 0 12px; font-size:14px; line-height:1.9; color:#61725e; overflow-wrap:anywhere; }
.site-note p:last-child { margin-bottom:0; }
.site-note-intro,.site-note-credits,.site-note-links>div { min-width:0; }
.site-note-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.site-note-links a { width:100%; min-height:46px; padding:10px 12px; font-size:13px; text-align:center; overflow-wrap:anywhere; }
.site-note-links p { margin:9px 0 0; font-size:12px; line-height:1.8; }
.site-note-credits { display:grid; align-content:start; gap:22px; padding-left:28px; border-left:1px solid #d4e0cd; }
.site-note-credits a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1200px) { .ending-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:950px) { .brand-note { max-width:145px; } .site-note { grid-template-columns:minmax(0,1fr); gap:24px; } .site-note-credits { padding:22px 0 0; border-left:0; border-top:1px solid #d4e0cd; } }
@media(max-width:700px) { .ending-grid { grid-template-columns:1fr; } .ending-toggle { padding:16px; } .endings-section .section-top { gap:12px; flex-wrap:wrap; } .site-note { padding:20px; } .site-note-links { grid-template-columns:minmax(0,1fr); } .brand-note { max-width:190px; } }