/* CSS Cog: player_resource_menu.css */
/* ================================================================
   PLAYER RESOURCE MENU FAB
   Author:   Steven J. Cook
   Date:     2026-04-29
   Time:     06:00 UTC
   Model:    Claude Opus 4.7
   Chat:     Abyssal Engine Web App Development (Lexicon Block + Export Scrub)
   Revision: 1.2.0
   Pairs with: player_resource_menu.js v1.2.3

   Visual idiom: floating action button (FAB) anchored bottom-LEFT
   of the viewport, matching the SharedDice toggle so both FABs
   share the same corner across views (SharedDice is tracker-only,
   this menu is sheet-only). Toggle button is always visible; the
   three resource links sit hidden in a vertical stack above it
   and reveal with a stagger when .prm-open is set on the
   container.

   Each link has a --prm-color CSS variable inlined by the JS
   renderer; the link's background and glow color both bind to
   it so adding a new resource entry only requires a JS-side
   change, not a CSS edit.

   Changelog:
     v1.2.0 - Added .prm-suppressed visibility rule. The FAB
              hides entirely when the Initiative Tracker view
              is active so it does not overlap the SharedDice
              toggle which lives in the same bottom-left slot.
              The suppression is class-based (set by
              player_resource_menu.js v1.2.3 via a
              MutationObserver on #view-tracker) so the FAB
              stays in DOM and reappears instantly when the
              tracker view closes.
     v1.1.0 - Moved from bottom-right to bottom-left to match the
              SharedDice toggle's anchor point. Button size bumped
              from 48px to 52px for visual parity with SharedDice.
              Mobile breakpoint adjusted accordingly.
     v1.0.0 - Initial version.
   ================================================================ */

.prm-container {
    position: fixed;
    /* v1.1.0: anchored bottom-left to match the SharedDice toggle
       (#shared-dice-toggle in shared_dice.css uses left:20px,
       bottom:20px, width:52px). Both FABs occupy the same corner
       real estate on different views (SharedDice is tracker-only,
       this menu is sheet-only) so they don't conflict, and using
       identical anchor coordinates keeps the visual language
       consistent across the app. */
    left: 20px;
    bottom: 20px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    pointer-events: none;
}

.prm-container > * {
    pointer-events: auto;
}

/* v1.2.0: full suppression. Player_resource_menu.js v1.2.3 adds
   the .prm-suppressed class to the container whenever the
   Initiative Tracker view is active so the FAB does not overlap
   the SharedDice toggle (#shared-dice-toggle, which only shows
   on the tracker view) at the bottom-left corner. Uses display:
   none and !important to override any open/animation state, so
   when the tracker becomes inactive the FAB reappears in its
   default closed state. */
.prm-container.prm-suppressed {
    display: none !important;
}

/* The vertical stack of resource links. CSS flex column-reverse
   makes the first DOM child render at the bottom, so the JS can
   list them in resource-array order and the visual stack matches
   the spec (Atlas closest to toggle, Guide at the top). */
.prm-stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.6em;
    /* Hidden by default; the toggle reveals via .prm-open. We
       use opacity + translateY rather than display:none so the
       transition can play on entry. visibility flips at the end
       of the animation to keep the stack out of tab order when
       collapsed. */
    opacity: 0;
    transform: translateY(0.6em);
    visibility: hidden;
    transition: opacity 0.18s ease,
                transform 0.18s ease,
                visibility 0s linear 0.18s;
}

.prm-container.prm-open .prm-stack {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.22s ease,
                transform 0.22s ease,
                visibility 0s linear 0s;
}

/* Per-button stagger: each link animates in slightly later than
   the one below it. With flex column-reverse the first DOM child
   is visually at the bottom, so the delays go nth-child(1) shortest
   to nth-child(N) longest, matching the bottom-up reveal order. */
.prm-container.prm-open .prm-stack .prm-link {
    animation: prmRise 0.28s ease both;
}
.prm-container.prm-open .prm-stack .prm-link:nth-child(1) { animation-delay: 0.00s; }
.prm-container.prm-open .prm-stack .prm-link:nth-child(2) { animation-delay: 0.05s; }
.prm-container.prm-open .prm-stack .prm-link:nth-child(3) { animation-delay: 0.10s; }
.prm-container.prm-open .prm-stack .prm-link:nth-child(4) { animation-delay: 0.15s; }
.prm-container.prm-open .prm-stack .prm-link:nth-child(5) { animation-delay: 0.20s; }

@keyframes prmRise {
    from {
        opacity: 0;
        transform: translateY(0.4em) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Shared button base for both the toggle and the links.
   52px circular targets matching the SharedDice toggle so the
   two FABs feel like a coordinated set when the user flips
   between sheet and tracker views. */
.prm-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                filter 0.15s ease;
    /* Reset link defaults for the <a> variant so they look the same
       as the <button> toggle. */
    line-height: 1;
    padding: 0;
}

.prm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    filter: brightness(1.1);
    text-decoration: none;
    color: #fff;
}

.prm-btn:focus-visible {
    outline: 2px solid var(--accent-cyan, #00b4d8);
    outline-offset: 3px;
}

.prm-btn:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* The three link buttons. Background and a soft outer glow both
   pull from the inline --prm-color variable. */
.prm-btn.prm-link {
    background: var(--prm-color, var(--accent-blue, #5865f2));
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        0 0 0 2px color-mix(in srgb, var(--prm-color, #5865f2) 35%, transparent);
}

.prm-btn.prm-link:hover {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 0 0 3px color-mix(in srgb, var(--prm-color, #5865f2) 55%, transparent);
}

/* Hamburger toggle. Blue per spec, matches the Fu Parser dice
   button on the converter page. The :hover lift is shared via
   .prm-btn so the toggle and links feel uniform. When the menu
   is open the toggle gains a subtle inner ring that hints at
   "pressed" state. */
.prm-btn.prm-toggle {
    background: var(--accent-blue, #5865f2);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(88, 101, 242, 0.35);
}

.prm-btn.prm-toggle:hover {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 0 0 3px rgba(88, 101, 242, 0.55);
}

.prm-container.prm-open .prm-btn.prm-toggle {
    background: var(--accent-blue-hover, #4752c4);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(88, 101, 242, 0.55),
        inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* Rotate the bars icon a quarter turn when open so the toggle
   has a clear "I am active" visual cue without needing a second
   icon swap. */
.prm-container.prm-open .prm-btn.prm-toggle i {
    transform: rotate(90deg);
}

.prm-btn.prm-toggle i {
    transition: transform 0.2s ease;
}

/* Mobile / narrow viewports: shrink slightly and tuck a hair
   closer to the corner so the FAB doesn't crowd the on-screen
   keyboard or other floating UI on phones. */
@media (max-width: 640px) {
    .prm-container {
        left: 12px;
        bottom: 12px;
        gap: 0.5em;
    }
    .prm-btn {
        width: 46px;
        height: 46px;
        font-size: 1em;
    }
    .prm-stack {
        gap: 0.5em;
    }
}

/* Reduced-motion respect: kill the rise animation but keep the
   open/close fade so users still get state feedback. */
@media (prefers-reduced-motion: reduce) {
    .prm-container.prm-open .prm-stack .prm-link {
        animation: none;
    }
    .prm-stack {
        transition: opacity 0.12s linear,
                    visibility 0s linear 0.12s;
    }
    .prm-container.prm-open .prm-stack {
        transition: opacity 0.12s linear,
                    visibility 0s linear 0s;
    }
}