/* Pod Pass — member-facing Pod workspace and all MVP subtabs. */

.pod-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Locked-state preview (PodUpsell), mirrors .collection-preview-* --- */
.pod-upsell-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(560px, 100%);
    margin: 0 auto;
}

.pod-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pod-preview-name,
.pod-preview-seats {
    display: block;
    border-radius: 7px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.pod-preview-name {
    width: 40%;
    height: 16px;
}

.pod-preview-seats {
    width: 72px;
    height: 14px;
}

.pod-preview-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pod-preview-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--widget-bg) 82%, transparent);
}

.pod-preview-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.pod-preview-member-name {
    flex: 1 1 auto;
    height: 12px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.pod-preview-pill {
    flex: 0 0 auto;
    width: 44px;
    height: 18px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.pod-preview-pill.muted {
    opacity: 0.42;
}

.pod-workspace {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Pin the subtabs to the top of the scrolling panel, matching Collection and
   every other primary tab. `.pod-panel` is the scroll container, and its
   background art already resolves to a solid `--bg-color` across the top strip,
   so the opaque background here hides scrolled content cleanly. */
.pod-subtab-wrapper {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: 0 0 auto;
    padding: 10px 12px 0;
    background: var(--bg-color);
}

.pod-subtab-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 12px 0;
}

.pod-hub {
    width: 100%;
}

.pod-feature {
    width: 100%;
}

.pod-feature-header h2,
.pod-result-panel h3,
.pod-game-history h3 {
    margin: 0 0 4px;
    color: var(--text-primary);
}

.pod-feature-header p,
.pod-empty,
.pod-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.pod-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.pod-card-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}

.pod-card-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--widget-bg);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.pod-card-result:hover {
    border-color: var(--accent-color);
}

.pod-card-result span {
    color: var(--text-muted);
    font-size: 11px;
}

.pod-result-panel,
.pod-game-form {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 94%, transparent);
}

.pod-data-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pod-data-row,
.pod-wishlist-row,
.pod-game-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
}

.pod-data-row:last-child,
.pod-wishlist-row:last-child,
.pod-game-row:last-child {
    border-bottom: 0;
}

.pod-data-row strong,
.pod-wishlist-row > div,
.pod-game-row > div {
    flex: 1 1 auto;
    color: var(--text-primary);
}

.pod-wishlist-row > div,
.pod-game-row > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pod-tradable {
    color: var(--success-color, #58a66a);
}

/* --- Combined wishlist / collection Trade --- */
.pod-trade-summary-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pod-trade-summary-card {
    margin-bottom: 0;
}

.pod-trade-person-row,
.pod-trade-match-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
}

.pod-trade-person-row:last-child,
.pod-trade-match-row:last-child {
    border-bottom: 0;
}

.pod-trade-person-row .pod-profile-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.pod-trade-person-row > div,
.pod-trade-match-row > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}

.pod-trade-person-row > div {
    display: grid;
    gap: 2px;
}

.pod-trade-person-row strong,
.pod-trade-match-row strong,
.pod-wishlist-chip strong,
.pod-collection-card strong {
    color: var(--text-primary);
}

.pod-trade-person-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-fair-trades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

.pod-fair-trade-card {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 11px;
}

.pod-fair-trade-card.approximately-fair {
    border-color: color-mix(in srgb, var(--success-color, #58a66a) 55%, var(--border-color));
    background: color-mix(in srgb, var(--success-color, #58a66a) 8%, transparent);
}

.pod-fair-trade-card strong {
    color: var(--text-primary);
    font-size: 13px;
}

.pod-trade-person-cards {
    align-items: flex-start;
}

.pod-trade-thumbnail-row,
.pod-ready-match-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pod-trade-thumbnail {
    display: block;
    width: 52px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4.75% / 3.5%;
    background: color-mix(in srgb, var(--widget-bg) 90%, transparent);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.pod-trade-thumbnail:hover,
.pod-trade-thumbnail:focus-visible {
    z-index: 1;
    border-color: var(--accent-color);
    outline: none;
    transform: translateY(-2px) scale(1.04);
}

.pod-trade-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 488 / 680;
    object-fit: cover;
}

.pod-ready-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.pod-ready-match-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.pod-ready-match-card > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 10px;
}

.pod-ready-match-card strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-ready-match-card small {
    color: var(--accent-color);
}

.pod-card-browser-section {
    overflow: hidden;
}

/* The browser sections are heavy enough to be worth collapsing; the heading
   itself is the disclosure control. */
.pod-browser-disclosure-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.pod-browser-disclosure-summary::-webkit-details-marker {
    display: none;
}

.pod-browser-disclosure-summary > .pod-section-heading {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.pod-browser-disclosure-summary > svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--text-muted);
    transition: transform 0.18s ease;
}

.pod-browser-disclosure[open] > .pod-browser-disclosure-summary {
    margin-bottom: 12px;
}

.pod-browser-disclosure[open] > .pod-browser-disclosure-summary > svg {
    transform: rotate(180deg);
}

.pod-recent-wants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
    gap: 12px;
}

.pod-person-fan,
.pod-trade-side {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
}

.pod-fan-owner {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary);
    font-size: 12px;
}

.pod-fan-owner .pod-profile-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.pod-fan-owner-link {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pod-fan-owner-link .pod-profile-avatar {
    transition: box-shadow 0.15s ease;
}

.pod-fan-owner-link:hover strong,
.pod-fan-owner-link:focus-visible strong {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pod-fan-owner-link:hover .pod-profile-avatar,
.pod-fan-owner-link:focus-visible .pod-profile-avatar {
    box-shadow: 0 0 0 2px var(--accent-color);
}

.pod-fan-owner-link:focus-visible {
    outline: none;
}

.pod-ready-trades {
    display: grid;
    gap: 12px;
}

.pod-trade-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 38%, transparent);
}

.pod-trade-pair.approximately-fair {
    border-color: color-mix(in srgb, var(--success-color, #58a66a) 55%, var(--border-color));
}

.pod-trade-pair-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 14%, var(--widget-bg));
    color: var(--accent-color);
}

.pod-trade-pair footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.pod-trade-pair footer small {
    color: var(--accent-color);
}

.pod-trade-offer-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.pod-trade-profile-name {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pod-trade-profile-name:hover,
.pod-trade-profile-name:focus-visible {
    color: var(--accent-color);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pod-trade-omitted {
    display: block;
    margin-top: -4px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.pod-wishlist-add {
    margin-bottom: 10px;
}

.pod-wishlist-add .card-autocomplete {
    width: 100%;
}

.pod-browser-person-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-bottom: 12px;
}

.pod-browser-person-filters .pod-form-field {
    width: min(260px, 100%);
}

.pod-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--widget-bg) 92%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.pod-filter-pill.active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 18%, var(--widget-bg));
    color: var(--text-primary);
}

.pod-card-owner-badge {
    position: absolute;
    right: 5px;
    bottom: 5px;
    top: auto;
    z-index: 4;
    max-width: calc(100% - 38px);
    overflow: hidden;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--widget-bg) 92%, #000);
    color: var(--text-primary);
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.stack-card:hover .pod-card-owner-badge,
.stack-card:focus-within .pod-card-owner-badge,
.stack-card.hover-active .pod-card-owner-badge {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

button.pod-card-owner-badge {
    font: inherit;
    cursor: pointer;
}

button.pod-card-owner-badge:hover,
button.pod-card-owner-badge:focus-visible {
    border-color: var(--accent-color);
    color: var(--text-primary);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pod-trade-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pod-trade-source-grid > div {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 52%, transparent);
}

.pod-trade-source-grid span {
    color: var(--text-muted);
    font-size: 10px;
}

.pod-trade-source-grid strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    text-overflow: ellipsis;
}

.pod-trade-source-wide {
    grid-column: 1 / -1;
}

.pod-trade-readonly-section small,
.collection-edit-section > small {
    display: block;
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 10px;
}

.pod-browser-member-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(260px, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pod-browser-member-row .card-autocomplete,
.pod-browser-member-row .pod-select {
    width: 100%;
}

.pod-browser-member-row .pod-sharing-toggle {
    justify-self: end;
}

.pod-card-browser-toolbar {
    margin-bottom: 0;
}

.pod-card-filter-drawer {
    margin-bottom: 12px;
}

.pod-card-browser-section .collection-grid-host,
.pod-card-browser-section .collection-list-host {
    margin-top: 12px;
}

.pod-trade-list-entry {
    grid-template-columns: minmax(170px, 1fr) minmax(300px, auto) 48px;
}

.pod-trade-list-count {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Outline while the printing is not in the trade binder, filled once it is —
   the fill is the "currently tradable" signal, not just decoration. */
.card-widget-trade-toggle {
    appearance: none;
    border: 1px solid var(--border-color);
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    cursor: pointer;
}

.card-widget-trade-toggle:hover,
.card-widget-trade-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
    color: var(--text-primary);
}

.card-widget-trade-toggle.active {
    border-color: transparent;
    background: color-mix(in srgb, var(--accent-color) 90%, #000);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.card-widget-trade-toggle.active:hover,
.card-widget-trade-toggle.active:focus-visible {
    border-color: transparent;
    color: #fff;
}

.collection-modal-add-button {
    margin-top: 12px;
}

.pod-wishlist-detail-controls {
    display: grid;
    gap: 10px;
}

.pod-wishlist-detail-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, auto);
    align-items: end;
    gap: 10px;
}

.pod-wishlist-detail-controls input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
}

.pod-wishlist-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pod-wishlist-printing-toggle {
    min-height: 32px;
    justify-content: center;
    white-space: nowrap;
}

.pod-wishlist-save-status {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}

.pod-wishlist-detail-controls small {
    color: var(--text-muted);
    line-height: 1.4;
}

.pod-rules-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.35fr) minmax(260px, 1fr);
    gap: 12px;
    align-items: end;
}

.pod-notes-field {
    grid-row: span 2;
}

.pod-number-input {
    min-width: 90px;
    width: 120px;
}

.pod-textarea {
    min-height: 96px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    padding: 9px 10px;
}

.pod-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pod-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger-color, #e05252) 13%, var(--widget-bg));
    color: var(--text-primary);
    font-size: 12px;
}

.pod-chip button {
    border: 0;
    background: transparent;
    color: var(--danger-color, #e05252);
    cursor: pointer;
}

.pod-participant-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pod-participant-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 90px minmax(170px, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 12px;
}

.pod-participant-row label,
.pod-winner-choice {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pod-participant-card {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--widget-bg) 96%, transparent);
}

.pod-participant-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-primary);
    font-size: 12px;
}

.pod-participant-card-header label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pod-placement-select {
    width: 84px;
}

.pod-participant-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.pod-participant-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pod-participant-field label {
    color: var(--text-muted);
    font-size: 11px;
}

.pod-borrowed-tag {
    color: var(--warning-color, #d9a441);
    font-size: 11px;
}

.pod-stepper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pod-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}

.pod-stepper-btn:hover {
    border-color: var(--accent-color);
}

.pod-stepper-value {
    min-width: 24px;
    text-align: center;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.pod-damage-taken {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.pod-damage-taken label {
    color: var(--text-muted);
    font-size: 11px;
}

.pod-damage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-primary);
    font-size: 12px;
}

.pod-toggle-btn {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--widget-bg);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pod-toggle-btn:hover {
    border-color: var(--accent-color);
}

.pod-game-row-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.pod-game-row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pod-game-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.pod-game-row-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--border-color);
}

.pod-game-participant-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 11px;
}

.pod-game-participant-detail strong {
    color: var(--text-primary);
}

.pod-select {
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    padding: 0 8px;
}

.pod-game-history {
    margin-top: 18px;
}

/* --- Game Log ---------------------------------------------------------- */
.pod-game-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1180px;
    margin: 0 auto;
}

.pod-game-header-copy {
    min-width: 0;
}

.pod-new-game-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    white-space: nowrap;
}

.pod-new-game-btn-hidden,
.pod-game-composer-hidden {
    display: none;
}

.pod-game-header h2 {
    font-size: 20px;
}

.pod-game-header p {
    margin: 0;
    line-height: 1.45;
}

.pod-game-composer {
    max-width: 1180px;
    box-sizing: border-box;
    margin: 16px auto 0;
    padding: clamp(14px, 2vw, 22px);
    border-color: color-mix(in srgb, var(--accent-color) 16%, var(--border-color));
    border-radius: 14px;
    background:
        radial-gradient(circle at 90% -20%, color-mix(in srgb, var(--accent-color) 11%, transparent), transparent 38%),
        color-mix(in srgb, var(--widget-bg) 96%, transparent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

.pod-game-section-heading,
.pod-game-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.pod-game-section-heading h3,
.pod-game-history-heading h3 {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: 15px;
}

.pod-game-eyebrow,
.pod-game-field-label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.pod-game-player-count,
.pod-game-history-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* Replaces the reorder hint once the table seats MAX_GAME_PLAYERS. */
.pod-game-cap-hint {
    color: var(--warning-color, #d9a441);
    font-weight: 700;
}

.pod-game-setup {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.45fr);
    gap: 12px;
    margin: 12px 0 22px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 52%, transparent);
}

.pod-game-setup-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.pod-game-setup .pod-select {
    width: 100%;
}

.pod-game-setup .pod-stepper {
    width: fit-content;
}

.pod-game-players-heading {
    margin-bottom: 10px;
}

.pod-participant-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.pod-participant-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
    min-width: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background-color: color-mix(in srgb, var(--bg-secondary) 44%, var(--widget-bg));
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--widget-bg) 96%, transparent), color-mix(in srgb, var(--widget-bg) 80%, transparent)),
        var(--pod-player-deck-art, none);
    background-position: center;
    background-size: cover;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
    transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 100ms ease;
}

.pod-participant-card:focus-within {
    z-index: 200;
}

.pod-participant-card-winner {
    border-color: color-mix(in srgb, #d8ad55 52%, var(--border-color));
    box-shadow: inset 3px 0 0 #d8ad55, 0 8px 22px rgba(0, 0, 0, 0.11);
}

.pod-participant-card-inactive {
    opacity: 0.56;
}

.pod-participant-card-inactive:hover {
    opacity: 0.82;
}

.pod-participant-card.pod-dragging {
    z-index: 20;
    border-color: var(--accent-color);
    opacity: 0.42;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.pod-participant-card.pod-drag-target {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.pod-participant-card.pod-drag-target-before::before,
.pod-participant-card.pod-drag-target-after::after {
    position: absolute;
    z-index: 25;
    right: 8px;
    left: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent),
        0 0 14px color-mix(in srgb, var(--accent-color) 55%, transparent);
    content: "";
    pointer-events: none;
}

.pod-participant-card.pod-drag-target-before::before {
    top: -7px;
}

.pod-participant-card.pod-drag-target-after::after {
    bottom: -7px;
}

.pod-drag-preview {
    z-index: 9999;
    max-height: 92px;
    overflow: hidden;
    border-color: var(--accent-color);
    opacity: 0.92;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
    pointer-events: none;
}

.pod-participant-card-header {
    align-items: flex-start;
    min-height: 48px;
    padding: 9px 10px;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
    background: color-mix(in srgb, var(--widget-bg) 72%, transparent);
    backdrop-filter: blur(3px);
}

.pod-player-toggle {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.pod-player-include-toggle {
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.pod-player-include-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent-color);
}

.pod-player-profile-link {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pod-player-profile-link:hover strong {
    color: var(--accent-color);
    text-decoration: underline;
}

.pod-player-profile-static,
.pod-player-profile-static:hover {
    cursor: default;
}

.pod-player-profile-static:hover strong {
    color: inherit;
    text-decoration: none;
}

.pod-player-profile-link .pod-profile-avatar {
    width: 30px;
    height: 30px;
    font-size: 10px;
}

.pod-player-avatar {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 11%, var(--widget-bg));
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pod-player-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-player-name strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-player-name small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
}

.pod-rank-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
}

.pod-rank-badge {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 25px;
    padding: 0 5px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-color) 16%, var(--widget-bg));
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pod-participant-card-winner .pod-rank-badge {
    background: color-mix(in srgb, #d8ad55 21%, var(--widget-bg));
    color: color-mix(in srgb, #f0cf83 88%, var(--text-primary));
}

.pod-rank-btn,
.pod-drag-handle {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.pod-rank-btn:hover:not(:disabled),
.pod-drag-handle:hover {
    border-color: var(--border-color);
    background: var(--widget-bg);
    color: var(--text-primary);
}

.pod-rank-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.pod-drag-handle {
    cursor: grab;
    touch-action: none;
}

.pod-drag-handle:active {
    cursor: grabbing;
}

.pod-participant-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 11px;
    background: color-mix(in srgb, var(--widget-bg) 58%, transparent);
    backdrop-filter: blur(2px);
}

.pod-player-deck-field {
    min-width: 0;
}

/* Ending life + poison sit side by side while there is room and wrap onto
   their own rows once the card is too narrow for two steppers. The steppers
   fill their field rather than holding the fixed 160px of `.pod-stepper`, so
   a wrapped or squeezed field never overflows the card. */
.pod-player-result-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.pod-player-result-fields > .pod-participant-field {
    flex: 0 1 160px;
    min-width: 0;
}

.pod-player-result-fields .pod-stepper {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.pod-stepper {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    gap: 4px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--widget-bg));
}

.pod-stepper-btn {
    flex: 0 0 32px;
    width: 32px;
    height: 26px;
    border: 0;
    background: transparent;
}

.pod-stepper-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 13%, transparent);
}

.pod-stepper-btn svg {
    width: 12px;
    height: 12px;
}

.pod-stepper-value {
    flex: 1 1 auto;
    width: 64px;
    min-width: 60px;
    height: 26px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    appearance: textfield;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.pod-stepper-value::-webkit-inner-spin-button,
.pod-stepper-value::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.pod-stepper-btn > span {
    display: block;
    color: currentColor;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.pod-deck-autocomplete {
    position: relative;
    min-width: 0;
}

.pod-deck-autocomplete:focus-within {
    z-index: 300;
}

.pod-deck-autocomplete > .pod-text-input {
    width: 100%;
    min-width: 0;
    padding-right: 30px;
}

.pod-deck-autocomplete-dropdown {
    position: absolute;
    z-index: 400;
    top: calc(100% + 5px);
    left: 0;
    width: min(460px, calc(100vw - 52px));
    max-height: 350px;
    overflow-y: auto;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, #080a12);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.pod-deck-autocomplete-section + .pod-deck-autocomplete-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.pod-deck-autocomplete-section-header {
    padding: 4px 6px 6px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pod-deck-autocomplete-entry,
.pod-deck-autocomplete-clear {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.pod-deck-autocomplete-create {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 32px;
    margin: 4px 0 6px;
    border: 1px dashed color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    color: var(--accent-color);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.pod-phantom-deck-form {
    display: grid;
    gap: 6px;
    margin: 4px 0 7px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 7%, var(--widget-bg));
}

.pod-phantom-deck-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.pod-phantom-deck-form .pod-text-input {
    width: 100%;
    min-width: 0;
}

.pod-phantom-deck-form small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.pod-deck-autocomplete-clear {
    justify-content: center;
    min-height: 31px;
    margin-bottom: 4px;
    border-color: var(--border-color);
    border-radius: 7px;
    background: var(--widget-bg);
    color: var(--text-muted);
    font-size: 10px;
}

.pod-deck-autocomplete-entry {
    justify-content: space-between;
    min-height: 58px;
    margin: 2px 0;
    padding: 8px 9px;
    border-radius: 8px;
    background-color: var(--widget-bg);
    background-position: center;
    background-size: cover;
}

.pod-deck-autocomplete-entry:hover,
.pod-deck-autocomplete-clear:hover {
    border-color: var(--accent-color);
}

.pod-deck-autocomplete-entry-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.pod-deck-autocomplete-entry-text strong,
.pod-deck-autocomplete-entry-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-deck-autocomplete-entry-text strong {
    font-size: 11px;
}

.pod-deck-autocomplete-entry-sub {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 9px;
}

.pod-deck-autocomplete-empty {
    margin: 9px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.pod-deck-identity {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
}

.pod-deck-identity-symbol {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}

.pod-borrowed-tag {
    display: inline-block;
    margin-top: 4px;
}

.pod-player-advanced {
    grid-column: 1 / -1;
    min-width: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.pod-player-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    list-style: none;
}

.pod-player-advanced > summary::-webkit-details-marker,
.pod-game-notes-disclosure > summary::-webkit-details-marker {
    display: none;
}

.pod-player-advanced > summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-primary);
    font-weight: 650;
}

.pod-player-advanced-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-player-advanced-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 11px;
}

.pod-player-advanced-grid .pod-number-input {
    width: 100%;
    min-width: 0;
}

/* Labels here are card names ("Invisible Woman casts"), so neighbouring fields
   in a row rarely wrap to the same number of lines. Stretch the fields and pin
   the counter to the bottom so the counters stay on one baseline. */
.pod-player-advanced-grid > .pod-participant-field {
    height: 100%;
    min-width: 0;
    justify-content: space-between;
}

.pod-player-advanced-grid .pod-stepper {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.pod-commander-damage-field {
    grid-column: 1 / -1;
}

.pod-commander-damage-field > .pod-toggle-btn {
    width: 100%;
    min-height: 32px;
    justify-content: flex-start;
    text-align: left;
}

.pod-commander-damage-field > .pod-toggle-btn svg:last-child {
    margin-left: auto;
}

.pod-commander-damage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 7px;
    margin-top: 7px;
}

.pod-commander-damage-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 118px;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background-color: var(--widget-bg);
    background-position: center 24%;
    background-size: cover;
}

/* Player pinned left, commander pinned right — each side truncates on its own
   so a long deck name never pushes the player name out of view. */
.pod-commander-damage-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    margin: 0 -2px 1px;
    padding: 5px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(2, 4, 8, 0.82);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
    text-shadow: 0 1px 3px #000;
}

.pod-commander-damage-player,
.pod-commander-damage-commander {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-commander-damage-player {
    flex: 0 1 auto;
}

.pod-commander-damage-commander {
    flex: 1 1 auto;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 650;
    text-align: right;
}

.pod-commander-damage-stepper {
    width: 160px;
    min-width: 0;
    max-width: 100%;
    margin: 6px auto 0;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(5, 7, 11, 0.72);
}

.pod-game-finish {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.pod-tracked-decks-manager,
.pod-tracked-players-manager {
    margin-top: 12px;
    padding: 9px 10px;
    border: 1px dashed color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

.pod-tracked-decks-manager > summary,
.pod-tracked-players-manager > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.pod-tracked-decks-manager > summary span,
.pod-tracked-players-manager > summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pod-tracked-decks-manager > summary small,
.pod-tracked-players-manager > summary small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
}

.pod-tracked-decks-list {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.pod-tracked-deck-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.6fr) minmax(190px, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.pod-tracked-deck-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-tracked-deck-name strong,
.pod-tracked-deck-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-tracked-player-help {
    margin: 8px 0;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.4;
}

.pod-tracked-player-create,
.pod-tracked-player-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.pod-tracked-player-create .pod-text-input {
    width: 100%;
    min-width: 0;
}

.pod-tracked-players-list {
    display: grid;
    gap: 7px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color);
}

.pod-tracked-player-row {
    grid-template-columns: minmax(150px, 0.6fr) minmax(190px, 1fr) auto;
}

.pod-tracked-player-identity {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pod-tracked-player-identity .pod-profile-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    font-size: 10px;
}

.pod-tracked-player-identity > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-tracked-player-identity strong,
.pod-tracked-player-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-tracked-player-identity strong {
    color: var(--text-primary);
    font-size: 10px;
}

.pod-tracked-player-identity small {
    color: var(--text-muted);
    font-size: 9px;
}

.pod-tracked-deck-name strong {
    color: var(--text-primary);
    font-size: 10px;
}

.pod-tracked-deck-name small {
    color: var(--text-muted);
    font-size: 9px;
}

.pod-game-notes-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.pod-game-notes-disclosure > summary small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
}

.pod-game-notes-disclosure[open] > summary {
    margin-bottom: 7px;
}

.pod-game-finish .pod-notes-field {
    position: relative;
    grid-row: auto;
}

.pod-game-finish .pod-textarea {
    width: 100%;
    min-height: 76px;
    padding-bottom: 22px;
}

.pod-notes-counter {
    position: absolute;
    right: 8px;
    bottom: 7px;
    color: var(--text-muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.pod-notes-counter-warn {
    color: var(--warning-color, #d9a441);
}

.pod-game-submit-row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.pod-game-turn-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pod-game-turn-field .pod-number-input {
    width: 100px;
    min-width: 0;
}

.pod-log-game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    min-height: 34px;
    white-space: nowrap;
}

.pod-game-history {
    max-width: 1180px;
    margin: 24px auto 0;
}

.pod-game-history-heading {
    margin-bottom: 10px;
}

.pod-game-history-list {
    display: grid;
    gap: 8px;
}

.pod-game-history-card {
    position: relative;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background-color: color-mix(in srgb, var(--widget-bg) 94%, transparent);
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--widget-bg) 96%, transparent), color-mix(in srgb, var(--widget-bg) 74%, transparent)),
        var(--pod-game-art, none);
    background-position: center 28%;
    background-size: cover;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}

.pod-game-history-card:last-child {
    border-bottom: 1px solid var(--border-color);
}

.pod-game-row-summary {
    position: relative;
    display: block;
    min-height: 43px;
    align-items: start;
    padding: 11px 196px 11px 12px;
    background: color-mix(in srgb, var(--widget-bg) 55%, transparent);
    backdrop-filter: blur(2px);
}

.pod-game-winner-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pod-game-winner-summary > div:last-child {
    min-width: 0;
}

.pod-game-winner-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
}

.pod-game-winner-link,
.pod-game-winner-deck-link {
    display: inline;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pod-game-winner-link {
    margin-right: 0.28em;
}

.pod-game-winner-deck-link,
.pod-game-winner-deck-static {
    margin-left: 0.28em;
    color: color-mix(in srgb, var(--accent-color) 72%, var(--text-primary));
}

.pod-game-winner-link:not(:disabled):hover,
.pod-game-winner-deck-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.pod-game-winner-avatar {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.pod-game-winner-avatar-clip {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, #d8ad55 52%, var(--border-color));
    border-radius: 50%;
    background: color-mix(in srgb, #d8ad55 15%, var(--widget-bg));
}

.pod-game-winner-avatar-clip .pod-profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
    object-fit: cover;
}

.pod-game-winner-avatar:not(:disabled):hover,
.pod-game-winner-avatar:focus-visible {
    outline: none;
    background: transparent;
    box-shadow: none;
}

.pod-game-winner-avatar:not(:disabled):hover .pod-game-winner-avatar-clip,
.pod-game-winner-avatar:focus-visible .pod-game-winner-avatar-clip {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.pod-game-winner-avatar-static:disabled,
.pod-game-winner-link-static:disabled,
.pod-history-profile-static:disabled {
    opacity: 1;
    cursor: default;
}

.pod-game-winner-avatar > svg {
    position: absolute;
    top: -5px;
    right: -4px;
    width: 14px;
    height: 14px;
    color: #e1b85f;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.pod-game-date {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 9px;
}

.pod-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.pod-game-meta > span,
.pod-game-participant-stats > span {
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 50%, transparent);
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.15;
}

/* Same pill as its meta neighbours, tinted so a live-tracked game stands out. */
.pod-game-meta > .pod-game-source-badge {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: color-mix(in srgb, var(--accent-color) 82%, var(--text-primary));
    font-weight: 700;
}

.pod-game-row-actions {
    position: absolute;
    top: 11px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
}

.pod-game-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pod-game-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pod-game-delete-btn {
    width: 29px;
    height: 29px;
    padding: 0;
    justify-content: center;
}

.pod-game-note-preview {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -2px 12px 10px;
    padding: 7px 9px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}

.pod-game-note-preview svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.pod-game-row-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 12px 12px;
    background: color-mix(in srgb, var(--bg-secondary) 58%, transparent);
    backdrop-filter: blur(3px);
}

.pod-game-participant-detail {
    display: block;
    min-width: 0;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--widget-bg) 82%, transparent);
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--widget-bg) 96%, transparent), color-mix(in srgb, var(--widget-bg) 70%, transparent)),
        var(--pod-history-deck-art, none);
    background-position: center 26%;
    background-size: cover;
}

.pod-game-participant-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pod-history-player-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-history-profile-link {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.pod-history-profile-link:not(:disabled):hover .pod-profile-avatar {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.pod-history-profile-link .pod-profile-avatar {
    width: 30px;
    height: 30px;
    font-size: 10px;
}

.pod-game-participant-heading strong,
.pod-game-participant-heading small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-history-deck-name {
    color: color-mix(in srgb, var(--accent-color) 65%, var(--text-muted));
    font-weight: 650;
}

.pod-history-deck-link {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin-top: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 9px;
    line-height: normal;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pod-history-deck-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.pod-game-participant-heading strong {
    font-size: 11px;
}

.pod-game-participant-heading small {
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 9px;
}

.pod-game-place {
    flex: 0 0 auto;
    min-width: 24px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.pod-game-place-first {
    color: #d8ad55;
}

.pod-game-participant-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.pod-game-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 16px;
    border: 1px dashed var(--border-color);
    border-radius: 11px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.pod-game-empty > svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    color: var(--accent-color);
}

.pod-game-empty strong {
    color: var(--text-primary);
    font-size: 12px;
}

@media (max-width: 900px) {
    .pod-participant-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-participant-card-header {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
    }

    .pod-game-finish {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-game-submit-row {
        justify-content: flex-end;
    }

    .pod-tracked-deck-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pod-tracked-deck-name,
    .pod-tracked-player-identity {
        grid-column: 1 / -1;
    }

    .pod-tracked-player-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.pod-stats-feature {
    display: grid;
    gap: 14px;
}

.pod-stats-header {
    margin-bottom: 2px;
}

/* Pod Rating: number, last-game trend, and a provisional marker. */
.pod-rating {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pod-rating > strong {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
}

.pod-rating-trend {
    font-weight: 700;
}

.pod-rating-trend-up {
    color: color-mix(in srgb, var(--success-color, #58a66a) 85%, var(--text-primary));
}

.pod-rating-trend-down {
    color: color-mix(in srgb, var(--error-color, #d9534f) 85%, var(--text-primary));
}

.pod-rating-provisional {
    padding: 1px 4px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    cursor: help;
}

.pod-error {
    padding: 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger, #e05252) 12%, transparent);
    color: var(--danger, #e05252);
    font-size: 13px;
}

.pod-hint {
    margin: 6px 0 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.pod-unbacked-notice {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--warning-color, #d9a441) 45%, var(--border-color));
    background: color-mix(in srgb, var(--warning-color, #d9a441) 10%, transparent);
    color: var(--text-primary);
}

.pod-double-pro-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--warning-color, #d9a441) 55%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--warning-color, #d9a441) 12%, var(--widget-bg));
}

.pod-double-pro-banner > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-primary);
    font-size: 12px;
}

.pod-banner-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

/* --- Create pod form --- */
.pod-create h2,
.pod-overview-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.pod-create-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}

.pod-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pod-form-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pod-text-input {
    height: 34px;
    min-width: 220px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    padding: 0 10px;
    font-size: 13px;
}

.pod-text-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.pod-accept-invite {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* --- Overview (owner + member) --- */
.pod-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.pod-title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--text-primary);
}

.pod-name-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: left;
}

.pod-name-static {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-name-button.editable {
    cursor: text;
}

.pod-name-button.editable:hover {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--widget-bg) 80%, transparent);
}

.pod-name-button svg {
    flex: 0 0 auto;
    color: var(--text-muted);
}

.pod-name-input {
    width: min(460px, 60vw);
    padding: 3px 7px;
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    font-size: 1.18rem;
    font-weight: 700;
}

.pod-name-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.pod-overview-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.pod-metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--widget-bg));
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.pod-metric-badge svg {
    color: var(--accent-color);
}

.pod-summary-card {
    display: grid;
    gap: 5px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 82%, transparent);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.pod-summary-card p {
    margin: 0;
}

.pod-summary-card strong {
    color: var(--text-primary);
}

.pod-hub-section {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 92%, transparent);
}

.pod-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pod-section-heading h3,
.pod-hub-section > div > h3 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 15px;
}

.pod-section-heading p,
.pod-hub-section > div > p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.pod-seat-usage {
    border-color: color-mix(in srgb, var(--warning-color, #d9a441) 42%, var(--border-color));
    background: color-mix(in srgb, var(--warning-color, #d9a441) 11%, var(--widget-bg));
    color: color-mix(in srgb, var(--warning-color, #d9a441) 80%, var(--text-primary));
    font-variant-numeric: tabular-nums;
}

.pod-member-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.pod-member-columns {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.5fr)
        minmax(82px, 0.55fr)
        minmax(112px, 0.72fr)
        minmax(72px, 0.45fr)
        minmax(98px, 0.62fr)
        64px
        34px;
    align-items: center;
    column-gap: 12px;
}

.pod-member-column-headings {
    padding: 0 12px 2px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pod-member-column-headings > span {
    min-width: 0;
    text-align: left;
}

.pod-member-column-headings > span:nth-child(6),
.pod-member-column-headings > span:nth-child(7) {
    text-align: center;
}

.pod-member-row {
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--widget-bg) 94%, transparent);
}

.pod-pending-member-row {
    border-style: dashed;
    background: color-mix(in srgb, var(--warning-color, #d9a441) 7%, var(--widget-bg));
}

.pod-pending-email {
    cursor: default;
}

.pod-role-badge.pod-role-pending {
    background: color-mix(in srgb, var(--warning-color, #d9a441) 18%, transparent);
    color: var(--warning-color, #d9a441);
}

.pod-member-profile-link,
.pod-candidate-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pod-member-profile-link {
    width: 100%;
}

.pod-member-profile-link:hover strong,
.pod-candidate-profile:hover strong {
    color: var(--accent-color);
    text-decoration: underline;
}

.pod-profile-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-secondary);
    object-fit: cover;
}

.pod-profile-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-color) 18%, var(--widget-bg));
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 800;
}

.pod-member-identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pod-member-identity strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-member-email {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-role-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--widget-bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pod-member-role-cell,
.pod-member-access-cell,
.pod-member-status-cell,
.pod-member-joined-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-member-role-cell {
    justify-self: start;
    max-width: 100%;
}

/* Access and status read as badges at every width, matching the role pill, so a
   value never looks like a caption for the cell beside it. */
.pod-member-access-cell,
.pod-member-status-cell {
    justify-self: start;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--widget-bg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pod-role-badge.pod-role-owner {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-color);
}

.pod-status-badge {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
}

.pod-joined-at {
    min-width: 0;
    color: var(--text-muted);
    font-size: 10px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.pod-member-sharing-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
}

.pod-member-sharing-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.pod-member-sharing-toggle input:disabled {
    opacity: 1;
    cursor: default;
}

/* Wide layouts label this column in the table heading; the inline label only
   appears once that heading is hidden. */
.pod-member-sharing-label {
    display: none;
}

.pod-member-sharing-readonly {
    cursor: default;
}

.pod-member-cell-spacer {
    min-width: 0;
}

.pod-remove-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--danger-color, #e05252) 55%, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--danger-color, #e05252) 10%, transparent);
    color: var(--danger-color, #e05252);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pod-remove-btn:hover {
    background: color-mix(in srgb, var(--danger-color, #e05252) 20%, transparent);
}

.pod-member-action-btn {
    justify-self: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
}

.pod-member-action-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.pod-member-leave-btn svg {
    transform: translateX(1px);
}

.pod-owner-controls,
.pod-member-controls {
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.pod-member-controls {
    border-top: 0;
}

.pod-member-invite-controls {
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.pod-member-help {
    display: grid;
    gap: 3px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.pod-member-help p {
    margin: 0;
}

.pod-member-help strong {
    color: var(--text-primary);
}

.pod-invite-toggle {
    margin-left: auto;
}

.pod-invite-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-secondary) 58%, transparent);
}

.pod-invite-panel h4 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 14px;
}

.pod-invite-panel .pod-form-field {
    width: 100%;
}

.pod-invite-panel .pod-text-input {
    width: 100%;
}

.pod-invite-results {
    min-height: 54px;
    margin-top: 8px;
}

.pod-invite-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color);
}

.pod-invite-result:last-child {
    border-bottom: 0;
}

.pod-candidate-profile {
    flex: 1 1 auto;
}

.pod-candidate-profile > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pod-candidate-profile strong {
    color: var(--text-primary);
    font-size: 13px;
}

.pod-candidate-profile small {
    color: var(--text-muted);
    font-size: 11px;
}

.pod-email-invite {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.pod-email-invite summary {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.pod-email-invite .pod-create-form {
    margin-top: 8px;
}

.pod-rule-groups {
    display: grid;
    gap: 14px;
}

.pod-rule-group {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.pod-rule-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.pod-rule-group h4 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 13px;
}

.pod-rule-items {
    display: grid;
    gap: 8px;
}

.pod-card-rule-items {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.pod-rule-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--widget-bg) 94%, transparent);
}

.pod-rule-item p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.pod-rule-format-badge {
    align-self: flex-start;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: color-mix(in srgb, var(--accent-color) 85%, var(--text-primary));
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- Mulligan rule summary --- */
.pod-mulligan-summary {
    display: grid;
    gap: 9px;
}

.pod-mulligan-summary-section {
    display: grid;
    gap: 5px;
}

.pod-mulligan-summary-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pod-mulligan-badge {
    padding: 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pod-mulligan-badge-free {
    border-color: color-mix(in srgb, var(--success-color, #58a66a) 45%, var(--border-color));
    background: color-mix(in srgb, var(--success-color, #58a66a) 13%, transparent);
    color: color-mix(in srgb, var(--success-color, #58a66a) 82%, var(--text-primary));
}

.pod-mulligan-badge-delta {
    border-color: color-mix(in srgb, var(--accent-color) 38%, var(--border-color));
    background: color-mix(in srgb, var(--accent-color) 11%, transparent);
    color: color-mix(in srgb, var(--accent-color) 82%, var(--text-primary));
}

/* Conditional free mulligans are a sentence, not a value, so they read as text
   rather than competing with the numeric badges beside them. */
.pod-mulligan-condition {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* --- Bracket requirement summary --- */
.pod-bracket-summary {
    display: grid;
    gap: 8px;
}

.pod-bracket-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Out-of-range brackets stay visible but recede, so the rule reads as a
   position on the full 1-5 scale rather than a bare pair of numbers. */
.pod-bracket-step {
    display: grid;
    gap: 1px;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
    color: var(--text-muted);
    text-align: center;
}

.pod-bracket-step strong {
    color: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.pod-bracket-step small {
    overflow: hidden;
    color: inherit;
    font-size: 8px;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pod-bracket-step-allowed {
    border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: color-mix(in srgb, var(--accent-color) 88%, var(--text-primary));
}

.pod-bracket-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 11px;
    text-decoration: none;
}

.pod-bracket-guide-link:hover,
.pod-bracket-guide-link:focus-visible {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pod-bracket-guide-link svg {
    flex: 0 0 auto;
}

.pod-rule-card-image {
    width: 100%;
    max-width: 210px;
    aspect-ratio: 488 / 680;
    border-radius: 4.75% / 3.5%;
    object-fit: cover;
}

.pod-rule-card-preview {
    align-self: flex-start;
    width: 100%;
    max-width: 210px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 4.75% / 3.5%;
    background: transparent;
    cursor: pointer;
}

.pod-rule-card-preview .pod-rule-card-image {
    display: block;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.pod-rule-card-preview:hover,
.pod-rule-card-preview:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.pod-rule-card-preview:hover .pod-rule-card-image,
.pod-rule-card-preview:focus-visible .pod-rule-card-image {
    filter: brightness(1.08);
    transform: scale(1.015);
}

.pod-rule-card-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-rule-delete {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--danger-color, #e05252) 45%, var(--border-color));
    border-radius: 6px;
    background: transparent;
    color: var(--danger-color, #e05252);
    font-size: 11px;
    cursor: pointer;
}

.pod-rule-editor-controls {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.pod-rule-editor {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-secondary) 58%, transparent);
}

.pod-rule-editor-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pod-card-rule-editor-row {
    align-items: end;
}

.pod-mulligan-builder {
    display: grid;
    gap: 10px;
}

.pod-mulligan-presets {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--widget-bg) 78%, transparent);
}

.pod-mulligan-presets summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    padding: 9px 10px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.pod-mulligan-presets summary small,
.pod-mulligan-builder-heading small,
.pod-mulligan-number-field > small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
}

.pod-mulligan-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 7px;
    padding: 0 9px 9px;
}

.pod-mulligan-preset {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--input-bg, var(--bg-secondary));
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.pod-mulligan-preset.active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, var(--widget-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.pod-mulligan-preset strong {
    font-size: 11px;
}

.pod-mulligan-preset small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.pod-mulligan-builder-section {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 8px;
}

.pod-mulligan-builder-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

.pod-mulligan-builder-heading strong {
    color: var(--text-primary);
    font-size: 11px;
}

.pod-mulligan-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(125px, 100%), 1fr));
    gap: 8px;
}

/* `.pod-text-input`'s 220px floor would otherwise push these number fields
   past the editor's right edge instead of letting the grid wrap them. */
.pod-mulligan-field-grid > .pod-mulligan-number-field {
    min-width: 0;
}

.pod-mulligan-number-field > .pod-text-input {
    width: 100%;
    min-width: 0;
}

.pod-mulligan-number-field > small {
    line-height: 1.25;
}

.pod-rule-editor .card-autocomplete,
.pod-rule-editor .pod-form-field,
.pod-rule-editor .pod-text-input {
    width: 100%;
}

.pod-confirm-modal {
    width: min(420px, calc(100vw - 32px));
    text-align: center;
}

.pod-confirm-modal h3 {
    margin: 0 0 12px;
    color: var(--danger-color, #e05252);
}

.pod-confirm-modal p {
    margin: 0 0 18px;
    color: var(--text-muted);
    line-height: 1.5;
}

.pod-confirm-modal .modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pod-owner-controls h3,
.pod-member-controls h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.pod-sharing-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .pod-game-header {
        align-items: flex-start;
    }

    /* Five bracket names never fit across a phone; the numbers still carry the
       range and the full name stays in each step's title. */
    .pod-bracket-scale {
        gap: 3px;
    }

    .pod-bracket-step small {
        display: none;
    }

    .pod-game-composer {
        margin-top: 12px;
        padding: 11px;
        border-radius: 11px;
    }

    .pod-game-setup {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px;
    }

    .pod-game-setup-field:last-child {
        align-items: flex-start;
    }

    .pod-game-players-heading {
        align-items: flex-start;
    }

    .pod-game-players-heading > .pod-muted {
        max-width: 120px;
        text-align: right;
    }

    .pod-participant-card-header {
        align-items: flex-start;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
    }

    .pod-participant-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-participant-card-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-player-result-fields > .pod-participant-field {
        flex: 1 1 132px;
    }

    .pod-player-result-fields .pod-stepper {
        justify-content: space-between;
    }

    .pod-player-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pod-player-advanced-hint {
        display: none;
    }

    .pod-deck-autocomplete-dropdown {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-height: min(68vh, 480px);
    }

    .pod-game-submit-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pod-game-turn-field .pod-number-input,
    .pod-log-game-btn {
        width: 100%;
        min-width: 0;
    }

    .pod-game-row-summary {
        align-items: flex-start;
        padding-right: 12px;
    }

    .pod-game-row-actions {
        position: static;
        justify-content: flex-start;
        margin-top: 8px;
        gap: 3px;
    }

    .pod-game-details-btn > span {
        display: none;
    }

    .pod-game-edit-btn > span {
        display: none;
    }

    .pod-game-details-btn {
        width: 29px;
        height: 29px;
        padding: 0;
        justify-content: center;
    }

    .pod-game-edit-btn {
        width: 29px;
        height: 29px;
        padding: 0;
        justify-content: center;
    }

    .pod-game-row-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-tracked-player-create,
    .pod-tracked-player-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-tracked-player-create .pod-toggle-btn,
    .pod-tracked-player-row .pod-toggle-btn {
        width: 100%;
        justify-content: center;
    }

    .pod-wishlist-detail-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-wishlist-printing-toggle {
        width: 100%;
    }

    .pod-trade-summary-grid,
    .pod-browser-member-row {
        grid-template-columns: 1fr;
    }

    .pod-browser-member-row .pod-sharing-toggle {
        justify-self: start;
    }

    .pod-trade-list-entry {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pod-trade-list-entry .card-meta-cluster--list {
        grid-column: 1 / -1;
    }

    .pod-trade-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-trade-pair-icon {
        margin: -4px auto;
        transform: rotate(90deg);
    }

    .pod-trade-pair footer {
        flex-direction: column;
    }

    .pod-trade-source-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-trade-source-wide {
        grid-column: auto;
    }
    /* Two columns, auto-flowed in source order: role/access, status/joined,
       sharing/action. Every cell then has room to read as its own control
       rather than as a label for the one beside it. */
    .pod-member-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 8px;
    }

    .pod-member-column-headings {
        display: none;
    }

    .pod-member-identity-cell {
        grid-column: 1 / -1;
    }

    .pod-member-access-cell,
    .pod-member-joined-cell {
        grid-column: auto;
    }

    .pod-member-access-cell,
    .pod-member-action-btn {
        justify-self: end;
    }

    .pod-member-status-cell,
    .pod-member-sharing-toggle,
    .pod-member-cell-spacer {
        justify-self: start;
    }

    .pod-member-sharing-toggle {
        gap: 7px;
        width: auto;
        justify-content: flex-start;
    }

    .pod-member-sharing-label {
        display: inline;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .pod-joined-at {
        text-align: left;
    }

    .pod-overview-head {
        align-items: flex-start;
    }

    .pod-overview-metrics {
        justify-content: flex-start;
    }

    .pod-hub-section {
        padding: 12px;
    }

    .pod-member-profile-link {
        flex-basis: 100%;
    }

    .pod-invite-result {
        align-items: stretch;
    }

    .pod-rules-grid,
    .pod-participant-row,
    .pod-rule-editor-row {
        grid-template-columns: 1fr;
    }
}

.pod-sessions-section {
    display: grid;
    gap: 12px;
}

.pod-sessions-section > .pod-section-heading {
    margin-bottom: 0;
}

.pod-add-session-btn {
    flex: 0 0 auto;
}

.pod-session-editor {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 6%, var(--bg-secondary));
}

.pod-session-editor .pod-section-heading h4 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 14px;
}

.pod-session-editor .pod-section-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
}

.pod-session-editor-grid {
    display: grid;
    gap: 10px;
}

.pod-session-editor-row {
    display: grid;
    gap: 10px;
}

.pod-session-editor-name-row {
    grid-template-columns: minmax(0, 1fr);
}

.pod-session-editor-time-row {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.pod-session-editor-place-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pod-session-editor-place-row > .pod-field {
    flex: 1 1 155px;
}

.pod-session-editor-place-row > .pod-session-location-kind {
    flex: 0 1 auto;
}

.pod-session-editor-place-row > .pod-session-location-field,
.pod-session-editor-place-row > .pod-session-virtual-detail-field {
    flex: 2 1 290px;
}

.pod-session-editor .pod-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pod-session-editor .pod-field > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.pod-session-editor .pod-field > span small {
    display: inline-block;
    margin-left: 5px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.pod-session-kind-toggle,
.pod-session-rsvp-actions {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--widget-bg));
}

.pod-session-kind-toggle {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
}

.pod-session-kind-toggle button,
.pod-session-rsvp-actions button {
    min-height: 27px;
    padding: 4px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.pod-session-kind-toggle button {
    border-radius: 999px;
}

.pod-session-kind-toggle button.active,
.pod-session-rsvp-actions button.active {
    background: color-mix(in srgb, var(--accent-color) 22%, var(--widget-bg));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 48%, transparent);
}

.pod-session-timezone-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 6px 9px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--input-bg, var(--widget-bg));
    color: var(--text-primary);
    font-size: 10px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pod-session-timezone-toggle svg {
    flex: 0 0 auto;
    color: var(--accent-color);
}

.pod-session-timezone-select {
    width: 100%;
}

.pod-session-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border-color);
}

.pod-session-action-bar {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.pod-session-action-bar > .pod-session-editor {
    margin-top: 12px;
}

.pod-sessions-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 82px;
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    color: var(--text-muted);
}

.pod-sessions-empty svg {
    color: var(--accent-color);
}

.pod-sessions-empty div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pod-sessions-empty strong {
    color: var(--text-primary);
    font-size: 12px;
}

.pod-sessions-empty span {
    font-size: 10px;
}

.pod-session-list {
    display: grid;
    gap: 10px;
}

.pod-session-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: color-mix(in srgb, var(--widget-bg) 92%, transparent);
}

.pod-session-card.pod-session-past {
    order: 2;
    border-color: color-mix(in srgb, var(--text-muted) 28%, var(--border-color));
    filter: saturate(0.72);
}

.pod-session-card.pod-session-past:hover,
.pod-session-card.pod-session-past:focus-within {
    filter: saturate(0.9);
}

.pod-session-date-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    border-right: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    background: linear-gradient(155deg, color-mix(in srgb, var(--accent-color) 24%, var(--bg-secondary)), var(--bg-secondary));
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pod-session-date-block span {
    color: var(--accent-color);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pod-session-date-block strong {
    font-size: 25px;
    line-height: 1;
}

.pod-session-date-block small {
    color: var(--text-muted);
    font-size: 9px;
}

.pod-session-summary {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
}

.pod-session-title-row,
.pod-session-response-summary,
.pod-session-my-response,
.pod-session-deck-planner-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.pod-session-title-row h4 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-session-title-flags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pod-session-past-badge {
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 35%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 9%, transparent);
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.pod-session-title-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.pod-session-edit-btn,
.pod-session-log-btn,
.pod-session-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
    color: var(--text-muted);
    font-size: 9px;
    cursor: pointer;
}

.pod-session-edit-btn:hover,
.pod-session-log-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pod-session-log-btn {
    color: var(--accent-color);
}

.pod-session-delete-btn {
    width: 28px;
    min-width: 28px;
    padding-inline: 0;
    border-color: color-mix(in srgb, var(--danger, #e05252) 48%, var(--border-color));
    color: var(--danger, #e05252);
}

.pod-session-delete-btn:hover,
.pod-session-delete-btn:focus-visible {
    border-color: var(--danger, #e05252);
    background: color-mix(in srgb, var(--danger, #e05252) 12%, var(--bg-secondary));
    color: color-mix(in srgb, var(--danger, #e05252) 80%, white);
    outline: none;
}

.pod-session-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
}

.pod-session-meta > span,
.pod-session-meta > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

.pod-session-location-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

.pod-session-location-link:hover,
.pod-session-location-link:focus-visible {
    color: var(--accent-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 42%, transparent);
}

.pod-session-meta svg {
    color: var(--accent-color);
}

.pod-session-location-detail {
    max-width: min(360px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-session-calendar-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.pod-session-calendar-label {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pod-session-calendar-label small {
    color: var(--text-muted);
    font-size: 8px;
}

.pod-session-calendar-providers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.pod-session-calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 31px;
    height: 31px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    color: var(--text-muted);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pod-session-calendar-btn img {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    object-fit: contain;
    opacity: 0.82;
}

.pod-session-calendar-btn:hover,
.pod-session-calendar-btn:focus-visible {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary));
    color: var(--text-primary);
}

.pod-session-calendar-btn:hover img,
.pod-session-calendar-btn:focus-visible img {
    opacity: 1;
}

/* The night's own note, and where the table is leaning on bracket. */
.pod-session-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.pod-session-bracket {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.pod-session-bracket > span {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.pod-session-bracket small {
    color: var(--text-muted);
    font-size: 9px;
}

.pod-session-note-input {
    resize: vertical;
    min-height: 44px;
    font-family: inherit;
}

.pod-session-response-summary {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 9px;
}

.pod-session-response-count {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    white-space: nowrap;
}

.pod-session-response-summary small {
    margin-left: auto;
}

.pod-session-attendee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 6px;
}

.pod-session-attendee {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    min-width: 0;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
}

.pod-session-attendee-profile {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.pod-session-attendee-profile:hover strong {
    color: var(--accent-color);
    text-decoration: underline;
}

.pod-session-attendee-profile .pod-profile-avatar {
    width: 29px;
    height: 29px;
}

.pod-session-attendee-profile > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-session-attendee-profile strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-session-rsvp-state {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 8px;
}

.pod-session-rsvp-going {
    color: color-mix(in srgb, var(--accent-color) 70%, var(--text-primary));
}

.pod-session-rsvp-maybe {
    color: var(--warning-color, #d9a441);
}

.pod-session-rsvp-can-t-make-it {
    color: var(--danger, #e05252);
}

.pod-session-attendee-decks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr));
    grid-column: 1 / -1;
    gap: 5px;
    width: 100%;
}

.pod-session-attendee-deck {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    min-height: 45px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-color) 23%, var(--border-color));
    border-radius: 6px;
    background-image:
        linear-gradient(0deg, rgba(5, 8, 12, 0.96), rgba(5, 8, 12, 0.4)),
        var(--pod-session-deck-art, linear-gradient(135deg, var(--bg-secondary), var(--widget-bg)));
    background-position: center;
    background-size: cover;
    color: #fff;
    font: inherit;
    text-align: left;
}

.pod-session-attendee-deck-link {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pod-session-attendee-deck-link:hover,
.pod-session-attendee-deck-link:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent);
    transform: translateY(-1px);
}

.pod-session-attendee-deck strong,
.pod-session-attendee-deck small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-session-attendee-deck strong {
    font-size: 9px;
}

.pod-session-attendee-deck small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 7px;
}

.pod-session-my-response {
    align-items: center;
    padding-top: 9px;
    border-top: 1px solid var(--border-color);
}

.pod-session-my-response > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pod-session-rsvp-actions button:first-child.active {
    background: color-mix(in srgb, var(--accent-color) 24%, var(--widget-bg));
}

.pod-session-rsvp-actions button:nth-child(2).active {
    background: color-mix(in srgb, var(--warning-color, #d9a441) 22%, var(--widget-bg));
}

.pod-session-rsvp-actions button:last-child.active {
    background: color-mix(in srgb, var(--danger, #e05252) 18%, var(--widget-bg));
}

.pod-session-deck-planner {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-color) 27%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-color) 5%, var(--bg-secondary));
}

.pod-session-deck-planner-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 10px;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}

.pod-session-deck-planner-summary::-webkit-details-marker {
    display: none;
}

.pod-session-deck-planner-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pod-session-deck-planner-summary strong {
    font-size: 11px;
}

.pod-session-deck-planner-summary small {
    color: var(--text-muted);
    font-size: 8px;
}

.pod-session-deck-planner-summary:hover,
.pod-session-deck-planner-summary:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    outline: none;
}

.pod-session-deck-planner-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    border-radius: 999px;
    color: var(--accent-color);
    font-size: 9px;
    font-weight: 700;
}

.pod-session-deck-planner-toggle svg {
    transition: transform 0.15s ease;
}

.pod-session-deck-planner[open] .pod-session-deck-planner-toggle svg {
    transform: rotate(180deg);
}

.pod-session-deck-planner-content {
    display: grid;
    gap: 8px;
    padding: 0 10px 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.pod-session-deck-planner-content > .pod-session-deck-planner-heading {
    padding-top: 9px;
}

.pod-session-deck-planner-heading {
    align-items: center;
}

.pod-session-deck-planner-heading > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pod-session-deck-planner-heading strong {
    color: var(--text-primary);
    font-size: 11px;
}

.pod-session-deck-planner-heading small {
    color: var(--text-muted);
    font-size: 8px;
}

.pod-session-deck-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr));
    gap: 6px;
}

.pod-session-deck-option {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background-image:
        linear-gradient(90deg, rgba(6, 9, 14, 0.97), rgba(6, 9, 14, 0.78)),
        var(--pod-session-deck-art, linear-gradient(135deg, var(--bg-secondary), var(--widget-bg)));
    background-position: center;
    background-size: cover;
    color: #fff;
    cursor: pointer;
}

.pod-session-deck-option:has(input:checked) {
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.pod-session-deck-option > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-session-deck-option strong,
.pod-session-deck-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-session-deck-option strong {
    font-size: 9px;
}

.pod-session-deck-option small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 7px;
}

@media (max-width: 720px) {

    .pod-session-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-session-editor-time-row,
    .pod-session-editor-place-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-session-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .pod-session-date-block {
        align-items: baseline;
        justify-content: flex-start;
        flex-direction: row;
        gap: 5px;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    }

    .pod-session-date-block strong {
        font-size: 16px;
    }

    .pod-session-title-row,
    .pod-session-deck-planner-heading {
        align-items: stretch;
        flex-direction: column;
    }

    /* The three counts are short enough to share a row even here; only the
       "scheduled by" line drops beneath them. */
    .pod-session-response-summary {
        column-gap: 6px;
        row-gap: 6px;
    }

    .pod-session-response-summary small {
        flex: 1 0 100%;
    }

    .pod-session-calendar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pod-session-calendar-providers {
        justify-content: flex-start;
    }

    .pod-session-title-actions {
        align-self: flex-start;
    }

    .pod-session-response-summary small {
        margin-left: 0;
    }

    .pod-session-my-response {
        align-items: stretch;
        flex-direction: column;
    }

    .pod-session-rsvp-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pod-session-deck-planner-heading .pod-secondary-btn {
        width: 100%;
    }

    .pod-session-deck-planner-summary {
        align-items: flex-start;
    }

}

@media (prefers-reduced-motion: reduce) {
    .pod-participant-card {
        transition: none;
    }
}

/* --- Game-log-derived Stats sections --- */

.pod-bar-highlight {
    background: linear-gradient(90deg, var(--warning-color, #d29922), var(--accent-color)) !important;
}

/* Shared player identity — every Pod surface renders names/avatars through
   `PlayerLink`, so this is the only place their look is defined. */
.pod-player-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pod-player-link-static {
    cursor: default;
}

.pod-player-link .pod-profile-avatar {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

.pod-player-link-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The global `button:hover` fill would paint the whole hit box; the affordance
   belongs on the avatar circle itself, not on the box around it. */
.pod-player-link:hover,
.pod-player-link:focus-visible {
    background: transparent;
    outline: none;
}

.pod-player-link .pod-profile-avatar {
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pod-player-link:not(.pod-player-link-static):hover .pod-player-link-name,
.pod-player-link:not(.pod-player-link-static):focus-visible .pod-player-link-name {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pod-player-link:not(.pod-player-link-static):hover .pod-profile-avatar,
.pod-player-link:not(.pod-player-link-static):focus-visible .pod-profile-avatar {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 45%, transparent);
    transform: scale(1.08);
}

/* Sim tab: which Pod mulligan rule is driving the numbers, and any part of it
   the simulator can't yet honour. */
.mulligan-pod-rule-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0 0;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.4;
}

.mulligan-pod-rule-note small {
    color: var(--text-muted);
    font-size: 10px;
}

/* Former members stay listed so historical games still resolve to a name, but
   read as inactive rather than as someone still in the pod. */
.pod-member-row-inactive {
    border-style: dashed;
    opacity: 0.62;
}

.pod-member-row-inactive .pod-member-status-cell {
    border-color: color-mix(in srgb, var(--danger, #e05252) 45%, var(--border-color));
    background: color-mix(in srgb, var(--danger, #e05252) 12%, transparent);
    color: color-mix(in srgb, var(--danger, #e05252) 80%, var(--text-primary));
}

.pod-member-row-inactive:hover {
    opacity: 0.85;
}

/* The purge is destructive in a way removal is not, so it never looks like the
   same button. */
.pod-member-purge-btn {
    border-color: color-mix(in srgb, var(--danger, #e05252) 55%, var(--border-color));
    background: color-mix(in srgb, var(--danger, #e05252) 14%, transparent);
}
.pod-deck-art-host {
    position: relative;
    isolation: isolate;
    background-image: none !important;
}

.pod-deck-art-layer {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.pod-deck-art-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pod-deck-art-pane {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pod-deck-art-pane-primary {
    -webkit-mask-image: linear-gradient(115deg, #000 calc(50% - 0.5px), transparent calc(50% + 0.5px));
    mask-image: linear-gradient(115deg, #000 calc(50% - 0.5px), transparent calc(50% + 0.5px));
}

.pod-deck-art-pane-secondary {
    -webkit-mask-image: linear-gradient(115deg, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
    mask-image: linear-gradient(115deg, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
}

.pod-deck-art-pane .pod-deck-art-image {
    width: 70%;
    object-position: center;
}

.pod-deck-art-pane-primary .pod-deck-art-image {
    right: 40%;
    left: auto;
}

.pod-deck-art-pane-secondary .pod-deck-art-image {
    right: auto;
    left: 40%;
}

.pod-deck-art-seam {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(115deg, transparent calc(50% - 0.75px), rgba(255, 255, 255, 0.55) calc(50% - 0.75px), rgba(255, 255, 255, 0.55) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

.pod-deck-art-scrim {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--pod-deck-art-scrim, linear-gradient(90deg, rgba(6, 9, 14, 0.94), rgba(6, 9, 14, 0.66)));
}

.pod-deck-autocomplete-entry {
    --pod-deck-art-scrim: linear-gradient(to right, rgba(8, 10, 18, 0.9), rgba(8, 10, 18, 0.55));
}

.pod-participant-card {
    --pod-deck-art-scrim: linear-gradient(90deg, color-mix(in srgb, var(--widget-bg) 96%, transparent), color-mix(in srgb, var(--widget-bg) 80%, transparent));
}

.pod-game-history-card {
    --pod-deck-art-scrim: linear-gradient(90deg, color-mix(in srgb, var(--widget-bg) 96%, transparent), color-mix(in srgb, var(--widget-bg) 74%, transparent));
}

.pod-game-participant-detail {
    --pod-deck-art-scrim: linear-gradient(90deg, color-mix(in srgb, var(--widget-bg) 96%, transparent), color-mix(in srgb, var(--widget-bg) 70%, transparent));
}

.pod-session-attendee-deck {
    --pod-deck-art-scrim: linear-gradient(0deg, rgba(5, 8, 12, 0.96), rgba(5, 8, 12, 0.4));
}

.pod-session-deck-option {
    --pod-deck-art-scrim: linear-gradient(90deg, rgba(6, 9, 14, 0.97), rgba(6, 9, 14, 0.78));
}

/* The Pod member picker reads like the card filter groups beneath it. */
.deck-filter-section--pod {
    flex: 0 1 260px;
}

.pod-browser-person-filters {
    align-items: flex-end;
}

/* --- Join a pod: the first thing a new member sees --- */
.pod-welcome {
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 0 16px;
}

.pod-welcome-hero {
    text-align: center;
    margin-bottom: 26px;
}

.pod-welcome-hero h2 {
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 0 8px;
}

.pod-welcome-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 50%;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.pod-welcome-lead {
    max-width: 560px;
    margin: 0 auto;
    color: var(--text-secondary, var(--text-muted));
    font-size: 0.95rem;
    line-height: 1.55;
}

.pod-welcome-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.pod-welcome-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--widget-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.pod-welcome-card h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.pod-welcome-card .pod-hint {
    margin: 0 0 4px;
    font-size: 0.82rem;
}

.pod-welcome-card .pod-form-field {
    width: 100%;
}

/* The invite card no longer needs the divider it had as a trailing section. */
.pod-welcome .pod-accept-invite {
    margin-top: 0;
    padding-top: 22px;
    border-top: none;
}

/* Buttons sized to their labels, not to the card. */
.pod-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.pod-welcome-actions .action-btn {
    flex: 0 0 auto;
    min-width: 132px;
    justify-content: center;
}

/* ==========================================================================
   Game recap — the replay of one game tracked at the table by Upkeep.
   ========================================================================== */

.pod-recap-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pod-recap-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-recap-headline li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 92px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.pod-recap-headline strong {
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--text-primary);
}

.pod-recap-headline span {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.pod-recap-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pod-recap-section h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.pod-recap-empty,
.pod-recap-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.pod-recap-empty {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Life over the game ------------------------------------------------- */

.pod-recap-chart {
    width: 100%;
    height: 200px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.pod-recap-zero {
    stroke: var(--border-color);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.pod-recap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-recap-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.pod-recap-legend-name {
    font-weight: 600;
    color: var(--text-primary);
}

.pod-recap-legend-detail {
    color: var(--text-secondary);
}

.pod-recap-swatch {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 3px;
}

/* --- Who took life off whom --------------------------------------------- */

.pod-recap-matrix-scroll {
    overflow-x: auto;
}

.pod-recap-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.pod-recap-matrix caption {
    margin-bottom: 6px;
    text-align: left;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.pod-recap-matrix th,
.pod-recap-matrix td {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    text-align: center;
    white-space: nowrap;
}

.pod-recap-matrix th[scope="row"] {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    font-weight: 600;
}

.pod-recap-cell {
    color: var(--text-secondary);
}

.pod-recap-cell-hit {
    color: var(--text-primary);
}

.pod-recap-cell-hit strong {
    display: block;
    font-size: 0.95rem;
}

.pod-recap-cell-hit small {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.pod-recap-cell-self {
    background: var(--bg-secondary);
}

.pod-recap-cell-total {
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Land drops ---------------------------------------------------------- */

.pod-recap-lands {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-recap-land-row {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.pod-recap-land-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pod-recap-land-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    min-height: 36px;
}

.pod-recap-land-bar {
    width: 6px;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--accent-color) 70%, transparent);
}

.pod-recap-land-bar-empty {
    height: 2px;
    background: var(--border-color);
}

.pod-recap-land-total {
    min-width: 34px;
    text-align: right;
    font-weight: 700;
    color: var(--text-primary);
}

.pod-recap-land-input {
    width: 62px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: right;
}

.pod-recap-land-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pod-recap-land-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .pod-recap-land-row {
        grid-template-columns: 1fr auto;
    }

    .pod-recap-land-bars {
        grid-column: 1 / -1;
    }
}