/* Métal gravé, cuir sombre et accents de classe. Les zones d'effets gardent leur place. */
.panel,dialog{background:radial-gradient(ellipse at 0 0,#b5956430,transparent 65%),linear-gradient(145deg,#29313af7,#10151ef9 70%);border:1px solid #81735b;box-shadow:0 0 0 2px #080b10,0 0 0 3px #514b3d,0 18px 48px #0009,inset 0 1px #dfc99530,inset 0 0 40px #0005;border-radius:5px}
.panel h1,.panel h2,.panel h3{font-family:Georgia,'Palatino Linotype',serif}.eyebrow,.lbl{color:#cbb487;letter-spacing:.17em}.entry-nav{display:flex;justify-content:space-between;gap:14px;font-size:12px;margin-top:12px}
.btn,button{box-shadow:inset 0 1px #d8e1ec20,0 2px 5px #0005}.btn:focus-visible,button:focus-visible,.pf:focus-visible{outline:2px solid #ffe1a3;outline-offset:3px}
.ranking-link{display:inline-block;color:#e0c48a;font-size:12px;margin:8px 0 16px;text-underline-offset:4px}
#party{width:224px;gap:7px;top:46%;transform:translateY(-46%)}
.pf{height:88px;flex:none;padding:8px;gap:9px;align-items:flex-start;background:linear-gradient(110deg,color-mix(in srgb,var(--class) 14%,#17202a),#111720 65%);border:1px solid #626463;border-radius:4px;box-shadow:0 3px 8px #0007,inset 0 1px #d3dde51a,inset 3px 0 var(--class);overflow:hidden}
.pf:after{content:'';position:absolute;inset:4px;pointer-events:none;border-top:1px solid #d6c5960c;border-bottom:1px solid #d6c5960c}
.pf canvas.pf-icon{width:37px;height:43px;object-fit:cover;background:linear-gradient(#35414d,#121923);border:1px solid #948567;box-shadow:0 0 0 2px #070b10;border-radius:3px;margin:2px 0 0 3px}
.pf-name{font-size:12px;line-height:15px}.pf-spec{color:#aab8c5;font-size:10px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pf .tag-bot{float:right;letter-spacing:.05em;text-transform:uppercase;font-size:8px}
.pf .bar{height:14px;border-color:#06090e;box-shadow:inset 0 1px 2px #0008,0 1px #ffffff10}.pf .bar.r{height:4px;margin-top:3px}.pf .bar b{font-variant-numeric:tabular-nums;font-size:10px}.pf .hp>div{background:linear-gradient(#71c68a,#368554 55%,#286740)}
.pf-buffs{height:20px;min-height:20px;max-height:20px;flex-wrap:nowrap;gap:2px;margin-top:4px;align-items:center;overflow:hidden}.pf-buffs .bi,.pf-buffs canvas,.pf-buffs img{width:17px;height:17px;flex:none;border-radius:2px}.pf-buffs .bi{box-shadow:0 0 0 1px #828875}.pf-buffs:empty:before{content:'';width:100%;height:1px;background:linear-gradient(90deg,#9eafbd24,transparent)}.buff-more{font-size:10px;color:#e5ca93;white-space:nowrap}
.pf.sel{border-color:#dfc18a;box-shadow:inset 3px 0 #edcf95,0 0 0 1px #e3c27a50,0 3px 12px #0008}.pf.aggro{border-color:#d97662;box-shadow:inset 3px 0 #e86e58,0 0 8px #b7352525}.pf.dead{filter:grayscale(.85)}
#bossframe{padding:11px 14px 9px;background:linear-gradient(100deg,#351c21ee,#151d27ee);border:1px solid #887456;border-radius:5px;box-shadow:0 0 0 2px #07090d,0 8px 20px #0005}.b-name{font-family:Georgia,serif;font-size:16px;color:#e8d6b1}.b-bar{box-shadow:0 0 0 1px #9c80633d,inset 0 2px 4px #0008}.b-extra{height:20px}.b-name #b-phase{font-family:var(--ui);font-size:10px}.b-cast{margin-top:7px}
#hotbar,#spells{border:1px solid #a18a60;box-shadow:0 0 0 2px #080b11,0 0 0 3px #5b5140,0 8px 30px #0009,inset 0 1px #e3c79530;background:linear-gradient(#343536f5,#121821f5);padding:7px;border-radius:5px}.hb,.spell{border-color:#9b8968;box-shadow:inset 0 0 0 1px #06090e,0 2px 4px #0008}.hb .key,.spell .key{background:#111823d9;border-right:1px solid #a38d6655;border-bottom:1px solid #a38d6655;border-radius:0 0 4px 0;padding:1px 4px;top:0;left:0;color:#f4dfb3}
#class-mechanic,#mechanic{color:#e9ce96;text-shadow:0 1px 3px #000}#match-top{border-bottom-color:#bca06d}#clock{font-family:Georgia,serif;font-size:24px}
.frames{width:216px;gap:8px}.frame{position:relative;height:112px;flex:none;padding:10px 10px 8px 56px;overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--class) 15%,#18212c),#111922 70%);border:1px solid #627b8e;border-radius:4px;box-shadow:inset 3px 0 #629ac4,0 4px 12px #0008}.frame.enemy{box-shadow:inset 3px 0 #ce7964,0 4px 12px #0008;border-color:#916357}.frame.selected{outline:1px solid #d7bc86;border-color:#e3c896}.frame-portrait{position:absolute;top:12px;left:10px;width:35px;height:43px;border:1px solid #9c8763;border-radius:3px;box-shadow:0 0 0 2px #080e16;background:#2b3542}.frame-name{height:16px;white-space:nowrap;font-size:12px;gap:6px}.frame-name b{overflow:hidden;text-overflow:ellipsis}.frame-name span{color:#98a7b5;font-size:8px}.health{height:12px;border:1px solid #060a10;box-shadow:0 1px #ffffff10}.health i{background:linear-gradient(#73bdaa,#397e67)}.enemy .health i{background:linear-gradient(#d88575,#94493f)}.frame-meta{height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.frame-cast{height:15px;min-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}.frame-buffs{height:20px;display:flex;gap:3px;align-items:center;overflow:hidden;font-size:10px}.frame-buffs:empty:before{content:'';height:1px;width:100%;background:#9aabb522}.frame-buff{position:relative;width:17px;height:17px;flex:none;border:1px solid #84bca0;border-radius:2px}.frame-buff.bad{border-color:#f08b76}.frame-buff canvas{width:15px;height:15px;display:block}.frame-buff b{position:absolute;bottom:-2px;right:-1px;text-shadow:0 1px 3px black;font-size:10px}
@media(max-width:1000px){#party{width:196px}.pf{gap:7px}.pf canvas.pf-icon{width:30px;margin-left:1px}.pf-buffs .bi,.pf-buffs img{width:15px;height:15px}.frames{width:165px}.frame{padding-left:10px}.frame-portrait{display:none}}
@media(max-height:730px) and (min-width:701px){#party{transform:translateY(-46%) scale(.82);transform-origin:left center}.frames{top:20%}}
@media(max-width:700px){#party{width:118px;left:6px;top:176px;transform:none;gap:4px}.pf{height:79px;padding:5px 6px}.pf canvas.pf-icon{display:none}.pf-name{font-size:10px}.pf-spec{font-size:9px}.pf-buffs .bi,.pf-buffs img{width:13px;height:13px}.pf-buffs{gap:2px}.pf .tag-bot{display:none}#bossframe{padding:7px 9px}.b-name{font-size:13px}.frames{width:122px}.frame{height:104px;padding:7px}.frame-name{font-size:11px}.frame-meta{font-size:9px}.frame-buffs{gap:2px}}
@media(prefers-reduced-motion:reduce){.pf,.bar>div{transition:none!important}}