/* Bridge Bidding System - Styled to match BridgeTable */
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#playSouthHand, #playNorthHand {
    outline: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}
:root {
    /* Responsive header size shared by title and suit icons */
    --header-title-size: clamp(1.6rem, 2.0vw + 1.2rem, 2.2rem);
}

body {
    font-family: "Poppins", sans-serif;
    background: #ffffff;
    min-height: 100vh;
    color: #5A5872;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/* Headings to mirror BridgeTable */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #2B2A3D;
    margin: 0;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

.app-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.main-container {
    background: #ffffff;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Compact page banner always visible above tabs */
.page-banner {
    position: sticky;
    top: 6px; /* move down a wee bit */
    background: linear-gradient(135deg, #eaf4ff 0%, #d7ebff 100%);
    color: #1e6bb8;
    font-weight: 600;
    font-size: 1.05rem; /* slightly bigger */
    padding: 8px 14px;  /* slightly larger padding */
    border: 1px solid #b7d4fb;
    border-left: none;
    border-right: none;
    z-index: 100;
    text-align: center;
}
@media (max-width: 600px) {
    .page-banner { font-size: 1rem; padding: 7px 10px; top: 4px; }
}

/* Header Styles */
.app-header {
    background: #f8f9fa;
    color: #333;
    padding: 10px 12px; /* reduced vertical padding from earlier version */
    text-align: center;
    border-bottom: 2px solid #dee2e6;
}

.app-header .header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* exact spacing controlled via header-text margins */
}

.app-header .header-text { display: flex; flex-direction: column; align-items: center; margin: 0 4px; }

.app-title {
    font-size: var(--header-title-size);
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.app-subtitle {
    font-size: 1.05rem;
    opacity: 0.9;
    font-weight: 300;
    font-style: italic; /* subtitle in italics as requested */
}

.suit-icons { display: inline-flex; gap: 6px; }
.suit-icon { font-size: var(--header-title-size); line-height: 1; font-weight: 700; }
.suit-icon.spade { color: #000; }
.suit-icon.club { color: #000; }
.suit-icon.heart { color: #d63031; }
.suit-icon.diamond { color: #d63031; }

/* Loading indicator fade-out support */
#loadingIndicator { transition: opacity 250ms ease; }
#loadingIndicator.fade-out { opacity: 0; pointer-events: none; }
/* Keep the loading indicator out of normal flow so hiding it doesn't
   cause the page to shift. Position it near the header but fixed so
   removing it will not reflow the document. Responsive fallback
   returns it to normal flow on very small screens. */
#loadingIndicator {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    width: auto;
    max-width: 90%;
}
@media (max-width: 480px) {
    #loadingIndicator { position: static; transform: none; width: auto; }
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.content-section {
    background: white;
    border-radius: 0;
    padding: 16px 18px;
    border: 1px solid #dee2e6;
    margin: 16px auto;
    max-width: 1100px;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2B2A3D;
    margin-left: 10px;
}

.section-icon {
    font-size: 1.5rem;
    color: #E84E4E;
}

/* Card Suits */
.card-suit {
    font-size: 1.2em;
    font-weight: bold;
}

.suit-spades, .suit-clubs {
    color: #2c3e50;
}

.suit-hearts, .suit-diamonds {
    color: #e74c3c;
}

/* Bidding Interface */
.bid-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 20px 0;
}

.bid-button {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 15px 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.2px;
}

.bid-button:hover:not(:disabled) {
    background-color: #dff0ff; /* light blue */
    color: #144a7d;
    border-color: #1e6bb8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(30, 107, 184, 0.25);
}

/* Explicitly highlight legal bids with a light blue background */
.bid-button.legal-bid {
    background: #e6f2ff; /* soft light blue for legal actions */
}

.bid-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Disabled tab button styling */
.tab-button[disabled], .tab-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
}

.special-bid-button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-color: #28a745;
}

.special-bid-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838 0%, #1ea983 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

.auction-display {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    border: 2px solid #e9ecef;
}

/* Auction History */
.auction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0;
}
.below-auction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 8px 0 0 0; }
.right-pane .below-auction-grid { max-width: 90%; margin: 8px auto 0 auto; }
.bidpad-compact .bid-grid.compact { grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.bidpad-compact .bid-grid.compact .bid-button { padding: 9px 6px; font-size: 1rem; min-height: 40px; }
.bid-explanations-panel { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 12px; }
.bid-explanations-panel h4 { margin: 0 0 8px 0; font-size: 1.05rem; }
.bid-explanations-panel .explanation-item { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-bottom: 1px dashed #eceff3; }
.bid-explanations-panel .explanation-item:last-child { border-bottom: none; }
.bid-explanations-panel .explanation-item .bid-token { font-weight: 700; color: #2B2A3D; }
.bid-explanations-panel .explanation-item .bid-token.we { color: #E84E4E; }
.bid-explanations-panel .explanation-item .bid-token.partner { color: #1e6bb8; }
.bid-explanations-panel .explanation-item .bid-token.opponent { color: #495057; }
.bid-explanations-panel .explanation-item .who { white-space: nowrap; }
.bid-explanations-panel .explanation-item .explanation-text { font-size: 0.95em; }
.explanation-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; background: #eef2f7; color: #334155; }
.expl-neg-double { background: #fff3cd; color: #664d03; }
.expl-support-double, .expl-responsive-double { background: #e7f1ff; color: #0a3d91; }
.expl-takeout-double { background: #fde2e1; color: #842029; }
.expl-michaels { background: #e6f4ea; color: #1e4620; }
.expl-lebensohl { background: #efe6ff; color: #3b2f8a; }
.expl-cue-raise { background: #f6e7d5; color: #7a4b00; }
.expl-stayman-transfer { background: #e7f6ff; color: #0b4a6f; }
.expl-ace-asking { background: #f0eaff; color: #4a148c; }

@media (max-width: 1100px) {
    .below-auction-grid { grid-template-columns: 1fr; }
}

.auction-position {
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.bid-item {
    padding: 12px 16px;
    margin: 4px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    display: inline-block;
    min-width: 80px;
    text-align: center;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.2s ease;
        margin: 20px 0;

.bid-we {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border-color: #17a2b8;
    color: #0c5460;
}
        margin-bottom: 8px;
        padding: 10px;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-color: #dc3545;
    color: #721c24;
}

/* Hand Display */
.hands-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        margin-bottom: 6px;
        padding-bottom: 6px;
}

.hand-display {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #ecf0f1;
    padding: 16px;
        gap: 8px;
        margin-top: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    width: 32ch; /* fixed width to fit 13 ranks + spaces on one line tighter */
    max-width: 32ch;
    flex: 0 0 auto;
}

.hand-title { font-size: 1.1rem; padding: 6px 8px; margin-bottom: 8px; color: #3498db; text-align: center; padding-bottom: 6px; border-bottom: 2px solid #34495e; }

/* Highlight the hand title of the player on lead */
.hand-title.lead { color: #7d3cff !important; }

.hand-suit { display: flex; align-items: center; margin: 2px 0; font-size: 1.0em; gap: 6px; }

.suit-symbol { font-size: 1.15em; margin-right: 4px; padding: 2px; }

/* Hide corner rank/suit glyphs for dummy-exposed cards to avoid 'ghost' letters */
/* (removed previous dummy corner-hiding rule) */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stats-card {
    background: linear-gradient(135deg, #E84E4E 0%, #ff6b6b 100%);
    color: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(232, 78, 78, 0.25);
}
.stats-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.stats-label {
        margin: 4px 0 4px;
    opacity: 0.9;
}

/* Controls and Forms */
.control-group {
    margin: 20px 0;
}

.control-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    display: block;
}

.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.main-btn, .modern-button {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 0;
    padding: 0 40px;
    font-size: 16px;
    height: 55px;
    line-height: 55px;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    transition: all 0.4s ease-out 0s;
    background-color: #E84E4E;
    box-shadow: none;
}

.main-btn:hover, .modern-button:hover {
    background-color: #ff6b6b;
    color: #fff;
}

.main-btn.compact, .modern-button.compact {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

.main-btn.secondary, .modern-button.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

.main-btn.success, .modern-button.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* Convention Settings */
.convention-category {
    margin: 25px 0;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
}

.category-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.convention-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.convention-option {
    display: flex;
    align-items: center;
    padding: 10px;
    background: white;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.convention-option:hover {
    border-color: #E84E4E;
    background: #fff5f5;
}

.convention-option input[type="radio"],
.convention-option input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #E84E4E;
}

.convention-option label {
    cursor: pointer;
    font-weight: 500;
    color: #495057;
}

/* Convention Category Styles */
.convention-category {
    margin-bottom: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 0;
    border: 1px solid #e9ecef;
}

.convention-category-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
}

.convention-category-header::before { content: none; }

.convention-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.convention-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 0;
    padding: 10px 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center; /* align checkbox and label consistently */
    cursor: pointer;
    font-size: 1rem;
    min-width: 0;
}

.convention-item:hover {
    border-color: #E84E4E;
    background: #fff5f5;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(232, 78, 78, 0.15);
}

.convention-item input[type="checkbox"],
.convention-item input[type="radio"] {
    margin-right: 4px;
    accent-color: #E84E4E;
    transform: scale(1.15);
    flex-shrink: 0;
}

.convention-item label {
    cursor: pointer;
    font-weight: 600;
    color: #495057;
    flex: 1;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    white-space: normal;
}

/* Two-column layout for Active and Practice tabs without vertical scroll (where possible) */
#conventionCheckboxes, #practiceConventionCheckboxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

/* Tablet: use 2 columns for better readability */
@media (min-width: 769px) and (max-width: 1100px) {
    #conventionCheckboxes,
    #practiceConventionCheckboxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Category blocks auto-size to their content so shorter sections don't stretch */
#conventionCheckboxes .convention-category,
#practiceConventionCheckboxes .convention-category { height: auto; }

/* Responsive: collapse to one column on smaller viewports */
@media (max-width: 768px) {
    #conventionCheckboxes,
    #practiceConventionCheckboxes {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* General Settings card */
.general-settings { margin-bottom: 12px; }
.general-settings-card {
    border: 1px solid #e9ecef;
    padding: 12px;
    border-radius: 0;
    background: #f8f9fa;
}
.general-settings-header { font-weight: 700; color: #2B2A3D; margin-bottom: 16px; font-size: 1rem; }
.general-settings-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.general-settings-row .toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #495057; flex-wrap: wrap; }
.general-settings-row .toggle, .general-settings-row .toggle * { line-height: 1.45; }
.general-settings-row input[type="checkbox"] { transform: scale(1.2); accent-color: #E84E4E; }
.general-help { font-size: 0.85rem; color: #6c757d; }
.general-help-inline { font-size: 0.85rem; color: #6c757d; font-weight: 400; }
.general-settings-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 36px 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 0.95rem;
    color: #495057;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.general-settings-row select:focus {
    border-color: #E84E4E;
    box-shadow: 0 0 0 3px rgba(232,78,78,0.15);
    outline: none;
}
.general-settings-row select:hover {
    border-color: #ced4da;
    background-color: #fcfcfc;
}

/* Conventions intro styling */
.conventions-intro {
    font-weight: 700;
    color: #E84E4E;
    margin: 8px 0 12px;
}
.flash-updated { outline: 2px solid #E84E4E; outline-offset: 2px; transition: outline 0.6s ease; }

/* Subtle flash highlight for live-updated items (e.g., RKCB label change) */
.rkcb-flash {
    animation: rkcbFlash 900ms ease-out;
}
@keyframes rkcbFlash {
    0% { background-color: #fff5f5; box-shadow: 0 0 0 0 rgba(232,78,78,0.35); border-color: #E84E4E; }
    60% { background-color: #fff; box-shadow: 0 0 0 6px rgba(232,78,78,0.00); border-color: #f1a4a4; }
    100% { background-color: transparent; box-shadow: none; border-color: #e9ecef; }
}
@media (prefers-reduced-motion: reduce) {
    .rkcb-flash { animation: none; }
}

/* Alerts and Indicators */
.alert {
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 0;
    border: none;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}


@media (max-width: 768px) {
    .app-title {
        font-size: 1.8rem;
    }
    
    .content-grid {
        padding: 15px;
        gap: 15px;
    }
    
    .convention-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .convention-category {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .convention-item {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
    
    .convention-item label {
        font-size: 0.85rem;
    }
    
    .bid-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hands-container {
        grid-template-columns: 1fr;
    }
    
    .content-section {
        padding: 12px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .app-container {
        padding: 10px;
    }
    
    .main-container {
        border-radius: 15px;
    }
    
    .app-header {
        padding: 20px;
        border-radius: 15px 15px 0 0;
    }
    
    .bid-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .bid-button {
        padding: 12px 6px;
        font-size: 1rem;
    }
}

/* =============================
     App Tabs and Two-Column Layout
     ============================= */
.tab-container { padding: 20px; height: 100%; }
/* Chevron-style tab nav to imply flow */
.tab-nav { display: flex; gap: 0; margin-bottom: 4px; border-bottom: none; align-items: stretch; overflow-x: auto; overflow-y: hidden; position: relative; counter-reset: tabstep; padding-bottom: 0; }
.tab-button {
    position: relative;
    padding: 8px 24px 8px 32px; /* reduce vertical padding to lower tab height */
    border: none;
    background: linear-gradient(135deg, #eaf4ff 0%, #d7ebff 100%);
    color: #1e6bb8;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
    /* Chevron shape via clip-path */
    -webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    margin-right: 8px;
    z-index: 1;
     /* Make tab buttons share available width so chevrons span the viewport
         Use flexible items so they grow/shrink equally. Keep negative overlap
         so chevrons interlock visually. */
     width: auto;
     flex: 1 1 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Step number circle */
.tab-button::before {
    counter-increment: tabstep;
    content: counter(tabstep);
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: #ffffff;
    color: #1e6bb8;
    border: 2px solid #cfe1f9;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tab-button.active::before {
    background: #fff;
    color: #E84E4E;
    border-color: #ffb3b3;
}
.tab-button + .tab-button {
    /* Slight overlap so arrows interlock and indicate direction */
    margin-left: -12px;
}
.tab-button:hover:not(.active) {
    background: #dff0ff;
    color: #144a7d;
}
.tab-button:focus-visible {
    outline: 3px solid rgba(232,78,78,0.35);
    outline-offset: 2px;
}
.tab-button.active {
    background: #E84E4E;
    color: #fff;
    z-index: 2; /* sit above neighbors so the arrow tip is prominent */
    box-shadow: 0 2px 10px rgba(232,78,78,0.25);
}
/* Provide a subtle separator between chevrons */
.tab-button:not(.active) {
    box-shadow: inset -1px 0 0 #cfe1f9;
}
/* Compact on small screens to keep shape readable */
@media (max-width: 600px) {
    .tab-button { padding: 6px 20px 6px 12px; font-weight: 600; }
}
.tab-content { height: calc(100vh - 120px); overflow-y: auto; border: 1px solid #e9ecef; border-top: none; border-radius: 0; }
.tab-content.play-active { border: none !important; padding: 0 !important; }

/* Progress track and fill under tabs */
.tab-nav::before { content: none; }
.tab-nav::after { content: none; }
.tab-panel { display: none; height: auto; }
.tab-panel.active { display: block; }

/* Setup tab grid */
.setup-layout { display: grid; grid-template-columns: 40% 60%; gap: 16px; height: 100%; }
.conventions-column, .practice-column { overflow-y: auto; max-height: calc(100vh - 160px); }

/* Practice Bids: Two-column layout */
.practice-two-column { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; height: 100%; padding: 12px 16px; }
.left-column, .right-column { overflow-y: auto; max-height: calc(100vh - 140px); min-width: 0; position: relative; }

.generation-controls { margin-bottom: 16px; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.generation-controls h3 { margin: 0 0 10px; color: #2c3e50; font-size: 1.1rem; }
.generation-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.generation-toolbar .toolbar-actions { display: flex; gap: 8px; align-items: center; }
.radio-group { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.radio-option { display: inline-flex; align-items: center; gap: 6px; }
.mode-centered { max-width: 1000px; margin: 0 auto; }
.constraints-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    grid-template-areas:
        'north south'
        'east west';
    gap: 16px;
}
.constraint-section.north { grid-area: north; }
.constraint-section.south { grid-area: south; }
.constraint-section.east  { grid-area: east; }
.constraint-section.west  { grid-area: west; }
.constraint-section { background: #ffffff; border: 1px solid #e9ecef; padding: 12px; border-radius: 8px; }
.constraint-section h5 { margin: 0 0 8px; color: #2c3e50; font-weight: 700; }
.constraint-row { display: grid; grid-template-columns: 130px 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.constraint-row label { font-weight: 600; color: #495057; }
.constraint-row span { color: #6c757d; }
.constraint-input { width: 100%; padding: 10px 12px; border: 2px solid #dee2e6; border-radius: 6px; font-size: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.constraint-input:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15); }

/* Ensure any selects inside constraints get pill style like elsewhere */
.constraints-grid select { 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 36px 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 9999px; /* pill shape */
    background: #ffffff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 0.95rem;
    color: #495057;
}
.center-action { display: block; margin: 12px auto 0; }
.card-count { text-align: center; color: #3498db; font-weight: 600; }

.auction-section { background: #fff; border-radius: 0; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e9ecef; }
.right-pane .auction-section { max-width: 90%; margin-left: auto; margin-right: auto; }

.current-hands-display { background: #fff; border-radius: 0; padding: 12px; border: 1px solid #e9ecef; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.hands-header { display: none; }
.hands-controls { display: none; }

/* Bridge table layout */
/* New Auction topbar and two-column layout */
.auction-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; background: #f8f9fa; border: 1px solid #e9ecef; }
.auction-topbar .topbar-left { width: 45%; display: flex; align-items: center; gap: 10px; }
.auction-topbar .topbar-group { display: inline-flex; align-items: center; gap: 8px; }
.auction-topbar label { font-weight: 600; color: #495057; }
.auction-topbar .topbar-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 6px 36px 6px 12px; border: 1px solid #dee2e6; border-radius: 9999px !important; background: #ffffff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 0.9rem; color: #495057; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
.auction-topbar .topbar-group select:focus { border-color: #E84E4E; box-shadow: 0 0 0 3px rgba(232,78,78,0.15); outline: none; }
.auction-topbar .topbar-group select:hover { border-color: #ced4da; background-color: #fcfcfc; }
.auction-topbar .topbar-group select:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f1f3f5; color: #868e96; }
.auction-topbar .topbar-actions { display: inline-flex; gap: 6px; margin-left: auto; }

.auction-two-column { display: grid; grid-template-columns: 50% 50%; gap: 16px; align-items: start; }
.left-pane, .right-pane { min-width: 0; }
.hands-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ". north ."
        "west center east"
        ". south .";
    justify-content: center;
    align-items: start;
    gap: 6px; /* bring boxes closer together */
}
#northHand { grid-area: north; }
#southHand { grid-area: south; }
#eastHand  { grid-area: east; }
#westHand  { grid-area: west; }
#tableOverlay { grid-area: center; align-self: center; justify-self: center; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; font-weight: 700; font-size: 0.85rem; box-shadow: 0 6px 16px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.06); }
.badge-dealer { background: linear-gradient(135deg, #eaf4ff 0%, #d7ebff 100%); color: #1e6bb8; border-color: #b7d4fb; }
.badge-vul { background: #f8f9fa; color: #495057; }
.badge-vul.vul-none { background: linear-gradient(135deg, #f1f3f5 0%, #e9ecef 100%); color: #495057; border-color: #dfe3e6; }
.badge-vul.vul-ns, .badge-vul.vul-ew, .badge-vul.vul-both { background: linear-gradient(135deg, #ffe3e3 0%, #ffc9c9 100%); color: #c92a2a; border-color: #ffb3b3; }

/* Overlap adjustments to reduce center whitespace and create slight edge overlaps */
#westHand { margin-top: -10px; }
#eastHand { margin-top: -10px; }
#southHand { margin-top: -10px; }

/* When only South is shown, avoid overlap by resetting margins and nudging overlay */
.hands-grid.solo-south {
    gap: 10px;
}
.hands-grid.solo-south #southHand {
    margin-top: 0; /* don't encroach into the center cell */
}
.hands-grid.solo-south #tableOverlay {
    align-self: start; /* keep overlay at top of the center cell */
}

/* Tablet/mobile: stack columns */
@media (max-width: 1100px) {
    .auction-two-column { grid-template-columns: 1fr; }
    .right-pane { order: 2; }
    .left-pane { order: 1; }
}

/* Narrow screens: fall back to 2x2 grid */
@media (max-width: 700px) {
    .hands-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "north north"
            "west  east"
            "south south";
        justify-content: center;
    }
    #tableOverlay { display: none; }
}

/* Ensure card text wraps nicely */
.hand-suit .suit-cards { white-space: nowrap; }

/* =====================================
   Compact layout overrides (less scroll)
   ===================================== */
.app-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 36px 6px 12px;
    border: 1px solid #dee2e6;
    border-radius: 9999px; /* pill shape */
    background: #ffffff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 0.9rem;
    color: #495057;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.app-container select:focus {
    border-color: #E84E4E;
    box-shadow: 0 0 0 3px rgba(232,78,78,0.15);
    outline: none;
}
.app-container select:hover {
    border-color: #ced4da;
    background-color: #fcfcfc;
}
.general-settings { margin-bottom: 8px !important; }
.general-settings-card { padding: 10px !important; }
.general-settings-header { margin-bottom: 6px !important; }
.general-settings-row { gap: 4px !important; }
.general-settings-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 36px 6px 12px !important;
    border: 1px solid #dee2e6;
    border-radius: 9999px !important; /* pill shape */
    background: #ffffff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 0.9rem !important;
    color: #495057;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.conventions-intro { margin: 4px 0 4px !important; }
#conventionCheckboxes, #practiceConventionCheckboxes { gap: 10px !important; }
.convention-category { margin-bottom: 8px !important; padding: 10px !important; }
.convention-category-header { margin-bottom: 6px !important; padding-bottom: 6px !important; }
.convention-row { gap: 8px !important; margin-top: 4px !important; }
.convention-item { padding: 8px 10px !important; }
.dealer-selection select, .vulnerability-selection select { padding: 8px; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; cursor: pointer; }

/* Auction styles */
.auction-display { background: #fff; border-radius: 0; padding: 12px; margin: 10px 0; border: 1px solid #e9ecef; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.auction-round { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; padding: 8px; background: #ffffff; border-radius: 6px; border: 1px solid #dee2e6; }
.auction-bid { text-align: center; padding: 8px; border-radius: 4px; font-size: 14px; background: #f8f9fa; color: #495057; }
/* removed: .auction-bid.player-bid no longer used */
.hint-text { margin-left: 8px; font-weight: 600; color: #495057; }

/* Status line layout: text on left, action button on right */
.auction-status-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.auction-status-flex .status-text {
    font-weight: 600;
}
.auction-status-flex #hintBtn {
    margin-left: 10px;
    padding-left: 12px; /* make room for divider */
    border-left: 1px solid #e3e6ea; /* subtle separator */
}

/* Inline hint chip shown in the status bar when legacy panel is absent */
.hint-inline {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #e7f6ff;
    border: 1px solid #cfe7fb;
    color: #0b4a6f;
    font-weight: 600;
    font-size: 0.9em;
}
.hint-inline .hint-bid { font-weight: 700; margin-right: 6px; }
.hint-inline .hint-expl { font-weight: 500; opacity: 0.95; }

/* Links aligned with theme */
a { color: #E84E4E; text-decoration: none; }
a:hover { color: #ff6b6b; text-decoration: underline; }

/* Suit/hand micro styles used by JS */
.hand-suit .suit-cards { letter-spacing: 1px; }

/* Responsive adjustments for practice two-column */
@media (max-width: 1024px) {
    .practice-two-column { grid-template-columns: 1fr; }
}

/* =============================
   Hand Generation: Manual Entry (revert to richer spacing + indicators)
   ============================= */
.suit-inputs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
    margin: 12px 0 10px;
}

.suit-input-section {
    background: #ffffff;
    border: 1px solid #e9ecef;
    padding: 12px;
    border-radius: 8px;
}

.suit-label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

.suit-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.suit-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15);
}

.suit-input.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.15rem rgba(40, 167, 69, 0.25);
}

.suit-input.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
}

.hand-error {
    color: #dc3545;
    font-weight: 600;
    margin-top: 8px;
}

.card-count {
    margin-top: 4px;
    font-weight: 600;
    color: #6c757d;
}
.card-svg { width: 120px; height: 170px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.10); background: #fff; }

.manual-help { margin-top: 8px; }
.input-help { color: #6c757d; }

@media (max-width: 600px) {
.card-button .card-svg { width: 120px; height: 170px; pointer-events: none; }
    .suit-inputs-grid { grid-template-columns: 1fr; }
}

/* Constraints grid: stack on narrow screens to preserve readability */
@media (max-width: 700px) {
    .constraints-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'north'
            'south'
            'east'
            'west';
    }
}

/* Tiny hint tag for special bid meanings (e.g., 2NT Natural vs Unusual) */
.bid-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 0px 4px;
    font-size: 0.65em;
    line-height: 1.4;
    border-radius: 4px;
    background: #eef2f7;
    color: #44536a;
    vertical-align: super;
    border: 1px solid rgba(0,0,0,0.06);
}
.bid-tag.unusual { background: #fdecea; color: #b23b32; border-color: #f3b1ab; }
.bid-tag.natural { background: #eaf7ee; color: #267a42; border-color: #bde5c7; }

/* =============================
   Play Tab Layout and Cards
   ============================= */
.play-tab { display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 8px 0 20px; }
.play-topbar { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.play-contract { font-weight: 700; color: #2c3e50; font-size: 1.1rem; }
.play-status { max-width: 680px; width: 100%; }
.play-main { display: flex; flex-direction: column; gap: 18px; align-items: center; position: relative; }
.play-board { display: grid; /* stable 3-column layout: side | center | side */
    grid-template-columns: 1fr minmax(320px, 520px) 1fr;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    grid-template-areas: "north north north" "west center east" "south south south";
    justify-items: center; align-items: center; gap: 8px; width: min(92vw, 1200px); max-width: 1200px; margin: 0 auto; position: relative;
}
.play-seat { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.play-seat-north { grid-column: 1 / 4; justify-self: center; align-self: start; }
.play-seat-south { grid-column: 1 / 4; justify-self: center; align-self: end; }
.play-seat-west { grid-column: 1 / 2; justify-self: end; align-self: center; margin-right: 8px; position: relative; }
.play-seat-east { grid-column: 3 / 4; justify-self: start; align-self: center; margin-left: 8px; position: relative; }
.play-center { grid-column: 2 / 3; display: flex; justify-content: center; align-items: center; }
.play-seat-north { z-index: 1400; }
/* Limit how wide an individual hand row can grow so cards stay close to the table */
.play-seat .card-button-row { max-width: calc(var(--play-card-width, 120px) * 14); display: flex; justify-content: center; align-items: center; }
.play-seat .hand-title { font-weight: 700; color: #2c3e50; text-align: center; border-bottom: none; padding-bottom: 0; margin-bottom: 6px; }
.card-button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Remove diagnostic outlines so play hands align naturally */
#playSouthHand, #playNorthHand {
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
/* Temporary safety net: force visible sizes for Play tab and card buttons while debugging */
.tab-content { min-height: 320px !important; }
.tab-panel.active .play-tab { min-height: 240px !important; }
.play-board, .play-seat, .card-button-row { min-height: 32px !important; }
.card-button { display: inline-flex !important; min-width: 44px !important; min-height: 28px !important; align-items: center !important; justify-content: center !important; }

/* Scoped overrides removed: restore normal tab show/hide behavior so Play panel
   is visible only when its tab is active. The card buttons themselves keep a
   small inline defensive size to avoid collapsing in some environments. */
.card-button { background: #fff; border: 1px solid #d1d5db; border-radius: 10px; padding: 6px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.card-button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.card-button:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(0,0,0,0.12); border-color: #2563eb; }
.card-button[disabled] { cursor: default; opacity: 0.6; transform: none; box-shadow: none; border-color: #d1d5db; }
.card-svg { width: 180px; height: 270px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.10); background: #fff; }

/* Hide the large center rank on dummy-exposed cards (removes 'ghost' letters)
   but keep corner rank and suit glyphs visible. */
.card-svg[data-dummy-card="true"] .center-rank {
    visibility: hidden;
}

/* Ensure Play panel has a real layout box when active. This is scoped to
   the active Play tab only so it doesn't affect other panels. Kept small
   and non-!important to avoid interfering with normal tab semantics. */
.tab-panel.active#playPanel {
    /* Let the Play panel size to its content (avoid percentage height collapse)
       while keeping a modest minimum to prevent overly small layout. */
    height: auto;
    min-height: 260px;
}
.tab-panel.active#playPanel .play-board {
    min-height: 160px;
}
/* Ensure the inner play-tab uses natural height when play panel is active. */
.tab-panel.active#playPanel .play-tab {
    height: auto;
}
.card-button .card-svg { width: 180px; height: 270px; pointer-events: none; }
.play-center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: transparent; width: auto; }
.trick-area { width: min(520px, 48vw); max-width: 80%; border: 3px solid #86e59f !important; border-radius: 14px; display: block; padding: 10px; background: #e6ffed !important; color: #225a32 !important; position: relative; overflow: visible; aspect-ratio: 1 / 1; margin: 0 auto; z-index: 1100; box-shadow: 0 8px 30px rgba(34,90,50,0.06); }
.trick-area .trick-hint { position: absolute; top: 10px; left: 14px; font-size: 0.85rem; color: #94a3b8; }

/* Make the central trick area square and provide 4 slots around the center */
.trick-area { aspect-ratio: 1 / 1; display: block; /* keep square but cap vertical size to 60% to free vertical room */
    max-height: calc(min(520px, 48vw) * 0.6);
}
.trick-area {
    /* Place trick slots near the inner edges of the table. Keep small inset
       so cards remain fully inside the green area. */
    --trick-inset: 6px; /* distance from inner edge */
    --trick-south-bottom: 18px; /* nudge center/south card up to avoid overlapping hint */
}

/* Size each trick-slot to the trick-card so aligning edges is straightforward */
.trick-slot { position: absolute; pointer-events: none; width: var(--trick-card-width); height: var(--trick-card-height); display: flex; align-items: center; justify-content: center; z-index: 1001; }
.trick-slot-north { top: calc(var(--trick-inset) + (var(--trick-card-height) / 2)); left: 50%; transform: translate(-50%,-50%); display: flex; gap: 6px; pointer-events: none; }
.trick-slot-south { top: calc(100% - var(--trick-inset) - (var(--trick-card-height) / 2)); left: 50%; transform: translate(-50%,-50%); display: flex; gap: 6px; pointer-events: none; }
.trick-slot-east { top: 50%; left: calc(100% - var(--trick-inset) - (var(--trick-card-width) / 2)); transform: translate(-50%,-50%); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.trick-slot-west { top: 50%; left: calc(var(--trick-inset) + (var(--trick-card-width) / 2)); transform: translate(-50%,-50%); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.trick-slot .trick-card { pointer-events: auto; position: relative; }
.trick-card { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease; }

/* Trick card sizing and constrained overlap: smaller cards so multiple
    played cards remain visible. Use CSS variables so adjustments are easy. */
.trick-area { --trick-card-width: 60px; --trick-card-height: 85px; }
.trick-slot .trick-card .card-svg { width: var(--trick-card-width) !important; height: var(--trick-card-height) !important; border-radius: 6px; }
/* When multiple cards are present in the same slot, limit overlap to 25% */
.trick-slot .trick-card + .trick-card { margin-left: calc(var(--trick-card-width) * -0.25); }

/* Slight offsets so the four played cards overlap nicely toward the center */
.trick-slot-north .trick-card { transform: translateY(12%); }
.trick-slot-south .trick-card { transform: translateY(-12%); }
.trick-slot-east .trick-card { transform: translateX(-12%); }
.trick-slot-west .trick-card { transform: translateX(12%); }
.trick-area .trick-hint { position: absolute; top: 10px; left: 14px; font-size: 0.85rem; color: #94a3b8; }
.trick-card { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.trick-seat { font-size: 0.8rem; color: #475569; font-weight: 600; }
.play-metrics { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.trick-counts { display: flex; gap: 16px; font-weight: 600; color: #334155; justify-content: center; flex-wrap: wrap; }
.play-result { font-weight: 700; color: #1f2937; text-align: center; }
.play-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Reposition the Play action buttons to the top-right of the Play panel
   so they appear in the header area (as requested). Use absolute
   positioning anchored to .play-main; fall back to normal flow on
   narrow screens. */
.play-main .play-controls {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 4000;
    justify-content: flex-end;
}

/* When `.play-controls` is used inside `.play-main`, present items in a
   vertical stack: button row, contract line, then trick counts. This
   keeps the contract left-aligned directly under the buttons and avoids
   overlap with the rest of the Play panel. */
.play-main .play-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.play-main .play-controls .play-controls-row {
    display: flex;
    gap: 6px;
}
.play-main .play-controls .play-controls-meta {
    margin-left: 0;
}
/* Position contract info and play metrics (result/score) into the top-right column
   near the action buttons so the result summary appears in the boxed area shown
   in the screenshot. Fall back to centered layout on small screens. */
.play-main .play-controls #playContractInfo {
    /* Keep the contract line left-aligned under the controls when placed inside .play-controls */
    position: static;
    top: auto;
    right: auto;
    z-index: 4000;
    text-align: left;
    background: transparent;
    width: auto;
    max-width: none;
}
.play-main .play-metrics {
    /* Default centered metrics in the play center area; when metric elements are placed
       inside .play-controls they will follow the controls' layout and not rely on
       absolute positioning which caused overlap. */
    position: static;
    top: auto;
    right: auto;
    align-items: center;
    text-align: center;
    width: auto;
    max-width: none;
}
@media (max-width: 800px) {
    .play-main #playContractInfo { position: static; right: auto; text-align: center; }
    .play-main .play-metrics { position: static; width: auto; text-align: center; align-items: center; }
}
@media (max-width: 800px) {
    .play-main .play-controls { position: static; margin-top: 8px; justify-content: center; }
}

@media (max-width: 800px) {
    .card-button .card-svg { width: 64px; height: 96px; }
    .play-center { width: 100%; }
    .play-board { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "north" "west" "center" "east" "south"; }
    .play-seat-west, .play-seat-east { align-items: center; }
    .trick-area { aspect-ratio: auto; min-height: 200px; }
}

/* Play tab status message variants */
#playStatus.alert-light { border: 1px solid #e9ecef; color: #495057; }
#playStatus.alert-danger { border: 1px solid #f5c2c7; background: #f8d7da; color: #842029; }
#playStatus.alert-success { border: 1px solid #badbcc; background: #d1e7dd; color: #0f5132; }

/* Score breakdown list */
.score-breakdown { list-style: disc; margin: 6px auto 0; padding-left: 22px; max-width: 640px; color: #495057; }

/* Card back visuals for hidden hands on Play tab (20% larger stacked backs) */
.card-backs { display: inline-block; position: relative; width: 101px; height: 139px; }
.card-back { position: absolute; width: 101px; height: 139px; border-radius: 8px; background-color: #1e3a8a; box-shadow: 0 6px 14px rgba(16,24,40,0.35); transform-origin: center; background-image: url('../cards/card_back.png'); background-size: cover; background-position: center; }

/* Non-interactive card appearance used when hands are revealed after play completes */
.card-button.non-clickable {
    opacity: 0.65;
    pointer-events: none;
    cursor: default;
    filter: grayscale(30%) saturate(90%);
}
.card-button.non-clickable .card-svg { pointer-events: none; }
.card-back::after { content: '' ; position: absolute; inset: 10px; border-radius: 6px; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 6px, rgba(255,255,255,0.0) 6px 12px); mix-blend-mode: overlay; }
.card-back-stack { width: 144px; height: 168px; display: inline-block; position: relative; }
.card-back-stack .card-back { left: 0; top: 0; }
.card-back-stack .card-back:nth-child(2) { left: 8px; top: 8px; transform: scale(0.98); }
.card-back-stack .card-back:nth-child(3) { left: 16px; top: 16px; transform: scale(0.96); }
.card-backs .count-badge { display: none; position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,0.6); color: #fff; padding: 5px 7px; border-radius: 12px; font-size: 0.9rem; font-weight: 700; }

/* Small responsive adjustments for card backs in narrow viewports */
@media (max-width: 600px) {
    .card-backs { width: 68px; height: 96px; }
    .card-back { width: 68px; height: 96px; }
}
/* Play hand card sizing and overlap: visible hand cards should overlap so
   only 25% of each preceding card is visible. The card height is reduced by
   20% (and the width scaled proportionally). These rules are scoped to the
   Play tab hand rows so they don't affect other card displays. */
.play-board { --play-card-width: calc(180px * 0.8); --play-card-height: calc(270px * 0.8); }
#playSouthHand.card-button-row .card-button,
#playNorthHand.card-button-row .card-button,
#playEastHand.card-button-row .card-button,
#playWestHand.card-button-row .card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-left: calc(var(--play-card-width) * -0.75); /* overlap so 25% visible */
    position: relative;
}
#playSouthHand.card-button-row .card-button:first-child,
#playNorthHand.card-button-row .card-button:first-child,
#playEastHand.card-button-row .card-button:first-child,
#playWestHand.card-button-row .card-button:first-child {
    margin-left: 0;
}
#playSouthHand.card-button-row .card-button .card-svg,
#playNorthHand.card-button-row .card-button .card-svg,
#playEastHand.card-button-row .card-button .card-svg,
#playWestHand.card-button-row .card-button .card-svg {
    width: var(--play-card-width) !important;
    height: var(--play-card-height) !important;
    border-radius: 6px;
}

/* Ensure later cards visually stack on top of earlier ones */
#playSouthHand.card-button-row .card-button,
#playNorthHand.card-button-row .card-button,
#playEastHand.card-button-row .card-button,
#playWestHand.card-button-row .card-button { z-index: 1; }
#playSouthHand.card-button-row .card-button:nth-child(n) { z-index: auto; }
.score-breakdown li { margin: 2px 0; }

/* Strong overrides for Play tab visuals to ensure browser caching or
   other rules don't prevent the intended layout. These force the trick
   area to a pale green and make the ns-cards-row a non-wrapping flex
   container whose cards overlap (25% visible) and are 20% shorter. */
.play-board { --play-card-width: calc(120px * 0.8); --play-card-height: calc(170px * 0.8); }
#playTableArea .trick-area, .trick-area {
    background: #e6ffed !important;
    border-color: #86e59f !important;
    color: #225a32 !important;
}
.ns-cards-row {
    display: flex !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}
.ns-cards-row .card-button {
    /* overlap so only 25% of previous card is visible */
    margin-left: calc(var(--play-card-width) * -0.75) !important;
    position: relative !important;
}
.ns-cards-row .card-button:first-child { margin-left: 0 !important; }
.ns-cards-row .card-button .card-svg {
    width: var(--play-card-width) !important;
    height: var(--play-card-height) !important;
}
.ns-cards-row .card-button { z-index: 1 !important; }
.ns-cards-row .card-button:nth-child(n) { z-index: auto !important; }


/* Remove gap/wrapping for play hand rows so overlapping via negative
   margins works reliably; keep the overlapping cards centered. */
#playSouthHand.card-button-row,
#playNorthHand.card-button-row,
#playEastHand.card-button-row,
#playWestHand.card-button-row {
    gap: 0; /* override default gap */
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* per-index nth-child overlap rules removed — overlap is applied inline via JS */

/* End of Play tab overrides */