:root{font-family:Songti SC,"Noto Serif SC",STSong,serif;color:#fff2d2;background:#201a17;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}#app,#scene{position:fixed;top:0;right:0;bottom:0;left:0}#scene canvas{display:block;width:100%;height:100%}#app:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,12,10,.48),transparent 18%,transparent 75%,rgba(15,12,10,.5));z-index:1}.topbar,.bottom-bar{position:absolute;z-index:2;left:0;right:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.topbar{top:0;padding:max(24px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left))}.brand{display:flex;align-items:center;gap:11px;text-shadow:0 1px 5px #1c130e}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d9ad64;background:#8d3526;color:#ffdfa1;font-size:21px;font-weight:700;box-shadow:inset 0 0 0 3px #8d3526,inset 0 0 0 4px #d9ad64}.brand-name{font-size:16px;font-weight:700;white-space:nowrap}.brand-name small{display:block;margin-top:3px;color:#d5bc91;font-size:10px;font-weight:400}.reset,.direction{display:grid;place-items:center;border:1px solid rgba(238,218,180,.4);background:#201b179e;color:#f9e8c6;cursor:pointer;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .15s,border-color .15s,transform .15s}.reset{width:42px;height:42px;border-radius:50%;font-family:Arial,sans-serif;font-size:25px}.reset:hover,.direction:hover,.direction.active{background:#82422ce6;border-color:#e5be80}.reset:active,.direction:active{transform:scale(.94)}button:focus-visible{outline:2px solid #ffe2a2;outline-offset:3px}.bottom-bar{bottom:0;align-items:flex-end;padding:0 max(32px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));gap:18px}.message{display:flex;gap:10px;align-items:center;padding:11px 15px;border-left:2px solid #bc8b4f;background:#1e1814a3;text-shadow:0 1px 3px #1c130e}.message-dot{width:7px;height:7px;border-radius:50%;background:#e4b86b;box-shadow:0 0 10px #e2ad55;flex:none}.message-label{display:block;color:#d1b996;font-size:10px;margin-bottom:5px}.message strong{display:block;color:#fff1d4;font-size:13px;font-weight:500;white-space:nowrap}.movement{display:flex;align-items:flex-end;gap:10px}.movement-label{font-size:11px;color:#e2cba4;text-shadow:0 1px 4px #1c130e;padding-bottom:15px}.direction-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px}.direction{font-family:Arial,sans-serif;font-size:21px;border-radius:4px}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:2}.right{grid-column:3;grid-row:2}.loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#201a17;color:#ead3aa;font-size:13px;transition:opacity .35s}.loading.hidden{opacity:0;pointer-events:none}.loading-mark{display:grid;place-items:center;width:54px;height:54px;border:1px solid #bc8b4f;color:#eac486;font-size:30px}.loading-line{width:50px;height:1px;background:#a77b46;animation:breathe 1.2s ease-in-out infinite alternate}.error{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);width:min(320px,calc(100% - 40px));padding:20px;background:#372922;border:1px solid #af8050;color:#ffeaca;text-align:center;font-size:14px;line-height:1.7}.error[hidden]{display:none}@keyframes breathe{0%{opacity:.25;transform:scaleX(.5)}to{opacity:1;transform:scaleX(1)}}@media(max-width:600px){.topbar{padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}.bottom-bar{padding:0 max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));gap:10px}.brand-mark{width:34px;height:34px;font-size:19px}.brand-name{font-size:15px}.reset{width:40px;height:40px}.movement-label{display:none}.message{padding:10px 9px;gap:7px}.message strong{font-size:12px}.direction-pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}}@media(max-width:350px){.message-label{display:none}.message strong{max-width:105px;white-space:normal;line-height:1.5}.bottom-bar{padding-left:12px;padding-right:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.entry{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#110c0ab8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.entry[hidden]{display:none}.entry-panel{width:min(410px,100%);padding:32px 30px 25px;text-align:center;background:#30221b;border:1px solid #9b754a;box-shadow:0 20px 80px #0b0807aa;color:#f7e7ca}.entry-seal{display:grid;place-items:center;margin:auto;width:48px;height:48px;border:1px solid #d6ac65;color:#eac77e;font-size:28px}.entry-eyebrow{margin-top:20px;color:#c6a06a;font-size:11px;letter-spacing:2px}.entry h1{font-size:23px;font-weight:600;margin:12px 0 7px}.entry p{margin:0 0 24px;color:#c1aa89;font-size:13px}.name-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.name-options button,.refresh-names,.enter{cursor:pointer;font:inherit}.name-options button{min-height:50px;border:1px solid #765b40;background:#3c2d24;color:#e7d1ac;font-size:16px}.name-options button.selected{border-color:#e1b96e;background:#67452e;color:#fff1ca}.name-options button:focus-visible,.refresh-names:focus-visible,.enter:focus-visible{outline:2px solid #fff0c2;outline-offset:3px}.refresh-names{padding:12px 20px;border:0;background:transparent;color:#d6b783;font-size:12px}.enter{display:block;width:100%;min-height:48px;border:1px solid #dda968;background:#9b3a27;color:#fff1d2;font-size:15px}.enter:hover{background:#b3462c}.enter:disabled{opacity:.6;cursor:wait}.entry-message{min-height:20px;margin-top:10px;color:#f5c5a5;font-size:12px;line-height:1.5}@media(max-width:480px){.entry-panel{padding:27px 20px 20px}.entry h1{font-size:21px}}
