/* APPS (static/js/apps.js): the game apps to download, in the BRUNET COMMAND look */
.ap-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 11px/1.4 var(--mono); letter-spacing: .08em; color: rgba(205, 225, 240, .7); }
.ap-stats b { color: var(--amber, #ffb020); font-weight: 700; }

.ap-how { margin-top: 10px; padding: 14px 16px; }
.ap-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.ap-step { display: flex; gap: 10px; align-items: flex-start; }
.ap-n { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--holo); color: var(--holo);
  font: 700 13px var(--mono); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.ap-step b { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--amber, #ffb020); }
.ap-step p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: rgba(220, 235, 245, .82); }
.ap-note { margin-top: 12px; padding: 8px 10px; border-left: 2px solid var(--amber, #ffb020); background: rgba(255, 176, 32, .06); font-size: 13px; line-height: 1.45; }
.ap-key { margin-top: 12px; font: 10px/1.5 var(--mono); letter-spacing: .08em; color: rgba(205, 225, 240, .5); overflow-wrap: anywhere; }
.ap-key code { color: rgba(205, 225, 240, .75); font-family: inherit; }

.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 10px; }
.ap-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; min-width: 0; }
.ap-card.off { opacity: .55; }
.ap-ico { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(79, 227, 255, .25), 0 6px 18px rgba(0, 0, 0, .45); }
span.ap-ico svg { width: 56px; height: 56px; }
.ap-body { flex: 1; min-width: 0; }
.ap-name { font: 700 14px var(--mono); letter-spacing: .12em; color: #eaf6ff; }
.ap-line { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: rgba(220, 235, 245, .78); }
.ap-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 9px; }
.ap-meta { font: 10px var(--mono); letter-spacing: .08em; color: rgba(79, 227, 255, .7); }
.ap-dl { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--amber, #ffb020); color: var(--amber, #ffb020); background: rgba(255, 176, 32, .08);
  font: 700 11px var(--mono); letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.ap-dl:hover, .ap-dl:focus-visible { background: var(--amber, #ffb020); color: #120c00; }
.ap-dl.dis { border-color: rgba(205, 225, 240, .25); color: rgba(205, 225, 240, .45); background: none; }

/* SUGGEST A GAME (games/gamereq.py): the bar and the request line */
.ap-req { margin-top: 10px; padding: 14px 16px; }
.ap-req-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ap-req-head b { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--amber, #ffb020); }
.ap-req-head span { font-size: 12.5px; color: rgba(220, 235, 245, .72); }
.ap-req-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ap-req-form input { flex: 1 1 100%; min-width: 0; min-height: 38px; }
#ap-req-note { flex: 1 1 260px; min-width: 0; min-height: 56px; resize: vertical; font: inherit; line-height: 1.4; }
.ap-req-form button { min-height: 38px; padding: 0 18px; font: 700 12px var(--mono); letter-spacing: .14em; }
.ap-req-left { margin-top: 6px; font: 10px var(--mono); letter-spacing: .08em; color: rgba(205, 225, 240, .55); }
.ap-line { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-top: 12px; }
.ap-rq { border: 1px solid rgba(79, 227, 255, .22); border-left: 3px solid var(--holo); padding: 10px 12px; background: rgba(79, 227, 255, .03); min-width: 0; }
.ap-rq.wait { border-left-color: var(--amber, #ffb020); }
.ap-rq.build { border-left-color: #b06bff; }
.ap-rq.done { border-left-color: #7cffb2; }
.ap-rq.no { opacity: .5; border-left-color: rgba(205, 225, 240, .3); }
.ap-rq-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-rq-top a { font: 700 13px var(--mono); letter-spacing: .06em; color: #eaf6ff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ap-rq-top a:hover { color: var(--holo); }
.ap-chip { flex: 0 0 auto; padding: 2px 7px; border: 1px solid currentColor; font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--holo); }
.ap-rq.wait .ap-chip { color: var(--amber, #ffb020); }
.ap-rq.build .ap-chip { color: #b06bff; }
.ap-rq.done .ap-chip { color: #7cffb2; }
.ap-rq-meta { margin-top: 3px; font: 10.5px var(--mono); color: rgba(205, 225, 240, .55); overflow-wrap: anywhere; }
.ap-brief { margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 217, 138, .9); font-style: italic; overflow-wrap: anywhere; }
.ap-take { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(220, 235, 245, .85); }
.ap-take b { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--holo); }
.ap-twist { color: #ffd98a; }
.ap-conc { color: rgba(255, 140, 120, .85); }
.ap-rq-btns { display: flex; gap: 6px; margin-top: 8px; }
.ap-rq-btns:empty { display: none; }
.ap-rq-btns button { min-height: 30px; padding: 0 12px; font: 700 11px var(--mono); letter-spacing: .1em; }
.ap-rq-vote.on { background: var(--holo); color: #021018; }
.ap-empty { font-size: 13px; color: rgba(205, 225, 240, .55); }

@media (max-width: 520px) {
  .ap-grid, .ap-line { grid-template-columns: 1fr; }
  .ap-card { padding: 10px; gap: 10px; }
  .ap-ico, span.ap-ico svg { width: 48px; height: 48px; flex-basis: 48px; }
}