/* AGI Wars — UI v2 preview. Loaded only with ?ui=2 (see the end of index.html).
   1) a sober flat skin so the lab drawing and the lists belong together
   2) a lighter status bar
   3) the lab scene and the journey strip (built by ui2.js) */

/* ---------- 1. skin ---------- */
html.ui2{
  --bg:#0e1311; --ink:#e8e1cd; --mute:#8d9388; --line:rgba(232,225,205,.13);
  --cyan:#8fb8b0; --blue:#5d8a86; --mag:#d9a441; --violet:#7d8f6a; --amber:#e2a72e; --lime:#a9c46a; --red:#d2564a;
  --card:#151b18; --acc:#e2a72e; --pit:#121815;
}
html.ui2 body{background:var(--bg)}
html.ui2 #bg{display:none}
html.ui2 .card,html.ui2 nav.tabs{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:12px}
html.ui2 .hud{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
html.ui2 .brand h1{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
html.ui2 .brand svg{filter:grayscale(1) brightness(1.5)}
html.ui2 .btn{background:var(--acc);color:#1a1405;box-shadow:none;border-radius:8px}
html.ui2 .btn.mag{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(232,225,205,.3)}
html.ui2 .btn.gold{background:var(--acc);color:#1a1405}
html.ui2 .btn.red{background:var(--red);color:#fff}
html.ui2 .btn:disabled{background:rgba(232,225,205,.07);color:var(--mute);box-shadow:none}
html.ui2 .ghost,html.ui2 .chip,html.ui2 .hg{border-radius:8px}
html.ui2 .tile{background:#1c2420;color:var(--ink);border-radius:8px}
html.ui2 .tile:not(.mk1):not(.mk2):not(.mk3){box-shadow:inset 0 0 0 1px var(--c1,rgba(232,225,205,.22))}
html.ui2 .avatar,html.ui2 #coach .cav,html.ui2 #nudge .ada-ic{background:#1c2420;box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc)}
html.ui2 .item,html.ui2 .rival,html.ui2 .member,html.ui2 .troph,html.ui2 .leg{border-radius:10px;background:rgba(232,225,205,.035)}
html.ui2 .bar i{background:var(--acc)}
html.ui2 .bar i::after{display:none}
html.ui2 .hg .bar i{background:var(--c);box-shadow:none}
html.ui2 #g-t{--c:#8fb8b0!important}html.ui2 #g-g{--c:#e2a72e!important}html.ui2 #g-r{--c:#a9c46a!important}
html.ui2 .tab.on{background:rgba(232,225,205,.08);box-shadow:inset 0 0 0 1px rgba(232,225,205,.16);color:var(--ink)}
html.ui2 nav.tabs .ti{color:var(--mute)}html.ui2 nav.tabs .tab.on .ti{color:var(--acc)}
html.ui2 .banner{background:#1a211e;box-shadow:inset 4px 0 0 var(--za);border-radius:10px}
html.ui2 .banner svg{opacity:.35}
html.ui2 .banner .lockmsg svg{position:static;width:1.15em;height:1.15em;opacity:1}
html.ui2 .event{background:var(--card);border-color:rgba(226,167,46,.5);border-radius:10px;animation:none}
html.ui2 .toast,html.ui2 #tip{background:#1a211e;backdrop-filter:none;border-radius:10px}
html.ui2 #modal{background:rgba(8,11,10,.86);backdrop-filter:none}
html.ui2 #coach{background:#1a211e;border-color:rgba(226,167,46,.5);box-shadow:0 20px 60px rgba(0,0,0,.6);border-radius:12px}
html.ui2 #coach .cn{color:var(--acc)}
html.ui2 #coach .dots .on{background:var(--acc)}
html.ui2 .invb{background:rgba(226,167,46,.1);border-color:rgba(226,167,46,.45)}
html.ui2 .choice.on{border-color:var(--acc);background:rgba(226,167,46,.1);box-shadow:none}
html.ui2 #quests .q.cur{border-color:rgba(232,225,205,.2);background:rgba(232,225,205,.04)}

/* ---------- 2. status bar: the AGI strip moves into the journey, gauges become one-line ---------- */
html.ui2 .agistrip{display:none}
@media(min-width:721px){
  html.ui2 .hud{padding:8px 16px}
  html.ui2 .hg{padding:6px 10px}
  html.ui2 .hg .hb{display:flex;align-items:center;gap:8px}
  html.ui2 .hg .hl{display:contents}
  html.ui2 .hg .hl span{order:1}
  html.ui2 .hg .bar{order:2;flex:1;margin:0;min-width:30px}
  html.ui2 .hg .hl em{order:3}
  html.ui2 .hg .gt{order:4;min-height:0;white-space:nowrap;min-width:74px;text-align:end}
}

/* ---------- 3. the lab ---------- */
.lab2{margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--pit);overflow:hidden}
.j2{padding:10px 16px 6px;border-bottom:1px solid var(--line)}
.j2txt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--mute)}
.j2txt b{color:var(--ink)}
.j2txt .j2agi{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.j2bar{position:relative;height:4px;background:rgba(232,225,205,.12);border-radius:2px;margin:11px 8px 22px}
.j2bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--acc);border-radius:2px;transition:width .5s}
.j2n{position:absolute;top:50%;width:0;height:0}
.j2n b{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--pit);border:2px solid var(--mute)}
.j2n.done b{background:var(--acc);border-color:var(--acc)}
.j2n.next b{border-color:var(--acc)}
.j2n em{position:absolute;top:10px;left:0;transform:translateX(-50%);white-space:nowrap;font:normal 11px var(--mono);color:var(--mute)}
.j2n.done em,.j2n.next em{color:var(--ink)}
.j2n.first em{transform:none;left:-8px}
.j2n.last em{transform:translateX(-100%);left:8px}
.j2.narrow .j2n em{display:none}
.j2.narrow .j2n.next em,.j2.narrow .j2n.last em{display:block}
.j2me{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);border:3px solid var(--acc);transition:left .5s}
.l2scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.l2site{position:relative;min-width:620px}
.l2title{position:absolute;inset-inline-start:16px;top:10px;max-width:54%;font-size:12.5px;color:var(--mute);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2title b{display:block;font-size:15px;color:var(--ink)}
#l2svg{display:block;width:100%}
#l2svg .gl *{fill:none;stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
#l2svg .gl.hq *{stroke-width:1.7}
#l2svg .gl .led{fill:var(--acc);stroke:none}
#l2svg .gl.dim{opacity:.38}
#l2svg .gl.dim .led{fill:var(--red)}
#l2svg .slot{cursor:pointer}
#l2svg .slot *{fill:none;stroke:var(--mute);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
#l2svg .slot rect{stroke-dasharray:5 4;fill:rgba(232,225,205,.02)}
#l2svg .slot.ok *{stroke:var(--acc)}
#l2svg .slot:hover rect,#l2svg .slot:focus rect{fill:rgba(226,167,46,.12)}
#l2svg .slot:focus{outline:none}
#l2svg .cnt{font:11px var(--mono);fill:var(--mute)}
#l2svg .ground{stroke:var(--mute);stroke-width:1}
#l2svg .sep{stroke:var(--line);stroke-width:1}
#l2svg .bus{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;animation:l2flow 1.2s linear infinite}
#l2svg .bus.short{stroke:var(--red);animation:none;stroke-dasharray:6 6}
@keyframes l2flow{to{stroke-dashoffset:-16}}
#l2svg .rise{animation:l2rise .6s ease-out}
@keyframes l2rise{from{opacity:0;transform:translateY(8px)}}
#l2svg.work .led{animation:l2blink .16s steps(2) 3}
@keyframes l2blink{50%{opacity:.15}}
.l2caps{display:grid;border-top:1px solid var(--line)}
.l2cap{padding:7px 12px 9px;border-inline-end:1px solid var(--line);min-width:0}
.l2cap:last-child{border-inline-end:0}
.l2cap>b{display:block;font:700 11px var(--mono);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.l2cap>span{display:block;font:700 13.5px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 5px}
.l2cap>span.bad{color:var(--red)}
.l2cap>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2cap>b>i{font-style:normal;letter-spacing:.04em;color:var(--acc);margin-inline-start:6px}
.l2cap.weak{box-shadow:inset 0 2px 0 var(--acc)}
.l2cap>b>i.bad,.l2cap>small.bad{color:var(--red)}
.l2cap.sec>span .emo{color:var(--mute)}
.l2cap>small.due{color:var(--acc)}
.l2cap{cursor:default}
/* an invisible box over each drawing, so hovering anywhere on it (not just on a line) shows its tip */
#l2svg .hit{fill:transparent!important;stroke:none!important;pointer-events:all}
/* security: the lab reacts to a rival attack, and the boss hangs over it while loose */
.lab2{transition:border-color .3s}
.lab2.l2hit{border-color:var(--red)}
.lab2.l2hit #l2svg .wall *,.lab2.l2hit #l2svg .ground{stroke:var(--red)}
.lab2.l2hit .l2cap.sec>span{color:var(--red)}
.lab2.l2held{border-color:var(--acc)}
.lab2.l2held #l2svg .wall *{stroke:var(--acc)}
#l2svg .rogue{cursor:pointer}
#l2svg .rogue *{fill:none;stroke:var(--red);stroke-width:1.6}
#l2svg .rogue .hpb{stroke:none;fill:rgba(232,225,205,.15)}
#l2svg .rogue .hpf{stroke:none;fill:var(--red)}
#l2svg .rogue:focus{outline:none}
#l2svg .roguen{fill:var(--red)}
.l2cap>small{display:block;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Alan speaks from the lab instead of a banner */
html.ui2 .lab2 #nudge{margin:0;border-top:1px solid var(--line)}
html.ui2 .lab2 #nudge:empty{display:none}
html.ui2 .lab2 #nudge .nd{background:none;border:0;border-radius:0;padding:9px 12px;font-size:14px;gap:10px;flex-wrap:nowrap}
html.ui2 .lab2 #nudge .ada{border-inline-end:0;padding-inline-end:0;color:var(--acc)}
html.ui2 .lab2 #nudge .ada b{color:var(--acc)}
html.ui2 .lab2 #nudge .ada b::after{content:" ›";color:var(--mute)}
html.ui2 .lab2 #nudge .nd b{color:var(--ink)}
html.ui2 .lab2 #nudge .alan-do{padding:6px 12px}
/* a mission takes a beat to run */
html.ui2 .btn.l2run{position:relative;overflow:hidden;pointer-events:none}
html.ui2 .btn.l2run::before{content:"";position:absolute;inset:0;background:rgba(26,20,5,.28);transform-origin:left;animation:l2fill .22s linear forwards}
@keyframes l2fill{from{transform:scaleX(0)}}
@media(max-width:720px){
  .j2{padding:10px 12px 8px}
  .j2n em{display:none}
  .j2bar{margin-bottom:10px}
  .j2txt{font-size:12.5px}
  html.ui2 .lab2 #nudge .nd{flex-wrap:nowrap;padding:8px 10px;font-size:13px;gap:8px}
  html.ui2 .lab2 #nudge .ada-ic{width:26px;height:26px;font-size:15px}
  html.ui2 .lab2 #nudge .alan-do{width:auto;flex:none}
  .l2cap{padding:6px 10px 8px}
}
@media(prefers-reduced-motion:reduce){#l2svg .bus,#l2svg .rise,#l2svg.work .led,html.ui2 .btn.l2run::before{animation:none}}
@media(max-width:1180px) and (min-width:721px){html.ui2 nav.tabs{padding:6px}html.ui2 nav.tabs .tab{padding:8px 12px}}

/* ---------- 4. no neon left behind: every accent of the classic look, in the new palette ---------- */
html.ui2 .rtag{background:rgba(232,225,205,.08);border-radius:4px}
html.ui2 .rtag.common{color:#8d9388}html.ui2 .rtag.rare{color:#8fb8b0}html.ui2 .rtag.epic{color:#c9a27a}html.ui2 .rtag.legendary{color:#e2a72e}
html.ui2 .rtag.mythic{background:rgba(232,225,205,.16);color:#e8e1cd}
html.ui2 #spot{border-color:var(--acc);box-shadow:0 0 0 200vmax rgba(8,11,10,.74);animation:none}
html.ui2 .alan-hl{outline-color:var(--acc);animation:l2hl 1s ease-in-out 3}
@keyframes l2hl{50%{outline-color:var(--ink);box-shadow:0 0 0 5px rgba(226,167,46,.22)}}
html.ui2 .tab.new,html.ui2 .badge,html.ui2 #nudge .nd{animation:none}
html.ui2 .toast.win{border-color:rgba(169,196,106,.55)}html.ui2 .toast.bad{border-color:rgba(210,86,74,.6)}html.ui2 .toast.gold{border-color:rgba(226,167,46,.6)}
html.ui2 #tip{border-color:rgba(226,167,46,.5)}
html.ui2 #tip span{color:#c9c3b0}
html.ui2 .boss{background:var(--card);border-color:rgba(210,86,74,.6)}
html.ui2 .boss .tile{--c1:#d2564a;--c2:#d2564a;color:var(--red)}
html.ui2 .tile.mk1{box-shadow:inset 0 0 0 2px #8d9388}
html.ui2 .tile.mk2{box-shadow:inset 0 0 0 2px var(--acc)}
html.ui2 .tile.mk3{box-shadow:inset 0 0 0 2px var(--ink);animation:none}
html.ui2 .tile .mkb{background:var(--bg);border-color:rgba(232,225,205,.3)}
html.ui2 .tile.mk1 .mkb{border-color:#8d9388}
html.ui2 .tile.mk2 .mkb{border-color:var(--acc);color:var(--acc)}
html.ui2 .tile.mk3 .mkb{border-color:var(--ink);color:var(--ink)}
html.ui2 .rar-legendary .tile,html.ui2 .rar-mythic .tile{animation:none}
html.ui2 #arssum [data-k=atk] b{color:var(--red)}
html.ui2 #arssum [data-k=def] b{color:var(--cyan)}
html.ui2 .item.recm{box-shadow:none;border-color:rgba(226,167,46,.55)}
html.ui2 .seo{color:#c9c3b0}
html.ui2 .lang.on{border-color:var(--acc);background:rgba(226,167,46,.1)}
html.ui2 .bump{animation:l2bump .9s ease-out}
@keyframes l2bump{25%{transform:scale(1.05);box-shadow:0 0 0 2px var(--acc)}}
html.ui2 #flash h2{text-shadow:none}
html.ui2 .ghost.tog[aria-pressed=true]{border-color:rgba(226,167,46,.6);background:rgba(226,167,46,.1);color:var(--acc)}
html.ui2 .ghost:hover{background:rgba(232,225,205,.1)}
html.ui2 .stat .bar i{background:var(--red)}
html.ui2 .stat.d .bar i{background:var(--cyan)}
html.ui2 .mbox input{background:rgba(232,225,205,.06)}
html.ui2 .event .tm{color:var(--acc)}
html.ui2 #coach{box-shadow:0 20px 60px rgba(0,0,0,.6)}
html.ui2 .ressteps>div,html.ui2 .helpg div,html.ui2 .abt,html.ui2 .pstats div,html.ui2 #labbox .labgrid div,html.ui2 #arssum .arsrow div{background:rgba(232,225,205,.05)}
html.ui2 #spot::after{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23e2a72e%22%20d%3D%22M14%203v10l3.2-1.69l.22-.03c.29%200%20.55.12.74.32l.74.77l-4.9%204.2c-.26.27-.61.43-1%20.43H6.5c-.77%200-1.5-.7-1.5-1.5v-4.36c0-.61.35-1.14.85-1.34l4.94-2.2L12%207.47V3a1%201%200%200%201%201-1a1%201%200%200%201%201%201M5%2019h8v3H5z%22/%3E%3C/svg%3E") center/contain no-repeat}
html.ui2 .banner>svg [stroke]:not([stroke=none]){stroke:rgba(232,225,205,.4)}
html.ui2 .banner>svg [fill]:not([fill=none]){fill:rgba(232,225,205,.3)}
html.ui2 .tag.tot{background:rgba(169,196,106,.14)}
html.ui2 .tag.req{background:rgba(210,86,74,.14)}
html.ui2 .tag.req:hover{background:rgba(210,86,74,.28)}
html.ui2 #pendbar{background:var(--acc)!important}
html.ui2 .boss .bar i{background:var(--red)!important}

/* ---------- 5. no flash at load: the game area appears once, with the lab already in place ---------- */
html.ui2:not(.l2ready) .layout{visibility:hidden}