/* === Gorilla Position — Decision Deck === */
/* Tactile "make the call" interaction: draggable call cards + a drop target.
   Drag is additive. Every card is a real <button>: click and keyboard
   (Tab + Enter/Space) commit the same call. Motion is gated by
   prefers-reduced-motion; SFX is NOT (sound is not motion). The gorilla
   modal palette stays on the darker control-room look (#0a0a0a / #1a1a1a /
   gold #FFD700) for consistency with the existing modal. */

/* Layout: the deck is a flex column so the drop zone can pin to the bottom of
   the (scrollable) decision panel while the cards scroll above it. This keeps
   the commit target reachable on short viewports — the clipping that made the
   injury buttons unclickable. */
.gp-deck {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Fill the (bounded) #decision-content so the card rail can scroll while
       the drop zone stays pinned. min-height:0 lets the rail shrink below its
       content height instead of forcing the whole deck to overflow. */
    flex: 1 1 auto;
    min-height: 0;
}

/* Badge + prompt block: fixed at the top of the deck, never shrinks away. */
.gp-deck__head {
    flex-shrink: 0;
}

.gp-deck__prompt {
    color: #f1f5f9;
    font-size: 13px;
    line-height: 1.35;
    flex-shrink: 0;
    /* Keep the prompt compact so the card rail and drop zone always get space
       on a short viewport. Clamp to three lines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-deck__prompt strong { color: #fff; }

.gp-deck__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
}

/* The scrollable card rail. Cards never get clipped out of the hit-test
   region: the rail scrolls, the drop zone stays pinned below it. */
.gp-deck__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    /* The rail is the flex-growing scroll region between the (fixed) prompt and
       the (pinned) drop zone. min-height keeps at least one card row visible and
       hit-testable even when the panel is squeezed on a short viewport. */
    flex: 1 1 auto;
    min-height: 64px;
    align-content: flex-start;
}

/* A call card. A real <button> — focusable, click-activatable, drag-enabled. */
.gp-card {
    flex: 1 1 150px;
    min-width: 130px;
    text-align: left;
    background: #1f2733;
    border: 1px solid #36506a;
    border-left: 4px solid var(--card-accent, #38BDF8);
    border-radius: 8px;
    padding: 7px 11px;
    color: #f1f5f9;
    cursor: grab;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                border-color 0.15s ease, background 0.15s ease;
}

.gp-card__label {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gp-card__risk {
    font-size: 10px;
    color: #94a3b8;
}

/* Hover — communicates interactivity beyond the cursor. */
.gp-card:hover {
    background: #273241;
    border-color: var(--card-accent, #38BDF8);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Focus — keyboard ring, 3:1+ contrast against the dark surface. */
.gp-card:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

/* Active/pressed — immediate confirmation the press registered. */
.gp-card:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* While being dragged (DragDropManager adds .dragging). */
.gp-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* The drop target — the "headset" where Tony Khan makes the call. */
.gp-dropzone {
    flex-shrink: 0;
    border: 2px dashed #4a5a6a;
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    color: #94a3b8;
    background: #14181f;
    transition: border-color 0.2s ease, background 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
    user-select: none;
}

.gp-dropzone__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.gp-dropzone__hint {
    font-size: 10px;
    margin-top: 3px;
}

/* Armed: a valid card is hovering over the zone — functional signal that a
   drop here will commit. */
.gp-dropzone.drop-valid,
.gp-dropzone.drag-over {
    border-color: #FFD700;
    border-style: solid;
    background: rgba(255, 215, 0, 0.08);
    color: #FFD700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25), 0 0 18px rgba(255, 215, 0, 0.15);
}

.gp-dropzone.drop-invalid {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* Confirm pulse fired on a committed call (one of the 2-3 intentional motions). */
.gp-dropzone.gp-confirm {
    animation: gp-confirm-pulse 0.45s ease-out;
}

@keyframes gp-confirm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5); transform: scale(1); }
    40%  { box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.25); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); transform: scale(1); }
}

/* Invalid-drop shake (DragDropManager.showInvalidDropFeedback sets this). */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Reduced motion: kill MOTION only. Click + keyboard + SFX still work; the
   commit still happens, just without the lift/snap/pulse. */
@media (prefers-reduced-motion: reduce) {
    .gp-card,
    .gp-dropzone {
        transition: none;
    }
    .gp-card:hover,
    .gp-card:active {
        transform: none;
    }
    .gp-dropzone.gp-confirm {
        animation: none;
    }
}