/* menu QoL: spend readout, ammo warning, upgrade preview, league progress, tab keycaps, loading tiles, forms */
#spend{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));top:calc(24px + env(safe-area-inset-top,0px));z-index:3;padding:1px 8px;font:12px var(--f-lcd);color:#ff5a3a;background:#0b170b;border:1px solid #2b3133;text-shadow:0 0 6px rgba(255,90,58,.6);pointer-events:none;animation:spend 1.6s ease-out forwards}
#spend.gain{color:#7dff5f;text-shadow:0 0 6px rgba(125,255,95,.6)}
@keyframes spend{0%{opacity:0;transform:translateY(-4px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.ammoW{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ammoW .lcdbox b{color:#ff5a3a;text-shadow:0 0 6px rgba(255,90,58,.6);font-size:14px}
.nxt{margin-top:2px;font-size:10px;color:#9fd79a}.nxt b{color:#6dff5a;font-weight:normal}
.mbtn.confirm{color:#fff;background:linear-gradient(180deg,#e2482d,#a8301c);text-shadow:0 1px 0 #000;animation:blink 1s steps(2) infinite}
.lgProg{position:relative;height:16px;margin:0 6px 12px;background:#0b170b;border:2px solid #2b3133;box-shadow:inset 0 0 8px #000}
.lgProg i{display:block;height:100%;background:repeating-linear-gradient(90deg,#3fc23a 0 10px,#2a8c24 10px 12px);box-shadow:0 0 6px rgba(63,194,58,.6)}
.lgProg span{position:absolute;inset:0;text-align:center;font:10px/12px var(--f-lcd);color:#e9ffe2;text-shadow:0 1px 1px #000}
.tab[data-key]::after{content:attr(data-key);display:inline-block;margin-left:6px;min-width:13px;padding:0 3px;border-radius:2px;background:linear-gradient(#f4f4f3,#c2c6c7);box-shadow:0 1px 0 #6f7476;color:#2b2f31;font:bold 9px Arial,sans-serif;text-shadow:none;vertical-align:1px}
.ldg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:24px;font:10px var(--f-lcd);letter-spacing:2px;color:#5fae4c;background:#0b170b repeating-linear-gradient(0deg,rgba(134,242,106,.06) 0 1px,transparent 1px 3px);animation:blink 1.1s steps(2) infinite}
.hsTabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.hsTabs .mbtn.on{color:#3dff3d;text-shadow:0 0 7px rgba(61,255,61,.85),0 1px 1px #000;background:linear-gradient(180deg,#a3a8aa,#80878a 50%,#6c7275)}
.tbl th.srt{color:#6dff5a}
.pwRow{display:flex;gap:6px;align-items:stretch}.pwRow input{flex:1;min-width:0}
.pwBtn{font:700 9px var(--f-tab);letter-spacing:1px;padding:0 8px;border:1px solid #16191a;border-radius:3px;cursor:pointer;color:#1d2122;background:linear-gradient(180deg,#e6e8e8,#a5aaab)}
.aTag{cursor:pointer}.aTag:hover{text-decoration:underline}
#tabs .tab[data-unread]:not([data-unread=""])::after{content:attr(data-unread);position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:#e2482d;color:#fff;font:700 10px/16px var(--f-ui);text-align:center;box-shadow:0 0 6px rgba(226,72,45,.8)}
#tabs .tab{position:relative}
.aMsgBar{display:none;margin:0 0 8px;padding:6px 10px;border-radius:4px;font:700 11px var(--f-ui)}
.aMsgBar.ok{display:block;background:rgba(60,240,60,.14);color:#6dff5a;box-shadow:inset 0 0 0 1px #2f8f2f}
.aMsgBar.bad{display:block;background:rgba(226,72,45,.16);color:#ff8a6a;box-shadow:inset 0 0 0 1px #8f2f2f}
.aHead{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(200px,260px);gap:14px;padding:12px;align-items:start}
.aEmb{width:86px;height:86px;border-radius:8px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),rgba(0,0,0,.5)),#141a14;box-shadow:inset 0 0 0 2px var(--ac),inset 0 0 18px color-mix(in srgb,var(--ac) 45%,transparent),0 0 10px rgba(0,0,0,.6)}
.aEmb span{font:700 24px var(--f-tab);letter-spacing:2px;color:var(--ac);text-shadow:0 0 10px var(--ac),0 2px 0 #000}
.aName{font:700 17px var(--f-tab);letter-spacing:1px;color:#fff;margin-bottom:6px;overflow-wrap:anywhere}
.aDesc{font-size:12px;color:#cfe0cc;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.aRole{margin-top:8px;font:700 10px var(--f-tab);letter-spacing:1px;color:#9fd79a}
.aStats .tbl td{padding:3px 6px}
.r-leader{color:#ffd24a!important}.r-officer{color:#8fd0ff!important}.r-member{color:#e6ece6}.r-gone{color:#8a978a}
.aGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0 16px}
.aCol{min-width:0}
.aChat{display:flex;flex-direction:column;height:min(54vh,460px);padding:6px}
.aChatLog{flex:1;overflow-y:auto;padding:4px 6px;font:12px var(--f-lcd);background:#071107;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 18px rgba(0,0,0,.5);user-select:text;-webkit-user-select:text}
.cLine{padding:2px 0;line-height:1.45;overflow-wrap:anywhere;color:#d8f5d0}
.cLine i{font-style:normal;color:#5f8a5a;margin-right:6px;font-size:11px}
.cLine b{margin-right:6px;color:#9fe08f}
.cLine.me b{color:#6dff5a}
.cLine.sys{color:#8fb38a;font-style:italic}
.cDay{margin:6px 0 2px;text-align:center;font:700 9px var(--f-tab);letter-spacing:2px;color:#4f7a4a}
.aChatF{display:flex;gap:6px;margin-top:6px}
.aChatF input,.aForm input,.aForm textarea,.aForm select,.aRelSel,.aQ,.aDis input{font:13px var(--f-lcd);padding:6px 8px;background:#0b170b;color:var(--lcd);border:2px solid #2b3133;border-radius:3px;outline:none;user-select:text;-webkit-user-select:text;min-width:0}
.aChatF input{flex:1}
.aForm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px;align-items:end}
.aForm label{display:flex;flex-direction:column;gap:3px;color:#9fd79a;font:700 9px var(--f-tab);letter-spacing:1px;min-width:0}
.aForm .wide{grid-column:1/-1}.aForm textarea{resize:vertical}
.aForm>.mbtn{grid-column:1/-1}
.aPrev{font:12px var(--f-lcd);color:#cfe0cc}.aPrev b{color:#f2f2ea}
.aQ{flex:1}
.aAct{white-space:nowrap}.aAct .mbtn{margin-left:4px;padding:4px 8px;font-size:10px}
.aRelSel{margin-left:4px;padding:3px 6px;font-size:11px;vertical-align:middle}
.mbtn.red{color:#fff;background:linear-gradient(180deg,#c8553f,#7e2a1d)}
.aBot{margin:12px 0 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aDis{display:flex;gap:6px;margin-left:auto}.aDis input{width:70px}
@media (max-width:820px){.aGrid{grid-template-columns:1fr}.aHead{grid-template-columns:auto minmax(0,1fr)}.aStats{grid-column:1/-1}.aForm{grid-template-columns:1fr}}
.pform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:end;padding:10px;font-size:11px}
.pform label{display:flex;flex-direction:column;gap:3px;color:#9fd79a;font:700 9px var(--f-tab);letter-spacing:1px}
.pform input{font:13px var(--f-lcd);padding:5px 7px;background:#0b170b;color:var(--lcd);border:2px solid #2b3133;border-radius:3px;outline:none;user-select:text;-webkit-user-select:text}
.pform .msg{grid-column:1/-1}
td.ok{color:#6dff5a!important}td.bad{color:#ff7a5c!important}
@media (max-width:700px){.pform{grid-template-columns:1fr}}
/* upgrade level bars on the weapons page */
.lgProg.upProg{margin:6px 0 4px;height:14px}.lgProg.upProg span{font-size:9px;line-height:10px}