/* game friends (src/ui/friends.js; the Friends tab is community.js's, the name menu chat.js's) */
/* the alerts (friends.js card; the owner, 2026-10-24: "match the website… make it better"): the home hub's own pieces. A
   chamfered card as a play mode's (start.css .mode: orange-edged and tinted when it asks for an answer, as a chosen mode is;
   navy-edged for an answer to my own action; red for a refusal), the player's picture in the mode icon's chamfered square
   (.mdIc), a slanted tag (.capTag), the name big in the display face over a quiet line (.mdTx), slanted buttons (orange
   the first) and the hero's foot line (.capHero::after) as the timer. Top left, dropping down from the top, under the
   header or the match's round tracker, the newest on top (the owner, 2026-10-24). Never modal: the screen stays usable. */
.friendCards{position:fixed;top:5rem;left:1rem;z-index:120;display:flex;flex-direction:column;align-items:stretch;gap:.625rem;width:min(25rem,calc(100% - 2rem));pointer-events:none;filter:drop-shadow(0 .75rem 1.25rem rgba(5,9,23,.8))}
.friendCard{--fa:#ff9f1c;position:relative;pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.875rem;row-gap:.75rem;padding:.875rem .875rem 1.1875rem;color:#e8ecff;background:linear-gradient(120deg,rgba(255,159,28,.2),#121a33 60%),#0e1530;border:.125rem solid var(--fa);clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem);animation:fcIn .42s cubic-bezier(.2,.9,.3,1.18) both}
.friendCard:not(:has(.fcBtns)){border-color:#2a3766;background:linear-gradient(120deg,rgba(255,159,28,.09),#121a33 60%),#0e1530}
.friendCard.bad{--fa:#ff5a5f;border-color:#ff5a5f;background:linear-gradient(120deg,rgba(255,90,95,.18),#121a33 60%),#0e1530}
.friendCard.out{opacity:0;transform:translateY(-1rem);transition:opacity .2s,transform .2s}
.fcIc{width:3.25rem;height:3.25rem;display:grid;place-items:center;overflow:hidden;background:#1a2346;color:#fff;font-family:var(--disp);font-style:italic;font-size:1.5rem;line-height:1;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
.fcIc img{width:100%;height:100%;object-fit:cover}
.fcIc.glyph{background:var(--fa);color:#160c00;font-style:normal;font-size:1.375rem}
.friendCard.bad .fcIc.glyph{color:#fff}
.fcTx{display:flex;flex-direction:column;align-items:flex-start;gap:.3125rem;min-width:0;padding-right:1.25rem}   /* (clear of the ×) */
.fcTag{max-width:100%;padding:.1875rem .75rem .1875rem .625rem;background:var(--fa);color:#160c00;font-family:var(--disp);font-style:italic;font-size:.6875rem;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:polygon(.4375rem 0,100% 0,calc(100% - .4375rem) 100%,0 100%)}
.friendCard.bad .fcTag{color:#fff}
.friendCard:not(:has(.fcBtns)):not(.bad) .fcTag{background:#1f2a52;color:#ffb547}   /* an answer to my own action: the tag a step quieter */
.fcName{max-width:100%;font-family:var(--disp);font-style:italic;font-size:1.375rem;line-height:1;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcTx small{font-size:.8125rem;line-height:1.35;color:#9aa6d6;overflow-wrap:anywhere}
.fcCode{font-family:var(--disp);font-style:italic;letter-spacing:.08em;color:#ffb547}
.fcBtns{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.fcBtn{width:auto;min-height:2.5rem;margin:0;padding:0 1rem;border:0;border-radius:0;background:#1a2346;color:#dfe4ff;box-shadow:none;font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%);transition:background .15s,filter .15s}
.fcBtn:hover{background:#26325f;color:#fff}
.fcBtn.go,.fcBtn.go:hover{background:linear-gradient(180deg,#ffb347,#ff9f1c);color:#160c00}
.fcBtn.go:hover{filter:brightness(1.08)}
.fcX{position:absolute;top:.3125rem;right:.375rem;width:1.5rem;height:1.5rem;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#7d89b8;font-size:1.125rem;line-height:1;cursor:pointer}
.fcX:hover{color:#fff}
.fcBtn:focus-visible,.fcX:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
/* the time left: the hero's foot line along the card's foot, full to empty over the alert's time, linear and on the
   compositor (scaleX), paused while the pointer is on the alert as its timer is (friends.js card) */
.fcTime{position:absolute;left:0;right:0;bottom:0;height:.3125rem;background:rgba(255,255,255,.07);overflow:hidden;pointer-events:none}
.fcTime i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--fa),#ffd08a);box-shadow:0 0 .5rem var(--fa);transform-origin:left center;animation:fcTime var(--fcMs,7000ms) linear forwards;will-change:transform}
.friendCard.bad .fcTime i{background:linear-gradient(90deg,#ff5a5f,#ffb0b2)}
.friendCard:hover .fcTime i{animation-play-state:paused}
@keyframes fcTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes fcIn{from{opacity:0;transform:translateY(-2.5rem)}60%{opacity:1}to{opacity:1;transform:none}}   /* (dropping down from the top, a little past and back) */
@media (max-width:480px){.friendCards{left:.75rem;right:.75rem;width:auto}.fcIc{width:2.75rem;height:2.75rem;font-size:1.25rem}.fcName{font-size:1.1875rem}}
@media (prefers-reduced-motion:reduce){.friendCard{animation:none}.friendCard.out{transition:none}}
/* requests waiting, on the start screen's FRIENDS button: a red "!" with no chip that slowly swells and settles (the
   owner, 2026-10-24: not a red count; how many is its title), pinned in the button's top right corner out of the flow, so it
   never widens the button (inside it: the button's slanted clip-path cuts off anything outside). */
#startOv .friendsBtn{position:relative}
.fBadge{position:absolute;top:.0625rem;right:.375rem;display:block;width:auto;height:auto;padding:0;background:none;border-radius:0;color:#e0001c;font-family:var(--disp);font-style:normal;font-size:1.125rem;line-height:1;letter-spacing:0;text-shadow:0 0 .0625rem #3a0008,0 0 .0625rem #3a0008,0 0 .375rem rgba(224,0,28,.45);transform-origin:center;pointer-events:none;animation:fBang 1.8s ease-in-out infinite alternate}
@keyframes fBang{from{transform:scale(.85)}to{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.fBadge{animation:none}}
/* the Friends tab */
.fAdd{display:flex;gap:.375rem;margin-bottom:.25rem}
.fAddIn{flex:1;min-width:0;padding:.375rem .5rem;border-radius:.5rem;border:1px solid var(--line,#2a3560);background:rgba(8,10,20,.6);color:var(--fg,#e8ecff);font:inherit;font-size:.8125rem}
.fAddIn:focus{outline:none;border-color:var(--gold,#ffc94a)}
.fList{display:flex;flex-direction:column;gap:.375rem}
.fRow .fSt{color:var(--dim,#a7b0d8);font-size:.6875rem}
.commBtn.go{border-color:#ff9f1c;color:#ffc56b}
.commBtn.rm{min-width:1.75rem;text-align:center}
/* the name menu in the match chat: the alert's card, small */
.chatMenu{position:absolute;z-index:2;display:flex;flex-direction:column;min-width:11rem;padding:.25rem;border:1px solid #2a3766;background:#121a33;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.6);pointer-events:auto}
.chatMenuIt{padding:.4375rem .625rem;border:0;border-left:2px solid transparent;border-radius:0;background:none;color:#dfe4ff;font:inherit;font-size:.8125rem;text-align:left;cursor:pointer}
.chatMenuIt:hover:not([disabled]),.chatMenuIt:focus-visible{background:#1a2346;border-left-color:#ff9f1c;color:#fff;outline:none}
.chatMenuIt[disabled],.chatMenuIt.info{color:#9ea9c9;cursor:default;font-style:italic}   /* .info: a menu line that says something (a computer-controlled Captain), focusable, no action */
.chatMenuIt.info:hover{background:none}
.chatMenuIt.danger{color:#ff9c8f}   /* Report (a CPU's menu has none: its last line is Hide) */