:root { --bg:#0b0d14; --panel:#131722; --panel-border:#232838; --text:#e8eaf0; --text-dim:#8890a4; --accent:#e23636; }
  * { box-sizing:border-box; }
  html, body { margin:0; padding:0; width:100%; height:100%; background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; overflow:hidden; }
  #app { position:relative; width:100vw; height:100vh; }
  svg#graph { width:100%; height:100%; display:block; background:radial-gradient(ellipse at center, #12141c 0%, #0b0d14 70%); touch-action:none; }
  .link { stroke-opacity:0.55; }
  .node .ring { fill:none; }
  .node { cursor:pointer; }
  .node text { fill:var(--text); font-size:10px; pointer-events:none; paint-order:stroke; stroke:#0b0d14; stroke-width:3px; }
  .node.dimmed { opacity:0.08; } .link.dimmed { opacity:0.03; }

  #topbar { position:absolute; top:14px; left:14px; right:14px; z-index:10; display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; pointer-events:none; }
  #topbar > * { pointer-events:auto; }
  #title-box { background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:10px 16px; font-weight:700; font-size:15px; white-space:nowrap; }
  #title-box span { color:var(--text-dim); font-weight:400; font-size:12px; display:block; margin-top:2px; }
  #mode-switch, #lang-switch, #story-layout-switch, #char-layout-switch, #comic-layout-switch { display:flex; background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; overflow:hidden; }
  #mode-switch button, #lang-switch button, #story-layout-switch button, #char-layout-switch button, #comic-layout-switch button { background:none; border:none; color:var(--text-dim); padding:10px 14px; font-size:13px; cursor:pointer; }
  #mode-switch button.active, #lang-switch button.active, #story-layout-switch button.active, #char-layout-switch button.active, #comic-layout-switch button.active { background:var(--accent); color:#fff; }
  #story-layout-switch, #char-layout-switch, #comic-layout-switch { display:none; }
  #story-layout-switch.show, #char-layout-switch.show, #comic-layout-switch.show { display:flex; }
  .uni-label { fill:var(--text); font-size:15px; font-weight:700; paint-order:stroke; stroke:#0b0d14; stroke-width:5px; pointer-events:none; opacity:0.9; }
  .uni-label .sub { font-size:10px; font-weight:400; }
  #search-wrap { position:relative; flex:0 0 240px; }
  #search { width:100%; background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:13px; outline:none; }
  #search:focus { border-color:var(--accent); }
  #search-results { position:absolute; top:44px; left:0; right:0; background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; max-height:280px; overflow:auto; display:none; z-index:20; }
  #search-results div { padding:8px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--panel-border); }
  #search-results div:hover { background:#1c2131; }

  #filters { position:absolute; top:74px; left:14px; z-index:9; background:var(--panel); border:1px solid var(--panel-border);
    border-radius:10px; padding:12px 14px; width:230px; font-size:12px; max-height:80vh; overflow:auto; }
  #filters h4 { margin:0 0 8px 0; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); }
  #filters .row { display:flex; align-items:center; gap:7px; margin-bottom:6px; cursor:pointer; user-select:none; }
  #filters .sw { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
  #filters .sw.circle { border-radius:50%; }
  #filters hr { border:none; border-top:1px solid var(--panel-border); margin:10px 0; }
  #filters .toggle-all { color:var(--accent); cursor:pointer; font-size:11px; margin-left:auto; }

  #detail { position:absolute; top:14px; right:14px; width:330px; max-height:calc(100vh - 28px); overflow:auto;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; padding:0; display:none; z-index:10; }
  #detail-img { width:100%; height:180px; object-fit:cover; object-position:top center; border-radius:12px 12px 0 0; display:block;
    background:linear-gradient(135deg,#2a1520,#12141c 60%,#0b0d14); }
  #detail-body-wrap { padding:18px; }
  #detail h2 { margin:0 0 2px 0; font-size:19px; }
  #detail .real { color:var(--text-dim); font-size:12px; margin-bottom:10px; }
  #detail .tag { display:inline-block; background:#1c2131; border:1px solid var(--panel-border); border-radius:6px; padding:2px 8px; font-size:11px; margin:2px 4px 2px 0; color:var(--text-dim); }
  #detail .tag.link { cursor:pointer; } #detail .tag.link:hover { border-color:var(--accent); color:var(--text); }
  #detail .sec-title { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); margin:14px 0 6px; }
  #detail .media-count { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; }
  #detail .rel-item { font-size:12.5px; padding:5px 8px; border-radius:6px; cursor:pointer; margin-bottom:3px; display:flex; justify-content:space-between; gap:6px; }
  #detail .rel-item:hover { background:#1c2131; }
  #detail .rel-item .lbl { color:var(--text-dim); font-size:10.5px; }
  #detail-close { position:absolute; top:12px; right:14px; cursor:pointer; color:#fff; font-size:18px; background:rgba(0,0,0,0.4); border:none; border-radius:50%; width:26px; height:26px; z-index:2; }
  #detail a.wiki { color:#7aa2ff; font-size:11.5px; text-decoration:none; }
  #detail a.wiki:hover { text-decoration:underline; }

  #hint { position:absolute; bottom:14px; left:14px; color:var(--text-dim); font-size:11px; background:var(--panel);
    border:1px solid var(--panel-border); border-radius:8px; padding:7px 12px; z-index:9; }
  #contact { position:absolute; bottom:14px; right:14px; color:var(--text-dim); font-size:11px; background:var(--panel);
    border:1px solid var(--panel-border); border-radius:8px; padding:7px 12px; z-index:9; }
  #contact a { color:#7aa2ff; text-decoration:none; } #contact a:hover { text-decoration:underline; }
  #contact button { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:0; margin-right:8px; }
  #contact button:hover { color:var(--text); }
  #credits-overlay { position:fixed; inset:0; background:rgba(6,8,14,0.72); z-index:40; display:none; align-items:center; justify-content:center; padding:20px; }
  #credits-overlay.show { display:flex; }
  #credits-card { background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; max-width:440px; width:100%;
    padding:24px 26px; font-size:13px; line-height:1.55; position:relative; max-height:86vh; overflow:auto; }
  #credits-card h2 { margin:0 0 4px; font-size:19px; }
  #credits-card .sub { color:var(--text-dim); font-size:12px; margin-bottom:14px; }
  #credits-card h4 { margin:16px 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); }
  #credits-card a { color:#7aa2ff; text-decoration:none; } #credits-card a:hover { text-decoration:underline; }
  #credits-card .cc-close { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; }
  #credits-card .cc-close:hover { color:var(--text); }
  .timeline-axis line.grid { stroke:#1a1e2a; stroke-width:1px; }
  .timeline-axis text.grid-label { fill:var(--text-dim); font-size:11px; }
  .story-bands text.band-label { font-size:15px; paint-order:stroke; stroke:#0b0d14; stroke-width:4px; }
  .story-bands line { pointer-events:none; }
  ::-webkit-scrollbar { width:7px; height:7px; } ::-webkit-scrollbar-thumb { background:#2a3040; border-radius:6px; }

  svg.far .node text { display:none; }
  .node.path-on .ring { stroke:#f2c14e !important; stroke-width:4px !important; }
  .link.path-on { stroke:#f2c14e !important; stroke-width:3px !important; stroke-opacity:1 !important; }
  .act-btn { display:inline-block; background:#1c2131; border:1px solid var(--panel-border); border-radius:8px;
    color:var(--text); padding:6px 12px; font-size:12px; cursor:pointer; margin:8px 6px 0 0; }
  .act-btn:hover { border-color:var(--accent); }
  .act-btn.on { background:#173325; border-color:#3ecf8e; color:#3ecf8e; }
  #path-banner { position:absolute; top:74px; left:50%; transform:translateX(-50%); z-index:11; background:var(--panel);
    border:1px solid #f2c14e; color:#f2c14e; border-radius:10px; padding:9px 16px; font-size:12.5px; display:none; }
  #search-results .cat { color:var(--text-dim); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; padding:6px 14px 2px; border-bottom:none; cursor:default; }
  #search-results .cat:hover { background:none; }
  @media (prefers-reduced-motion: reduce) { #filters { transition:none; } }
  #filters-toggle { display:none; }

  /* ---- mobile layout ---- */
  @media (max-width: 720px) {
    #topbar { top:8px; left:8px; right:8px; gap:6px; }
    #title-box { padding:8px 10px; font-size:13px; }
    #title-box span { font-size:10.5px; }
    #mode-switch button, #lang-switch button, #story-layout-switch button, #char-layout-switch button, #comic-layout-switch button, #filters-toggle { padding:8px 10px; font-size:12px; }
    #search-wrap { flex:1 1 100%; order:4; }
    #story-layout-switch.show { display:flex; }
    /* filters button lives fixed at the bottom, above the sheet it opens, so it's always reachable to close it */
    #filters-toggle { display:inline-flex; align-items:center; gap:6px; position:fixed; left:12px; bottom:12px; z-index:25;
      background:var(--panel); border:1px solid var(--panel-border); color:var(--text-dim);
      border-radius:10px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.4); }
    #filters-toggle.active { background:var(--accent); color:#fff; }

    /* filters slide up from the bottom as a sheet instead of covering the whole screen */
    #filters { display:block; position:fixed; left:0; right:0; bottom:0; top:auto; width:100%;
      height:65vh; max-height:65vh; border-radius:16px 16px 0 0; padding:16px 14px calc(70px + env(safe-area-inset-bottom,0px));
      z-index:20; transform:translateY(105%); transition:transform 0.25s ease; box-shadow:0 -4px 24px rgba(0,0,0,0.5); }
    #filters.mobile-open { transform:translateY(0); }

    /* character/story detail card also becomes a bottom sheet */
    #detail { left:0; right:0; bottom:0; top:auto; width:100%; height:70vh; max-height:70vh;
      border-radius:16px 16px 0 0; }

    #hint { display:none; }
    #contact { font-size:10px; padding:5px 9px; bottom:12px; right:8px; }
    .node text { font-size:9px; }
  }

/* feather icons */
.ic { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; display:inline-block; flex:0 0 auto; }
#mode-switch button, #comic-layout-switch button, #story-layout-switch button, #char-layout-switch button, #credits-btn, #contact .contact-mail, .act-btn, #detail a.wiki { display:inline-flex; align-items:center; gap:6px; }
#mode-switch button .ic, #filters-toggle .ic { width:14px; height:14px; }
#detail-close .ic { width:15px; height:15px; vertical-align:middle; }
#detail-close { display:flex; align-items:center; justify-content:center; }
#contact { display:inline-flex; align-items:center; gap:12px; }
#contact .contact-mail { color:#7aa2ff; text-decoration:none; } #contact .contact-mail:hover { text-decoration:underline; }
#search-wrap .search-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-dim); pointer-events:none; z-index:1; }
#search-wrap #search { padding-left:34px; }
.act-btn .ic, #detail a.wiki .ic { width:14px; height:14px; }

/* SEO content: доступно поисковикам и скринридерам, скрыто визуально */
.seo-content { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* language dropdown (extensible: add more <option> in index.html) */
#lang-select { background:var(--panel); color:var(--text); border:1px solid var(--panel-border); border-radius:10px;
  padding:10px 30px 10px 14px; font-size:13px; cursor:pointer; outline:none; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238890a4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }
#lang-select:hover { border-color:var(--accent); }
#lang-select:focus { border-color:var(--accent); }
#lang-select option { background:var(--panel); color:var(--text); }
@media (max-width: 720px){ #lang-select { padding:8px 26px 8px 10px; font-size:12px; } }

/* ===== mobile controls (hidden on desktop) ===== */
#m-menu-btn, #m-top, #m-backdrop, .m-sheet, #m-filters-close { display:none; }
@media (max-width: 720px) {
  /* keep only the title in the top bar; move everything else into sheets */
  #topbar { pointer-events:none; }
  #mode-switch, #story-layout-switch, #char-layout-switch, #comic-layout-switch,
  #lang-wrap, #search-wrap, #filters-toggle, #contact { display:none !important; }
  #title-box { pointer-events:auto; }

  /* bottom-left menu button */
  #m-menu-btn { display:inline-flex; align-items:center; gap:6px; position:fixed; left:12px; bottom:12px; z-index:26;
    background:var(--panel); border:1px solid var(--panel-border); color:var(--text); font-size:13px; font-weight:600;
    padding:11px 16px; border-radius:12px; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,0.45); }
  #m-menu-btn .ic { width:16px; height:16px; }

  /* top-right actions (search + credits) */
  #m-top { display:flex; gap:8px; position:fixed; top:10px; right:10px; z-index:26; }
  #m-top button { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    background:var(--panel); border:1px solid var(--panel-border); color:var(--text); border-radius:12px; cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,0.4); }
  #m-top button .ic { width:18px; height:18px; }

  /* shared backdrop */
  #m-backdrop { display:block; position:fixed; inset:0; background:rgba(6,8,14,0.55); z-index:29; opacity:0;
    visibility:hidden; transition:opacity 0.2s; }
  #m-backdrop.show { opacity:1; visibility:visible; }

  /* bottom sheets */
  .m-sheet { display:block; position:fixed; left:0; right:0; bottom:0; width:100%; max-height:78vh; overflow:auto; z-index:30;
    background:var(--panel); border-top:1px solid var(--panel-border); border-radius:18px 18px 0 0;
    padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); transition:transform 0.28s ease;
    box-shadow:0 -6px 28px rgba(0,0,0,0.55); }
  .m-sheet.open { transform:translateY(0); }
  .m-sheet-title { font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin:0 0 14px; }
  .m-sheet-close { display:inline-flex; align-items:center; justify-content:center; position:absolute;
    top:12px; right:12px; width:32px; height:32px; background:#1c2131; border:1px solid var(--panel-border);
    color:var(--text); border-radius:50%; cursor:pointer; z-index:2; }
  .m-sheet-close .ic, #m-filters-close .ic { width:16px; height:16px; }
  #m-filters-close { align-items:center; justify-content:center; position:fixed; top:calc(35vh + 8px); right:16px;
    width:32px; height:32px; background:#1c2131; border:1px solid var(--panel-border); color:var(--text);
    border-radius:50%; cursor:pointer; z-index:32; }

  /* controls relocated into the nav sheet */
  #m-nav-body { display:flex; flex-direction:column; gap:10px; }
  #m-nav-body #mode-switch { width:100%; }
  #m-nav-body #mode-switch button { flex:1; justify-content:center; padding:12px 8px; font-size:14px; }
  #m-nav-body #story-layout-switch, #m-nav-body #char-layout-switch, #m-nav-body #comic-layout-switch { width:100%; }
  #m-nav-body #story-layout-switch button, #m-nav-body #char-layout-switch button, #m-nav-body #comic-layout-switch button { flex:1; justify-content:center; padding:11px 8px; }
  #m-nav-body #lang-wrap #lang-select { width:100%; }
  #m-filters-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 8px;
    background:#1c2131; border:1px solid var(--panel-border); color:var(--text); border-radius:12px; font-size:14px; cursor:pointer; }
  #m-filters-btn:hover, #m-filters-btn.active { border-color:var(--accent); }

  /* search sheet holds the moved search input */
  #m-search-body #search-wrap { display:block; width:100%; }
  #m-search-body #search { width:100%; font-size:16px; padding:13px 14px 13px 40px; }
  #m-search-body #search-results { position:static; margin-top:8px; max-height:52vh; display:block; }
  #m-search-body #search-results:empty { display:none; }

  /* filters as a bottom sheet with its own close button + backdrop */
  #filters { z-index:30; padding-top:16px; }

  /* detail as a bottom sheet, above backdrop */
  #detail { z-index:31; }
}