/* Azeroth Journey — Warcraft-inspired visual skin, 2026.
   Presentation only. The current DOM controls, map geometry and JS are unchanged.
   Custom borders, ornaments, and controls use original PNG artwork. */
:root{
 --bg:#0f0b09;--chrome:#17120d;--panel:#1b1715;--line:#77512a;
 --gold:#f5cf78;--gold2:#bd8335;--text:#f6e7c9;--muted:#c4ad87;
 --soft:#2b2018;--mint:#9acf7c;
 --aj-gold:#e6b958;--aj-blue:#07254a;--aj-red:#68120c;
 --aj-frame:inset 0 0 0 1px #221407,inset 0 0 0 3px #b17a2d,inset 0 0 0 4px #473019,inset 0 2px 12px #ebad4830,0 6px 20px #0008;
}
html,body{background:
 radial-gradient(ellipse at 50% -10%,#4a301c 0,transparent 52%),
 repeating-linear-gradient(135deg,#ffffff02 0 2px,transparent 2px 6px),
 #100d0b;color:var(--text)}
button,input,select,textarea{font-family:Georgia,'Times New Roman',serif}
button{transition:filter .14s ease,box-shadow .14s ease,border-color .14s ease}
button:hover{filter:brightness(1.13)}
button:focus-visible,a:focus-visible{outline:2px solid #f3d888;outline-offset:3px}
header{
 height:100px;padding:3px 26px;
 background:linear-gradient(180deg,#322014 0%,#170f0b 65%,#0a0908 100%);
 border-bottom:3px ridge #bd8740;box-shadow:0 6px 21px #000b,inset 0 -2px #2c1d11;
}
header>div:first-child{position:relative;display:flex;align-items:center;min-height:88px}
header h1{
 display:flex;align-items:center;justify-content:center;
 width:min(420px,45vw);height:88px;padding:0 42px 0 32px;margin:0;
 background:url('assets/ui/forge-crest.png') center/100% 100% no-repeat;
 color:#ffe5a0;font:bold small-caps clamp(18px,2.2vw,31px)/1 Georgia,serif;
 text-align:center;letter-spacing:.7px;
 text-shadow:0 2px 2px #000,1px 0 #40210b,-1px 0 #40210b,0 0 10px #e7a44388;
}
header .tagline{display:none}
header .right{font:bold 11px Georgia,serif;letter-spacing:2px;color:#d8c197;text-shadow:0 1px 2px #000}
header .dot{background:#ffbd43;box-shadow:0 0 9px #ffd271}
.layout{height:calc(100vh - 100px)}
.main{background:#0c0b09;border-right:2px ridge #9f6a30}
.atlas-head{
 min-height:70px;padding:11px 17px;gap:12px;
 background:linear-gradient(180deg,#302316,#180f0b);
 border-bottom:4px ridge #95662c;
 box-shadow:inset 0 1px #eab65c45;
}
.atlas-head .intro{font:italic 12px Georgia,serif;color:#cdb58b}
.tabs{gap:4px}
.tab,.tool,.hall-switch button,
.btn-primary,#importCharacter{
 appearance:none;position:relative;min-height:35px;padding:8px 13px;
 color:#f6deb0!important;text-shadow:0 2px 2px #000;
 font:700 12px Georgia,serif;
 border:2px ridge #b8883f!important;border-radius:3px!important;
 background:linear-gradient(180deg,#55402a 0%,#312318 14%,#1b1c23 53%,#1a1411 87%,#4d3419 100%)!important;
 box-shadow:inset 0 1px #f4cf7d60,inset 0 -1px #110a09,0 2px 6px #0009!important;
}
.tab.active,.hall-switch button.active,.btn-primary,#importCharacter{
 background:linear-gradient(180deg,#aa4320 0%,#6e160d 30%,#450a07 83%,#7f371d 100%)!important;
 border-color:#e8b860!important;color:#ffe29a!important;
 box-shadow:inset 0 1px #f8ce865e,0 0 10px #c8542135,0 3px 8px #0009!important;
}
.tab:hover,.tool:hover,.hall-switch button:hover{border-color:#ffe3a0!important}
.map-viewport{
 touch-action:none!important;
 background:radial-gradient(ellipse,#68502b 0%,#281d13 55%,#0d0c0a 100%);
 box-shadow:inset 0 0 28px #090704e0;
}
.map-viewport::after{box-shadow:inset 0 0 58px #090706a8, inset 0 0 0 5px #45290f, inset 0 0 0 8px #bb893e,inset 0 0 0 10px #30200d}
.map-stage{box-shadow:0 9px 22px #000c,0 0 0 1px #3b220d,0 0 0 4px #b38a45,0 0 0 6px #452e12; border-radius:1px}
.map-notice{background:linear-gradient(140deg,#211812ee,#090e16ed)!important;border:1px solid #a87a3d!important;border-radius:2px;color:#dfc292;font:11px Georgia,serif}
#backZone{
 min-height:36px;padding:8px 18px;
 color:#f8e4b7;background:linear-gradient(#6d2013,#280b08);
 border:2px ridge #d4a45b;border-radius:2px;
 font:bold 13px Georgia,serif;text-shadow:0 1px #000;
 box-shadow:0 3px 9px #0009
}
.map-toolbar{padding:11px 15px;min-height:59px;background:linear-gradient(#332517,#1a1210);border-top:4px ridge #ad7a39;box-shadow:inset 0 1px #ffe2a129}
#sourceStatus,#cloudSyncStatus{font:11px Georgia,serif;color:#d5bc8a}
.hall-panel{
 background:radial-gradient(ellipse at 40% 0,#3a2519,transparent 60%),linear-gradient(#25190f,#100e14 65%,#14100c);
 border-left:4px ridge #a77b3f;border-right:3px ridge #8d6336;
}
.hall-heading{padding:20px 16px 18px;background:linear-gradient(#362316,#1a1210);border-bottom:3px ridge #94703c}
.hall-eyebrow{letter-spacing:1.6px;color:#d7b16b;font:10px Georgia,serif}
.hall-heading h2,.panel h2{
 position:relative;z-index:0;margin:8px 0 10px;
 color:#ffe3a0;font:bold small-caps 26px/1.4 Georgia,serif;
 text-align:center;text-shadow:0 2px 2px #1b0805,0 0 9px #a0581d88;
}
.hall-heading h2:before,.panel h2:before{
 content:"";position:absolute;inset:-4px -8px;z-index:-1;
 background:url('assets/ui/forge-title-plaque.png') center/100% 100% no-repeat;
}
.hall-heading p{color:#e0c69a}
.hall-switch{margin-top:13px}
.hall-summary{
 background:linear-gradient(#281c13,#171423);border:1px solid #ad823e;
 box-shadow:inset 0 1px #ffe1a31d;border-radius:2px;color:#f4d79c
}
.hall-feed{padding:12px 13px 22px;gap:12px}
.hall-card,.hall-card.is-rare{
 background:linear-gradient(140deg,#151b30 0%,#0b1126 48%,#181524 100%);
 border:2px ridge #a97c37;border-radius:3px;
 box-shadow:inset 0 0 0 1px #080b16,0 5px 10px #0008;
 padding:15px 11px;
}
.hall-card.is-rare{border-color:#d3a43b;box-shadow:inset 0 0 14px #ebaa3b30,0 0 13px #e7a32c25,0 5px 10px #0008}
.hall-icon,.event-emblem{background:radial-gradient(#27344a,#090e21);border:2px ridge #c2954c;border-radius:2px;color:#efcd75}
.hall-type{font:bold 10px Georgia,serif;letter-spacing:1px;color:#e3c286}
.hall-title{font:700 14px Georgia,serif;color:#ffdf9a}
.hall-who{color:#f4c55f}.hall-detail{color:#e0d6c4}.hall-stamp{color:#a99c87}
.hall-reaction{background:linear-gradient(#392a1b,#171527);border:1px solid #987441;border-radius:2px}
.hall-reaction[aria-pressed=true]{background:#72451f;border-color:#f8c763}
.panel{
 background:radial-gradient(ellipse at 50% 0,#382417,transparent 65%),linear-gradient(#24180f,#120e0d);
 border-left:3px ridge #ad8342;padding:19px 16px 23px
}
.panel h2{margin:0 8px 16px}.panel h3{color:#f2c978;font:bold small-caps 17px Georgia,serif;letter-spacing:.8px}
.panel h3:after,.activity-heading:after{content:"";display:block;height:2px;margin:8px 0 14px;background:linear-gradient(90deg,transparent,#94703e 12%,#ebc878 50%,#94703e 88%,transparent);opacity:.75}
.sub,.footnote{color:#ceb89a}
.char-button{
 background:linear-gradient(135deg,#2a2021,#101423)!important;
 border:2px ridge #8f6533!important;border-radius:3px!important;min-height:74px;
 box-shadow:inset 0 1px #fbdb8a28,0 4px 8px #0009!important
}
.char-button.active,.char-button:hover{background:linear-gradient(125deg,#4b2519,#121b2e)!important;border-color:#e6b95c!important}
.char-button b{font:bold 15px Georgia,serif;color:#f9d78c}
.char-button small{color:#c7b9a0}
.class-portrait{border-radius:4px;box-shadow:0 0 0 2px #261707,0 0 0 4px #a97837,0 3px 12px #000b;background:#090d16}
.class-portrait img{border-radius:2px}
.portrait-level{background:linear-gradient(#66421c,#23170d);border:1px solid #e2b35f;color:#ffe2a0}
.detail{background:linear-gradient(145deg,#1b2030,#14101a 65%,#241a13);border:3px ridge #a57a39;border-radius:3px;box-shadow:inset 0 0 0 1px #130d0b,0 8px 14px #0008}
.detail .name{color:#ffd883}
.stats .stat{border-color:#705633}
.event-card{border:1px solid #8b713f;border-left:4px solid var(--tier-color);border-radius:2px;background:linear-gradient(115deg,#242331,#111523);box-shadow:0 3px 9px #0008}
.zone-position-summary{background:linear-gradient(145deg,#2d1a10f4,#111728f4);border:2px ridge #b68a44;border-radius:2px;box-shadow:var(--aj-frame)}
textarea,input,select{background:#131522;color:#f0e0c2;border:1px solid #936e38;border-radius:2px}
textarea:focus,input:focus,select:focus{outline:1px solid #f6cb70}
.hall-empty,.feed-empty{background:linear-gradient(#1b1a23,#151014);border:1px solid #8d713e;border-radius:2px}
@media(max-width:1150px) and (min-width:851px){.layout{height:auto}.layout>.main{min-height:590px}}
@media(max-width:850px){.layout{height:auto}.layout>.main{min-height:450px}.hall-panel{border-top:4px ridge #ba8e4d}}
@media(max-width:760px){
 header{height:78px;padding:0 8px}
 header>div:first-child{min-height:74px}
 header h1{height:72px;width:min(340px,86vw);font-size:clamp(19px,4.5vw,27px)}
 .atlas-head{padding:9px}
 .tab,.tool{padding:7px 9px}
}
@media(max-width:440px){
 header h1{width:min(290px,95vw);font-size:20px}
 .panel h2,.hall-heading h2{font-size:23px}
 .map-notice{font-size:10px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}