* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height:100vh; display:flex; justify-content:center; align-items:center;
  background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  color:#fff; overflow:hidden; position:relative;
}

.overlay {
  position:absolute; width:100%; height:100%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.02), transparent 70%),
              radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02), transparent 70%);
  z-index:0;
}

.container {
  position:relative; z-index:1; background: rgba(255, 255, 255, 0.05);
  padding:40px 50px; border-radius:20px; backdrop-filter: blur(10px);
  text-align:center; max-width:420px; width:90%; box-shadow:0 12px 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}

h1 {font-size:2.8rem; background:linear-gradient(90deg,#ff9a9e,#fad0c4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:10px;}
.subtitle {color:rgba(255,255,255,0.7); font-size:0.95rem; margin-bottom:25px;}

/* 打字机光标效果 */
#typing {
  border-right: 2px solid rgba(255,255,255,0.8);
  padding-right: 2px;
  animation: blink-cursor 0.7s steps(1) infinite;
}
@keyframes blink-cursor {
  0%,50% { border-color: rgba(255,255,255,0.8); }
  51%,100% { border-color: transparent; }
}

/* 第一排按钮 */
.button-row {display:flex; gap:15px; justify-content:center; margin-bottom:20px;}
.button-row .btn {flex:1; font-size:1rem; padding:14px 0; border-radius:12px; font-weight:600; transition:all 0.3s ease; cursor:pointer; border:none;}
.btn-primary {background:linear-gradient(90deg,#667eea,#764ba2); color:#fff;}
.btn-primary:hover {transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.4);}
.btn-secondary {background:rgba(255,255,255,0.1); color:#fff;}
.btn-secondary:hover {background:rgba(255,255,255,0.2); transform:translateY(-2px);}

/* 推荐浏览器文字 */
.recommend {font-size:0.95rem; color:rgba(255,255,255,0.8); margin-bottom:20px; text-align:center;}
.browser-link {
  color: #ffd700;
  font-weight: bold;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.browser-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 浏览器提示模态框 */
#browser-warning-modal {
  display:none;
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.8); justify-content:center; align-items:center;
  z-index:999; backdrop-filter: blur(5px);
}
.modal-content {
  background:#1a1a1a; padding:30px; border-radius:15px;
  text-align:center; max-width:400px; width:90%;
  box-shadow:0 10px 25px rgba(0,0,0,0.5);
}
.modal-content h3 {font-size:1.5rem; margin-bottom:15px; color:#fff;}
.modal-content p {font-size:1rem; color:rgba(255,255,255,0.8); line-height:1.5;}
.modal-content .highlight {color:#ffd700; font-weight:bold;}
.modal-content button {
  margin-top:20px; padding:12px 25px; border-radius:8px;
  border:none; background:linear-gradient(90deg, #667eea, #764ba2);
  color:#fff; font-size:1rem; cursor:pointer; transition:all 0.3s ease;
}
.modal-content button:hover {transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.4);}