*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#87c6f0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
.panel{background:rgba(20,40,60,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:14px;padding:8px 12px;box-shadow:0 4px 18px rgba(0,0,0,.15)}
#hud{position:fixed;left:12px;top:12px;font-size:15px;min-width:140px}
#hud .row{display:flex;gap:8px;align-items:center;line-height:1.6}
#hud .big{font-size:18px;font-weight:600}
#topright{position:fixed;right:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
#topright select,#topright button{background:rgba(20,40,60,.5);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:7px 10px;font-size:14px;cursor:pointer;backdrop-filter:blur(6px)}
#topright select option{color:#000}
#topright button:hover,#topright select:hover{background:rgba(20,40,60,.7)}
#help{position:fixed;left:12px;bottom:12px;font-size:13px;line-height:1.6;max-width:320px}
#help.hidden{display:none}
kbd{background:rgba(255,255,255,.2);border-radius:5px;padding:0 5px;font-family:inherit;font-size:12px}
.touch{display:none}
body.is-touch .touch{display:block}
body.is-touch .desk{display:none}
body.is-touch #help{left:auto;right:12px;bottom:auto;top:62px;font-size:12px}
#flash{position:fixed;inset:0;background:#eef4ff;opacity:0;pointer-events:none;mix-blend-mode:screen}
#creator{position:fixed;inset:0;display:none;align-items:center;justify-content:flex-end;padding:20px 5vw;pointer-events:none}
#creator.open{display:flex}
#creator .card{pointer-events:auto;background:rgba(255,255,255,.93);color:#234;border-radius:22px;padding:18px 22px;width:min(400px,92vw);max-height:92vh;overflow:auto;box-shadow:0 10px 40px rgba(0,30,60,.3)}
#creator h1{margin:0;font-size:26px}
#creator .sub{margin:2px 0 12px;color:#5a7183}
#creator label{display:flex;flex-direction:column;font-weight:600;font-size:14px;gap:4px;margin-bottom:8px}
#creator input{font-size:16px;padding:8px 10px;border-radius:10px;border:2px solid #cfe0ea;outline:none;-webkit-user-select:text;user-select:text}
#creator input:focus{border-color:#4aa3df}
.field{margin:7px 0}
.field>span{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.sw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sw button{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #bcd;cursor:pointer;padding:0}
.sw button.sel{box-shadow:0 0 0 3px #2b8fd6}
.sw input[type=color]{width:32px;height:30px;padding:0;border:none;background:none;cursor:pointer}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{border:2px solid #cfe0ea;background:#f4f9fc;color:#234;border-radius:10px;padding:5px 10px;font-size:13px;cursor:pointer}
.opts button.sel{border-color:#2b8fd6;background:#dff0fc}
.btns{display:flex;gap:10px;margin-top:14px}
.btns button{flex:1;font-size:17px;padding:10px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
.go{background:linear-gradient(#5cc85c,#3aa84a);color:#fff}
.ghost{background:#e8f1f7;color:#234}
#joy{position:fixed;left:24px;bottom:28px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.4);display:none;touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.65)}
.tbtn{position:fixed;right:28px;bottom:40px;width:78px;height:78px;border-radius:50%;font-size:34px;color:#234;background:rgba(255,255,255,.6);border:2px solid rgba(255,255,255,.8);display:none;touch-action:none}
body.is-touch #joy,body.is-touch .tbtn{display:block}
body.creating #joy,body.creating .tbtn,body.creating #help{display:none}
@media (max-width:700px){#creator{justify-content:center;align-items:flex-end;padding:10px}#creator .card{max-height:58vh;padding:12px 14px}#creator h1{font-size:20px}#hud{font-size:13px}#topright select{max-width:130px}}
#loading{position:fixed;inset:0;background:linear-gradient(#7cc7f2,#c8ecff);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;color:#245;transition:opacity .6s}
#loading div{font-size:70px;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading.gone{opacity:0;pointer-events:none}