:root{color-scheme:dark;--bg: #0a0a10;--panel: #14141d;--text: #e8e8f2;--dim: #8b8b9e}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(1200px 600px at 50% -10%,#1c2740 0%,transparent 60%),var(--bg);color:var(--text);font-family:Malgun Gothic,Apple SD Gothic Neo,Noto Sans KR,sans-serif;overflow:hidden}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:6px}html[data-runtime=desktop] body,html[data-runtime=mobile] body{background:#000;user-select:none;-webkit-user-select:none;cursor:default}html[data-runtime=desktop] #app,html[data-runtime=mobile] #app{padding:0;gap:0}html[data-runtime=desktop] #game-shell,html[data-runtime=mobile] #game-shell{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}html[data-runtime=desktop] #mobile-note,html[data-runtime=mobile] #mobile-note,html[data-touch="1"] #mobile-note{display:none}#game-shell{width:min(100%,calc((100vh - 24px) * 16 / 9));aspect-ratio:16 / 9;border:1px solid #2a2a3c;border-radius:10px;box-shadow:0 18px 50px #0000008c;overflow:hidden;line-height:0;background:#000}#game-root,#game-root canvas{display:block;width:100%;height:100%}#chat-dock{position:fixed;left:50%;bottom:108px;transform:translate(-50%);width:min(560px,calc(100vw - 24px));z-index:20}#chat-dock[hidden]{display:none}#chat-input{width:100%;padding:8px 12px;border:1px solid #3a3a52;border-radius:6px;background:#0c0c14eb;color:#e8e8f2;font:14px Malgun Gothic,Apple SD Gothic Neo,sans-serif;outline:none;overflow:hidden;text-overflow:ellipsis}#auth-dock,#friend-dock,#char-dock,#map-dock{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 24px));max-height:90vh;overflow-x:hidden;overflow-y:auto;z-index:30;padding:16px;border:1px solid #3a3a52;border-radius:10px;background:#0c0c14f5}#friend-dock{inset:auto 28px 120px auto;transform:none;width:min(360px,calc(100vw - 48px))}#auth-dock[hidden],#friend-dock[hidden],#char-dock[hidden],#map-dock[hidden]{display:none}#auth-dock input,#friend-dock input,#char-dock input,#map-dock textarea,#auth-dock button,#friend-dock button,#char-dock button,#map-dock button{display:block;width:100%;margin:6px 0;padding:8px 10px;border:1px solid #3a3a52;border-radius:6px;background:#14141d;color:#e8e8f2;font:14px Malgun Gothic,Apple SD Gothic Neo,sans-serif;overflow:hidden;text-overflow:ellipsis}.overlay-row{display:flex;flex-wrap:wrap;gap:8px}.overlay-row button{width:auto;flex:1 1 30%;min-width:0;font-size:13px;white-space:normal;overflow:hidden;text-overflow:ellipsis}.overlay-title{margin:0 0 8px;color:#f0d080}#auth-error,#char-error,#map-error{min-height:1.2em;margin:4px 0;color:#e07070;font-size:12px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.job-pick.is-on{background:#3a4a28;border-color:#f0d080}#mobile-note{margin:0;color:var(--dim);font-size:13px;text-align:center;display:none}@media(max-width:900px),(pointer:coarse){#mobile-note{display:block}}html[data-touch="1"] #mobile-note{display:none}#touch-pad{display:none;position:fixed;inset:0;z-index:40;pointer-events:none;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}html[data-touch="1"] #touch-pad:not([hidden]){display:block}#touch-pad button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #4a4a68;border-radius:10px;background:#121220b8;color:#e8e8f2;font:13px Malgun Gothic,Apple SD Gothic Neo,sans-serif;min-width:48px;min-height:48px}#touch-pad button:disabled,#touch-pad .touch-gap{visibility:hidden;pointer-events:none;min-width:48px;min-height:48px;border:0;background:transparent}#touch-pad button:active{background:#505a32d9}.touch-title-row{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;gap:8px}.touch-play{position:absolute;left:8px;right:8px;bottom:56px;display:flex;justify-content:space-between;align-items:flex-end}.touch-dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}.touch-actions{display:grid;grid-template-columns:repeat(2,64px);gap:8px}.touch-menu-row{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.touch-menu-row button{min-width:40px;min-height:36px;font-size:12px;padding:0 6px}
