/* Azeroth Journey — design system v0.4 */
:root{--legendary:#e8a146;--epic:#bd94ef;--major:#8cbfd6;--minor:#809a9a}
.char-grid{gap:10px;margin-top:14px}
.char-button{padding:10px;gap:12px;min-height:72px;position:relative;border:1px solid #57615b;background:linear-gradient(110deg,#263336,#1b292e);border-radius:10px}
.char-button.active{border-color:#dfbc83;box-shadow:0 0 0 1px #d9aa6440,inset 0 0 20px #af8f4015}
.char-button small{font-size:11px;line-height:1.4;margin-top:4px}.char-button b{font:600 14px/1.3 Georgia,serif}.char-info{display:block;min-width:0}
.class-portrait{--class-color:#c7b9a0;display:inline-flex;align-items:center;justify-content:center;position:relative;width:43px;height:43px;flex:none;border:2px solid var(--class-color);background:#161e22;border-radius:11px;box-shadow:0 3px 14px #0009,0 0 0 2px #0006;overflow:visible}
.class-portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;position:absolute;inset:0}
.portrait-fallback{font:bold 20px Georgia;color:var(--class-color)}
.portrait-level{position:absolute;z-index:2;bottom:-9px;right:-8px;display:inline-grid;place-items:center;min-width:23px;height:23px;padding:0 5px;background:linear-gradient(#403523,#191d1a);border:1px solid #d7b776;border-radius:12px;box-shadow:0 2px 7px #000a;color:#f3dba6;font:bold 11px/1 Georgia}
.marker{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;width:54px!important;height:54px!important;overflow:visible!important}
.marker .class-portrait{width:48px;height:48px;border-width:3px;border-radius:50%;box-shadow:0 3px 15px #000d,0 0 0 3px #121b1fbb,0 0 16px var(--class-color)}
.marker .class-portrait img{border-radius:50%}.marker .portrait-level{right:-7px;bottom:-8px;min-width:25px;height:25px}
.marker.active .class-portrait{box-shadow:0 0 0 3px #d7b577,0 0 22px #eec87ac0,0 4px 12px #000b}
.map-stage .marker-name{
 position:absolute;left:50%;top:calc(100% + 4px);z-index:4;max-width:160px;
 padding:3px 7px;overflow:hidden;transform:translate(-50%,-3px);
 border:1px solid #a88043;background:linear-gradient(145deg,#282018f5,#111522f5);
 box-shadow:0 3px 9px #000b,inset 0 1px #f4d78c22;
 color:#f4d79f;font:700 10px/1.2 Georgia,serif;letter-spacing:.35px;
 text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000;
 opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease
}
.map-stage .marker:hover .marker-name,
.map-stage .marker.active .marker-name,
.map-stage .marker:focus-visible .marker-name{opacity:1;transform:translate(-50%,0)}
/* Character identity should be readable at a glance on the world map. */
.map-stage .marker .marker-name{opacity:1;transform:translate(-50%,0)}
.map-stage .marker{position:absolute;isolation:isolate}
.map-stage .marker.has-collision{transform:translate(calc(-50% + var(--marker-dx)),calc(-50% + var(--marker-dy)))}
.map-stage .marker.has-collision::before{
 content:"";position:absolute;left:calc(50% - var(--marker-dx));top:calc(50% - var(--marker-dy));
 width:var(--leader-length);height:2px;transform:rotate(var(--leader-angle));transform-origin:left center;
 border-radius:2px;background:linear-gradient(90deg,#d2ac6a99,#f2d795ed);
 box-shadow:0 0 4px #090807;pointer-events:none;z-index:-1
}
.map-stage .marker.has-collision:hover::before,.map-stage .marker.has-collision.active::before{background:#ffe4a9;box-shadow:0 0 6px #ffdc9d99}
.map-viewport .controls{
 display:flex!important;right:clamp(12px,2vw,30px)!important;top:clamp(116px,19vh,164px)!important;bottom:auto!important;z-index:24;gap:4px;padding:5px;
 border:1px solid #98723e;background:linear-gradient(145deg,#1f2938ed,#0b111ceF);
 box-shadow:inset 0 1px #f4d99526,0 5px 16px #000b
}
.map-viewport.zone-map-mode .controls{top:clamp(205px,27vh,238px)!important}
.map-viewport .controls button{
 display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;
 border:0!important;border-radius:2px!important;
 background:url('assets/ui/forge-button-plate.png') center/100% 100% no-repeat!important;
 color:#f2d899!important;font:700 21px/1 Georgia,serif!important;text-shadow:0 1px 2px #000;
 box-shadow:none!important;touch-action:manipulation
}
.map-viewport .controls button:hover{filter:brightness(1.2)}
.map-viewport .controls button:disabled{opacity:.42;filter:saturate(.5);cursor:default}
.map-viewport .controls output{display:grid;place-items:center;min-height:23px;color:#ddc58f;font:700 9px/1 Georgia,serif;letter-spacing:.4px}
.map-viewport:focus-visible{outline:2px solid #f2d899;outline-offset:-4px}
.map-stage .marker::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:50%;pointer-events:none;z-index:2}
.map-stage .marker.is-location-recent::after{border-color:#83c69b}
.map-stage .marker.is-location-stale::after{border-color:#b88856;border-style:dashed}
.map-stage .marker.is-location-approximate::after{border-color:#b5a17a;border-style:dotted}
.map-stage .marker.is-location-unknown::after{border-color:#b77970;border-style:dashed}
@media(max-width:850px){html body .layout>.hall-panel.is-collapsed{top:auto!important;bottom:clamp(78px,12vh,104px)!important}}
@media(max-width:850px){html body .layout>.panel.is-open{top:max(6px,env(safe-area-inset-top))!important;bottom:max(6px,env(safe-area-inset-bottom))!important;z-index:45!important}}
@media(max-width:480px){.map-viewport .controls{right:8px!important;gap:3px;padding:4px}.map-viewport:not(.zone-map-mode) .controls{top:180px!important}.map-viewport.zone-map-mode .controls{top:205px!important}.map-viewport .controls button{width:40px;height:40px;min-height:40px}}
@media(prefers-reduced-motion:reduce){.map-viewport .controls button{transition:none!important}}
.detail{margin:16px 0 6px;padding:17px;background:linear-gradient(135deg,#2a3839,#1b292d)}
.detail .player-head{display:flex;align-items:center;gap:14px}.detail .player-head .class-portrait{width:58px;height:58px;border-radius:12px}.detail .player-head .class-portrait img{border-radius:9px}
.detail .player-name{display:flex;flex-direction:column;min-width:0;flex:1}.detail .player-name .name{font-size:25px;margin-bottom:4px}.detail .player-caption{color:#b0c3c2;font-size:12px}
.detail .activity-heading{font:700 11px system-ui,sans-serif;letter-spacing:1.4px;text-transform:uppercase;margin:21px 0 9px;color:#e6cd95;display:flex;justify-content:space-between;gap:8px;align-items:center}
.activity-count{font:400 10px system-ui;color:#9faead;letter-spacing:0;text-transform:none}
.feed-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px}.feed-head h3{margin:15px 0 3px}
.feed-head .feed-sub{margin:0 0 9px;color:#b2b5ad;font-size:11px;line-height:1.5}
.feed-pill{font:700 10px system-ui;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;color:#e5cf9e;border:1px solid #786641;border-radius:18px;padding:5px 9px;background:#3e362720}
#events{display:grid;gap:9px;margin:8px 0 10px}
.activity-list{display:grid;gap:8px;max-height:340px;overflow:auto;padding:2px 2px 5px 0}
.event-card{--tier-color:var(--minor);display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;padding:12px 11px;background:linear-gradient(115deg,#253337,#1c292e);border:1px solid #415052;border-left:3px solid var(--tier-color);border-radius:9px;box-shadow:inset 0 1px #ffffff09}
.event-card.tier-legendary{--tier-color:var(--legendary);background:linear-gradient(110deg,#4b3823,#252d2c);border-color:#806644;box-shadow:0 0 18px #d4943920}
.event-card.tier-epic{--tier-color:var(--epic);background:linear-gradient(110deg,#33293f,#202c33);border-color:#746182}
.event-card.tier-major{--tier-color:var(--major);background:linear-gradient(110deg,#263944,#202d32);border-color:#526d78}
.event-emblem{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--tier-color);border-radius:9px;color:var(--tier-color);background:#131f2480;font:22px Georgia;text-shadow:0 1px 7px #0009}
.event-body{min-width:0}.event-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.event-tier{font:700 10px/1.3 system-ui;letter-spacing:1.15px;color:var(--tier-color);text-transform:uppercase}
.event-time{font:10px system-ui;color:#a3adab}.event-title{display:block;font:700 13px/1.35 Georgia;margin:3px 0 2px;color:#f5ebd9;overflow-wrap:anywhere}
.event-detail{font:11px/1.5 system-ui;color:#b1bbba;overflow-wrap:anywhere}
.activity-list .event-card{grid-template-columns:31px minmax(0,1fr);gap:9px;padding:9px}
.activity-list .event-emblem{width:27px;height:27px;font-size:16px;border-radius:7px}.activity-list .event-title{font-size:12px}
.layout>.panel .detail .activity-list .event-card{
 border:1px solid #5e543e!important;border-left:3px solid var(--tier-color)!important;border-radius:3px!important;
 background-image:linear-gradient(120deg,#17243aee,#0d1423ec),url('assets/ui/forge-panel-texture.webp')!important;
 background-size:auto,cover!important;box-shadow:inset 0 1px #fff1,0 3px 9px #0008!important
}
.layout>.panel .detail .activity-list .event-card.tier-legendary{background-image:linear-gradient(120deg,#513a20ed,#131a29ed),url('assets/ui/forge-panel-texture.webp')!important}
.layout>.panel .detail .activity-list .event-card.tier-epic{background-image:linear-gradient(120deg,#382b4ced,#121827ec),url('assets/ui/forge-panel-texture.webp')!important}
.layout>.panel .detail .activity-list .event-card.tier-major{background-image:linear-gradient(120deg,#243e4bed,#101927ec),url('assets/ui/forge-panel-texture.webp')!important}
.layout>.panel .doll-stage{
 background:linear-gradient(180deg,#10172318,#080c1488),url('assets/ui/forge-mannequin-placeholder.jpg') center/cover no-repeat!important;
 border-color:#897048!important
}
.layout>.panel .doll-stage .doll-halo,.layout>.panel .doll-stage .doll-body,.layout>.panel .doll-stage .doll-portrait{display:none!important}
.layout>.panel .doll-stage::after{
 content:"GENERIC MANNEQUIN";position:absolute;top:8px;left:4px;right:4px;z-index:2;
 color:#d2bd8a;font:700 8px/1.2 Georgia,serif;letter-spacing:.65px;text-align:center;text-shadow:0 1px 3px #000
}
.feed-empty{border:1px dashed #5b645d;border-radius:10px;padding:17px;background:#20303655;color:#b8bdba;font-size:12px;line-height:1.6}
.frontpage-note{display:block;margin:4px 0 7px;font-size:10px;line-height:1.5;color:#96aaa7}
@media(max-width:760px){.char-grid{grid-template-columns:1fr 1fr}.feed-head{margin-top:7px}}
@media(max-width:390px){.char-grid{grid-template-columns:1fr}.char-button{min-height:60px}}

/* Keep the collapsed mobile Hall as a compact map control, not a full empty card. */
@media(max-width:850px){
 .layout>.hall-panel.is-collapsed{
  border-width:8px!important;border-image-width:8px!important;
  box-shadow:inset 0 0 0 1px #d6a24a22,0 5px 16px #000b!important
 }
 .layout>.hall-panel.is-collapsed::before,.layout>.hall-panel.is-collapsed::after{display:none!important}
 .layout>.hall-panel.is-collapsed .hall-heading{
  display:grid!important;grid-template-columns:minmax(0,1fr) 31px;align-items:center;gap:3px;
  padding:3px 5px!important;background:linear-gradient(180deg,#202b40,#141c2c)!important
 }
 .layout>.hall-panel.is-collapsed .hall-eyebrow,
 .layout>.hall-panel.is-collapsed .hall-heading p{display:none!important}
 .layout>.hall-panel.is-collapsed .hall-heading h2{
  grid-column:1;grid-row:1;height:27px!important;margin:0!important;
  background-size:contain!important;background-position:left center!important
 }
 .layout>.hall-panel.is-collapsed .hall-actions{grid-column:2;grid-row:1;justify-content:flex-end}
 .layout>.hall-panel.is-collapsed .hall-collapse{width:29px;height:28px;min-height:28px}
}