<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO淇濇姢锛氶槻姝㈡悳绱㈠紩鎿庣储寮曟椤甸潰锛圫taging涓撶敤锛?-->
    <meta name="robots" content="noindex, nofollow">
    <!-- Content Security Policy: 鍏佽ethers.js浣跨敤eval鍜孧etaMask鎵╁睍 -->
    <!-- Content Security Policy: 允许ethers.js、WalletConnect和MetaMask扩展 -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdn.jsdelivr.net https://cdn.ethers.io https://esm.sh https://cdn.skypack.dev https://unpkg.com chrome-extension:; script-src-elem 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://esm.sh https://cdn.skypack.dev https://unpkg.com; connect-src 'self' https://evm-rpc.sei-apis.com https://seitrace.com https://seiscan.io https://*.imgur.com https://gist.githubusercontent.com https://*.w3s.link https://*.ipfs.w3s.link https://relay.walletconnect.com https://*.walletconnect.com wss://*.walletconnect.com chrome-extension:; img-src 'self' data: https: chrome-extension:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src chrome-extension: https:;">

    <title>NFT - Sakura Nexus</title>

    <!-- 寮曞叆CSS鏂囦欢 -->
    <link rel="stylesheet" href="css/reset.css?v=1.0.10">
    <link rel="stylesheet" href="css/style.css?v=1.0.10">
    <link rel="stylesheet" href="css/responsive.css?v=1.0.10">

    <!-- 寮曞叆ethers.js -->
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js"></script>

    <!-- 缃戠珯鍥炬爣 -->
    <link rel="icon" href="images/logo_chip.svg" type="image/svg+xml">

    <!-- 棰勫姞杞界涓€寮犲箍鍛婂浘鐗囷紝鍔犲揩鍔犺浇閫熷害 -->
    <link rel="preload" as="image" href="images/Ad-images/Ad-images-1.jpg">

    <!-- NFT椤甸潰涓撶敤鏍峰紡锛堜繚鎸乭eader閫忔槑锛屼笉鏀筯eader鏍峰紡锛?-->
    <style>
        /* 椤甸潰鍐呭鍖哄煙鏍峰紡 */
        .test-page-content {
            padding-top: 100px; /* 涓哄鑸爮鐣欏嚭绌洪棿 */
            min-height: 100vh;
            background: url('images/backpicture group.svg') no-repeat center center;
            background-size: cover; /* 鎷変几瑕嗙洊鏁翠釜椤甸潰 */
            background-attachment: fixed; /* 鍥哄畾鑳屾櫙锛屾粴鍔ㄦ椂淇濇寔 */
            padding-bottom: 40px;
        }

        .test-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 80px; /* 宸﹀彸杈硅窛璋冩暣涓?0px */
            display: flex;
            justify-content: center; /* 鏁翠綋灞呬腑 */
        }

        /* 宸﹀彸涓ゆ爮甯冨眬 */
        .nft-hero-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-bottom: 40px;
            width: 100%;
            max-width: 100%;
        }

        @media (min-width: 768px) {
            .nft-hero-layout {
                grid-template-columns: 5fr 6fr; /* 淇濇寔 600:720 鐨勬瘮渚?*/
                gap: 40px;
                width: 100%;
                max-width: 1320px; /* 闄愬埗鏈€澶у搴︼紝閬垮厤鍦ㄥぇ灞忓箷涓婅繃澶э紙600+40+720=1360锛岀暀鍑鸿竟璺濓級 */
            }
        }

        /* 宸︿晶骞垮憡澶у浘鍖哄煙锛堣繛鎺ユ垚鍔熷悗浼氭樉绀洪€変腑NFT澶у浘锛屾湭杩炴帴鏃舵樉绀哄箍鍛婂浘锛?*/
        .nft-ad-area {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .nft-ad-image {
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            object-fit: contain; /* 淇濇寔瀹介珮姣?*/
        }

        /* 鍙充晶鍔熻兘鍖哄煙 */
        .nft-function-area {
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* 浠庨《閮ㄥ紑濮?*/
        }

        .nft-function-title {
            font-size: 2.2em;
            font-weight: 800;
            color: #F75B72; /* 涓庝富椤?"Game System"銆?Token Economy" 涓€鑷寸殑棰滆壊 */
            margin-bottom: 24px;
            margin-top: 0; /* 闈犱笂杈圭紭 */
            font-family: 'Aclonica', sans-serif;
            text-align: center; /* 椤堕儴灞呬腑 */
        }

        /* 瑁呴グ绾挎牱寮忥紙鍙傝€冧富椤碉級 */
        .nft-decoration {
            text-align: center;
            margin-bottom: 12px; /* 瑁呴グ鏉′笌涓嬫柟鍔熻兘鍖虹殑闂撮殭缂╁皬锛堝師32px锛?*/
        }

        .nft-decoration-fill {
            width: 100%;
            max-width: 1200px;
            height: auto;
        }

        /* 鍊掕鏃跺尯鍩?*/
        .countdown-section {
            margin-bottom: 32px;
            margin-top: auto; /* 闈犱笅瀵归綈 */
            display: flex;
            flex-direction: column;
            align-items: center; /* 宸﹀彸灞呬腑 */
        }

        .countdown-section.hidden {
            display: none !important;
        }

        /* 鍊掕鏃舵爣棰樻枃瀛?*/
        .countdown-title {
            text-align: center;
            font-size: 19px; /* 浠?6px鏀惧ぇ3鍙峰埌19px */
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
            font-family: 'Ubuntu', sans-serif;
        }

        .countdown-row-new {
            display: flex;
            align-items: center; /* 鍨傜洿灞呬腑瀵归綈 */
            gap: 4px; /* 鍑忓皬闂磋窛锛屽洜涓哄垎闅旂浼氬崰鐢ㄧ┖闂?*/
            margin-bottom: 12px;
        }

        .countdown-unit {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .countdown-digits {
            display: flex;
            gap: 4px;
        }

        .countdown-digit-box {
            width: 50px;
            height: 60px;
            background: rgba(247, 91, 114, 0.2); /* #F75B72 20% 閫忔槑搴?*/
            border: 1px solid rgba(247, 91, 114, 0.2); /* 杈规棰滆壊涓庤儗鏅壊涓€鑷?*/
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 800;
            color: #F75B72; /* 涓庢爣棰樻枃瀛楅鑹蹭竴鑷?*/
            font-family: 'Ubuntu', sans-serif;
        }

        /* 鍊掕鏃跺垎闅旂锛堝啋鍙凤級 */
        .countdown-separator {
            display: flex;
            align-items: center; /* 涓庢暟瀛楁浣跨敤鐩稿悓鐨勫榻愭柟寮?*/
            justify-content: center;
            font-size: 32px;
            font-weight: 800;
            color: #F75B72; /* 涓庢暟瀛楅鑹蹭竴鑷?*/
            font-family: 'Ubuntu', sans-serif;
            height: 60px; /* 涓庢暟瀛楁楂樺害涓€鑷达紝鐢ㄤ簬鍨傜洿瀵归綈 */
            padding: 0 4px; /* 宸﹀彸闂磋窛 */
            line-height: 1; /* 閲嶇疆琛岄珮锛屼娇鐢?flex 瀵归綈 */
            /* 浣跨敤 transform 绮剧‘璋冩暣鍐掑彿浣嶇疆锛屼娇鍏朵笌鏁板瓧涓績瀵归綈 */
            transform: translateY(-14px); /* 鍚戜笂绉诲姩锛屼娇鍐掑彿瑙嗚涓婂眳涓?*/
            box-sizing: border-box; /* 纭繚 padding 涓嶅奖鍝嶆€婚珮搴?*/
        }

        .countdown-unit-label {
            text-align: center;
            font-size: 11px;
            color: #999;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 500;
        }

        /* 杩炴帴閽卞寘鍖哄煙锛堝寘鍚€滆繛鎺ラ挶鍖呪€濊鍥惧拰鈥淢y NFT鈥濊鍥撅級 */
        .wallet-connect-section {
            margin-top: 12px;  /* 瑁呴グ鏉′笌鍔熻兘鍖烘暣浣撻棿闅欑缉灏忥紙鍘?4px锛?*/
            margin-bottom: 60px; /* 涓庡€掕鏃舵湁鏄庢樉璺濈锛堜笅鏂规槸鍊掕鏃讹級 */
        }

        /* 杩炴帴閽卞寘鏂囨锛堜粎鍦ㄦ湭杩炴帴鏃舵樉绀猴級 */
        .wallet-connect-text {
            color: #999;
            font-size: 14px;
            margin-bottom: 16px;
            margin-top: 32px; /* 寰€涓嬬Щ鍔?琛岋紙绾?2px锛?*/
            line-height: 1.5;
        }

        .connect-wallet-btn {
            background: #F75B72; /* 绾㈣壊鑳屾櫙锛屼笌BUY NOW鎸夐挳涓€鑷?*/
            color: white; /* 鐧借壊鏂囧瓧锛屼笌BUY NOW鎸夐挳涓€鑷?*/
            border: none; /* 鏃犺竟妗嗭紝涓嶣UY NOW鎸夐挳涓€鑷?*/
            padding: 14px 32px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            width: 100%;
            font-family: 'Ubuntu', sans-serif;
        }

        .connect-wallet-btn:hover:not(:disabled) {
            background: #e04a5f; /* 鎮仠鏃舵洿娣辩殑绾㈣壊锛屼笌BUY NOW鎸夐挳涓€鑷?*/
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(247, 91, 114, 0.4);
        }

        .connect-wallet-btn:disabled {
            background: #1a1a1a;
            border-color: #555;
            color: #666;
            cursor: not-allowed;
        }

        .test-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .test-section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
            font-family: 'Aclonica', sans-serif;
        }

        .status {
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            display: none;
        }

        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .test-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            width: 100%;
            margin-top: 10px;
            font-family: 'Ubuntu', sans-serif;
        }

        .test-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .test-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        /* My NFT 鍖哄煙锛氳繛鎺ラ挶鍖呮垚鍔熷悗鏄剧ず */
        .my-nft-section {
            margin-top: 0; /* 涓庢湭杩炴帴鏃剁殑鏂囧瓧浣嶇疆瀵归綈锛坵allet-connect-section宸叉湁margin-top: 12px锛?*/
        }

        .my-nft-header {
            display: flex;
            align-items: center;
            gap: 14px; /* 浠?2px澧炲姞鍒?4px锛屾枃瀛椾笌閽卞寘鍦板潃闂磋窛鍔犲ぇ2px */
            margin-bottom: 22px; /* 浠?8px澧炲姞鍒?2px锛屼笌NFT灏忓浘闂磋窛鍔犲ぇ4px */
        }

        .my-nft-title {
            font-size: 20px;
            font-weight: 800; /* 鍔犵矖锛堜粠700鏀逛负800锛?*/
            color: #F75B72; /* 涓?Sakura Genesis NFT"鏍囬棰滆壊涓€鑷?*/
        }

        /* 鍦板潃鑳跺泭鏍峰紡锛屽弬鑰冮檮浠朵腑鐨勭矇鑹插簳鍥炬晥鏋?*/
        .my-nft-address-pill {
            padding: 6px 14px;
            border-radius: 999px;
            background: rgba(247, 91, 114, 0.15); /* F75B72 15%閫忔槑搴?*/
            backdrop-filter: blur(10px); /* 姣涚幓鐠冩晥鏋?*/
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid #FF69B4;
            font-size: 13px;
            font-weight: 500;
            color: #F75B72;
            font-family: 'Ubuntu', sans-serif;
            cursor: pointer; /* 鍙偣鍑?*/
            transition: all 0.3s; /* 涓嶤onnect Wallet鎸夐挳涓€鑷寸殑杩囨浮鏁堟灉 */
        }

        /* 閽卞寘鍦板潃鎮仠鏁堟灉锛屼笌Connect Wallet鎸夐挳涓€鑷?*/
        .my-nft-address-pill:hover {
            background: #F75B72; /* 鎮仠鏃惰儗鏅壊 */
            color: white; /* 鎮仠鏃舵枃瀛楀彉鐧?*/
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(247, 91, 114, 0.4);
        }

        /* NFT 灏忓浘缃戞牸 */
        .my-nft-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
            gap: 12px;
        }

        /* 鍗曚釜 NFT 灏忓崱鐗?*/
        .my-nft-card {
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            background: rgba(247, 91, 114, 0.12);
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
            border: 2px solid transparent;
        }

        .my-nft-card img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .my-nft-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        }

        /* 褰撳墠閫変腑鐨?NFT 鍗＄墖楂樹寒 */
        .my-nft-card.active {
            border-color: #F75B72;
            box-shadow: 0 0 0 1px rgba(247, 91, 114, 0.5), 0 6px 18px rgba(0, 0, 0, 0.18);
        }

        /* 閽卞寘鍦板潃娴獥 */
        .wallet-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none; /* 榛樿闅愯棌 */
            align-items: center;
            justify-content: center;
        }

        .wallet-modal-overlay.show {
            display: flex;
        }

        .wallet-modal {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 24px;
            min-width: 320px;
            max-width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(247, 91, 114, 0.3);
        }

        .wallet-modal-address {
            font-family: monospace;
            font-size: 14px;
            color: #333;
            word-break: break-all;
            margin-bottom: 16px;
            padding: 12px;
            background: rgba(247, 91, 114, 0.08);
            border-radius: 8px;
            text-align: center;
        }

        .wallet-modal-disconnect-btn {
            width: 100%;
            padding: 12px 24px;
            background: #F75B72;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Ubuntu', sans-serif;
        }

        .wallet-modal-disconnect-btn:hover {
            background: #e04a5f;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(247, 91, 114, 0.4);
        }

        /* 閽卞寘杩炴帴鍔犺浇娴獥鏍峰紡 */
        .wallet-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 2000; /* 纭繚鍦ㄦ渶涓婂眰 */
            display: none; /* 榛樿闅愯棌 */
            align-items: center;
            justify-content: center;
            pointer-events: auto; /* 闃绘搴曞眰浜や簰 */
        }

        .wallet-loading-overlay.show {
            display: flex;
        }

        .wallet-loading-modal {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 40px 48px;
            min-width: 280px;
            max-width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(247, 91, 114, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        /* 鍔犺浇鍔ㄧ敾锛堟棆杞級 */
        .wallet-loading-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid rgba(247, 91, 114, 0.2);
            border-top-color: #F75B72;
            border-radius: 50%;
            animation: wallet-loading-spin 1s linear infinite;
        }

        @keyframes wallet-loading-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .wallet-loading-text {
            font-size: 16px;
            font-weight: 600;
            color: #F75B72;
            font-family: 'Ubuntu', sans-serif;
            text-align: center;
        }

        /* Toast 娴獥鏍峰紡锛堢敤浜庢樉绀鸿繛鎺ユ垚鍔熸秷鎭級 */
        .toast-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 16px 24px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(247, 91, 114, 0.3);
            z-index: 2000;
            display: none;
            align-items: center;
            gap: 12px;
            font-size: 16px;
            color: #333;
            font-family: 'Ubuntu', sans-serif;
            animation: slideInRight 0.3s ease-out;
        }

        .toast-notification.show {
            display: flex;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .toast-notification.hide {
            animation: slideOutRight 0.3s ease-out forwards;
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        /* BUY NOW 鎸夐挳鏍峰紡 */
        .buy-now-btn {
            width: 50%; /* 缂╃煭涓哄綋鍓嶇殑涓€鍗?*/
            padding: 14px 32px;
            background: #F75B72; /* 绾㈣壊鑳屾櫙 */
            color: white; /* 鐧借壊鏂囧瓧 */
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Ubuntu', sans-serif;
            text-align: center;
            margin: 0 auto; /* 淇濇寔灞呬腑 */
            display: block; /* 浣?margin: 0 auto 鐢熸晥 */
        }

        .buy-now-btn:hover {
            background: #e04a5f;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(247, 91, 114, 0.4);
        }

        .buy-now-btn-container {
            display: none; /* 榛樿闅愯棌锛岀敱JS鎺у埗鏄剧ず */
            margin-top: 60px; /* 涓庡€掕鏃跺尯鍩熶綅缃竴鑷?*/
            text-align: center; /* 纭繚鎸夐挳灞呬腑 */
        }

        .buy-now-btn-container.show {
            display: block;
        }

        /* Token 鏌ヨ锛堟棫 My NFT 娴嬭瘯鍖猴紝褰撳墠椤甸潰涓嶅啀浣跨敤锛屼絾鏍峰紡淇濈暀浠ラ槻鍏跺畠鍦版柟寮曠敤锛?*/
        .input-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .input-group label {
            display: block;
            margin-bottom: 6px;
            color: #666;
            font-weight: 600;
        }

        .input-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
        }

        .inline-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        /* 澶у浘灞曠ず */
        .hero {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .hero-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        .hero-image {
            width: 100%;
            height: 420px;
            object-fit: cover;
            background: #f0f0f0;
            display: block;
        }

        .hero-body {
            padding: 16px;
        }

        .hero-title {
            font-weight: 800;
            font-size: 22px;
            color: #333;
        }

        .hero-sub {
            margin-top: 8px;
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        .nft-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 15px;
            margin-top: 16px;
        }

        .nft-card {
            background: white;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: transform 0.15s;
        }

        .nft-card:hover {
            transform: translateY(-2px);
        }

        .nft-thumb {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            background: #f0f0f0;
            display: block;
        }

        .nft-info {
            margin-top: 10px;
            font-size: 0.95em;
            color: #666;
        }

        .nft-id {
            font-weight: 800;
            color: #333;
            font-size: 1.05em;
        }

        .hint {
            margin-top: 12px;
            font-size: 14px;
            color: #555;
            background: #f8f9fa;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 12px;
            padding: 12px;
        }

        @media (min-width: 768px) {
            .input-row {
                grid-template-columns: 1fr 1fr;
                align-items: end;
            }
            .inline-actions {
                grid-template-columns: 1fr 1fr;
            }
            .hero {
                grid-template-columns: 1.2fr 0.8fr;
                align-items: start;
            }
        }

        @media (max-width: 767px) {
            .nft-hero-layout {
                grid-template-columns: 1fr;
                display: flex;
                flex-direction: column;
            }
            /* 绉诲姩绔細鍔熻兘鍖哄煙鍦ㄤ笂鏂癸紝澶у浘鍖哄煙鍦ㄤ笅鏂?*/
            .nft-function-area {
                order: 1;
            }
            .nft-ad-area {
                order: 2;
                /* 鍏抽敭淇敼锛氳瀹瑰櫒瀹藉害鑷€傚簲鍥剧墖瀹為檯鏄剧ず瀹藉害锛岃€屼笉鏄〉闈㈠搴?*/
                display: block; /* 鏀逛负block锛岀Щ闄lex甯冨眬 */
                width: fit-content; /* 瀹瑰櫒瀹藉害璺熼殢鍐呭锛堝浘鐗囷級 */
                max-width: 100%; /* 浣嗕笉瓒呰繃椤甸潰瀹藉害 */
                margin: 0 auto; /* 姘村钩灞呬腑 */
                /* 绉婚櫎瀹瑰櫒鐨勫彲瑙佽儗鏅拰杈规 */
                background: transparent;
                border: none;
                padding: 0;
                box-shadow: none;
            }
            .nft-ad-image {
                max-height: 500px;
                max-width: 100%; /* 鍥剧墖鏈€澶у搴︿笉瓒呰繃瀹瑰櫒锛堝嵆椤甸潰瀹藉害锛?*/
                height: auto;
                width: auto; /* 鏀逛负auto锛岃鍥剧墖鏍规嵁瀹介珮姣旇嚜鐒舵樉绀?*/
                display: block;
                /* 灏哹ox-shadow鍙簲鐢ㄥ湪鍥剧墖鏈韩锛岃€屼笉鏄鍣?*/
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                /* 纭繚鍥剧墖淇濇寔瀹介珮姣?*/
                object-fit: contain;
            }
        }

        @media (max-width: 575px) {
            .test-container {
                padding: 20px; /* 绉诲姩绔噺灏戝乏鍙冲唴杈硅窛 */
            }
            .countdown-digit-box {
                width: 40px;
                height: 50px;
                font-size: 24px;
            }
            .nft-function-title {
                font-size: 1.8em;
            }
            .hero-image {
                height: 320px;
            }
        }
    </style>
</head>
<body>
    <!-- 瀵艰埅鏍忥紙蹇呴』淇濇寔閫忔槑锛屼緷璧栧叏灞€css锛?-->
    <header class="header">
        <div class="header-container">
            <div class="logo">
                <a href="#" class="logo-link" id="nftLogoLink">
                    <img src="images/logo.svg" alt="Sakura Nexus Logo" class="logo-full">
                </a>
            </div>

            <!-- 鑿滃崟瀹瑰櫒 -->
            <div class="menu">
                <a href="https://dominohub.jp.99.com/" target="_blank" class="menu-btn" id="farming-btn">Farming 🔥</a>
                <a href="https://sakura-nexus.gitbook.io/sakura-whitepaper" target="_blank" class="menu-btn">Whitepaper</a>
                <a href="nft.html" class="menu-btn">NFT</a>
            </div>

            <!-- 璇█鍒囨崲瀹瑰櫒 -->
            <div class="language">
                <a href="en.html" class="lang-btn">EN</a>
                <span class="lang-separator"> / </span>
                <a href="jp.html" class="lang-btn">JP</a>
            </div>

            <!-- 绀句氦濯掍綋瀹瑰櫒 -->
            <div class="social">
                <a href="https://x.com/PlaySakuraNexus" target="_blank" class="social-icon">
                    <img src="images/x_icon.svg" alt="X (Twitter)" class="social-img">
                </a>
                <a href="https://t.co/sDfQBRZ0B7" target="_blank" class="social-icon">
                    <img src="images/discord_icon.svg" alt="Discord" class="social-img">
                </a>
            </div>

            <!-- 绉诲姩鐗堣彍鍗曟寜閽?-->
            <div class="mobile-menu-toggle">
                <img src="images/tool_menu.svg" alt="Menu" class="menu-toggle-icon">
            </div>

            <!-- 绉诲姩鐗堣彍鍗曞鍣?-->
            <div class="mobile-menu">
                <a href="https://dominohub.jp.99.com/" target="_blank" class="mobile-menu-btn" id="farming-mobile-btn">Farming 馃敟</a>
                <a href="https://sakura-nexus.gitbook.io/sakura-whitepaper" target="_blank" class="mobile-menu-btn">Whitepaper</a>
                <a href="nft.html" class="mobile-menu-btn">NFT</a>
                <div class="mobile-language">
                    <a href="en.html" class="lang-btn">EN</a>
                    <span class="lang-separator"> / </span>
                    <a href="jp.html" class="lang-btn">JP</a>
                </div>
                <div class="mobile-social">
                    <a href="https://x.com/PlaySakuraNexus" target="_blank" class="social-icon">
                        <img src="images/x_icon.svg" alt="X (Twitter)" class="social-img">
                    </a>
                    <a href="https://t.co/sDfQBRZ0B7" target="_blank" class="social-icon">
                        <img src="images/discord_icon.svg" alt="Discord" class="social-img">
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 椤甸潰鍐呭 -->
    <div class="test-page-content">
        <div class="test-container">
            <!-- 宸﹀彸涓ゆ爮甯冨眬锛氬箍鍛婂ぇ鍥?+ 鍔熻兘鍖哄煙 -->
            <div class="nft-hero-layout">
                <!-- 宸︿晶锛氬ぇ鍥惧尯鍩燂紙榛樿鏄剧ず骞垮憡锛岃繛鎺ラ挶鍖呭悗鏄剧ず閫変腑NFT鎴栧崰浣嶅浘锛?-->
                <div class="nft-ad-area">
                    <!-- 榛樿鏄剧ず骞垮憡澶у浘锛涜繛鎺ラ挶鍖呭苟閫夋嫨NFT鍚庯紝灏嗙敱JS鍔ㄦ€佹洿鏂颁负NFT澶у浘 -->
                    <img id="nftHeroImage" src="images/Ad-images/Ad-images-1.jpg" alt="" class="nft-ad-image" />
                </div>

                <!-- 鍙充晶锛氬姛鑳藉尯鍩?-->
                <div class="nft-function-area">
                    <h1 class="nft-function-title">Sakura Genesis NFT</h1>
                    
                    <!-- 瑁呴グ绾匡紙鍙傝€冧富椤垫晥鏋滐級 -->
                    <div class="nft-decoration">
                        <img src="images/Fill.png" alt="Decoration" class="nft-decoration-fill">
                    </div>

                    <!-- 杩炴帴閽卞寘 / My NFT 鍖哄煙锛堜綅浜庤楗版潯涓嬫柟锛?-->
                    <div class="wallet-connect-section">
                        <!-- 鏈繛鎺ラ挶鍖呮椂鏄剧ず鐨勫尯鍩?-->
                        <div id="walletConnectView">
                            <div class="wallet-connect-text">Connect your wallet and view your NFTs</div>
                            <button class="connect-wallet-btn" id="connectWalletBtn">Connect Wallet</button>
                        </div>

                        <!-- 杩炴帴閽卞寘鍚庣殑 My NFT 鍖哄煙锛堝垵濮嬮殣钘忥紝鐢盝S鎺у埗鏄剧ず锛?-->
                        <div class="my-nft-section" id="myNftSection" style="display: none;">
                            <div class="my-nft-header">
                                <div class="my-nft-title">My NFT</div>
                                <!-- 鍙充晶涓洪挶鍖呭湴鍧€鑳跺泭鏍峰紡锛屾枃鏈敱JS濉厖 -->
                                <div class="my-nft-address-pill" id="myNftAddressPill">0x0000...0000</div>
                            </div>
                            <!-- NFT 灏忓浘缃戞牸瀹瑰櫒锛屽唴瀹圭敱JS鍔ㄦ€佹覆鏌?-->
                            <div class="my-nft-grid" id="myNftGrid">
                                <!-- 鍔ㄦ€佹彃鍏?NFT 缂╃暐鍥惧崱鐗?-->
                            </div>
                        </div>

                        <!-- 閽卞寘杩炴帴鐘舵€佹彁绀猴紙鏃犺鏄惁杩炴帴閮戒細澶嶇敤姝ゅ尯鍩燂級 -->
                        <div class="status" id="walletStatus"></div>
                    </div>

                    <!-- 閽卞寘鍦板潃娴獥锛堢偣鍑婚挶鍖呭湴鍧€鏃舵樉绀猴級 -->
                    <div class="wallet-modal-overlay" id="walletModalOverlay">
                        <div class="wallet-modal">
                            <div class="wallet-modal-address" id="walletModalAddress">0x0000000000000000000000000000000000000000</div>
                            <button class="wallet-modal-disconnect-btn" id="walletModalDisconnectBtn">Disconnect</button>
                        </div>
                    </div>

                    <!-- 閽卞寘杩炴帴鍔犺浇娴獥锛堜笉鍙叧闂級 -->
                    <div class="wallet-loading-overlay" id="walletLoadingOverlay">
                        <div class="wallet-loading-modal">
                            <div class="wallet-loading-spinner"></div>
                            <div class="wallet-loading-text">CONNECTING YOUR WALLET...</div>
                        </div>
                    </div>

                    <!-- Toast 閫氱煡娴獥锛堢敤浜庢樉绀鸿繛鎺ユ垚鍔熸秷鎭級 -->
                    <div class="toast-notification" id="toastNotification">
                        <span>鉁?Wallet connected.</span>
                    </div>

                    <!-- BUY NOW 鎸夐挳瀹瑰櫒锛堟棤NFT鏃舵樉绀猴級 -->
                    <div class="buy-now-btn-container" id="buyNowContainer">
                        <button class="buy-now-btn" id="buyNowBtn">BUY NOW</button>
                    </div>

                    <!-- 鍊掕鏃跺尯鍩燂紙璋冩暣鍒颁笅鏂癸紝鏍规嵁鏃堕棿鍔ㄦ€佹樉绀?闅愯棌锛?-->
                    <!-- ✅ 倒计时功能已屏蔽，如需启用请移除 hidden 类并取消注释相关代码 -->
                    <div class="countdown-section hidden" id="countdownSection">
                        <div class="countdown-title">Reveal Countdown</div>
                        <div class="countdown-row-new">
                            <!-- DAYS -->
                            <div class="countdown-unit">
                                <div class="countdown-digits">
                                    <div class="countdown-digit-box" id="cdDay1">0</div>
                                    <div class="countdown-digit-box" id="cdDay2">0</div>
                                </div>
                                <div class="countdown-unit-label">DAYS</div>
                            </div>
                            <!-- 鍒嗛殧绗?-->
                            <div class="countdown-separator">:</div>
                            <!-- HOURS -->
                            <div class="countdown-unit">
                                <div class="countdown-digits">
                                    <div class="countdown-digit-box" id="cdHour1">0</div>
                                    <div class="countdown-digit-box" id="cdHour2">0</div>
                                </div>
                                <div class="countdown-unit-label">HOURS</div>
                            </div>
                            <!-- 鍒嗛殧绗?-->
                            <div class="countdown-separator">:</div>
                            <!-- MINUTES -->
                            <div class="countdown-unit">
                                <div class="countdown-digits">
                                    <div class="countdown-digit-box" id="cdMin1">0</div>
                                    <div class="countdown-digit-box" id="cdMin2">0</div>
                                </div>
                                <div class="countdown-unit-label">MINUTES</div>
                            </div>
                            <!-- 鍒嗛殧绗?-->
                            <div class="countdown-separator">:</div>
                            <!-- SECONDS -->
                            <div class="countdown-unit">
                                <div class="countdown-digits">
                                    <div class="countdown-digit-box" id="cdSec1">0</div>
                                    <div class="countdown-digit-box" id="cdSec2">0</div>
                                </div>
                                <div class="countdown-unit-label">SECONDS</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 椤佃剼 -->
    <footer class="footer">
        <div class="copyright">Sakura Nexus @ 2025 All Rights Reserved</div>
    </footer>

    <!-- 寮曞叆涓籎S鏂囦欢锛堢敤浜庣Щ鍔ㄨ彍鍗曪級 -->
    <script src="js/main.js?v=1.1.4"></script>

    <!-- 语言检测和导航栏文本更新 -->
    <script>
        (function() {
            // 检测当前语言：检查URL参数、localStorage或页面lang属性
            function detectLanguage() {
                // 检查URL参数
                const urlParams = new URLSearchParams(window.location.search);
                const langParam = urlParams.get('lang');
                if (langParam === 'jp' || langParam === 'ja') return 'jp';
                if (langParam === 'en') return 'en';
                
                // 检查localStorage
                const storedLang = localStorage.getItem('sakura-lang');
                if (storedLang === 'jp' || storedLang === 'ja') return 'jp';
                if (storedLang === 'en') return 'en';
                
                // 检查页面lang属性
                const htmlLang = document.documentElement.lang;
                if (htmlLang === 'ja' || htmlLang === 'jp') return 'jp';
                
                // 默认返回英文（因为页面lang="en"）
                return 'en';
            }
            
            // 更新导航栏文本
            function updateFarmingText() {
                const lang = detectLanguage();
                const farmingBtn = document.getElementById('farming-btn');
                const farmingMobileBtn = document.getElementById('farming-mobile-btn');
                
                if (lang === 'jp') {
                    // 日文版：先行体験版
                    if (farmingBtn) farmingBtn.textContent = '先行体験版 🔥';
                    if (farmingMobileBtn) farmingMobileBtn.textContent = '先行体験版 🔥';
                } else {
                    // 英文版：Demo Play
                    if (farmingBtn) farmingBtn.textContent = 'Demo Play 🔥';
                    if (farmingMobileBtn) farmingMobileBtn.textContent = 'Demo Play 🔥';
                }
            }
            
            // 页面加载完成后执行
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', updateFarmingText);
            } else {
                updateFarmingText();
            }
            
            // 监听语言切换链接点击
            document.addEventListener('click', function(e) {
                const langLink = e.target.closest('a[href="jp.html"], a[href="en.html"]');
                if (langLink) {
                    const isJP = langLink.getAttribute('href') === 'jp.html';
                    localStorage.setItem('sakura-lang', isJP ? 'jp' : 'en');
                }
            });
        })();
    </script>

    <!-- NFT椤甸潰JS -->
    <script src="js/nft.js?v=2.12.16"></script>
    
    <!-- 鍏ㄥ眬涓婚绯荤粺 -->
    <script src="js/theme/theme-config.js?v=1.0.0"></script>
    <script src="js/theme/theme-loader.js?v=1.0.1"></script>
</body>
</html>