/* =====================================================================
   SPECIAL FORCE ONLINE 2026 — "STEELWORKS" DESIGN SYSTEM
   工業 / 工廠 / 鐵板 — Gunmetal steel, safety-orange, stencil type.
   Fonts: Black Ops One (stencil display) · Teko (condensed UI)
          Noto Sans TC (body)
   ===================================================================== */

:root {
    /* steel */
    --sf-bg:       #101215;
    --sf-bg-2:     #16191d;
    --sf-panel:    #1d2126;
    --sf-panel-2:  #23282e;
    --sf-line:     #2e343b;
    --sf-line-2:   #3f474f;
    /* type */
    --sf-white:    #eef1f4;
    --sf-text:     #c2cad2;
    --sf-dim:      #7f8a95;
    /* signal */
    --sf-orange:   #ff7a00;
    --sf-orange-2: #ffa53c;
    --sf-amber:    #ffb400;
    /* fonts */
    --font-stencil: 'Black Ops One', 'Noto Sans TC', sans-serif;
    --font-cond:    'Teko', 'Noto Sans TC', sans-serif;
    --font-body:    'Noto Sans TC', 'Roboto', sans-serif;
    /* signature */
    --sf-hazard: repeating-linear-gradient(-45deg,
                    var(--sf-orange) 0 10px, #0b0c0e 10px 20px);
    --sf-notch: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
                    calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ── Base ─────────────────────────────────────────────────────────── */
body.sf-body {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}
/* faint steel grain over everything */
body.sf-body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.sf-body > * { position: relative; z-index: 1; }

a { color: var(--sf-orange); text-decoration: none; transition: color .15s; }
a:hover { color: var(--sf-orange-2); }

::selection { background: var(--sf-orange); color: #000; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--sf-bg-2); }
::-webkit-scrollbar-thumb {
    background: var(--sf-line-2);
    border: 3px solid var(--sf-bg-2);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sf-orange); }

h1, h2, h3, h4, h5, h6 { color: var(--sf-white); }

.text-muted, .text-secondary { color: var(--sf-dim) !important; }

img { max-width: 100%; }

/* ── Header ───────────────────────────────────────────────────────── */
#sf-header {
    background: linear-gradient(180deg, #1d2126 0%, #14171b 100%);
    border-bottom: 1px solid var(--sf-line);
    box-shadow: 0 2px 14px rgba(0,0,0,.55);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.sf-nav { padding: .35rem 0; align-items: center; }
.sf-nav .navbar-brand { padding: .25rem .6rem .25rem 0; }
.sf-nav .navbar-nav { align-items: center; }
.sf-nav .navbar-brand img { filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

.sf-nav .nav-link {
    font-family: var(--font-cond);
    font-size: 1.18rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sf-text) !important;
    padding: .62rem 1rem .48rem !important;
    position: relative;
}
.sf-nav .navbar-nav > .nav-item > .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .3rem;
    height: 2px;
    background: var(--sf-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}
.sf-nav .navbar-nav > .nav-item > .nav-link:hover::after,
.sf-nav .navbar-nav > .nav-item > .nav-link.active::after { transform: scaleX(1); }
.sf-nav .nav-link:hover, .sf-nav .nav-link.active { color: var(--sf-white) !important; }

.sf-nav .dropdown-toggle::after {
    border-top-color: var(--sf-orange);
    vertical-align: .18em;
}

.sf-dropdown {
    background: var(--sf-panel);
    border: 1px solid var(--sf-line-2);
    border-top: 2px solid var(--sf-orange);
    border-radius: 0;
    box-shadow: 0 14px 30px rgba(0,0,0,.6);
    padding: .35rem 0;
    margin-top: 0 !important;
}
.sf-dropdown .dropdown-item {
    color: var(--sf-text);
    font-size: .88rem;
    padding: .45rem 1.1rem;
    border-left: 3px solid transparent;
}
.sf-dropdown .dropdown-item:hover {
    background: var(--sf-panel-2);
    border-left-color: var(--sf-orange);
    color: var(--sf-white);
}
.sf-dropdown .dropdown-divider { border-color: var(--sf-line); }
.sf-dropdown .sf-charge-link { color: var(--sf-amber); font-weight: 700; }
.sf-dropdown .sf-charge-link:hover { color: var(--sf-orange-2); }

/* 活動內頁 banner hero */
.sf-post-banner { width: 100%; border-radius: 10px; margin-bottom: 18px; display: block; }

/* 加值服務紀錄表：欄位垂直置中、時間欄靠右，不同字級不再歪斜 */
.table.table-dark.table-bordered td { vertical-align: middle; }
.table.table-dark.table-bordered td.sf-sub { text-align: right; }

/* login / register */
.sf-login-btn, .sf-register-btn {
    font-family: var(--font-cond);
    font-size: 1.05rem !important;
    letter-spacing: .08em;
    padding: .35rem 1.1rem !important;
    margin-left: 8px;
    clip-path: var(--sf-notch);
    border: 0 !important;
    text-align: center;
}
.sf-login-btn {
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    color: #fff !important;
    backdrop-filter: blur(3px);
}
.sf-login-btn:hover {
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    color: #fff !important;
}
/* 加入會員：站上唯一的黃色 —— 整站都是橘色點綴，橘鈕沒有辨識度；
   亮黃底黑字（工業警示配色）在黑頁首上是全頁最搶眼的元素。
   選擇器加 .sf-nav .nav-link 前綴：權重必須壓過上方 .sf-nav .nav-link 的
   color !important，否則黑字會被蓋回灰字（實際踩過） */
.sf-register-btn,
.sf-nav .nav-link.sf-register-btn {
    background: linear-gradient(180deg, #ffcf33, #ffb400) !important;
    color: #14161a !important;
    font-weight: 800;
    box-shadow: 0 0 14px rgba(255, 190, 20, .55);
}
.sf-register-btn:hover,
.sf-nav .nav-link.sf-register-btn:hover {
    background: linear-gradient(180deg, #ffd94d, #ffc21a) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 200, 30, .8);
}

.sf-header-charge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-cond);
    font-size: 1.05rem;
    letter-spacing: .06em;
    background: linear-gradient(180deg, var(--sf-orange-2), var(--sf-orange) 60%);
    color: #14171b !important;
    padding: .3rem 1rem;
    border-radius: 3px;
    font-weight: 600;
    margin-right: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .12s, box-shadow .12s;
}
.sf-header-charge:hover { color: #000 !important; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(255,122,0,.35); }
.sf-header-charge .fa { color: #14171b; }

.sf-nav .nav-link.sf-account-btn {
    font-family: var(--font-cond);
    font-size: 1.1rem !important;
    letter-spacing: .06em;
    color: var(--sf-orange) !important;
    text-transform: none !important;   /* 帳號名稱保持原始大小寫 */
}
.sf-account-btn:hover { color: var(--sf-orange-2) !important; }

.navbar-toggler { border: 1px solid var(--sf-line-2); border-radius: 0; }

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--sf-panel);
        border: 1px solid var(--sf-line);
        margin-top: .5rem;
        padding: .6rem 1rem 1rem;
    }
    .sf-login-btn, .sf-register-btn { margin: 6px 0 0; display: block; }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-sf-primary, .btn-sf-outline {
    font-family: var(--font-cond);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    clip-path: var(--sf-notch);
    padding: .5rem 1.9rem;
    transition: background .15s, box-shadow .15s, color .15s;
}
.btn-sf-primary {
    background: linear-gradient(180deg, var(--sf-orange-2), var(--sf-orange) 55%);
    color: #14171b;
}
.btn-sf-primary:hover {
    background: var(--sf-orange-2);
    color: #000;
    box-shadow: 0 0 22px rgba(255,122,0,.35);
}
.btn-sf-outline {
    background: rgba(255,255,255,.03);
    box-shadow: inset 0 0 0 1px var(--sf-line-2);
    color: var(--sf-text);
}
.btn-sf-outline:hover {
    box-shadow: inset 0 0 0 1px var(--sf-orange);
    color: var(--sf-orange);
    background: rgba(255,122,0,.06);
}
.btn-lg.btn-sf-primary, .btn-lg.btn-sf-outline { font-size: 1.35rem; padding: .65rem 2.4rem; }

/* ── Section & titles ─────────────────────────────────────────────── */
.sf-section { padding: 64px 0; }
.sf-section-dark {
    background: var(--sf-bg-2);
    border-top: 1px solid var(--sf-line);
    border-bottom: 1px solid var(--sf-line);
}

.sf-section-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-cond);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-white);
    margin-bottom: 1.8rem;
}
.sf-section-title::before {
    content: '';
    width: 14px;
    height: 26px;
    background: var(--sf-orange);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    flex: none;
}
.sf-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--sf-line-2), transparent);
}

/* small stencil kicker: [ TACTICAL ONLINE FPS ] */
.sf-kicker {
    font-family: var(--font-cond);
    font-size: 1.05rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--sf-orange);
}
.sf-kicker::before { content: '[ '; color: var(--sf-dim); }
.sf-kicker::after  { content: ' ]'; color: var(--sf-dim); }

/* ── Page hero (inner pages) ──────────────────────────────────────── */
.sf-hero {
    position: relative;
    padding: 52px 0 44px;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(255,122,0,.07) 0%, transparent 42%),
        linear-gradient(180deg, #1b1f24, #14171b);
    border-bottom: 1px solid var(--sf-line);
}
/* diagonal steel plate seams */
.sf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent calc(58% - 1px), var(--sf-line) 58%, transparent calc(58% + 1px)),
        linear-gradient(115deg, transparent calc(72% - 1px), var(--sf-line) 72%, transparent calc(72% + 1px)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px);
}
/* hazard tape footer */
.sf-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: var(--sf-hazard);
    opacity: .8;
}
.sf-hero .container { position: relative; }
.sf-hero h1 {
    font-family: var(--font-stencil);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: .06em;
    color: var(--sf-white);
    margin: 0;
    line-height: 1;
    text-shadow: 0 3px 0 rgba(0,0,0,.45);
}
.sf-hero h1::before { content: '// '; color: var(--sf-orange); }
.sf-hero .breadcrumb { background: none; padding: 0; margin: 0 0 .6rem; font-size: .82rem; }
.sf-hero .breadcrumb-item + .breadcrumb-item::before { color: var(--sf-line-2); content: '›'; }
.sf-hero .breadcrumb-item a { color: var(--sf-dim); }
.sf-hero .breadcrumb-item a:hover { color: var(--sf-orange); }
.sf-hero .breadcrumb-item.active { color: var(--sf-text); }

/* ── Cards (steel plates) ─────────────────────────────────────────── */
.sf-card, .card {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, var(--sf-panel-2), var(--sf-panel) 60%);
    border: 1px solid var(--sf-line);
    border-top: 2px solid var(--sf-line-2);
    border-radius: 0;
    overflow: hidden;
    position: relative;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    height: 100%;
    color: var(--sf-text);
}
/* chamfered corner notch, top-right */
.sf-card::after, .card::after {
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    width: 16px; height: 16px;
    background: linear-gradient(45deg, transparent calc(50% - 1px), var(--sf-line-2) 50%, var(--sf-bg) calc(50% + 1px));
    z-index: 2;
    transition: background .18s ease;
}
.sf-card:hover, a .card:hover, a:hover .card {
    transform: translateY(-4px);
    border-color: var(--sf-orange);
    border-top-color: var(--sf-orange);
    box-shadow: 0 14px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,122,0,.25);
}
.sf-card:hover::after { background: linear-gradient(45deg, transparent calc(50% - 1px), var(--sf-orange) 50%, var(--sf-bg) calc(50% + 1px)); }
.sf-card img, .card .card-img-top {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 0;
    filter: saturate(.92);
    transition: filter .2s;
}
.sf-card:hover img, .card:hover .card-img-top { filter: saturate(1.08); }
.sf-card-body, .card-body { padding: 1rem 1.1rem; }
.sf-card-title, .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sf-white);
    margin-bottom: .4rem;
}
.sf-card-meta {
    font-family: var(--font-cond);
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--sf-orange-2);
    margin-bottom: .4rem;
}
.sf-card-text, .card-text { font-size: .85rem; color: var(--sf-text); }
.card-footer {
    background: rgba(0,0,0,.25);
    border-top: 1px solid var(--sf-line);
    color: var(--sf-white);
}

/* ── News list ────────────────────────────────────────────────────── */
.sf-news-table { width: 100%; border-top: 1px solid var(--sf-line-2); }
.sf-news-table td {
    padding: .85rem .6rem;
    border-bottom: 1px solid var(--sf-line);
    vertical-align: middle;
}
.sf-news-table tr { transition: background .12s; }
.sf-news-table tr:hover { background: rgba(255,122,0,.045); box-shadow: inset 3px 0 0 var(--sf-orange); }
.sf-news-table a { color: var(--sf-text); font-size: .92rem; }
.sf-news-table a:hover { color: var(--sf-white); }

.sf-badge {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-cond);
    font-size: .95rem;
    line-height: 1.1;
    letter-spacing: .1em;
    padding: 3px 10px 2px;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    font-weight: 600;
}
.sf-badge-notice { background: #2c3e50; color: #9fc3e8; }
.sf-badge-event  { background: rgba(255,122,0,.16); color: var(--sf-orange-2); box-shadow: inset 0 0 0 1px rgba(255,122,0,.4); }
.sf-badge-update { background: #2c3a22; color: #a8c66c; }

/* ── Post detail ──────────────────────────────────────────────────── */
.sf-post {
    background: linear-gradient(180deg, var(--sf-panel-2), var(--sf-panel) 120px);
    border: 1px solid var(--sf-line);
    border-top: 3px solid var(--sf-orange);
    border-radius: 0;
    padding: 2rem 2.2rem;
}
.sf-post h2 {
    color: var(--sf-white);
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.sf-post-meta {
    font-family: var(--font-cond);
    font-size: 1rem;
    letter-spacing: .06em;
    color: var(--sf-dim);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--sf-line-2);
}
.sf-post-content { line-height: 1.9; color: var(--sf-text); }
.sf-post-content img { max-width: 100%; height: auto; border: 1px solid var(--sf-line); }

/* ── Download ─────────────────────────────────────────────────────── */
.sf-download-card {
    background: linear-gradient(180deg, var(--sf-panel-2), var(--sf-panel));
    border: 1px solid var(--sf-line);
    border-radius: 0;
    padding: 1.8rem 1.5rem;
    text-align: center;
    position: relative;
    transition: border-color .18s, transform .18s;
    height: 100%;
}
.sf-download-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--sf-hazard);
    opacity: .55;
    transition: opacity .18s;
}
.sf-download-card:hover { border-color: var(--sf-orange); transform: translateY(-3px); }
.sf-download-card:hover::before { opacity: 1; }
.sf-download-card h4 {
    font-family: var(--font-cond);
    letter-spacing: .06em;
    color: var(--sf-white);
    font-size: 1.5rem;
    margin-bottom: .8rem;
}
.sf-download-card .fa { color: var(--sf-orange); }
/* 按鈕內的圖示跟按鈕文字同色，避免橘底橘圖示看不見 */
.sf-download-card .btn .fa,
.btn-sf-primary .fa { color: inherit; }

/* ── Bootstrap re-skin (tables / tabs / alerts / forms) ───────────── */
.table-dark, .table {
    --bs-table-bg: var(--sf-panel);
    --bs-table-color: var(--sf-text);
    --bs-table-border-color: var(--sf-line);
    --bs-table-striped-bg: var(--sf-panel-2);
    --bs-table-hover-bg: rgba(255,122,0,.05);
}
.table thead th {
    font-family: var(--font-cond);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sf-orange-2);
    background: var(--sf-bg-2);
    border-bottom: 2px solid var(--sf-orange) !important;
}

.nav-tabs { border-bottom: 1px solid var(--sf-line-2); gap: 4px; }
.nav-tabs .nav-link {
    font-family: var(--font-cond);
    font-size: 1.1rem;
    letter-spacing: .06em;
    color: var(--sf-dim);
    background: var(--sf-bg-2);
    border: 1px solid var(--sf-line);
    border-bottom: 0;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    padding: .45rem 1.2rem;
}
.nav-tabs .nav-link:hover { color: var(--sf-text); border-color: var(--sf-line-2); }
.nav-tabs .nav-link.active {
    color: #14171b;
    background: var(--sf-orange);
    border-color: var(--sf-orange);
    font-weight: 600;
}

.alert-secondary {
    background: var(--sf-panel);
    border: 1px solid var(--sf-line-2);
    border-left: 4px solid var(--sf-orange);
    border-radius: 0;
    color: var(--sf-text);
}

.form-control, .form-select {
    background: var(--sf-bg-2);
    border: 1px solid var(--sf-line-2);
    border-radius: 0;
    color: var(--sf-white);
}
.form-control:focus, .form-select:focus {
    background: var(--sf-bg-2);
    border-color: var(--sf-orange);
    box-shadow: 0 0 0 .2rem rgba(255,122,0,.18);
    color: var(--sf-white);
}

.btn-success {
    --bs-btn-bg: var(--sf-orange);
    --bs-btn-border-color: var(--sf-orange);
    --bs-btn-color: #14171b;
    --bs-btn-hover-bg: var(--sf-orange-2);
    --bs-btn-hover-border-color: var(--sf-orange-2);
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: var(--sf-orange-2);
    --bs-btn-active-border-color: var(--sf-orange-2);
    --bs-btn-active-color: #000;
    border-radius: 0;
    clip-path: var(--sf-notch);
    font-weight: 600;
    letter-spacing: .08em;
}

/* Bootstrap carousel (character page etc.) */
.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: drop-shadow(0 0 6px rgba(0,0,0,.8));
}
.carousel-indicators [data-bs-target] { background-color: var(--sf-orange); }

/* ── Pagination ───────────────────────────────────────────────────── */
.pagination { --bs-pagination-border-radius: 0; gap: 5px; }
.pagination .page-link {
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    color: var(--sf-text);
    font-family: var(--font-cond);
    font-size: 1.05rem;
    min-width: 40px;
    text-align: center;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.pagination .page-link:hover { background: var(--sf-panel-2); color: var(--sf-white); box-shadow: none; }
.pagination .active .page-link {
    background: var(--sf-orange);
    border-color: var(--sf-orange);
    color: #14171b;
    font-weight: 600;
}
.pagination .disabled .page-link { background: var(--sf-bg-2); color: var(--sf-line-2); }

/* ── Footer ───────────────────────────────────────────────────────── */
.sf-footer {
    margin-top: auto;
    background: linear-gradient(180deg, #14171b, #0c0e10);
    border-top: 1px solid var(--sf-line);
    position: relative;
}
.sf-footer::before {
    content: '';
    display: block;
    height: 6px;
    background: var(--sf-hazard);
    opacity: .85;
}
.sf-footer-links a {
    color: var(--sf-dim);
    font-size: .84rem;
    margin: 0 .7rem;
}
.sf-footer-links a:hover { color: var(--sf-orange); }
.sf-footer small { color: var(--sf-dim); }

/* 版權置中底列，兩行對齊、不硬換行 */
.sf-footer-copy {
    border-top: 1px solid var(--sf-line);
    padding: 16px 0 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sf-footer-copy span {
    color: var(--sf-dim);
    font-size: .78rem;
    letter-spacing: .02em;
    line-height: 1.6;
}

/* =====================================================================
   HOME PAGE
   ===================================================================== */

/* ── Main hero ────────────────────────────────────────────────────── */
.sf-carousel { position: relative; border-bottom: 1px solid var(--sf-line); }
.sf-carousel .swiper { height: min(72vh, 620px); min-height: 460px; }
.sf-carousel .swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.sf-carousel .slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.25) 100%),
        linear-gradient(180deg, rgba(10,11,13,.25), rgba(10,11,13,.7));
}
/* HUD grid + frame on hero */
.sf-carousel .slide-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(115deg, transparent 35%, #000 75%);
    -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 75%);
}
.sf-carousel .slide-caption {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: left;
}
.sf-carousel .slide-caption .container { position: relative; }
.sf-hero-title {
    font-family: var(--font-stencil);
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: .95;
    color: var(--sf-white);
    text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 40px rgba(255,122,0,.15);
    margin: .5rem 0 .8rem;
}
.sf-hero-title .accent { color: var(--sf-orange); }
.sf-hero-sub {
    font-size: 1.05rem;
    color: var(--sf-text);
    max-width: 560px;
    margin-bottom: 1.6rem;
}
.sf-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* HUD corner brackets around caption */
.sf-hud-frame { position: relative; padding: 2rem 0; }
.sf-hud-frame::before, .sf-hud-frame::after {
    content: '';
    position: absolute;
    width: 34px; height: 34px;
    border: 2px solid rgba(255,122,0,.55);
}
.sf-hud-frame::before { top: 0; left: -18px; border-right: 0; border-bottom: 0; }
.sf-hud-frame::after  { bottom: 0; left: -18px; border-right: 0; border-top: 0; }

.sf-hud-meta {
    font-family: var(--font-cond);
    font-size: .95rem;
    letter-spacing: .25em;
    color: var(--sf-dim);
    text-transform: uppercase;
}

/* swiper chrome */
.sf-carousel .swiper-button-next, .sf-carousel .swiper-button-prev {
    color: var(--sf-orange);
    width: 44px; height: 44px;
    background: rgba(12,14,16,.6);
    border: 1px solid var(--sf-line-2);
}
.sf-carousel .swiper-button-next::after, .sf-carousel .swiper-button-prev::after { font-size: 1.1rem; }
.sf-carousel .swiper-button-next:hover, .sf-carousel .swiper-button-prev:hover { border-color: var(--sf-orange); }
.sf-carousel .swiper-pagination-bullet {
    width: 26px; height: 4px;
    border-radius: 0;
    background: rgba(255,255,255,.35);
    opacity: 1;
}
.sf-carousel .swiper-pagination-bullet-active { background: var(--sf-orange); }

/* ── Quick access strip ───────────────────────────────────────────── */
.sf-quick {
    background: var(--sf-bg-2);
    border-bottom: 1px solid var(--sf-line);
}
.sf-quick-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1.3rem 1.2rem;
    color: var(--sf-text);
    border-left: 1px solid var(--sf-line);
    position: relative;
    transition: background .15s;
}
.sf-quick .col-6:last-child .sf-quick-item,
.sf-quick .col-6:nth-child(4n) .sf-quick-item { border-right: 1px solid var(--sf-line); }
.sf-quick-item:hover { background: rgba(255,122,0,.05); color: var(--sf-text); }
.sf-quick-item::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--sf-orange);
    transform: scaleX(0);
    transition: transform .18s;
}
.sf-quick-item:hover::after { transform: scaleX(1); }
.sf-quick-item .sf-quick-num {
    font-family: var(--font-cond);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--sf-orange);
    flex: none;
    min-width: 38px;
    transition: color .18s;
}
.sf-quick-item:hover .sf-quick-num { color: var(--sf-orange-2); }
.sf-quick-item b {
    display: block;
    font-family: var(--font-cond);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--sf-white);
    line-height: 1.15;
}
.sf-quick-item span { font-size: .78rem; color: var(--sf-dim); }

/* ── Roster (characters strip) ────────────────────────────────────── */
.sf-roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sf-roster a {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 1px solid var(--sf-line);
    background: var(--sf-panel);
}
.sf-roster img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 72% center;
    filter: grayscale(.55) brightness(.9);
    transform: scale(1.02);
    transition: filter .25s, transform .25s;
}
.sf-roster a:hover img { filter: grayscale(0) brightness(1); transform: scale(1.08); }
.sf-roster a::after {
    content: attr(data-name);
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.4rem .7rem .55rem;
    font-family: var(--font-cond);
    font-size: 1.05rem;
    letter-spacing: .08em;
    color: var(--sf-white);
    background: linear-gradient(180deg, transparent, rgba(8,9,11,.9));
}
.sf-roster a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--sf-orange);
    transform: scaleX(0);
    transition: transform .2s;
    z-index: 1;
}
.sf-roster a:hover::before { transform: scaleX(1); }
@media (max-width: 767.98px) { .sf-roster { grid-template-columns: repeat(3, 1fr); } }

/* ── Map cards ────────────────────────────────────────────────────── */
.sf-map-card {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--sf-line);
    aspect-ratio: 16/9;
}
.sf-map-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s, filter .3s;
    filter: brightness(.85);
}
.sf-map-card:hover img { transform: scale(1.06); filter: brightness(1); }
.sf-map-card figcaption {
    position: absolute;
    left: 0; bottom: 0; right: 0;
    padding: 1.6rem 1rem .7rem;
    background: linear-gradient(180deg, transparent, rgba(8,9,11,.92));
    font-family: var(--font-cond);
    font-size: 1.3rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-white);
}
.sf-map-card figcaption::before { content: '▸ '; color: var(--sf-orange); }

/* ── Character page (guide) ───────────────────────────────────────── */
.sf-char-slide {
    background-size: cover;
    background-position: center 20%;
    min-height: 540px;
    position: relative;
}
.sf-char-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,11,13,.93) 0%, rgba(10,11,13,.6) 55%, rgba(10,11,13,.3) 100%);
}
.sf-char-slide .container { position: relative; z-index: 1; }
.sf-char-name {
    font-family: var(--font-stencil);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--sf-white);
    line-height: 1;
    margin: .4rem 0 .2rem;
}
.sf-char-sub {
    font-family: var(--font-cond);
    font-size: 1.25rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sf-orange-2);
    margin-bottom: 1rem;
}
.sf-char-desc {
    max-width: 680px;
    color: var(--sf-text);
    line-height: 1.9;
    font-size: .92rem;
    border-left: 3px solid var(--sf-orange);
    padding-left: 1.1rem;
    background: rgba(8,9,11,.35);
}

/* ── Empty state ──────────────────────────────────────────────────── */
.sf-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--sf-line-2);
    color: var(--sf-dim);
    font-family: var(--font-cond);
    font-size: 1.2rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.sf-empty::before {
    content: '— STANDBY —';
    display: block;
    color: var(--sf-orange);
    margin-bottom: .4rem;
    letter-spacing: .3em;
}

/* ── Forms (shared) ───────────────────────────────────────────────── */
.form-label { color: var(--sf-text); font-size: .88rem; }
.form-check-input {
    background-color: var(--sf-bg-2);
    border-color: var(--sf-line-2);
}
.form-check-input:checked {
    background-color: var(--sf-orange);
    border-color: var(--sf-orange);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(255,122,0,.18); }
.form-check-label { color: var(--sf-text); }

/* 加值服務申請紀錄的次要文字 */
.sf-sub { color: var(--sf-dim, #9aa4b0); font-size: 12.5px; margin-top: 2px; }

/* ── 加值服務：80w 商品選取 ────────────────────────────────────────── */
.sf-lottery-pick { position: relative; transition: border-color .15s, transform .1s; }
.sf-lottery-pick:hover { border-color: var(--sf-orange) !important; }
.sf-lottery-pick:has(input:checked) {
    border-color: var(--sf-orange) !important;
    box-shadow: 0 0 0 2px var(--sf-orange), 0 8px 20px rgba(0,0,0,.4);
    transform: translateY(-2px);
}
.sf-lottery-pick:has(input:checked)::after {
    content: '✓';
    position: absolute;
    top: 6px; right: 8px;
    width: 22px; height: 22px;
    background: var(--sf-orange);
    color: #14171b;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    z-index: 2;
}

/* ── Launcher (embedded 800×417) ──────────────────────────────────── */
.sf-launcher-wrap { background: #14171b; width: 800px; height: 417px; overflow: hidden; }