/* ★ 2026-10-08 · THE ASTRALITE MATRIX · Macro Book Part 07 (macrobook-astralites.js) */
.axm{ margin:28px 0 8px; }
.axm-scroll{ overflow-x:auto; padding:2px 2px 8px; }
.axm-grid{ display:grid; grid-template-columns:64px repeat(9,minmax(54px,1fr)); gap:4px; min-width:600px; }
.axm-grid button{ font:inherit; color:inherit; cursor:pointer; margin:0; }
.axm-corner{ display:flex; flex-direction:column; justify-content:flex-end; gap:2px; padding:4px; font-family:var(--mono); font-size:.5rem; letter-spacing:.1em; color:var(--muted); }
.axm-corner span:last-child{ text-align:right; }
.axm-fam{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 7px; background:var(--panel-3); border:1px solid var(--gold-deep);
  border-top:3px solid var(--fc); transition:background .2s; }
.axm-fam b{ font-family:var(--mono); font-size:.62rem; color:var(--fc); }
.axm-fam span{ font-family:var(--tiny); font-size:.5rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.axm-fam i{ font-style:normal; font-family:var(--mono); font-size:.5rem; color:var(--muted); }
.axm-tier{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1px; padding:4px 6px; background:var(--panel-3); border:1px solid var(--gold-deep); text-align:left; }
.axm-tier b{ font-family:var(--mono); font-size:.8rem; color:var(--text); }
.axm-tier span{ font-family:var(--tiny); font-size:.48rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.axm-tier i{ font-style:normal; font-family:var(--mono); font-size:.5rem; color:var(--muted); }
.axm-cell{ position:relative; aspect-ratio:1; padding:0; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--fc) 16%,transparent),transparent 70%),var(--panel-3);
  border:1px solid color-mix(in srgb,var(--fc) 22%,transparent); transition:transform .15s, border-color .15s, opacity .2s, box-shadow .15s; }
.axm-cell img{ position:absolute; inset:8% 8% 18%; width:84%; height:74%; object-fit:contain; pointer-events:none; }
.axm-sym{ position:absolute; left:0; right:0; bottom:3px; text-align:center; font-family:var(--mono); font-size:.56rem; font-weight:700; color:var(--fc); letter-spacing:.02em; }
.axm-cell.relic::after{ content:''; position:absolute; top:4px; right:4px; width:6px; height:6px; transform:rotate(45deg); background:var(--fc); box-shadow:0 0 6px var(--fc); }
.axm-cell:hover,.axm-cell:focus-visible{ transform:translateY(-2px); border-color:var(--fc); box-shadow:0 0 14px -4px var(--fc); outline:none; z-index:1; }
.axm-cell.sel{ border-color:var(--fc); box-shadow:0 0 0 1px var(--fc),0 0 18px -2px var(--fc); z-index:2; }
.axm-grid.dim .axm-cell:not(.lit){ opacity:.28; }
.axm-fam.lit,.axm-fam[aria-pressed="true"],.axm-tier[aria-pressed="true"]{ background:color-mix(in srgb,var(--fc,var(--gold)) 16%,var(--panel-3)); border-color:var(--fc,var(--gold)); }
.axm-fam:focus-visible,.axm-tier:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:1px; }
.axm-foot{ display:flex; align-items:center; gap:14px; margin:10px 0 0; }
.axm-64{ width:40px; height:40px; flex:0 0 40px; transform:rotate(45deg); background:#000; border:1px dashed var(--muted); cursor:pointer; color:var(--muted); padding:0; }
.axm-64 span{ display:block; transform:rotate(-45deg); font-family:var(--mono); font-weight:700; }
.axm-64:hover,.axm-64.sel{ border-color:var(--text); color:var(--text); box-shadow:0 0 14px -2px rgba(255,255,255,.5); }
.axm-legend{ margin:0; font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; color:var(--muted); line-height:1.7; }
.axm-dot{ display:inline-block; width:6px; height:6px; transform:rotate(45deg); background:var(--text-dim); margin:0 2px 1px; }

.axm-detail{ --fc:var(--gold); margin:18px 0 0; padding:20px 22px 22px; background:var(--panel); border:1px solid color-mix(in srgb,var(--fc) 45%,transparent);
  border-top:3px solid var(--fc); box-shadow:inset 0 30px 60px -40px var(--fc); }
.axm-head{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin-bottom:12px; }
.axm-art{ width:104px; height:104px; object-fit:contain; filter:drop-shadow(0 0 16px color-mix(in srgb,var(--fc) 60%,transparent)); }
.axm-fambadge{ width:64px; height:64px; margin:10px; transform:rotate(45deg); display:grid; place-items:center; border:1px solid var(--fc);
  background:color-mix(in srgb,var(--fc) 18%,transparent); box-shadow:0 0 18px -4px var(--fc); }
.axm-fambadge b{ transform:rotate(-45deg); font-family:var(--mono); font-size:1.1rem; color:var(--fc); }
.axm-k{ margin:0 0 4px; font-family:var(--tiny); font-size:.5rem; letter-spacing:.06em; color:var(--fc); line-height:1.8; }
.axm-nm{ margin:0; padding:0; border:none; font-family:var(--pixel); font-size:1.7rem; line-height:1.1; color:var(--text); }
.axm-sub{ margin:6px 0 0; font-size:.86rem; color:var(--text-dim); }
.axm-symbig{ font-family:var(--mono); font-weight:700; color:var(--fc); border:1px solid var(--fc); padding:0 .35rem; margin-right:6px; }
.axm-relic{ color:var(--fc); }
.axm-detail section{ padding:0; scroll-margin-top:0; }
.axm-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:6px; }
.axm-detail h4{ margin:14px 0 8px; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--fc); }
.axm-detail p{ font-size:.88rem; line-height:1.65; color:var(--text-dim); margin:0 0 10px; }
.axm-detail b{ color:var(--text); font-weight:600; }
.axm-small{ font-size:.78rem !important; color:var(--muted) !important; }
.axm-comp{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-direction:column; gap:6px; }
.axm-comp li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; font-size:.84rem; color:var(--text-dim); }
.axm-chip{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .5rem; cursor:pointer;
  color:var(--fc); background:color-mix(in srgb,var(--fc) 12%,transparent); border:1px solid color-mix(in srgb,var(--fc) 55%,transparent); }
.axm-chip:hover{ background:color-mix(in srgb,var(--fc) 24%,transparent); }
.axm-worlds{ margin:0; display:grid; gap:8px; }
.axm-worlds div{ margin:0; }
.axm-worlds dt{ font-family:var(--mono); font-size:.54rem; letter-spacing:.12em; color:var(--muted); margin-bottom:2px; }
.axm-worlds dd{ margin:0; font-size:.86rem; color:var(--text); }
.axm-lore{ margin-top:6px; padding-top:4px; border-top:1px solid color-mix(in srgb,var(--fc) 25%,transparent); }
.axm-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; margin:6px 0 10px; }
.axm-mini{ --fc:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px 6px; background:var(--panel-3); border:1px solid var(--gold-deep); cursor:pointer; color:inherit; }
.axm-mini img{ width:48px; height:48px; object-fit:contain; }
.axm-mini span{ font-family:var(--mono); font-size:.56rem; font-weight:700; color:var(--text-dim); }
.axm-mini:hover{ border-color:var(--fc,var(--gold)); }
@media (max-width:700px){
  .axm-cols{ grid-template-columns:1fr; gap:4px; }
  .axm-head{ grid-template-columns:72px 1fr; gap:12px; }
  .axm-art{ width:72px; height:72px; }
  .axm-fambadge{ width:44px; height:44px; margin:8px; }
  .axm-nm{ font-size:1.35rem; }
  .axm-detail{ padding:16px; }
}
@media (prefers-reduced-motion:reduce){ .axm-cell,.axm-cell:hover{ transition:none; transform:none; } }