/* ============================================================
   FRIENDS.CSS — two-column "people i love" page.
   left: (tbd). right: draggable logo windows that link out.
   ============================================================ */

/* break out of the narrow centered container — full width, less margin */
.bin-container:has(.friends-wrap) {
    max-width: none;
    padding-top: 16px; padding-left: 24px; padding-right: 24px;
}

.friends-wrap { width: 100%; }

/* ---- one big draggable windows playground (no backdrop, windows float free) ---- */
.friends-stage {
    position: relative; min-height: 72vh; margin-top: 0.6rem;
    overflow: hidden;
}
.friends-stage .stage-tag {
    position: absolute; top: 8px; left: 10px; pointer-events: none;
    font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 1px;
    color: var(--c-secondary); opacity: 0.5;
}

/* ---- the friend window ---- */
.fwin {
    position: absolute; width: 200px; user-select: none;
    background: rgba(6, 6, 14, 0.96);
    border: 1px solid rgba(var(--c-primary-rgb), 0.5);
    box-shadow: 0 0 18px rgba(var(--c-primary-rgb), 0.16), inset 0 0 30px rgba(var(--c-primary-rgb), 0.03);
    transition: box-shadow .16s ease, border-color .16s ease;
}
.fwin.dragging { box-shadow: 0 0 32px rgba(var(--c-primary-rgb), 0.55); border-color: var(--c-primary); }

/* corner brackets */
.fwin::before, .fwin::after {
    content: ""; position: absolute; width: 10px; height: 10px;
    border: 2px solid var(--c-secondary); opacity: 0.7; pointer-events: none;
}
.fwin::before { left: -1px; top: -1px; border-right: none; border-bottom: none; }
.fwin::after { right: -1px; bottom: -1px; border-left: none; border-top: none; }

/* title bar = the drag handle */
.fwin-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 6px 10px; touch-action: none;
    background: rgba(var(--c-primary-rgb), 0.14);
    border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.32);
    font-family: var(--f-mono, monospace); font-size: 12px; letter-spacing: 1px; color: var(--c-primary);
}
/* the global `*` rule sets a cursor on every child, so force it on the children too */
.fwin-bar, .fwin-bar * { cursor: grab; }
.fwin-bar:active, .fwin-bar:active * { cursor: grabbing; }
.fwin-bar .dots { display: flex; gap: 4px; }
.fwin-bar .dots i { width: 8px; height: 8px; display: block; border: 1px solid var(--c-secondary); }

/* body = just the (clickable) logo */
.fwin-body { padding: 1rem; text-align: center; }
/* match the site's link cursor on the logo + its <img> child (beats the global `*` rule) */
.fwin-link, .fwin-link img { cursor: url(/img/out.png), pointer; }
.fwin-link img {
    display: block; width: 100%; height: auto; margin: 0 auto;
    image-rendering: pixelated; image-rendering: crisp-edges;
    filter: drop-shadow(0 0 10px rgba(var(--c-primary-rgb), 0.25));
    transition: filter .16s ease, transform .16s ease;
}
.fwin-link:hover img { filter: drop-shadow(0 0 18px rgba(var(--c-primary-rgb), 0.65)); transform: scale(1.05); }
/* vector logos should stay crisp, not pixelated */
.fwin-link img[src$=".svg"] { image-rendering: auto; }

@media (max-width: 880px) {
    .friends-stage { min-height: 78vh; }
}

/* ============================================================
   THE WHOLE ROSTER — button + big overlay window with name grid
   ============================================================ */
.roster-btn {
    margin-top: 0.6rem;
    font-family: var(--f-mono, monospace); font-size: 13px; letter-spacing: 1px;
    cursor: pointer; padding: 0.5rem 1.1rem;
    color: var(--c-secondary); background: rgba(var(--c-secondary-rgb), 0.08);
    border: 1px solid rgba(var(--c-secondary-rgb), 0.5);
    transition: color .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.roster-btn:hover {
    color: var(--c-bg); background: var(--c-secondary); border-color: var(--c-secondary);
    box-shadow: 0 0 calc(20px * var(--glow)) rgba(var(--c-secondary-rgb), var(--glow));
}

/* dimmed, blurred backdrop — sits above every floating logo window */
.roster-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(2, 2, 8, 0.74); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.roster-overlay.show { opacity: 1; visibility: visible; }

.roster-win {
    width: min(900px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
    background: rgba(6, 6, 14, 0.98);
    border: 1px solid var(--c-primary);
    box-shadow: 0 0 40px rgba(var(--c-primary-rgb), 0.35), inset 0 0 60px rgba(var(--c-primary-rgb), 0.05);
    transform: translateY(8px) scale(0.985); transition: transform .2s ease;
}
.roster-overlay.show .roster-win { transform: none; }
/* corner brackets to match the .fwin look */
.roster-win::before, .roster-win::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border: 2px solid var(--c-secondary); opacity: 0.8; pointer-events: none;
}
.roster-win::before { left: -1px; top: -1px; border-right: none; border-bottom: none; }
.roster-win::after { right: -1px; bottom: -1px; border-left: none; border-top: none; }

.roster-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; flex: 0 0 auto;
    background: rgba(var(--c-primary-rgb), 0.14);
    border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.32);
    font-family: var(--f-mono, monospace); font-size: 13px; letter-spacing: 1px; color: var(--c-primary);
}
.roster-x {
    cursor: pointer; background: none; border: none; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-primary); font-size: 22px; padding: 0 4px;
    transition: color .14s ease, transform .14s ease;
}
.roster-x .pi { font-size: 18px; }
.roster-x:hover { color: var(--c-secondary); transform: scale(1.15); }

.roster-body { padding: 16px; overflow-y: auto; }
.roster-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.roster-cell {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0.7rem 0.6rem; min-height: 46px;
    font-family: var(--f-mono, monospace); font-size: 13.5px; letter-spacing: 0.5px;
    color: var(--c-text); text-decoration: none;
    background: rgba(var(--c-text-rgb), 0.03);
    border: 1px solid rgba(var(--c-primary-rgb), 0.28);
    transition: color .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
/* linked names glow like the rest of the site's links */
a.roster-cell:hover {
    color: var(--c-primary); border-color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), 0.08);
    box-shadow: 0 0 14px rgba(var(--c-primary-rgb), 0.3);
    cursor: url(/img/out.png), pointer;
}

@media (max-width: 880px) {
    .roster-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}