/* The image references are existing UI parts, served without modifying their originals. */
:root {
  --bg: #030e1b;
  --panel: #061a2c;
  --line: #a99c7140;
  --text: #f0eee4;
  --muted: #acb8c6;
  --exclusive: #e6cd91;
}
body { background: var(--bg); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.masthead {
  height:74px; padding:0 24px 0 5px; display:grid;
  grid-template-columns:minmax(300px,1fr) auto minmax(280px,1fr); gap:12px;
  border-bottom:1px solid #bca77699;
  background:linear-gradient(100deg,#071a30,#061729 65%,#031222);
  position:relative; z-index:1100;
}
.masthead:before {
  content:'';position:absolute;top:0;right:0;width:min(560px,60vw);height:74px;
  background:linear-gradient(90deg,#071a304d,#071a3099),url('/ui-assets/encyclopedia-scenery.png');
  background-repeat:no-repeat;background-size:100% 100%,1600px auto;background-position:center,right -100px;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000);pointer-events:none;z-index:-1;
}
.brand-home {
  display:block; width:100%;max-width:490px;height:74px;
  background:url('/ui-assets/header.png') no-repeat 0 -220px / 1450px auto;
}
.companion-nav { display:flex;align-items:center;justify-content:center;gap:0; }
.companion-nav a,.companion-nav .companion-tab {
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:54px;width:clamp(178px,15vw,280px);padding:0 20px 3px;
  background:url('/ui-assets/nav-normal.png') no-repeat center 48% / 100% 350%;
  font-family:'Yu Mincho','Meiryo',serif;font-size:18px;font-weight:600;
  letter-spacing:.05em;color:#d4d8df;text-decoration:none;white-space:nowrap;
}
.companion-nav a[aria-current] { background-image:url('/ui-assets/nav-active.png');color:#fff5dc; }
.companion-nav a:hover { color:white;filter:brightness(1.15); }
.companion-nav [aria-disabled] { color:#b3b9c1;cursor:default; }
.companion-nav small { font-family:'Yu Gothic UI','Meiryo',sans-serif;font-size:9px;letter-spacing:0;color:#a3b3c2;font-weight:400; }
.header-tools { display:flex;justify-content:flex-end;align-items:center;gap:20px;min-width:0; }
#toggle-sidebar { flex:none;white-space:nowrap;padding:6px 9px;border:1px solid #a99c7177;border-radius:3px;background:#071b30;color:#dfd8bd;font-size:11px; }
#toggle-sidebar:hover { background:#15354c;color:#fff0ca; }
#toggle-sidebar[aria-pressed='true'] { border-color:#8acdec;color:#cdeeff; }
.player-preferences { margin:0;gap:9px;color:#e0e3e5;font-size:12px; }
.player-preferences>label,.autosave-indicator { text-shadow:0 1px 3px #020b17,0 0 5px #020b17; }
.player-preferences select { background:#071b30;border-color:#b7aa7e99;border-radius:3px;padding:7px 9px;max-width:140px; }
.autosave-indicator { min-width:74px;flex:none; }
.autosave-indicator .completion-save-status { color:#dce6df;font-size:11px; }
.autosave-indicator .completion-save-status:before { content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#4fd579;box-shadow:0 0 6px #49c27840;margin-right:7px; }
.autosave-indicator .save-error { color:#ffb5a4; }
.autosave-indicator .save-error:before { background:#ed997b;box-shadow:none; }
#preference-status { top:39px;font-size:11px; }
main { --sidebar-width:clamp(340px,24vw,430px);height:calc(100dvh - 74px);min-height:580px;grid-template-columns:var(--sidebar-width) minmax(0,1fr);gap:0;padding:0 6px 6px; }
aside { position:relative;isolation:isolate;border:0;padding:14px 10px 5px;background:linear-gradient(160deg,#071d31,#041728 65%,#031423); }
aside:after,.map-section:after {
  content:'';position:absolute;inset:0;z-index:1050;pointer-events:none;
  border:27px solid transparent;border-image:url('/ui-assets/list-frame.png') 150 stretch;
}
.map-section:after { border-image-source:url('/ui-assets/map-frame.png');border-width:29px;border-image-slice:160; }
.sidebar-head { padding:6px 14px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px; }
.sidebar-head .search-label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.search-row { position:relative;grid-column:1/-1;gap:0;height:52px;background:url('/ui-assets/search-field.png') no-repeat center / 100% 100%; }
.search-row:before { content:'';position:absolute;left:20px;top:18px;width:12px;height:12px;border:1px solid #d3c5a1;border-radius:50%;pointer-events:none; }
.search-row:after { content:'';position:absolute;left:31px;top:30px;width:7px;height:1px;background:#d3c5a1;transform:rotate(45deg);pointer-events:none; }
.search-row input { background:transparent;border:0;border-radius:4px;padding:11px 4px 11px 43px;font-size:13px; }
.search-row input::placeholder { color:#c3c7d0; }
.search-row input:focus-visible { outline:1px solid #91d9fa;outline-offset:-7px; }
.search-row button { background:transparent;border:0;width:31px;margin:7px 9px 7px 0;color:#c5d1dd;font-size:19px; }
.search-row button:hover { color:#fff0c6; }
.search-hint { grid-column:1/-1;font-size:10px;margin:3px 5px 0;line-height:1.5; }
.catalog-scope { grid-column:1/-1;gap:0;border:1px solid #a89b7159;border-radius:3px;padding:0;background:#06182b;margin:7px 4px 10px; }
.catalog-scope button { min-height:35px;font-size:12px;padding:6px 4px;border:0;border-radius:0; }
.catalog-scope button[aria-pressed='true'] { background:url('/ui-assets/selected-row.png') no-repeat center / 100% 100%;color:#fff1cf; }
.genus-control,.acquisition-control { margin:0 4px 6px;gap:5px;min-width:0; }
.genus-control label,.acquisition-control label { font-size:11px;color:#c6c9cc; }
.genus-control select,.acquisition-control select { padding:6px 4px;background:#05172a;border-color:#a99c7166;border-radius:3px;font-size:11px;min-height:32px; }
.placement-options { grid-column:1/-1;margin:2px 4px 0;border-bottom:0; }
.placement-options summary { padding:7px 0;font-size:11px;color:#cbd5df; }
.placement-options summary span { font-size:10px;color:#a8b6c6; }
.placement-options[open] { border-bottom:1px solid var(--line); }
.placement-options .filter { font-size:11px; }
.sidebar-head .collection-status { grid-column:1/-1;flex-wrap:nowrap;justify-content:flex-start;gap:14px;padding:9px 0 8px;margin:3px 4px 0;border-color:var(--line);font-size:12px;min-height:36px; }
.collection-status #completed-count { font-size:12px;color:#e8c77e; }
.collection-status #show-all { margin-left:auto;font-size:10px;padding:3px 0;color:#b6c6d7; }
.collection-status #show-all:disabled { display:none; }
.abyss-note { grid-column:1/-1;font-size:10px;margin:0 5px 6px;line-height:1.5;color:#a8c5d2; }
.soul-list { padding:0 8px 5px;scrollbar-color:#dbc28d #081c2e;scrollbar-width:thin; }
.completed-group-label { margin-top:7px;padding:9px 5px 6px;border-top:1px solid #a99c7166;color:#b9c8cc;font-size:11px; }
.soul-entry { position:relative;min-height:65px;border-color:#a9a17b32; }
.soul-entry .soul-row { padding:7px 4px;border:0;gap:10px;min-height:65px; }
.soul-row:hover { background:#102d43; }
/* Compensate for the frame asset's transparent margins so its glow follows the row. */
.soul-entry:has(.soul-row.active) { background:url('/ui-assets/selected-row.png') no-repeat center / 106% 138%; }
.soul-entry .soul-row.active { background:transparent; }
.portrait-wrap { position:relative;display:block;flex:none;width:46px;height:46px; }
.portrait-wrap:after { content:'';position:absolute;inset:-8px;background:url('/ui-assets/portrait-frame.png') no-repeat center / 100% 100%;pointer-events:none; }
.soul-row img.row-portrait { width:46px;height:46px;padding:2px;border:0;border-radius:3px;background:#061525;object-fit:contain; }
.soul-row .row-name { font-size:13px;line-height:1.45;font-weight:500; }
.row-meta { margin-top:3px;gap:5px;flex-wrap:nowrap;min-height:20px; }
.genus-badge { display:inline-flex;align-items:center;gap:3px;border:0;background:none;border-radius:0;padding:0;font-size:10px;color:#cad6df; }
.genus-badge:before { content:'';display:inline-block;width:20px;height:20px;flex:none;background:no-repeat center / contain; }
.genus-cogni:before { background-image:url('/ui-assets/genus-cogni.png'); }
.genus-fera:before { background-image:url('/ui-assets/genus-fera.png'); }
.genus-natura:before { background-image:url('/ui-assets/genus-natura.png'); }
.genus-varian:before { background-image:url('/ui-assets/genus-varian.png'); }
.soul-row .route-badge { font-size:9px;padding:0 4px; }
.soul-row .route-field { display:none; }
.row-recommendation { font-size:9px; }
.row-count { font-size:17px;min-width:46px; }
.row-count small { font-size:9px;margin-top:2px;color:#a8b7c8; }
.row-count.no-count { font-size:10px;min-width:38px; }
.completion-check { width:33px;gap:3px;font-size:9px;color:#a8b8c8; }
.completion-check input { width:18px;height:18px;accent-color:#6fc4ed; }
.completion-check:hover { background:#123049; }
.soul-entry.is-complete { background:#102c2c99; }
.soul-entry.is-complete .row-name { color:#b0c3c6; }
.selected-detail { margin:3px 10px 6px;padding:9px 7px;background:#0a253b;border-color:#bca36e55; }
.selected-detail h2 { color:#f1dfb6; }
.selected-detail .detail-actions button { background:#0a1d31;border-color:#9e93656b; }
.selected-detail .detail-actions { flex-wrap:wrap; }
.selected-detail .detail-actions #go-community { color:#f0d998;border-color:#bba66d8c; }
.community-panel { border-top:1px solid #ad9c7044;padding-top:6px;margin-top:7px; }
.community-line,.community-status { display:flex;align-items:center;gap:8px; }
.community-line button { padding:5px 7px;font-size:11px;background:#0b2034;border-color:#a497726b; }
.community-line button[aria-pressed='true'] { background:#173c51;border-color:#8ad7f8;color:#fff2c7; }
#place-vote-count { color:#efd99d;font-size:12px;white-space:nowrap; }
.community-status { margin-top:4px;font-size:10px;line-height:1.5;color:#b6c5d3; }
.community-status button { padding:2px 5px;font-size:10px;flex:none; }
.community-error .community-status { color:#efbf9a; }
.hunting-popup .leaflet-popup-content-wrapper,.hunting-popup .leaflet-popup-tip { background:#081f32;color:#dce5eb; }
.hunting-popup .leaflet-popup-content-wrapper { border:1px solid #bda66d;border-radius:5px;box-shadow:0 5px 20px #0009; }
.hunting-popup .leaflet-popup-content { margin:13px 14px 12px;font-family:inherit;line-height:1.5; }
.hunting-popup .leaflet-popup-close-button { color:#d9c89f!important;right:4px!important;top:3px!important;font-size:21px!important; }
.hunting-popup .leaflet-popup-close-button:hover { color:#fff4d9!important; }
#hunting-place-popup:focus { outline:none; }
.hunting-popup .place-heading { display:flex;align-items:center;gap:9px;padding-right:12px; }
.hunting-popup .place-portrait { width:38px;height:38px;object-fit:contain;border:1px solid #c1a96e;border-radius:3px;background:#051525;flex:none; }
.hunting-popup h3 { margin:0 0 2px;color:#f1dfb6;font-size:14px;line-height:1.4;overflow-wrap:anywhere; }
.hunting-popup p.place-count { margin:10px 0 3px;font-size:12px; }
.hunting-popup .place-count strong { color:#efcf87;font-size:15px; }
.hunting-popup p.place-count-note { margin:0;font-size:10px;color:#acbdca; }
.hunting-popup .community-panel { margin-top:9px;padding-top:9px; }
.hunting-popup .community-line { justify-content:space-between; }
.hunting-popup .community-line button { min-height:34px;padding:7px 9px;font-size:12px;white-space:nowrap; }
.hunting-popup button:focus-visible,.hunting-popup .leaflet-popup-close-button:focus-visible { outline:2px solid #9be0ff;outline-offset:2px; }
.community-crown { position:absolute;top:-20px;left:11px;font-size:16px;line-height:20px;filter:drop-shadow(0 1px 2px #061423);pointer-events:none; }
.selected-detail .primary-source { margin-bottom:6px; }
.selected-detail .detail-body { max-height:min(136px,15dvh); }
.detail-pet .detail-portrait { border-color:#bca36e99;background:#07172a; }
.sources { flex:none;margin:0 11px 3px;padding:6px 6px 4px;border-color:var(--line);font-size:10px;max-height:25%; }
.sources summary { color:#d3c9ae; }
.sources p { font-size:10px; }
.map-section { min-height:0;background:#061a2c; }
.map-section #map { inset:9px;background:#0b2337; }
.map-top { top:22px;left:28px;right:26px;gap:10px; }
.map-switch { margin:0;gap:0; }
.map-switch a { display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:clamp(105px,10vw,173px);height:49px;padding:5px 15px;border-radius:2px;border-color:#b6a378a0;background:#06192bef;color:#dce3ea;font-size:14px; }
.map-switch a small { font-size:9px;line-height:1.1;color:#98b6ca;margin-top:2px; }
.map-switch a[aria-current='page'] { background:#092744ed;border-color:#8ed9fa;color:#fff7df;box-shadow:inset 0 0 10px #45bded38,0 0 5px #5dc9ef5c; }
.map-switch a[aria-current='page'] small { color:#8ed9fa; }
.map-switch a:hover { background:#163a54; }
.map-toolbar { gap:8px;margin-left:auto; }
.map-top button { padding:9px 13px;background:#061b2fed;border-color:#baa572aa;border-radius:3px;font-size:11px;white-space:nowrap; }
.map-help { top:84px;left:29px;max-width:calc(100% - 90px);font-size:10px;padding:6px 9px;background:#041b2edb;color:#d9dfdf;border:1px solid #aba17a44;border-radius:3px; }
.map-bottom { left:13px;right:13px;bottom:10px;align-items:center;padding:7px 12px;border:1px solid #b19c6c55;background:#041a2ddd;border-radius:3px;font-size:10px; }
.map-bottom .map-status { padding:0;background:none;border:0;box-shadow:none;font-size:10px;flex:none; }
.map-bottom>span:first-of-type { margin-left:auto;color:#bdcbd2; }
.status-dot { background:#e5c986; }
#tile-status { color:#95adbd;font-size:9px; }
.map-empty { top:138px;background:#061b30ed;border-color:#ae9b6a9e; }
.leaflet-control-zoom { margin-top:132px!important;margin-left:25px!important; }
.leaflet-control-zoom a { background:#061a2df2!important;border-bottom-color:#aa9a6c66!important;color:#eee9dc!important; }
.leaflet-control-attribution { bottom:49px!important;right:16px;background:#041728b8!important;font-size:9px!important; }
.face-pin .face-portrait { border-color:#cdb988;border-radius:4px;background:#061527;box-shadow:0 2px 5px #000b; }
.face-pin:before { background:#d3bd81; }
.face-dot { background:#e2c681;border-color:#1b3144;box-shadow:0 0 0 1px #e4d0a3b3,0 1px 3px #0008; }
.face-pin.focused .face-portrait { border-color:#96e3ff;box-shadow:0 0 0 1px #84d2fccc,0 2px 6px #0009; }
@media(min-width:1800px) { .soul-row .row-name { font-size:14px; }.soul-entry,.soul-entry .soul-row { min-height:67px; } }
@media(min-width:1201px) and (max-width:1500px) { .brand-home { background-size:1300px auto;background-position:0 -195px; } }
@media(max-width:1200px) {
  .masthead { grid-template-columns:minmax(265px,1fr) auto minmax(245px,1fr);padding-right:13px;gap:2px; }
  .brand-home { background-size:1120px auto;background-position:0 -166px; }
  .companion-nav a,.companion-nav .companion-tab { width:165px;font-size:16px; }.companion-nav small { display:none; }
  .header-tools { gap:10px; }.player-preferences { gap:5px;font-size:10px; }
  .player-preferences select { padding:7px 4px;max-width:115px; }
  .autosave-indicator { min-width:68px; }.autosave-indicator .completion-save-status { font-size:10px; }
  main { --sidebar-width:340px;grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .map-switch a { min-width:90px;padding-left:9px;padding-right:9px;font-size:12px; }
  .map-top { gap:7px; }.map-top button { font-size:10px;padding:8px; }
  .map-bottom>span:first-of-type { display:none; }
}
@media(max-width:1000px) {
  .masthead { height:116px;grid-template-columns:1fr auto;grid-template-rows:65px 45px; }
  .masthead:before { height:65px;width:min(560px,75vw);background-size:100% 100%,1400px auto;background-position:center,right -80px; }
  .companion-nav { grid-column:1/-1;grid-row:2;align-self:start; }
  .companion-nav a,.companion-nav .companion-tab { height:43px;width:210px; }
  main { height:calc(100dvh - 116px); }
  .map-top { flex-wrap:wrap; }.map-toolbar { margin-left:auto; }
  .map-help { top:124px; }.leaflet-control-zoom { margin-top:170px!important; }
}
@media(max-width:760px) {
  #toggle-sidebar { display:none; }
  .masthead { min-height:116px;height:116px;padding:0 10px 0 2px;gap:0; }
  .brand-home { width:160px;min-width:160px;max-width:160px;background-size:835px auto;background-position:0 -118px;height:65px; }
  .header-tools { gap:7px; }.player-preferences label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
  .player-preferences select { max-width:108px;font-size:10px;padding:5px; }.autosave-indicator { min-width:0; }.autosave-indicator .completion-save-status { font-size:9px; }.autosave-indicator .completion-save-status:before { width:6px;height:6px;margin-right:4px; }
  .companion-nav a,.companion-nav .companion-tab { width:165px;font-size:16px; }
  main { height:auto;min-height:calc(100dvh - 116px);padding:0 4px 4px;display:flex;flex-direction:column-reverse; }
  .map-section { height:65dvh;min-height:440px; }
  aside { height:72dvh;max-height:none;min-height:510px;border:0;padding-top:12px; }
  .sidebar-head { padding-left:13px;padding-right:13px; }
  .map-top { top:22px;left:24px;right:22px; }
  .map-switch { width:100%; }.map-switch a { flex:1;min-width:0;height:40px;font-size:11px;padding:4px 8px; }
  .map-toolbar { margin-left:auto; }.map-help { top:116px;left:25px;font-size:9px; }
  .leaflet-control-zoom { margin-top:161px!important;margin-left:22px!important; }
  .map-bottom { flex-wrap:nowrap;gap:4px;padding:6px; }.map-bottom .map-status { font-size:9px; }#tile-status { font-size:8px; }
  .selected-detail .detail-body { max-height:125px; }
}

/* Reserve the column before any future ad content loads. */
.ad-rail {
  min-width:0;min-height:0;padding:18px 12px 14px 10px;
  display:flex;justify-content:center;align-items:flex-start;
  background:#061322;border-left:1px solid #ad9c7044;
}
.ad-placeholder {
  width:100%;height:100%;max-height:600px;min-height:80px;
  display:grid;place-items:center;border:1px dashed #a69c7547;border-radius:3px;
  color:#96a2ad;font-size:11px;letter-spacing:.12em;
}
@media(min-width:1500px) {
  main { grid-template-columns:var(--sidebar-width) minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr); }
}
@media(min-width:761px) and (max-width:1499px) {
  main { height:auto;grid-template-rows:minmax(580px,calc(100dvh - 74px)) 112px; }
  .ad-rail { grid-column:1/-1;border-left:0;border-top:1px solid #ad9c7044;padding:12px 16px; }
}
@media(min-width:761px) and (max-width:1000px) {
  main { grid-template-rows:minmax(580px,calc(100dvh - 116px)) 112px; }
}
@media(max-width:760px) {
  .ad-rail { order:-1;flex:none;height:112px;border-left:0;border-top:1px solid #ad9c7044;padding:12px 16px; }
}

@media(min-width:761px) {
  main[data-sidebar-side='right'] { grid-template-columns:minmax(0,1fr) var(--sidebar-width); }
  main[data-sidebar-side='right']>aside { grid-column:2;grid-row:1; }
  main[data-sidebar-side='right']>.map-section { grid-column:1;grid-row:1; }
}
@media(min-width:1500px) {
  main[data-sidebar-side='right'] { grid-template-columns:300px minmax(0,1fr) var(--sidebar-width); }
  main[data-sidebar-side='right']>aside { grid-column:3; }
  main[data-sidebar-side='right']>.map-section { grid-column:2; }
  main[data-sidebar-side='right']>.ad-rail { grid-column:1;grid-row:1;border-left:0;border-right:1px solid #ad9c7044;padding:18px 10px 14px 12px; }
}