@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
  --bg:#06080c;
  --accent:#29baff;   /* 主藍 */
  --accent2:#0066ff;  /* 深藍 */
  --text:#d9e8ff;
  --card:#0b0e14;
  --line:#1b2230;
  --danger:#ff4d6d;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Share Tech Mono',monospace;
  background:radial-gradient(circle at top,#0b0d13,#06080c 80%);
  color:var(--text);
}

/* Nav */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;border-bottom:1px solid var(--line);
  background:rgba(10,12,16,0.6);backdrop-filter:blur(10px);
}
.logo{font-size:1.4rem;color:var(--accent);text-shadow:0 0 8px var(--accent2),0 0 14px var(--accent)}
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  overflow:hidden;clip:rect(0,900px,0,0);animation:glitch 3s infinite linear alternate-reverse;
}
.glitch::before{text-shadow:-2px 0 var(--accent2)}
.glitch::after{ text-shadow: 2px 0 var(--accent)}
@keyframes glitch{0%{clip:rect(20px,9999px,22px,0)}25%{clip:rect(50px,9999px,52px,0)}50%{clip:rect(80px,9999px,82px,0)}75%{clip:rect(40px,9999px,42px,0)}100%{clip:rect(10px,9999px,12px,0)}}

/* user menu */
.user{position:relative}
.user-btn{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 10px;cursor:pointer;color:var(--text)
}
.user-btn img{width:28px;height:28px;border-radius:50%;border:2px solid var(--accent)}
.menu{
  position:absolute;right:0;top:48px;width:280px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:.18s
}
.menu.show{opacity:1;transform:translateY(0);pointer-events:auto}
.menu-header{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.menu-header img{width:44px;height:44px;border-radius:10px;border:2px solid var(--accent)}
.menu .meta{display:flex;flex-direction:column;justify-content:center}
.menu-actions{display:flex;flex-direction:column;gap:8px;padding:12px}
.menu-actions button{padding:10px;border-radius:10px;border:1px solid var(--line);background:#0f1320;color:var(--text);cursor:pointer}
.menu-actions .primary{background:#0f2948;border-color:#184d8a}
.menu-actions .danger{background:#2a1016;border-color:#5a1f2c;color:#ffdbe2}

/* Container */
.container{max-width:1100px;margin:40px auto;padding:0 16px}
.hero{text-align:center}
.hero h1::before{content:none!important}
.hero p{color:#9ecbff}

/* 標題底線發光 */
.spark{display:inline-block;position:relative;color:var(--accent);transition:color .25s,text-shadow .25s}
.spark::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  box-shadow:0 0 10px var(--accent2),0 0 16px var(--accent);opacity:.85
}
.spark:hover{color:#6ec5ff;text-shadow:0 0 12px var(--accent),0 0 22px var(--accent2)}
.spark::before{
  content:"";position:absolute;bottom:-10px;left:-20%;width:40%;height:7px;border-radius:999px;opacity:0;
  background:linear-gradient(90deg,transparent,#fff,transparent);filter:blur(3px)
}
.spark:hover::before{animation:spark-scan 1s ease forwards}
@keyframes spark-scan{0%{left:-20%;opacity:0}20%{opacity:1}100%{left:80%;opacity:0}}

/* Grid & Card */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:30px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 0 20px rgba(0,102,255,.15);transition:all .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 0 28px rgba(0,102,255,.35)}
.card img{width:100%;height:160px;object-fit:cover}
.card-body{padding:14px}
.card h3{margin:0 0 6px;color:var(--accent)}
.card p{font-size:.95rem;color:#a8b9d1}
.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.price{color:var(--accent2);font-weight:bold}

/* 按鈕 */
.buy-btn{
  background:linear-gradient(90deg,var(--accent2),var(--accent));border:none;color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;
  box-shadow:0 0 8px var(--accent2);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden
}
.buy-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.5) 10%,transparent 40%);opacity:0;transform:scale(0);transition:opacity .3s,transform .3s}
.buy-btn:active::after{opacity:1;transform:scale(3)}
.buy-btn:hover{transform:scale(1.06);box-shadow:0 0 14px var(--accent)}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s}
.modal.show{opacity:1;pointer-events:auto}
.modal-content{
  background:#0c111b;border:1.5px solid var(--accent2);border-radius:10px;padding:20px;min-width:300px;
  box-shadow:0 0 18px rgba(0,102,255,.45);color:var(--text);position:relative;transform:scale(.85);transition:transform .25s
}
.modal.show .modal-content{transform:scale(1)}
.close{position:absolute;right:10px;top:8px;background:transparent;border:none;color:var(--accent2);font-size:20px;cursor:pointer}
.qty{display:flex;align-items:center;justify-content:center;gap:8px}
.qty button{background:var(--accent2);border:none;color:#fff;width:36px;height:36px;border-radius:6px;cursor:pointer}
.qty input{width:60px;text-align:center;background:#05080f;color:var(--text);border:1px solid var(--accent);border-radius:6px}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.actions button{padding:6px 12px;border-radius:6px;border:none;cursor:pointer;font-weight:bold}
#confirm{background:var(--accent);color:#001}
#cancel{background:#222;color:#fff}
/* 📱 手機響應修正 */
@media (max-width: 640px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 8px; }

  .user-btn {
    width: 100%;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px 12px;
  }

  .menu {
    right: auto;
    left: 0;
    width: 100%;
    top: 58px;
    border-radius: 0 0 16px 16px;
  }

  .menu-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .menu .meta {
    font-size: 0.9rem;
  }

  .hero {
    margin-top: 20px;
  }

  .hero h1 {
    font-size: 1.2rem;
    text-align: center;
    margin: 10px auto;
  }

  .grid {
    margin-top: 15px;
  }

  /* 避免被覆蓋 */
  .menu.show + .container {
    margin-top: 180px;
  }
}
/* 🚀 修正帳號彈窗層級 */
.nav { position: relative; z-index: 50; }
.menu {
  position: absolute;
  z-index: 1000; /* 強制蓋在商品區上方 */
}

/* 預防 backdrop 被遮 */
.hero, .container, main {
  position: relative;
  z-index: 1;
}
/* 🛠 修正購買彈窗被蓋住問題 */
.modal {
  z-index: 2000; /* 比 nav/menu 高就好 */
}
/* 💫 購買彈窗登場動畫 */
@keyframes modal-glow {
  0% {
    opacity: 0;
    transform: scale(0.8);
    box-shadow: 0 0 0px rgba(41,186,255,0);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(41,186,255,0.25);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 14px rgba(0,102,255,0.35);
  }
}

/* 彈窗進出動畫 */
.modal {
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease;
}
.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transform: scale(0.8);
  opacity: 0;
  background: #0c111b;
  border: 1.5px solid var(--accent2);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,102,255,0.25);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.modal.show .modal-content {
  animation: modal-glow 0.4s ease forwards;
}