/* ==========================================================================
   MTG Card Tooltips (Local) — Stylesheet
   ========================================================================== */

/* ── Card span ─────────────────────────────────────────────────────────────── */
.mtgttl-card {
    position: relative;
    display: inline-block;
    cursor: default;
    border-bottom: 1px dashed currentColor;
    /* Ensures the tooltip sits above surrounding text */
/*     z-index: 1001; */
}

/* ── Tooltip bubble ─────────────────────────────────────────────────────────── */
.mtgttl-tip {
    display: none;
    position: absolute;
    z-index: 9999;

    /* Default: appear above the card name */
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);

    background: #111;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
	
	width: 220px;
}

/* Small arrow pointing down toward the card name */
.mtgttl-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #444;
}

.mtgttl-tip img {
    display: block;
    width: 220px;
    height: auto;
    border-radius: 4.75% / 3.5%;
}

/* Show on hover — CSS-only; JS handles edge-cases (near viewport top) */
.mtgttl-card:hover .mtgttl-tip,
.mtgttl-card:focus-within .mtgttl-tip {
    display: block;
}

/* Flip tooltip below card when JS adds the .mtgttl-flip class */
.mtgttl-card.mtgttl-flip .mtgttl-tip {
    bottom: auto;
    top: calc(100% + 10px);
}
.mtgttl-card.mtgttl-flip .mtgttl-tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #444;
}

/* ── Embedded (inline) card image ──────────────────────────────────────────── */
.mtgttl-embedded {
    border-bottom: none;
    cursor: default;
}

.mtgttl-inline-img {
    display: block;
    max-width: 223px;
    height: auto;
    border-radius: 4.75% / 3.5%;
    margin: 8px auto;
}

/* ── Deck table ─────────────────────────────────────────────────────────────── */
.mtg_deck_title {
    text-decoration: underline;
}

table.mtg_deck {
    width: 100%;
    max-width: 510px;
    margin: 10px;
    text-align: left;
    border-collapse: collapse;
}

table.mtg_deck td {
    vertical-align: top;
    padding: 5px 2px;
}

/* Embedded-style large preview image column */
table.mtg_deck td.card_box img {
    display: block;
    max-height: 310px;
    max-width: 310px;
    border-radius: 4.75% / 3.5%;
}

/* Embedded cards inside deck listings */
table.mtg_deck .mtgttl-embedded .mtgttl-inline-img {
    max-width: 160px;
    margin: 4px 0;
}