/* Cyclopedia (Bestiary, Bosstiary, Charms, Minha coleção, Itens): Bestiary Arena skin, docs/DESIGN.md.
   Built from the approved mock: pf-panel / pf-head, client buttons, ba-slot quality frames. */
.cy{display:grid;gap:6px;max-width:880px;margin:0 auto}
.cy .pf-panel{margin:0}.cy .pf-head{display:flex;align-items:center;gap:6px}.cy .pf-head small{margin-left:auto}
.cy-well{background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cy-dim{color:#a9a9a9}.cy-white{color:#fff}.cy-gold{color:#e8c547}.cy-ok{color:#5fc85f}.cy-bad{color:#ff8b7e}
.cy img.px,.cy .px{image-rendering:pixelated}
#cy-message:empty{display:none}
/* Section bar */
.cy-bar{display:flex;align-items:center;gap:4px;padding:4px;flex-wrap:wrap}
.cy-bar>button{display:flex;align-items:center;gap:5px;height:30px;padding:0 10px}
.cy-bar>button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.cy-bar .grow{flex:1}.cy-bar input{width:170px}
.cy-crumb{display:flex;align-items:center;gap:6px;color:#c0c0c0;cursor:pointer}
.cy-crumb b{color:#fff}
.cy-boost{display:flex;align-items:center;gap:6px;padding:3px 6px;font-size:11px;color:#c0c0c0}
.cy-boost b{color:#e8c547;font-weight:normal}
/* Class grid */
.cy-classes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px}
.cy-class{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:6px;height:auto;padding:4px 6px 4px 4px;text-align:left;white-space:normal}
.cy-class>img{width:40px;height:40px}
.cy-class b{display:block;color:#fff;font-weight:normal;font-size:11px;line-height:13px}
.cy-class small{display:block;font-size:10px;color:#a9a9a9}
.cy-class.none>img{filter:brightness(0);opacity:.7}.cy-class.none b{color:#a9a9a9}
button.cy-class.done{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.cy-mini{display:flex;gap:1px;height:4px;margin-top:3px}.cy-mini i{flex:1;background:#1c1c1c;box-shadow:inset 0 0 0 1px #111}.cy-mini i.on{background:#5fc85f}
/* Creature grid */
.cy-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px}
.cy-card{display:grid;gap:3px;padding:0 0 4px;height:auto;white-space:normal;align-content:start}
.cy-card .pf-head{justify-content:center;font-size:11px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-card .cy-art{margin:0 6px;height:76px;display:grid;place-items:center;overflow:hidden}
.cy-card .cy-art img,.cy-card .cy-art svg{max-width:64px;max-height:64px}
.cy-card.unknown .cy-art img,.cy-card.unknown .cy-art svg{filter:brightness(0)}
.cy-card.complete{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.cy-card.boosted .cy-art{box-shadow:inset 0 0 0 1px #e8c547,inset 1px 1px #000,1px 1px #6a6a6a}
.cy-stage{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:#c0c0c0}
.cy-hint{font-size:10px;color:#a9a9a9;text-align:center}
.cy-seg{display:flex;gap:1px;width:42px;height:5px}.cy-seg i{flex:1;background:#1c1c1c;box-shadow:inset 0 0 0 1px #111}.cy-seg i.on{background:#5fc85f}
.cy-pager{display:flex;align-items:center;gap:4px;padding:0 6px 6px;flex-wrap:wrap}
.cy-pager .grow{flex:1}
.cy-pager button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
/* Creature detail */
.cr-top{display:grid;grid-template-columns:136px minmax(0,1fr) minmax(0,1fr);gap:8px;padding:6px}
.cr-art{display:grid;gap:4px;justify-items:center;align-content:start}
.cr-art .cy-well{width:132px;height:132px;display:grid;place-items:center;overflow:hidden}
.cr-art .cy-well img,.cr-art .cy-well svg{width:128px;height:128px;object-fit:contain}
.cr-art label{font-size:10px;color:#a9a9a9;display:flex;align-items:center;gap:4px}
.cr-mid{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;align-content:start;min-width:0}
.cy-kills{display:grid;gap:2px}
.cy-kills>span{text-align:center;color:#c0c0c0;font-size:11px}
.cy-bar3{position:relative;display:flex;gap:2px;height:16px}
.cy-bar3 i{flex:1;background:#1c1c1c;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;position:relative;overflow:hidden}
.cy-bar3 i::before{content:'';position:absolute;inset:1px auto 1px 1px;width:var(--f,0%);background:#4a7a3a;box-shadow:inset 0 1px #5fc85f}
.cy-bar3.gold i::before{background:#7c7a3c;box-shadow:inset 0 1px #e8c547}
.cy-bar3 b{position:absolute;inset:0;display:grid;place-items:center;font:bold 11px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;pointer-events:none;white-space:nowrap}
.cy-ticks{display:flex;font-size:9px;color:#a9a9a9}.cy-ticks span{flex:1;text-align:right;padding-right:2px}
.cr-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px}
.cr-stats>div{display:flex;align-items:center;gap:5px;font-size:11px;color:#fff;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cr-stats>div .ti{flex:0 0 auto}.cr-stats b{margin-left:auto}
.cy-stars{color:#e8c547;letter-spacing:1px}.cy-stars u{color:#6f6f6f;text-decoration:none}
.cy-dias{color:#c0c0c0;letter-spacing:1px}.cy-dias u{color:#6f6f6f;text-decoration:none}
.cr-charm{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px;align-items:center}
.cr-charm .cy-well{width:40px;height:40px;display:grid;place-items:center;overflow:hidden}
.cr-charm .cy-well img{max-width:36px;max-height:36px}
.cr-charm small{font-size:10px;color:#a9a9a9}
.cr-charm-row{display:flex;gap:4px;align-items:center}.cr-charm-row select{flex:1;min-width:0}
.cr-side{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;min-width:0}
.cr-side>div>small{font-size:10px;color:#a9a9a9}
.cy-res{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
.cy-res>div{display:grid;grid-template-columns:16px 1fr 30px;align-items:center;gap:4px;font-size:10px;color:#c0c0c0}
.cy-res .rb{height:7px;position:relative}
.cy-res .rb::before{content:'';position:absolute;inset:1px auto 1px 1px;width:calc(var(--w,0%) - 2px);background:var(--c,transparent)}
.cy-res .locked{color:#6f6f6f}
.cy-locs{padding:4px 6px;min-height:58px;max-height:96px;overflow:auto;font-size:11px;color:#fff;line-height:15px}
.cy-locs small{color:#a9a9a9}
.cy-lock{display:flex;align-items:center;gap:5px;color:#a9a9a9;font-size:11px}
.cr-row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cy-skills{display:flex;gap:6px;padding:6px}
.cy-skill{display:grid;grid-template-columns:34px 1fr;gap:5px;align-items:center;flex:1;min-width:0}
.cy-skill>.cy-well{width:34px;height:34px;display:grid;place-items:center}
.cy-skill small{display:block;font-size:9px;color:#a9a9a9}.cy-skill span span{font-size:11px;line-height:12px;color:#fff}
.cy-coll{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px}
.cy-coll>div{display:grid;justify-items:center;gap:1px;padding:3px}.cy-coll b{color:#fff}.cy-coll small{font-size:9px;color:#a9a9a9;text-align:center}
.cy-loot{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:3px 10px;padding:6px}
.cy-loot-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:6px}
.cy-loot-row>span{font-size:11px;color:#c0c0c0}
.cy-slots{display:grid;grid-template-columns:repeat(6,34px);gap:2px}
.cy-slot{position:relative;width:34px;height:34px;padding:0;background:var(--slot-fill,#262626);border:1px solid #121212;box-shadow:inset 0 0 0 1px var(--slot-edge,#3c3c3c),inset 0 0 6px 2px var(--slot-glow,transparent);display:grid;place-items:center;overflow:hidden}
.cy-slot img,.cy-slot svg{max-width:32px;max-height:32px}
.cy-slot em{position:absolute;right:1px;bottom:0;font:bold 9px 'Tibia Pixel',Verdana,sans-serif;font-style:normal;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.cy-slot.q{color:#6f6f6f;font-size:13px}
.cy-foot{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cy-chip{display:flex;align-items:center;gap:4px;height:24px;padding:0 8px;font-size:11px;color:#fff}
.cy-foot .grow{flex:1}
/* Tracker */
.cy-tracker{display:grid;gap:3px;padding:6px}
.cy-track{display:grid;grid-template-columns:36px 1fr 120px auto;align-items:center;gap:6px;padding:2px 4px}
.cy-track .cy-well{width:34px;height:34px;display:grid;place-items:center;overflow:hidden}.cy-track .cy-well img{max-width:32px;max-height:32px}
.cy-track span{font-size:11px;color:#fff}.cy-track small{display:block;font-size:10px;color:#a9a9a9}
/* Bosstiary */
.bt-top{display:grid;grid-template-columns:170px 1fr;gap:6px}
.bt-legend{display:grid;gap:3px;padding:6px;font-size:11px;color:#fff}
.bt-legend>div{display:grid;grid-template-columns:30px 1fr;gap:4px;align-items:center;white-space:nowrap}.bt-legend .cy-dim{font-size:10px}
.bt-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 8px;padding:6px;font-size:11px;color:#fff}
.bt-filters label{display:flex;align-items:center;gap:4px;white-space:nowrap}
.bt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px}
.bt-card{display:grid;gap:3px;padding:0 0 5px}
.bt-card .pf-head{justify-content:center;font-size:11px;white-space:nowrap;overflow:hidden}
.bt-card .cy-art{position:relative;height:84px;display:grid;place-items:center;margin:0 6px;overflow:hidden}
.bt-card .cy-art>img,.bt-card .cy-art>svg{max-width:96px;max-height:80px}
.bt-card .bt-cat{position:absolute;left:3px;top:3px}
.bt-card .bt-boost{position:absolute;right:3px;top:2px;font-size:9px;color:#e8c547}
.bt-card.unknown .cy-art>img,.bt-card.unknown .cy-art>svg{filter:brightness(0)}
.bt-card.boosted{border-color:#e8c547;box-shadow:inset 0 0 0 1px #e8c547}
.bt-tk{display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:10px;color:#c0c0c0}
.bt-tk label{display:flex;align-items:center;gap:3px}
.bt-card .cy-bar3{margin:0 6px;height:14px}
.bt-st{display:flex;padding:0 6px}.bt-st span{flex:1;text-align:center;font-size:10px;color:#6f6f6f;letter-spacing:-1px}.bt-st span.on{color:#e8c547}
.bt-where{display:block;text-align:center;font-size:9px;color:#a9a9a9;padding:0 4px}
/* Charms */
.ch-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px}
.ch-card{display:grid;justify-items:center;gap:2px;padding:5px 3px;height:auto;white-space:normal;align-content:start}
.ch-card>img{height:44px;width:auto}
.ch-card b{font-weight:normal;color:#fff;font-size:11px}.ch-card small{font-size:9px;color:#a9a9a9;text-align:center;line-height:11px}
.ch-card.locked>img{filter:grayscale(1) brightness(.6)}
.ch-card.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.ch-detail{display:grid;grid-template-columns:56px 1fr;gap:8px;padding:6px;align-items:start}
.ch-detail>.cy-well{width:56px;height:56px;display:grid;place-items:center}
.ch-detail p{margin:0 0 4px;color:#c0c0c0;font-size:11px}
.ch-grades{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:4px 0}
.ch-grades>div{display:block;min-width:0;padding:3px 6px;font-size:10px;line-height:13px;color:#c0c0c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch-grades b{font-weight:normal;color:#fff}
.ch-detail>div{min-width:0}.ch-grades>div.on{color:#fff;box-shadow:inset 0 0 0 1px #c5b47c}
.ch-actions{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.ch-actions select{min-width:160px}
/* Configuration panel */
.cy-config .pf-tabs{margin:0}
.cy-config table{width:100%}
.cy-config td,.cy-config th{padding:2px 4px;font-size:11px;text-align:left}
.cy-config td input[type=number]{width:70px}
.cy-config .editor-form{grid-template-columns:repeat(3,minmax(0,1fr));margin:6px}
.cy-config,.cy-config .cy-cfg-pad{grid-template-columns:minmax(0,1fr)}
.cy-config .cy-cfg-pad{padding:6px;display:grid;gap:6px;overflow-x:auto}
.cy-rule{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px}
.cy-rule label{display:grid;gap:2px;font-size:11px;color:#c0c0c0}
.cy-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 6px;max-height:180px;overflow:auto;padding:6px;font-size:11px}
.cy-picks label{display:flex;align-items:center;gap:4px;color:#c0c0c0}
@media(max-width:600px){
 .cy-bar>button span{display:none}.cy-bar>button{padding:0 8px}.cy-bar input{width:100%;order:9}
 .cy-classes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cr-top{grid-template-columns:92px minmax(0,1fr)}
 .cr-art .cy-well{width:88px;height:88px}.cr-art .cy-well img,.cr-art .cy-well svg{width:84px;height:84px}
 .cr-side{grid-column:1/-1}
 .cr-row2{grid-template-columns:1fr}
 .cy .pf-head small,.cy .cy-hide-m{display:none}
 .cr-stats{gap:2px 6px}.cr-stats .cy-stat-name{display:none}
 .cr-art label{font-size:9px}
 .cy-skills{flex-wrap:wrap}.cy-skill{flex:1 1 30%}.cy-skill small{display:none}
 .cy-loot{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}.cy-loot-row{grid-template-columns:54px 1fr}
 .bt-top{grid-template-columns:1fr}.bt-filters{grid-template-columns:repeat(2,1fr)}
 .bt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cy-track{grid-template-columns:36px 1fr 80px}.cy-track button{grid-column:1/-1}
 .cy-config .editor-form,.cy-rule{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cy-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cy-foot .cy-chip{flex:1}
}
/* The creature window over other screens (map picker): overflow only on the class, as the raid window. */
.cy-modal{padding:0;overflow:hidden}
dialog.window.cy-modal{width:min(900px,calc(100vw - 12px));max-height:calc(100dvh - 12px)}
.cy-modal #bestiary-body{padding:6px;overflow:auto;max-height:calc(100dvh - 40px);box-sizing:border-box}
/* Cyclopedia › Itens: the equipment catalog, read only. */
.cy-item-filters{display:flex;gap:4px;flex-wrap:wrap;padding:6px}
.cy-item-filters input{flex:1 1 160px}
.cy-item-group{display:flex;align-items:center;gap:6px;margin:6px 6px 2px;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.cy-item-group small{color:#a9a9a9}
.cy-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px;padding:0 6px 6px}
.cy-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px;align-items:center;height:auto;padding:4px;text-align:left;white-space:normal}
.cy-item strong{display:block;color:#fff;font-size:11px}
.cy-item small{display:block;color:#a9a9a9;font-size:10px}
.cy-item.is-owned{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.cy-item .tiny{width:32px;height:32px}