:root{color-scheme:dark;--night:#071323;--ink:#f6f4eb;--muted:#b5c6d3;--gold:#ffe092;--edge:#bb8b3b;--view-height:100dvh}
*{box-sizing:border-box}html,body{margin:0;min-width:280px;width:100%;min-height:100%;background:var(--night);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}
.opening-scene{position:fixed;inset:0;pointer-events:none}.opening-scene>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}.opening-shade{position:absolute;inset:0;background:linear-gradient(90deg,#03102308 30%,#04101e40 58%,#04101ed9 100%),linear-gradient(0deg,#030c17c9,transparent 24%,transparent 80%,#030c1740)}body[data-stage=game] .opening-scene{display:none}
.screen{position:fixed;inset:0 0 auto;z-index:5;height:var(--view-height);overflow-y:auto;overscroll-behavior:contain;display:flex;align-items:safe center;justify-content:flex-end;padding:30px max(5vw,env(safe-area-inset-right)) 30px max(24px,env(safe-area-inset-left));-webkit-overflow-scrolling:touch;touch-action:pan-y;gap:24px}
.opening-brand{position:absolute;top:5vh;left:5vw;width:min(47vw,660px);text-align:center;pointer-events:none}.opening-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 14px #0008)}.opening-brand p{display:flex;align-items:center;justify-content:center;gap:13px;font-size:13px;letter-spacing:.22em;color:#ffe3a6;text-shadow:0 2px 5px #000;margin:4px 0 0}.opening-brand p span{display:block;width:42px;height:1px;background:linear-gradient(90deg,transparent,#d8ad61)}.opening-brand p span:last-child{transform:rotate(180deg)}
.account-card{position:relative;flex:none;width:min(100%,410px);margin:auto 0;padding:32px 32px 24px;border:1px solid #c99a505e;border-radius:20px;background:linear-gradient(155deg,#0a2034ed,#061322f5);box-shadow:0 24px 80px #0007,inset 0 1px #ffdc8c48}.account-card::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,#ffe49b,transparent);pointer-events:none}.panel-ornament{text-align:center;color:#e7b960;font-size:12px;margin-bottom:10px;text-shadow:0 0 14px #ffc75666}
h1{font-size:28px;text-align:center;font-weight:800;margin:0 0 9px;letter-spacing:.12em;color:#ffe4a2;text-shadow:0 2px 0 #030b18}.description{color:var(--muted);text-align:center;line-height:1.7;margin:0 0 22px;font-size:13px}label{display:block;color:#e8dbbb;font-weight:600;font-size:13px;margin:15px 0 7px;letter-spacing:.12em}
input{display:block;width:100%;min-width:0;min-height:50px;padding:12px 14px;border:1px solid #647582;border-radius:9px;background:#030e1dd9;color:var(--ink);font-size:16px;line-height:1.4;box-shadow:inset 0 2px 5px #0005;touch-action:manipulation;caret-color:var(--gold)}input::placeholder{color:#8b9caa;font-size:12px}input:focus{outline:2px solid #f2ce7e;outline-offset:2px;border-color:#f2ce7e}input:disabled{opacity:.7}
button{min-height:48px;border-radius:12px;padding:12px 16px;font-weight:700;touch-action:manipulation}button:focus-visible{outline:3px solid #fff1bd;outline-offset:3px}.primary{width:100%;border:2px solid #ffe69b;color:#142137;background:linear-gradient(#fff2a6 0,#ffdf62 12%,#ffcf35 55%,#efa419 100%);box-shadow:inset 0 0 0 2px #fff0a04d,0 3px 0 #9b5e19,0 6px 18px #0004;font-size:18px;letter-spacing:.08em;text-shadow:0 1px #fff5}.secondary{display:block;width:100%;margin-top:14px;border:1px solid #597083;background:linear-gradient(#193149,#091a2e 65%);box-shadow:inset 0 1px #ffffff18;color:#e4e8ee;font-size:13px}.message{font-size:14px;line-height:1.65;min-height:1.65em;margin:18px 0;overflow-wrap:anywhere}.error{color:#ffb599}.message:empty{min-height:0;margin:18px 0}.footnote{font-size:11px;text-align:center;color:#a8b5bf;line-height:1.7;margin:24px 0 0;letter-spacing:.04em}.loading-card{text-align:center}progress{width:100%;height:14px;margin:20px 0 10px;accent-color:var(--gold);border:1px solid #b68b45;border-radius:20px;overflow:hidden;background:#03101e}progress::-webkit-progress-bar{background:#03101e}progress::-webkit-progress-value{background:linear-gradient(0deg,#d99922,#ffe19c);border-radius:20px}#status{font-size:15px;line-height:1.6;color:#d6e4ee}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}#fullscreen{position:fixed;left:50%;transform:translateX(-50%);top:max(8px,env(safe-area-inset-top));z-index:2;min-height:38px;padding:7px 14px;border:1px solid var(--edge);border-radius:8px;background:#081522e8;color:#f5d493;font-size:13px}#orientation-hint{position:fixed;left:50%;transform:translateX(-50%);top:max(56px,calc(env(safe-area-inset-top) + 50px));z-index:2;pointer-events:none;padding:6px 12px;border:1px solid var(--edge);border-radius:6px;background:#081522e8;color:#f5d493;font-size:13px;white-space:nowrap}.noscript{position:fixed;inset:20px;z-index:10;background:var(--night);padding:30px}
@media(orientation:landscape){#orientation-hint{display:none}}
@media(max-width:700px) and (orientation:portrait){.screen{display:block;padding:28px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.opening-brand{position:relative;top:auto;left:auto;width:min(90%,340px);margin:0 auto 76px}.opening-brand p{font-size:11px;letter-spacing:.14em}.account-card{width:min(100%,410px);margin:0 auto;padding:24px}.opening-scene>img{height:68%;object-position:50% 35%}.opening-shade{background:linear-gradient(0deg,#071323 28%,#071323b3 48%,#07132300 80%)}.description{margin-bottom:16px}.footnote{margin-top:20px}}
@media(max-height:600px) and (orientation:landscape){.screen{padding-top:16px;padding-bottom:16px;padding-right:4vw}.opening-brand{top:7vh;width:42vw;left:3vw}.account-card{width:44vw;max-width:410px;padding:20px 24px}.panel-ornament{display:none}h1{font-size:24px}.description{margin-bottom:12px}label{margin-top:10px}input{min-height:46px;padding:10px 12px}.footnote{margin-top:16px}.opening-brand p{font-size:10px;letter-spacing:.08em}}
@media(max-height:550px) and (orientation:portrait){.opening-brand{width:180px;margin-bottom:20px}.opening-brand p{display:none}.screen{padding-top:16px}.account-card{padding:20px}.panel-ornament{display:none}}
@media(prefers-reduced-motion:no-preference){button{transition:filter .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.08)}.primary:active:not(:disabled){transform:translateY(2px)}.account-card{animation:arrive .4s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}