/* LOADOUT: a wrist computer (assets/pip/frame.webp, a Krea render: tools/gen_pip.sh, tools/prep_pip.py) whose black
   screen is a green CRT. Every size is a multiple of --u: 1% of the screen's width on wide windows, where the device is
   drawn around it, and a fixed step on phones, where the screen fills the page in a plain metal bezel. */
.pip{--g:#7dff5f;--g2:#4fd236;--g3:#2b7d22;--gdim:#1d4d18;--bg:#020a03;--glow:0 0 6px rgba(125,255,95,.75),0 0 14px rgba(125,255,95,.25);
  position:relative;width:min(100%,1060px);margin:0 auto;aspect-ratio:1.5;font-family:'VT323',var(--f-lcd),monospace}
.pip>img.frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.65))}
.p-crt{--u:1cqw;position:absolute;left:21.3%;top:20.74%;width:57.17%;height:56.61%;overflow:hidden;border-radius:3.2%/4.6%;container-type:inline-size;
  background:radial-gradient(ellipse at 50% 45%,#0b2a0c 0%,#041306 60%,#010501 100%);color:var(--g);text-shadow:var(--glow);animation:pipFlick 4s infinite steps(1)}
.p-crt::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}
.p-crt::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 calc(6 * var(--u)) rgba(0,0,0,.85),inset 0 0 calc(1.4 * var(--u)) rgba(125,255,95,.18);
  background:linear-gradient(180deg,transparent 0,rgba(125,255,95,.06) 48%,transparent 52%) 0 -120%/100% 240% no-repeat;animation:pipRoll 7s linear infinite}
@keyframes pipRoll{to{background-position:0 120%}}
@keyframes pipFlick{0%,97%,100%{opacity:1}98%{opacity:.88}99%{opacity:.96}}
.p-crt .ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:calc(2.4 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u));font-size:calc(3.1 * var(--u));line-height:1.05}
.p-crt button{all:unset;cursor:pointer;font:inherit}
/* tabs with a bracket under the active one, the wallet on the right */
.p-crt .tabs{display:flex;gap:calc(3.2 * var(--u));align-items:flex-end;border-bottom:calc(.35 * var(--u)) solid var(--g);padding:0 var(--u) calc(.6 * var(--u));flex-wrap:wrap}
.p-crt .tabs button{font-size:calc(3.6 * var(--u));letter-spacing:calc(.25 * var(--u));color:var(--g3);text-shadow:none;padding:0 calc(.6 * var(--u))}
.p-crt .tabs button:hover{color:var(--g2)}
.p-crt .tabs button.on{color:var(--g);text-shadow:var(--glow);position:relative}
.p-crt .tabs button.on::after{content:'';position:absolute;left:calc(-.8 * var(--u));right:calc(-.8 * var(--u));bottom:calc(-1.25 * var(--u));height:calc(1.2 * var(--u));border:calc(.35 * var(--u)) solid var(--g);border-bottom:0;background:var(--bg)}
.p-crt .wallet{margin-left:auto;display:flex;gap:calc(2 * var(--u));font-size:calc(2.7 * var(--u));color:var(--g2)}
.p-crt .wallet b{font-weight:normal;color:var(--g)}
.p-crt .body{flex:1;min-height:0;display:grid;grid-template-columns:44% minmax(0,1fr);gap:calc(3 * var(--u));padding-top:calc(2.2 * var(--u))}
/* the list: the selected row inverted, like a terminal cursor */
.p-crt .list{display:flex;flex-direction:column;gap:calc(.3 * var(--u));min-height:0;overflow-y:auto;scrollbar-width:none}
.p-crt .p-row{display:flex;align-items:center;gap:calc(1.4 * var(--u));padding:calc(.25 * var(--u)) var(--u);cursor:pointer;white-space:nowrap}
.p-crt .p-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis}
.p-crt .p-row.off{color:var(--g3);text-shadow:none}
.p-crt .p-row:hover{background:rgba(125,255,95,.1)}
.p-crt .p-row.sel{background:var(--g);color:var(--bg);text-shadow:none;box-shadow:0 0 calc(1.2 * var(--u)) rgba(125,255,95,.6)}
.p-crt .p-row.sel .seg i{background:var(--bg);box-shadow:none}.p-crt .p-row.sel .seg i.e{background:rgba(2,10,3,.35)}
.p-crt .tg{font-size:calc(2.3 * var(--u));opacity:.85}
.p-crt .hd{display:flex;align-items:center;gap:var(--u);font-size:calc(2.3 * var(--u));letter-spacing:calc(.3 * var(--u));color:var(--g2);text-shadow:none;margin:calc(1.2 * var(--u)) var(--u) calc(.3 * var(--u))}
/* a section title with a rule running out to the edge, so it reads as a divider and not as a row */
.p-crt .hd::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--g),transparent);opacity:.55}
.p-crt .list>.hd:first-child{margin-top:0}
/* segmented bars: one cell per level */
.p-crt .seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:calc(1.6 * var(--u));gap:calc(.45 * var(--u));height:calc(1.7 * var(--u));vertical-align:middle;flex:0 0 auto}
.p-crt .seg i{background:var(--g);box-shadow:0 0 calc(.8 * var(--u)) rgba(125,255,95,.7)}
.p-crt .seg i.e{background:var(--gdim);box-shadow:none}
.p-crt .seg.long{grid-auto-columns:1fr;width:100%;gap:calc(.35 * var(--u));height:calc(2 * var(--u))}
/* the detail pane with the actions at the bottom */
.p-crt .det{display:flex;flex-direction:column;gap:var(--u);min-height:0;overflow-y:auto;scrollbar-width:none;border-left:calc(.25 * var(--u)) dashed var(--g3);padding-left:calc(2.4 * var(--u))}
.p-crt .top{display:flex;gap:calc(2.2 * var(--u));align-items:center}
.p-crt .pic{flex:0 0 auto;background:#000;border:calc(.25 * var(--u)) solid var(--g3);display:flex;align-items:center;justify-content:center;padding:calc(.4 * var(--u))}
.p-crt .pic img{display:block;mix-blend-mode:screen;filter:drop-shadow(0 0 calc(.6 * var(--u)) rgba(125,255,95,.6))}
.p-crt h2{margin:0;font:inherit;font-size:calc(4.4 * var(--u));letter-spacing:calc(.2 * var(--u));line-height:1}
.p-crt .p-sub{font-size:calc(2.5 * var(--u));color:var(--g2)}
.p-crt .desc{font-size:calc(2.7 * var(--u));color:var(--g2)}
.p-crt .p-st{display:grid;grid-template-columns:calc(14 * var(--u)) minmax(0,1fr) auto;gap:calc(.8 * var(--u)) calc(1.6 * var(--u));align-items:center;font-size:calc(2.8 * var(--u))}
.p-crt .p-st b{font-weight:normal;text-align:right}
/* STATUS: one read-only page across the screen, the particulars beside the bars */
.p-crt .body.full{grid-template-columns:1fr}
.p-crt .body.full .det{border-left:0;padding-left:0;gap:calc(2 * var(--u))}
.p-crt .p-cols{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:calc(4 * var(--u));align-items:start}
.p-crt .p-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(.8 * var(--u)) calc(2 * var(--u));font-size:calc(2.8 * var(--u));border-right:calc(.25 * var(--u)) dashed var(--g3);padding-right:calc(3 * var(--u))}
.p-crt .p-kv span{color:var(--g2)}.p-crt .p-kv b{font-weight:normal;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-crt .why{font-size:calc(2.5 * var(--u));color:#ffb347;text-shadow:0 0 6px rgba(255,179,71,.5)}
.p-crt .p-acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--u);padding-top:var(--u);border-top:calc(.25 * var(--u)) solid var(--g3)}
.p-crt .p-acts button{border:calc(.3 * var(--u)) solid var(--g);padding:calc(.3 * var(--u)) calc(1.2 * var(--u));font-size:calc(2.8 * var(--u));white-space:nowrap}
.p-crt .p-acts button:hover:not(:disabled),.p-crt .p-acts button:focus-visible{background:var(--g);color:var(--bg);text-shadow:none;box-shadow:0 0 calc(1.2 * var(--u)) rgba(125,255,95,.6)}
.p-crt .p-acts button:disabled{border-color:var(--g3);color:var(--g3);text-shadow:none;cursor:default}
.p-crt .p-acts button.confirm{border-color:#ffb347;color:#ffb347;text-shadow:0 0 6px rgba(255,179,71,.6)}
.p-crt .p-acts .p-note{align-self:center;font-size:calc(2.5 * var(--u));color:var(--g3);text-shadow:none}
.p-crt .p-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--u);height:calc(3.6 * var(--u));font-size:calc(2.3 * var(--u));color:var(--g3);text-shadow:none;padding-top:var(--u)}
.p-crt .p-foot .amo{color:#ffb347;text-shadow:0 0 6px rgba(255,179,71,.6)}
.p-crt .p-foot .amo button{margin-left:var(--u);padding:0 var(--u);border:calc(.25 * var(--u)) solid #ffb347}
.p-crt .p-foot .amo button:hover{background:#ffb347;color:var(--bg);text-shadow:none}
/* the BATTLE key in the footer: an outline button like the actions, filled on hover */
.p-crt .p-go{flex:none;padding:0 calc(1.6 * var(--u));height:100%;border:calc(.3 * var(--u)) solid var(--g);color:var(--g);text-shadow:0 0 6px rgba(125,255,95,.6);font-size:calc(2.6 * var(--u));letter-spacing:calc(.3 * var(--u));cursor:pointer}
.p-crt .p-go:hover:not(:disabled),.p-crt .p-go:focus-visible{background:var(--g);color:var(--bg);text-shadow:none;box-shadow:0 0 calc(1.2 * var(--u)) rgba(125,255,95,.6)}
.p-crt .p-go:disabled{border-color:var(--g3);color:var(--g3);text-shadow:none;cursor:default}
.pip .knob{position:absolute;width:6.4%;height:9.6%;border-radius:50%;cursor:pointer;z-index:6}
.pip .knob:hover{box-shadow:0 0 0 2px rgba(125,255,95,.5),0 0 18px rgba(125,255,95,.4)}
/* phones and narrow windows: no device around it, the CRT is the page, the selected item and its actions first */
@media (max-width:760px){
  #loadoutIn{justify-content:flex-start;padding:10px}#loadoutIn .pip{width:100%}
  .pip{aspect-ratio:auto}
  .pip>img.frame,.pip .knob{display:none}
  .p-crt{--u:4.6px;position:relative;inset:auto;width:100%;height:auto;min-height:72vh;border-radius:14px;border:8px solid #464a40;box-shadow:inset 0 0 0 2px #1b1d18,0 0 0 2px #2a2d26,0 10px 24px rgba(0,0,0,.6)}
  .p-crt .ui{position:relative;inset:auto;min-height:72vh}
  .p-crt .body{grid-template-columns:1fr;gap:calc(3 * var(--u))}
  .p-crt .p-cols{grid-template-columns:1fr}.p-crt .p-kv{border-right:0;padding-right:0}
  .p-crt .det{order:-1;border-left:0;padding-left:0;border-bottom:calc(.4 * var(--u)) dashed var(--g3);padding-bottom:calc(2 * var(--u));overflow:visible}
  .p-crt .list{overflow:visible}
  .p-crt .p-row{padding:calc(.8 * var(--u)) var(--u)}
  .p-crt .p-acts button{padding:calc(1 * var(--u)) calc(1.6 * var(--u))}
  .p-crt .wallet{width:100%;margin:calc(.8 * var(--u)) 0 0;order:-1;justify-content:space-between}
  .p-crt .tabs{gap:calc(2.6 * var(--u))}
}