/* Specimen UI adapted from the supplied prototype. */
body.codex-mode{background:#050d12!important}body.codex-mode #app{width:100%;max-width:none;margin:0;padding:0;height:var(--battle-vh,100dvh)}
.cx-stage,.cx-nav{--ink:#050d12;--line:rgba(190,225,220,.16);--line2:rgba(190,225,220,.32);--txt:#e7ecea;--mute:#8fa3a6;--gold:#e8cf8c;--ac:#a8e47c;--cinzel:Cinzel,serif;color:var(--txt);line-height:normal}
.cx-stage{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.cx-stage *,.cx-nav *{box-sizing:border-box;font-family:var(--serif)!important}
.cx-stage button,.cx-nav button{min-height:0;border-radius:0;letter-spacing:normal;line-height:normal;box-shadow:none;text-transform:none}
.cx-stage{position:relative;width:min(100%,440px);height:100%;margin:0 auto;overflow:hidden;overflow:clip;isolation:isolate;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 120% 60% at 50% 0%,rgba(40,80,80,.35),transparent 60%),var(--ink)}
.cx-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
.cx-stage[data-s="1"]{--ac:#a8e47c}.cx-stage[data-s="2"]{--ac:#79e8ff}.cx-stage[data-s="3"]{--ac:#cfeeff}.cx-stage[data-s="4"]{--ac:#ffb7c9}.cx-stage[data-s="CORE"]{--ac:#ff6b7a}

/* top nav */
.cx-nav{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 0}
.cx-back{flex:none;border:0;background:none;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);padding:6px 4px}
.cx-back i{width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.cx-tabs{flex:1;display:flex;gap:2px;overflow:hidden}
.cx-tab{flex:1 1 auto;border:0;background:none;cursor:pointer;padding:7px 2px 6px;font-size:11px;color:var(--mute);white-space:nowrap;border-bottom:1px solid var(--line)}
.cx-tab[aria-selected="true"]{color:#fff;font-weight:800;border-bottom:2px solid var(--gold)}

/* header */
.cx-head{flex:none;display:flex;align-items:flex-end;gap:12px;padding:12px 14px 8px}
.cx-head .cx-t{flex:1;min-width:0}
.cx-head .cx-t small{display:block;font-family:var(--cinzel);font-weight:700;font-size:10.5px;letter-spacing:.34em;color:var(--gold)}
.cx-head .cx-t b{display:block;margin-top:2px;font-size:22px;font-weight:800;letter-spacing:.08em}
.cx-bars{display:flex;gap:6px;margin-top:8px}
.cx-bar{flex:1;min-width:0}
.cx-bar span{display:flex;justify-content:space-between;gap:2px;font-family:var(--num);font-weight:500;font-size:10px;letter-spacing:.04em;color:var(--mute);white-space:nowrap}
.cx-head .cx-t .cx-bar span b{display:inline;margin:0;font-size:10px;font-weight:700;letter-spacing:0;color:#dfe6e5}
.cx-bar i{display:block;height:2px;margin-top:3px;background:rgba(255,255,255,.1);position:relative}
.cx-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--c)}
.cx-ring{flex:none;position:relative;width:68px;height:68px}
.cx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cx-ring .cx-r0{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3}
.cx-ring .cx-r1{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:butt;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1)}
.cx-ring div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cx-ring b{font-family:var(--num);font-weight:700;font-size:22px}
.cx-ring small{font-family:var(--num);font-weight:500;font-size:10px;color:var(--mute);letter-spacing:.08em}

/* specimen plate */
.cx-plate{position:relative;flex:1 1 auto;min-height:0;margin:2px 12px 0;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(12,28,34,.92),rgba(7,18,22,.95));
  box-shadow:inset 0 0 0 1px var(--line2);touch-action:pan-y}
.cx-plate::before,.cx-plate::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;pointer-events:none}
.cx-plate::before{left:-1px;top:-1px;border-width:2px 0 0 2px}.cx-plate::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.cx-ph{flex:none;display:flex;align-items:baseline;gap:10px;padding:10px 12px 0}
.cx-ph .cx-no{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.16em;color:var(--gold)}
.cx-ph .cx-no b{font-size:26px;letter-spacing:.02em;margin-left:2px}
.cx-ph .cx-code{font-family:var(--num);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--mute)}
.cx-ph .cx-str{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ac)}
.cx-ph .cx-str i{width:8px;height:8px;transform:rotate(45deg);background:var(--ac)}
.cx-nm{flex:none;padding:0 12px;display:flex;align-items:baseline;gap:10px}
.cx-nm b{font-size:24px;font-weight:800;letter-spacing:.06em}
.cx-nm small{font-family:var(--num);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--mute)}
.cx-fig{position:relative;flex:1 1 auto;min-height:70px;margin:6px 12px 0;display:flex}
.cx-fig .cx-view{position:relative;flex:1;min-width:0;display:grid;place-items:center;overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:16px 16px;background-position:center;box-shadow:inset 0 0 0 1px var(--line)}
.cx-fig .cx-view::before{content:"";position:absolute;left:50%;top:6%;bottom:6%;width:1px;background:linear-gradient(transparent,var(--line2),transparent)}
.cx-fig .cx-view::after{content:"";position:absolute;top:50%;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.cx-fig img{position:relative;z-index:1;max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.cx-fig .cx-rule{position:absolute;z-index:2;left:4px;top:8%;bottom:8%;width:6px;background:repeating-linear-gradient(180deg,var(--line2) 0 1px,transparent 1px 8px)}
.cx-fig .cx-rule.cx-b{left:8%;right:8%;top:auto;bottom:4px;width:auto;height:6px;background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 8px)}
.cx-fig .cx-tick{position:absolute;z-index:2;width:12px;height:12px;border:1px solid var(--ac);opacity:.8}
.cx-fig .cx-tick.cx-a{left:10px;top:10px;border-width:1px 0 0 1px}.cx-fig .cx-tick.cx-b2{right:10px;top:10px;border-width:1px 1px 0 0}.cx-fig .cx-tick.cx-c{left:10px;bottom:10px;border-width:0 0 1px 1px}.cx-fig .cx-tick.cx-d{right:10px;bottom:10px;border-width:0 1px 1px 0}
.cx-fig .cx-cap{position:absolute;z-index:2;left:14px;bottom:10px;font-family:var(--num);font-weight:500;font-size:9.5px;letter-spacing:.16em;color:var(--mute)}
.cx-stats{flex:none;width:92px;display:flex;flex-direction:column;border-left:0}
.cx-stat{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 10px;box-shadow:inset 0 0 0 .5px var(--line)}
.cx-stat small{font-family:var(--num);font-weight:500;font-size:9.5px;letter-spacing:.18em;color:var(--mute)}
.cx-stat b{font-family:var(--num);font-weight:700;font-size:22px;line-height:1.05;color:#fff}
.cx-stat b em{font-style:normal;font-size:12px;color:var(--mute);margin-left:2px}
.cx-stat.cx-kill b{color:var(--gold)}
.cx-eco{flex:none;margin:8px 12px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding:0 0 0 10px;border-left:2px solid var(--ac);font-size:12.5px;line-height:1.65;color:#d9e2e1;min-height:3.3em}
.cx-acts{flex:none;display:flex;flex-wrap:wrap;gap:5px;margin:8px 12px 10px}
.cx-act{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;font-size:10.5px;color:#dfe6e5;box-shadow:inset 0 0 0 1px var(--line2)}
.cx-act b{font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.06em;padding:1px 5px;color:var(--ink);background:var(--ac)}
.cx-plate.cx-unknown .cx-fig img{filter:brightness(0) drop-shadow(0 0 1px rgba(200,230,230,.5));opacity:.7}
.cx-plate.cx-unknown .cx-nm b{color:var(--mute);letter-spacing:.3em}
.cx-plate.cx-swap .cx-ph,.cx-plate.cx-swap .cx-nm,.cx-plate.cx-swap .cx-fig,.cx-plate.cx-swap .cx-eco,.cx-plate.cx-swap .cx-acts{animation:cxSwap .32s cubic-bezier(.2,.8,.3,1) both}
.cx-plate.cx-swap.cx-left .cx-ph,.cx-plate.cx-swap.cx-left .cx-nm,.cx-plate.cx-swap.cx-left .cx-fig,.cx-plate.cx-swap.cx-left .cx-eco,.cx-plate.cx-swap.cx-left .cx-acts{animation-name:cxSwapL}
.cx-plate.cx-swap .cx-nm{animation-delay:.03s}.cx-plate.cx-swap .cx-fig{animation-delay:.05s}.cx-plate.cx-swap .cx-eco{animation-delay:.08s}.cx-plate.cx-swap .cx-acts{animation-delay:.1s}
@keyframes cxSwap{from{opacity:0;transform:translateX(18px)}}
@keyframes cxSwapL{from{opacity:0;transform:translateX(-18px)}}
.cx-pn{position:absolute;top:50%;z-index:3;width:26px;height:44px;margin-top:-22px;border:0;background:none;cursor:pointer;color:var(--gold);opacity:.8}
.cx-pn i{display:block;width:10px;height:10px;margin:auto;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.cx-pn.cx-p{left:-2px}.cx-pn.cx-p i{transform:rotate(45deg)}.cx-pn.cx-n{right:-2px}.cx-pn.cx-n i{transform:rotate(-135deg)}

/* index */
.cx-index{flex:none;padding:10px 0 12px}
.cx-filters{display:flex;gap:4px;padding:0 12px 8px}
.cx-flt{flex:1;border:0;cursor:pointer;padding:5px 0;font-size:11px;color:var(--mute);background:none;box-shadow:inset 0 0 0 1px var(--line)}
.cx-flt[aria-pressed="true"]{color:var(--ink);font-weight:800;background:var(--c,var(--gold));box-shadow:none}
.cx-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 2px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cx-strip::-webkit-scrollbar{display:none}
.cx-th{position:relative;flex:none;width:64px;height:78px;border:0;padding:0;cursor:pointer;background:rgba(10,24,30,.9);box-shadow:inset 0 0 0 1px var(--line);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center}
.cx-th img{width:52px;height:52px;margin-top:5px;object-fit:contain}
.cx-th.cx-unk img{filter:brightness(0) drop-shadow(0 0 1px rgba(200,230,230,.45));opacity:.6}
.cx-th span{font-family:var(--num);font-weight:500;font-size:10px;letter-spacing:.08em;color:var(--mute);margin-top:2px}
.cx-th::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c)}
.cx-th.cx-sel{box-shadow:inset 0 0 0 1.5px var(--gold);background:rgba(40,60,50,.9)}
.cx-th.cx-sel span{color:var(--gold)}
.cx-th.cx-sel::after{content:"";position:absolute;left:50%;top:-5px;margin-left:-4px;border:4px solid transparent;border-top:5px solid var(--gold)}
.cx-stage button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-height:720px){.cx-head{padding-top:8px}.cx-head .cx-t b{font-size:19px}.cx-ring{width:56px;height:56px}.cx-ring b{font-size:18px}.cx-bars{display:none}
  .cx-nm b{font-size:20px}.cx-eco{font-size:11.5px;line-height:1.55;-webkit-line-clamp:2;min-height:0}.cx-ph{padding-top:6px}.cx-index{padding:6px 0 8px}.cx-filters{padding-bottom:6px}.cx-flt{padding:4px 0}.cx-stat b{font-size:18px}.cx-th{width:56px;height:68px}.cx-th img{width:44px;height:44px}.cx-acts{margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){.cx-stage *{animation:none!important;transition:none!important}}

.cx-stage .cx-no,.cx-stage .cx-no b,.cx-stage .cx-code,.cx-stage .cx-size,.cx-stage .cx-cap,.cx-stage .cx-stat small,.cx-stage .cx-stat b,.cx-stage .cx-stat em,.cx-stage .cx-act b,.cx-stage .cx-ring b,.cx-stage .cx-ring small,.cx-stage .cx-th>span{font-family:var(--num),var(--serif)!important}
.cx-head .cx-t>small{font-family:var(--cinzel)!important}
.cx-stage .cx-art{position:absolute;inset:6%;width:88%;height:88%;display:flex;align-items:center;justify-content:center}
.cx-stage .cx-art .illustrated-sprite{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transform:none;margin:0}
.cx-stage .cx-th .bestiary-art{height:52px;width:52px;margin-top:5px;flex:none}
.cx-stage .cx-th .illustrated-sprite{width:100%;height:100%;max-width:100%;margin:0;transform:none;object-fit:contain}
.cx-stage .cx-unknown .cx-art,.cx-stage .cx-unk .bestiary-art{filter:brightness(0) drop-shadow(0 0 1px #c8e6e680);opacity:.7}
.cx-stage .cx-act{min-width:0;max-width:100%}.cx-stage .cx-act b{flex:none;white-space:nowrap}.cx-stage .cx-act span{overflow-wrap:anywhere}
.cx-stage .cx-eco{margin-bottom:0}.cx-stage .cx-nm b{overflow-wrap:anywhere}
.cx-nav{max-width:440px;margin:auto}.cx-stage .cx-nav{width:100%}
@media(max-height:720px){.cx-stage .cx-th .bestiary-art{width:44px;height:44px}}
body.codex-mode #app{min-height:0;overflow:hidden;display:block}body.codex-mode #app::before,body.codex-mode #app::after{display:none}
.cx-stage{box-sizing:border-box}.cx-stage .cx-nav{margin:0}