/* =========================================================
   game-show.pc.css
   - 桌面端（Desktop First）完整样式
   - 含：基础变量/布局/卡片/右侧账单/详情/弹窗/主题色补丁
   - 不包含任何 <=960 的移动端覆盖
========================================================= */

:root{
    --fm-bg: #f5f7fb;
    --fm-card: #ffffff;
    --fm-text: #0f172a;
    --fm-muted:#64748b;
    --fm-line: rgba(15,23,42,.10);
    --fm-shadow: 0 14px 36px rgba(15,23,42,.06);

    --fm-orange: #ff5a1f;
    --fm-blue: #3b82f6;

    --fm-step-num: 28px;
    --fm-step-gap: 12px;

    --fm-detail-bg: #0b1220;
    --fm-detail-bottom: #f3f4f6;

    --fm-stat-hot: #f97316;
    --fm-stat-like:#ef4444;
    --fm-stat-star:#f59e0b;

    /* THEME: 深蓝夜光（主交互/按钮/选中态） */
    --fm-primary:   #1e3a8a;
    --fm-primary-2: #2563eb;
    --fm-primary-3: #60a5fa;

    /* 橙色仅用于价格/优惠语义 */
    --fm-price: #ff5a1f;
}

.fm-page{ background: var(--fm-detail-bottom); min-height:100vh; }
.fm-container{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}

/* =========================
   STAGE (PC)
========================= */
.fm-stage{
    position: relative;
    isolation: isolate;
    padding: 18px 0 26px;
}

.fm-stage::before{
    content:"";
    position:absolute;
    inset: -40px 0 auto 0;
    height: 620px;
    z-index: -2;
    pointer-events:none;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--fm-detail-bg) 92%, transparent) 0%,
        color-mix(in srgb, var(--fm-detail-bg) 70%, #ffffff 30%) 35%,
        color-mix(in srgb, var(--fm-detail-bg) 25%, var(--fm-detail-bottom) 75%) 65%,
        var(--fm-detail-bottom) 100%
    );
    transition: background 600ms ease-out;
}


.fm-stage-shell{
    background: #fff;
    border-radius: 22px;
    padding: 14px;
    box-shadow: var(--fm-shadow);
    border: 1px solid rgba(15,23,42,.06);
}

.fm-stage-grid{
    display:grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 16px;
    align-items:start;
}

.fm-left{ min-width: 0; }
.fm-right{ min-width: 0; }

.scene-pane{ display:none; }
.scene-pane.is-active{ display:block; }

/* 卡片通用 */
.fm-card{
    background: var(--fm-card);
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 10px 26px rgba(15,23,42,.05);
    overflow:hidden;
}

/* =========================
   GAME CARD
========================= */
.fm-card-game{ padding: 16px; }

.fm-game-grid{
    display:grid;
    grid-template-columns: 170px minmax(0,1fr);
    align-items:start;
    column-gap: 18px;
    gap: 18px;
}

.fm-cover{
    width: 170px;
    height: 170px;
    border-radius: 18px;
    overflow:hidden;
    background: #eef2ff;
    border: 1px solid rgba(15,23,42,.08);
}
.fm-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.fm-game-info{ min-width:0; }

.fm-toprow{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 10px;
}

.fm-breadcrumb{ font-size: 12px; color: var(--fm-muted); }
.fm-breadcrumb a{ color: inherit; text-decoration:none; }

.fm-title{
    margin: 8px 0 6px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--fm-text);
    letter-spacing: .2px;
    word-break: break-word;
}

/* 官方保障 chip */
.fm-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 4px; }
.fm-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.25);
    color: #065f46;
    cursor: pointer;
}
.fm-chip:active{ transform: scale(.98); }
.fm-chip .material-icons{ font-size: 16px; }

/* 收藏按钮 */
.fm-fav-btn{
    border:0;
    cursor:pointer;
    background: transparent;
    color: #94a3b8;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: transform .12s ease, color .15s ease;
}
.fm-fav-btn:hover{ transform: translateY(-1px); color: var(--fm-orange); }
.fm-fav-mini{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.08);
    background: #fff;
    box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.fm-fav-mini .material-icons{ font-size: 20px; }
.fm-fav-btn.is-active{
    color: var(--fm-orange);
    border-color: rgba(255,90,31,.35);
    background: rgba(255,90,31,.06);
}

/* stats */
.fm-stats{
    margin-top: 10px;
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
}
.fm-stat{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.06);
    font-size: 12px;
    color: var(--fm-muted);
}
.fm-stat .material-icons{ font-size: 16px; color: #94a3b8; }
.fm-stat .k{ font-weight: 600; color: #475569; }
.fm-stat .v{ font-weight: 700; color: var(--fm-text); }

.fm-stats .fm-stat:nth-child(1) .material-icons{ color: var(--fm-stat-hot); }
.fm-stats .fm-stat:nth-child(2) .material-icons{ color: var(--fm-stat-like); }
.fm-stats .fm-stat:nth-child(3) .material-icons{ color: var(--fm-stat-star); }

/* desc clamp */
.fm-hero-desc-wrap{
    margin-top: 10px;
    position: relative;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    padding: 12px 12px 26px;
    overflow:hidden;
}
.fm-hero-desc{
    color: #334155;
    font-size: 13px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.fm-hero-desc-wrap::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 42px;
    background: linear-gradient(to bottom, rgba(248,250,252,0), rgba(248,250,252,1));
    pointer-events:none;
}
.fm-hero-desc-wrap.is-expanded .fm-hero-desc{
    -webkit-line-clamp: unset;
    overflow: visible;
}
.fm-hero-desc-wrap.is-expanded::after{ display:none; }

/* 中间小箭头按钮 */
.fm-desc-toggle{
    position:absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 44px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    box-shadow: 0 10px 20px rgba(15,23,42,.08);
    cursor:pointer;
    padding:0;
    font-size: 0;
}
.fm-desc-toggle::before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid rgba(15,23,42,.55);
    transform: translateY(2px);
}
.fm-hero-desc-wrap.is-expanded .fm-desc-toggle::before{
    border-top: 0;
    border-bottom: 7px solid rgba(15,23,42,.55);
    transform: translateY(-1px);
}

/* =========================
   Step 标题对齐（统一）
========================= */
.fm-step-title{
    display: grid;
    grid-template-columns: var(--fm-step-num) minmax(0, 1fr);
    column-gap: var(--fm-step-gap);
    align-items: center;
    margin: 0;
}
.fm-step-title .step-no{
    width: var(--fm-step-num);
    height: var(--fm-step-num);
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    background: rgba(37,99,235,.12);
    color: var(--fm-primary);
    flex: 0 0 auto;
}
.fm-step-title .step-text{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fm-text);
    margin: 0;
}


/* Step1 bar */
.fm-game-stepbar{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15,23,42,.08);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: start;
}

/* 场景 tabs */
.fm-seg{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 10px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.06);
}
.fm-seg-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fm-seg-scroll::-webkit-scrollbar{ display:none; }

.fm-seg-btn{
    flex: 0 0 auto;
    border: 1px solid rgba(15,23,42,.10);
    background:#fff;
    cursor:pointer;
    padding: 8px 12px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    color:#475569;
    font-size: 12px;
    font-weight: 600;
    white-space:nowrap;
    line-height: 1 !important;
    transition: transform .12s ease, border-color .18s ease, background .18s ease;
}
.fm-seg-btn:hover{ transform: translateY(-1px); border-color: rgba(15,23,42,.18); }

.fm-seg-btn.is-active{
    background: #0f172a;
    color:#fff;
    border-color:#0f172a;
}


/* =========================
   LEVELS / SKU (PC 默认)
========================= */
.fm-card-stephead{ padding: 16px 16px 0 !important; }
.fm-card-levels .fm-card-stephead{ padding-bottom: 8px !important; }

.fm-sku-grid{
    padding: 0 16px 16px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.fm-sku-item input{ display:none; }

.fm-sku-card{
    display:grid;
    grid-template-columns: 56px minmax(0,1fr) auto;
    gap: 12px;
    align-items:center;
    padding: 10px 15px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.10);
    cursor:pointer;
    transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.fm-sku-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15,23,42,.08);
    border-color: rgba(15,23,42,.18);
}
.fm-sku-item input:checked + .fm-sku-card{
    border-color: rgba(37,99,235,.42);
    background: rgba(37,99,235,.06);
    box-shadow: 0 14px 28px rgba(37,99,235,.14);
}

.sku-icon{
    width:56px; height:56px;
    border-radius: 16px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(15,23,42,.10);
    cursor: zoom-in;
}
.sku-icon img{ width:100%; height:100%; object-fit:cover; display:block; }

.sku-name{ font-size: 13px; font-weight: 700; color: var(--fm-text); line-height: 1.25; }
.sku-right{ text-align:right; padding-top: 7px;}
.sku-old{ font-size: 12px; color:#94a3b8; text-decoration: line-through; }
.sku-price{ margin-top: 4px; font-size: 18px; font-weight: 700; color: var(--fm-price); }

.sku-save{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 10px;
    line-height: 1;
    white-space: nowrap;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.18);
    color: #1d4ed8;
}

.fm-empty{ padding: 16px; color: var(--fm-muted); font-size: 13px; }

/* =========================
   BILL (RIGHT)
========================= */
.fm-sticky{
    position: sticky;
    top: 14px;
    display:flex;
    flex-direction: column;
    gap: 14px;
}

.fm-card-bill{ padding: 16px; }
.fm-bill-title{
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
    margin-bottom: 12px;
}
.fm-bill-row{
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding: 10px 0;
    border-top: 1px solid rgba(15,23,42,.06);
    font-size: 13px;
}
.fm-bill-row .k{ color:#475569; font-weight: 600; }
.fm-bill-row .v{ color: var(--fm-text); font-weight: 700; }

.fm-bill-breakdown{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(15,23,42,.12);
}
.bd-row{
    display:flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color:#475569;
}
.fm-bill-total{
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(15,23,42,.08);
    display:flex;
    justify-content: space-between;
    align-items: baseline;
}
.fm-bill-total .k{ font-size: 13px; font-weight: 700; color: var(--fm-text); }
.fm-bill-total .v{ font-size: 22px; font-weight: 700; color: var(--fm-price); }

.fm-bill-actions{ margin-top: 14px; display:flex; flex-direction: column; gap: 10px; }

.fm-btn{
    border:0;
    cursor:pointer;
    width:100%;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    line-height: 1;
    transition: transform .12s ease, filter .15s ease;
    box-sizing: border-box;
}
.fm-btn .material-icons{ font-size: 18px; }

.fm-btn-primary{
    color:#fff;
    border: 1px solid rgba(37,99,235,.18);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 52%),
        linear-gradient(135deg, var(--fm-primary) 0%, var(--fm-primary-2) 55%, #2b7cff 100%);
    box-shadow:
        0 16px 30px rgba(15,23,42,.12),
        0 12px 26px rgba(37,99,235,.18);
}

.fm-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.02); }

.fm-pay-foot{
    margin-top: 10px;
    font-size: 12px;
    color: var(--fm-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 6px;
}
.fm-pay-foot .material-icons{ font-size: 16px; }

.fm-bill-row-link .fm-bill-link{
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(37,99,235,.92);
    padding: 6px 8px;
    border-radius: 10px;
}
.fm-bill-row-link .fm-bill-link:hover{ background: rgba(37,99,235,.06); }
.fm-bill-row-link .fm-bill-link .material-icons{ font-size: 18px; opacity: .7; }

/* =========================
   DETAILS
========================= */
.fm-details-grid{
    display:grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 16px;
    align-items:start;
}
.fm-details-grid--single{
    grid-template-columns: minmax(0,1fr) !important;
}

.fm-detail-card{ padding-bottom: 10px; }
.fm-detail-head{
    padding: 16px;
    border-bottom: 1px solid rgba(15,23,42,.06);
}
.fm-detail-title{
    font-size: 15px;
    font-weight: 700;
    color: var(--fm-text);
    margin-bottom: 10px;
}
.fm-tabs-nav{ display:flex; gap: 8px; flex-wrap:wrap; }
.tabs-nav-item{
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor:pointer;
}

.tabs-panels{ padding: 12px 16px 6px; color:#334155; font-size: 13px; line-height: 1.8; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.tab-panel h3{ font-size: 15px; font-weight: 700; margin: 6px 0 10px; color: var(--fm-text); }

.tab-html{ font-size: 14px; line-height: 1.85; color:#334155; }
.tab-html p{ margin: 0 0 .9em; }
.tab-html ul, .tab-html ol{ padding-left: 1.2em; margin: .2em 0 .9em; }

/* =========================
   CART MODAL
========================= */
.fm-cart-modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 80;
}
.fm-cart-modal.is-active{ display:flex; }
.fm-cart-modal-backdrop{
    position:absolute; inset:0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(6px);
}
.fm-cart-modal-dialog{
    position:relative; z-index:1;
    width: min(420px, 100vw - 48px);
    background:#0f172a;
    border-radius: 20px;
    padding: 24px 24px 20px;
    box-shadow: 0 18px 40px rgba(15,23,42,.45);
    color:#e5e7eb;
}
.fm-cart-modal-icon{
    width:44px; height:44px;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    color:#022c22;
    margin-bottom: 12px;
}
.fm-cart-modal-icon .material-icons{ font-size: 26px; }
.fm-cart-modal-title{ font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.fm-cart-modal-subtitle{ font-size: 13px; line-height: 1.6; color:#9ca3af; margin-bottom: 18px; }
.fm-cart-modal-actions{ display:flex; justify-content:flex-end; gap: 10px; }

.fm-btn-outline{
    background: transparent;
    border: 1px solid rgba(148,163,184,.6);
    color:#e5e7eb;
}
.fm-btn-outline:hover{ background: rgba(255,255,255,.06); border-color:#e5e7eb; }

/* =========================
   Coupon Modal
========================= */
.fm-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.fm-modal.is-open{
    opacity: 1;
    pointer-events: auto;
}
.fm-modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}
.fm-modal-dialog{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 28px));
    max-height: min(78vh, 720px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    overflow: hidden;
}
.fm-modal-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(37,99,235,.14);
}
.fm-modal-title{ font-size: 15px; font-weight: 600; }
.fm-modal-x{
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fm-modal-x:hover{ background: rgba(37,99,235,.08); }
.fm-modal-body{
    padding: 12px 14px 14px;
    overflow: auto;
}
.fm-modal-foot{ padding-top: 10px; }
.fm-modal-note{ font-size: 12px; color: rgba(17,24,39,.62); }

.fm-coupon-tools{ display: flex; justify-content: flex-end; margin-bottom: 10px; }
.fm-coupon-clear{
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.fm-coupon-clear:hover{
    border-color: rgba(37,99,235,.28);
    background: rgba(37,99,235,.04);
}

.fm-coupon-list{ display: grid; gap: 10px; }
.fm-coupon-item{
    width: 100%;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    border-radius: 16px;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}
.fm-coupon-item:hover{
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 10px 24px rgba(37,99,235,.10);
}
.fm-coupon-item.is-active{
    border-color: rgba(37,99,235,.70);
    background: rgba(37,99,235,.06);
    box-shadow: 0 12px 26px rgba(37,99,235,.14);
}
.fm-coupon-code{ font-size: 13px; font-weight: 700; color: #111827; }
.fm-coupon-sub{
    margin-top: 4px;
    font-size: 12px;
    color: rgba(17,24,39,.65);
    display: flex;
    align-items: center;
    gap: 6px;
}
.fm-coupon-sub b{ color: var(--fm-price); font-weight: 700; }
.fm-coupon-sub .dot{ opacity: .55; }
.fm-coupon-right .material-icons{ font-size: 20px; color: rgba(17,24,39,.45); }
.fm-coupon-item.is-active .fm-coupon-right .material-icons{ color: var(--fm-primary-2); }

/* =========================
   Trust Modal
========================= */
.fm-trust-dialog{
    width: min(640px, calc(100vw - 28px));
    max-height: min(78vh, 560px);
    border-radius: 16px;
    overflow: hidden;
}
.fm-trust-head{
    position: relative;
    overflow: hidden;
    padding: 16px 16px 14px;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #22c55e);
}
.fm-trust-brand{
    font-weight: 700;
    letter-spacing: .4px;
    font-size: 12px;
    opacity: .92;
    position: relative;
    z-index: 2;
}
.fm-trust-title{
    margin-top: 6px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    max-width: 460px;
    position: relative;
    z-index: 2;
}
.fm-trust-x{
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    z-index: 5;
    pointer-events: auto;
}
.fm-trust-x:hover{ background: rgba(255,255,255,.14); }
.fm-trust-x *{ pointer-events: none; }

.fm-trust-shield{
    position: absolute;
    right: 12px;
    top: 10px;
    width: 104px;
    height: 104px;
    border-radius: 18px;
    opacity: 1;
    pointer-events: none;
    filter: saturate(1.25) contrast(1.08);
    box-shadow: 0 18px 44px rgba(15,23,42,.28);
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(0,0,0,.12), transparent 55%);
}
.fm-trust-shield::before{
    content:"";
    position:absolute;
    inset: 16px;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.28);
    border-radius: 18px;
    clip-path: polygon(50% 0%, 92% 18%, 92% 60%, 50% 100%, 8% 60%, 8% 18%);
    opacity: .95;
}
.fm-trust-shield::after{
    content:"";
    position:absolute;
    left: 50%;
    top: 52%;
    width: 38px;
    height: 20px;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-left: 5px solid rgba(255,255,255,.98);
    border-bottom: 5px solid rgba(255,255,255,.98);
    border-radius: 2px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

.fm-trust-body{
    padding: 14px 14px 16px;
    overflow: auto;
    border-top: 1px solid rgba(15,23,42,.06);
    background: #fff;
}

.fm-trust-item{
    display: flex;
    gap: 10px;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.fm-trust-item:last-child{ border-bottom: 0; }

.fm-trust-item .ok{
    color: #22c55e;
    font-size: 20px;
    margin-top: 1px;
}
.fm-trust-item .h{
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}
.fm-trust-item .p{
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
    margin-top: 3px;
}

/* =========================
   Image preview overlay
========================= */
.fm-img-preview{
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.fm-img-preview__img{
    max-width: min(92vw, 520px);
    max-height: 82vh;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.fm-img-preview__x{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fm-img-preview__x .material-icons{ font-size: 22px; }

/* =========================
   Responsive default switches (Desktop truth)
========================= */

/* 默认：PC 不显示 mobile summary / mobile trust */
.fm-mobile-lines{ display:none; }
#fm_trust_open_m{ display:none; }

/* 防止“官方保障”PC 重复显示（如果你 HTML 有 mobile 版 chip） */
.fm-meta--desktop{ display:flex !important; }

/* PC: show bill, hide buybar */
.fm-only-mobile{ display: none !important; }
.fm-only-desktop{ display: block !important; }
.fm-buybar{ display:none; }

/* PC：只保留右侧信息区里的 stats，隐藏其它位置残留 */
@media (min-width: 961px){
    .fm-game-grid > :not(.fm-game-info) .fm-stats{
        display:none !important;
    }
}

/* 桌面微调：info 左侧留白 + 标题行靠近 topbar */
@media (min-width: 1025px){
    .fm-page-game-show .fm-card-game .fm-game-info{
        padding-left: 18px;
        box-sizing: border-box;
    }
    .fm-page-game-show .fm-card-game .fm-game-grid{
        column-gap: 18px;
        gap: 18px;
    }
    .fm-page-game-show .fm-card-game .fm-title-row{
        margin-top: 6px !important;
    }
    .fm-page-game-show .fm-card-game .fm-toprow{
        margin-bottom: 6px;
    }
}














/* assets/test/css/game-reviews.pc.css
   Trustpilot-like reviews block (desktop/base)
   - 不包含任何 <=980 / <=420 的移动端覆盖
*/

.fm-reviews--tp{
    --rv-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    --rv-bg: #f6f7fb;
    --rv-card: #ffffff;
    --rv-border: #e6eaf2;
    --rv-text: #0f172a;
    --rv-muted: #64748b;
    --rv-soft: #f8fafc;
    --rv-line: #eef2f7;
    --rv-shadow: 0 10px 30px rgba(15,23,42,.06);
    --rv-radius: 22px;
    --rv-star: #f5c542;
    --rv-bar: #4b5563;
    --rv-bar-bg: #e5e7eb;
    font-family: var(--rv-font);
    color: var(--rv-text);
}

#fm_reviews.fm-reviews--tp .fm-container{
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}

.fm-reviews--tp .fm-tp-card{
    background: var(--rv-card);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    box-shadow: var(--rv-shadow);
    padding: 22px 22px 18px;
}

/* ===== top ===== */
.fm-reviews--tp .fm-tp-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.fm-reviews--tp .fm-tp-top .left{ min-width: 0; }

.fm-reviews--tp .fm-tp-top .ttl{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.15;
}

.fm-reviews--tp .fm-tp-top .sub{
    margin-top: 5px;
    font-size: 12px;
    color: var(--rv-muted);
    line-height: 1.35;
}

.fm-reviews--tp .fm-tp-top .meta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rv-muted);
    font-size: 13px;
    white-space: nowrap;
}

.fm-reviews--tp .fm-tp-top .count{
    color: var(--rv-text);
    font-weight: 600;
}

.fm-reviews--tp .fm-tp-top .dot{ opacity: .7; }

/* ===== layout ===== */
.fm-reviews--tp .fm-tp-grid{
    margin-top: 16px;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 22px;
}

.fm-reviews--tp .fm-tp-left{
    padding-right: 18px;
    border-right: 1px solid var(--rv-line);
}

/* avg box */
.fm-reviews--tp .fm-tp-avgbox{
    background: var(--rv-soft);
    border: 1px solid var(--rv-line);
    border-radius: 16px;
    padding: 16px;
}

.fm-reviews--tp .avgrow{
    display: flex;
    align-items: center;
    gap: 14px;
}

.fm-reviews--tp .avgnum{
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--rv-text);
}

.fm-reviews--tp .avgmeta{ min-width: 0; }

.fm-reviews--tp .stars{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.fm-reviews--tp .stars .material-icons{
    font-size: 20px;
    color: var(--rv-star);
}

.fm-reviews--tp .avgmeta .sub{
    margin-top: 4px;
    font-size: 12px;
    color: var(--rv-muted);
}

.fm-reviews--tp .avgmeta .sub .k{ font-weight: 600; }
.fm-reviews--tp .avgmeta .sub .c{ margin-left: 6px; }

/* ===== dist ===== */
.fm-reviews--tp .fm-tp-dist{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fm-reviews--tp .fm-tp-dist-row{
    position: relative;
    display: grid;
    grid-template-columns: 18px max-content 1fr 56px;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, opacity .15s ease;
}

.fm-reviews--tp .fm-tp-dist-row:hover{ background: #f1f5f9; }
.fm-reviews--tp .fm-tp-dist-row.is-active{ background: #eef2f7; }
.fm-reviews--tp .fm-tp-dist-row.is-zero{ opacity: .45; }

/* input 不用 display:none（可访问性更好） */
.fm-reviews--tp .fm-tp-radio{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.fm-reviews--tp .fm-tp-dist-row .box{
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.6px solid #cbd5e1;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* ✅新增 */
    position: relative;
    overflow: hidden;
}

.fm-reviews--tp .fm-tp-dist-row.is-active .box{
    border-color: #0f172a;
    background: #0f172a;
}

.fm-reviews--tp .fm-tp-dist-row.is-active .box::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -55%) rotate(-45deg);
}

.fm-reviews--tp .fm-tp-dist-row .label{
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-reviews--tp .fm-tp-dist-row.is-all .label{
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.fm-reviews--tp .fm-tp-dist-row .bar{
    height: 10px;
    background: var(--rv-bar-bg);
    border-radius: 999px;
    overflow: hidden;
}

.fm-reviews--tp .fm-tp-dist-row .bar i{
    display: block;
    height: 100%;
    background: var(--rv-bar);
    border-radius: 999px;
}

.fm-reviews--tp .fm-tp-dist-row .pct{
    text-align: right;
    font-weight: 600;
    color: var(--rv-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== right list ===== */
.fm-reviews--tp .fm-tp-right{ padding-left: 0; }

.fm-reviews--tp .fm-tp-empty{
    padding: 16px 0;
    color: var(--rv-muted);
}

.fm-reviews--tp .fm-tp-list{
    display: flex;
    flex-direction: column;
}

.fm-reviews--tp .fm-tp-item{
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rv-line);
}

.fm-reviews--tp .fm-tp-item:last-child{ border-bottom: 0; }

.fm-reviews--tp .avatar{
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    letter-spacing: .2px;

    /* 高级一点：渐变 + 轻微高光 */
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,0) 48%),
        linear-gradient(135deg, #0b1220 0%, #1e3a8a 48%, #60a5fa 100%);
    color:#ffffff;

    /* 轻微质感（很克制） */
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 18px rgba(15,23,42,.10);
}

.fm-reviews--tp .body{ min-width: 0; }

.fm-reviews--tp .row1{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.fm-reviews--tp .name{
    font-size: 13px;
    font-weight: 500;
    color: #0b1220;
}

.fm-reviews--tp .date{
    color: var(--rv-muted);
    font-size: 13px;
    white-space: nowrap;
}

.fm-reviews--tp .row2{ margin-top: 4px; }

.fm-reviews--tp .stars-mini{
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.fm-reviews--tp .stars-mini .material-icons{
    font-size: 18px;
    color: var(--rv-star);
}

.fm-reviews--tp .content{
    margin-top: 4px;
    color: #334155;
    line-height: 1.65;
    font-size: 14px;
    word-break: break-word;
}

/* ✅ 点赞靠右 */
.fm-reviews--tp .actions{
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.fm-reviews--tp .like-btn{
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: transform .08s ease, border-color .15s ease, color .15s ease,
    background .15s ease, box-shadow .15s ease;
}

.fm-reviews--tp .like-btn:active{ transform: scale(.98); }

.fm-reviews--tp .like-btn .material-icons{
    font-size: 15px;
    opacity: .9;
}

.fm-reviews--tp .like-btn .cnt{
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

/* ✅ 克制版：深蓝夜光（不抢眼） */
.fm-reviews--tp .like-btn.is-liked{
    color: #1e3a8a;
    border-color: rgba(59,130,246,.35);

    /* 仍然是白底，只做轻微染色 */
    background:
        radial-gradient(circle at 30% 25%, rgba(96,165,250,.14), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.92));

    box-shadow:
        0 10px 18px rgba(15,23,42,.06),
        0 8px 18px rgba(59,130,246,.10);
}

.fm-reviews--tp .like-btn.is-liked .material-icons{
    opacity: 1;
    color: #2563eb;
}

.fm-reviews--tp .like-btn.is-liked .cnt{
    opacity: .9;
    color: #1e3a8a;
}

.fm-reviews--tp .like-btn.is-liked .material-icons{ opacity: 1; }

/* ===== pager ===== */
.fm-reviews--tp .fm-tp-pager{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 14px;
}

.fm-reviews--tp .fm-tp-pager .btn{
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
}

.fm-reviews--tp .fm-tp-pager .btn:disabled{
    opacity: .45;
    cursor: not-allowed;
}

.fm-reviews--tp .fm-tp-pager .meta{
    color: var(--rv-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ===== dist collapse toggle: desktop 默认不显示 ===== */
.fm-reviews--tp .fm-tp-dist-toggle{ display:none; }











.fm-reviews--tp .rv-photos{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fm-reviews--tp .rv-photo{
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0;
  cursor: zoom-in;
}
.fm-reviews--tp .rv-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.fm-reviews--tp .rv-photo.rv-more{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  color: rgba(15,23,42,.65);
  cursor: default;
}
@media (max-width: 960px){
  .fm-reviews--tp .rv-photo{ width: 64px; height: 64px; }
}
/* ===== 评论图片预览：非全屏遮罩的小弹层 ===== */
.fm-img-popover{
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.fm-img-popover__frame{
  width: min(560px, 92vw);          /* 固定视觉宽度 */
  height: min(520px, 68vh);         /* 固定视觉高度上限 */
  background: rgba(15,23,42,.96);   /* 深色底更像电商预览 */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;

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

.fm-img-popover__img{
  width: 100%;
  height: 100%;
  object-fit: contain;              /* ✅ 不裁切：截图类更适合 */
  display: block;
}

.fm-img-popover__x{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fm-img-popover__x .material-icons{ font-size: 20px; }

/* 移动端：更像“底部弹层”，不是全屏 */
@media (max-width: 640px){
  .fm-img-popover{
    left: 50%;
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
  }
  .fm-img-popover__frame{
    width: 94vw;
    height: min(56vh, 520px);
    border-radius: 18px;
  }
}
/* =========================================================
   PC ONLY: SKU 折扣角标（不改字号/不改布局，只改 sku-save 位置）
========================================================= */
@media (min-width: 961px){

  /* 让角标能以卡片为定位参照 */
  .fm-page-game-show .fm-sku-card{
    position: relative;
  }

  /* 折扣：从“块状占位”变成右上角角标 */
  .fm-page-game-show .fm-sku-card .sku-save{
    position: absolute;
    top: 0px;
    right: 5px;

    /* 关键：不占布局空间 */
    margin: 0 !important;

    /* 字号保持克制（比你原来还略小一点） */
    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    padding: 5px 8px;
    border-radius: 999px;
    white-space: nowrap;

    /* 视觉：跟你截图那种蓝色角标一致，但很克制 */
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
      linear-gradient(135deg, var(--fm-primary-2) 0%, var(--fm-primary-3) 100%);
    box-shadow: 0 10px 18px rgba(37,99,235,.16);

    pointer-events: none; /* 不影响整卡点击选中 */
  }

  /* 选中态下角标稍微亮一点（可选，仍然克制） */
  .fm-page-game-show .fm-sku-item input:checked + .fm-sku-card .sku-save{
    filter: brightness(1.03);
  }
}