:root{--panel-bg: rgba(24, 22, 34, .95);--panel-border: #4a4458;--accent: #f2c94c;--text: #f4f1ea}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#1a1822;font-family:ui-monospace,SF Mono,Cascadia Code,Menlo,Consolas,monospace;color:var(--text);-webkit-font-smoothing:none;image-rendering:pixelated}#App{position:fixed;top:0;right:0;bottom:0;left:0}#Game{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:default}.Panel{position:absolute;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:10px;box-shadow:0 12px 40px #00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.Hidden{display:none!important}#Chat{left:50%;bottom:24px;transform:translate(-50%);width:min(620px,92vw);max-height:46vh;display:flex;flex-direction:column;overflow:hidden;z-index:12}#Chat .Msg{max-width:80%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}#Chat .Msg.User{align-self:flex-end;background:var(--accent);color:#2a2410;border-bottom-right-radius:3px}#Chat .Msg.Npc{align-self:flex-start;background:#2f2b3d;border-bottom-left-radius:3px}#Chat .Msg.Npc.Pending{opacity:.6;font-style:italic}#ChatHeader{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--panel-border);background:#ffffff08}#ChatAvatar{width:40px;height:40px;image-rendering:pixelated;border-radius:6px;background:#2a2636}#ChatTitle{font-weight:700;font-size:15px}#ChatSubtitle{font-size:11px;opacity:.6}#ChatClose{margin-left:auto;cursor:pointer;background:none;border:none;color:var(--text);font-size:18px;opacity:.6;padding:4px 8px}#ChatClose:hover{opacity:1}#ChatLog{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5}#ChatInputRow{display:flex;gap:8px;padding:12px;border-top:1px solid var(--panel-border)}#ChatInput{flex:1;background:#15131d;border:1px solid var(--panel-border);border-radius:8px;color:var(--text);padding:10px 12px;font:inherit;font-size:13px;outline:none}#ChatInput:focus{border-color:var(--accent)}#ChatSend{background:var(--accent);color:#2a2410;border:none;border-radius:8px;padding:0 18px;font:inherit;font-weight:700;cursor:pointer}#ChatSend:disabled{opacity:.5;cursor:default}#Prompt{left:50%;bottom:24px;transform:translate(-50%);padding:8px 16px;font-size:13px;pointer-events:none}#Prompt b{color:var(--accent)}#Hud{top:14px;left:14px;padding:8px 12px;font-size:12px;line-height:1.6;pointer-events:none;opacity:.85}#Hud b{color:var(--accent)}#Minimap{position:absolute;top:14px;right:14px;width:168px;height:168px;border-radius:8px;background:#18162266;border:2px solid rgba(255,255,255,.25);box-shadow:0 6px 20px #00000059;image-rendering:pixelated;pointer-events:none}#Customizer{top:0;right:0;bottom:0;left:0;position:fixed;display:flex;align-items:center;justify-content:center;background:#0a090ecc;z-index:10}#Customizer h1{font-size:22px;margin-bottom:4px;color:var(--accent)}#Customizer .Sub{font-size:12px;opacity:.6;margin-bottom:20px}#Customizer .Field{margin-bottom:14px}#Customizer .Field label{display:block;font-size:12px;margin-bottom:6px;opacity:.8}#Customizer .Swatches{display:flex;gap:8px;flex-wrap:wrap}#Customizer .Swatch{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer}#Customizer .Swatch.Selected{border-color:var(--text);transform:scale(1.1)}#Customizer .Opts{display:flex;gap:8px;flex-wrap:wrap}#Customizer .Opt{padding:6px 12px;border:1px solid var(--panel-border);border-radius:6px;font-size:12px;cursor:pointer;background:#15131d}#Customizer .Opt.Selected{background:var(--accent);color:#2a2410;border-color:var(--accent)}#Customizer .Row{display:flex;gap:10px;margin-top:22px}#Customizer .Btn{flex:1;padding:12px;border:none;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}#Customizer .Btn.Primary{background:var(--accent);color:#2a2410}#Customizer .Btn.Ghost{background:#2f2b3d;color:var(--text)}#CustomizerCard{width:min(440px,92vw);padding:24px;max-height:92vh;overflow:auto}#CustomizerPreview{display:block;margin:0 auto 12px;width:96px;height:96px;image-rendering:pixelated;background:#2a2636;border-radius:10px;border:1px solid var(--panel-border)}#CustomizerFrames{display:block;margin:0 auto 20px;width:160px;height:240px;image-rendering:pixelated;background:#2a2636;border-radius:10px;border:1px solid var(--panel-border)}#Customizer .Opt.Thumb{padding:3px;background:#15131d;line-height:0}#Customizer .ThumbCanvas{display:block;width:32px;height:48px;image-rendering:pixelated}#NameInput{width:100%;background:#15131d;border:1px solid var(--panel-border);border-radius:8px;color:var(--text);padding:10px 12px;font:inherit;font-size:13px;outline:none}#NameInput:focus{border-color:var(--accent)}#Loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a090eeb;z-index:20}#Loading h1{font-size:18px;color:var(--accent);margin-bottom:4px}#Loading .Sub{font-size:12px;opacity:.6;margin-bottom:20px}#Loading .Step{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 0}#Loading .Step .Dot{width:10px;height:10px;border-radius:50%;background:#4a4458;flex:none}#Loading .Step.Loading .Dot{background:var(--accent);animation:pulse .9s ease-in-out infinite}#Loading .Step.Ready .Dot{background:#56b366}#Loading .Step.Error .Dot{background:#e0584f}#Loading .Step.Idle{opacity:.5}#LoadingCard{width:min(360px,90vw);padding:28px}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}#Touch{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#Touch .Btn{position:absolute;border-radius:50%;background:#ffffff1f;border:2px solid rgba(255,255,255,.55);color:#ffffffe6;font:inherit;font-weight:700;pointer-events:auto;touch-action:none;cursor:pointer;display:flex;align-items:center;justify-content:center}#Touch .Btn.Active{background:#ffffff52}#Touch .Btn.A{width:76px;height:76px;right:4px;bottom:4px;font-size:22px}#Touch .Btn.B{width:62px;height:62px;right:82px;bottom:64px;font-size:18px}#Touch .Ripple{position:fixed;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:#ffffff24;pointer-events:none;z-index:7;animation:t-ripple .42s ease-out forwards}#TouchStick{position:absolute;left:28px;bottom:28px;width:150px;height:168px;background:#ffffff61;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);pointer-events:auto;touch-action:none}#TouchStick:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;background:#ffffff12;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}#TouchZones{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;pointer-events:none}#TouchZoneWalk{fill:#fff3;stroke:#ffffff80;stroke-width:1;vector-effect:non-scaling-stroke}#TouchZoneDead{fill:#12101a73;stroke:#ffffffbf;stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}#TouchKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#ffffff38;border:2px solid rgba(255,255,255,.7);transform:translate(0);z-index:1}@keyframes t-ripple{0%{transform:scale(.25);opacity:.7}to{transform:scale(1.7);opacity:0}}#Invite{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a090ecc;z-index:14}#Invite h1{font-size:20px;color:var(--accent);margin-bottom:4px}#Invite .Sub{font-size:12px;opacity:.6;margin-bottom:16px}#Invite .PhotoRow{display:flex;gap:14px;align-items:center;margin-bottom:8px}#Invite .Photo{flex:none;width:96px;height:96px;border-radius:10px;border:2px dashed var(--panel-border);background:#15131d center / cover no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer}#Invite .Photo .Hint{font-size:12px;opacity:.7}#Invite .Photo.HasPhoto .Hint{display:none}#Invite .Sprite{width:64px;height:96px;image-rendering:pixelated;background:#2a2636;border-radius:8px;border:1px solid var(--panel-border)}#Invite .Status{font-size:11px;opacity:.7;min-height:14px;margin-bottom:10px}#Invite .Field{margin-bottom:10px}#Invite .Field label{display:block;font-size:12px;margin-bottom:4px;opacity:.8}#Invite .Field input,#Invite .Field textarea{width:100%;background:#15131d;border:1px solid var(--panel-border);border-radius:8px;color:var(--text);padding:8px 10px;font:inherit;font-size:13px;outline:none;resize:vertical}#Invite .Field input:focus,#Invite .Field textarea:focus{border-color:var(--accent)}#Invite .Row{display:flex;gap:10px;margin-top:14px}#Invite .Btn{flex:1;padding:12px;border:none;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}#Invite .Btn.Primary{background:var(--accent);color:#2a2410}#Invite .Btn.Ghost{background:#2f2b3d;color:var(--text)}#InviteCard{width:min(440px,92vw);padding:24px;max-height:92vh;overflow:auto}#Mailbox{left:50%;bottom:24px;transform:translate(-50%);width:min(440px,92vw);max-height:46vh;display:flex;flex-direction:column;overflow:hidden;z-index:12}#Mailbox .MailHeader{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--panel-border);background:#ffffff08}#Mailbox .MailTitle{font-weight:700;font-size:14px}#Mailbox .MailSubtitle{font-size:11px;opacity:.6}#Mailbox .MailClose{margin-left:auto;background:none;border:none;color:var(--text);font-size:18px;opacity:.6;cursor:pointer;padding:4px 8px}#Mailbox .MailClose:hover{opacity:1}#Mailbox .Notes{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:13px}#Mailbox .Empty{opacity:.5;font-size:12px;font-style:italic}#Mailbox .MailNote{background:#2f2b3d;border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;word-break:break-word}#Mailbox .MailNote time{font-size:10px;opacity:.5}#Mailbox .Compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--panel-border)}#Mailbox .Note{flex:1;background:#15131d;border:1px solid var(--panel-border);border-radius:8px;color:var(--text);padding:8px 10px;font:inherit;font-size:13px;outline:none;resize:none}#Mailbox .Note:focus{border-color:var(--accent)}#Mailbox .Leave{background:var(--accent);color:#2a2410;border:none;border-radius:8px;padding:0 16px;font:inherit;font-weight:700;cursor:pointer}#Invite .SpriteCol{display:flex;flex-direction:row;align-items:stretch;gap:6px}#Invite .EditOutlook{background:#2f2b3d;color:var(--text);border:1px solid var(--panel-border);border-radius:6px;padding:4px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}#Invite .EditOutlook:hover{border-color:var(--accent)}#Outlook{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a090ed9;z-index:16}#Outlook h1{font-size:18px;color:var(--accent);margin-bottom:12px;text-align:center}#Outlook .Field{margin-bottom:12px}#Outlook .Field label{display:block;font-size:12px;margin-bottom:6px;opacity:.8}#Outlook .Swatches,#Outlook .Opts{display:flex;gap:8px;flex-wrap:wrap}#Outlook .Swatch{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer}#Outlook .Swatch.Selected{border-color:var(--text);transform:scale(1.1)}#Outlook .Opt{padding:6px 12px;border:1px solid var(--panel-border);border-radius:6px;font-size:12px;cursor:pointer;background:#15131d}#Outlook .Opt.Selected{background:var(--accent);color:#2a2410;border-color:var(--accent)}#Outlook .Row{display:flex;gap:10px;margin-top:18px}#Outlook .Btn{flex:1;padding:12px;border:none;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}#Outlook .Btn.Primary{background:var(--accent);color:#2a2410}#Outlook .Btn.Ghost{background:#2f2b3d;color:var(--text)}#OutlookCard{width:min(380px,92vw);padding:24px;max-height:92vh;overflow:auto}#OutlookPreview{display:block;margin:0 auto 16px;width:96px;height:96px;image-rendering:pixelated;background:#2a2636;border-radius:10px;border:1px solid var(--panel-border)}#Mailbox .MailNote{max-width:85%}#Mailbox .MailNote.You{align-self:flex-end;background:var(--accent);color:#2a2410}#Mailbox .MailNote.You time{color:#2a2410;opacity:.55}#Mailbox .MailNote.Npc{align-self:flex-start}#MailButton{position:absolute;top:192px;right:14px;width:44px;height:44px;border-radius:10px;background:var(--panel-bg);border:2px solid var(--panel-border);color:var(--text);font-size:20px;cursor:pointer;z-index:8;box-shadow:0 6px 20px #00000059}#MailButton:hover{border-color:var(--accent)}#MailInbox{left:50%;bottom:24px;transform:translate(-50%);width:min(420px,92vw);max-height:50vh;display:flex;flex-direction:column;overflow:hidden;z-index:13}#MailInbox .MailHeader{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--panel-border);background:#ffffff08}#MailInbox .MailTitle{font-weight:700;font-size:14px}#MailInbox .MailBack,#MailInbox .MailClose{background:none;border:none;color:var(--text);font-size:18px;opacity:.6;cursor:pointer;padding:4px 8px}#MailInbox .MailBack:hover,#MailInbox .MailClose:hover{opacity:1}#MailInbox .MailClose{margin-left:auto}#MailInbox .MailList{flex:1;overflow-y:auto;display:flex;flex-direction:column}#MailInbox .MailRow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:none;border-bottom:1px solid rgba(255,255,255,.05);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}#MailInbox .MailRow:hover{background:#ffffff0a}#MailInbox .MailWho{font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}#MailInbox .Dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}#MailInbox .MailSnip{font-size:12px;opacity:.6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#MailInbox .Empty{opacity:.5;font-size:12px;font-style:italic;padding:16px}#MailInbox .MailThread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13px}#MailInbox .MailMsg{max-width:80%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}#MailInbox .MailMsg.You{align-self:flex-end;background:var(--accent);color:#2a2410;border-bottom-right-radius:3px}#MailInbox .MailMsg.Npc{align-self:flex-start;background:#2f2b3d;border-bottom-left-radius:3px}