/* --- Scene board layout --- */
.scene-view-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* The middle column stacks hand / challenge / obstacle cards. */
.table-column {
    display: flex;
    flex-direction: column;
}

/* Stretch the log column to the full row height so its sticky panel can travel. */
.log-column {
    align-self: stretch;
}

/* When the inline log is collapsed, reclaim its column (3-col layout only). */
@media (min-width: 1101px) {
    .scene-view-layout.log-collapsed {
        grid-template-columns: 180px minmax(0, 1fr);
    }
}

/* Corner button that toggles the inline Event Log without moving. */
.log-reopen-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--bg-deep) 95%, transparent);
    border: 1px solid var(--edge);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-deep);
    color: var(--text);
    font-weight: bold;
    font-family: var(--font-heading);
    cursor: pointer;
    backdrop-filter: blur(10px);
}
.log-reopen-btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep));
}

@media (max-width: 1100px) {
    .scene-view-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Crew bubble column --- */
.crew-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.crew-bubbles {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.crew-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--edge);
    border-left: 4px solid var(--pirat);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.crew-bubble:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
    transform: translateX(2px);
}

.crew-bubble.is-static {
    cursor: default;
}

.crew-bubble.is-static:hover {
    background: var(--surface-raised);
    transform: none;
}

.crew-bubble.is-deep {
    border-left-color: var(--deep);
    background: color-mix(in srgb, var(--deep) 12%, var(--surface-raised));
}

.crew-bubble.is-you {
    border-color: var(--accent);
    border-left-color: var(--accent);
}

.crew-bubble.is-ghost { opacity: 0.7; filter: grayscale(0.6); }
.crew-bubble.is-dead { opacity: 0.6; filter: grayscale(0.8); }

/* Challenge-progress badge the Deep sees floating just outside the bubble */
.challenge-check {
    position: absolute;
    left: -0.6rem;
    top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: var(--surface-raised);
    border: 1px solid var(--edge);
    color: var(--text-muted);
    box-shadow: var(--shadow-card);
    cursor: help;
}

.challenge-check.done {
    background: var(--success);
    border-color: var(--success);
    color: var(--surface);
}

.crew-bubble .bubble-icon {
    font-size: 1.1rem;
}

.crew-bubble .bubble-name {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.crew-bubble .bubble-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Crew Objectives toggle at the end of the roster */
.crew-objectives-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.crew-objectives-toggle:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.crew-objectives-toggle .co-count {
    font-weight: 700;
    color: var(--accent);
}

.crew-objectives-detail {
    padding: 0.6rem 0.7rem;
    background: var(--well);
    border: 1px solid var(--edge);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
}

/* Keep the crew roster vertical at every width, matching the other phases. */
@media (max-width: 1100px) {
    .crew-bubble {
        width: 100%;
    }
    .crew-objectives-toggle {
        width: 100%;
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--edge-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.card-header h3 {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.deck-counter {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 700;
}

/* --- Obstacles --- */
.obstacles-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.obstacle-item {
    border: 1px solid var(--edge);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background: var(--well);
    display: grid;
    grid-template-columns: 0.8fr 2fr 1fr 1fr;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.obstacle-item.in-challenge {
    box-shadow: 0 0 0 2px var(--deep);
}

@media (max-width: 768px) {
    .obstacle-item {
        grid-template-columns: 0.8fr 2fr 1.5fr;
    }
}

@media (max-width: 600px) {
    .obstacle-item {
        grid-template-columns: 1fr;
    }
}

/* Suit accent stripes */
.suit-c, .suit-s { border-left: 4px solid var(--suit-black); }
.suit-h, .suit-d { border-left: 4px solid var(--suit-red); }

/* Overlapping card column for an Obstacle. Cards stack with a heavy negative
   margin so each earlier card shows only its top strip (rank + suit); the most
   recent play sits fully visible at the bottom. Rings: accent = the original
   card, green/red = a play that did / didn't beat the difficulty. */
.obstacle-stack {
    --peek: 34px;          /* visible strip of each earlier card */
    --card-h: 112px;       /* medium card height (card.css) */
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px;          /* room for the rings, which overflow:hidden would clip */
}

.stack-card {
    position: relative;
    border-radius: var(--radius-sm);
    line-height: 0;
}

.stack-card + .stack-card {
    margin-top: calc(var(--peek) - var(--card-h));
}

.stack-card.is-original {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.stack-card.is-success {
    box-shadow: 0 0 0 2px var(--success);
}

.stack-card.is-failure {
    box-shadow: 0 0 0 2px var(--danger);
}

.suit-badge {
    font-weight: 900;
    font-size: 1.1rem;
}

.suit-c .suit-badge, .suit-s .suit-badge { color: var(--suit-black); }
.suit-h .suit-badge, .suit-d .suit-badge { color: var(--suit-red); }

.card-code {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-heading);
}

.obstacle-details h4 {
    color: var(--text);
    margin-bottom: 0.25rem;
    font-size: 1.15rem;
}

/* The title and its "K♦" card-code prefix take the Obstacle's fixed suit color
   (red border on the left already marks color, so the old tag is gone). */
.suit-h .obstacle-details h4, .suit-d .obstacle-details h4 { color: var(--suit-red); }
.suit-c .obstacle-details h4, .suit-s .obstacle-details h4 { color: var(--suit-black); }

.obs-card-code { opacity: 0.8; }

.obstacle-details .in-challenge-tag {
    color: var(--deep);
    font-size: 0.8rem;
}

.obstacle-details .desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.obstacle-value-display {
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border: 1px dashed var(--edge-accent);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

.obstacle-successes-display {
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: color-mix(in srgb, var(--success) 5%, transparent);
    border: 1px dashed color-mix(in srgb, var(--success) 30%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

.obstacle-successes-display .val-number {
    color: var(--success);
    font-size: 1.5rem;
}

.val-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.val-number {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--accent);
}

.clear-obstacle-row {
    grid-column: 1 / -1;
}

/* --- Challenges --- (framed in the Deep's teal so red/black always means suit color) */
/* The challenge-area card IS the box; the challenge content sits flush inside it. */
.challenge-area-card {
    border-color: color-mix(in srgb, var(--deep) 45%, transparent);
}

.challenge-item {
    margin-bottom: 1rem;
    text-align: left;
}

.challenge-item + .challenge-item {
    border-top: 1px solid var(--edge-soft);
    padding-top: 1rem;
}

.challenge-item h4 {
    color: var(--deep);
    font-size: 1.25rem;
    margin: 0;
}

.challenge-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.challenge-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.tax-callout {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.tax-callout p {
    margin: 0 0 0.5rem 0;
}

/* --- Challenge area (middle column) --- */
/* Obstacles applied to an active Challenge, pulled up into the Challenge panel */
.challenge-obstacles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* The Deep's call-a-challenge + end-scene controls live below any open Challenges */
.deep-challenge-controls {
    margin-top: 0.5rem;
}

/* When a Challenge is active the rest of the Obstacle list collapses out of the way */
.obstacle-collapse > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    padding: 0.35rem 0;
}

.obstacle-collapse[open] > summary {
    margin-bottom: 1rem;
}

.scene-upkeep-controls {
    margin-top: 1rem;
    border-top: 1px solid var(--edge-soft);
    padding-top: 1rem;
}

/* --- Hand --- */
.hand-label {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hand-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}