:root{font-family:"Noto Serif TC",PMingLiU,Times New Roman,serif;color:#f3e6c4}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;background:#000;overflow:hidden}.viewport-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#050505}.viewport{position:relative;width:800px;height:600px;overflow:hidden;image-rendering:pixelated;image-rendering:crisp-edges;background:#1a140c;box-shadow:0 0 0 2px #3a2a14,0 0 40px #000}.layer{position:absolute;top:0;right:0;bottom:0;left:0}.hud-layer{pointer-events:none}.spr{position:absolute;pointer-events:none;image-rendering:pixelated}.hit{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto}.hit:hover{filter:brightness(1.15)}.hit:active{filter:brightness(.85)}.field-input{position:absolute;z-index:6;background:transparent;border:0;outline:none;color:#fff6c8;caret-color:#fff6c8;font:14px Courier New,monospace;text-shadow:1px 1px 0 #000;pointer-events:auto}.field-input:focus{outline:1px solid rgba(255,230,160,.35)}.gold-text{position:absolute;color:#ffe7a0;text-shadow:1px 1px 0 #000;font-size:13px;white-space:nowrap;pointer-events:none}.hud-name{transform:translate(-50%);text-align:center}.hud-stat{position:absolute;color:#e9e9e9;text-shadow:1px 1px 0 #000;font-size:13px;white-space:nowrap;pointer-events:none;transform:translate(-50%);text-align:center}.hud-level{position:absolute;color:#e9e9e9;text-shadow:1px 1px 0 #000;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none}.hud-gauge-fill{position:absolute;pointer-events:none;image-rendering:pixelated;background-repeat:repeat-y}.hud-gauge-fill-h{position:absolute;pointer-events:none;image-rendering:pixelated;background-repeat:repeat-x}.slot-name{position:absolute;width:140px;text-align:center;color:#ffe7a0;text-shadow:1px 1px 0 #000;font-size:13px;pointer-events:none}.slot-field,.record-field{position:absolute;color:#ffe7a0;text-shadow:1px 1px 0 #000;font-size:12px;white-space:nowrap;pointer-events:none;z-index:4}.menu-choice{position:absolute;color:#ffe7a0;text-shadow:1px 1px 0 #000;font-size:13px;text-align:center;pointer-events:none;z-index:5}.step-desc{position:absolute;width:170px;max-height:42px;overflow:hidden;color:#ffe7a0;text-shadow:1px 1px 0 #000;font-size:12px;line-height:14px;white-space:normal;pointer-events:none;z-index:5}.color-gauge{position:absolute;height:3px;z-index:5;pointer-events:none}.msgbox{position:absolute;left:200px;top:220px;width:400px;min-height:120px;background:linear-gradient(#3a2c18,#1c140c);border:3px solid #c9a35a;box-shadow:inset 0 0 0 1px #6a4e22,0 8px 24px #000;padding:22px 20px 16px;text-align:center;z-index:20}.msgbox p{margin:0 0 18px;line-height:1.5}.stone-btn{min-width:90px;height:28px;background:#5a4220;border:2px solid #d4b36a;color:#ffe7a0;cursor:pointer;font:13px "Noto Serif TC",serif}.stone-btn:hover{background:#7a5a2c}.wizard-list{position:absolute;left:18px;right:18px;top:96px;bottom:80px;overflow:hidden}.wizard-item{display:block;width:100%;height:28px;margin:6px 0;background:transparent;border:1px solid transparent;color:#ffe7a0;text-align:center;cursor:pointer;font:13px "Noto Serif TC",serif}.wizard-item.active,.wizard-item:hover{border-color:#d4b36a;background:#5038108c}.color-row{display:flex;align-items:center;gap:8px;margin:10px 16px;font-size:12px}.color-row input[type=range]{flex:1}.dice-row{display:flex;justify-content:center;gap:10px;margin-top:16px}.die{width:36px;height:36px;border:2px solid #d4b36a;background:#2a1c0c;color:#ffe7a0;display:flex;align-items:center;justify-content:center;font-size:18px}.preview-char{position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated;z-index:3}.switch-put-fx{mix-blend-mode:lighter;pointer-events:none}.ability-plus{color:#f05050}.stub{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000c;z-index:15;text-align:center;padding:40px}.world-canvas{position:absolute;left:0;top:0;width:800px;height:520px;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}.npc-dialog-shell{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:12;min-width:240px;padding:16px 18px;background:linear-gradient(#3a2c18,#1c140c);border:3px solid #c9a35a;color:#ffe7a0;text-align:center}.chat-log{position:absolute;z-index:12;pointer-events:none;font-size:12px;text-shadow:1px 1px 0 #000;overflow:hidden}.chat-log-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-whisper-input,.chat-message-input{position:absolute;z-index:13;height:14px;border:0;padding:0;background:transparent;color:#e9e9e9;font-size:12px;outline:none}.chat-whisper-input{width:120px}.chat-message-input{width:260px}.potal-menu{position:absolute;left:256px;top:50px;z-index:12;min-width:288px;padding:8px;background:#1c140c;border:2px solid #c9a35a;color:#ffe7a0;display:flex;flex-direction:column;gap:2px}.potal-dest{text-align:left;background:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:2px 4px}.friend-menu{position:absolute;right:0;top:0;z-index:12;min-width:194px;padding:8px;background:#1c140c;border:2px solid #c9a35a;color:#ffe7a0;display:flex;flex-direction:column;gap:2px}.friend-regist{position:absolute;left:50%;top:100px;transform:translate(-50%);z-index:13;min-width:200px;padding:8px;background:#1c140c;border:2px solid #c9a35a;color:#ffe7a0;display:flex;flex-direction:column;gap:4px}.friend-online{color:#ffe7a0}.friend-offline{color:red}