@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/bd933cb739b5125a.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/5150b3609eeaaa9c.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/2c6b1ff0d368efb7.ttf) format('truetype');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/9d2ca86044b885d0.ttf) format('truetype');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/934aa932b4bc1a75.ttf) format('truetype');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/45fad23db0ff6cc8.ttf) format('truetype');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/b536adfa0f5746cf.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/9c577a5f94f8704a.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/f13d6a0246a9ff21.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/d2f56f954d004deb.ttf) format('truetype');
}




  :root{
    --ink-void:#120d09;
    --ink-panel:#1e150e;
    --ink-panel-2:#271b12;
    --ink-panel-3:#2f2115;
    --line-bronze:#40301f;
    --line-bronze-soft:#2c2115;
    --parchment:#e8dcc0;
    --parchment-dim:#a3906f;
    --parchment-faint:#6f5f47;
    --gold:#c9a227;
    --gold-bright:#eccb6a;
    --blood:#b25a42;
    --arcane:#5a93b8;
    --herb:#8ea35a;
    --amber:#c99a3f;
    --tide:#3fa0a0;
    --mystic:#8a5ac0;
    --steel:#6b8299;
    --shadow-deep: 0 30px 70px -25px rgba(0,0,0,.7);
    /* Database/Item-Codex "navy manuscript" tokens — dark-theme values (light theme overrides all of these on body[data-theme="light"]) */
    --ic-navy:#0b141c; --ic-ink:#e7edf1; --ic-muted:#8fa0aa; --ic-line:#2a3b46; --ic-paper:#152430; --ic-canvas:#0e1922;
    --ic-gold:#d3a565; --ic-green:#5fcaa8; --ic-red:#e2897f; --ic-softgold:#2a2418; --ic-bonusbg:#241f30; --ic-bonusline:#3a3450;
    --ic-rowhover:#1c2b35; --ic-rowline:#233542; --ic-colheadbg:#182530; --ic-colheadfg:#8fa0aa;
    --ic-chipbg:#1c2b35; --ic-chipfg:#9fb0ba; --ic-basebg:#182530; --ic-baseline:#233542; --ic-backdrop:#000000b3;
    --ic-eq-bg:#2a2418; --ic-eq-line:#4a3f26; --ic-eq-fg:#d9b876;
    --ic-card-bg:#16232c; --ic-card-line:#274154; --ic-card-fg:#7db3d6;
    --ic-sigil-bg:#221f2e; --ic-sigil-line:#3a3450; --ic-sigil-fg:#b3a2d6;
    --ic-tome-bg:#16241f; --ic-tome-line:#274a3c; --ic-tome-fg:#8fc9ab;
    --ic-radius:10px;
  }
  body[data-theme="light"]{
    background:
      radial-gradient(120% 80% at 15% -10%, #ffffff 0%, transparent 55%),
      radial-gradient(90% 70% at 100% 0%, #eef2f4 0%, transparent 50%),
      #f3f6f8 !important;
    --ink-void:#f3f6f8;
    --ink-panel:#fff; --ink-panel-2:#f3f6f8; --ink-panel-3:#edf2f5;
    --line-bronze:#dce3e7; --line-bronze-soft:#e8edf0;
    --parchment:#203340; --parchment-dim:#697984; --parchment-faint:#8a99a3;
    --gold:#a37735; --gold-bright:#8a6129;
    --ic-navy:#142735; --ic-ink:#203340; --ic-muted:#697984; --ic-line:#dce3e7; --ic-paper:#fff; --ic-canvas:#f3f6f8;
    --ic-gold:#a37735; --ic-green:#247461; --ic-red:#b44842; --ic-softgold:#faf3e7; --ic-bonusbg:#f4f1f9; --ic-bonusline:#dfd7eb;
    --ic-rowhover:#fbf8f2; --ic-rowline:#e8edf0; --ic-colheadbg:#edf2f5; --ic-colheadfg:#697c89;
    --ic-chipbg:#eff3f5; --ic-chipfg:#627580; --ic-basebg:#f4f7f8; --ic-baseline:#e3e9ed; --ic-backdrop:#10273866;
    --ic-eq-bg:#fbf6eb; --ic-eq-line:#e4d9c6; --ic-eq-fg:#a27b40;
    --ic-card-bg:#f0f5f9; --ic-card-line:#cfdde8; --ic-card-fg:#4a7a9b;
    --ic-sigil-bg:#f2f0f9; --ic-sigil-line:#dcd4ea; --ic-sigil-fg:#8270a1;
    --ic-tome-bg:#eef5f2; --ic-tome-line:#cfe2da; --ic-tome-fg:#578574;
  }
  body[data-theme="light"] ::selection{ color:var(--parchment); }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:
      radial-gradient(120% 80% at 15% -10%, #241a10 0%, transparent 55%),
      radial-gradient(90% 70% at 100% 0%, #1c140c 0%, transparent 50%),
      var(--ink-void);
    color:var(--parchment);
    font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
    font-size:15.5px;
    line-height:1.55;
    display:flex;
    min-height:100vh;
  }
  a{ color:var(--gold-bright); }
  ::selection{ background:rgba(201,162,39,.35); color:#fff; }
  :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; border-radius:3px; }
  .th{ font-family:'Noto Serif Thai','EB Garamond',serif; }
  h1,h2,h3,.disp{ font-family:'Cinzel',Georgia,serif; letter-spacing:.02em; text-wrap:balance; color:var(--gold-bright); margin:0; }
  .eyebrow{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
  .num{ font-variant-numeric:tabular-nums; }
  svg{ display:block; }

  /* ---------------- spine navigation ---------------- */
  .spine{
    flex:0 0 232px;
    background:linear-gradient(180deg, var(--ink-panel), var(--ink-void) 85%);
    border-right:1px solid var(--line-bronze);
    display:flex; flex-direction:column;
    padding:26px 0 18px;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .spine-mark{ padding:0 22px 20px; border-bottom:1px solid var(--line-bronze-soft); margin-bottom:6px; }
  .spine-mark .eyebrow{ display:block; margin-bottom:6px; }
  .spine-mark h1{ font-size:19px; line-height:1.25; }
  .spine-mark .sub{ font-size:12px; color:var(--parchment-dim); margin-top:6px; }
  .spine-nav{ display:flex; flex-direction:column; margin-top:8px; }
  .spine-item{
    all:unset; cursor:pointer; display:flex; align-items:baseline; gap:10px;
    padding:13px 22px; border-left:3px solid transparent;
    color:var(--parchment-dim); font-family:'Cinzel',serif; font-size:12.5px;
    letter-spacing:.08em; text-transform:uppercase; transition:background .15s,border-color .15s,color .15s;
  }
  .spine-item .rn{ font-size:11px; color:var(--parchment-faint); width:16px; flex:0 0 auto; }
  .spine-item:hover{ background:rgba(201,162,39,.06); color:var(--parchment); }
  .spine-item.active{ background:rgba(201,162,39,.1); border-left-color:var(--gold); color:var(--gold-bright); }
  .spine-item.active .rn{ color:var(--gold); }
  .spine-theme-btn{ all:unset; box-sizing:border-box; cursor:pointer; margin:16px 22px 0; padding:8px 10px; border:1px solid var(--line-bronze); border-radius:20px; color:var(--gold); font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.06em; text-align:center; text-transform:uppercase; transition:border-color .15s,color .15s; }
  .spine-theme-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .spine-langswitch{display:flex;gap:4px;margin:12px 22px 0;padding:3px;border:1px solid var(--line-bronze);border-radius:20px}
  .spine-langswitch button{flex:1;padding:6px 8px;border:0;border-radius:16px;background:transparent;color:var(--parchment-faint);font:700 10.5px/1.2 'Cinzel',serif;letter-spacing:.06em;cursor:pointer}
  .spine-langswitch button.active{background:var(--gold);color:var(--ink-void)}
  .spine-foot{ margin-top:auto; padding:16px 22px 0; font-size:11px; color:var(--parchment-faint); border-top:1px solid var(--line-bronze-soft); }

  /* ---------------- main ---------------- */
  main{ flex:1 1 auto; min-width:0; }
  section{ padding:46px clamp(20px,4vw,56px) 70px; max-width:1280px; }
  .rule{ width:120px; height:1px; margin:16px 0 26px; background:linear-gradient(90deg, var(--gold) 0%, transparent 100%); position:relative; }
  .rule::before{ content:"◆"; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); color:var(--gold); font-size:9px; background:var(--ink-void); padding:0 6px 0 0; }
  .lede{ max-width:62ch; color:var(--parchment-dim); font-size:16.5px; }

  /* stat strip */
  .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:1px; background:var(--line-bronze); border:1px solid var(--line-bronze); border-radius:8px; overflow:hidden; margin:30px 0 40px; }
  .stat{ background:var(--ink-panel); padding:16px 16px 14px; }
  .stat .n{ font-family:'Cinzel',serif; font-size:24px; color:var(--gold-bright); }
  .stat .l{ font-size:11.5px; color:var(--parchment-dim); margin-top:2px; }

  /* cover cards */
  #sec-cover{
    position:relative; isolation:isolate; display:flex; flex-direction:column; max-width:none; min-height:100vh; padding-bottom:20px;
    background-image:
      linear-gradient(180deg,rgba(8,14,18,.24) 0%,rgba(8,14,18,.34) 42%,rgba(8,14,18,.78) 100%),
      linear-gradient(90deg,rgba(8,14,18,.68) 0%,rgba(8,14,18,.18) 47%,rgba(8,14,18,.08) 100%),
      url('assets/00ae9f8d94646d4c.webp');
    background-size:cover; background-position:center center; background-repeat:no-repeat;
    box-shadow:inset 0 0 90px rgba(0,0,0,.22);
  }
  #sec-cover[hidden]{display:none}
  #sec-cover>.site-logo-cover{display:none}
  #sec-cover>.eyebrow,#sec-cover>h1{color:#fff8e8;text-shadow:0 2px 12px rgba(0,0,0,.8)}
  #sec-cover>.rule::before{background:transparent;text-shadow:0 1px 5px #000}
  #sec-cover>.lede{
    color:#fff8e8; padding:14px 17px; border:1px solid rgba(238,211,153,.58);
    border-radius:8px; background:transparent; box-shadow:none;
    backdrop-filter:none; text-shadow:0 1px 4px rgba(0,0,0,.95);
  }
  #sec-cover .stats{display:none}
  #sec-cover .cards{position:relative;z-index:1;margin-top:auto;padding-top:80px}
  #sec-cover .card{
    color:#fff8e8; background:transparent; border:1px solid rgba(238,211,153,.58);
    box-shadow:none; backdrop-filter:none; text-shadow:0 1px 4px rgba(0,0,0,.95);
  }
  #sec-cover .card:hover{background:rgba(10,16,18,.18);border-color:rgba(255,221,145,.9)}
  #sec-cover .card h3,#sec-cover .card .go{color:#ffe0a0}
  #sec-cover .card p{color:#fff8e8}
  @media(max-width:760px){#sec-cover{background-position:58% top;background-size:auto 100%;background-color:#19252a}#sec-cover>.lede{max-width:none}#sec-cover .cards{margin-top:auto;padding-top:80px}}
  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
  .card{
    all:unset; cursor:pointer; display:flex; flex-direction:column; gap:10px;
    background:linear-gradient(180deg,var(--ink-panel),var(--ink-panel-2));
    border:1px solid var(--line-bronze); border-radius:10px; padding:22px 22px 20px;
    box-shadow:var(--shadow-deep); transition:border-color .15s, transform .15s;
  }
  .card:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .card .seal{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid var(--line-bronze); }
  .card h3{ font-size:16px; }
  .card p{ margin:0; font-size:13.5px; color:var(--parchment-dim); line-height:1.5; }
  .card .go{ margin-top:auto; padding-top:10px; font-family:'Cinzel',serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

  /* portal panel (links out to the standalone tools) */
  .portal{
    margin-top:22px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
    padding:clamp(48px,8vw,86px) 32px; border:1px solid var(--line-bronze); border-radius:12px;
    background:radial-gradient(120% 140% at 50% 0%, var(--ink-panel-2), var(--ink-panel) 70%);
    box-shadow:var(--shadow-deep);
  }
  .portal .sigil{ width:60px; height:60px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:24px; }
  .portal h2{ font-size:23px; }
  .portal p{ max-width:50ch; color:var(--parchment-dim); font-size:14px; margin:0; }
  .portal-cta{ all:unset; cursor:pointer; font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; padding:13px 30px; border:1px solid var(--gold); border-radius:7px; color:var(--gold-bright); transition:background .15s,border-color .15s; margin-top:4px; }
  .portal-cta:hover{ background:rgba(201,162,39,.14); border-color:var(--gold-bright); }
  .portal .note{ font-size:11.5px; color:var(--parchment-faint); max-width:46ch; }

  /* ---------------- codex ---------------- */
  .codex-layout{ display:grid; grid-template-columns:236px 1fr; gap:22px; align-items:start; margin-top:8px; }
  .codex-side{ position:sticky; top:26px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 52px); }
  .cat-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:6px; margin-right:-6px; }
  #sec-codex{ max-width:none; }
  .codex-search{ width:100%; background:var(--ink-panel); border:1px solid var(--line-bronze); border-radius:7px; color:var(--parchment); font-family:'EB Garamond',serif; font-size:14px; padding:9px 12px; }
  .codex-search::placeholder{ color:var(--parchment-faint); }
  .cat-group{ display:flex; flex-direction:column; }
  .cat-title{ display:flex; align-items:center; gap:8px; font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-dim); padding:4px 10px; margin-bottom:2px; }
  .cat-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
  .ds-btn{ all:unset; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:6px; font-size:13.5px; color:var(--parchment-dim); }
  .ds-btn:hover{ background:rgba(201,162,39,.07); color:var(--parchment); }
  .ds-btn.active{ background:rgba(201,162,39,.13); color:var(--gold-bright); }
  .ds-btn .cnt{ font-size:11px; color:var(--parchment-faint); font-variant-numeric:tabular-nums; }
  .ds-btn.active .cnt{ color:var(--gold); }

  .codex-main{ display:grid; grid-template-columns:1fr; gap:16px; min-width:0; }
  .codex-main.split{ grid-template-columns:minmax(0,1fr) 380px; }
  .table-panel{ min-width:0; }
  .table-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
  .table-head h2{ font-size:18px; }
  .table-head .meta{ font-size:12px; color:var(--parchment-faint); }
  .table-scroll{ overflow-x:auto; border:1px solid var(--line-bronze); border-radius:8px; background:var(--ink-panel); }
  .group-total{ font-size:12px; color:var(--parchment-dim); margin-bottom:10px; }
  details.grp{ border:1px solid var(--line-bronze); border-radius:8px; margin-bottom:12px; overflow:hidden; background:var(--ink-panel); }
  details.grp > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 16px; background:var(--ink-panel-3); font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--gold-bright); user-select:none;
  }
  details.grp > summary::-webkit-details-marker{ display:none; }
  details.grp > summary::before{ content:'▸'; margin-right:8px; color:var(--gold); transition:transform .12s; display:inline-block; }
  details.grp[open] > summary::before{ transform:rotate(90deg); }
  details.grp > summary:hover{ color:var(--gold-bright); }
  details.grp .grp-count{ font-size:11px; letter-spacing:0; text-transform:none; color:var(--parchment-dim); }
  details.grp .table-scroll{ border:0; border-top:1px solid var(--line-bronze); border-radius:0; }
  table{ border-collapse:collapse; width:auto; font-size:13px; }
  thead th{ position:sticky; top:0; background:var(--ink-panel-3); text-align:left; padding:9px 12px; font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment-dim); border-bottom:1px solid var(--line-bronze); cursor:pointer; white-space:nowrap; user-select:none; }
  thead th:hover{ color:var(--gold-bright); }
  thead th.sorted{ color:var(--gold-bright); }
  thead th .arrow{ opacity:.7; margin-left:3px; }
  tbody td{ padding:8px 12px; border-bottom:1px solid var(--line-bronze-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
  table.gem-summary-table tbody td:last-child{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none; min-width:320px; overflow-wrap:anywhere; line-height:1.35; }
  tbody td.num{ text-align:right; }
  tbody tr{ cursor:pointer; }
  tbody tr:hover td{ background:rgba(201,162,39,.06); }
  tbody tr.sel td{ background:rgba(201,162,39,.14); }
  tbody tr:last-child td{ border-bottom:0; }

  .generic-detail{ padding:26px 26px 32px; }
  .generic-detail .dt-cat{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
  .generic-detail h3{ font-size:17px; margin-top:4px; }
  .generic-detail .dt-sub{ font-size:12px; color:var(--parchment-faint); margin-top:2px; }
  .dt-close{ all:unset; cursor:pointer; float:right; color:var(--parchment-faint); font-size:18px; line-height:1; padding:2px 4px; }
  .dt-close:hover{ color:var(--gold-bright); }
  .dt-json{ margin-top:14px; background:#0c0906; border:1px solid var(--line-bronze); border-radius:6px; padding:12px; font-family:ui-monospace,'SFMono-Regular',Consolas,monospace; font-size:11.5px; color:var(--parchment-dim); white-space:pre-wrap; word-break:break-word; max-height:280px; overflow-y:auto; }
  .dt-rel{ margin-top:16px; }
  .dt-rel h4{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--parchment-dim); margin:0 0 6px; }
  .dt-rel-row{ all:unset; cursor:pointer; display:block; width:100%; font-size:12.5px; padding:6px 8px; border-radius:5px; color:var(--parchment); border-bottom:1px solid var(--line-bronze-soft); }
  .dt-rel-row:hover{ background:rgba(201,162,39,.09); color:var(--gold-bright); }
  .dt-rel-row .sub{ color:var(--parchment-faint); font-size:11px; }
  .empty-hint{ padding:40px 20px; text-align:center; color:var(--parchment-faint); font-size:13px; border:1px dashed var(--line-bronze); border-radius:8px; }

  /* ---------------- world map ---------------- */
  .wmap-banner{ display:flex; gap:10px; align-items:flex-start; background:rgba(201,154,63,.09); border:1px solid var(--amber); border-radius:8px; padding:12px 14px; font-size:12.5px; color:var(--parchment-dim); margin:18px 0 6px; }
  .wmap-banner b{ color:var(--gold-bright); }
  .wmap-layout{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; margin-top:14px; }
  .wmap-stage-wrap{ position:relative; width:100%; aspect-ratio:3/2; border:1px solid var(--line-bronze); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-deep);
    background:
      radial-gradient(60% 45% at 50% 62%, #241d10 0%, transparent 70%),
      radial-gradient(35% 30% at 15% 30%, #1b2216 0%, transparent 70%),
      radial-gradient(30% 26% at 85% 30%, #17222a 0%, transparent 70%),
      radial-gradient(40% 35% at 52% 12%, #202733 0%, transparent 70%),
      linear-gradient(180deg,#0f1a22,#0c0f14 55%,#0a0d10);
  }
  .wmap-stage-wrap svg.wmap-deco{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
  .wmap-node{ all:unset; position:absolute; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:7px;
    display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size:11.5px; cursor:pointer;
    background:rgba(18,13,9,.82); border:1px solid var(--gold); color:var(--parchment); box-shadow:0 4px 10px rgba(0,0,0,.5);
    transition:transform .12s, background .12s; }
  .wmap-node:hover{ transform:translate(-50%,-50%) scale(1.14); background:rgba(201,162,39,.28); }
  .wmap-node.sel{ background:var(--gold); color:#1a1206; }
  .wmap-node.special{ width:38px; height:38px; border-width:2px; font-size:12px; }
  .wmap-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; font-size:11.5px; color:var(--parchment-dim); }
  .wmap-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .wmap-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
  .wmap-detail{ position:sticky; top:26px; background:linear-gradient(180deg,var(--ink-panel),var(--ink-panel-2)); border:1px solid var(--line-bronze); border-radius:8px; padding:20px; min-height:220px; }
  .wmap-detail .ph{ color:var(--parchment-faint); font-size:13px; text-align:center; padding:60px 10px; }
  .wmap-detail .pill{ display:inline-block; font-family:'Cinzel',serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid currentColor; margin-bottom:8px; }
  .wmap-detail h3{ font-size:19px; margin:2px 0 2px; }
  .wmap-detail .zname{ font-size:12.5px; color:var(--parchment-faint); margin-bottom:14px; }
  .wmap-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
  .wmap-tags .tag{ font-size:10.5px; letter-spacing:.04em; padding:3px 8px; border-radius:20px; border:1px solid var(--line-bronze); color:var(--parchment-dim); }
  .wmap-tags .tag.safe{ border-color:var(--herb); color:var(--herb); }
  .wmap-warn{ font-size:11.5px; color:var(--amber); background:rgba(201,154,63,.1); border:1px solid var(--amber); border-radius:6px; padding:8px 10px; margin-bottom:14px; line-height:1.45; }
  .wmap-roster, .wmap-drops{ display:flex; flex-direction:column; gap:0; max-height:220px; overflow-y:auto; }
  .wmap-roster .row, .wmap-drops .row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-bronze-soft); font-size:13px; }
  .wmap-roster .row:last-child, .wmap-drops .row:last-child{ border-bottom:0; }
  .wmap-roster .row .mn, .wmap-drops .row .mn{ color:var(--parchment); }
  .wmap-roster .row .lv{ color:var(--parchment-faint); font-size:11.5px; }
  .wmap-roster .row .ct, .wmap-drops .row .ct{ color:var(--gold-bright); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .wmap-drops .row .src{ display:block; color:var(--parchment-faint); font-size:11px; margin-top:2px; }

  /* ---------------- Item Codex (light-first mini-app, own theme scope) ---------------- */
  /* theme tokens now live globally (see :root + body[data-theme="light"] above) so the whole
     app — not just this shell — reacts to the one global theme toggle */
  #codexShell{ background:var(--ic-canvas); color:var(--ic-ink); font:15px/1.6 'EB Garamond',Georgia,serif; border-radius:10px; overflow:hidden; }
  #codexShell *{ box-sizing:border-box; }
  #codexShell button, #codexShell input, #codexShell select{ font:inherit; }
  #codexShell button, #codexShell select{ cursor:pointer; }
  #codexShell button{ color:inherit; }
  #codexShell a{ color:inherit; }
  #codexShell .ic-topbar{ height:72px; background:var(--ic-navy); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-radius:10px 10px 0 0; }
  #codexShell .ic-brand{ display:flex; align-items:center; gap:14px; font:16px 'Cinzel',Georgia,serif; letter-spacing:1.5px; }
  #codexShell .ic-brandmark{ color:#d6b779; font-size:28px; }
  #codexShell .ic-brand small{ display:block; font:10px/2.2 'EB Garamond',sans-serif; letter-spacing:3px; color:#b9c6cf; }
  #codexShell .ic-topmeta{ display:flex; align-items:center; gap:16px; font-size:12.5px; color:#bdc9d1; }
  #codexShell .ic-langswitch{display:inline-flex;align-items:center;padding:2px;border:1px solid var(--ic-line);border-radius:7px;background:color-mix(in srgb,var(--ic-navy2) 82%,transparent)}
  #codexShell .ic-langswitch button{min-width:42px;padding:5px 9px;border:0;border-radius:5px;background:transparent;color:var(--ic-muted);font:700 11px/1.2 Georgia,serif;letter-spacing:.04em;cursor:pointer}
  #codexShell .ic-langswitch button.active{background:var(--ic-gold);color:#17232b;box-shadow:0 1px 4px rgba(0,0,0,.16)}
  body[data-theme="light"] #codexShell .ic-langswitch button.active{color:#fffaf0}
  #codexShell .ic-themebtn{ all:unset; cursor:pointer; color:#e5c88f; border:1px solid #64716f; padding:5px 13px; border-radius:30px; font-size:12px; }
  #codexShell .ic-themebtn:hover{ border-color:#e5c88f; }
  #codexShell .ic-workspace{ display:grid; grid-template-columns:220px minmax(0,1fr); background:var(--ic-canvas); border-radius:0 0 10px 10px; overflow:hidden; }
  #codexShell .ic-side{ padding:28px 16px; background:var(--ic-paper); border-right:1px solid var(--ic-line); }
  #codexShell .ic-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:2px; color:var(--ic-gold); }
  #codexShell .ic-side > .ic-eyebrow{ padding-left:14px; }
  #codexShell .ic-nav{ margin-top:18px; display:grid; gap:8px; }
  #codexShell .ic-navbutton{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; text-align:left; padding:12px 13px; border-radius:8px; width:100%; cursor:pointer; }
  #codexShell .ic-navbutton:hover{ background:var(--ic-canvas); }
  #codexShell .ic-navbutton.active{ background:var(--ic-navy); color:#fff; }
  #codexShell .ic-navbutton .ic-symbol{ font-size:22px; color:var(--ic-gold); width:24px; text-align:center; }
  #codexShell .ic-navbutton.active .ic-symbol{ color:#dec18b; }
  #codexShell .ic-navbutton strong{ font-size:14px; font-weight:600; display:block; }
  #codexShell .ic-navbutton small{ display:block; font-size:11.5px; color:var(--ic-muted); }
  #codexShell .ic-navbutton.active small{ color:#bacad4; }
  #codexShell .ic-navbutton b{ margin-left:auto; font-size:11.5px; font-weight:400; color:#8da0ab; }
  #codexShell .ic-navbutton.active b{ color:#cfdae1; }
  #codexShell .ic-sidefoot{ margin:40px 12px 0; padding-top:20px; border-top:1px solid var(--ic-line); }
  #codexShell .ic-sidefoot p{ font-size:12.5px; color:var(--ic-muted); }
  #codexShell .ic-sidefoot strong{ font-size:13.5px; }
  #codexShell .ic-sidefoot small{ font-size:11px; letter-spacing:1px; color:var(--ic-gold); }
  #codexShell .ic-main{ padding:24px 30px 20px; min-width:0; }
  #codexShell .ic-breadcrumb{ color:var(--ic-muted); font-size:12px; margin-bottom:18px; }
  #codexShell .ic-breadcrumb span{ margin:0 8px; color:#b3bec5; }
  #codexShell .ic-heading{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:16px; }
  #codexShell .ic-heading h1{ font:32px/1.25 Georgia,serif; margin:4px 0 6px; color:var(--ic-ink); }
  #codexShell .ic-heading h1 small{ font:13px 'EB Garamond',sans-serif; color:var(--ic-muted); margin-left:14px; }
  #codexShell .ic-heading p{ font-size:13px; color:var(--ic-muted); margin:0; }
  #codexShell .ic-headingmark{ font-size:38px; color:#b89356; border:1px solid #4a3f26; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; flex:0 0 auto; }
  body[data-theme="light"] #codexShell .ic-headingmark{ border-color:#e2d2b8; }
  #codexShell .ic-controls{ border:1px solid var(--ic-line); background:var(--ic-paper); border-radius:var(--ic-radius); overflow:hidden; }
  #codexShell .ic-search{ display:flex; align-items:center; padding:13px 16px; gap:10px; }
  #codexShell .ic-search span{ font-size:20px; color:var(--ic-gold); }
  #codexShell .ic-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; font-size:14px; color:var(--ic-ink); }
  #codexShell .ic-search kbd{ border:1px solid var(--ic-line); padding:2px 7px; font-size:10.5px; color:#87959f; border-radius:4px; }
  #codexShell .ic-filters{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--ic-rowline); background:var(--ic-canvas); padding:11px 16px; flex-wrap:wrap; font-size:12.5px; }
  #codexShell .ic-filters label{ display:flex; align-items:center; gap:8px; color:var(--ic-muted); }
  #codexShell select{ background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:6px; padding:5px 22px 5px 9px; font-size:13px; color:var(--ic-ink); max-width:220px; }
  #codexShell .ic-textbutton{ all:unset; cursor:pointer; color:var(--ic-gold); font-size:12.5px; }
  #codexShell .ic-filters .ic-textbutton{ margin-left:auto; }
  #codexShell .ic-resultsbar{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; font-size:12.5px; gap:14px; flex-wrap:wrap; }
  #codexShell .ic-resultsbar strong{ font-size:15px; }
  #codexShell .ic-muted{ color:var(--ic-muted); }
  #codexShell .ic-resultsbar select{ border:0; background:transparent; }
  #codexShell .ic-viewtoggle{ display:flex; border:1px solid var(--ic-line); border-radius:20px; overflow:hidden; }
  #codexShell .ic-viewtoggle button{ all:unset; cursor:pointer; padding:5px 14px; font-size:12px; color:var(--ic-muted); }
  #codexShell .ic-viewtoggle button.active{ background:var(--ic-navy); color:#fff; }
  #codexShell .ic-catalog{ border:1px solid var(--ic-line); border-radius:var(--ic-radius); overflow:auto; background:var(--ic-paper); }
  #codexShell .ic-grid{ display:grid; grid-template-columns:minmax(200px,1.1fr) minmax(110px,.55fr) minmax(190px,1fr) minmax(125px,.7fr); gap:20px; align-items:center; }
  #codexShell .ic-colhead{ padding:12px 18px; background:var(--ic-colheadbg); font-size:11.5px; color:var(--ic-colheadfg); font-weight:600; }
  #codexShell .ic-itemrow{ all:unset; box-sizing:border-box; display:grid; padding:19px 18px; width:100%; text-align:left; border-top:1px solid var(--ic-rowline); background:var(--ic-paper); transition:background .15s; cursor:pointer; }
  #codexShell .ic-itemrow.ic-grid{ grid-template-columns:minmax(200px,1.1fr) minmax(110px,.55fr) minmax(190px,1fr) minmax(125px,.7fr); gap:20px; align-items:center; }
  #codexShell .ic-grid.ic-itemgrid{ grid-template-columns:minmax(190px,1fr) minmax(150px,.72fr) minmax(220px,1.2fr) minmax(95px,.48fr) minmax(130px,.7fr); min-width:1040px; gap:16px; }
  #codexShell .ic-grid.ic-equipmentgrid{ grid-template-columns:minmax(190px,.95fr) minmax(135px,.62fr) minmax(210px,1.15fr) minmax(190px,1fr) minmax(125px,.62fr); min-width:1080px; gap:16px; }
  #codexShell .ic-grid.ic-sigilgrid{ grid-template-columns:minmax(190px,.9fr) minmax(210px,1.18fr) minmax(180px,1fr) minmax(190px,1fr) minmax(125px,.62fr); min-width:1080px; gap:16px; }
  #codexShell .ic-itemrow.ic-material-uncommon{background:linear-gradient(90deg,rgba(190,236,199,.72),rgba(232,248,235,.52) 42%,var(--ic-paper));border-left:4px solid #68ad78;padding-left:14px;} #codexShell .ic-itemrow.ic-material-uncommon:hover{background:linear-gradient(90deg,rgba(170,228,183,.9),rgba(220,243,225,.72) 48%,var(--ic-rowhover));} #codexShell .ic-itemrow.ic-material-rare{background:linear-gradient(90deg,rgba(198,169,231,.72),rgba(235,221,249,.56) 42%,var(--ic-paper));border-left:4px solid #8657b5;padding-left:14px;} #codexShell .ic-itemrow.ic-material-rare:hover{background:linear-gradient(90deg,rgba(186,150,226,.9),rgba(225,205,245,.74) 48%,var(--ic-rowhover));} body[data-theme="dark"] #codexShell .ic-itemrow.ic-material-uncommon{background:linear-gradient(90deg,rgba(59,117,72,.58),rgba(38,77,47,.28) 48%,var(--ic-paper));} body[data-theme="dark"] #codexShell .ic-itemrow.ic-material-rare{background:linear-gradient(90deg,rgba(102,66,142,.62),rgba(71,47,98,.3) 48%,var(--ic-paper));} #codexShell .ic-itemrow:first-child{ border-top:0; }
  #codexShell .ic-itemrow:hover{ background:var(--ic-rowhover); }
  #codexShell .ic-itemrow:hover h2{ color:var(--ic-gold); }
  #codexShell .ic-itemrow.is-mvp{ border-left:4px solid #d3a348; padding-left:14px; background:linear-gradient(90deg,rgba(211,163,72,.13),var(--ic-paper) 30%); }
  #codexShell .ic-itemrow.is-mvp:hover{ background:linear-gradient(90deg,rgba(211,163,72,.22),var(--ic-rowhover) 38%); }
  #codexShell .ic-mvpbadge{ display:inline-flex; align-items:center; width:max-content; margin:0 0 3px; padding:1px 7px; border:1px solid #c69235; border-radius:999px; color:#8d5b0b; background:#fff0c8; font-size:10px; line-height:1.45; font-weight:800; letter-spacing:1.2px; }
  body[data-theme="dark"] #codexShell .ic-mvpbadge{ color:#f6d88e; background:#4b3512; border-color:#d5a64f; }
  #codexShell .ic-identity{ display:flex; align-items:center; gap:13px; min-width:0; }
  #codexShell .ic-itemicon{ height:48px; width:48px; min-width:48px; border:1px solid var(--ic-eq-line); background:var(--ic-eq-bg); color:var(--ic-eq-fg); display:grid; place-items:center; border-radius:8px; font-size:23px; overflow:hidden; }
  #codexShell .ic-itemicon img{width:90%;height:90%;object-fit:contain;display:block}
  #codexShell .ic-itemicon img+.ic-itemfallback{display:none}
  #codexShell .ic-itemicon img[hidden]+.ic-itemfallback{display:block}
  #codexShell .ic-itemicon.card{ background:var(--ic-card-bg); border-color:var(--ic-card-line); color:var(--ic-card-fg); }
  #codexShell .ic-itemicon.card{width:46px;min-width:46px;height:58px;padding:0;gap:0;border:0;border-radius:5px;background:transparent;box-shadow:none;overflow:visible;cursor:default}
  #codexShell .ic-itemicon.card img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
  #codexShell .ic-detailhead .ic-itemicon.card{width:56px;min-width:56px;height:70px}
  #codexShell .ic-itemicon.sigil{ background:var(--ic-sigil-bg); border-color:var(--ic-sigil-line); color:var(--ic-sigil-fg); }
  #codexShell .ic-itemicon.tome{ background:var(--ic-tome-bg); border-color:var(--ic-tome-line); color:var(--ic-tome-fg); }
  #codexShell .ic-itemicon.item{ background:#f2eee2; border-color:#cdbd95; color:#8b6a26; }
  #codexShell h2{ font-size:14.5px; line-height:1.4; margin:0 0 4px; font-weight:650; color:var(--ic-ink); }
  #codexShell .ic-itemmeta{ font-size:11.5px; color:var(--ic-muted); display:block; }
  #codexShell code{ font:10.5px/1.6 Consolas,monospace; color:var(--ic-muted); overflow-wrap:anywhere; }
  #codexShell .ic-stats{ display:grid; grid-template-columns:repeat(2,minmax(45px,1fr)); gap:3px 12px; max-width:160px; }
  #codexShell .ic-stats span{ display:flex; justify-content:space-between; gap:8px; font-size:13px; }
  #codexShell .ic-stats small{ font-size:10.5px; color:var(--ic-muted); align-self:center; }
  #codexShell .ic-stats b{ font-weight:600; font-variant-numeric:tabular-nums; }
  #codexShell .ic-itemgrid .ic-stats{ grid-template-columns:1fr; max-width:none; width:100%; }
  #codexShell .ic-itemgrid .ic-stats span{ min-width:0; }
  #codexShell .ic-itemgrid .ic-stats b{ white-space:nowrap; }
  #codexShell .ic-effects{ list-style:none; margin:0; padding:0; font-size:13px; line-height:1.6; }
  #codexShell .ic-effects li{ color:var(--ic-green); overflow-wrap:anywhere; }
  #codexShell .ic-effects li.bad{ color:var(--ic-red); }
  #codexShell .ic-refinenote{ font-size:10.5px; color:var(--ic-gold); display:block; margin-top:4px; }
  #codexShell .ic-roweffectgroup{ margin-top:8px; padding:7px 9px; border-radius:6px; border:1px solid var(--ic-line); background:var(--ic-basebg); }
  #codexShell .ic-roweffectgroup .ic-refinenote{ margin:0 0 3px; font-weight:750; letter-spacing:.55px; }
  #codexShell .ic-roweffectgroup.stepped{ border-color:var(--ic-bonusline); background:var(--ic-bonusbg); }
  #codexShell .ic-roweffectgroup.stepped .ic-refinenote{ color:#9b7bc1; }
  #codexShell .ic-roweffectgroup.fullset{ border-color:var(--ic-bonusline); background:var(--ic-bonusbg); }
  #codexShell .ic-drop{ font-size:11.5px; line-height:1.5; position:relative; padding-right:14px; }
  #codexShell .ic-drop strong{ font-weight:500; }
  #codexShell .ic-drop small{ display:block; font-size:10.5px; color:var(--ic-muted); margin-top:4px; }
  #codexShell .ic-drop .ic-arrow{ position:absolute; right:-5px; top:0; color:#afbec6; font-size:16px; }
  #codexShell .ic-tag{ display:inline-block; font-size:11.5px; padding:3px 9px; border-radius:5px; background:var(--ic-chipbg); color:var(--ic-chipfg); }
  #codexShell .ic-pagination{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ic-muted); margin:14px 0; }
  #codexShell .ic-pagination div{ display:flex; align-items:center; gap:12px; }
  #codexShell .ic-pagination button{ all:unset; box-sizing:border-box; cursor:pointer; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:6px; width:30px; height:30px; text-align:center; color:var(--ic-ink); }
  #codexShell .ic-pagination button:disabled{ opacity:.4; cursor:default; }
  #codexShell .ic-empty{ text-align:center; padding:50px 22px; color:var(--ic-muted); grid-column:1/-1; }
  #codexShell .ic-footer{ border-top:1px solid var(--ic-line); padding-top:14px; margin-top:20px; font-size:11px; color:var(--ic-muted); }
  #codexShell dialog{ position:fixed; inset:0 0 0 auto; margin:0; width:540px; max-width:100vw; height:100dvh; max-height:100dvh; border:0; border-left:1px solid var(--ic-line); padding:0; background:var(--ic-paper); color:var(--ic-ink); box-shadow:-15px 0 80px #12283825; }
  #codexShell dialog::backdrop{ background:var(--ic-backdrop); backdrop-filter:blur(2px); }
  #codexShell .ic-detailhead{ position:relative; padding:28px 28px 18px; border-bottom:1px solid var(--ic-line); }
  #codexShell .ic-close{ all:unset; box-sizing:border-box; cursor:pointer; position:absolute; z-index:10; right:16px; top:14px; background:var(--ic-canvas); border:1px solid var(--ic-line); border-radius:50%; width:32px; height:32px; line-height:29px; font-size:19px; font-weight:700; text-align:center; color:var(--ic-ink); box-shadow:0 2px 8px rgba(0,0,0,.14); }
  #codexShell .ic-close:hover{ color:var(--ic-gold); border-color:var(--ic-gold); transform:translateY(-1px); }
  #codexShell .ic-close:focus-visible{ outline:2px solid var(--ic-gold); outline-offset:2px; }
  #codexShell .ic-detailhead .ic-identity{ margin:12px 0; }
  #codexShell .ic-detailhead h2{ font:22px/1.3 Georgia,serif; }
  #codexShell .ic-detailhead .ic-itemicon{ width:58px; height:58px; }
  #codexShell .ic-copy{ font-size:11.5px; border:1px solid var(--ic-line); background:var(--ic-paper); padding:3px 8px; border-radius:4px; color:var(--ic-muted); cursor:pointer; }
  #codexShell .ic-detailtabs{ display:flex; gap:18px; padding:0 28px; border-bottom:1px solid var(--ic-line); }
  #codexShell .ic-detailtabs button{ all:unset; cursor:pointer; font-size:13px; padding:13px 0; color:var(--ic-muted); border-bottom:2px solid transparent; }
  #codexShell .ic-detailtabs button.active{ color:var(--ic-gold); border-bottom-color:var(--ic-gold); }
  #codexShell .ic-detailbody{ padding:20px 28px 36px; overflow-y:auto; max-height:calc(100dvh - 160px); }
  #codexShell .ic-detailbody h3{ font-size:14px; margin:20px 0 10px; }
  #codexShell .ic-detailbody h3:first-child{ margin-top:0; }
  #codexShell .ic-basestats{ display:flex; gap:9px; margin-bottom:22px; flex-wrap:wrap; }
  #codexShell .ic-basestats div{ background:var(--ic-basebg); border:1px solid var(--ic-baseline); border-radius:6px; padding:9px 18px; flex:1; min-width:70px; }
  #codexShell .ic-basestats small{ display:block; font-size:10.5px; color:var(--ic-muted); }
  #codexShell .ic-basestats b{ font-size:22px; font-weight:500; }
  #codexShell .ic-detailbody .ic-effects{ font-size:14.5px; }
  #codexShell .ic-refinebox, #codexShell .ic-bonusbox{ background:var(--ic-softgold); border:1px solid #4a3f26; padding:15px 18px; border-radius:8px; margin:20px 0; }
  #codexShell .ic-refinebox.stepped{ background:var(--ic-bonusbg); border-color:var(--ic-bonusline); }
  body[data-theme="light"] #codexShell .ic-refinebox{ border-color:#e7d8ba; }
  #codexShell .ic-bonusbox{ background:var(--ic-bonusbg); border-color:var(--ic-bonusline); }
  #codexShell .ic-refinebox p, #codexShell .ic-bonusbox p{ margin:9px 0; font-size:13.5px; }
  #codexShell .ic-detailbody small{ font-size:11.5px; color:var(--ic-muted); }
  #codexShell .ic-chapter{ display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--ic-line); }
  #codexShell .ic-chapter p{ font-size:13px; margin:4px 0; color:var(--ic-green); }
  #codexShell .ic-source{ display:flex; justify-content:space-between; gap:13px; padding:13px 0; border-bottom:1px solid var(--ic-line); font-size:13px; }
  #codexShell .ic-source span{ display:block; color:var(--ic-muted); font-size:11.5px; }
  #codexShell .ic-source b{ color:var(--ic-green); white-space:nowrap; }
  #codexShell pre{ background:var(--ic-basebg); padding:15px; border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.7 Consolas,monospace; color:var(--ic-ink); }
  #codexShell .ic-note{ font-size:12px; color:var(--ic-muted); }
  #codexShell .ic-sigilcell{ min-width:0; }
  #codexShell .ic-sigilcell .ic-effects{ font-size:11.5px; line-height:1.45; }
  #codexShell .ic-chapterline{ padding:3px 0 6px; border-bottom:1px dotted var(--ic-rowline); }
  #codexShell .ic-chapterline:last-child{ border-bottom:0; }
  #codexShell .ic-chapterline b{ display:block; color:var(--ic-gold); font-size:10px; letter-spacing:.4px; }
  #codexShell .ic-totalbox{ padding:8px 10px; border:1px solid var(--ic-bonusline); border-radius:6px; background:var(--ic-bonusbg); }
  #codexShell .mod-board{ display:grid; gap:14px; }
  #codexShell .mod-intro{ padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:13px; }
  #codexShell .mod-group{ border:1px solid var(--line); border-radius:9px; overflow-x:auto; background:var(--surface); }
  #codexShell .mod-group h3{ margin:0; padding:12px 15px; background:var(--surface-2); color:var(--gold); font-size:15px; }
  #codexShell .mod-group-rows{ min-width:760px; }
  #codexShell .mod-choice-row{ display:grid; grid-template-columns:54px minmax(0,1fr); align-items:stretch; min-height:43px; }
  #codexShell .mod-choice-row + .mod-choice-row{ border-top:1px solid #aeb5bc; }
  body[data-theme="dark"] #codexShell .mod-choice-row + .mod-choice-row{ border-top-color:rgba(255,255,255,.28); }
  #codexShell .mod-rowrule{ display:flex; align-items:center; justify-content:center; padding:10px 6px; background:transparent; color:var(--muted); font-family:Georgia,"Times New Roman",serif; font-size:12px; font-weight:700; letter-spacing:.8px; text-align:center; }
  #codexShell .mod-options{ display:grid; grid-template-columns:repeat(var(--mod-columns,5),minmax(0,1fr)); gap:0; background:transparent; }
  #codexShell .mod-option{ display:flex; justify-content:space-between; gap:12px; padding:10px 13px; background:transparent; font-size:12.5px; }
  #codexShell .mod-option b{ color:var(--ink); overflow-wrap:anywhere; }
  #codexShell .mod-option span{ color:var(--herb); white-space:nowrap; font-variant-numeric:tabular-nums; }
  @media (max-width:900px){
    #codexShell .ic-workspace{ grid-template-columns:1fr; }
    #codexShell .ic-side{ border-right:0; border-bottom:1px solid var(--ic-line); }
    #codexShell .ic-nav{ display:flex; flex-wrap:wrap; }
    #codexShell .ic-navbutton{ width:auto; flex:1 1 140px; }
    #codexShell .ic-grid, #codexShell .ic-itemrow.ic-grid{ grid-template-columns:1fr; gap:12px; }
    #codexShell .ic-grid.ic-itemgrid, #codexShell .ic-grid.ic-sigilgrid, #codexShell .ic-grid.ic-equipmentgrid{ grid-template-columns:1fr; min-width:0; }
    #codexShell .ic-colhead{ display:none; }
    #codexShell .ic-stats, #codexShell .ic-drop{ margin-left:61px; }
    #codexShell dialog{ width:100vw; }
  }

  @media (max-width:920px){
    body{ flex-direction:column; }
    .spine{ position:relative; height:auto; flex-direction:row; align-items:center; width:100%; padding:14px 10px; overflow-x:auto; gap:4px; }
    .spine-mark{ display:none; }
    .spine-nav{ flex-direction:row; }
    .spine-item{ padding:9px 14px; border-left:0; border-bottom:3px solid transparent; white-space:nowrap; }
    .spine-item.active{ border-left-color:transparent; border-bottom-color:var(--gold); }
    .spine-foot{ display:none; }
    section{ padding:30px 18px 60px; }
    .codex-layout{ grid-template-columns:1fr; }
    .codex-side{ position:relative; top:0; flex-direction:row; overflow-x:auto; padding-bottom:4px; max-height:none; }
    .cat-scroll{ overflow:visible; padding-right:0; margin-right:0; }
    .ic-topbar{ height:auto; padding:14px 16px; flex-wrap:wrap; gap:8px; }
    #codexShell dialog{ width:100vw; }
    .wmap-layout{ grid-template-columns:1fr; }
    .wmap-detail{ position:relative; top:0; }
    .wmap-node{ width:26px; height:26px; font-size:10px; }
    .wmap-node.special{ width:30px; height:30px; font-size:10.5px; }
  }
  /* ---------------- player-facing monster database prototype ---------------- */
  #codexShell [hidden]{display:none!important}
  #codexShell .mdb-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px;padding:14px 16px;background:var(--ic-canvas);border:1px solid var(--ic-line);border-radius:var(--ic-radius);margin-bottom:14px}
  #codexShell .mdb-toolbar label{display:flex;flex-direction:column;gap:5px;color:var(--ic-muted);font-size:11px}
  #codexShell .mdb-toolbar select{max-width:none;width:100%}
  #codexShell .mdb-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #codexShell .mdb-range input{min-width:0;width:100%;padding:6px 8px;border:1px solid var(--ic-line);border-radius:6px;background:var(--ic-paper);color:var(--ic-ink)}
  #codexShell .mdb-reset{align-self:end;border:1px solid var(--ic-line);background:var(--ic-paper);color:var(--ic-gold);border-radius:6px;padding:7px 10px;cursor:pointer}
  #codexShell .mdb-list{display:grid;gap:16px}
  #codexShell .mdb-card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(160px,.7fr) minmax(205px,.85fr) minmax(250px,1.15fr) minmax(180px,.8fr);gap:0;align-items:stretch;padding:18px 20px;border:1px solid var(--ic-line);border-radius:var(--ic-radius);background:var(--ic-paper);box-shadow:0 4px 13px rgba(25,41,50,.07);transition:.16s ease}
  #codexShell .mdb-card:hover{border-color:var(--ic-gold);box-shadow:0 9px 24px rgba(0,0,0,.13);transform:translateY(-1px)}
  #codexShell .mdb-card:focus-visible{outline:2px solid var(--ic-gold);outline-offset:3px}
  #codexShell .mdb-panel{min-width:0;padding:0 16px;border-left:1px solid var(--ic-rowline)}
  #codexShell .mdb-identity{padding:0 18px 0 0;border-left:0}
  #codexShell .mdb-art{width:min(100%,150px);aspect-ratio:1;border:1px dashed var(--ic-line);border-radius:9px;background:linear-gradient(145deg,var(--ic-canvas),var(--ic-paper));display:grid;place-items:center;color:var(--ic-muted);text-align:center;font-size:10px;line-height:1.25;overflow:hidden}
  #codexShell .mdb-art b{display:block;font-size:27px;color:var(--ic-line);line-height:1;margin-bottom:6px}
  #codexShell .mdb-name{font:600 24px/1.2 Georgia,serif;color:var(--ic-ink);margin:13px 0 8px}
  #codexShell .mdb-tags{display:flex;flex-wrap:wrap;gap:5px}
  #codexShell .mdb-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--ic-rowline);border-radius:99px;background:var(--ic-chipbg);color:var(--ic-chipfg);font-size:11px}
  #codexShell .mdb-elementchip{padding-left:5px}
  #codexShell .mdb-elementchip .mdb-elementidentity{gap:5px}
  #codexShell .mdb-elementchip .mdb-elementicon{flex-basis:16px;width:16px;height:16px}
  #codexShell .mdb-elementchip .mdb-elementidentity small{font-size:11px;color:inherit}
  #codexShell .mdb-chip.boss{background:#4a1f1d;color:#ffc2ba}
  #codexShell .mdb-chip.passive{background:#edf5ee;color:#47724f;border-color:#c9dfcc}
  #codexShell .mdb-chip.aggressive{background:#f8e7e3;color:#9b4136;border-color:#ebc2ba}
  #codexShell .mdb-paneltitle{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:var(--ic-ink);font:600 14px/1.2 Georgia,serif;text-transform:uppercase;letter-spacing:.035em}
  #codexShell .mdb-paneltitle::before{content:'✦';color:var(--ic-gold);font:12px/1 sans-serif}
  #codexShell .mdb-statrows{border:1px solid var(--ic-rowline);border-radius:7px;overflow:hidden;background:var(--ic-basebg)}
  #codexShell .mdb-statrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:7px 10px;border-bottom:1px solid var(--ic-rowline)}
  #codexShell .mdb-statrow:last-child{border-bottom:0}
  #codexShell .mdb-statrow small{color:var(--ic-muted);font-size:11px;letter-spacing:.02em}
  #codexShell .mdb-statrow b{color:var(--ic-ink);font-size:13px;font-variant-numeric:tabular-nums}
  #codexShell .mdb-rewards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:17px}
  #codexShell .mdb-reward{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid var(--ic-rowline);border-radius:7px;background:var(--ic-basebg)}
  #codexShell .mdb-reward small{color:var(--ic-muted);font-size:10.5px}
  #codexShell .mdb-reward b{font-size:13px;font-variant-numeric:tabular-nums}
  #codexShell .mdb-attributes{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ic-rowline);border-radius:7px;overflow:hidden;background:var(--ic-basebg);margin-bottom:17px}
  #codexShell .mdb-attribute{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-bottom:1px solid var(--ic-rowline);font-size:11px}
  #codexShell .mdb-attribute:nth-child(odd){border-right:1px solid var(--ic-rowline)}
  #codexShell .mdb-attribute:nth-last-child(-n+2){border-bottom:0}
  #codexShell .mdb-attribute span{color:var(--ic-muted)}
  #codexShell .mdb-attribute b{font-variant-numeric:tabular-nums}
  #codexShell .mdb-location{display:grid;gap:5px}
  #codexShell .mdb-location span{display:block;padding:7px 9px;border:1px solid var(--ic-rowline);border-radius:6px;background:var(--ic-basebg);font-size:11.5px;white-space:normal;overflow-wrap:anywhere}
  #codexShell .mdb-affinitypanel{padding-right:0}
  #codexShell .mdb-affinitypanel .mdb-paneltitle{margin-bottom:8px}
  #codexShell .mdb-affinitynote{display:none;margin-left:auto;color:var(--ic-muted);font:400 10px/1.2 sans-serif;text-transform:none;letter-spacing:0}
  #codexShell .mdb-affinity{display:grid;grid-template-columns:1fr;gap:2px}
  #codexShell .mdb-affinitycell{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:24px;padding:4px 7px;border:1px solid var(--ic-rowline);border-radius:4px;background:var(--ic-basebg);text-align:left}
  #codexShell .mdb-elementidentity{display:flex;align-items:center;gap:7px;min-width:0}
  #codexShell .mdb-elementidentity small{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ic-muted);font-size:9.5px}
  #codexShell .mdb-elementicon{display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border-radius:50%;overflow:hidden;background:var(--mdb-element-color,#8f8574);border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.22)}
  #codexShell .mdb-elementicon img{display:block;width:82%;height:82%;object-fit:contain;pointer-events:none}
  #codexShell .mdb-elementicon span{font:700 9px/1 Georgia,serif;color:#fff8e6}
  #codexShell .mdb-affinitycell b{font-size:12px;font-variant-numeric:tabular-nums}
  #codexShell .mdb-affinitycell.weak{background:#e4f0db;border-color:#bfd2af;color:#47753d}
  #codexShell .mdb-affinitycell.resist{background:#f5ded8;border-color:#e2b9b0;color:#9c4338}
  #codexShell .mdb-dropspanel{grid-column:1/-1;border-left:0;border-top:1px solid var(--ic-rowline);margin-top:17px;padding:14px 0 0}
  #codexShell .mdb-dropspanel .mdb-paneltitle{justify-content:center;margin:0;padding:6px 10px;border:1px solid var(--ic-rowline);border-bottom:0;border-radius:7px 7px 0 0;background:var(--ic-chipbg)}
  #codexShell .mdb-drops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;border:1px solid var(--ic-rowline);border-radius:0 0 7px 7px;overflow:hidden;background:var(--ic-rowline)}
  #codexShell .mdb-carddrop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;min-height:32px;padding:4px 7px;background:var(--ic-basebg)}
  #codexShell .mdb-carddrop span{min-width:0;color:var(--ic-ink);font-size:10.5px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
  #codexShell .mdb-carddrop span small{display:block;margin-top:1px;color:var(--ic-muted);font-size:8.5px;line-height:1.15}
  #codexShell .mdb-carddrop b{color:var(--ic-green);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
  #codexShell .mdb-nodata{padding:12px;color:var(--ic-muted);font-size:11px;text-align:center}
  #codexShell .mdb-empty{padding:50px 20px;text-align:center;border:1px dashed var(--ic-line);border-radius:var(--ic-radius);color:var(--ic-muted)}
  #codexShell .mdb-pager{display:flex;justify-content:space-between;align-items:center;margin:14px 0;color:var(--ic-muted);font-size:12px}
  #codexShell .mdb-pager div{display:flex;gap:7px;align-items:center}
  #codexShell .mdb-pager button{width:34px;height:30px;border:1px solid var(--ic-line);background:var(--ic-paper);color:var(--ic-ink);border-radius:6px;cursor:pointer}
  #codexShell .mdb-pager button:disabled{opacity:.35;cursor:default}
  #codexShell dialog.monster-dialog{width:min(760px,100vw)}
  #codexShell .mdb-detailhead{padding:28px;border-bottom:1px solid var(--ic-line)}
  #codexShell .mdb-detailhero{display:grid;grid-template-columns:128px 1fr;gap:20px;align-items:center;margin-top:10px}
  #codexShell .mdb-detailhero .mdb-art{width:128px}
  #codexShell .mdb-detailhero h2{font:600 28px/1.2 Georgia,serif;margin:0 0 9px}
  #codexShell .mdb-detailbody{padding:22px 28px 38px;overflow-y:auto;max-height:calc(100dvh - 205px)}
  #codexShell .mdb-detailbody .mdb-affinity{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  #codexShell .mdb-section{margin:0 0 24px}
  #codexShell .mdb-section h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ic-muted);margin:0 0 9px}
  #codexShell .mdb-corestats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  #codexShell .mdb-corestats .mdb-stat{padding:10px}
  #codexShell .mdb-corestats .mdb-stat b{font-size:18px}
  #codexShell .mdb-maprow,#codexShell .mdb-droprow,#codexShell .mdb-skillrow,#codexShell .mdb-resistrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px solid var(--ic-rowline);font-size:13px}
  #codexShell .mdb-maprow span,#codexShell .mdb-droprow span,#codexShell .mdb-skillrow span{display:block;color:var(--ic-muted);font-size:11px}
  #codexShell .mdb-droprow b{color:var(--ic-green);white-space:nowrap}
  #codexShell .mdb-note{font-size:11px;color:var(--ic-muted);padding:10px 12px;background:var(--ic-canvas);border-radius:7px}
  #codexShell .progression-placeholder{min-height:300px;display:grid;place-items:center;padding:32px;border:1px dashed var(--line);border-radius:10px;background:linear-gradient(135deg,var(--surface),var(--surface-2));text-align:center}
  #codexShell .progression-placeholder .placeholder-mark{width:72px;height:72px;margin:0 auto 16px;display:grid;place-items:center;border:1px solid var(--mystic);border-radius:50%;color:var(--mystic);font-size:30px}
  #codexShell .progression-placeholder h3{margin:0 0 8px;color:var(--text);font-size:22px}
  #codexShell .progression-placeholder p{max-width:560px;margin:0;color:var(--muted);line-height:1.7}
  #codexShell .class-tree{display:grid;gap:14px}
  #codexShell .class-tree-intro{padding:13px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted)}
  #codexShell .class-path{display:grid;grid-template-columns:minmax(190px,.8fr) 72px minmax(220px,1.2fr);align-items:center;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
  #codexShell .class-node{display:flex;align-items:center;gap:13px;min-height:82px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
  #codexShell .class-node.tier-two{position:relative}
  #codexShell .class-emblem{width:64px;height:64px;min-width:64px;display:grid;place-items:center;border:1px solid rgba(167,120,48,.4);border-radius:50%;background:radial-gradient(circle,#f5ead0,var(--surface));overflow:hidden}
  #codexShell .class-emblem-button{appearance:none;padding:0;color:inherit;cursor:pointer;box-shadow:0 0 0 0 rgba(167,120,48,0);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  #codexShell .class-emblem-button:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 5px 16px rgba(84,57,20,.2)}
  #codexShell .class-emblem-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  #codexShell .class-emblem img{width:100%;height:100%;object-fit:contain}
  #codexShell .class-emblem span{color:var(--gold);font-size:24px}
  #codexShell .class-node h3{margin:0 0 3px;color:var(--text);font-size:17px}
  #codexShell .class-node small{color:var(--muted)}
  #codexShell .class-connector{height:1px;background:var(--gold);opacity:.55}
  #codexShell .class-branches{position:relative;display:grid;gap:10px;padding-left:26px}
  #codexShell .class-branches:before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:1px;background:var(--gold);opacity:.55}
  #codexShell .class-node.tier-two:before{content:"";position:absolute;right:100%;top:50%;width:26px;height:1px;background:var(--gold);opacity:.55}
  #codexShell .class-detail{padding:30px 28px 36px}
  #codexShell .class-detail-hero{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--ic-line)}
  #codexShell .class-detail-hero .class-emblem{width:92px;height:92px;min-width:92px}
  #codexShell .class-detail h2{margin:4px 0 7px;font:600 28px/1.2 Georgia,serif;color:var(--ic-ink)}
  #codexShell .class-detail-meta{display:flex;flex-wrap:wrap;gap:6px}
  #codexShell .class-detail-meta span{padding:4px 8px;border:1px solid var(--ic-line);border-radius:999px;background:var(--ic-canvas);font-size:11px;color:var(--ic-muted)}
  #codexShell .class-detail-copy{padding-top:22px}
  #codexShell .class-detail-copy h3{margin:0 0 9px;color:var(--ic-ink);font:600 15px/1.3 Georgia,serif}
  #codexShell .class-detail-copy p{margin:0;color:var(--ic-muted);font-size:14px;line-height:1.8}
  #codexShell .class-detail-copy .class-detail-en{margin-top:19px;padding-top:18px;border-top:1px solid var(--ic-rowline)}
  #codexShell .class-detail-source{margin-top:22px;padding:9px 11px;border-radius:6px;background:var(--ic-canvas);color:var(--ic-muted);font-size:11px}
  @media(max-width:760px){#codexShell .class-path{grid-template-columns:1fr;gap:10px}#codexShell .class-connector{width:1px;height:20px;margin:auto}#codexShell .class-branches{padding:20px 0 0}#codexShell .class-branches:before{left:50%;top:0;bottom:auto;height:20px}#codexShell .class-node.tier-two:before{display:none}}
  @media(max-width:1250px){#codexShell .mdb-card{grid-template-columns:minmax(150px,.65fr) minmax(195px,.85fr) minmax(230px,1.1fr) minmax(165px,.8fr)}#codexShell .mdb-drops{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media(max-width:900px){#codexShell .mdb-card{grid-template-columns:145px 1fr}#codexShell .mdb-metapanel,#codexShell .mdb-affinitypanel{grid-column:auto;border-top:1px solid var(--ic-rowline);margin-top:16px;padding-top:16px}#codexShell .mdb-metapanel{grid-column:1/-1;border-left:0}#codexShell .mdb-affinitypanel{grid-column:1/-1;border-left:0;padding-right:0}#codexShell .mdb-affinity{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}#codexShell .mdb-identity .mdb-art{width:120px}#codexShell .mdb-drops{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:680px){#codexShell .mdb-toolbar{grid-template-columns:1fr}#codexShell .mdb-card{grid-template-columns:1fr;padding:15px}#codexShell .mdb-panel{border-left:0;border-top:1px solid var(--ic-rowline);padding:15px 0 0;margin-top:15px}#codexShell .mdb-identity{display:grid;grid-template-columns:86px 1fr;gap:13px;border-top:0;padding:0;margin:0}#codexShell .mdb-identity .mdb-art{width:86px;grid-row:1/3}#codexShell .mdb-name{margin:4px 0 7px;font-size:21px}#codexShell .mdb-affinity{grid-template-columns:repeat(2,minmax(0,1fr))}#codexShell .mdb-dropspanel{padding-top:14px}#codexShell .mdb-drops{grid-template-columns:repeat(2,minmax(0,1fr))}#codexShell .mdb-corestats{grid-template-columns:repeat(2,1fr)}#codexShell .mdb-detailhero{grid-template-columns:90px 1fr}#codexShell .mdb-detailhero .mdb-art{width:90px}}



#elementsRoot{
    --bg: #15100b;
    --bg-2: #1d1610;
    --panel: #241b13;
    --panel-edge: #3a2c1c;
    --parchment: #ece0c4;
    --parchment-shade: #ddcda3;
    --ink: #362a1c;
    --ink-soft: #6d5a42;
    --gold: #c9a227;
    --gold-bright: #e8c766;
    --good-ink: #2f5a2a;
    --good-fill: #cfe0b6;
    --good2-ink: #e8f4dc;
    --good2-fill: #3f7a34;
    --bad-ink: #7a2a20;
    --bad-fill: #e7c2ba;
    --bad2-ink: #f8e2db;
    --bad2-fill: #9c3f2c;
    --miss-ink: #b7a686;
    --miss-fill: #362d24;
    --neutral-fill: #ece0c4;

    --el-neutral: #8f8574;
    --el-poison: #4f7a34;
    --el-ghost: #4f9c93;
    --el-undead: #6a4d92;
    --el-fire: #b8431f;
    --el-earth: #93641a;
    --el-wind: #a68f28;
    --el-water: #2a6f9c;
    --el-holy: #c79a3f;
    --el-chaos: #7a2a63;
  }
#elementsRoot *{ box-sizing: border-box; }
#elementsRoot{
    margin:0;
    background:
      radial-gradient(120% 90% at 50% -10%, #241b12 0%, var(--bg) 55%),
      var(--bg);
    color: var(--ink);
    font-family: "EB Garamond", Georgia, "Noto Serif", serif;
  }
#elementsRoot .page{
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 32px 72px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
#elementsRoot /* ---------- header ---------- */
  .masthead{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
#elementsRoot .eyebrow{
    font-family: "Cinzel", serif;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
  }
#elementsRoot h1{
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-size: clamp(32px, 4.6vw, 52px);
    letter-spacing: 0.02em;
    color: var(--gold-bright);
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 1px 0 #000, 0 0 26px rgba(201,162,39,0.18);
  }
#elementsRoot .rule{
    width: 220px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    position: relative;
  }
#elementsRoot .rule::before{
    content: "◆";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    background: var(--bg);
    color: var(--gold);
    font-size: 10px;
    padding: 0 10px;
  }
#elementsRoot /* ---------- real in-game art (Assets/Art/Skill Tree, #elementsRoot Assets/Resources/HudArt) ---------- */
  .title-plate{
    width: min(620px, 92vw);
    aspect-ratio: 1547 / 656;
    background-image: url("assets/90a00149620626e6.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
#elementsRoot .title-plate h1{ margin: 0; padding: 0 12%; }
#elementsRoot .dek{
    max-width: 62ch;
    color: #cabb9c;
    font-size: 17px;
    line-height: 1.6;
    font-style: italic;
  }
#elementsRoot /* ---------- legend ---------- */
  .legend{
    display: flex;
    justify-content: center;
    gap: 10px 22px;
    flex-wrap: wrap;
    font-family: "Cinzel", serif;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cabb9c;
  }
#elementsRoot .legend-item{ display:flex; align-items:center; gap:9px; }
#elementsRoot .swatch{
    width: 16px; height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  }
#elementsRoot .swatch.darkgreen{ background: var(--good2-fill); }
#elementsRoot .swatch.strong{ background: var(--good-fill); }
#elementsRoot .swatch.even{ background: var(--parchment); }
#elementsRoot .swatch.weak{ background: var(--bad-fill); }
#elementsRoot .swatch.darkred{ background: var(--bad2-fill); }
#elementsRoot .swatch.miss{ background: var(--miss-fill); }
#elementsRoot /* ---------- matrix panel ---------- */
  /* พื้นหลังจริงจากเกม (Skill_Info_Popup_Background_9Slice.png, #elementsRoot 1332x1075) — 9-slice ผ่าน
     border-image แทน background ธรรมดา กันมุมลายทองเบี้ยวตอนกล่องขยายตามเนื้อหา (ค่า slice
     96px อ้างอิงจาก -unity-slice-* ใน SkillTree.uss ตัวจริง) */
  .panel, #elementsRoot .card{
    background: var(--panel);
    border-style: solid;
    border-width: 40px;
    border-image-source: url("assets/b957dff09fbb4c9d.webp");
    border-image-slice: 96 fill;
    border-image-width: 40px;
    border-image-repeat: stretch;
    padding: 12px;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
  }
#elementsRoot .panel-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
#elementsRoot .panel-title{
    font-family: "Cinzel", serif;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-bright);
  }
#elementsRoot .panel-note{
    font-size: 13.5px;
    color: #a89679;
  }
#elementsRoot .panel-note b{ color: var(--gold); font-weight: 600; }
#elementsRoot .matrix-scroll{
    overflow-x: auto;
    border-radius: 6px;
  }
#elementsRoot table.matrix{
    border-collapse: separate;
    border-spacing: 3px;
    background: var(--panel);
    font-variant-numeric: tabular-nums;
    min-width: 780px;
  }
#elementsRoot /* หัวมุมตาราง — เลิกใช้เส้นทแยง/หมุนตัวหนังสือทั้งหมดตามที่ขอ (ลองมาหลายแบบแล้วยังดูไม่ง่าย)
     เหลือแค่ 2 บรรทัดตัวหนังสือแนวนอนธรรมดา เรียงบน-ล่าง: Defend อยู่บนชิดขวา (ตรงกับคอลัมน์ที่
     กางออกไปทางขวา) Attack อยู่ล่างชิดซ้าย (ตรงกับแถวที่ไล่ลงมาทางซ้าย) อ่านง่าย ไม่ต้องตีความทิศทาง */
  .corner{
    width: 112px;
    height: 78px;
    padding: 10px 8px 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
#elementsRoot .axis-label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Cinzel", serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
#elementsRoot .axis-label .arrow-big{ font-size: 15px; line-height: 1; }
#elementsRoot .corner .axis-def{ color: #c2b28c; align-self: flex-end; }
#elementsRoot .corner .axis-atk{ color: var(--gold-bright); align-self: flex-start; transform: translateY(15px); }
#elementsRoot th.col-head, #elementsRoot th.row-head{
    background: transparent;
    padding: 0;
  }
#elementsRoot th.col-head{ padding-bottom: 6px; vertical-align: bottom; }
#elementsRoot th.row-head{ padding-right: 6px; }
#elementsRoot .chip{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
  }
#elementsRoot th.col-head .chip{ flex-direction: column-reverse; gap: 5px; padding: 8px 4px 6px; }
#elementsRoot th.col-head .chip .name{ writing-mode: vertical-rl; transform: rotate(180deg); }
#elementsRoot .chip.highlighted{ background: rgba(201,162,39,0.22); }
#elementsRoot .chip.highlighted .name{ color: var(--gold-bright); }
#elementsRoot .medal{
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-size: 11px;
    color: #fff8e6;
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 -3px 5px rgba(0,0,0,0.35),
      0 1px 2px rgba(0,0,0,0.5);
    flex-shrink: 0;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
#elementsRoot .medal-icon{
    width: 82%;
    height: 82%;
    object-fit: contain;
    pointer-events: none;
  }
#elementsRoot .chip.highlighted .medal{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 -3px 5px rgba(0,0,0,0.35),
      0 0 0 3px var(--gold), 0 0 12px 2px rgba(201,162,39,0.7);
    transform: scale(1.08);
  }
#elementsRoot th .name{
    font-family: "Cinzel", serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #d8c9a3;
    white-space: nowrap;
  }
#elementsRoot td.cell{
    width: 68px; height: 52px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    background: var(--parchment);
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
  }
#elementsRoot td.cell:hover{ box-shadow: inset 0 0 0 2px rgba(58,44,28,0.35); }
#elementsRoot /* หกระดับ: 150 เขียวเข้ม / 125 เขียวอ่อน / 100 ปกติ / 75 แดงอ่อน / 50 แดงเข้ม / 0 = Miss */
  td.cell.darkgreen{ background: var(--good2-fill); }
#elementsRoot td.cell.strong{ background: var(--good-fill); }
#elementsRoot td.cell.weak{ background: var(--bad-fill); }
#elementsRoot td.cell.darkred{ background: var(--bad2-fill); }
#elementsRoot td.cell.miss{ background: var(--miss-fill); }
#elementsRoot /* เส้นประ = ธาตุเดียวกันโจมตีกันเอง (ยังคงสีตามค่าจริง ไม่บังคับสีทับเหมือนเดิม) */
  td.cell.self::after, #elementsRoot td.cell.selfneutral::after{
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(0,0,0,0.28);
    border-radius: 4px;
    pointer-events: none;
  }
#elementsRoot td.cell.picked{
    box-shadow: inset 0 0 0 3px var(--gold), 0 0 10px 1px rgba(201,162,39,0.6);
    transform: scale(1.04);
    z-index: 2;
  }
#elementsRoot .pct{
    font-family: "Cinzel", serif;
    font-size: 13px;
    font-weight: 600;
  }
#elementsRoot td.cell.darkgreen .pct{ color: var(--good2-ink); }
#elementsRoot td.cell.strong .pct{ color: var(--good-ink); }
#elementsRoot td.cell.even .pct{ color: var(--ink-soft); font-weight: 500; }
#elementsRoot td.cell.weak .pct{ color: var(--bad-ink); }
#elementsRoot td.cell.darkred .pct{ color: var(--bad2-ink); }
#elementsRoot td.cell.miss .pct{ color: var(--miss-ink); font-weight: 700; letter-spacing: 0.04em; }
#elementsRoot .arrow{ font-size: 10px; display:block; margin-top: 1px; }
#elementsRoot td.cell.darkgreen .arrow{ color: var(--good2-ink); }
#elementsRoot td.cell.strong .arrow{ color: var(--good-ink); }
#elementsRoot td.cell.weak .arrow{ color: var(--bad-ink); }
#elementsRoot td.cell.darkred .arrow{ color: var(--bad2-ink); }
#elementsRoot td.cell.even .arrow, #elementsRoot td.cell.miss .arrow{ visibility:hidden; }
#elementsRoot /* ---------- editable custom matrix ---------- */
  td.cell.editable{ cursor: text; padding: 0; }
#elementsRoot td.cell.editable:hover{ box-shadow: inset 0 0 0 2px rgba(201,162,39,0.5); }
#elementsRoot td.cell.editable:focus-within{ box-shadow: inset 0 0 0 2px var(--gold), 0 0 8px 1px rgba(201,162,39,0.55); z-index: 2; }
#elementsRoot td.cell.editable.diag::after{
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(0,0,0,0.28);
    border-radius: 4px;
    pointer-events: none;
  }
#elementsRoot .cell-input{
    width: 100%; height: 100%;
    border: 0; background: transparent;
    text-align: center;
    font-family: "Cinzel", serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    -moz-appearance: textfield;
  }
#elementsRoot td.cell.editable.darkgreen .cell-input{ color: var(--good2-ink); }
#elementsRoot td.cell.editable.strong .cell-input{ color: var(--good-ink); }
#elementsRoot td.cell.editable.weak .cell-input{ color: var(--bad-ink); }
#elementsRoot td.cell.editable.darkred .cell-input{ color: var(--bad2-ink); }
#elementsRoot td.cell.editable.miss .cell-input{ color: var(--miss-ink); font-weight: 700; }
#elementsRoot .cell-input::-webkit-outer-spin-button, #elementsRoot .cell-input::-webkit-inner-spin-button{
    -webkit-appearance: none; margin: 0;
  }
#elementsRoot .cell-input:focus{ outline: none; color: var(--ink); }
#elementsRoot .reset-btn{
    display: block;
    margin: 18px auto 4px;
    padding: 9px 22px;
    background: transparent;
    border: 1px solid var(--panel-edge);
    border-radius: 6px;
    font-family: "Cinzel", serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b8a67e;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
#elementsRoot .reset-btn:hover{ border-color: var(--gold); color: var(--gold-bright); }
#elementsRoot .reset-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
#elementsRoot /* ---------- lower row: cycle + duality ---------- */
  .lower{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
  }
@media (max-width: 860px){#elementsRoot .lower{ grid-template-columns: 1fr; }}
#elementsRoot .card h2{
    font-family: "Cinzel", serif;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: 0 0 6px;
  }
#elementsRoot .card p.caption{
    font-size: 13.5px;
    color: #a89679;
    margin: 0 0 18px;
    max-width: 46ch;
  }
#elementsRoot .wheel-wrap{ display:flex; justify-content:center; }
#elementsRoot .duality-rows{ display:flex; flex-direction:column; gap: 14px; }
#elementsRoot .duality{
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-2);
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    padding: 12px 16px;
  }
#elementsRoot .duality .medal{ width: 34px; height: 34px; font-size: 12px; }
#elementsRoot .duality .vs{
    font-family: "Cinzel", serif;
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 0.1em;
  }
#elementsRoot .duality .text{ flex: 1; font-size: 13.5px; color: #cabb9c; line-height: 1.5; }
#elementsRoot .duality .text b{ color: var(--gold-bright); font-weight: 600; }
#elementsRoot .duality .pair-pct{
    font-family:"Cinzel", serif; font-size: 13px; font-weight:700; color: var(--good-ink);
    background: var(--good-fill); border-radius: 5px; padding: 3px 8px;
  }
#elementsRoot /* ---------- balance report ---------- */
  .bal-rows{ display: flex; flex-direction: column; }
#elementsRoot .bal-row{
    display: grid;
    grid-template-columns: 108px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(58,44,28,0.16);
  }
#elementsRoot .bal-row:last-child{ border-bottom: none; padding-bottom: 0; }
#elementsRoot .bal-name{
    grid-column: 1; grid-row: 1 / span 2; align-self: center;
    display: flex; align-items: center; gap: 8px;
    font-family: "Cinzel", serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #d8c9a3;
    white-space: nowrap;
  }
#elementsRoot .bal-name .medal{ width: 22px; height: 22px; font-size: 9px; }
#elementsRoot .bal-bar{
    grid-column: 2; grid-row: 1;
    display: flex;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  }
#elementsRoot .bal-bar .seg{ height: 100%; }
#elementsRoot .bal-bar .seg.t150{ background: var(--good2-fill); }
#elementsRoot .bal-bar .seg.t125{ background: var(--good-fill); }
#elementsRoot .bal-bar .seg.t100{ background: var(--parchment-shade); }
#elementsRoot .bal-bar .seg.t75{ background: var(--bad-fill); }
#elementsRoot .bal-bar .seg.t50{ background: var(--bad2-fill); }
#elementsRoot .bal-bar .seg.tmiss{ background: var(--miss-fill); }
#elementsRoot .bal-counts{ grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; }
#elementsRoot .tier-chip{
    display: inline-flex; align-items: center; gap: 5px;
    font-family: "Cinzel", serif;
    font-size: 11px;
    color: #b8a67e;
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
    padding: 2px 7px 2px 5px;
  }
#elementsRoot .tier-chip .dot{ width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
#elementsRoot .tier-chip.t150 .dot{ background: var(--good2-fill); }
#elementsRoot .tier-chip.t125 .dot{ background: var(--good-fill); }
#elementsRoot .tier-chip.t100 .dot{ background: var(--parchment-shade); }
#elementsRoot .tier-chip.t75 .dot{ background: var(--bad-fill); }
#elementsRoot .tier-chip.t50 .dot{ background: var(--bad2-fill); }
#elementsRoot .tier-chip.tmiss .dot{ background: var(--miss-fill); box-shadow: inset 0 0 0 1px var(--miss-ink); }
#elementsRoot .tier-chip b{ color: var(--gold-bright); font-weight: 700; margin-left: 1px; }
#elementsRoot footer{
    text-align: center;
    font-size: 12.5px;
    color: #6d5a42;
    padding-top: 8px;
  }
#elementsRoot footer b{ color: #8a7a5c; }



#skillEditorRoot{
    --shell-bg-1:#14110e; --shell-bg-2:#1d1812; --shell-ink:#cabfa8; --shell-dim:#8b8172;
    --shell-accent:#c9a24a; --shell-line:#3a3226; --shell-panel:#221c15; --shell-panel-2:#2a231a;
    --danger:#c9614a;
  }
#skillEditorRoot *{box-sizing:border-box;}
#skillEditorRoot{
    margin:0; background:var(--shell-bg-1); border-radius:14px;
    background-image:
      radial-gradient(ellipse at 50% -10%, #241d15 0%, transparent 60%),
      linear-gradient(180deg, var(--shell-bg-1), var(--shell-bg-2));
    color:var(--shell-ink);
    font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
    display:flex; flex-direction:column; align-items:center;
    padding:26px 16px 48px;
  }
#skillEditorRoot .eyebrow{
    font-family:'Cinzel', Georgia, serif; font-size:11px; letter-spacing:.28em;
    color:var(--shell-accent); text-transform:uppercase; margin-bottom:8px;
  }
#skillEditorRoot h1{
    font-family:'Cinzel', Georgia, serif; font-weight:600; font-size:clamp(20px,3vw,26px);
    margin:0 0 6px; color:#efe6d2; text-align:center; text-wrap:balance;
  }
#skillEditorRoot .sub{
    font-size:13.5px; color:var(--shell-dim); text-align:center; max-width:700px;
    margin:0 0 18px; line-height:1.55;
  }
#skillEditorRoot .sub b{color:var(--shell-ink); font-weight:600;}
#skillEditorRoot .class-switcher{
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
    background:linear-gradient(180deg, var(--shell-panel), var(--shell-panel-2));
    border:1px solid var(--shell-line); border-radius:8px; padding:10px 16px;
  }
#skillEditorRoot .class-switcher label{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--shell-accent); }
#skillEditorRoot .class-switcher select{
    font-family:'EB Garamond', serif; font-size:14px; color:var(--shell-ink);
    background:var(--shell-panel-2); border:1px solid var(--shell-line); border-radius:5px;
    padding:6px 10px; min-width:220px;
  }
#skillEditorRoot .class-switcher .icon-count{ font-size:11.5px; color:var(--shell-dim); }
#skillEditorRoot .workbench{
    width:min(96vw, 1720px); display:grid;
    grid-template-columns: 300px 1fr; gap:18px; align-items:start;
  }
@media (max-width: 980px){#skillEditorRoot .workbench{ grid-template-columns: 1fr; }}
#skillEditorRoot .palette{
    background:linear-gradient(180deg, var(--shell-panel), var(--shell-panel-2));
    border:1px solid var(--shell-line); border-radius:8px; padding:14px;
    display:flex; flex-direction:column; gap:10px;
    max-height:78vh; overflow:auto;
  }
#skillEditorRoot .palette h2{
    font-family:'Cinzel', serif; font-size:13px; letter-spacing:.14em; margin:0 0 2px;
    color:var(--shell-accent); text-transform:uppercase;
  }
#skillEditorRoot .palette-hint{ font-size:12px; color:var(--shell-dim); line-height:1.5; margin:0 0 4px; }
#skillEditorRoot .skill-pick{
    display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px;
    border:1px solid transparent; cursor:grab; background:rgba(255,255,255,.02);
    transition:background .12s, border-color .12s;
  }
#skillEditorRoot .skill-pick:hover{ background:rgba(201,162,74,.10); border-color:rgba(201,162,74,.35); }
#skillEditorRoot .skill-pick.placed{ opacity:.42; }
#skillEditorRoot .skill-pick.dragging{ opacity:.3; }
#skillEditorRoot .pick-thumb{
    width:34px; height:34px; border-radius:5px; flex-shrink:0; position:relative;
    background:#0f0c08; border:1px solid var(--shell-line);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
#skillEditorRoot .pick-thumb img{ width:100%; height:100%; object-fit:cover; }
#skillEditorRoot .pick-thumb .ic-sprite{ width:100%; height:100%; }
#skillEditorRoot .pick-thumb .letters{ font-family:'Cinzel', serif; font-weight:700; font-size:11px; color:#b8ac92; }
#skillEditorRoot .pick-meta{ min-width:0; flex:1; }
#skillEditorRoot .pick-name{ font-size:12.5px; color:var(--shell-ink); font-weight:600; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#skillEditorRoot .pick-tag{ font-size:10px; letter-spacing:.04em; color:var(--shell-dim); text-transform:uppercase; }
#skillEditorRoot .pick-count{ margin-left:auto; font-size:10px; color:var(--shell-dim); font-variant-numeric:tabular-nums; flex-shrink:0; }
#skillEditorRoot .toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
#skillEditorRoot .tbtn{
    flex:1; min-width:118px; font-family:'Cinzel', serif; font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--shell-ink); background:var(--shell-panel-2);
    border:1px solid var(--shell-line); border-radius:5px; padding:8px 6px; cursor:pointer;
    transition:border-color .12s, color .12s;
  }
#skillEditorRoot .tbtn:hover{ border-color:var(--shell-accent); color:#f1e6c8; }
#skillEditorRoot .tbtn.danger:hover{ border-color:var(--danger); color:#e79c8c; }
#skillEditorRoot .copy-flash{ color:#8fd39a !important; border-color:#8fd39a !important; }
#skillEditorRoot .stage-col{ display:flex; flex-direction:column; gap:10px; }
#skillEditorRoot .stage-wrap{
    width:100%; aspect-ratio:1920/1080; position:relative;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px var(--shell-line);
    border-radius:3px; overflow:hidden; background:#0c0a08;
  }
#skillEditorRoot .stage{ width:1920px; height:1080px; position:absolute; left:0; top:0; transform-origin:top left; }
#skillEditorRoot .panel{
    position:absolute; left:3%; right:3%; top:4%; bottom:4%;
    background-image:url('assets/9269137df79474be.webp'); background-size:cover; background-position:center;
  }
#skillEditorRoot .outer-frame{ position:absolute; inset:0; background-image:url('assets/d5b1b8c80eeeb263.png'); background-size:100% 100%; pointer-events:none; }
#skillEditorRoot .tab-column{ position:absolute; left:1.5%; top:3%; bottom:3%; width:56px; display:flex; flex-direction:column; }
#skillEditorRoot .class-tab{ flex:1; width:100%; background-image:url('assets/1383c9a5be930679.png'); background-size:100% 100%; display:flex; align-items:center; justify-content:center; }
#skillEditorRoot .class-tab-label{ transform:rotate(-90deg); white-space:nowrap; font-family:'Cinzel', serif; font-weight:700; font-size:20px; letter-spacing:2px; color:rgb(235,228,214); }
#skillEditorRoot .skill-scroll{ position:absolute; left:8%; right:27%; top:3%; bottom:3%; overflow:auto; }
#skillEditorRoot .skill-grid{ position:relative; padding:6px; }
#skillEditorRoot .skill-card{
    position:absolute; width:132px; height:160px; display:flex; flex-direction:column; align-items:center;
    border-radius:4px;
  }
#skillEditorRoot .skill-card.dragover{ outline:2px dashed #f2cc59; outline-offset:4px; background:rgba(242,204,89,.08); }
#skillEditorRoot .skill-card.reject{ outline:2px solid var(--danger); outline-offset:4px; background:rgba(201,97,74,.14); }
#skillEditorRoot .skill-card.filled{ cursor:grab; }
#skillEditorRoot .skill-card.filled.dragging{ opacity:.35; }
#skillEditorRoot .skill-card.empty{ justify-content:center; }
#skillEditorRoot .empty-slot-mark{
    width:96px; height:96px; border:1.5px dashed rgba(90,76,58,.45); border-radius:8px;
    display:flex; align-items:center; justify-content:center; color:rgba(90,76,58,.55);
    font-family:'Cinzel', serif; font-size:11px; letter-spacing:.06em; text-align:center; padding:6px;
  }
#skillEditorRoot .skill-name-plate{ width:100%; height:26px; margin-bottom:2px; background-image:url('assets/858b378ac19be800.png'); background-size:100% 100%; display:flex; align-items:center; justify-content:center; }
#skillEditorRoot .skill-name-label{ font-family:'Cinzel', serif; font-weight:700; font-size:11px; color:rgb(58,46,36); width:92%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#skillEditorRoot .skill-icon-frame{ width:96px; height:96px; position:relative; background-image:url('assets/0b2212c67f01ae9e.webp'); background-size:100% 100%; display:flex; align-items:center; justify-content:center; }
#skillEditorRoot .skill-icon-image{ width:78%; height:78%; background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:4px; }
#skillEditorRoot .skill-icon-label{ font-family:'Cinzel', serif; font-weight:700; font-size:22px; color:rgb(210,200,180); }
#skillEditorRoot .remove-x{
    position:absolute; left:-6px; top:-6px; width:18px; height:18px; border-radius:50%;
    background:#2a1c14; border:1px solid var(--shell-accent); color:#e8dcc4; font-size:11px;
    line-height:16px; text-align:center; cursor:pointer; opacity:0; transition:opacity .12s;
  }
#skillEditorRoot .skill-card.filled:hover .remove-x{ opacity:1; }
#skillEditorRoot .skill-level-bar{ width:96px; height:26px; margin-top:2px; background-image:url('assets/4d3de768cd6dfc2d.png'); background-size:100% 100%; display:flex; align-items:center; }
#skillEditorRoot .skill-rank-label{ flex:1; padding-left:8px; font-family:'EB Garamond', serif; font-size:11px; color:rgb(230,224,210); font-variant-numeric:tabular-nums; }
#skillEditorRoot .skill-plus-button, #skillEditorRoot .skill-minus-button{ width:22px; height:100%; display:flex; align-items:center; justify-content:center; color:rgb(230,224,210); font-family:'Cinzel', serif; font-size:13px; cursor:pointer; user-select:none; }
#skillEditorRoot .skill-plus-button:hover, #skillEditorRoot .skill-minus-button:hover{ color:#f2cc59; }
#skillEditorRoot .sidebar{ position:absolute; right:2%; top:3%; bottom:3%; width:21%; display:flex; flex-direction:column; align-items:center; }
#skillEditorRoot .title-frame{ width:100%; padding:4px 0; background-image:url('assets/04cb175bca9b5707.png'); background-size:contain; background-repeat:no-repeat; background-position:center; display:flex; align-items:center; justify-content:center; }
#skillEditorRoot .title-label{ font-family:'Cinzel', serif; font-weight:700; font-size:20px; letter-spacing:1px; color:rgb(58,46,36); text-align:center; padding:0 8px; }
#skillEditorRoot .points-plate{ width:90%; height:34px; margin-top:16px; background-image:url('assets/858b378ac19be800.png'); background-size:100% 100%; display:flex; align-items:center; justify-content:center; }
#skillEditorRoot .points-label{ font-family:'Cinzel', serif; font-size:14px; color:rgb(58,46,36); font-variant-numeric:tabular-nums; }
#skillEditorRoot .side-button{ width:90%; height:46px; margin-top:14px; background-image:url('assets/a8154420202257fe.png'); background-size:100% 100%; display:flex; align-items:center; justify-content:center; font-family:'Cinzel', serif; font-size:13px; letter-spacing:1px; color:rgb(230,224,210); border:0; }
#skillEditorRoot .status-label{ width:90%; margin-top:10px; font-family:'EB Garamond', serif; font-size:12px; color:rgb(150,40,32); text-align:center; min-height:14px; }
#skillEditorRoot .tooltip{
    position:fixed; width:340px; padding:16px; display:flex; align-items:flex-start;
    background-image:url('assets/68ae367cf0ec4085.webp'); background-size:100% 100%;
    z-index:50; pointer-events:none; display:none;
  }
#skillEditorRoot .tooltip.show{ display:flex; }
#skillEditorRoot .tooltip-icon-frame{ width:92px; height:92px; flex-shrink:0; margin-right:12px; background-image:url('assets/68e8baed5ca4358d.webp'); background-size:100% 100%; display:flex; align-items:center; justify-content:center; }
#skillEditorRoot .tooltip-icon-frame img{ width:78%; height:78%; object-fit:contain; border-radius:4px; }
#skillEditorRoot .tooltip-icon-frame .ic-sprite{ width:78%; height:78%; border-radius:4px; }
#skillEditorRoot .tooltip-icon-label{ font-family:'Cinzel', serif; font-weight:700; font-size:24px; color:rgb(210,200,180); }
#skillEditorRoot .tooltip-body{ flex:1; min-width:0; }
#skillEditorRoot .tooltip-title-row{ display:flex; flex-direction:column; align-items:flex-start; }
#skillEditorRoot .tooltip-type-prefix{ font-family:'Cinzel', serif; font-weight:700; font-size:12px; color:rgb(190,180,160); margin-bottom:-4px; letter-spacing:.04em; }
#skillEditorRoot .tooltip-name{ font-family:'Cinzel', serif; font-weight:800; font-size:15px; color:rgb(235,228,214); }
#skillEditorRoot .tooltip-meta{ margin-top:3px; font-family:'EB Garamond', serif; font-weight:600; font-size:10.5px; color:rgb(190,180,160); letter-spacing:.02em; }
#skillEditorRoot .tooltip-desc{ margin-top:7px; font-family:'EB Garamond', serif; font-size:11.5px; color:rgb(225,218,205); line-height:1.48; }
#skillEditorRoot .tooltip-stats{ margin-top:7px; font-family:'EB Garamond', serif; font-size:11px; color:rgb(200,192,175); line-height:1.5; }
#skillEditorRoot .foot{ margin-top:18px; font-size:11.5px; color:var(--shell-dim); text-align:center; max-width:700px; line-height:1.6; }
#skillEditorRoot .foot code{ color:var(--shell-ink); background:rgba(255,255,255,.06); padding:1px 5px; border-radius:3px; font-family:'EB Garamond', serif; }



  #skillEditorRoot.skill-sim-root{
    --sim-gold:#d4ad55;--sim-line:#4b3c28;--sim-panel:#211a13;--sim-panel2:#2a2118;
    width:100%;max-width:1720px;margin:18px auto 0;padding:20px;
    display:block;background:linear-gradient(160deg,#17120d,#211910 55%,#130f0b);
    border:1px solid #493923;border-radius:14px;color:#e8ddc9;
  }
  .skill-sim-root *{box-sizing:border-box}
  .sim-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:18px}
  .sim-head h2{margin:0;color:#f4e8cf;font:600 clamp(20px,3vw,30px)/1.2 'Cinzel',serif}
  .sim-head p{margin:6px 0 0;color:#a99b84;font-size:14px}
  .sim-point-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .sim-points{min-width:175px;padding:11px 15px;border:1px solid var(--sim-line);border-radius:9px;background:#16110d;text-align:center}
  .sim-points b{display:block;color:var(--sim-gold);font:600 22px/1.1 'Cinzel',serif}
  .sim-points span{font-size:12px;color:#a99b84}
  .sim-class-picker{padding:14px;border:1px solid var(--sim-line);border-radius:10px;background:rgba(255,255,255,.018);margin-bottom:16px}
  .sim-picker-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .sim-picker-row+.sim-picker-row{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
  .sim-picker-label{width:86px;color:#b99b5d;font:600 11px/1 'Cinzel',serif;letter-spacing:.08em;text-transform:uppercase}
  .sim-class-btn{width:86px;min-height:92px;padding:7px 5px 6px;border:1px solid #3b3022;border-radius:8px;background:#18130f;color:#bfb29c;cursor:pointer;transition:.15s}
  .sim-class-btn:hover,.sim-class-btn:focus-visible{border-color:#9b7939;transform:translateY(-1px);outline:0}
  .sim-class-btn.active{border-color:#e0ba61;color:#fff3d7;background:linear-gradient(#332817,#21180e);box-shadow:0 0 0 1px rgba(224,186,97,.18),0 8px 20px #0008}
  .sim-class-btn img{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 5px;filter:drop-shadow(0 2px 3px #000)}
  .sim-class-btn span{display:block;font-size:10px;line-height:1.15;overflow-wrap:anywhere}
  .sim-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
  .sim-reset{padding:7px 13px;border:1px solid #6b5130;border-radius:6px;background:#21170f;color:#dfc58f;cursor:pointer;font:600 11px 'Cinzel',serif}
  .sim-guide{flex:1;min-width:260px;color:#cbbfa9;font-size:13px}
  .sim-guide strong{color:#f0c96e}
  .sim-trees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  .sim-trees.one{grid-template-columns:minmax(0,1fr)}
  .sim-tree{border:1px solid var(--sim-line);border-radius:11px;overflow:hidden;background:var(--sim-panel)}
  .sim-tree-head{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--sim-line);background:linear-gradient(90deg,#302518,#211810)}
  .sim-tree-head img{width:42px;height:42px;object-fit:contain}
  .sim-tree-head h3{margin:0;color:#f1dfbb;font:600 17px 'Cinzel',serif}
  .sim-tree-head small{display:block;color:#9e8f78;margin-top:2px}
  .sim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;padding:12px;align-items:stretch}
  .sim-skill{position:relative;min-height:150px;padding:9px 9px 8px;border:1px solid #403324;border-radius:8px;background:#18130f;color:#d9cdb9;text-align:left;transition:.14s}
  .sim-skill.has-rank{border-color:#8d6d34;background:#251d12}
  .sim-skill.is-locked{opacity:.72}
  .sim-skill.is-path{border-color:#e0b74f!important;box-shadow:0 0 0 2px rgba(224,183,79,.16),0 0 22px rgba(224,183,79,.16);opacity:1}
  .sim-skill.is-target{border-color:#79bddd!important;box-shadow:0 0 0 2px rgba(121,189,221,.18),0 0 24px rgba(121,189,221,.16)}
  .sim-skill-top{display:flex;align-items:center;gap:8px}
  .sim-icon{width:42px;height:42px;flex:0 0 42px;border:1px solid #59472d;border-radius:6px;background:#0d0a08;overflow:hidden;display:grid;place-items:center;color:#d8b866;font:700 11px 'Cinzel',serif}
  .sim-icon>div{width:100%;height:100%}
  .sim-name{font-weight:600;font-size:12px;line-height:1.2;color:#eee3cf}
  .sim-kind{font-size:9px;color:#998a74;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
  .sim-desc{margin:8px 0;color:#ab9f8c;font-size:10.5px;line-height:1.35;min-height:42px}
  .sim-prereq{font-size:9.5px;line-height:1.3;color:#d0aa62;min-height:25px}
  .sim-rankbar{display:grid;grid-template-columns:27px 1fr 27px;gap:5px;align-items:center;margin-top:7px}
  .sim-rankbar button{height:25px;border:1px solid #584427;border-radius:5px;background:#2c2115;color:#e5c276;cursor:pointer;font-weight:700}
  .sim-rankbar button:disabled{opacity:.3;cursor:not-allowed}
  .sim-rank{height:25px;display:grid;place-items:center;border-radius:4px;background:#100d0a;color:#e9dec9;font-size:11px;font-variant-numeric:tabular-nums}
  .sim-empty{padding:28px;color:#968976;text-align:center}
  #simSkillTooltip{position:fixed;z-index:10000;width:370px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;padding:18px 20px;border:1px solid #a38549;border-radius:10px;background:linear-gradient(135deg,#272019,#131416);color:#eee2ca;box-shadow:0 12px 35px #0009;pointer-events:none;font:13px/1.65 'Noto Serif Thai',serif;overflow-wrap:anywhere}
  #simSkillTooltip[hidden]{display:none}
  #simSkillTooltip .sim-tip-title{font:600 20px/1.3 'Cinzel',serif;color:#f2d48f}
  #simSkillTooltip .sim-tip-meta{font-size:12px;color:#bda982;margin-top:6px}
  #simSkillTooltip .sim-tip-damage{margin:12px 0;padding:10px 12px;border:1px solid #a3854970;border-radius:6px;background:#a3854915;font-variant-numeric:tabular-nums}
  #simSkillTooltip .sim-tip-damage b{display:block;color:#cfab5e;margin-bottom:5px}
  #simSkillTooltip .sim-tip-damage small{display:block;font-size:11px;opacity:.8;margin-top:5px}
  #simSkillTooltip p{margin:12px 0;white-space:pre-line}
  #simSkillTooltip .sim-tip-stats,#simSkillTooltip .sim-tip-req{border-top:1px solid #75603a66;padding-top:9px;margin-top:9px}
  body[data-theme="light"] #simSkillTooltip{background:linear-gradient(135deg,#fff9ec,#eee3cd);color:#382f24;box-shadow:0 12px 35px #49341940}
  body[data-theme="light"] #simSkillTooltip .sim-tip-title{color:#71521f}
  body[data-theme="light"] #simSkillTooltip .sim-tip-meta{color:#776142}
  #skillEditorRoot .sim-trees{display:flex;flex-direction:column;gap:12px}
  #sec-skills{max-width:none;padding-left:16px;padding-right:16px}
  #skillEditorRoot.skill-sim-root{max-width:none;padding:16px 10px}
  #skillEditorRoot .sim-tree{width:100%;max-width:none;padding:0;border:0;border-radius:4px;background:transparent;overflow:visible}
  #skillEditorRoot .sim-game-wrap{width:100%;margin:0;aspect-ratio:auto;overflow:auto}
  #skillEditorRoot .sim-game-stage{position:relative;transform:none!important;transform-origin:top left;width:1920px;height:1080px;zoom:var(--sim-scale,1)}
  #skillEditorRoot .sim-skill{min-height:0;padding:0;border:0;background:transparent;cursor:pointer;box-shadow:none}
  #skillEditorRoot .sim-skill.is-locked{opacity:1}
  #skillEditorRoot .sim-skill.is-path{outline:3px solid #c18a21;outline-offset:3px;background:rgba(255,212,80,.22);box-shadow:0 0 22px #edb53888}
  #skillEditorRoot .sim-skill.is-target{outline:3px solid #61afd0;outline-offset:3px;background:rgba(97,175,208,.12)}
  #skillEditorRoot .sim-icon-art{width:78%;height:78%;display:grid;place-items:center}
  #skillEditorRoot .sim-icon-art>div{width:100%;height:100%;border-radius:4px}
  #skillEditorRoot .sim-rankbar{display:grid;grid-template-columns:34px 1fr 34px;width:128px;height:36px;min-height:36px;gap:0;margin:0;padding:0}
  #skillEditorRoot .sim-rankbar button{height:36px;border:0;background:transparent;padding:0;color:#fff4db;font-size:28px;line-height:1;font-weight:700}
  #skillEditorRoot .sim-rank{height:36px;background:transparent;color:#fff4db;font-size:24px;font-weight:700;line-height:1}
  #skillEditorRoot .sim-skill .skill-name-label{font-size:15px}
  #skillEditorRoot .sim-game-stage .outer-frame{pointer-events:none}
  #skillEditorRoot.skill-sim-root{background:none;border:0;box-shadow:none}
  #skillEditorRoot .sim-open-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
  #skillEditorRoot .sim-open-heading h3{font:600 18px 'Cinzel',serif;color:var(--gold-bright)}
  #skillEditorRoot .sim-open-heading small{color:var(--parchment-dim);letter-spacing:.15em}
  #skillEditorRoot .sim-open-scroll{overflow:auto;padding:4px;background:none}
  #skillEditorRoot .sim-open-scroll .skill-grid{margin:0 auto;zoom:.5}
  #skillEditorRoot .sim-open-heading .sim-points{padding:4px 10px;min-width:150px}
  #skillEditorRoot .sim-open-heading .sim-points b{font-size:18px}
  @media(max-width:980px){.sim-trees{grid-template-columns:1fr}.sim-head{grid-template-columns:1fr}.sim-points{justify-self:start}.sim-picker-label{width:100%}}


:root{--aos-worldmap-frame:url("assets/18610b6b76d8c88f.png")}.wmap-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px;padding:10px 12px;border:1px solid var(--line-bronze);border-radius:9px;background:rgba(8,12,14,.72);color:var(--parchment-dim);font-size:11.5px}.wmap-controls label{display:inline-flex;align-items:center;gap:6px}.wmap-controls input[type=checkbox]{accent-color:var(--gold)}.wmap-toggle,.wmap-type-filters label{padding:6px 8px;border:1px solid rgba(201,154,63,.25);border-radius:6px;background:rgba(255,255,255,.025)}.wmap-type-filters{display:flex;gap:5px}.wmap-monster-search{margin-left:auto}.wmap-monster-search input{width:210px;padding:7px 9px;border:1px solid var(--line-bronze);border-radius:6px;background:#0d1115;color:var(--parchment)}.wmap-reset{border:1px solid var(--line-bronze);border-radius:6px;background:rgba(201,154,63,.12);color:var(--gold-bright);padding:7px 9px;cursor:pointer}.wmap-filter-count{margin-left:auto;color:var(--parchment-faint)}.wmap-zoom-controls{display:flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid rgba(201,154,63,.25);border-radius:6px;background:rgba(255,255,255,.025)}.wmap-zoom-controls button{min-width:28px;border:1px solid rgba(201,154,63,.35);border-radius:5px;background:rgba(201,154,63,.12);color:var(--gold-bright);padding:5px 7px;cursor:pointer}.wmap-zoom-controls input[type=range]{width:110px;accent-color:var(--gold)}.wmap-zoom-controls .num{min-width:40px;text-align:right;color:var(--parchment-dim)}#sec-worldmap{max-width:none;width:100%;box-sizing:border-box}.wmap-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;gap:16px;align-items:start}.wmap-layout>div:first-child{min-width:0;width:100%}.wmap-detail{position:sticky;right:auto;top:14px;z-index:4;width:auto;max-height:min(82vh,1020px);overflow:auto;background:var(--panel);backdrop-filter:none;box-shadow:var(--shadow-deep)}.wmap-viewport{position:relative;width:100%;max-height:min(82vh,1020px);overflow:auto;border:1px solid var(--line-bronze);border-radius:12px;box-shadow:var(--shadow-deep);background:#081018}.wmap-canvas-shell{position:relative;width:1510px;height:1020px}.wmap-stage-wrap{position:absolute;left:0;top:0;width:1510px;height:1020px;transform-origin:top left;overflow:hidden;background:#081018;isolation:isolate}.wmap-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.8);z-index:0;pointer-events:none;user-select:none}.wmap-shade{position:absolute;inset:0;background:rgba(0,0,0,0.08);z-index:1;pointer-events:none}.wmap-stage-wrap svg.wmap-deco{position:absolute;inset:0;width:100%;height:100%;opacity:1;z-index:2;pointer-events:none}.wmap-stage-wrap svg.wmap-deco[hidden]{display:none}.wmap-node{all:unset;box-sizing:border-box;position:absolute;width:70px;height:70px;aspect-ratio:1/1;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 6px 6px;cursor:pointer;background:rgb(214 188 131 / var(--box-opacity,.1));color:#fff9e8;box-shadow:0 2px 7px #000b;z-index:3;overflow:visible;transition:filter .12s,transform .12s}.wmap-node::after{content:"";position:absolute;inset:-3px;background:var(--aos-worldmap-frame) center/100% 100% no-repeat;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 2px #000b);opacity:var(--frame-opacity,.7)}.wmap-node:hover{filter:brightness(1.18);transform:scale(1.05);z-index:5}.wmap-node:hover,.wmap-node.sel{background:rgb(214 188 131 / var(--box-opacity,.1));color:#fff9e8}.wmap-node[data-type=Dungeon]:hover,.wmap-node[data-type=Dungeon].sel{background:rgb(179 139 211 / var(--box-opacity,.1))}.wmap-node.sel{outline:2px solid #ffcf62;outline-offset:3px;z-index:6}.wmap-node .wmap-map-no{position:absolute;right:4px;top:3px;z-index:4;color:#fff6dc;font:700 6.5px/1 Cinzel,sans-serif;opacity:.7;text-shadow:0 1px 2px #000}.wmap-node .wmap-node-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;overflow:hidden;opacity:.7}.wmap-node .wmap-map-name{font-family:Cinzel,serif;font-weight:800;font-size:10px;line-height:1.12;overflow-wrap:anywhere;text-shadow:0 1px 2px #000,0 0 4px #000}.wmap-node .wmap-map-lvl{font:700 8.5px/1 Cinzel,sans-serif;color:#fff6dc;text-shadow:0 1px 2px #000}.wmap-node[data-type=Town]{box-shadow:0 0 12px #ffc843b8,0 3px 10px #000c}.wmap-node[data-type=Town]::after{filter:drop-shadow(0 0 4px #ffd15a) drop-shadow(0 2px 2px #000)}.wmap-node[data-type=Town]::before{content:"♜";position:absolute;left:-7px;top:-7px;z-index:6;width:18px;height:18px;display:grid;place-items:center;border:2px solid #f7c44e;border-radius:50%;background:#10222e;color:#ffe296;font:12px/1 Georgia,serif;box-shadow:0 0 6px #ffc843}.wmap-node[data-type=Town] .wmap-map-name{color:#fff0ae}.wmap-node[data-type=Town] .wmap-map-lvl{display:none}.wmap-node[data-type=Dungeon]{background:rgb(179 139 211 / var(--box-opacity,.1))}.wmap-node[hidden]{display:none}@media(max-width:1050px){.wmap-layout{grid-template-columns:1fr!important;gap:14px}.wmap-detail{position:static;width:100%;max-height:560px;background:var(--panel);backdrop-filter:none}}@media(max-width:1100px){.wmap-monster-search{width:100%;margin-left:0}.wmap-monster-search input{flex:1;width:auto}}


/* MVP artwork now has genuine alpha. Do not clip or paint a backing surface:
   this keeps its anti-aliased silhouette clean in both themes. */
#codexShell .mvp-card-icon,
#codexShell .mvp-card-icon img{background:transparent!important;border:0;box-shadow:none;clip-path:none}
#codexShell .mvp-card-icon img{filter:drop-shadow(0 2px 3px rgba(0,0,0,.34))}
body[data-theme="dark"]{
  background-color:#0e1118;
  background-image:radial-gradient(ellipse at 14% 0%,rgba(150,105,48,.18),transparent 45%),radial-gradient(ellipse at 95% 25%,rgba(48,86,119,.20),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(72,50,94,.12),transparent 55%),repeating-linear-gradient(125deg,rgba(211,184,126,.018) 0,rgba(211,184,126,.018) 1px,transparent 1px,transparent 8px);
  background-attachment:fixed;
}
body[data-theme="dark"] .spine{background:linear-gradient(165deg,#211c19 0%,#15171d 45%,#10131a 100%);border-right-color:#4c4030;box-shadow:6px 0 30px #0003}
body[data-theme="dark"] #codexShell{background:linear-gradient(145deg,#18212b,#101822 70%);border-color:#49505a;box-shadow:0 18px 55px #0005,inset 0 1px rgba(227,198,136,.12)}
body[data-theme="dark"] #codexShell .codex-side{background:linear-gradient(180deg,rgba(36,43,51,.8),rgba(15,23,32,.92))}
body[data-theme="dark"] #codexShell .ic-topbar{background:linear-gradient(105deg,#2b2822,#1b2732 55%,#17212c);border-bottom-color:#5b4c34;box-shadow:inset 0 1px rgba(232,205,151,.1)}
body[data-theme="dark"] #codexShell .codex-main{background-image:radial-gradient(ellipse at 100% 0%,rgba(174,133,63,.065),transparent 60%)}
/* Decorative parchment layer only. It intentionally does not change the
   database grids, columns, card sizing, or visible data. */
.site-logo{display:block;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none}
.site-logo-spine{width:min(118px,72%);height:auto;margin:0 auto 12px;filter:drop-shadow(0 5px 9px rgba(0,0,0,.18))}
.site-logo-cover{width:clamp(150px,18vw,215px);height:auto;margin:0 auto 18px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.20))}
.site-logo-topbar{width:48px;height:48px;border-radius:50%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
body[data-theme="light"] .site-logo{mix-blend-mode:multiply;filter:contrast(1.04) saturate(.88) drop-shadow(0 5px 9px rgba(89,61,27,.15))}
body[data-theme="light"] .site-logo-cover{filter:contrast(1.04) saturate(.88) drop-shadow(0 8px 16px rgba(89,61,27,.16))}
body[data-theme="light"] .site-logo-topbar{filter:contrast(1.05) saturate(.9) drop-shadow(0 3px 5px rgba(89,61,27,.14))}
body[data-theme="light"]{
  --ink-void:#eee5d2;
  --ink-panel:#fbf6e9;
  --ink-panel-2:#f5eddd;
  --ink-panel-3:#eee2ce;
  --line-bronze:#c8b187;
  --line-bronze-soft:#dfd0b3;
  --parchment:#403529;
  --parchment-dim:#756752;
  --parchment-faint:#9a896d;
  --gold:#a7782c;
  --gold-soft:#c29a52;
  --ic-navy:#f2ead9;
  --ic-navy2:#eadfc9;
  --ic-gold:#a7782c;
  --ic-ink:#3d3327;
  --ic-muted:#786a57;
  --ic-line:#cdbb98;
  --ic-rowline:#e2d5bd;
  --ic-paper:#fffaf0;
  --ic-canvas:#f1e8d7;
  color:#403529;
  background-color:#eee5d2;
  background-image:
    radial-gradient(circle at 16% 8%,rgba(255,255,255,.78),transparent 34%),
    radial-gradient(circle at 84% 15%,rgba(193,157,92,.10),transparent 30%),
    repeating-linear-gradient(0deg,rgba(112,78,35,.018) 0,rgba(112,78,35,.018) 1px,transparent 1px,transparent 4px),
    linear-gradient(135deg,#f5eedf 0%,#ece1cd 55%,#f4ecdc 100%);
}
body[data-theme="light"] .spine{
  background:
    linear-gradient(90deg,rgba(151,112,50,.08),transparent 4%,transparent 96%,rgba(151,112,50,.08)),
    linear-gradient(#fbf7ec,#efe4d0);
  border-right-color:#c9b58f;
  box-shadow:4px 0 20px rgba(76,54,27,.09);
}
body[data-theme="light"] #codexShell{
  position:relative;
  border:1px solid #c6ae82;
  background:
    radial-gradient(circle at 7% 3%,rgba(255,255,255,.8),transparent 28%),
    repeating-linear-gradient(90deg,rgba(109,74,27,.016) 0,rgba(109,74,27,.016) 1px,transparent 1px,transparent 5px),
    #f3ead9;
  box-shadow:0 14px 42px rgba(71,50,23,.14),inset 0 0 0 4px rgba(255,252,244,.7),inset 0 0 0 5px rgba(167,120,44,.22);
}
body[data-theme="light"] #codexShell::before,
body[data-theme="light"] #codexShell::after{
  content:'❦';position:absolute;z-index:4;color:#a7782c;font-family:serif;font-size:17px;line-height:1;pointer-events:none
}
body[data-theme="light"] #codexShell::before{top:7px;left:10px}
body[data-theme="light"] #codexShell::after{right:10px;bottom:7px;transform:rotate(180deg)}
body[data-theme="light"] #codexShell .ic-topbar{
  color:#3e3326;
  border-bottom:1px solid #c9b58e;
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.9),transparent 37%),
    linear-gradient(180deg,#fffaf0,#eee2cc);
  box-shadow:0 4px 14px rgba(73,51,23,.10),inset 0 -1px rgba(255,255,255,.7);
}
body[data-theme="light"] #codexShell .ic-topbar::after{
  content:'◇  ✦  ◇';color:#ad8138;font-size:10px;letter-spacing:7px;opacity:.85
}
body[data-theme="light"] #codexShell .ic-side{
  background:linear-gradient(180deg,rgba(255,251,241,.96),rgba(239,229,210,.96));
  border-right-color:#cfbd9b;
  box-shadow:inset -5px 0 15px rgba(95,67,31,.045);
}
body[data-theme="light"] #codexShell input,
body[data-theme="light"] #codexShell select{
  color:#44372a;background:rgba(255,252,244,.88);border-color:#cdbb98;
  box-shadow:inset 0 1px 2px rgba(75,51,22,.06)
}
body[data-theme="light"] #codexShell .mdb-toolbar{
  border-color:#cbb58c;
  background:linear-gradient(180deg,rgba(255,251,241,.94),rgba(242,232,214,.94));
  box-shadow:0 4px 14px rgba(72,50,23,.08),inset 0 0 0 1px rgba(255,255,255,.65)
}
body[data-theme="light"] #codexShell .mdb-paneltitle{
  color:#59442b;letter-spacing:.055em
}
body[data-theme="light"] #codexShell .mdb-paneltitle::before{content:'✦';color:#a7782c;font-size:.82em}
body[data-theme="light"] #codexShell .mdb-card{
  position:relative;
  border-color:#cdb890;
  background:
    radial-gradient(circle at 10% 5%,rgba(255,255,255,.82),transparent 33%),
    linear-gradient(135deg,#fffaf0,#f7eedf);
  box-shadow:0 5px 16px rgba(67,47,23,.09),inset 0 0 0 2px rgba(255,255,255,.48)
}
body[data-theme="light"] #codexShell .mdb-card::before,
body[data-theme="light"] #codexShell .mdb-card::after{
  content:'◇';position:absolute;color:#b28845;font-size:9px;opacity:.7;pointer-events:none
}
body[data-theme="light"] #codexShell .mdb-card::before{top:5px;left:7px}
body[data-theme="light"] #codexShell .mdb-card::after{right:7px;bottom:5px}
body[data-theme="light"] #codexShell .mdb-card:hover{
  border-color:#a7782c;box-shadow:0 10px 25px rgba(67,47,23,.15),inset 0 0 0 2px rgba(255,255,255,.62)
}
body[data-theme="light"] #codexShell .mdb-art{
  border-color:#cbb58b;
  background:
    radial-gradient(circle,rgba(255,255,255,.78),transparent 66%),
    repeating-linear-gradient(45deg,rgba(151,113,54,.025) 0,rgba(151,113,54,.025) 2px,transparent 2px,transparent 6px),
    #f3ead8;
  box-shadow:inset 0 0 0 3px rgba(255,250,239,.72)
}
body[data-theme="light"] #codexShell .mdb-stat,
body[data-theme="light"] #codexShell .mdb-reward,
body[data-theme="light"] #codexShell .mdb-attribute,
body[data-theme="light"] #codexShell .mdb-location,
body[data-theme="light"] #codexShell .mdb-affinitycell,
body[data-theme="light"] #codexShell .mdb-carddrop{
  background:rgba(248,240,224,.72);border-color:#ded0b5
}
body[data-theme="light"] #codexShell .mdb-carddrop span::before{content:'◇ ';color:#a7782c;font-size:8px}
body[data-theme="light"] #codexShell .mdb-location::before{content:'⌖ ';color:#a7782c}
body[data-theme="light"] #codexShell dialog{
  color:#403529;border-color:#bda474;
  background:linear-gradient(145deg,#fffaf0,#eee1c9);
  box-shadow:0 24px 80px rgba(49,34,17,.32),inset 0 0 0 4px rgba(255,252,245,.65),inset 0 0 0 5px rgba(167,120,44,.22)
}
body[data-theme="light"] #codexShell dialog::backdrop{background:rgba(57,43,28,.42);backdrop-filter:blur(2px)}