/* =============================================================================
   TNT Tooltip  –  v3.0.0
   T1: Bug fixes (removed conflicting min-height that caused squishing).
   T2: Smooth fade-in via opacity + translateY transition.
   T4: Touch/hover suppression via CSS media query.
   T6: Landscape card (.landscape-card) widens the tooltip box; height always auto.
   ============================================================================= */

/* ── Card link styles ─────────────────────────────────────────────────────── */
.tnt-card-link {
    color: #c5a059;
    border-bottom: 1px dotted rgba(197, 160, 89, 0.5);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.tnt-card-link:hover {
    color: #e6c885;
    border-bottom-style: solid;
    border-bottom-color: #e6c885;
}

/* ── Desktop tooltip container ───────────────────────────────────────────── */
.tnt-tooltip-box {
    position: fixed;
    z-index: 9999;
    pointer-events: none;

    /* T2 – Fade + slight upward slide on appear */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;

    background: transparent;
    padding: 0;
    width: 240px;
    /* T6 / T1 – NO min-height. The image dictates the box height naturally.
       A fixed min-height was forcing Battle/Room images into a wrong aspect ratio. */

    display: flex;
    align-items: flex-start;   /* anchor image at top, not centre */
    justify-content: center;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.65));
}

.tnt-tooltip-box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Loading spinner state — temporary fixed height only while waiting for the image */
.tnt-tooltip-box.is-loading {
    background: rgba(0, 0, 0, 0.82);
    border-radius: 12px;
    border: 1px solid #333;
    min-height: 200px;           /* just enough for the spinner to sit comfortably */
    align-items: center;
}

.tnt-tooltip-box.is-loading::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 2px solid #c5a059;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tnt-spin 0.9s linear infinite;
}

/* ── Card image ──────────────────────────────────────────────────────────── */
.tnt-tooltip-img {
    width: 100%;
    height: auto;           /* T6 – always respect the natural aspect ratio */
    border-radius: 11px;    /* matches MTG card corner radius */
    display: block;
    max-width: 100%;
}

/* ── T6: Landscape cards (Battle, special frames wider than tall) ─────────── */
/* Wider tooltip box so the image fills the space without being tiny */
.tnt-tooltip-box.landscape-card {
    width: 340px;
}

/* ── Spin keyframe (shared by desktop and mobile loaders) ────────────────── */
@keyframes tnt-spin {
    to { transform: rotate(360deg); }
}

/* ── Dual-faced card: side-by-side layout ────────────────────────────────── */
.tnt-tooltip-box.is-dfc-wide {
    width: 500px;
    max-width: 90vw;
}

.tnt-dfc-side-by-side {
    display: flex;
    gap: 12px;
    width: 100%;
}

.tnt-dfc-side-by-side .tnt-tooltip-img {
    width: calc(50% - 6px);
    flex-shrink: 0;
}

/* ── Room cards: portrait Scryfall image displayed as landscape in tooltip ──── */
/*
 * Room cards (Duskmourn "Enchantment — Room") use a portrait Scryfall image
 * but are played horizontally in the game.
 *
 * Strategy: a landscape-sized wrapper (340 × 244 px) holds the portrait image
 * (244 × 340 px) absolutely centred. Rotating the image 90° around its centre
 * makes it fill the wrapper visually — 340 px wide × 244 px tall.
 * overflow:hidden clips the tiny corner artefacts from the border-radius.
 *
 * Maths:  portrait CSS size = 244 × 340 px
 *         after rotate(90°) : visually = 340 × 244 px  ✓
 */
.tnt-tooltip-box.room-card {
    width: 344px;   /* 340 + 2px breathing room */
}

.tnt-room-img-wrapper {
    width: 340px;
    height: 244px;
    position: relative;
    overflow: hidden;
    border-radius: 11px;    /* matches MTG card corner radius */
}

.tnt-room-img-wrapper .tnt-tooltip-img {
    position: absolute;
    width: 244px;
    height: 340px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    border-radius: 11px;
    max-width: none;    /* override any global max-width resets */
}

/* ── T4: Completely suppress the tooltip on touch / no-hover devices ─────────
   CSS media queries are more reliable than a pixel-width check.
   (hover: none)    → primary input cannot hover (touchscreen, some styluses).
   (pointer: coarse)→ primary pointer is low-precision (finger on glass).
   Either condition identifies a touch-first device; tooltip is irrelevant there.  */
@media (hover: none), (pointer: coarse) {
    .tnt-tooltip-box { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   MOBILE INSPECTOR MODAL
   (Used by tooltip.js for article inline [[Card Name]] links on touch devices)
   ============================================================================= */

.tnt-mobile-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2147483647;   /* max z-index — must sit above everything */
    display: flex;
    align-items: center;
    justify-content: center;
    /* T2 – Separate opacity + visibility transition avoids the
       "invisible but blocking clicks" problem of animating visibility alone. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
}

.tnt-mobile-modal.active {
    opacity: 1;
    visibility: visible;
}

.tnt-mobile-modal-content {
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    background: #0c0c0c;
    border: 1px solid #c5a059;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(197, 160, 89, 0.2);
    position: relative;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Close button */
.tnt-mobile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Card image area */
.tnt-mobile-images {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120px;
    justify-content: center;
}

.tnt-mobile-images img {
    width: 100%;
    height: auto;           /* T6 – always natural aspect ratio */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: block;
}

/* T6 – Landscape card inside mobile modal (Battle cards, etc.)
   Constrain to a sensible width so it doesn't appear tiny in a phone viewport */
.tnt-mobile-images img.landscape-card {
    width: 88%;
    max-width: 300px;
}

/* ── Room card inside mobile modal: portrait image rotated to landscape ──────
 *
 * Same centred-rotation strategy as the desktop tooltip, adapted for the
 * 360 px max-width mobile modal.
 *
 * Portrait img CSS size : 230 × 320 px
 * After rotate(90°)     : visually 320 × 230 px  →  fills the 320 × 230 container ✓
 */
.tnt-mobile-room-wrapper {
    width: 320px;
    height: 230px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin: 0 auto;         /* centre in the modal */
}

.tnt-mobile-room-wrapper img {
    position: absolute;
    width: 230px;           /* portrait CSS width  → becomes the visual landscape height */
    height: 320px;          /* portrait CSS height → becomes the visual landscape width  */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    max-width: none;
}

/* Loader spinner (inside .tnt-mobile-images while fetching) */
.mobile-loader {
    width: 40px;
    height: 40px;
    border: 3px solid #c5a059;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tnt-spin 0.9s linear infinite;
}

/* ── T5: Multi-button buy stack ──────────────────────────────────────────── */
.tnt-mobile-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Base button style */
.tnt-mobile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 11px 16px;
    border-radius: 6px;
    font-family: 'Beleren', serif;
    text-transform: uppercase;
    transition: transform 0.15s ease, filter 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.tnt-mobile-btn:active { transform: scale(0.97); }
.tnt-mobile-btn:hover  { filter: brightness(1.1); }

.tnt-mobile-btn .btn-title {
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.tnt-mobile-btn .btn-sub {
    font-size: 0.65rem;
    opacity: 0.8;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

/* TCGPlayer — gold gradient */
.tnt-btn-tcg {
    background: linear-gradient(135deg, #c5a059 0%, #b8860b 100%);
    color: #000 !important;
    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);
}

/* ManaPool — blue gradient */
.tnt-btn-mp {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    border-color: rgba(96, 165, 250, 0.4);
}

/* WNYGaming — dark background, gold border */
.tnt-btn-wny {
    background: #111;
    border-color: #c5a059;
    color: #c5a059 !important;
    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.12);
}

.tnt-btn-wny:hover { background: rgba(197, 160, 89, 0.08); }