:root{
    --ink:#161a22; --parchment:#efe7d6; --parchment-dim:#c9c0ab;
    --brass:#b8874f; --brass-dim:#8a683d; --wine:#7a3b32;
    --line:#2a2f38; --card-bg:#1d222b; --bw:300px;
  }
  @media (max-width:900px){ :root{ --bw:230px; } }
  @media (max-width:600px){ :root{ --bw:150px; } }
  *{box-sizing:border-box;}
  body{ margin:0; background:var(--ink); color:var(--parchment); font-family:'JetBrains Mono', monospace; }
  .hero{ padding:1.6rem 1.5rem 1rem; text-align:center; border-bottom:1px solid var(--line); }
  .hero .eyebrow{ font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); margin-bottom:0.4rem; }
  .hero h1{ font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.2rem, 3.5vw, 1.8rem); margin:0 0 0.3rem; }
  .hero p{ color:var(--parchment-dim); font-size:0.9rem; max-width:40rem; margin:0 auto; }


  .sheet{ max-width:1100px; margin:0 auto; padding:1rem 1rem 3rem; position:relative; }
  .header-row{ display:grid; grid-template-columns:44px var(--bw) 1fr 44px; gap:0; position:sticky; top:58px; background:var(--ink); z-index:20; border-bottom:1px solid var(--brass-dim); padding-top:8px; padding-bottom:4px; margin-bottom:2px; box-shadow:0 4px 10px -2px rgba(0,0,0,0.5); }
  .sheet.lines-hidden .header-row{ grid-template-columns:44px 78px 1fr 44px; }
  .header-row div{ font-size:0.82rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--brass); text-align:center; }
  .header-row div.hc-text{ text-align:left; padding-left:6px; white-space:nowrap; overflow:hidden; }
  #linesHeaderCell{ cursor:pointer; user-select:none; padding:2px 0; border-radius:3px; transition:background-color 0.15s ease, color 0.15s ease; box-sizing:border-box; }
  #linesHeaderCell{ white-space:nowrap; }
  #linesHeaderCell .arrow{ display:inline-block; margin-left:2px; font-size:0.85em; }
  .sheet.lines-hidden #linesHeaderCell{ background:var(--brass); color:var(--ink); font-weight:700; }

  #rowsWrap{ position:relative; }
  .yr-row{ display:grid; grid-template-columns:44px var(--bw) 1fr 44px; align-items:start; border-bottom:1px solid #3a4150; min-height:15px; }
  .sheet.lines-hidden .yr-row{ grid-template-columns:44px 78px 1fr 44px; }
  
  .yr-row.has-content{ min-height:auto; padding:2px 0; background:rgba(184,135,79,0.03); }
  .cell{ font-size:11.5px; color:var(--parchment-dim); padding:1px 3px; line-height:1.3; min-width:0; }
  .cell.adam{ text-align:center; color:var(--brass-dim); align-self:center; }
  .cell.bc{ text-align:center; color:#8a5850; align-self:center; }
  .cell.lines{ min-width:0; }
  .cell.text{ color:var(--parchment); min-width:0; overflow-wrap:break-word; word-break:normal; }
  .bullet-mini{ border-left:2px solid var(--line); padding-left:4px; margin-bottom:2px; min-width:0; }
  .bullet-mini:last-child{ margin-bottom:0; }
  .bullet-mini .lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; display:block; }
  .bullet-mini .txt{ font-size:13px; font-family:'Source Serif 4', serif; color:var(--parchment); white-space:normal; }

  #linesSvg{ position:absolute; top:0; left:44px; width:calc(100% - 88px); pointer-events:none; }
  .life-label{ font-size:11.5px; fill:#efe7d6; font-family:'JetBrains Mono', monospace; font-weight:600; paint-order:stroke fill; stroke:#161a22; stroke-opacity:0.9; stroke-width:2px; stroke-linejoin:round; }
  .life-label-lg{ font-size:14.5px; fill:#efe7d6; font-family:'JetBrains Mono', monospace; font-weight:700; paint-order:stroke fill; stroke:#161a22; stroke-width:2.5px; stroke-linejoin:round; }
  .yr-row.shade-gold .cell.text, .yr-row.shade-gold .cell.adam{ background:rgba(255,192,0,0.16); }
  .yr-row.shade-blue .cell.text, .yr-row.shade-blue .cell.adam{ background:rgba(91,155,213,0.20); }
  .yr-row.shade-gold .cell.adam{ box-shadow:inset 3px 0 0 #FFC000; }
  .yr-row.shade-blue .cell.adam{ box-shadow:inset 3px 0 0 #5B9BD5; }
  .yr-row.shade-green .cell.text, .yr-row.shade-green .cell.adam{ background:rgba(112,173,71,0.20); }
  .yr-row.shade-gray .cell.text, .yr-row.shade-gray .cell.adam{ background:rgba(212,212,212,0.14); }
  .yr-row.shade-green .cell.adam{ box-shadow:inset 3px 0 0 #70AD47; }
  .yr-row.shade-gray .cell.adam{ box-shadow:inset 3px 0 0 #D4D4D4; }
  .yr-row.shade-yellow .cell.text, .yr-row.shade-yellow .cell.adam{ background:rgba(255,255,0,0.13); }
  .yr-row.shade-yellow .cell.adam{ box-shadow:inset 3px 0 0 #FFFF00; }
  .cell.bc.dc{ color:#6f93b8; line-height:1.1; }
  .cell.bc small{ display:block; font-size:8.5px; }
  .bullet-mini.emph{ background:rgba(255,192,0,0.30); border-left:4px solid #FFC000; padding:4px 6px; border-radius:3px; }
  .bullet-mini.emph .txt{ font-size:15px; font-weight:700; }
  .bullet-mini .txt strong.big{ font-size:1.15em; font-weight:800; color:#FFD27A; }
  .person, .person *{ pointer-events:all; cursor:pointer; }
  #linesSvg.has-sel .person:not(.sel){ opacity:0.2; }
  .glow{ stroke:#FFE296; stroke-width:9px; stroke-dasharray:none; stroke-linecap:round; fill:none; opacity:.5; pointer-events:none !important; }
  .person.sel line:not([stroke="transparent"]), .person.sel path{ stroke-width:4px !important; opacity:1 !important; }
  .person.thick.sel line:not([stroke="transparent"]), .person.thick.sel path{ stroke-width:7px !important; }
  .person.sel polygon, .person.sel circle, .person.sel rect{ opacity:1 !important; }
  .person.sel text{ fill:#161a22 !important; stroke:#FFD27A !important; stroke-width:6px !important; paint-order:stroke fill; stroke-linejoin:round; font-weight:800; opacity:1 !important; }
  .bullet-mini .txt.nota-t, .bullet-mini[data-type="nota"] .txt{ font-style:italic; color:#cfd6bd; }
  mark.hl{ background:rgba(255,120,20,0.22); color:#FFA24A; font-weight:700; padding:0 2px; border-radius:2px; border-bottom:2px solid #FF7A14; }
  .life-note{ font-size:9.5px; fill:var(--parchment-dim); font-style:italic; }

  .legend{ display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center; margin-top:0.7rem; font-size:0.7rem; }
  .legend span{ display:inline-flex; align-items:center; gap:0.3rem; color:var(--parchment-dim); text-transform:uppercase; letter-spacing:0.03em; }
  .legend i{ width:7px; height:7px; border-radius:50%; display:inline-block; }

  .note-box{ max-width:1000px; margin:1rem auto 0; padding:0.8rem 1.1rem; background:var(--card-bg); border:1px solid var(--wine); border-radius:3px; font-size:0.85rem; color:var(--parchment-dim); font-family:'Source Serif 4', serif; }
  .note-box b{ color:var(--parchment); }

  .thumbs{ display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
  .thumbs img{ width:38px; height:38px; object-fit:cover; border-radius:2px; border:1px solid var(--line); cursor:pointer; transition:transform 0.15s ease, border-color 0.15s ease; }
  .thumbs img:hover{ transform:scale(1.15); border-color:var(--brass); }

  .lightbox{ position:fixed; inset:0; background:rgba(10,12,16,0.92); display:none; align-items:center; justify-content:center; z-index:200; padding:2rem; cursor:zoom-out; }
  .lightbox.open{ display:flex; }
  .lightbox img{ max-width:92vw; max-height:88vh; border-radius:4px; cursor:default; }  .millennium-banner{ background:linear-gradient(90deg, rgba(22,26,34,1), rgba(70,52,34,1), rgba(22,26,34,1)); position:relative; z-index:6; border-top:1px solid var(--brass-dim); border-bottom:1px solid var(--brass-dim); text-align:center; padding:6px 0; margin:2px 0; font-size:14.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--brass); }
  @media (max-width:600px){
    .sheet{ padding:0.5rem 0.2rem 3rem; }
    .header-row, .yr-row{ grid-template-columns:34px var(--bw) 1fr 36px; }
    .sheet.lines-hidden .header-row, .sheet.lines-hidden .yr-row{ grid-template-columns:34px 70px 1fr 36px; }
    #linesSvg{ left:34px; width:calc(100% - 70px); }
    .life-label{ font-size:10px; stroke-width:1.6px; }
    .bullet-mini .txt{ font-size:12.5px; }
    .bullet-mini.emph .txt{ font-size:13.5px; }
    .cell{ padding:1px 2px; }
  }

  /* Barra de desplazamiento más grande */
  html{ scrollbar-width:auto; scrollbar-color:#c9a24a #1b1d22; }
  ::-webkit-scrollbar{ width:18px; height:14px; }
  ::-webkit-scrollbar-track{ background:#1b1d22; }
  ::-webkit-scrollbar-thumb{ background:#c9a24a; border-radius:9px; border:3px solid #1b1d22; min-height:80px; }
  ::-webkit-scrollbar-thumb:hover{ background:#e0b95a; }
  #fastScroll{ display:none; position:fixed; right:0; top:0; width:30px; height:100vh; z-index:60; touch-action:none; }
  #fastScroll .thumb{ position:absolute; right:3px; width:22px; height:72px; border-radius:11px; background:rgba(201,162,74,.92); box-shadow:0 0 0 2px rgba(0,0,0,.35); }
  @media (pointer:coarse){ #fastScroll{ display:block; } ::-webkit-scrollbar{ width:0; } }

  .empire-banner{ display:flex; gap:12px; align-items:center; margin:6px 44px 6px calc(44px + var(--bw)); padding:8px 12px; background:#1e2127; border-left:6px solid; border-radius:4px; }
  .empire-banner svg{ flex:none; }
  .empire-banner .eb-h{ font-weight:700; font-size:14px; }
  .empire-banner .eb-m{ font-size:13px; margin:2px 0; color:#e8e6df; } .empire-banner .eb-m span{ opacity:.7; }
  .empire-banner .eb-x{ font-size:12.5px; line-height:1.4; color:#cfcdc6; }
  @media (max-width:600px){ .empire-banner{ margin:6px 36px 6px calc(34px + var(--bw)); padding:6px 8px; gap:8px; } .empire-banner svg{ width:30px; height:68px; } .empire-banner .eb-x{ font-size:11.5px; } }

  .header-row div.bcHead{ line-height:1.1; } .bcHead hr{ border:0; border-top:1px solid var(--brass); margin:2px 4px; } .bcHead .dcH{ color:#7fa6d8; }
  @media (max-width:600px){ .empire-banner:has(svg[width="190"]){ flex-direction:column; align-items:flex-start; } .empire-banner svg[width="190"]{ width:150px; height:95px; } }

  .topbar{ max-width:1180px; margin:10px auto 0; padding:58px 12px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
  .tb-btn{ display:inline-block; cursor:pointer; list-style:none; background:var(--card-bg); border:1px solid var(--brass-dim); color:var(--brass); font-family:'JetBrains Mono', monospace; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; padding:.65rem 1rem; border-radius:24px; text-decoration:none; }
  .tb-home{
  position:fixed;
  top:10px;
  left:12px;
  z-index:1000;
}
  .tb-btn:hover{ background:rgba(201,162,74,.14); }
  .howto{ flex:1 1 280px; } .howto>summary::-webkit-details-marker{ display:none; } .howto[open]{ flex:1 1 100%; order:3; } .howto[open]>summary{ display:inline-block; background:rgba(201,162,74,.18); }
  .howto-body{ margin-top:10px; background:var(--card-bg); border:1px solid var(--brass-dim); border-radius:8px; padding:16px 20px; max-height:75vh; overflow:auto; color:#e2dfd6; font-family:'Source Serif 4',Georgia,serif; font-size:1rem; line-height:1.55; }
  .howto-body h1{ font-size:1.35rem; line-height:1.25; color:var(--brass); margin:0 0 .6rem; }
  .howto-body h2{ font-size:1.1rem; color:var(--brass); margin:1.1rem 0 .4rem; } .howto-body h4{ margin:.8rem 0 .2rem; font-size:1rem; color:#f0e6cc; }
  .howto-body p,.howto-body li{ margin:.3rem 0; } .howto-body ol,.howto-body ul{ padding-left:1.3rem; } .howto-body a{ color:var(--brass); }
  .howto-note{ opacity:.75; font-size:.9rem; margin-top:1rem; }
  #dd-lock-badge{
  display:none !important;
}