/* Game data pages: monster list, monster detail, item list. Base tokens and type come from dungeon.css. */
.cnt{font-size:13px;color:var(--mut);align-self:center}
.sh{display:flex;align-items:baseline;margin:26px 0 10px;gap:12px;flex-wrap:wrap}
.sh h2{margin:0;font-size:15px;color:var(--txt);letter-spacing:-.01em;font-weight:700}
.sh h2 small{margin-left:0;font-size:12.5px;color:var(--mut)}

/* filter bar */
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:11px 14px;border:1px solid var(--line);background:var(--panel);border-radius:2px;margin-bottom:12px}
.fg{display:flex;align-items:center;gap:9px;min-width:0}
.fg>span{font-size:12px;color:var(--mut);white-space:nowrap}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{appearance:none;background:none;border:1px solid var(--line2);color:var(--txt2);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:2px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--cy-dim);color:var(--txt)}
.chip.on{border-color:var(--cy);color:var(--cy);background:rgba(51,225,154,.07)}
.chip:focus-visible,.pager button:focus-visible,#lq:focus-visible{outline:2px solid var(--cy);outline-offset:1px}
#lq{margin-left:auto;flex:0 1 240px;min-width:150px;background:#05080b;border:1px solid var(--line2);color:var(--txt);font:inherit;font-size:13.5px;padding:7px 11px;border-radius:2px}
#lq::placeholder{color:var(--mut)}
#lq:focus{border-color:var(--cy-dim);outline:0}

/* table made of rows (each row is one link or one line) */
.ltable{border:1px solid var(--line);background:var(--panel);border-radius:2px;overflow-x:auto}
.lhead,.lr{display:grid;align-items:center;gap:0 14px;padding:0 14px;min-width:0}
.lhead{height:34px;font-size:11.5px;color:var(--mut);letter-spacing:.04em;border-bottom:1px solid var(--line2);background:#070b0f}
.lr{min-height:46px;padding-top:7px;padding-bottom:7px;border-bottom:1px solid var(--line);font-size:14px}
.lr:last-child{border-bottom:0}
a.lr:hover{background:rgba(51,225,154,.045)}
a.lr:hover .n b{color:#fff}
.lhead,.lr-m{grid-template-columns:82px minmax(0,1fr) 84px 92px}
.lr-i,.lhead:has(span:nth-child(6)){grid-template-columns:82px minmax(0,1fr) 100px 56px 92px 110px}
.lh-s,.lr-s{grid-template-columns:minmax(0,1fr) 84px 72px 72px}
.lr .n{min-width:0}
.lr .n b{display:block;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .n span{display:block;font-size:12.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-s .n span{white-space:normal}
.lr .c{font-size:13px;color:var(--txt2);white-space:nowrap}
.r{text-align:right;justify-self:end;font-size:13px;color:var(--txt2);white-space:nowrap}
.code{font-size:12.5px;color:var(--mut)}
#rows.busy{opacity:.45;transition:opacity .12s}
#rows{min-height:120px}

/* grade badges: monsters (g-) and items (i-) */
.gr{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 0;width:74px;text-align:center;border:1px solid var(--line2);border-radius:2px;color:var(--txt2);white-space:nowrap}
.gr.g-EliteMonster{color:#7fc8ff;border-color:#24465f}
.gr.g-HeroMonster{color:#ffb454;border-color:#5f4420}
.gr.g-RvRHeroMonster{color:#ff8a7a;border-color:#5f2a25}
.gr.g-LegendMonster{color:#ffe08a;border-color:#6b5a22;background:rgba(255,224,138,.06)}
.vars .g-EliteMonster{color:#7fc8ff}.vars .g-HeroMonster{color:#ffb454}.vars .g-RvRHeroMonster{color:#ff8a7a}.vars .g-LegendMonster{color:#ffe08a}
.i-Rare{color:#6fdc8c}.i-Legend{color:#7fc8ff}.i-Unique{color:#ffd166}.i-Epic{color:#ff9d5c}.i-Special{color:#d59bff}
.gr.i-Rare{border-color:#235234}.gr.i-Legend{border-color:#24465f}.gr.i-Unique{border-color:#5f5020}.gr.i-Epic{border-color:#5f3a20}.gr.i-Special{border-color:#4a2f5f}
.lr .n b.i-Rare{color:#6fdc8c}.lr .n b.i-Legend{color:#7fc8ff}.lr .n b.i-Unique{color:#ffd166}.lr .n b.i-Epic{color:#ff9d5c}.lr .n b.i-Special{color:#d59bff}
.code i{font-style:normal;color:var(--dim)}

.pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px;font-size:13px;color:var(--txt2)}
.pager button{appearance:none;background:none;border:1px solid var(--line2);color:var(--txt2);font:inherit;font-size:13px;padding:6px 16px;border-radius:2px;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--cy-dim);color:var(--txt)}
.pager button:disabled{opacity:.35;cursor:default}

/* monster detail */
.mhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border:1px solid var(--line);background:var(--panel);border-radius:2px;margin-bottom:12px}
.mhead h1{font-size:26px}
.mhead p{margin:3px 0 0;color:var(--txt2);font-size:14px}
.mhead dl{display:flex;gap:26px;margin:0 0 0 auto}
.mhead dt{font-size:11.5px;color:var(--mut);letter-spacing:.04em}
.mhead dd{margin:2px 0 0;font-size:15px;font-weight:600;color:var(--txt)}
.mhead dd.code{font-weight:400;font-size:14px;color:var(--txt2)}
.recl{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid var(--cy-dim);background:rgba(51,225,154,.05);border-radius:2px}
.recl span{font-size:13.5px;color:var(--txt2);min-width:0}
.recl b{color:var(--cy);font-weight:700;margin-right:10px}
.recl em{margin-left:auto;font-style:normal;font-size:13px;color:var(--cy);white-space:nowrap}
.recl:hover{background:rgba(51,225,154,.1)}
.vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px}
.vars a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 11px;border:1px solid var(--line);background:var(--panel);border-radius:2px;font-size:13px}
.vars a b{font-weight:500;color:var(--txt2)}
.vars a span{font-size:11.5px}
.vars a:hover{border-color:var(--cy-dim)}
.vars a.on{border-color:var(--cy)}
.vars a.on b{color:var(--cy)}

@media (max-width:720px){
  .fbar{padding:10px 11px;gap:9px}
  .fg{flex-wrap:wrap;width:100%}
  #lq{flex:1 1 100%;margin-left:0}
  .lhead,.lr-m{grid-template-columns:62px minmax(0,1fr) 54px}
  .lhead span:nth-child(4),.lr-m .r{display:none}
  .lr-i,.lhead:has(span:nth-child(6)){grid-template-columns:62px minmax(0,1fr) 62px}
  .lr-i .c:nth-of-type(n+4),.lr-i .r,.lhead:has(span:nth-child(6)) span:nth-child(n+4){display:none}
  .lh-s,.lr-s{grid-template-columns:minmax(0,1fr) 54px 54px}
  .lh-s span:nth-child(2),.lr-s .c{display:none}
  .lh-s span:nth-child(4){display:block}
  .gr{width:54px;font-size:11px}
  .mhead dl{margin-left:0;width:100%;gap:20px}
  .mhead h1{font-size:22px}
  .recl{flex-wrap:wrap}
  .recl em{margin-left:0}
}
@media (prefers-reduced-motion:reduce){#rows.busy{transition:none}}

.skill-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px}.skill-facts div{padding:12px;border:1px solid var(--line);background:var(--panel)}.skill-facts dt{color:var(--txt2);font-size:13px}.skill-facts dd{margin:6px 0 0;font-size:18px}.skill-level{grid-template-columns:repeat(4,minmax(0,1fr))}.skill-level span{display:block!important}
.fg label{font-size:12px;color:var(--mut)}.fg select{max-width:100%;min-width:0;background:#05080b;color:var(--txt);border:1px solid var(--line2);font:inherit;font-size:13px;padding:6px}.fg select:focus-visible{outline:2px solid var(--cy)}
.fg[hidden]{display:none}
.lr .n .affiliation{white-space:normal;line-height:1.5;color:var(--cy)}.location-list{display:grid;gap:8px}.location-list a{display:grid;gap:5px;padding:12px;border:1px solid var(--line);background:var(--panel)}.location-list span,.location-list small{color:var(--txt2);font-size:13px}.vars a{align-items:start}.vars a span{text-align:right}.vars small{display:block;color:var(--mut);font-size:11px;line-height:1.5;margin-top:4px}