:root{
  --paper:#f3ecdf; --paper2:#ebe2d0; --card:#fbf7ef; --ink:#1e1a16; --ink2:#5a5148; --line:#d8ccb6;
  --ver:#c23a2b; --ver2:#f1d6cf; --indigo:#2d3f6b; --gold:#b48a3c; --jade:#3e7a5f;
  --c-R:#2c4a86; --c-SR:#9a4f9c; --c-SSR:#b48a3c; --c-SP:#c23a2b;
  --serif:"Hiragino Mincho ProN","Songti SC","Iowan Old Style","Palatino","Georgia",serif;
  --sans:"Avenir Next","Hiragino Sans","PingFang SC","Helvetica Neue",sans-serif;
  --bar:58px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;
  background-image:radial-gradient(rgba(120,90,40,.06) 1px,transparent 1px);background-size:5px 5px}
a{color:var(--indigo)}
button{font:inherit;color:inherit}

/* top bar */
.bar{position:sticky;top:0;z-index:10;height:var(--bar);display:flex;align-items:center;gap:16px;padding:0 20px;
  background:rgba(243,236,223,.95);backdrop-filter:blur(6px);border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:19px;font-weight:600;white-space:nowrap}
.mark{width:30px;height:30px;display:grid;place-items:center;background:var(--ver);color:#fff;border-radius:3px;font-size:17px;transform:rotate(-4deg)}
#q{flex:1;max-width:560px;padding:9px 13px;border:1.5px solid var(--ink);background:var(--card);font:inherit;border-radius:2px}
#q:focus{outline:2px solid var(--ver);outline-offset:1px}
.bar-r{margin-left:auto;display:flex;align-items:center;gap:14px}
select{font:inherit;padding:7px 8px;background:var(--card);border:1.5px solid var(--ink);border-radius:2px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ink2);white-space:nowrap}
.switch input{display:none}
.switch span{width:32px;height:18px;border-radius:999px;background:var(--line);position:relative;transition:background .2s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.switch input:checked+span{background:var(--ink)}
.switch input:checked+span::after{left:16px}
.ftoggle{display:none;border:1.5px solid var(--ink);background:var(--card);width:36px;height:36px;cursor:pointer;font-size:16px}

/* layout */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr)}
.side{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:auto;padding:18px 18px 70px;border-right:1px solid var(--line)}
.side section{margin-bottom:20px}
.side h5{margin:0 0 8px;font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ver);font-weight:600}
.rlist{display:flex;flex-direction:column;gap:2px}
.rlist button{display:flex;justify-content:space-between;align-items:center;border:0;background:none;padding:7px 10px;border-radius:3px;cursor:pointer;text-align:left}
.rlist button span{display:flex;align-items:center;gap:8px;font-weight:600}
.rlist button[class*="r-"] span::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--rc)}
.rlist em{font-style:normal;color:var(--ink2);font-size:12px}
.rlist button:hover{background:var(--paper2)}
.rlist button.on{background:var(--ink);color:var(--paper)}
.rlist button.on em{color:#cfc4b2}
.r-R{--rc:var(--c-R)}.r-SR{--rc:var(--c-SR)}.r-SSR{--rc:var(--c-SSR)}.r-SP{--rc:var(--c-SP)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{border:1px solid var(--line);background:var(--card);padding:4px 10px;border-radius:999px;font-size:12.5px;cursor:pointer;color:var(--ink2)}
.chips button:hover{border-color:var(--ink2)}
.chips button.on{background:var(--ver);border-color:var(--ver);color:#fff}
.rchip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rc,#999);margin-right:6px;vertical-align:1px}
.chips .rchip.on{background:var(--rc);border-color:var(--rc)}
.chips .rchip.on::before{background:#fff}
.reset{border:0;background:none;color:var(--ver);text-decoration:underline;cursor:pointer;padding:0;margin-bottom:18px}
.sfoot{border-top:1px solid var(--line);padding-top:14px;color:var(--ink2);font-size:12px;line-height:1.5}
.sfoot p{margin:0 0 8px}
.src{font-size:11px;letter-spacing:.04em}
main{padding:18px 24px 72px;min-width:0}
.count{color:var(--ink2);font-size:12.5px;margin-bottom:12px}

/* role colours */
.ro-dps{--rc:#b3262e}.ro-control{--rc:#6a3fa0}.ro-healer{--rc:#2f8a4f}.ro-protector{--rc:#2f6f9f}
.ro-dispel{--rc:#178a8a}.ro-buff-strip{--rc:#c4621b}.ro-onibi-gen{--rc:#b5800c}.ro-bar-push{--rc:#2a86c9}
.ro-bar-pull{--rc:#3a4aa8}.ro-dmg-amp{--rc:#b0336f}.ro-revive{--rc:#5f8a1f}.ro-debuff{--rc:#6b4a2b}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:transform .15s,box-shadow .15s;animation:rise .35s both;overflow:hidden}
.card:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.banner{height:160px;position:relative;overflow:hidden}
.banner img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transition:transform .4s}
.card:hover .banner img{transform:scale(1.05)}
.banner::after{content:"";position:absolute;inset:auto 0 0;height:36px;background:linear-gradient(transparent,var(--card));pointer-events:none}
.banner .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:56px;color:rgba(255,255,255,.7)}
.r-R .banner,.hero.r-R{background:radial-gradient(circle at 50% 30%,#7f9fd6,#2c4a86)}
.r-SR .banner,.hero.r-SR{background:radial-gradient(circle at 50% 30%,#efc3e0,#9a4f9c)}
.r-SSR .banner,.hero.r-SSR{background:radial-gradient(circle at 50% 30%,#f6e9c8,#d8b56c)}
.r-SP .banner,.hero.r-SP{background:radial-gradient(circle at 50% 30%,#f8dcd5,#d98a7c)}
.rbadge{position:absolute;top:10px;left:10px;z-index:1;font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--rc);padding:3px 9px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rtags{position:absolute;top:36px;left:10px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rtag{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#fff;background:var(--rc,#6d655b);padding:2px 8px;border-radius:2px;
  border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.3);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.stamp{position:absolute;top:10px;right:10px;z-index:1;font-family:var(--serif);font-weight:700;font-size:17px;width:40px;height:40px;display:grid;place-items:center;
  border:2px solid currentColor;border-radius:50%;transform:rotate(-8deg);background:rgba(251,247,239,.92)}
.g-S{color:var(--ver)}.g-A{color:var(--gold)}.g-B{color:var(--indigo)}.g-C{color:#7a7a7a}.g-V{color:var(--jade);font-size:12px}.g-N{color:#aaa;font-size:14px}
.cbadge{position:absolute;bottom:8px;right:10px;z-index:1;font-size:10px;font-weight:600;color:#fff;background:rgba(30,26,22,.8);padding:2px 7px;border-radius:2px}
.cbody{padding:8px 13px 13px}
.nm{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.15}
.note{color:var(--ink2);font-size:12.5px;line-height:1.45;margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{padding:40px;text-align:center;color:var(--ink2);font-family:var(--serif)}

/* hover tooltip */
.tip{position:fixed;z-index:30;pointer-events:none;width:max-content;min-width:280px;max-width:480px;background:var(--ink);color:var(--paper);padding:12px 14px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:12.5px}
.thead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--serif);font-size:15px}
.thead span{font-weight:700;filter:brightness(1.6)}
.tip h4{margin:10px 0 5px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c9bda6;font-weight:600}
.tstats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px}
.tstats small{display:block;font-size:9.5px;letter-spacing:.08em;color:#a99f8e}
.tstats b{font-family:var(--serif);font-size:13px;font-weight:600}
.traw{color:#e6dccb;line-height:1.45}
/* width:0 + min-width:100% keeps souls from widening the tooltip; they wrap to whatever width the stats set */
.tsouls{display:flex;flex-wrap:wrap;gap:3px;width:0;min-width:100%}
.ts{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;background:rgba(255,255,255,.08);padding:1px 7px 1px 2px;border-radius:999px}
.ts img{width:20px;height:20px;border-radius:50%}
@media (hover:none){.tip{display:none!important}}

/* detail sheet */
.sheet{position:fixed;inset:0;background:rgba(30,26,22,.45);z-index:20;display:flex;justify-content:flex-end}
.sheet-card{width:min(580px,100%);height:100%;overflow:auto;background:var(--card);padding:0 28px 70px;position:relative;animation:slide .25s both;border-left:3px solid var(--ver)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.x{position:sticky;top:12px;float:right;margin-right:-12px;z-index:2;border:0;background:rgba(251,247,239,.9);border-radius:50%;width:40px;height:40px;font-size:28px;line-height:1;cursor:pointer;color:var(--ink2)}
.hero{margin:0 -28px;height:min(420px,56vh)}
.hero img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.sh-top{padding-top:16px}
.sh-top h2{font-family:var(--serif);margin:0;font-size:30px;line-height:1.1}
.sub{color:var(--ink2);margin-top:4px}
.sh-top .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sh-top .rtag{font-size:12px;padding:3px 9px}
.verdict{margin:18px 0;padding:14px 16px;background:var(--paper);border-left:4px solid var(--ver);font-family:var(--serif);font-size:15.5px;line-height:1.55}
.verdict .gnote{display:block;font-family:var(--sans);font-size:12px;color:var(--jade);margin-top:6px}
h3{font-family:var(--serif);font-size:13px;letter-spacing:.18em;color:var(--ver);margin:22px 0 8px;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st{background:var(--paper);padding:8px 9px;border:1px solid var(--line)}
.st small{display:block;font-size:10px;letter-spacing:.12em;color:var(--ink2)}
.st b{font-family:var(--serif);font-size:16px;display:block;margin:2px 0}
.st em{font-style:normal;font-size:10.5px;padding:1px 5px;border-radius:2px;background:var(--paper2);color:var(--ink2)}
.st em.hi{background:var(--ver2);color:var(--ver)}.st em.lo{background:#dde3ef;color:var(--indigo)}
.fine{color:var(--ink2);font-size:11.5px;margin:6px 0 0}
.raw{background:var(--paper);padding:10px 12px;border:1px dashed var(--line);color:var(--ink2);line-height:1.5}
.souls{display:flex;flex-wrap:wrap;gap:5px}
.soul{display:flex;align-items:center;gap:6px;min-width:0;background:var(--paper);border:1px solid var(--line);padding:4px 8px 4px 4px}
.soul img,.soul .ph{width:26px;height:26px;flex:none;border-radius:50%;background:var(--paper2)}
.soul .ph{display:grid;place-items:center;font-family:var(--serif);font-size:12px;color:var(--ink2)}
.soul div{min-width:0}
.soul b,.soul small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soul b{font-size:13px}.soul small{color:var(--ink2);font-size:11px}
.ai{line-height:1.55}
.links{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;border:1.5px solid var(--ink);background:var(--card);padding:8px 14px;cursor:pointer;text-decoration:none;color:var(--ink);border-radius:2px}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.5;cursor:default}

/* suggest-edit form */
.edit{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.edit .hint{margin:0;padding:10px 12px;background:var(--paper);border-left:3px solid var(--gold);color:var(--ink2);font-size:13px;line-height:1.5}
.edit label,.edit fieldset{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink2);border:0;padding:0;margin:0}
.edit legend{padding:0;margin-bottom:5px}
.edit input:not([type=checkbox]),.edit select,.edit textarea{font:inherit;font-weight:400;font-size:14px;color:var(--ink);padding:8px 10px;border:1.5px solid var(--line);background:#fff;border-radius:2px;letter-spacing:0}
.edit input:focus,.edit select:focus,.edit textarea:focus{outline:none;border-color:var(--ink)}
.edit small{font-weight:400;letter-spacing:0}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick label.rtag{flex-direction:row;align-items:center;gap:0;cursor:pointer;opacity:.38;box-shadow:none;font-size:11.5px;color:#fff;letter-spacing:.03em}
.pick label.rtag:has(input:checked){opacity:1;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.3)}
.pick input{display:none}
.soulsel{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.edit hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.hp{position:absolute;left:-9999px}
.tsbox{margin:2px 0 10px;min-height:65px}
.actions{display:flex;justify-content:flex-end;gap:8px}
.formmsg{margin:0;font-size:13px;line-height:1.5}
.formmsg.ok{color:var(--jade)}.formmsg.err{color:var(--ver)}

/* small screens: sidebar becomes a slide-in panel */
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:fixed;top:var(--bar);left:0;bottom:0;width:270px;z-index:9;background:var(--paper);transform:translateX(-100%);transition:transform .2s;box-shadow:6px 0 20px rgba(0,0,0,.12)}
  body.side-open .side{transform:none}
  .ftoggle{display:block}
  .brand span:last-child{display:none}
  .switch{font-size:0;gap:0}
  main{padding:14px 14px 72px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* zoomed soul icons: scale up, then clip back to the original circle */
.soul img,.ts img{object-fit:cover}
img.zm{transform:scale(var(--z));clip-path:circle(calc(50% / var(--z)))}

/* ── Soft theme: rounder shapes and smoother motion ─────────────────────── */
:root{--r-lg:18px;--r-md:12px;--r-sm:8px;--ease:cubic-bezier(.22,.8,.3,1);
  --shadow:0 1px 2px rgba(30,26,22,.06),0 4px 14px rgba(30,26,22,.07);
  --shadow-up:0 6px 14px rgba(30,26,22,.10),0 18px 38px rgba(30,26,22,.14)}

.bar{border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(30,26,22,.06)}
.mark{border-radius:10px}
#q{border-radius:999px;border:1px solid var(--line);padding-left:16px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
#q:focus{outline:none;border-color:var(--ink2);box-shadow:0 0 0 4px rgba(90,81,72,.12)}
select{border-radius:999px;border:1px solid var(--line);padding:7px 12px}
.ftoggle{border-radius:12px;border:1px solid var(--line)}
.switch span{transition:background .3s var(--ease)}
.switch span::after{transition:left .3s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}

.rlist button{border-radius:var(--r-sm);transition:background .2s var(--ease),color .2s var(--ease)}
.rlist button[class*="r-"] span::before{border-radius:50%}
.chips button{transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.chips button:active{transform:scale(.95)}

.grid{gap:18px}
.card{border-radius:var(--r-lg);border:1px solid rgba(216,204,182,.7);box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);animation:rise .5s var(--ease) both}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-up)}
.banner img{transition:transform .7s var(--ease)}
.card:hover .banner img{transform:scale(1.06)}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}}
.rbadge{border-radius:999px;padding:3px 10px}
.rtag{border-radius:999px;padding:2px 9px}
.cbadge{border-radius:999px}
.cbody{padding:10px 15px 15px}

.tip{border-radius:var(--r-md);padding:14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.28);animation:tipin .2s var(--ease)}
@keyframes tipin{from{opacity:0;transform:translateY(4px) scale(.98)}}

.sheet{animation:fade .3s var(--ease) both;backdrop-filter:blur(3px)}
@keyframes fade{from{opacity:0}}
.sheet-card{border-left:0;border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:-10px 0 40px rgba(0,0,0,.18);animation:slide .45s var(--ease) both}
@keyframes slide{from{transform:translateX(60px);opacity:0}}
.verdict{border-radius:var(--r-md);border-left:0;box-shadow:inset 4px 0 0 var(--ver)}
.st{border-radius:var(--r-sm)}
.raw{border-radius:var(--r-sm)}
.soul{border-radius:999px;padding:4px 12px 4px 4px}
.x{transition:background .2s var(--ease),transform .3s var(--ease)}
.x:hover{transform:rotate(90deg)}

.btn{border-radius:999px;padding:8px 18px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,26,22,.15)}
.btn:active{transform:scale(.97)}
.edit .hint{border-radius:var(--r-sm)}
.edit input:not([type=checkbox]),.edit select,.edit textarea{border-radius:var(--r-sm);border-width:1px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.edit input:focus,.edit select:focus,.edit textarea:focus{box-shadow:0 0 0 4px rgba(90,81,72,.12)}
.pick label.rtag{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pick label.rtag:active{transform:scale(.94)}

@media (max-width:860px){.side{border-radius:0 var(--r-lg) var(--r-lg) 0;transition:transform .35s var(--ease)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}