:root{
    /* Black theme. The previous navy palette, to switch back:
       --bg:#0b0e1a; --bg-elevated:#101528; --surface:#161d34; --surface-2:#1b2340;
       --surface-hover:#212a4c; --border:#2a3358; (and the #17204a / #16204a glows below) */
    --bg:#000;
    --bg-elevated:#07070b;
    --surface:#101117;
    --surface-2:#171822;
    --surface-hover:#1e2030;
    --border:#272a3b;
    --text:#e9e8f4;
    --text-dim:#9aa1c4;
    --text-faint:#848cb2;
    --accent:#e3b341;
    --accent-dim:#8a712c;
    --accent-2:#7c9eff;
    --accent-purple:#a97cf0;
    --danger:#ef6a6a;
    --radius:14px;
    --radius-sm:8px;
    --brand-grad:linear-gradient(120deg, var(--accent), #c9a6f5);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(900px 620px at 12% -8%, rgba(96,112,230,.10) 0%, transparent 60%),
      radial-gradient(700px 500px at 100% 0%, rgba(169,124,240,.12) 0%, transparent 55%),
      var(--bg) fixed;
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  button, select, input{ font-family:inherit; }
  #app{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* ---------- header ---------- */
  header.topbar{
    position:sticky;top:0;z-index:20;
    background:
      radial-gradient(360px 140px at 15% 0%, rgba(169,124,240,.18), transparent 70%),
      linear-gradient(180deg, rgba(0,0,0,.97), rgba(0,0,0,.88));
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
    padding:10px 14px 0 14px;
  }
  .topbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
  .brand{
    font-family:'Exo 2',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:23px;font-weight:300;margin:0;letter-spacing:.5px;cursor:pointer;
  }
  .brand .t-cosmic{color:#f3f2fb;}
  .brand .t-archive{color:var(--accent-purple);text-shadow:0 0 16px rgba(169,124,240,.4);}
  /* Was a dotted underline by default (an unstyled affordance hint left
     over from an earlier pass) — with no matching "tap to expand" cue
     nearby it just read as a stray line under a header nobody asked to
     interact with. Plain caption text instead. */
  .brand small{display:block;font-size:10.5px;font-weight:500;color:var(--text-faint);
    background:none;-webkit-text-fill-color:var(--text-faint);letter-spacing:.4px;margin-top:1px;}
  .topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .iconbtn{
    width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);color:var(--text-dim);font-size:16px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .15s ease, color .15s ease, border-color .15s ease;
  }
  .iconbtn:active{transform:scale(.92);}
  .iconbtn.spinning{color:var(--accent-2);}
  .iconbtn .ico{display:inline-block;line-height:1;}
  .iconbtn.spinning .ico{animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .searchRow{margin-bottom:8px;}
  .searchRow input{
    width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--border);
    background:var(--surface);color:var(--text);font-size:14.5px;outline:none;
    transition:border-color .15s ease;
  }
  .searchRow input:focus{border-color:var(--accent-2);}
  .searchRow input::placeholder{color:var(--text-faint);}

  /* The bar grows downward: tabs wrap onto extra rows instead of the bar scrolling.
     (It used to scroll sideways on a phone, and the tabs' enlarged tap areas also made
     it wobble up and down.) */
  nav.tabs{
    position:relative;display:flex;flex-wrap:wrap;gap:2px;padding:4px;margin-bottom:10px;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
  }
  /* Size and position are copied from the active tab's box (script.js), so the pill
     can land on any row. */
  .tab-indicator{
    position:absolute;top:0;left:0;width:0;height:0;
    background:var(--brand-grad);
    border-radius:11px;z-index:0;
  }
  .tab-indicator.ready{
    transition:transform .32s cubic-bezier(.22,1,.36,1), width .32s cubic-bezier(.22,1,.36,1), height .32s cubic-bezier(.22,1,.36,1);
  }
  .tab{
    position:relative;z-index:1;
    flex:1 1 0;min-width:0;padding:8px 2px;border-radius:11px;border:none;
    background:transparent;color:var(--text-dim);font-size:10px;line-height:1.2;font-weight:600;
    cursor:pointer;white-space:normal;text-align:center;overflow-wrap:anywhere;
    transition:color .2s ease;
  }
  .tab.active{color:#241c04;}

  /* ---------- content / grid ---------- */
  main#content{flex:1;padding:14px;}

  #filterBar{margin-bottom:12px;}
  .filter-toggle{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--surface);border:1px solid var(--border);border-radius:999px;
    color:var(--text-dim);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 12px;
    transition:border-color .15s ease, color .15s ease;
  }
  .filter-toggle:hover{color:var(--text);border-color:var(--accent-dim);}
  #filterCount{
    background:var(--accent-2);color:#0b0e1a;font-size:10px;font-weight:800;
    border-radius:999px;padding:1px 6px;min-width:14px;text-align:center;display:none;
  }
  #filterCount.show{display:inline-block;}
  /* The height runs through a 0fr -> 1fr grid row, so it follows the panel's real
     height from the first frame to the last (a max-height guess finishes early and
     reads as a snap). */
  #filterCaret{display:inline-block;font-size:11px;transition:transform .35s cubic-bezier(.22,.8,.26,1);}
  .filter-toggle.open #filterCaret{transform:rotate(180deg);}
  .filter-panel{
    display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;margin-top:0;
    transition:grid-template-rows .42s cubic-bezier(.22,.8,.26,1), opacity .3s ease,
               margin-top .42s cubic-bezier(.22,.8,.26,1), visibility 0s linear .42s;
  }
  .filter-panel.open{
    grid-template-rows:1fr;opacity:1;visibility:visible;margin-top:10px;transition-delay:0s;
  }
  .filter-panel-inner{
    min-height:0;overflow:hidden;transform:translateY(-8px);
    transition:transform .42s cubic-bezier(.22,.8,.26,1);
  }
  .filter-panel.open .filter-panel-inner{transform:none;}
  @media (prefers-reduced-motion:reduce){
    .filter-panel,.filter-panel-inner,#filterCaret{transition-duration:.01s;transition-delay:0s;}
  }
  .filter-group{margin-bottom:10px;}
  .filter-group.hidden{display:none;}
  .filter-label{font-size:11px;letter-spacing:.5px;color:var(--text-faint);margin-bottom:6px;font-weight:700;}
  .filter-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .fchip{
    display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
    border:1px solid var(--border);background:var(--surface);color:var(--text-dim);
    font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s ease, color .15s ease;
  }
  .fchip.active{background:var(--accent-2);border-color:var(--accent-2);color:#0b0e1a;}
  .grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;
  }
  .card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:8px;cursor:pointer;text-align:center;position:relative;
    transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  }
  .card:active{transform:scale(.96);}
  .card.r5{border-color:rgba(227,179,65,.4);box-shadow:inset 0 0 0 1px rgba(227,179,65,.35);}
  .card.r5 .thumb{background:radial-gradient(circle at 50% 30%, rgba(227,179,65,.28), rgba(227,179,65,.04) 70%);}
  .card.r4{border-color:rgba(124,158,255,.28);}
  .card.r4 .thumb{background:radial-gradient(circle at 50% 30%, rgba(124,158,255,.20), rgba(124,158,255,.03) 70%);}
  .thumb{
    width:100%;aspect-ratio:1/1;border-radius:10px;margin-bottom:6px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:var(--surface-2);
  }
  .thumb img{width:90%;height:90%;object-fit:contain;}
  .thumb img.img-error{opacity:0;}
  .card-name{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .card-stars{font-size:9.5px;color:var(--accent);margin-top:2px;letter-spacing:1px;}
  .card-stars + .card-stars{font-size:10.5px;}
  .beta-chip{
    position:absolute;top:4px;right:4px;background:var(--accent-2);color:#0b0e1a;
    font-size:8px;font-weight:800;padding:1.5px 4px;border-radius:5px;letter-spacing:.3px;
  }
  .element-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px;vertical-align:middle;}
  .element-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:4px;vertical-align:middle;flex-shrink:0;}
  .element-icon svg, .element-icon img{width:15px;height:15px;display:block;object-fit:contain;}
  .element-icon.lg svg, .element-icon.lg img{width:20px;height:20px;}

  @media (hover:hover) and (pointer:fine){
    .card:hover{border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.6);}
    .card.r5:hover{box-shadow:inset 0 0 0 1px rgba(227,179,65,.5), 0 10px 26px -12px rgba(227,179,65,.25);}
  }

  .state-msg{
    text-align:center;color:var(--text-dim);padding:40px 20px;font-size:14px;
  }
  .state-msg .big{font-size:28px;display:block;margin-bottom:8px;}
  .retry-btn{
    margin-top:12px;padding:9px 18px;border-radius:10px;border:1px solid var(--accent-2);
    background:transparent;color:var(--accent-2);font-weight:600;font-size:13.5px;cursor:pointer;
  }
  .spinner{
    width:26px;height:26px;border-radius:50%;border:3px solid var(--border);
    border-top-color:var(--accent-2);animation:spin .7s linear infinite;margin:30px auto;
  }

  footer.foot{padding:18px 14px 26px;text-align:center;color:var(--text-faint);font-size:11px;}
  footer.foot a{color:var(--text-faint);}

  /* ---------- overlay / detail ---------- */
  .overlay{
    position:fixed;inset:0;background:var(--bg);z-index:50;
    display:flex;flex-direction:column;transform:translateY(8px);opacity:0;
    transition:transform .18s ease, opacity .18s ease;pointer-events:none;
  }
  .overlay.show{transform:translateY(0);opacity:1;pointer-events:auto;}
  .overlay-inner{max-width:640px;width:100%;margin:0 auto;height:100%;display:flex;flex-direction:column;overflow:hidden;}
  .overlay-head{
    display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
    background:var(--bg-elevated);flex-shrink:0;
  }
  .backBtn{
    background:var(--surface);border:1px solid var(--border);color:var(--text);
    border-radius:10px;padding:8px 12px;font-size:13.5px;font-weight:600;cursor:pointer;flex-shrink:0;
  }
  .overlay-head .oh-title{font-size:14px;font-weight:700;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #detailBody{flex:1;overflow-y:auto;padding:0 0 30px;}

  .dh{padding:20px 16px 14px;display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--border);}
  .dh-thumb{width:84px;height:84px;border-radius:16px;background:var(--surface-2);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .dh-thumb img{width:92%;height:92%;object-fit:contain;}
  .dh-thumb img.thumb-top{object-fit:cover;object-position:center 15%;}
  .dh-name{font-size:19px;font-weight:800;margin:0 0 4px;}
  .dh-stars{color:var(--accent);font-size:13px;letter-spacing:1.5px;margin-bottom:6px;}
  .badges{display:flex;flex-wrap:wrap;gap:5px;}
  .badge{
    font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
    background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);
    display:inline-flex;align-items:center;
  }

  .splash-wrap{position:relative;margin:14px 16px 0;border-radius:16px;overflow:hidden;
    background:transparent;line-height:0;
    box-shadow:0 18px 36px -16px var(--ring,transparent);}
  .splash-wrap img{width:100%;aspect-ratio:1/.86;max-height:420px;object-fit:cover;object-position:50% 36%;display:block;}
  /* The frame's 1px outline used to be an outer box-shadow ring. On a phone the tab row sits directly under the art and
     has an opaque background (z-index 6), so it painted over the ring's bottom edge and the frame looked cut off there.
     The outline is now an overlay inside the art's own box, above the image, so all four sides (and the rounded
     corners) always show - nothing next to the art can cover it. */
  .splash-wrap::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ring,transparent);pointer-events:none;}
  .splash-top{position:absolute;left:0;right:0;top:0;height:70px;
    background:linear-gradient(180deg, var(--ring,transparent), rgba(0,0,0,0));
    opacity:.35;pointer-events:none;}

  /* padding matches .dh/.splash-wrap's 16px side inset (was 14px) so this
     row's edges line up with the image and header above it instead of
     sitting 2px off; align-items+white-space keep every pill the same
     single-line height so the row can't go lopsided if a label is ever
     longer than the rest. */
  /* padding matches .dh/.splash-wrap's 16px side inset (was 14px) so this
     row's edges line up with the image and header above it instead of
     sitting 2px off; align-items+white-space keep every pill the same
     single-line height so the row can't go lopsided if a label is ever
     longer than the rest. mask-image fades the last ~28px to transparent
     whenever the row overflows, so a tab cut off mid-word at the viewport
     edge (e.g. "Messages") reads as "more to scroll" instead of looking
     like it was clipped by a layout bug. */
  .subtabs{display:flex;align-items:center;gap:6px;padding:22px 16px 12px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
  .subtabs::-webkit-scrollbar{display:none;}
  .subtab{
    flex:0 0 auto;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
    white-space:nowrap;
    border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .subtab.active{background:var(--surface-2);color:var(--accent-2);border-color:var(--accent-2);}

  .sec{margin:12px 14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
  /* No text-transform:uppercase: this page runs lang="tr", and the browser's
     Turkish uppercasing rule turns a lowercase "i" into "İ" — so CSS-only
     capitalization was rendering these English labels as "PROFİLE",
     "VOİCE ACTORS" etc. Written in real title case instead, so the label is
     correct wherever it's read from. A small gradient tick before the label
     (the same two-tone gradient as the tab indicator/brand wordmark) gives
     every section a consistent, branded starting point instead of the
     label just floating at the card's top edge. */
  .sec h3{font-size:12.5px;letter-spacing:.6px;color:var(--text-faint);
    margin:0 0 10px;font-weight:700;display:flex;align-items:center;gap:7px;}
  .sec h3::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--brand-grad);flex-shrink:0;}
  .lore{font-size:13.5px;color:var(--text-dim);white-space:pre-line;}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .chips.chips-full{flex-direction:column;}
  .chip{font-size:11.5px;background:var(--surface);border:1px solid var(--border);
    color:var(--text-dim);padding:4px 9px;border-radius:8px;}
  .chips-full .chip{width:100%;box-sizing:border-box;}

  .memo-header{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:12px;margin-bottom:10px;}
  .dyn-val{color:var(--accent);font-weight:700;}
  .head-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
  .lvl-ctrl{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .lvl-btn{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);
    color:var(--text);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .lvl-val{font-size:12px;color:var(--accent-2);font-weight:700;min-width:34px;text-align:center;}
  /* A level only reachable with a specific Eidolon (e.g. Memosprite Skill's
     Lv.7, one past its Lv.6 base) — same gold-to-purple gradient as the tab
     indicator, so "needs Eidolon" reads as a distinct, branded state rather
     than a color picked just for this one label. */
  .lvl-val.eidolon-lvl{
    color:var(--accent-2);
    background:linear-gradient(120deg, var(--accent), #c9a6f5);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .copy-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);
    color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
    transition:color .15s ease, border-color .15s ease;}
  .copy-btn svg{width:14px;height:14px;}
  .copy-btn:active{transform:scale(.9);}
  .copy-btn:hover{color:var(--accent-2);border-color:var(--accent-2);}

  .trace-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);}
  .trace-row:last-child{border-bottom:none;}
  .trace-icon{width:32px;height:32px;border-radius:8px;background:var(--surface-2);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .trace-icon img{width:78%;height:78%;object-fit:contain;}
  .trace-name{font-size:13px;font-weight:700;}
  .trace-desc{font-size:12px;color:var(--text-dim);margin-top:2px;}
  .trace-lock{font-size:10.5px;color:var(--text-faint);margin-top:2px;}
  .stat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
  .stat-tag{font-size:10.5px;background:var(--surface-2);color:var(--accent-2);padding:2px 7px;border-radius:6px;}

  .eido-card{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
  .eido-card:last-child{border-bottom:none;}
  .eido-emblem{position:relative;width:52px;height:52px;flex-shrink:0;margin-top:2px;border-radius:50%;
    background:radial-gradient(circle at 50% 32%, var(--el-a, rgba(124,158,255,.55)), var(--el-b, rgba(124,158,255,.16)) 74%), var(--surface-2);
    box-shadow:0 0 0 1.5px var(--el-a, var(--accent-dim)), 0 0 14px var(--el-b, transparent);}
  .eido-emblem img{display:block;width:100%;height:100%;padding:11px;box-sizing:border-box;object-fit:contain;
    filter:brightness(1.3) drop-shadow(0 0 3px rgba(255,255,255,.35));}
  .eido-emblem b{position:absolute;right:-6px;bottom:-4px;min-width:23px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;
    background:var(--surface);border:1px solid var(--accent-dim);color:var(--accent);font-size:10.5px;font-weight:800;
    display:flex;align-items:center;justify-content:center;}
  .eido-sks{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
  .eido-sk{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);background:var(--surface-2);
    border:1px solid var(--border);border-radius:999px;padding:2px 8px 2px 3px;}
  .eido-sk img{width:20px;height:20px;padding:2px;box-sizing:border-box;border-radius:50%;background:#0b0c12;object-fit:contain;}
  .eido-sk b{color:var(--accent);font-weight:800;}
  .eido-body{flex:1;min-width:0;}

  table.stat-table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px;}
  table.stat-table th,table.stat-table td{padding:6px 7px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
  table.stat-table th:first-child,table.stat-table td:first-child{text-align:left;color:var(--text-faint);}
  .stat-table-wrap{overflow-x:auto;}
  table.stat-table th{color:var(--text-faint);font-weight:600;}

  .mat-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
  .mat-pill{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
    border-radius:10px;padding:5px 9px 5px 5px;}
  .mat-pill img{width:26px;height:26px;object-fit:contain;border-radius:6px;background:var(--surface-2);}
  .mat-pill span{font-size:11.5px;color:var(--text-dim);}
  .mat-pill b{color:var(--accent);}

  /* From/To range control shared by every materials calculator (Ascension
     Materials, and each main skill's own leveling cost below) — two
     [-][N][+] steppers either side of an arrow. */
  .range-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px;}
  .range-unit-label{font-size:11.5px;color:var(--text-faint);font-weight:600;}
  .range-arrow{color:var(--text-faint);font-size:13px;}
  /* A skill's own materials calculator, nested inside its trace-row below
     the description. Wrapped in <details> (see skillRowHTML) so it starts
     collapsed — it used to live on its own separate "Materials" tab, split
     from the description it's the cost of; folding it back into the same
     row, just closed by default, keeps them one tap apart either way
     without the Talent tab turning back into a wall of text. */
  .mat-block{margin-top:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
  .mat-block summary{display:flex;align-items:center;gap:6px;padding:10px 12px;cursor:pointer;user-select:none;
    font-size:11.5px;color:var(--text-faint);font-weight:600;letter-spacing:.3px;}
  .mat-block summary::-webkit-details-marker{display:none;}
  .mat-block summary::before{content:'▸';font-size:9px;color:var(--text-faint);transition:transform .15s ease;}
  .mat-block[open] summary::before{transform:rotate(90deg);}
  .mat-block[open] summary{border-bottom:1px solid var(--border);}
  .mat-block-body{padding:10px 12px 12px;}
  /* Delta row: the calculator's actual answer (what the current From->To
     span still needs), so its label reads a size up from — and brighter
     than — Total's underneath it. It used to have no label at all, which
     left it looking like an inert duplicate of Total rather than a figure
     that responds to the range control above it. */
  .mat-delta-label{display:block;font-size:12px;color:var(--text-dim);font-weight:700;margin-bottom:2px;}
  /* Total row: a lighter-weight echo of .mat-list below the delta pills — a
     thin top divider plus a smaller, dimmer label keep it read as a
     secondary reference figure rather than a second, equally-weighted list. */
  .mat-total-row{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
  .mat-total-label{font-size:11px;color:var(--text-faint);font-weight:600;}
  .mat-total-list{margin-top:6px;opacity:.8;}
  .mat-total-list .mat-pill{padding:4px 8px 4px 4px;}
  .mat-total-list .mat-pill img{width:20px;height:20px;}

  .setpc-h{font-size:12.5px;font-weight:800;color:var(--accent-2);margin-bottom:4px;}
  .relic-piece{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
  .relic-piece:last-child{border-bottom:none;}

  .toast{
    position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
    background:#241c04;color:var(--accent);border:1px solid var(--accent-dim);
    padding:9px 16px;border-radius:10px;font-size:13px;font-weight:600;z-index:100;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
  .hidden{display:none !important;}

  @media (min-width:520px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
  }

  /* ---------- desktop layout ----------
     Below this width the app stays the single mobile-style column, just
     centered — a fine, calm reading width. Above it, this goes considerably
     further than the previous pass (which only reworked the character
     detail page): a real screenshot-driven sweep of every view (grid, both
     detail layouts) turned up three concrete issues fixed here — (1) the
     category tab bar was the same tight mobile pill row just stretched
     across a much wider bar, leaving huge dead gaps between labels; (2) the
     grid kept its mobile card size, so a wide monitor just showed the same
     small cards with more empty margin, not a layout that used the space;
     (3) the sticky splash art had a real bug, not just a plainness issue —
     .splash-wrap is a grid item sharing its row with the (much taller) tab
     content next to it, and a grid item's default cross-axis stretch made
     the wrapper's own box grow to match that height while the <img> inside
     capped out at max-height, leaving its plain background color exposed
     as a dead gap below the art. align-self:start below is the fix — the
     wrapper now sizes to its own content, and *then* sticks correctly. */
  @media (min-width:880px){
    body{
      background:
        radial-gradient(1100px 760px at 18% -12%, rgba(96,112,230,.10) 0%, transparent 60%),
        radial-gradient(760px 620px at 100% -6%, rgba(169,124,240,.14) 0%, transparent 55%),
        var(--bg);
    }
    #app{max-width:1280px;}
    .overlay-inner{max-width:1280px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px;}
    .card{padding:12px;border-radius:14px;}
    .card-name{font-size:13px;}

    /* The mobile bar is a tight pill strip built for ~5 short labels in a
       390px window; stretched across a desktop-width bar it just left huge
       gaps between labels with nothing to anchor them. An underlined row
       (the same language the character-detail subtabs already use one
       level down) reads as a real desktop nav instead of an enlarged mobile
       control, and stays left-aligned instead of spreading to fill the bar. */
    nav.tabs{
      background:none;border:none;border-radius:0;
      padding:0;margin-bottom:0;gap:10px 28px;justify-content:flex-start;
    }
    .tab-indicator{display:none;}
    .tab{
      flex:0 0 auto;padding:0 0 14px;margin-bottom:-1px;font-size:14px;color:var(--text-dim);
      border-bottom:2px solid transparent;border-radius:0;
    }
    .tab.active{color:var(--text);border-bottom-color:var(--accent-purple);background:none;}
    .tab:not(.active):hover{color:var(--text);}

    /* Shared by every detail type (dhHeader() renders the same markup for
       characters/light cones/relics/items) so this only needs saying once. */
    #detailBody .dh-name{
      font-family:'Exo 2',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      font-weight:600;font-size:26px;letter-spacing:.2px;margin:0 0 6px;
    }
    #detailBody .dh-thumb{width:72px;height:72px;}
    table.stat-table th,table.stat-table td{padding:9px 12px;}
    table.stat-table tr:nth-child(even){background:rgba(255,255,255,.025);}
    .mat-pill{padding:6px 12px 6px 6px;}
    .mat-pill img{width:30px;height:30px;}

    /* Light Cone/Relic/Planar/Material details have no splash art and so
       never enter the two-column grid below. A calm centered column (not
       the character page's two-column treatment: their icon is a small
       square, not a hero image, so mirroring that layout would leave an
       almost-empty left rail) but a size up from the plain mobile stack —
       bigger icon, name matched to the character page's, cards a touch
       roomier — so it doesn't read as a lesser, unfinished page next to it. */
    #detailBody:not(:has(.splash-wrap)){max-width:820px;margin:0 auto;padding:28px 26px 48px;}
    #detailBody:not(:has(.splash-wrap)) .dh{padding:0 0 22px;border-bottom:1px solid var(--border);margin-bottom:22px;align-items:center;}
    #detailBody:not(:has(.splash-wrap)) .dh-thumb{width:96px;height:96px;border-radius:18px;}
    #detailBody:not(:has(.splash-wrap)) .sec{margin:0 0 18px;padding:20px 24px;border-radius:16px;}
    #detailBody:not(:has(.splash-wrap)) .sec:last-child{margin-bottom:0;}

    /* The hero name below now carries the title, so on the character page
       specifically the hairline bar read as a second, competing header —
       dropped the duplicate label and the bar's own chrome so the back
       button just floats on the same cosmic backdrop as everything below. */
    .overlay-inner:has(.splash-wrap) .overlay-head{background:transparent;border-bottom:none;padding:18px 26px 0;}
    .overlay-inner:has(.splash-wrap) .oh-title{display:none;}

    /* ---- character detail: two-column hero layout ---- */
    #detailBody:has(.splash-wrap){
      display:grid;grid-template-columns:340px 1fr;gap:14px 32px;
      align-content:start;padding:14px 26px 48px;
    }
    #detailBody:has(.splash-wrap) > .dh{grid-column:1;grid-row:1;padding:2px 2px 0;border-bottom:none;align-items:flex-start;}
    #detailBody:has(.splash-wrap) > .splash-wrap{
      grid-column:1;grid-row:2;margin:0;position:sticky;top:20px;align-self:start;border-radius:20px;
      box-shadow:0 30px 60px -22px var(--ring,transparent), 0 10px 30px rgba(0,0,0,.4);
    }
    #detailBody:has(.splash-wrap) > .splash-wrap img{max-height:480px;}
    #detailBody:has(.splash-wrap) > .subtabs{
      grid-column:2;grid-row:1;align-self:end;padding:8px 0 0;margin:0;gap:22px;
      border-bottom:1px solid var(--border);overflow-x:visible;
      -webkit-mask-image:none;mask-image:none;
    }
    #detailBody:has(.splash-wrap) > .subtabs .subtab{
      flex:0 0 auto;padding:0 0 12px;margin-bottom:-1px;border-radius:0;background:transparent;
      color:var(--text-dim);font-size:14px;border:none;border-bottom:2px solid transparent;
      transition:color .15s ease, border-color .15s ease;
    }
    #detailBody:has(.splash-wrap) > .subtabs .subtab:not(.active):hover{color:var(--text);}
    #detailBody:has(.splash-wrap) > .subtabs .subtab.active{
      background:transparent;color:var(--text);border-bottom-color:var(--accent-purple);
    }
    #detailBody:has(.splash-wrap) > div[id$="Mount"]{grid-column:2;grid-row:2;}

    /* See the block comment above — this is the alignment fix. */
    #detailBody:has(.splash-wrap) .sec{margin:0 0 18px;padding:20px 24px;border-radius:18px;}
    #detailBody:has(.splash-wrap) .sec:last-child{margin-bottom:0;}

    /* Profile reads as the page's opening line, not another data card —
       every other section here stays a functional card, so this is the
       one place that's allowed to look different. */
    #detailBody:has(.splash-wrap) .sec:has(> .lore){background:none;border:none;padding:2px 2px 6px;}
    #detailBody:has(.splash-wrap) .sec:has(> .lore) h3::before{display:none;}
    #detailBody:has(.splash-wrap) .sec:has(> .lore) .lore{font-size:15.5px;line-height:1.65;max-width:62ch;color:var(--text);}
  }

  @media (min-width:1400px){
    #app{max-width:1440px;}
    .overlay-inner{max-width:1440px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;}
  }

/* ---- usability additions (nothing here changes the default look) ---- */
:root{color-scheme:dark;}
html{scrollbar-gutter:stable;}
.card:focus-visible,.tab:focus-visible,.subtab:focus-visible,.fchip:focus-visible,.backBtn:focus-visible,.iconbtn:focus-visible,.lvl-btn:focus-visible,.copy-btn:focus-visible{
  outline:2px solid var(--accent-purple);outline-offset:2px;}
@media (pointer:coarse){
  /* bigger invisible hit areas for thumbs; the buttons look exactly the same */
  .tab,.subtab,.lvl-btn,.copy-btn,.fchip{position:relative;}
  .tab::after,.subtab::after{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px;}
  /* Wrapped rows sit only 2px apart, so a taller tap zone would overlap the row above
     or below and steal its taps. Just fill the gap instead. */
  nav.tabs .tab::after{left:-1px;right:-1px;top:-1px;bottom:-1px;}
  .lvl-btn::after,.copy-btn::after,.fchip::after{content:'';position:absolute;inset:-7px;}
  .searchRow input{font-size:16px;} /* stops iOS zooming in on focus, so pinch-zoom can stay enabled */
}
@media (max-width:879px){
  /* the tab row follows you down a long character page instead of scrolling away */
  #detailBody > .subtabs{position:sticky;top:-12px;z-index:6;background:var(--bg);}
}
@media (max-height:500px) and (orientation:landscape){
  header.topbar{position:static;} /* a sticky header would eat ~40% of a sideways phone screen */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .spinner,.iconbtn.spinning .ico{animation-duration:.9s !important;animation-iteration-count:infinite !important;}
}

/* ---- bonus traces: one total per stat, each opens to show the traces behind it ---- */
.bstat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;}
.bstat summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;}
.bstat summary::-webkit-details-marker{display:none;}
.bstat-name{flex:1;min-width:0;font-weight:600;font-size:14px;}
.bstat-n{font-size:11.5px;color:var(--text-faint);}
.bstat-total{font-weight:700;color:var(--accent);font-size:14.5px;min-width:56px;text-align:right;}
.bstat-chev{color:var(--text-faint);font-size:18px;line-height:1;transition:transform .2s;}
.bstat[open] .bstat-chev{transform:rotate(90deg);}
.bstat-list{border-top:1px solid var(--border);padding:4px 14px 8px;}
.bstat-part{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px dashed var(--border);}
.bstat-part:last-child{border-bottom:none;}
.bstat-pname small{display:block;color:var(--text-faint);font-size:11.5px;margin-top:1px;}
.bstat-pval{font-weight:600;white-space:nowrap;}
@media (hover:hover) and (pointer:fine){ .bstat summary:hover{background:var(--surface-hover);} }

/* ---- extra sources: achievements, relic stats, character Build tab ---- */
.ext-head{margin:12px 14px 4px;}
.ext-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.ext-chips .fchip{flex-shrink:0;}
.ext-note{font-size:11.5px;color:var(--text-faint);margin:4px 0 2px;line-height:1.45;}
.build-src{margin:4px 16px 18px;}
.ach-list{margin:8px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
.ach{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--border);}
.ach:last-child{border-bottom:0;}
.ach-main{flex:1;min-width:0;}
.ach-title{font-weight:600;font-size:14px;overflow-wrap:anywhere;}
.ach-desc{font-size:12.5px;color:var(--text-dim);margin-top:2px;line-height:1.4;overflow-wrap:anywhere;}
.ach-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;}
.ach-hide{display:inline-block;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:1px 8px;}
.ach-cat{display:inline-block;font-size:11px;font-weight:600;color:var(--text-dim);background:var(--surface-2);border-radius:999px;padding:1px 9px;}
.ext-more{display:block;margin:10px auto 26px;}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.stat-row:last-child{border-bottom:0;}
.stat-val{color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;}
.stat-val b{color:var(--accent);font-weight:600;}
.build-label{font-size:11.5px;color:var(--text-faint);margin:10px 0 8px;}
.build-label:first-of-type{margin-top:0;}
.build-item{position:relative;}
.build-item .card{height:100%;box-sizing:border-box;}
.build-rank{position:absolute;top:6px;left:6px;z-index:2;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:var(--accent);color:#0b0e1a;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* The tabs no longer fit side by side on a phone, so the bar grows downward as a symmetric grid:
   equal-width cells (3, 4 or 6 per row depending on the screen), an unfinished last row centred,
   and labels on one line (they used to break mid-word). */
@media (max-width:879px){
  nav.tabs{justify-content:center;}
  .tab{flex:0 0 calc((100% - 4px) / 3);padding:8px 2px;white-space:nowrap;font-size:11.5px;}
}
@media (min-width:380px) and (max-width:879px){ .tab{flex-basis:calc((100% - 6px) / 4);font-size:11px;} }
@media (min-width:560px) and (max-width:879px){ .tab{flex-basis:calc((100% - 10px) / 6);} }

/* ---- trace tree ---- */
.tr-toggle{display:flex;gap:6px;margin:12px 14px 0;}
.tree-wrap{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.tree{position:relative;margin:0 auto;}
.tree svg{position:absolute;left:0;top:0;pointer-events:none;}
.tree svg path{fill:none;stroke:var(--border);stroke-width:2;}
.tnode{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;color:var(--text);font:inherit;cursor:pointer;}
.tree .tnode{position:absolute;}
.tn-icon{width:46px;height:46px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:box-shadow .2s ease;}
.tn-icon img{width:68%;height:68%;object-fit:contain;}
.tn-bonus .tn-icon{border-color:var(--accent);}
.tn-stat .tn-icon{border-color:var(--accent-2);}
.tn-skill .tn-icon{border-color:var(--accent-purple);}
.tnode.sel .tn-icon{box-shadow:0 0 0 3px rgba(124,158,255,.5);}
.tn-label{font-size:10px;line-height:1.15;color:var(--text-dim);text-align:center;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
.tn-req{font-size:9.5px;color:var(--text-faint);}
.tn-skillrow{display:flex;flex-wrap:wrap;gap:12px 10px;}
.tn-skillrow .tnode{width:62px;}
.tn-text{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin:6px 0;overflow-wrap:anywhere;}
.tn-detail h3{margin-bottom:6px;}
/* ---- endgame + enemies ---- */
.el-tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:1px 7px;margin:2px 4px 2px 0;white-space:nowrap;}
.el-tag img,.el-tag svg{width:13px;height:13px;}
.eg{margin:8px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
.eg-head{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--text);font:inherit;text-align:left;padding:12px 14px;cursor:pointer;}
.eg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.eg-name{font-weight:600;font-size:14px;overflow-wrap:anywhere;}
.eg-date{font-size:11.5px;color:var(--text-faint);}
.eg-badge{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;flex-shrink:0;}
.eg-badge.cur{background:var(--accent);color:#0b0e1a;}
.eg-badge.soon{background:var(--accent-2);color:#0b0e1a;}
.eg-caret{color:var(--text-faint);transition:transform .25s ease;flex-shrink:0;}
.eg-head.open .eg-caret,.en-row.open .eg-caret{transform:rotate(180deg);}
.eg-body{padding:2px 14px 12px;border-top:1px solid var(--border);}
.eg-rule{margin:10px 0;font-size:13px;color:var(--text-dim);line-height:1.45;}
.eg-rule>b{display:block;color:var(--text);font-size:12.5px;margin-bottom:3px;}
.eg-opt{margin:6px 0;}
.eg-opt b{display:block;color:var(--text);font-size:12.5px;}
.eg-opt span{font-size:12.5px;color:var(--text-dim);overflow-wrap:anywhere;}
.eg-stage{border:1px solid var(--border);border-radius:var(--radius-sm);margin:8px 0;background:var(--surface-2);}
.eg-stage summary{cursor:pointer;padding:9px 12px;font-weight:600;font-size:13px;list-style:none;}
.eg-stage summary::-webkit-details-marker{display:none;}
.eg-stage[open] summary{border-bottom:1px solid var(--border);}
.eg-half{padding:8px 12px;}
.eg-half-h{font-size:12px;color:var(--text-faint);margin-bottom:4px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;}
.eg-wave{margin:4px 0;padding:6px 8px;border-left:2px solid var(--accent-2);background:rgba(124,158,255,.06);border-radius:4px;}
.eg-enemy{display:inline-flex;flex-wrap:wrap;align-items:center;font-size:12.5px;margin:2px 10px 2px 0;}
.en{border-bottom:1px solid var(--border);}
.en:last-child{border-bottom:0;}
.en-row{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--text);font:inherit;text-align:left;padding:10px 14px;cursor:pointer;}
/* Name on top, weakness chips underneath. They used to sit side by side, and an enemy
   with four or more weaknesses squeezed the name into a zero-width column (one letter
   per line). */
.en-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.en-name{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.en-weak{display:flex;flex-wrap:wrap;gap:4px;}
.en-weak:empty{display:none;}
.en-weak .el-tag{margin:0;}
.en-body{padding:0 14px 12px;}
.en-line{margin:8px 0;font-size:12.5px;color:var(--text-dim);}
.en-line>b{display:block;font-size:11.5px;color:var(--text-faint);margin-bottom:2px;}

.tree .tn-label,.tree .tn-req{background:var(--surface);padding:0 3px;border-radius:3px;}
.eg-enemy{gap:2px 4px;}
.tn-hint{margin:0 0 6px;}

/* ---- trace tree on the game's own shape ---- */
.tree-wrap{overflow:hidden;padding-bottom:0;}
.tree{margin:0;border-radius:var(--radius);background:radial-gradient(circle at 50% 52%,rgba(124,158,255,.14),transparent 64%);}
.tree svg path{stroke:rgba(255,255,255,.55);stroke-width:1.5;}
.tree .tnode{position:absolute;display:block;padding:0;}
.tree .tn-icon{position:absolute;inset:0;width:auto;height:auto;box-sizing:border-box;}
.tree .tn-icon img{width:66%;height:66%;}
.tn-stat .tn-icon{background:#fff;border:0;}
.tn-stat .tn-icon img{filter:brightness(0);width:60%;height:60%;}
.tn-skill .tn-icon{background:#14151f;border:2px solid #d9c9a3;}
.tn-bonus .tn-icon{background:#0b0b10;border:2px solid #fff;box-shadow:0 0 0 3px #0b0b10,0 0 0 4.5px rgba(255,255,255,.7);}
.tnode.sel .tn-icon{box-shadow:0 0 0 3px rgba(124,158,255,.75);}
.tn-bonus.sel .tn-icon{box-shadow:0 0 0 3px #0b0b10,0 0 0 5px rgba(124,158,255,.9);}
.tree .tn-cap{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;font-size:9px;line-height:1;color:var(--text);background:rgba(0,0,0,.8);padding:2px 5px;border-radius:8px;white-space:nowrap;}
.tn-skillrow .tn-icon{position:static;width:46px;height:46px;}
/* ---- enemy pictures ---- */
.en-img{width:40px;height:40px;object-fit:contain;flex-shrink:0;border-radius:8px;background:var(--surface-2);display:inline-block;}
.en-img.img-error{visibility:hidden;}
.eg-enemy{align-items:center;gap:4px 6px;}
.eg-enemy .en-img{width:34px;height:34px;}
.eg-ename{font-size:12.5px;}
/* Desktop rows have the room: name on the left, weakness chips on the right. */
@media (min-width:880px){
  .en-main{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;}
  .en-name{flex:1 1 0;min-width:0;}
  .en-weak{flex:0 1 auto;max-width:60%;justify-content:flex-end;}
}


/* ---- warp banners ---- */
.bn-head{margin:2px 0 0;}
.bn-h{display:flex;align-items:center;gap:8px;margin:18px 2px 0;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);}
.bn-h span{font-size:10.5px;font-weight:700;letter-spacing:0;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:0 7px;}
.bn-list{display:grid;gap:14px;margin:10px 0 0;}
.bn{--bn:#a97cf0;--bn-a:#a97cf055;--bn-b:#a97cf026;position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
.bn-live{border-color:var(--bn-a);box-shadow:0 18px 40px -26px var(--bn);}
.bn-hero{position:relative;min-height:124px;display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(135deg, var(--bn-b), transparent 72%), var(--surface-2);}
.bn-art{position:absolute;right:-4%;top:0;width:62%;height:100%;object-fit:cover;object-position:center 12%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40%);mask-image:linear-gradient(90deg, transparent 0, #000 40%);}
.bn-art.lc{object-position:center 35%;}
.bn-art.img-error{opacity:0;}
.bn-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg, rgba(0,0,0,.62), transparent 58%);}
.bn-hero-in{position:relative;z-index:2;padding:14px 14px 12px;max-width:70%;}
.bn-top{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.bn-badge{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;}
.bn-badge.live{background:var(--accent);color:#0b0e1a;}
.bn-badge.soon{background:var(--accent-2);color:#0b0e1a;}
.bn-ver{font-size:10.5px;font-weight:600;color:var(--text-dim);background:rgba(0,0,0,.45);border:1px solid var(--border);border-radius:999px;padding:1px 8px;}
.bn-title{font-size:18px;font-weight:700;line-height:1.2;overflow-wrap:anywhere;text-shadow:0 1px 10px rgba(0,0,0,.7);}
.bn-type{font-size:11.5px;color:var(--text-dim);margin-top:3px;}
.bn-time{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding:11px 14px 0;}
.bn-dates{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.bn-count{font-size:12.5px;font-weight:700;color:var(--bn);font-variant-numeric:tabular-nums;}
.bn-bar{flex-basis:100%;height:4px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;}
.bn-bar i{display:block;height:100%;border-radius:inherit;background:var(--bn);}
.bn-body{display:grid;gap:12px;padding:12px 14px 14px;}
.bn-row{display:flex;align-items:flex-start;gap:10px;}
.bn-star{flex:0 0 24px;padding-top:7px;font-size:11px;font-weight:800;}
.bn-star.r5{color:var(--accent);}
.bn-star.r4{color:var(--accent-2);}
.bn-units{display:flex;flex:1;flex-wrap:wrap;gap:10px 8px;min-width:0;}
.bn-unit{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:0;background:none;border:0;font:inherit;color:var(--text);text-align:center;cursor:pointer;}
.bn-utext{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;min-width:0;}
.bn-unit.big{flex-direction:row;align-items:center;gap:12px;width:100%;text-align:left;}
.bn-unit.big .bn-utext{align-items:flex-start;width:auto;flex:1;}
.bn-unit.nolink{cursor:default;}
.bn-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.bn-unit.big .bn-thumb{width:84px;flex:none;}
.bn-unit.r5 .bn-thumb{border-color:rgba(227,179,65,.45);background:radial-gradient(circle at 50% 30%, rgba(227,179,65,.28), rgba(227,179,65,.04) 70%), var(--surface-2);}
.bn-unit.r4 .bn-thumb{border-color:rgba(124,158,255,.30);background:radial-gradient(circle at 50% 30%, rgba(124,158,255,.20), rgba(124,158,255,.03) 70%), var(--surface-2);}
.bn-face{width:92%;height:92%;object-fit:contain;}
.bn-face.img-error{opacity:0;}
.bn-uname{font-size:11px;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.bn-unit.big .bn-uname{font-size:15px;font-weight:700;}
.bn-usub{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;line-height:1.3;color:var(--text-faint);}
.bn-unit:not(.big) .bn-usub{flex-direction:row;justify-content:center;}
.bn-unit.big .bn-usub{align-items:flex-start;font-size:11.5px;gap:2px;}
.bn-usub .element-icon{margin:0 2px;}
.bn-sl{display:inline-flex;align-items:center;white-space:nowrap;}
.bn-sl .element-icon{margin:0 4px 0 0;}
.bn-unit:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px;border-radius:12px;}
.bn-unit:active:not(.nolink){transform:scale(.97);}
.bn-note{margin:16px 2px 6px;}
@media (hover:hover) and (pointer:fine){
  .bn-unit:not(.nolink):hover .bn-thumb{border-color:var(--accent-dim);}
}
@media (min-width:880px){
  .bn-list{grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;}
  .bn-hero{min-height:160px;}
  .bn-title{font-size:21px;}
  .bn-unit{width:76px;}
  .bn-unit.big .bn-thumb{width:96px;}
  .bn-unit.big .bn-uname{font-size:17px;}
}

/* ---- warp banners: versions 1.0 -> today ---- */
.bn-minors{padding-top:2px;}
.bw-vhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:14px 2px 0;}
.bw-vhead b{font-size:17px;}
.bw-vhead span{font-size:12px;color:var(--text-dim);}
.bw-list{display:grid;align-items:start;gap:12px;margin:10px 0 0;}
.bw{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
.bw-live{border-color:rgba(227,179,65,.5);box-shadow:0 16px 36px -26px var(--accent);}
.bw-soon{border-style:dashed;border-color:rgba(124,158,255,.5);}
.bw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.bw-title{font-size:14.5px;font-weight:700;}
.bw-dates{margin-top:2px;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.bw-sec{padding:12px 14px 14px;}
.bw-sec + .bw-sec{border-top:1px solid var(--border);}
.bw-sec h4{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);}
.bw-sec .bn-row + .bn-row{margin-top:12px;}
.bw .bn-unit{width:58px;}
.bw .bn-uname{-webkit-line-clamp:4;}
.bw .bn-unit.v5{width:66px;}
.bn-thumb{position:relative;}
.bn-new{position:absolute;top:3px;left:3px;z-index:1;font-size:8.5px;font-weight:800;letter-spacing:.4px;line-height:1;color:#0b0e1a;background:var(--accent);border-radius:999px;padding:2px 5px;}
@media (min-width:880px){
  .bw-list{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;}
  .bw .bn-unit{width:66px;}
  .bw .bn-unit.v5{width:80px;}
}

/* signature light cone block on the character Overview */
.sig-top{display:flex;gap:14px;align-items:flex-start;margin:2px 0 6px;}
.sig-card{width:132px;flex-shrink:0;}
.sig-card .card{width:100%;box-sizing:border-box;}
.sig-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.sig-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.sig-stat{display:flex;flex-direction:column;gap:2px;align-items:center;padding:8px 4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;}
.sig-stat span{font-size:10.5px;letter-spacing:.5px;color:var(--text-faint);}
.sig-stat b{font-size:13.5px;font-weight:700;}
.sig-lv{font-size:11px;color:var(--text-faint);}
.sig-when{font-size:11.5px;color:var(--text-faint);line-height:1.5;}
.sig-when b{color:var(--text);font-weight:600;white-space:nowrap;}

/* Inventory + "missing" tags on material pills; card names always reserve two lines so stars/labels line up across a row */
.mat-pill.short{border-color:rgba(255,120,120,.5);}
.mat-pill.ok{border-color:rgba(100,210,150,.5);}
.mat-need,.mat-ok{font-style:normal;font-weight:700;margin-left:2px;}
.mat-need{color:#ff8a8a;}
.mat-ok{color:#6fdc9a;}
.inv-list{margin:8px 14px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.inv-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);}
.inv-row:last-child{border-bottom:0;}
.inv-row img{width:34px;height:34px;flex:none;object-fit:contain;border-radius:8px;background:var(--surface-2);}
.inv-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere;}
.inv-in{width:128px;flex:none;box-sizing:border-box;text-align:right;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;}
.inv-in:focus{outline:none;border-color:var(--accent);}
.inv-row.has .inv-in{border-color:rgba(124,158,255,.55);}
.inv-clear{margin:4px 14px 14px;}
.card-name{min-height:2.5em;}

/* Inventory: build targets + needed materials */
.sec .inv-list{margin:8px -6px 0;border:0;border-radius:0;background:none;}
.sec .inv-row{padding:9px 6px;}
.inv-main{flex:1;min-width:0;}
.inv-sub{display:flex;flex-wrap:wrap;gap:0 10px;font-size:11.5px;color:var(--text-faint);margin-top:2px;line-height:1.35;}
.inv-sub>*{white-space:nowrap;}
.inv-sub:empty{display:none;}
.inv-noimg{width:34px;height:34px;flex:none;border-radius:8px;background:var(--surface-2);}
.inv-in{width:112px;}
.inv-row.short .inv-in{border-color:rgba(255,120,120,.55);}
.inv-row.ok .inv-in{border-color:rgba(100,210,150,.55);}
.inv-sum{font-size:11.5px;font-weight:500;color:var(--text-faint);letter-spacing:0;text-transform:none;margin-left:6px;}
.inv-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;}
.inv-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 3px 3px 5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;font-weight:600;}
.inv-chip.bad{border-color:rgba(255,120,120,.55);}
.inv-chip img{width:24px;height:24px;border-radius:50%;object-fit:cover;}
.inv-x{border:0;background:transparent;color:var(--text-dim);font-size:17px;line-height:1;width:24px;height:24px;border-radius:50%;cursor:pointer;}
.inv-add{max-width:100%;font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px dashed var(--border);border-radius:999px;padding:7px 12px;}
.inv-page .sec{margin-left:0;margin-right:0;}
.inv-page .inv-clear{margin:4px 0 14px;}
@media (min-width:900px){.inv-page{max-width:860px;margin:0 auto;}}
.inv-sub .mat-need,.inv-sub .mat-ok{margin-left:0;}

/* Inventory: per-target build settings */
.inv-gear{border:0;background:transparent;color:var(--text-dim);font-size:15px;line-height:1;width:24px;height:24px;border-radius:50%;cursor:pointer;}
.inv-chip.custom .inv-gear,.inv-chip.open .inv-gear{color:var(--accent);}
.inv-chip.open{border-color:var(--accent-dim);}
.inv-plan{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}
.inv-plan-note{font-size:11.5px;line-height:1.4;color:var(--text-faint);margin-bottom:6px;}
.inv-plan-row{display:flex;align-items:center;gap:8px;margin:8px 0;}
.inv-plan-row>span{width:78px;flex:none;font-size:12.5px;color:var(--text-dim);}
.inv-plan-row>i{font-style:normal;color:var(--text-faint);}
.inv-plan-row select{flex:1;min-width:0;font:inherit;font-size:12.5px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:7px 8px;}
.inv-plan .inv-plan-reset{margin:6px 0 0;}

/* Tall portrait cards (Characters, Light Cones) */
.grid:has(.card.tall){gap:10px;}
.card.tall{padding:0;overflow:hidden;border-radius:18px;text-align:left;display:flex;flex-direction:column;}
.card.tall .art{position:relative;aspect-ratio:3/4;overflow:hidden;}
.card.tall .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .35s ease;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);}
.card.tall .art-img.is-large{transform:scale(1.2);transform-origin:50% 40%;}
.card.tall[data-cat="equipment"] .art-img.is-large{transform:none;}
.card.tall .art-img.is-icon{inset:auto;left:50%;top:44%;width:66%;height:auto;transform:translate(-50%,-50%);object-fit:contain;-webkit-mask-image:none;mask-image:none;}
.card.tall .art-img.is-large,.card.tall .art-img.is-icon{transition:none;}
.card.tall .art-img.img-error{opacity:0;}
.card.tall .medals{position:absolute;left:7px;bottom:7px;display:flex;gap:5px;z-index:2;}
.card.tall .medal{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,9,16,.62);
  box-shadow:0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.card.tall .medal .element-icon{margin:0;}
.card.tall .medal .element-icon img{width:17px;height:17px;}
.card.tall .info{padding:8px 10px 10px;}
.card.tall .card-name{font-size:12.5px;font-weight:700;}
.card.tall .card-stars{margin-top:3px;font-size:10px;letter-spacing:1.5px;}
.card.tall.r4 .card-stars{color:var(--accent-2);}
.card.tall .beta-chip{z-index:4;top:8px;right:8px;}
@media (min-width:520px){ .grid:has(.card.tall){grid-template-columns:repeat(auto-fill,minmax(116px,1fr));} }
@media (min-width:880px){
  .grid:has(.card.tall){grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:20px;}
  .card.tall{padding:0;border-radius:20px;}
  .card.tall .card-name{font-size:14.5px;}
  .card.tall .info{padding:10px 14px 14px;}
  .card.tall .medal{width:30px;height:30px;}
  .card.tall .medal .element-icon img{width:20px;height:20px;}
  .card.tall .card-stars{font-size:11.5px;}
}
@media (hover:hover) and (pointer:fine){
  .card.tall:hover{transform:translateY(-3px);}
  .card.tall:hover .art-img:not(.is-large):not(.is-icon){transform:scale(1.04);}
}

/* Character sub-tabs on a phone: a symmetric grid (3 per row, or one centred row when they fit) instead of a strip that slides off the edge */
@media (max-width:879px){
  .subtabs{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:14px 16px 10px;}
  .subtab{flex:0 0 calc((100% - 12px) / 3);padding:7px 4px;text-align:center;font-size:12px;}
  .subtab::after{top:-3px;bottom:-3px;}
  #detailBody > .subtabs{top:-4px;}
}
@media (min-width:520px) and (max-width:879px){
  .subtab{flex:0 0 auto;padding:7px 13px;font-size:12.5px;}
}

/* Inventory: build-target picker (bottom sheet) */
.inv-add{display:inline-flex;align-items:center;font:inherit;font-size:13px;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px dashed var(--border);border-radius:999px;padding:7px 14px;cursor:pointer;}
.inv-add:hover{color:var(--text);border-color:var(--accent-dim);}
.inv-chip.loading{opacity:.55;}
body.inv-lock{overflow:hidden;}
.inv-sheet{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,3,8,.66);animation:fadeIn .18s ease;}
.inv-sheet-panel{width:100%;max-width:560px;max-height:84vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-bottom:none;
  border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.55);animation:sheetUp .24s cubic-bezier(.22,1,.36,1);}
@keyframes sheetUp{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
.inv-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px;font-size:15px;}
.inv-sheet-x{border:0;background:var(--surface-2);color:var(--text-dim);width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;}
.inv-sheet-tabs{display:flex;gap:8px;padding:8px 18px;}
.inv-sheet-search{margin:0 18px 8px;font:inherit;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;}
.inv-sheet-search:focus{outline:none;border-color:var(--accent-dim);}
.inv-sheet-list{overflow-y:auto;overscroll-behavior:contain;padding:0 10px 16px;min-height:120px;}
.inv-pick-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;background:transparent;color:var(--text);border-radius:12px;text-align:left;cursor:pointer;font:inherit;}
.inv-pick-item:hover,.inv-pick-item:focus-visible{background:var(--surface-2);}
.inv-pick-item img{width:44px;height:44px;flex:none;border-radius:12px;object-fit:cover;background:var(--surface-2);}
.inv-pick-name{flex:1;min-width:0;font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:2px;}
.inv-pick-stars{font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:400;}
.inv-pick-stars.r4{color:var(--accent-2);}
.inv-pick-meta{display:flex;align-items:center;gap:8px;flex:none;}
.inv-pick-meta .element-icon{margin:0;}
.inv-pick-empty{padding:34px 10px;text-align:center;color:var(--text-faint);font-size:13px;}
.inv-sheet-bar{display:flex;flex:none;gap:8px;align-items:center;margin:0 18px 8px;}
.inv-sheet-bar .inv-sheet-search{margin:0;flex:1;min-width:0;}
.inv-filter-btn{display:inline-flex;align-items:center;gap:6px;flex:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;cursor:pointer;}
.inv-filter-btn:hover,.inv-filter-btn[aria-expanded="true"]{color:var(--text);border-color:var(--accent-dim);}
.inv-filter-n{display:none;background:var(--accent-2);color:#0b0e1a;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px;min-width:14px;text-align:center;}
.inv-filter-n.show{display:inline-block;}
.inv-filter-caret{font-size:11px;transition:transform .25s ease;}
.inv-filter-btn[aria-expanded="true"] .inv-filter-caret{transform:rotate(180deg);}
.inv-filter-panel{display:none;flex:none;margin:0 18px 8px;padding:10px 12px 2px;max-height:44vh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;}
.inv-filter-panel.open{display:block;}
.inv-filter-panel .filter-group{margin-bottom:8px;}
.inv-filter-panel .fchip{background:var(--surface);padding:6px 11px;font-size:12.5px;}
.inv-filter-panel .fchip.active{background:var(--accent-2);border-color:var(--accent-2);color:#0b0e1a;}
.inv-filter-clear,.inv-pick-reset{font:inherit;font-size:12px;font-weight:600;color:var(--accent);background:none;border:0;padding:4px 2px 8px;cursor:pointer;}
.inv-filter-clear[hidden]{display:none;}
.inv-pick-reset{margin-top:10px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;}
@media (min-width:880px){
  .inv-sheet{align-items:center;}
  .inv-sheet-panel{border-bottom:1px solid var(--border);border-radius:20px;max-height:78vh;}
}
.ev-list{display:grid;gap:10px;margin:10px 0 0;}
.ev{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:12px 14px;cursor:pointer;}
.ev-live{border-color:#a97cf055;box-shadow:0 14px 32px -26px #a97cf0;}
.ev-ended{opacity:.62;}
.ev-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;min-height:18px;}
.ev-type{font-size:10.5px;font-weight:700;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:1px 8px;}
.ev-count{font-size:11px;font-weight:700;color:var(--accent);margin-left:auto;white-space:nowrap;}
.ev-soon .ev-count{color:var(--accent-2);}
.ev-name{font-weight:700;font-size:15px;overflow-wrap:anywhere;}
.ev-when{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.ev-bar{height:3px;background:var(--surface-2);border-radius:3px;margin-top:9px;overflow:hidden;}
.ev-bar i{display:block;height:100%;background:var(--accent);}
.ev-desc{font-size:12.5px;color:var(--text-dim);line-height:1.45;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.ev.open .ev-desc{display:block;-webkit-line-clamp:unset;}
.ev-rewards{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.ev-rewards span{font-size:11px;color:var(--text-dim);background:var(--surface-2);border-radius:999px;padding:2px 8px;}
.ev-chal{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:10px 14px;}
.ev-chal-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ev-chal-main b{font-size:14px;overflow-wrap:anywhere;}
.ev-chal-main small{font-size:11.5px;color:var(--text-faint);}
.ev-ended-wrap{margin-top:18px;}
.ev-ended-wrap>summary{cursor:pointer;list-style:none;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);}
.ev-ended-wrap>summary::-webkit-details-marker{display:none;}
.ev-ended-wrap>summary span{font-size:10.5px;font-weight:700;letter-spacing:0;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:0 7px;margin-left:4px;}

/* ---- endgame mode label on the Events tab ---- */
.ev-mode{align-self:flex-start;font-size:10.5px;font-weight:700;line-height:1.5;color:var(--mc,var(--text-dim));border:1px solid var(--mb,var(--border));border-radius:999px;padding:0 8px;margin-bottom:3px;}
.ev-mode-moc{--mc:#c9a6f5;--mb:rgba(201,166,245,.42);}
.ev-mode-pf{--mc:#e3b341;--mb:rgba(227,179,65,.42);}
.ev-mode-as{--mc:#f08a6c;--mb:rgba(240,138,108,.42);}
.ev-mode-aa{--mc:#7c9eff;--mb:rgba(124,158,255,.42);}
/* ---- Path emblem behind the trace tree + node icon in its detail card ---- */
.tree-emblem{position:absolute;opacity:.13;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.tn-det-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.tn-det-head h3{margin:0;min-width:0;overflow-wrap:anywhere;}
.tn-det-head.has-ico h3::before{display:none;}
.tn-det-ico{flex:0 0 auto;padding:5px;margin-left:-5px;}   /* the padding leaves room for the bonus node's outer ring; the margin keeps the circle itself flush with the text below */
.tn-det-ico .tn-icon{width:44px;height:44px;}
.tn-det-ico .tn-icon img.img-error{visibility:hidden;}
/* ---- Anomaly Arbitration row on the Endgame tab ---- */
/* four modes no longer fit one phone-wide row: wrap them so every mode (Anomaly Arbitration included) is visible without swiping */
.ext-chips.eg-chips{flex-wrap:wrap;overflow-x:visible;}
.eg-lbl{color:var(--text-faint);margin-left:4px;}
.eg-wave-n{display:block;font-size:11px;font-weight:600;color:var(--text-faint);margin-bottom:2px;}
.eg-body .ev-rewards{margin-top:6px;}

/* Novaflare before/after switch (Traces tab) */
.nova-bar{align-items:center;}
.nova-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text-dim);margin-right:4px;}

/* ---- PC: warp banners fit (fix-18) ---- */
@media (min-width:880px){
  /* Live/Coming-up cards: the art box was a 160px strip, so a wide splash showed only a face crop and long titles ran across it */
  .bn-hero{min-height:230px;}
  .bn-art{right:0;width:50%;object-position:center 6%;}
  .bn-art.lc{object-position:center 30%;}
  .bn-hero-in{max-width:48%;padding:18px 20px 16px;}
  .bn-time{padding:13px 20px 0;}
  .bn-body{padding:14px 20px 18px;}
  /* Version history: Character and Light Cone sit side by side, so a wide card is no longer mostly empty space */
  .bw-list{align-items:stretch;}
  .bw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;}
  .bw-head{grid-column:1 / -1;}
  .bw-sec + .bw-sec{border-top:0;border-left:1px solid var(--border);}
  .bw-sec:nth-child(2):last-child{grid-column:1 / -1;}
  .bw .bn-unit{width:62px;}
  .bw .bn-unit.v5{width:74px;}
}
@media (min-width:1400px){
  .bw .bn-unit{width:72px;}
  .bw .bn-unit.v5{width:88px;}
}


/* =====================================================================
   MULTI-GAME (everything below is new; nothing above was changed)
   One stylesheet for every page. A page picks its look with <html data-game="...">.
   HSR sets no overrides, so it keeps the :root palette above exactly as before.
   ===================================================================== */
[data-game="genshin"]{--accent:#4fd1c5;--accent-dim:#2c7f78;--accent-2:#6fb7ff;--accent-purple:#6fe0d2;--brand-grad:linear-gradient(120deg,#4fd1c5,#c4f5ee);}
[data-game="zzz"]{--accent:#ffc42e;--accent-dim:#8a6a14;--accent-2:#ff8a3c;--accent-purple:#ff8a3c;--brand-grad:linear-gradient(120deg,#ffc42e,#ff8a3c);}

.game-switch{text-decoration:none;}
.game-note{margin:6px 0 0;padding:18px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-dim);font-size:13.5px;line-height:1.55;}
.game-note b{display:block;margin-bottom:4px;color:var(--text);font-size:15px;}

/* game-select screen (index.html) */
body.game-select{min-height:100vh;display:flex;}
.gs{width:100%;max-width:1040px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 18px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;animation:fadeIn .35s ease;}
.gs-brand{font-size:36px;text-align:center;cursor:default;}
.gs-lead{margin:0;color:var(--text-faint);font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.gs-list{width:100%;display:grid;grid-template-columns:1fr;gap:14px;}
.gs-card{--gs-rgb:150,150,170;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:128px;padding:18px 20px;border-radius:var(--radius);border:1px solid rgba(var(--gs-rgb),.35);background:radial-gradient(420px 180px at 88% 0%,rgba(var(--gs-rgb),.26),transparent 70%),linear-gradient(180deg,var(--surface),var(--bg-elevated));color:var(--text);text-decoration:none;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.gs-name{font-size:21px;font-weight:600;letter-spacing:.2px;}
.gs-sub{font-size:12.5px;color:var(--text-dim);}
.gs-badge{position:absolute;top:14px;right:14px;padding:3px 10px;border-radius:99px;border:1px solid rgba(var(--gs-rgb),.5);background:rgba(var(--gs-rgb),.1);color:rgb(var(--gs-rgb));font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.gs-genshin{--gs-rgb:79,209,197;}
.gs-hsr{--gs-rgb:169,124,240;}
.gs-zzz{--gs-rgb:255,196,46;}
a.gs-card:active{transform:scale(.985);}
.gs-card.is-locked{opacity:.5;filter:saturate(.45);cursor:not-allowed;}
a.gs-card:focus-visible{outline:2px solid rgb(var(--gs-rgb));outline-offset:2px;}
.gs-back{color:var(--text-dim);font-size:13px;text-decoration:none;}
@media (hover:hover) and (pointer:fine){
  a.gs-card:hover{transform:translateY(-3px);border-color:rgba(var(--gs-rgb),.75);box-shadow:0 10px 30px rgba(var(--gs-rgb),.18);}
  .gs-back:hover{color:var(--text);}
}
@media (min-width:880px){
  .gs{gap:30px;}
  .gs-brand{font-size:48px;}
  .gs-list{grid-template-columns:repeat(3,1fr);gap:18px;}
  .gs-card{min-height:250px;padding:22px 24px;}
  .gs-name{font-size:24px;}
}