/* Ashenfold M3: ability bar, tooltips, toasts, emote wheel, co-op party frames, settings tabs and pages,
   rebinding grid, trade and company panels, text size and colour-vision cues. Built on the index.html look
   (Cinzel headings, ember accents, dark glass panels). Class names are prefixed m3- (index.html styles .bar). */

/* ---------------------------------------------------------------- ability bar (#9) */
#m3-abar{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) scale(var(--m3-text,1));transform-origin:50% 100%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;transition:bottom .25s}
#m3-abar.boss{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
#m3-abar.hidden{display:none}
#m3-abar .m3-combo{font:700 13px Cinzel,serif;color:var(--af-gold-300);text-shadow:0 1px 3px var(--af-void);min-height:16px;letter-spacing:.04em}
#m3-abar .m3-slots{display:flex;gap:7px;padding:6px 9px;background:linear-gradient(color-mix(in srgb, var(--af-void) 48%, transparent),color-mix(in srgb, var(--af-void) 78%, transparent));border:1px solid color-mix(in srgb, var(--af-ember-300) 20%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;box-shadow:0 6px 22px color-mix(in srgb, var(--af-void) 60%, transparent)}
.m3-slot{position:relative;width:46px;height:46px;border-radius:var(--af-cut-md);corner-shape:bevel;background:color-mix(in srgb, var(--af-stone-900) 90%, transparent);border:1.5px solid color-mix(in srgb, var(--af-ember-300) 33%, transparent);pointer-events:auto;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:default;outline:none;--c:var(--af-ember-300)}
.m3-slot svg{width:26px;height:26px;fill:var(--af-soot);position:relative;z-index:1;transition:fill .15s}
.m3-slot.ready{border-color:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 30%,transparent),inset 0 0 10px color-mix(in srgb,var(--c) 18%,transparent)}
.m3-slot.ready svg{fill:var(--af-ember-100)}
.m3-slot.cls{--c:var(--af-gold-300);width:52px;height:52px;border-radius:50%;border-width:2px}
.m3-slot.cls.ready{animation:m3glow 1.6s ease-in-out infinite}
@keyframes m3glow{50%{box-shadow:0 0 16px color-mix(in srgb, var(--af-ember-300) 67%, transparent),inset 0 0 12px color-mix(in srgb, var(--af-ember-300) 27%, transparent)}}
body.m3-reduced-flash .m3-slot.cls.ready{animation:none}
.m3-slot.mana svg{fill:var(--af-mana-300)}
.m3-slot.mana{border-color:color-mix(in srgb, var(--af-mana-300) 40%, transparent)}
.m3-slot.empty{opacity:.55}
.m3-slot.buff{border-color:var(--c)}.m3-slot.buff svg{fill:var(--c)}
.m3-slot .m3-cd{position:absolute;inset:0;z-index:2;pointer-events:none;background:conic-gradient(color-mix(in srgb, var(--af-void) 72%, transparent) calc(var(--cd,0)*360deg),transparent 0)}
.m3-slot .m3-t{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;font:800 16px "Alegreya Sans",sans-serif;color:var(--af-bone);text-shadow:0 1px 3px var(--af-void),0 0 4px var(--af-void)}
.m3-slot kbd{position:absolute;right:1px;bottom:1px;z-index:4;font:700 10px/12px "Alegreya Sans",sans-serif;padding:0 3px;border-radius:var(--af-cut-sm);corner-shape:bevel;background:color-mix(in srgb, var(--af-void) 80%, transparent);border:1px solid color-mix(in srgb, var(--af-iron-300) 23%, transparent);color:var(--af-bone);max-width:44px;overflow:hidden;white-space:nowrap}
.m3-slot.cls kbd{right:4px;bottom:3px}
.m3-slot em{position:absolute;left:2px;top:1px;z-index:4;font:700 11px "Alegreya Sans",sans-serif;font-style:normal;color:var(--af-gold-300);text-shadow:0 1px 2px var(--af-void)}
.m3-slot:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ---------------------------------------------------------------- tooltips (#92) */
#m3-tip{position:fixed;z-index:60;max-width:300px;padding:8px 11px;background:color-mix(in srgb, var(--af-stone-900) 96%, transparent);border:1px solid color-mix(in srgb, var(--af-ember-300) 40%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;box-shadow:0 8px 24px color-mix(in srgb, var(--af-void) 80%, transparent);font:14px/1.4 "Alegreya Sans",sans-serif;color:var(--bone);pointer-events:none}
#m3-tip b{font-family:Cinzel,serif;color:var(--ember)}
#m3-tip kbd{font-size:12px;color:var(--ember)}
#hud #hp,#hud #mp,#hud #xp,#hud #stats,#m3-party .pm{pointer-events:auto}
.m1-ico{cursor:help}

/* ---------------------------------------------------------------- toasts, wheel */
#m3-toasts{position:fixed;right:16px;bottom:calc(200px + env(safe-area-inset-bottom,0px));z-index:32;display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:min(340px,80vw);zoom:var(--m3-text,1)}
.m3-toast{background:color-mix(in srgb, var(--af-iron-900) 95%, transparent);border:1px solid color-mix(in srgb, var(--af-ember-300) 53%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:9px 12px;font:14px/1.4 "Alegreya Sans",sans-serif;color:var(--bone);box-shadow:0 6px 22px color-mix(in srgb, var(--af-void) 73%, transparent);animation:m3in .25s ease-out}
.m3-toast b{color:var(--ember)}
.m3-tbtns{display:flex;gap:6px;margin-top:7px}
.m3-tbtns button{font-size:13px;padding:5px 11px;margin:0}
@keyframes m3in{from{opacity:0;transform:translateY(8px)}}
#m3-wheel{position:fixed;left:50%;top:50%;width:0;height:0;z-index:35}
#m3-wheel[hidden]{display:none}
#m3-wheel .m3-wheel-hub{position:absolute;left:-58px;top:-58px;width:116px;height:116px;border-radius:50%;background:radial-gradient(color-mix(in srgb, var(--af-iron-900) 95%, transparent),color-mix(in srgb, var(--af-void) 88%, transparent));border:1px solid color-mix(in srgb, var(--af-ember-300) 53%, transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 16px Cinzel,serif;color:var(--ember);box-shadow:0 0 40px color-mix(in srgb, var(--af-void) 80%, transparent)}
#m3-wheel .m3-wheel-hub small{font:500 11px "Alegreya Sans",sans-serif;color:var(--muted)}
#m3-wheel .m3-slice{position:absolute;left:calc(var(--x) * 132px - 46px);top:calc(var(--y) * 132px - 30px);width:92px;height:60px;margin:0;padding:4px;border-radius:var(--af-cut-md);corner-shape:bevel;background:color-mix(in srgb, var(--af-iron-900) 93%, transparent);border:1px solid color-mix(in srgb, var(--af-ember-300) 33%, transparent);color:var(--bone);font:600 13px "Alegreya Sans",sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#m3-wheel .m3-slice span{font-size:20px;line-height:1}
#m3-wheel .m3-slice kbd{position:absolute;right:4px;top:3px;font-size:10px;padding:0 4px}
#m3-wheel .m3-slice.sel,#m3-wheel .m3-slice:hover,#m3-wheel .m3-slice:focus-visible{background:var(--ember);color:var(--af-ink);border-color:var(--ember)}

/* ---------------------------------------------------------------- co-op party frames (#65) */
#m3-party{margin-top:6px}
#m3-party .m3-ph{font:700 12px Cinzel,serif;color:var(--af-bone);display:flex;align-items:center;gap:6px;margin:4px 0 2px}
#m3-party .m3-ph small{font:500 11px "Alegreya Sans",sans-serif;color:var(--muted)}
#m3-party .m3-pm svg{width:14px;height:14px;flex:none}
#m3-party .m3-pm .nm{width:auto;min-width:52px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m3-party .m3-pm.down .nm{text-decoration:line-through;opacity:.8}
#m3-party .m3-pm.down small{color:var(--af-blood-300)}
.m3-flag{display:inline-block;width:12px;height:15px;background:linear-gradient(var(--c1) 0 45%,var(--c2) 45% 62%,var(--c1) 62%);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);vertical-align:-2px;box-shadow:0 0 0 1px var(--af-void)}

/* ---------------------------------------------------------------- settings: tabs and pages (#93-#97) */
/* #m3-tabs: every tab strip in the game is drawn by public/ui/game.css (the design system's tabs) */
#game-settings .m3-page{max-width:980px;margin:0 auto;text-align:left}
#game-settings .m3-page[hidden]{display:none}
.m3-set{display:grid;gap:12px;max-width:620px;margin:6px auto 10px}
.m3-set label{display:flex;justify-content:space-between;align-items:center;gap:14px;font:500 16px "Alegreya Sans",sans-serif;color:var(--bone)}
.m3-set select{font:15px "Alegreya Sans",sans-serif;background:var(--af-stone-900);color:var(--bone);border:1px solid color-mix(in srgb, var(--af-iron-300) 23%, transparent);border-radius:var(--af-cut-sm);corner-shape:bevel;padding:6px 8px;min-width:250px}
.m3-set label.m3-ck{justify-content:flex-start}
.m3-set input[type=checkbox]{width:20px;height:20px;accent-color:var(--ember)}
.m3-slider{display:grid;grid-template-columns:1fr auto minmax(140px,240px) auto 56px;align-items:center;gap:8px;font:500 16px "Alegreya Sans",sans-serif;color:var(--bone)}
.m3-slider input{accent-color:var(--ember);width:100%}
.m3-slider output{color:var(--ember);font-weight:700;text-align:right}
button.m3-step{font:700 16px "Alegreya Sans",sans-serif;width:32px;height:32px;padding:0;margin:0;border-radius:50%}
#game-settings .m3-page p.muted,#game-settings .m3-page .muted{color:var(--muted);max-width:660px;margin:8px auto;font-size:14px;line-height:1.5}
.m3-credit{font-size:12px!important}
#game-settings .m3-row{display:flex;justify-content:center;margin:10px 0}
.m3-cbprev{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.m3-cbprev span{padding:3px 9px;border-radius:var(--af-cut-md);corner-shape:bevel;border:1.5px solid var(--c);color:var(--c);font:700 13px "Alegreya Sans",sans-serif;background:var(--af-void)}
.m3-presets{display:flex;justify-content:center;gap:8px}
.m3-presets button{min-width:110px;font-size:15px}
.m3-presets button[aria-pressed=true]{background:var(--ember);color:var(--af-ink)}
.m3-qinfo{text-align:center;color:var(--muted);font-size:13px}
.m3-keys{max-width:900px;margin:0 auto}
.m3-kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));gap:2px 26px}
.m3-kgrid h4{grid-column:1/-1;font:700 15px Cinzel,serif;color:var(--ember);margin:12px 0 4px;border-bottom:1px solid color-mix(in srgb, var(--af-ember-300) 20%, transparent)}
.m3-krow{display:grid;grid-template-columns:1fr 112px 112px;gap:6px;align-items:center;font:500 15px "Alegreya Sans",sans-serif;color:var(--bone);padding:2px 4px;border-radius:var(--af-cut-sm);corner-shape:bevel}
.m3-krow.bad{background:color-mix(in srgb, var(--af-blood-500) 20%, transparent)}
button.m3-key{font:700 13px "Alegreya Sans",sans-serif;padding:5px 8px;margin:0;min-height:30px;background:var(--af-stone-900);color:var(--bone);border-color:color-mix(in srgb, var(--af-iron-300) 28%, transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.m3-key:hover,button.m3-key:focus-visible{border-color:var(--ember);color:var(--ember);background:var(--af-stone-800)}
button.m3-key.m3-capturing{background:var(--ember);color:var(--af-ink);animation:m3pulse .9s ease-in-out infinite}
@keyframes m3pulse{50%{opacity:.7}}
.m3-note{color:var(--af-gold-300)!important;text-align:center}

/* ---------------------------------------------------------------- trade and company panels (#67 #68 #69 #71) */
.m3-trade{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.m3-trade section{background:var(--af-stone-900);border:1px solid color-mix(in srgb, var(--af-iron-300) 11%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:4px 12px 12px}
.m3-gold{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--bone)}
#panel .m3-gold input{width:110px}
.m3-ok{color:var(--af-moss-300)}.m3-bad{color:var(--af-blood-300)}
.m3-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 8px;border-bottom:1px solid color-mix(in srgb, var(--af-iron-300) 9%, transparent)}
.m3-acts{margin-left:auto}
.m3-co label{display:flex;gap:10px;align-items:center;color:var(--bone)}
#panel .m3-co input{max-width:280px}
.m3-sw{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
#panel button.m3-swb{width:26px;height:26px}
#panel button.m3-swb.on{outline:3px solid var(--ember);outline-offset:2px}
.m3-duel{color:var(--af-gold-300)}
.m3-tradebtn{margin:6px 0 2px}
#panel.m3-panel{z-index:33}

/* ---------------------------------------------------------------- recent companions on the title screen (#69) */
#m3-recent{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px auto 0;max-width:640px}
.m3-recent-h{width:100%;text-align:center;font:600 14px Cinzel,serif;color:var(--ember)}
.m3-recent-h small{display:block;font:500 12px "Alegreya Sans",sans-serif;color:var(--muted)}
button.m3-recent-b{font:500 13px "Alegreya Sans",sans-serif;padding:5px 10px;margin:0;background:var(--af-stone-800);color:var(--bone);border-color:color-mix(in srgb, var(--af-gold-600) 50%, transparent)}
button.m3-recent-b b{color:var(--ember)}
button.m3-recent-b small{color:var(--muted)}

/* ---------------------------------------------------------------- announcements, narration, cinematics */
body.m3-cine #banner{top:calc(13vh + 14px)}
body #banner{transform:translateX(-50%) scale(var(--m3-text,1));transform-origin:50% 0}
body.tut-cine #m3-abar,body.tut-cine #m3-toasts{visibility:hidden!important}

/* ---------------------------------------------------------------- text size (#95): corner HUD scales from its corner */
body.m3-text #hud,body.m3-text #info,body.m3-text #m1-status,body.m3-text #frontier-vitals,body.m3-text #coop-panel,body.m3-text #coop-chat,body.m3-text #autochip,body.m3-text #tut-hint{zoom:var(--m3-text,1)}
body.m3-text #prompt{transform:translateX(-50%) scale(var(--m3-text,1));transform-origin:50% 100%}
body.m3-text #panel>*,body.m3-text #dlg>*,body.m3-text #lootcard{zoom:var(--m3-text,1)}

/* ---------------------------------------------------------------- colour vision (#95): shape and pattern cues on items */
.m3-rg{font-size:.9em}
body.m3-cb .it[data-rar]{border-left-width:5px!important}
body.m3-cb .it[data-rar="1"]{border-left-style:dashed!important}
body.m3-cb .it[data-rar="2"]{border-left-style:double!important;border-left-width:7px!important}
body.m3-cb .it[data-rar="3"]{border-left-style:solid!important;background-image:repeating-linear-gradient(135deg,color-mix(in srgb, var(--af-void) 0%, transparent) 0 9px,color-mix(in srgb, var(--af-iron-300) 6%, transparent) 9px 13px)}
body.m3-cb .it[data-rar="s"]{border-left-style:dotted!important}

@media (max-width:700px){
  .m3-trade{grid-template-columns:1fr}
  .m3-kgrid{grid-template-columns:1fr}
  .m3-krow{grid-template-columns:1fr 92px 92px}
  .m3-slider{grid-template-columns:1fr auto 110px auto 46px;font-size:14px}
  .m3-slot{width:40px;height:40px}.m3-slot.cls{width:44px;height:44px}
  #m3-toasts{bottom:auto;top:120px}
}