#start-screen { position: fixed; }
#start-screen .start-container { position: relative; z-index: 2; }
#start-screen canvas { position: absolute; inset: 0; z-index: 0; }

:root { --screen-top-offset: 220px; }

/* Title screen-only top whitespace overrides */
#start-screen { padding-top: var(--screen-top-offset); }
#start-screen.screen-scale-screen { padding-top: 0; }

/* Adjust max-heights: only title uses the offset */
#start-screen .start-container.screen-scale-target { width: 500px; max-width: none; }
#mulligan-screen .mulligan-container.screen-scale-target { width: 800px; max-width: none; }
#start-screen .start-container { max-height: calc(100vh - var(--screen-top-offset) - 60px); }
#start-screen .start-container.screen-scale-target { max-height: none; }

/* Mulligan layout adjustments */
.mulligan-container { max-width: 800px; }
.mulligan-hand { overflow: visible; }
.mulligan-hand .hand { flex-wrap: nowrap; justify-content: center; gap: 12px; overflow: visible; padding: 16px 10px 8px; }

/* Mulligan card sizing; CardView also uses the same display bounds. */
.mulligan-hand .card {
    width: 96px;
    height: 136px;
    position: relative;
    z-index: 1;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.mulligan-hand .card:hover {
    z-index: 40;
    transform: translateY(-8px) scale(1.03);
}

.mulligan-hand .card.place-selected,
.mulligan-hand .card.place-selected:hover {
    z-index: 60;
    transform: translateY(-14px) scale(1.06);
    filter: brightness(1.08);
}

/* Restore default paddings/margins for mulligan frame */
.mulligan-container { padding: 40px 30px; }
.mulligan-title { margin-bottom: 20px; }
.mulligan-description { margin-bottom: 30px; }
.mulligan-hand { margin: 30px 0; }
.mulligan-actions { margin: 30px 0; }

/* Re-assert selection outline after white-card overrides */
.theme-glass .hand .card.place-selected { border: 3px solid var(--accent-green) !important; box-shadow: 0 0 0 3px rgba(39,174,96,0.25), 0 10px 24px rgba(0,0,0,0.35) !important; }
.theme-glass .hand .card.place-selected.cost-satisfied { border: 3px solid var(--accent-yellow) !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.25), 0 10px 24px rgba(0,0,0,0.35) !important; }

/* Test play readability enhancements */
.test-play-header h3 { color: #111 !important; }
.test-play-state h4 { color: #111 !important; }
.state-section h5 { color: #111 !important; }

/* Make test cards text black and clearly bordered */
.test-hand .card:not(.cg-card),
.test-graveyard .card:not(.cg-card),
.test-place .card:not(.cg-card) {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #333 !important;
}

/* Hide test result log area */
.test-play-result,
#test-result-log { display: none !important; }

/* Slightly tighter but readable layout */
.state-grid { gap: 16px; }
.test-play-content { max-width: 1200px; }

/* Test play deck count visibility */
#test-deck-count { color: #111 !important; font-weight: 700; }

/* Add spacing between total cards info and action buttons */
.total-cards-info { margin-top: 10px; margin-bottom: 20px; }
.test-play-actions { margin-top: 16px; }