/* TNT Grimoire Premium Styles */

:root {
    --tnt-gold:     #c5a059;
    --tnt-gold-dim: rgba(197, 160, 89, 0.3);
    --tnt-dark:     #050505;
    --tnt-card:     #0c0c0c;
}

.tnt-deck-container {
    font-family: 'Merriweather', serif;
    background: var(--tnt-dark);
    border: 1px solid var(--tnt-gold-dim);
    color: #e5e7eb;
    margin: 2rem 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
}

/* Header */
.tnt-deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #0a0a0a;
    border-bottom: 1px solid var(--tnt-gold-dim);
    flex-wrap: wrap;
    gap: 1rem;
}

.tnt-header-left, .tnt-header-right, .tnt-list-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tnt-pill {
    font-family: 'Beleren', sans-serif;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    border: 1px solid var(--tnt-gold-dim);
    color: var(--tnt-gold);
    background: rgba(197, 160, 89, 0.05);
}

.tnt-btn-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--tnt-gold);
    color: var(--tnt-gold);
    padding: 6px 12px;
    font-family: 'Beleren', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.tnt-btn-action:hover { background: var(--tnt-gold); color: #000; }
.tnt-btn-action.btn-secondary { border-color: #666; color: #aaa; }
.tnt-btn-action.btn-secondary:hover { background: #333; color: #fff; }

/* Hero */
.tnt-deck-hero {
    position: relative;
    padding: 3rem 2rem;
    border-bottom: 1px solid var(--tnt-gold-dim);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tnt-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 20%;
    opacity: 0.4;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.tnt-hero-content { position: relative; z-index: 2; }
.tnt-hero-title { margin: 0; line-height: 1.1; text-shadow: 0 4px 10px black; }

.tnt-commander-link {
    font-family: 'Beleren', serif;
    font-size: 2.5rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}
.tnt-commander-link:hover {
    color: var(--tnt-gold);
    text-shadow: 0 0 20px var(--tnt-gold-dim);
    border-bottom-color: var(--tnt-gold);
}

/* Partner commander layout */
.tnt-hero-title--partner .tnt-commander-link { font-size: 1.8rem; }

/*
 * Both partner-col commander links MUST be block + overflow:hidden + nowrap.
 *
 * Why:
 *  - display:block → the element's offsetWidth is constrained to the
 *    column's CONTENT width (not the padded total), giving JS a reliable
 *    measurement target.
 *  - white-space:nowrap → keeps text on one line so scrollWidth reflects
 *    the full text run, not a multi-line wrapped height.
 *  - overflow:hidden → ensures scrollWidth > offsetWidth is a valid
 *    overflow signal even when the element is block-level.
 *
 * Without these, the inline / unconstrained element inflates to fit its own
 * text, so scrollWidth ≤ offsetWidth is always true and JS never fires.
 * CSS text-overflow:ellipsis acts as a visual fallback for no-JS visitors.
 */
.tnt-partner-col .tnt-commander-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.tnt-partner-sep {
    font-family: 'Beleren', serif;
    font-size: 1.4rem;
    color: var(--tnt-gold);
    opacity: 0.7;
    vertical-align: middle;
}

.tnt-hero-label { font-family: 'Beleren', sans-serif; color: var(--tnt-gold); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }
.tnt-hero-sub   { font-style: italic; color: #ccc; font-size: 0.9rem; margin-top: 0.5rem; }

/* ── PARTNER COMMANDER DUAL-PANEL HERO ─────────────────────────────────────── */

/* Contain clipped panels; slightly taller than single-commander hero */
.tnt-deck-hero--partner {
    overflow: hidden;
    min-height: 290px;
}

/*
 * Art panels — use art_crop images (artwork only, no card frame).
 *
 * FRAMING NOTE: commander art_crops have the character in the upper-centre of
 * the frame.  A vertical position of 20–25 % (rather than 50 %) shows the
 * face and shoulders instead of the torso/background, which looks far more
 * striking behind the name text at the bottom.
 *
 * Horizontal positions diverge slightly for each side so that the commander
 * on the left panel leans toward the left-of-centre of their art, and the one
 * on the right leans toward the right — both commanders end up "facing in"
 * toward the divider, a classic editorial split-portrait composition.
 *
 * A subtle scale + fade-in animation on load adds a premium cinematic feel.
 * opacity: 0 is the starting state; the animation fills in to 0.62 final.
 */
@keyframes tnt-panel-reveal {
    from { opacity: 0; transform: scale(1.07); }
    to   { opacity: 0.62; transform: scale(1); }
}

.tnt-hero-panel {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.62;                          /* fallback / prefers-reduced-motion */
    /* Cinematic entrance: fade in while gently zooming to 1×.
       fill-mode: both → holds the "from" state during any animation-delay so there
       is no flash at the base opacity before the animation clock starts.          */
    animation: tnt-panel-reveal 1s ease-out both;
    will-change: transform, opacity;
}

/* Honour OS-level reduced-motion preference: skip the animation entirely */
@media (prefers-reduced-motion: reduce) {
    .tnt-hero-panel {
        animation: none;
        opacity: 0.62;
    }
}

/*
 * WHY THE OLD APPROACH CUT FACES
 * ───────────────────────────────
 * The previous version set both panels to inset:0 (full container width).
 * With background-size:cover on a wide hero (~900–1100 px), the art_crop
 * (626×457) scales to almost exactly the container width.  That means the
 * face — centred at 50 % of the image — lands at ~50 % of the container,
 * right on the diagonal seam.  The 35 %/65 % background-position had no
 * useful effect: when image ≈ container width there is < 1 px of horizontal
 * room to shift.
 *
 * THE FIX: narrow-panel + edge-anchor (mirrors the GD wider-canvas trick)
 * ────────────────────────────────────────────────────────────────────────
 * Each panel is set to width:62 % and anchored to its own edge of the hero.
 * background-size:cover now scales the art_crop to fill a 62 %-wide element,
 * so the face (at 50 % of the image) sits at 50 % of 62 % = 31 % of the
 * container (left panel) or 69 % (right panel) — both well clear of the
 * diagonal zone (42 %–58 %).
 *
 * CLIP-PATH RECALCULATION
 * ───────────────────────
 * The diagonal still runs from x = 42 % (y = 0) to x = 58 % (y = 100 %)
 * of the CONTAINER, same slope/position as before.  The polygon coordinates
 * are just re-expressed in each panel's own coordinate space:
 *
 *   Left panel (width = 62 %, left-anchored):
 *     seam at top    = 42 % container / 62 % panel = 68 %
 *     seam at bottom = 58 % container / 62 % panel = 94 %
 *
 *   Right panel (width = 62 %, right-anchored, starts at container x = 38 %):
 *     seam at top    = (42 % − 38 %) / 62 % =  6 %
 *     seam at bottom = (58 % − 38 %) / 62 % = 32 %
 *
 * The gold .tnt-hero-divider line (left:50 %, rotate 9°) is mathematically
 * unchanged — it still bisects the diagonal at the container centre.
 */
.tnt-hero-panel--left {
    clip-path: polygon(0 0, 68% 0, 94% 100%, 0 100%);
    width: 62%;
    left: 0;
    right: auto;                            /* override inset:0 from base rule */
    background-position: 50% 20%;          /* face centred within its 62%-wide panel */
    animation-delay: 0s;
}

.tnt-hero-panel--right {
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 32% 100%);
    width: 62%;
    right: 0;
    left: auto;                             /* override inset:0 from base rule */
    background-position: 50% 20%;          /* face centred within its 62%-wide panel */
    animation-delay: 0.08s;                /* tiny stagger for visual polish */
}

/* Dark gradient overlay — fades to near-black at the bottom for text legibility */
.tnt-deck-hero--partner .tnt-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08)  0%,
        rgba(0, 0, 0, 0.52) 55%,
        rgba(5, 5, 5, 0.94) 100%
    );
    z-index: 1;
}

/*
 * Gold \ separator line.
 * Centred at left: 50 %, rotated +9 ° to match the clip-path \ slope.
 * Extended ±20 % past the hero edges so it never looks cropped.
 */
.tnt-hero-divider {
    position: absolute;
    left: 50%;
    top: -20%;
    width: 1px;
    height: 140%;
    background: linear-gradient(
        to bottom,
        transparent                  0%,
        rgba(197, 160, 89, 0.35)    20%,
        var(--tnt-gold)             50%,
        rgba(197, 160, 89, 0.35)    80%,
        transparent                 100%
    );
    transform: translateX(-50%) rotate(9deg);   /* \ direction */
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 12px 2px rgba(197, 160, 89, 0.22);
}

/* Hero content sits above overlay (z-index 1) and divider (z-index 2) */
.tnt-deck-hero--partner .tnt-hero-content { z-index: 4; }

/* ── PARTNER HERO CONTENT LAYOUT ────────────────────────────────────────────
 * "PARTNER COMMANDERS" label spans full width.
 * Below it, a flex row splits commander names + type lines to each side.
 * Left col: text left-aligned, padded away from divider.
 * Right col: text right-aligned, padded away from divider.
 * The 12 % padding on each side creates ~24 % of breathing room centred
 * on the divider (which sits at 50 %) — names never touch the line.     */
.tnt-hero-content--partner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tnt-partner-cols {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.75rem;
}

.tnt-partner-col { flex: 1; }

.tnt-partner-col--left {
    padding-right: 4%;   /* reduced from 12% — no divider, so no large buffer needed */
    text-align: left;
}

.tnt-partner-col--right {
    padding-left: 4%;    /* reduced from 12% — gives long names ~46% of hero width */
    text-align: right;
}

/* Right-side type line aligns right (the commander link itself is handled
   by the shared .tnt-partner-col rule above which sets display:block for both). */
.tnt-partner-col--right .tnt-hero-sub { text-align: right; }

/* Body Layout */
.tnt-deck-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.tnt-deck-list-col {
    flex: 1;
    padding: 2rem;
    border-right: 1px solid var(--tnt-gold-dim);
    background: #0c0c0c;
    min-width: 0;
}

.tnt-deck-sidebar {
    width: 320px;
    flex-shrink: 0;
    padding: 2rem;
    background: #080808;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0;
}

.tnt-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.tnt-card-group h4 { color: var(--tnt-gold); font-size: 0.8rem; border-bottom: 1px solid var(--tnt-gold-dim); padding-bottom: 0.5rem; margin-bottom: 1rem; display: flex; justify-content: space-between; text-transform: uppercase; }

.tnt-card-item { display: flex; gap: 0.75rem; font-size: 0.9rem; margin-bottom: 0.2rem; align-items: center; position: relative; }
.tnt-card-qty  { color: #666; width: 1.5rem; text-align: right; font-feature-settings: "tnum"; flex-shrink: 0; }
.tnt-card-name {
    color: #e5e7eb; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; display: block;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.tnt-card-name:hover { color: var(--tnt-gold); border-color: var(--tnt-gold); }

.tnt-dfc-icon {
    display: inline-flex;
    color: var(--tnt-gold);
    opacity: 0.5;
    margin-left: 6px;
    font-size: 0.7em;
}
.tnt-dfc-icon svg { width: 12px; height: 12px; }

/* Sidebar Elements */
.tnt-price-box   { text-align: center; margin-bottom: 0.5rem; }
.tnt-price-label { display: block; font-family: 'Beleren', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: #9ca3af; margin-bottom: 0.25rem; }
.tnt-price-val   { font-family: 'Beleren', serif; font-size: 2.5rem; color: #c5a059; text-shadow: 0 0 20px var(--tnt-gold-dim); }

.tnt-actions { display: flex; flex-direction: column; gap: 1rem; }

/* Button Styles */
.tnt-buy-btn {
    display: flex; flex-direction: column; align-items: center; width: 100%;
    padding: 1rem; text-decoration: none; text-transform: uppercase; font-family: 'Beleren', sans-serif;
    border-radius: 4px;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    position: relative; overflow: hidden;
    backface-visibility: hidden;
}
.tnt-buy-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* Shimmer Animation */
.btn-shimmer::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0)   0%,
        rgba(255,255,255,0.1) 40%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.1) 60%,
        rgba(255,255,255,0)   100%
    );
    transform: skewX(-20deg);
    animation: shimmer 3s infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0%   { left: -100%; }
    40%  { left:  200%; }
    100% { left:  200%; }
}

/* Button Variants */
.btn-gold {
    background: linear-gradient(135deg, #c5a059 0%, #b8860b 100%);
    color: #000 !important; font-weight: bold;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.5);
}
.btn-gold .btn-sub { color: #222 !important; font-weight: normal; }

.btn-manapool {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
    border: 1px solid #60a5fa !important;
}
.btn-manapool .btn-main { color: #ffffff !important; }
.btn-manapool .btn-sub  { color: rgba(255,255,255,0.8) !important; }
.btn-manapool:hover {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    box-shadow: 0 0 15px rgba(59,130,246,0.5) !important;
}

.btn-moxfield {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff !important;
    border: 1px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}
.btn-moxfield .btn-sub { color: rgba(255,255,255,0.8); }

.btn-wny {
    background: #111;
    border: 1px solid var(--tnt-gold);
    color: var(--tnt-gold) !important;
}
.btn-wny:hover { background: rgba(197,160,89,0.1); }
.btn-wny .btn-sub { color: rgba(197,160,89,0.7); }

.btn-main { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.05em; }
.btn-sub  { font-size: 0.65rem; opacity: 1; margin-top: 2px; letter-spacing: 0.1em; }

.tnt-mana-curve { margin-top: auto; padding-top: 1rem; }
.curve-title    { text-align: center; font-family: 'Beleren', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #666; margin-bottom: 1rem; }
.curve-bars     { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding-bottom: 20px; }
.curve-bar-col  { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.curve-bar      { background: var(--tnt-gold); width: 100%; border-top: 1px solid #fff; transition: height 0.5s; opacity: 0.8; }
.curve-label    { position: absolute; bottom: -20px; width: 100%; text-align: center; font-size: 0.6rem; color: #666; }

/* ── IMPROVED MODAL SYSTEM ─────────────────────────────────────────────────── */

.tnt-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: none;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}
.tnt-modal.active {
    display: flex;
    opacity: 1;
}

.tnt-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.85);
}

.tnt-modal-container {
    position: relative; z-index: 10;
    background: #0c0c0c; border: 1px solid var(--tnt-gold);
    max-width: 95vw; width: 1400px;
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
    display: flex; flex-direction: column;
    height: 800px;
    border-radius: 8px;
    overflow: hidden;
}

.tnt-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); background: #111;
}
.tnt-modal-header h3  { margin: 0; color: var(--tnt-gold); font-family: 'Beleren', serif; text-transform: uppercase; font-size: 1.2rem; }
.tnt-modal-close      { background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }
.tnt-modal-close:hover { color: var(--tnt-gold); }

/* Sample Hand Area */
.tnt-sample-area {
    flex: 1; padding: 2rem;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a1a1a 0%, #0c0c0c 100%);
    display: flex; justify-content: center; align-items: center;
    position: relative;
    z-index: 1;
}

.tnt-sample-hand {
    display: flex; justify-content: center;
    perspective: 1000px;
    height: 500px;
    align-items: flex-end;
    width: 100%;
    transform-style: preserve-3d;
}

.tnt-sample-card-wrapper {
    position: relative;
    width: 80px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: auto;
    transition: width 0.3s ease;
}

/* ── TASK 4 FIX: Hover states for the sample hand cards ───────────────────────
   Wrapped in @media (hover: hover) and (pointer: fine) so they ONLY apply on
   devices that have a true hovering pointer (mouse/trackpad).
   Touch screens report (hover: none) and/or (pointer: coarse) so they never
   enter this block — no sticky hover state can occur on mobile.               */
@media (hover: hover) and (pointer: fine) {
    .tnt-sample-card-wrapper:hover {
        width: 260px;
        z-index: 100 !important;
    }

    /* Room cards need a wider hover zone — the landscape card is ~335px wide when rotated */
    .tnt-sample-card-wrapper.has-room-card:hover {
        width: 360px;
    }

    /* Standard portrait cards: lift and straighten */
    .tnt-sample-card-wrapper:hover .sample-card-img:not(.room-card) {
        transform: translateY(-120px) scale(1.1) rotate(0deg) !important;
        box-shadow: 0 40px 80px rgba(0,0,0,0.9);
        z-index: 200;
    }

    /*
     * Room cards: lift to landscape orientation on hover.
     *
     * CRITICAL FIX: The base .sample-card-img style has transform-origin: center 120%
     * (places the origin ~200px below the card bottom, creating the fan spread effect).
     * For room cards we MUST override this to center center — otherwise rotate(90deg)
     * orbits around that far-below point and the card flies completely off-screen.
     */
    .tnt-sample-card-wrapper:hover .sample-card-img.room-card {
        transform-origin: center center !important;
        transform: translateY(-80px) scale(1.05) rotate(90deg) !important;
        box-shadow: 0 40px 80px rgba(0,0,0,0.9);
        z-index: 200;
    }
}

.sample-card-img {
    width: 240px;
    max-width: none !important;
    height: auto;
    border-radius: 10px;
    box-shadow: -10px 10px 25px rgba(0,0,0,0.7);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
    transform-origin: center 120%;
    cursor: pointer; opacity: 0;
    will-change: transform;
    backface-visibility: hidden;
    position: absolute;
    bottom: 20px;
}
.sample-card-img.dealt { opacity: 1; }

.tnt-modal-footer {
    padding: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
    background: #111; display: flex; justify-content: center; gap: 1rem;
    z-index: 20; position: relative;
}

/* ── Sample-hand loader label ──────────────────────────────────────────────── */
.tnt-hand-loader {
    color: #fff;
    font-family: 'Beleren', serif;
    font-size: 1.5rem;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ── Placeholder tile for cards Scryfall could not resolve ─────────────────── */
.sample-card-placeholder {
    background: #141414;
    border: 1px solid rgba(197, 160, 89, 0.25);
    width: 240px;
    height: 336px;                /* standard card aspect ratio ≈ 63 × 88 mm */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-family: 'Beleren', serif;
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: -10px 10px 25px rgba(0,0,0,0.7);
    cursor: default;
}

/* ── NEW MOBILE CARD MODAL STYLES ─────────────────────────────────────────── */

.tnt-card-view-modal .tnt-modal-content {
    width: 100%; max-width: 400px;
    background: transparent;
    border: none;
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 20px;
    pointer-events: none;
}

.tnt-mobile-close {
    position: absolute; top: -40px; right: 0;
    color: #fff; font-size: 2rem;
    background: none; border: none; cursor: pointer;
    pointer-events: auto;
    text-shadow: 0 2px 10px #000;
    z-index: 50;
}

.tnt-mobile-card-display {
    width: 100%;
    perspective: 1000px;
    margin-bottom: 1.5rem;
    pointer-events: auto;
    display: flex; justify-content: center;
}

.tnt-mobile-card-img {
    width: 100%; border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    display: block;
    height: auto; /* T6 – always respect natural aspect ratio */
}

/* T6 – Landscape cards (Battle cards are wider than tall).
   Constrain the width so the card doesn't appear tiny on narrow phone screens. */
.tnt-mobile-card-img.landscape-card {
    width: 88%;
    max-width: 300px;
    margin: 0 auto;
}

/* Dual Faced Card Flip Logic */
.tnt-flip-container {
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    cursor: pointer;
}
.tnt-flip-container::after {
    content: ""; display: block; padding-bottom: 139%;
}
.tnt-flip-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.tnt-flip-front { z-index: 2; transform: rotateY(0deg); }
.tnt-flip-back  { transform: rotateY(180deg); }
.tnt-flip-container.flipped { transform: rotateY(180deg); }

.tnt-tap-hint {
    margin-top: 10px;
    color: var(--tnt-gold);
    font-family: 'Beleren', sans-serif;
    font-size: 0.8rem; letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
    animation: pulse 2s infinite;
    pointer-events: auto;
}

.tnt-mobile-actions {
    width: 100%;
    pointer-events: auto;
    animation: slideUp 0.4s ease-out;
    /* T5 – Stack buttons vertically with breathing room between each */
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* ── Base buy button (TCGPlayer gold) ── */
.tnt-mobile-buy-btn {
    background: linear-gradient(135deg, #c5a059 0%, #d4af37 100%);
    color: #000;
    text-decoration: none;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-family: 'Beleren', sans-serif; font-weight: bold; text-transform: uppercase;
    box-shadow: 0 5px 20px rgba(197, 160, 89, 0.4);
    transition: transform 0.2s, filter 0.2s;
    border: 1px solid transparent;
    box-sizing: border-box;
}
.tnt-mobile-buy-btn:active { transform: scale(0.96); }
.tnt-mobile-buy-btn:hover  { filter: brightness(1.08); }

/* T5 – ManaPool button variant (blue) */
.tnt-mobile-buy-btn.btn-manapool {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: #fff !important;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3);
    border-color: rgba(96, 165, 250, 0.4);
}

/* T5 – WNYGaming button variant (dark, gold outline) */
.tnt-mobile-buy-btn.btn-wny {
    background: #111;
    border-color: #c5a059;
    color: #c5a059 !important;
    box-shadow: 0 5px 20px rgba(197, 160, 89, 0.12);
}
.tnt-mobile-buy-btn.btn-wny:hover { background: rgba(197, 160, 89, 0.08); }

@keyframes pulse   { 0%    { opacity: 0.5; } 50% { opacity: 1; }   100% { opacity: 0.5; } }
@keyframes slideUp { from  { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── MOBILE SPECIFIC FIXES ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tnt-deck-container { margin: 0; border: none; }

    .tnt-deck-header { padding: 1rem; gap: 0.5rem; justify-content: center; }
    .tnt-header-left { width: 100%; justify-content: center; }

    .tnt-deck-body { flex-direction: column; }

    .tnt-deck-list-col {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--tnt-gold-dim);
    }

    .tnt-deck-sidebar {
        width: 100%;
        position: static;
        padding: 2rem 1rem;
        border-top: 1px solid var(--tnt-gold-dim);
    }

    /* Modal Adjustments */
    .tnt-modal-container { width: 100%; height: 100%; border: none; border-radius: 0; }

    /* Sample hand: grid layout on mobile instead of fan */
    .tnt-sample-hand {
        flex-wrap: wrap;
        height: auto;
        align-items: center;
        perspective: none;
        margin-top: 2rem;
    }
    .tnt-sample-card-wrapper {
        width: 45%;
        height: auto;
        margin-bottom: 1rem;
    }
    /* Reset card to static positioning inside the grid */
    .sample-card-img {
        position: relative;
        width: 100%;
        max-width: 100% !important;
        transform: none !important;
        opacity: 1;
        bottom: auto;
    }

    /* Room cards: keep landscape rotation even in the mobile grid */
    .sample-card-img.room-card {
        transform: rotate(90deg) !important;
        width: 70% !important;  /* slightly narrower so the rotated card fits the grid cell */
        margin: 15% auto;       /* vertical margin compensates for the rotated dimensions  */
    }

    /* NOTE: No .sample-card-img:hover rule here.
       Touch devices satisfy (hover: none) so the @media (hover: hover) block
       above never fires — there is nothing to override. Removing the old
       scale(1.05) hover rule here prevents it from sticking on touch. */

    .tnt-sample-area { align-items: flex-start; overflow-y: auto; padding: 1rem; }
}