/* Ashenfold M2: world events tracker, fast travel box, achievement toasts, the journal (N), rift timer.
   Built on the #panel look from index.html (Cinzel headings, ember accents). Class names are prefixed m2-. */
#m2-event{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}
.m2-ev{min-width:220px;max-width:min(330px,44vw);text-align:right;background:color-mix(in srgb, var(--af-void) 72%, transparent);border-right:3px solid var(--c);border-radius:var(--af-cut-sm) 0 0 var(--af-cut-sm);corner-shape:bevel;padding:5px 10px 6px;text-shadow:0 1px 2px var(--af-void)}
.m2-ev b{display:block;font-family:Cinzel,serif;font-size:15px;color:var(--c);letter-spacing:.02em}
.m2-ev span{display:block;font-size:13px;color:var(--bone)}
.m2-ev small{font-size:11px;color:var(--muted);margin-left:6px}
#m2-nav{left:16px;top:calc(143px + env(safe-area-inset-top,0px));width:min(250px,38vw);display:flex;flex-direction:column;gap:3px;padding:6px;background:color-mix(in srgb, var(--af-void) 74%, transparent);border:1px solid color-mix(in srgb, var(--af-iron-300) 19%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;z-index:4;text-shadow:0 1px 2px var(--af-void)}
.m2-nav-row{display:grid;grid-template-columns:19px minmax(0,1fr) 27px;gap:5px;align-items:center;min-height:25px;padding:2px 5px;border-left:2px solid var(--c);background:color-mix(in srgb, var(--af-iron-300) 6%, transparent);color:var(--c);font:600 12px "Alegreya Sans",sans-serif}
.m2-nav-row.tracked{background:color-mix(in srgb, var(--af-gold-300) 9%, transparent)}
.m2-nav-arrow{display:inline-block;font-size:17px;line-height:1;transform:rotate(var(--a));text-align:center}
.m2-nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m2-nav-row small{text-align:right;color:var(--bone);font-size:11px;font-weight:500}
body:has(#mapov:not(.hidden)) #m2-nav{display:none}
.m2-bar{display:inline-block;width:150px;height:6px;background:color-mix(in srgb, var(--af-void) 67%, transparent);border:1px solid color-mix(in srgb, var(--af-iron-300) 19%, transparent);border-radius:3px;overflow:hidden;vertical-align:middle;margin-top:4px}
.m2-bar b{display:block;height:100%;background:var(--c);transition:width .2s}
.m2-bar.red b{background:var(--af-blood-300)}
#m2-travel{position:fixed;left:50%;top:calc(58px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(440px,94vw);max-height:60vh;overflow:auto;background:var(--panel);border:1px solid color-mix(in srgb, var(--af-ember-300) 53%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:12px 14px;box-shadow:0 10px 40px color-mix(in srgb, var(--af-void) 80%, transparent);z-index:3}
#m2-travel h3{font-family:Cinzel,serif;color:var(--ember);margin:0 0 6px;font-size:18px}
#m2-travel p{margin:6px 0;font-size:13px}
.m2-tlist{display:flex;flex-direction:column;gap:4px;margin:6px 0}
#m2-travel .m2-tlist button{text-align:left;margin:0;font:600 14px "Alegreya Sans",sans-serif}
.m2-warn{color:var(--af-blood-300)}
.m2-leg{color:var(--af-gold-300)}
#m2-fade{position:fixed;inset:0;background:var(--af-void);pointer-events:none;opacity:0;z-index:40}
#m2-fade.on{animation:m2fade 1.1s ease-out}
@keyframes m2fade{0%{opacity:1}25%{opacity:1}100%{opacity:0}}
.m2-gossip{display:block;margin-top:6px;color:var(--af-ash);font-style:italic}
.tb.m2-horse{right:160px;bottom:calc(178px + env(safe-area-inset-bottom,0px));font-size:11px}
/* achievement toasts */
#m2-toasts{position:fixed;right:16px;top:calc(96px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none;z-index:25}
.m2-toast{display:flex;gap:12px;align-items:center;min-width:260px;max-width:min(360px,60vw);background:linear-gradient(100deg,color-mix(in srgb, var(--af-stone-800) 95%, transparent),color-mix(in srgb, var(--af-iron-900) 95%, transparent));border:1px solid color-mix(in srgb, var(--af-ember-300) 67%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:8px 14px 9px;box-shadow:0 8px 30px color-mix(in srgb, var(--af-void) 80%, transparent),0 0 18px color-mix(in srgb, var(--af-ember-400) 20%, transparent);animation:m2toast 5.2s ease forwards}
.m2-toast .m2-medal{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--af-ember-100),var(--af-gold-500) 55%,var(--af-gold-700));box-shadow:0 0 12px color-mix(in srgb, var(--af-ember-300) 60%, transparent),inset 0 -2px 4px color-mix(in srgb, var(--af-void) 40%, transparent);display:flex;align-items:center;justify-content:center;font:800 16px Cinzel,serif;color:var(--af-ember-900)}
.m2-toast small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--af-ember-300)}
.m2-toast b{display:block;font-family:Cinzel,serif;font-size:17px;color:var(--bone)}
.m2-toast span{display:block;font-size:13px;color:var(--muted)}
.m2-toast i{display:block;font-size:13px;color:var(--af-gold-300);font-style:italic}
@keyframes m2toast{0%{opacity:0;transform:translateY(-14px) scale(.96)}8%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
/* rift timer */
#m2-rift{position:fixed;left:50%;top:calc(128px + env(safe-area-inset-top,0px));transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 1px 3px var(--af-void),0 0 10px var(--af-void);z-index:4}
#m2-rift b{display:block;font:800 26px Cinzel,serif;color:var(--af-ember-300);letter-spacing:.06em}
#m2-rift b.low{color:var(--af-blood-300);animation:m2pulse .8s infinite}
#m2-rift span{font-size:13px;color:var(--bone)}
#m2-rift em{display:block;font-style:normal;font-size:12px;color:var(--af-arcane-300)}
@keyframes m2pulse{50%{opacity:.55}}
/* journal */
#panel.m2-panel{z-index:30;width:min(980px,96vw)}
/* .m2-tabs: every tab strip in the game is drawn by public/ui/game.css (the design system's tabs) */
.m2-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0 12px}
.m2-tile{background:var(--af-stone-900);border:1px solid color-mix(in srgb, var(--af-iron-300) 12%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:8px 10px}
.m2-tile small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.m2-tile b{display:block;font:700 20px Cinzel,serif;color:var(--bone);margin:2px 0}
.m2-tile i{display:block;height:5px;border-radius:3px;background:color-mix(in srgb, var(--af-void) 67%, transparent);overflow:hidden}
.m2-tile i em{display:block;height:100%;background:var(--ember)}
.m2-tile span{font-size:12px;color:var(--muted)}
.m2-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.m2-card{background:var(--af-stone-800);border:1px solid color-mix(in srgb, var(--af-iron-300) 15%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:8px 11px;font-size:13px;line-height:1.4}
.m2-card b{font-family:Cinzel,serif;color:var(--ember);font-size:14px}
.m2-card.locked{opacity:.5}
.m2-card.locked b{color:var(--muted)}
.m2-card .m2-p{display:block;height:4px;margin-top:5px;background:color-mix(in srgb, var(--af-void) 67%, transparent);border-radius:2px;overflow:hidden}
.m2-card .m2-p em{display:block;height:100%;background:var(--af-moss-300)}
.m2-card .m2-t{color:var(--af-gold-300);font-style:italic}
.m2-card ul{margin:4px 0 0 16px;padding:0}
.m2-lore p{margin:4px 0 0;font-style:italic;color:var(--af-bone)}
#panel button.m2-title{display:inline-block;margin:3px;padding:5px 10px;font:italic 600 13px "Alegreya Sans",sans-serif}
#panel button.m2-title[aria-pressed=true]{background:var(--ember);color:var(--af-ink)}
.m2-sw{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--c);border:2px solid color-mix(in srgb, var(--af-void) 67%, transparent);vertical-align:middle;margin-right:5px}
.m2-rec{width:100%;border-collapse:collapse;font-size:13px}
.m2-rec th{text-align:left;color:var(--muted);font-weight:500;border-bottom:1px solid color-mix(in srgb, var(--af-iron-300) 19%, transparent);padding:4px 6px}
.m2-rec td{padding:4px 6px;border-bottom:1px solid color-mix(in srgb, var(--af-iron-300) 8%, transparent)}
.m2-rec tr.me td{color:var(--af-gold-300)}
.m2-note{font-size:12px;color:var(--muted);margin-top:8px}
.m2-goal{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid color-mix(in srgb, var(--af-iron-300) 8%, transparent);font-size:13px}
.m2-goal span:last-child{color:var(--muted);white-space:nowrap}
@media (max-width:700px){
  #panel.m2-panel{inset:0;transform:none;width:100vw;max-height:100vh;border-radius:0;padding:13px}
  .m2-ev{max-width:60vw;min-width:0}
  .m2-list{grid-template-columns:1fr}
  #m2-nav{left:8px;top:calc(116px + env(safe-area-inset-top,0px));width:min(180px,48vw);gap:1px;padding:4px}
  .m2-nav-row{grid-template-columns:15px minmax(0,1fr) 21px;gap:3px;min-height:21px;padding:1px 3px;font-size:10px}
  .m2-nav-arrow{font-size:14px}.m2-nav-row small{font-size:10px}
}
@media (max-height:600px){#m2-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(360px,68vw);gap:0;padding:3px}.m2-nav-row{min-width:0;min-height:18px;padding:0 2px;font-size:10px}.m2-nav-arrow{font-size:13px}}
/* the realm map owns the screen: the camp button and vitals step aside */
body:has(#mapov:not(.hidden)) #frontier-open,body:has(#mapov:not(.hidden)) #frontier-vitals{display:none}