/* ============================
   FunCards Game Shared UI (global)
   - Shared windows/overlays
   - Shared card UI elements (mana/title/atk/hp + tooltip)
   NOTE:
   - Do NOT set --card-width here (it is a global token).
     Default lives in fc-theme.css, Game page overrides locally.
   ============================ */

/* Additional tokens for card visuals */
:root {
    --fc-card-radius: 0.55rem;
    --fc-card-shadow: 0 6px 16px rgba(0, 0, 0, 0.78);
    --fc-card-border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ============================
   Overlay + window (shared)
   ============================ */
.fc-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-window {
    width: min(92vw, 460px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;

    background: radial-gradient(circle at top left, #2a2335 0, #100c18 45%, #08060c 100%);
    border-radius: var(--fc-radius-lg);
    border: 1px solid var(--fc-border);
    box-shadow: var(--fc-shadow);
    padding: 1rem;
}

.fc-window-lg {
    width: min(94vw, 1100px);
}

.fc-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.fc-window-title {
    margin: 0;
    font-family: var(--fc-font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fdf5d0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.fc-window-body {
    flex: 1 1 auto;
}

/* ============================
   Card grid modal (stacks / pick)
   ============================ */
.fc-card-grid-modal {
    padding: 1rem;
}

.fc-card-note {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--fc-text-dim);
}

.fc-card-grid-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 0.25rem;
    max-height: 70vh;
}

.fc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.fc-card-pick {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--fc-card-radius);
    border: var(--fc-card-border);
    box-shadow: var(--fc-card-shadow);
    background-size: cover;
    background-position: center;
    overflow: visible; /* tooltip */
    cursor: pointer;
}

.fc-card-pick.selected {
    outline: 2px solid rgba(255, 231, 160, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 231, 160, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.8);
}

.fc-card-grid-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ============================
   Card face UI (mana/title/ATK/HP + tooltip)
   Used in FcCardFace AND CardDetailsModal AND DeckEditor tiles
   ============================ */
.fc-card-ui {
    --fc-card-ui-scale: 1;
}

.fc-card-ui-lg {
    --fc-card-ui-scale: 1.45;
}

/* === Mana === */
.fc-card-mana {
    position: absolute;
    top: calc(0.22rem * var(--fc-card-ui-scale));
    left: calc(0.22rem * var(--fc-card-ui-scale));
    width: calc(1.55rem * var(--fc-card-ui-scale));
    height: calc(1.55rem * var(--fc-card-ui-scale));
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
    font-size: calc(0.9rem * var(--fc-card-ui-scale));
    color: #041623;

    background: radial-gradient(circle at 30% 20%, #c9f2ff 0, #6cc7ff 42%, #1f66d1 100%);
    border: 2px solid rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.28);
    z-index: 30;
}

/* === Title === */
.fc-card-titlebar {
    position: absolute;
    top: calc(0.18rem * var(--fc-card-ui-scale));
    left: calc(0.18rem * var(--fc-card-ui-scale));
    right: calc(0.18rem * var(--fc-card-ui-scale));

    padding: calc(0.12rem * var(--fc-card-ui-scale)) calc(0.25rem * var(--fc-card-ui-scale)) calc(0.14rem * var(--fc-card-ui-scale)) calc(2rem * var(--fc-card-ui-scale));

    border-radius: calc(0.45rem * var(--fc-card-ui-scale));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.20));
    z-index: 20;
}

.fc-card-title {
    font-family: var(--fc-font-title);
    font-size: calc(0.72rem * var(--fc-card-ui-scale));
    font-weight: 700;

    text-align: center;
    display: block;

    color: #f5e6c8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Type icon (non-Unit) - moved to LEFT bottom === */
.fc-card-type-icon {
    position: absolute;
    left: calc(0.22rem * var(--fc-card-ui-scale));
    bottom: calc(0.22rem * var(--fc-card-ui-scale));
    right: auto;

    width: calc(1.55rem * var(--fc-card-ui-scale));
    height: calc(1.35rem * var(--fc-card-ui-scale));
    border-radius: calc(0.42rem * var(--fc-card-ui-scale));

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: calc(1.05rem * var(--fc-card-ui-scale));
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    z-index: 30;
}

/* ============================
   ATK/HP corners
   ============================ */
.fc-stat-corner {
    position: absolute;
    bottom: calc(0.22rem * var(--fc-card-ui-scale));
    width: calc(1.9rem * var(--fc-card-ui-scale));
    height: calc(1.55rem * var(--fc-card-ui-scale));

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: calc(0.86rem * var(--fc-card-ui-scale));
    font-weight: 900;

    transition: none;
    filter: none;
    transform: none;
    box-shadow: none;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    z-index: 30;
}

.fc-stat-corner:hover {
    filter: none;
    transform: none;
    box-shadow: none;
}

/* number delta color only */
.fc-stat-neutral {
    color: rgba(255, 255, 255, 0.96);
}

.fc-stat-buff {
    color: rgba(140, 255, 170, 0.98);
}

.fc-stat-nerf {
    color: rgba(255, 130, 130, 0.98);
}

/* --- ATK (triangle) --- */
.fc-stat-attack {
    left: calc(0.22rem * var(--fc-card-ui-scale));
    padding-top: calc(0.08rem * var(--fc-card-ui-scale));
}

.fc-stat-attack::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: rgba(0, 0, 0, 0.75);
    z-index: -2;
}

.fc-stat-attack::after {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: radial-gradient(circle at 35% 25%, #ffd2d2 0, #ff4b4b 45%, #8b0000 100%);
    z-index: -1;
}

/* --- HP (square) --- */
.fc-stat-health {
    right: calc(0.22rem * var(--fc-card-ui-scale));
    border-radius: calc(0.35rem * var(--fc-card-ui-scale));
    background: radial-gradient(circle at 35% 25%, #d9ffe6 0, #3fd37a 45%, #0a6a2a 100%);
    border: 2px solid rgba(0, 0, 0, 0.75);
}

/* ============================
   Tooltip (hover only)
   ============================ */
.fc-tooltip {
    position: absolute;
    bottom: calc(100% + calc(0.35rem * var(--fc-card-ui-scale)));
    width: max-content;
    max-width: min(240px, 72vw);

    padding: calc(0.5rem * var(--fc-card-ui-scale)) calc(0.55rem * var(--fc-card-ui-scale));
    border-radius: calc(0.6rem * var(--fc-card-ui-scale));

    background: rgba(0, 0, 0, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.75);

    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;

    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 9999;
}

.fc-stat-attack .fc-tooltip {
    left: 0;
}

.fc-stat-health .fc-tooltip {
    right: 0;
}

.fc-has-tooltip:hover .fc-tooltip,
.fc-has-tooltip:focus-within .fc-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fc-tooltip-title {
    font-family: var(--fc-font-title);
    font-weight: 800;
    margin-bottom: 0.35rem;
    color: #fdf5d0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.fc-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: calc(0.85rem * var(--fc-card-ui-scale));
    color: rgba(255, 255, 255, 0.88);
}

/* ============================
   Card tile (shared)
   Used in DeckEditor / Details / etc.
   ============================ */

.fc-card-tile {
    position: relative;
    isolation: isolate;
    border-radius: var(--fc-card-radius);
    border: var(--fc-card-border);
    box-shadow: var(--fc-card-shadow);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
}

/* мягкое затемнение для читаемости оверлея */
.fc-card-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.85) 0,
            rgba(0, 0, 0, 0.35) 40%,
            rgba(0, 0, 0, 0.85) 100%
    );
    mix-blend-mode: multiply;
    z-index: -1;
}

.fc-card-tile--disabled {
    opacity: 0.5;
    cursor: default;
}

.fc-card-tile--deckrow {
    height: 3.1rem;
    border-radius: 0.6rem;
}

.fc-card-tile--deckrow .fc-card-mana {
    top: 50%;
    transform: translateY(-50%);
}

.fc-card-tile--details {
    cursor: default;
}

/* badge: service card */
.fc-card-service-badge {
    position: absolute;
    top: 0.28rem;
    right: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    white-space: nowrap;
    color: #ffd2d2;
    border: 1px solid rgba(255, 80, 80, 0.7);
    background: rgba(0, 0, 0, 0.55);
    z-index: 40;
}