console
game.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>云汐时砂 · 游戏</title>
<style>
:root{
--gold:#e8c97d; --gold-deep:#b8934a; --ink:#0c2b2b;
--glass:rgba(10,38,38,.42); --line:rgba(232,201,125,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:"STKaiti","KaiTi",sans-serif;
color:#f5f0e1; overflow:hidden;
background:#0c2020;
}
.vignette{position:fixed;inset:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(4,20,20,.55) 100%)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
background:radial-gradient(circle at 30% 20%,rgba(232,201,125,.12),transparent 40%)}
#petals{position:fixed;inset:0;pointer-events:none;z-index:5}
.halo{position:fixed;left:21%;top:6%;width:340px;height:340px;pointer-events:none;z-index:4;
border-radius:50%;
border:1px dashed rgba(232,201,125,.35);
box-shadow:0 0 60px rgba(232,201,125,.18) inset,0 0 80px rgba(120,220,210,.12);
animation:spin 60s linear infinite}
.halo::before{content:"";position:absolute;inset:22px;border-radius:50%;
border:1px solid rgba(232,201,125,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
#loginPage{position:relative;z-index:6;height:100%;display:flex;align-items:center;
justify-content:space-between;padding:0 7vw}
.brand{max-width:560px;animation:fadeUp 1.4s ease both .2s}
.brand .eyebrow{letter-spacing:.6em;font-size:14px;color:var(--gold);opacity:.9;margin-bottom:18px}
.brand h1{
font-size:clamp(56px,7vw,104px);line-height:1.08;font-weight:400;
background:linear-gradient(180deg,#fff8e6 20%,#e8c97d 60%,#a87f34);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 0 40px rgba(232,201,125,.15)}
.brand .sub{margin-top:22px;font-size:15px;line-height:2;color:rgba(245,240,225,.75);
letter-spacing:.15em;border-left:2px solid var(--line);padding-left:16px}
.brand .quotes{margin-top:26px;display:flex;gap:26px;font-size:13px;color:rgba(232,201,125,.85);letter-spacing:.2em}
.brand .quotes span::before{content:"「";color:rgba(232,201,125,.5)}
.brand .quotes span::after{content:"」";color:rgba(232,201,125,.5)}
.panel{
width:min(90vw,400px);padding:40px 38px 30px;position:relative;
background:var(--glass);border:1px solid var(--line);border-radius:18px;
backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset;
animation:fadeUp 1.2s ease both .5s}
.panel::before,.panel::after{content:"";position:absolute;width:26px;height:26px;
border:1px solid var(--gold);opacity:.8}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 18px 0}
.panel h2{font-weight:400;font-size:30px;text-align:center;
color:#f7ecd2;letter-spacing:.35em;text-indent:.35em}
.panel .en{text-align:center;font-size:11px;letter-spacing:.5em;color:rgba(232,201,125,.6);margin:8px 0 30px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;letter-spacing:.3em;color:rgba(232,201,125,.9);margin-bottom:8px}
.field .box{display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.06);border:1px solid rgba(232,201,125,.3);
border-radius:10px;padding:0 14px;transition:.25s}
.field .box:focus-within{border-color:var(--gold);background:rgba(255,255,255,.1);
box-shadow:0 0 18px rgba(232,201,125,.15)}
.field .box svg{flex:none;opacity:.75}
.field input{flex:1;background:none;border:0;outline:0;color:#fff6e2;
font-size:15px;padding:13px 0;font-family:inherit;letter-spacing:.05em}
.field input::placeholder{color:rgba(245,240,225,.35)}
.eye{cursor:pointer;opacity:.6;transition:.2s}.eye:hover{opacity:1}
.row{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 22px;
font-size:12.5px;color:rgba(245,240,225,.65)}
.row label{display:flex;gap:6px;align-items:center;cursor:pointer;user-select:none}
.row input{accent-color:var(--gold)}
.row a{color:rgba(232,201,125,.85);text-decoration:none;letter-spacing:.1em}
.row a:hover{color:#ffe9b3}
.btn{position:relative;width:100%;padding:15px;border:0;border-radius:12px;cursor:pointer;
font-family:inherit;font-size:18px;letter-spacing:.6em;text-indent:.6em;color:#3a2a08;
background:linear-gradient(135deg,#f6e3ac,#e0b862 45%,#c79a43);
box-shadow:0 8px 26px rgba(224,184,98,.35),0 1px 0 rgba(255,255,255,.5) inset;
transition:.25s;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(224,184,98,.5)}
.btn:active{transform:translateY(0)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-80%}1